Günümüzde internet, bilgiye erişimimizi genişleten, iletişimimizi güçlendiren ve dünyanın dört bir yanındaki insanları bir araya getiren bir platformdur. Web sayfalarının temelini oluşturan HTML (HyperText Markup Language), bu dijital dünyanın yapı taşıdır. Bu yazıda, HTML’nin temel kavramlarına ve işlevlerine göz atarak, başlangıç düzeyinde bir web geliştirici olmak için gerekli olan HTML örneklerini keşfedeceğiz.
HTML Nedir?
HTML, web sayfalarını oluşturmak ve yapılandırmak için kullanılan bir işaretleme dilidir. Metin, resim, bağlantılar ve diğer içerikleri organize etmek ve tarayıcılarda düzgün bir şekilde görüntülenmelerini sağlamak amacıyla kullanılır. Temel olarak, bir web sayfasının iskeletini oluşturan HTML, diğer web teknolojileriyle bir araya gelerek etkileşimli ve görsel açıdan çekici deneyimler sunar.
HTML Kod Örnekleri ve Anlamları
- HTML Başlangıç ve Bitiş Etiketleri:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Örneği</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<p>Bu bir HTML örneğidir.</p>
</body>
</html>
- Bu örnek, bir HTML belgesinin temel yapısını gösterir.
<!DOCTYPE html>belge türünü belirtir ve<html>,<head>,<body>gibi ana etiketleri içerir. - Bağlantı Oluşturma:
<a href="https://www.ornek.com" target="_blank">Örnek Bağlantı</a>
- Bu örnek, bir web sayfasından başka bir sayfaya bağlantı oluşturmayı gösterir.
hrefözelliği ile hedef sayfanın URL’sini belirtir. - Resim Ekleme:
<img src="ornek-resim.jpg" alt="Örnek Resim">
- Bu örnek, bir resmi HTML sayfasına eklemenin basit bir yolunu gösterir.
srcözelliği, resmin dosya yolunu belirtir. - Listeler:
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
</ul>
<ol>
<li>Adım 1</li>
<li>Adım 2</li>
</ol>
- Bu örnek, sırasız (
<ul>) ve sıralı (<ol>) listeleri oluşturmayı gösterir. Her bir madde<li>etiketi içinde yer alır. - Başlık ve Paragraf:
<h2>HTML Başlık ve Paragraf</h2>
<p>Bu bir paragraf örneğidir. HTML ile başlık ve paragraf eklemek çok kolay!</p>
- Form ve Input:
<form action="/submit" method="post">
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Gönder</button>
</form>
- Bu örnek, bir form oluşturmayı ve kullanıcı adı ile şifre girişi için input alanları eklemeyi gösterir.
- Tablo Oluşturma:
<table>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
<tr>
<td>Bilgisayar</td>
<td>2000 TL</td>
</tr>
<tr>
<td>Cep Telefonu</td>
<td>1500 TL</td>
</tr>
</table>
- Bu örnek, bir tablo oluşturmayı ve başlık ile içerik satırlarını eklemeyi gösterir.
- HTML Gömme:
<iframe src="https://www.ornekharita.com" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
- Bu örnek, bir harita veya başka bir web sayfasını HTML içinde gömme işlemini gösterir.
- CSS ile Stil Ekleme:
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
- Bu örnek, HTML sayfasına CSS kullanarak stil eklemenin temelini gösterir.
- Müzik ve Video Ekleme:
<audio controls>
<source src="ornek-ses.mp3" type="audio/mp3">
Tarayıcınız audio elementini desteklemiyor.
</audio>
<video width="320" height="240" controls>
<source src="ornek-video.mp4" type="video/mp4">
Tarayıcınız video elementini desteklemiyor.
</video>
- Bu örnek, ses ve video dosyalarını HTML sayfasına eklemeyi gösterir.
- Basit bir HTML Sayfası:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Örnek HTML Sayfası</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<header>
<h1>Hoş Geldiniz!</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Bölüm 1</a></li>
<li><a href="#section2">Bölüm 2</a></li>
<li><a href="#section3">Bölüm 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Bölüm 1: HTML Temelleri</h2>
<p>HTML (HyperText Markup Language), web sayfalarının temel yapısını oluşturan bir işaretleme dilidir.</p>
</section>
<section id="section2">
<h2>Bölüm 2: CSS Stillemesi</h2>
<p>CSS (Cascading Style Sheets), HTML sayfalarını stilize etmek için kullanılan bir stil dilidir.</p>
</section>
<section id="section3">
<h2>Bölüm 3: JavaScript İşlevselliği</h2>
<p>JavaScript, web sayfalarına etkileşim ve dinamizm eklemek için kullanılan bir programlama dilidir.</p>
</section>
<footer>
<p>© 2023 Örnek HTML Sayfası</p>
</footer>
</body>
</html>
Bu örnekler, HTML’nin çeşitli kullanımlarını ve farklı özelliklerini anlamanıza yardımcı olacaktır. Her birini inceleyerek, HTML’nin zengin işlevselliğini keşfedin ve projelerinizde kullanmaya başlayın!
