HTML Nedir? Nerelerde Kullanılır?
HTML, web sayfalarının temel yapısını oluşturmak için kullanılan bir işaretleme dilidir.
SolStock / iStock
HTML Bir Programlama Dili midir?
HTML, genellikle programlama dili olarak bilinse de aslında bir işaretleme dilidir. Programlama dilleri (Python, Java, PHP gibi) ile değişkenler, döngüler ve koşullu ifadeler kullanılarak dinamik işlemler yapılırken HTML ile web sayfalarının şekillendirilmesi ve düzenlenmesi sağlanır. Bu programlama dilleri kullanılarak web, mobil ve masaüstü uygulamaları geliştirilir. HTML; JavaScript, PHP gibi dillerle birlikte kullanılarak kullanıcıyla etkileşim kuran ve içeriği değişebilen web sayfaları hazırlanabilir.
HTML Nerelerde Kullanılır?
Web Sitelerinin Şekillendirilmesinde:
HTML, web sitelerinin temel görünümünü oluşturur. Yazılar, resimler, linkler, videolar ve diğer içerikler HTML kodlarıyla sayfaya yerleştirilir ve düzenlenir. Web sitelerinin altyapısını oluşturan HTML kodları, web tarayıcıları tarafından okunup görsel bir sayfa hâline getirilerek kullanıcıya gösterilir.
İçerik Düzenleme ve Yapılandırma:
HTML, metinlerin başlık, paragraf, liste ve tablo gibi farklı şekillerde düzenlenmesini sağlar. Ayrıca resim, video ve ses dosyası gibi multimedya içerikleri de HTML etiketleri kullanılarak web sayfalarına eklenebilir.
E-Posta:
HTML, görsel açıdan zengin e-posta tasarımları oluşturmak için kullanılır. Bu tür tasarımlar genellikle pazarlama kampanyaları ve elektronik bültenlerde tercih edilir.
SEO (Arama Motoru Optimizasyonu):
Arama motorları, web sayfalarının içeriğini saptamak için HTML kodlarını inceler. HTML’in doğru kullanımı, web sitelerinin arama motoru sıralamalarında daha üst sıralarda yer almasına katkı sağlar.
Mobil Uygulamalar:
HTML, CSS ve JavaScript ile kullanılarak mobil cihazlar için web tabanlı uygulamalar geliştirilebilir. Bu sayede farklı platformlarda çalışabilen uygulamalar geliştirmek mümkündür.
Temel HTML Kodları
HTML’de etiketler kullanılarak kodlama yapılır. Her etiketin farklı bir işlevi vardır. HTML etiketleri çoğunlukla <…></…> şeklinde yazılır. <…> açılış etiketi, </…> ise kapanış etiketidir. Visual Studio Code, Sublime Text, Notepad++ gibi editörler kullanılarak HTML kodları yazılır ve .html uzantılı dosya olarak kaydedilir. Bu dosya bir tarayıcıda açıldığında, yazılan kodlar tarayıcı tarafından okunur ve oluşturulan görsel yapı görüntülenir.
Iconic Prototype / iStock
HTML Sayfalarının Yapıları
Tüm HTML sayfaları aşağıdaki temel yapıda oluşturulur.
<!DOCTYPE html>
<html>
<head>
<title>TÜBİTAK</title>
</head>
<body>
<h1>Bilim Genç</h1>
<p>Popüler bilimin dijital adresi.</p>
</body>
</html>
- <!DOCTYPE html>: Sayfanın HTML5 standardına sahip olduğunu gösterir. HTML5, HTML’in son sürümüdür.
- <html>: Tüm HTML içeriğini kapsayan etikettir.
- <head>: Sayfada sayfanın başlığını, açıklamasını, stil dosyalarını veya kodlarını içeren etikettir.
- <title>: Tarayıcı ile sayfa açıldığında, tarayıcı sekmesinde görünen sayfa başlığını belirtmek için kullanılan etikettir.
- <body>: Sayfada görünen etiketleri kapsar.
Başlıklar
Metinlerin başlıkları <h1> ile <h6> arasındaki etiketlerle oluşturulur. <h1> en büyük başlık boyutunu <h6> en küçük başlık boyutunu temsil eder.
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Daha Küçük Başlık</h3>
Paragraf
Metinsel içerikteki paragraflar <p> etiketi ile oluşturulur.
<p>Bu bir paragraf örneğidir.</p>
Bağlantılar
Bağlantılar (linkler) <a> etiketi ile oluşturulur. “href” özelliğine gidilecek olan bağlantının url adresi yazılır.
<a href="https://bilimgenc.tubitak.gov.tr/">Bilim Genç’e git<a>
Görseller
Görseller <img> etiketi ile eklenir. “src” özelliğine görselin url adresi veya görselin yolu yazılır. “alt” özelliği kısmına ise görselin açıklaması yazılır. “alt” özelliğinin kullanımı arama motoru optimizasyonu açısından önemlidir.
<img src="/sites/default/files/inline-images/eski_telefon.jpg" alt="eski telefon" >
<img src="https://bilimgenc.tubitak.gov.tr/themes/bilim_genc_theme/assets/img/bilim-genc-logo2.svg " alt="Bilim Genç Logosu" >
Listeler
Sıralı ve sırasız listeleri HTML etiketleri yardımı ile oluşturabiliriz.
Sırasız Liste:
<ul> etiketi arasına <li> etiketleri yazılarak oluşturulur.
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
</ul>
Yukarıdaki kodlar tarayıcıda çalıştırıldığında aşağıdaki gibi bir liste oluşur.
- Madde 1
- Madde 2
Sıralı Liste:
<ol> etiketi arasına <li> etiketleri yazılarak oluşturulur.
<ol>
<li>Birinci</li>
<li>İkinci</li>
</ol>
Bu kodlar tarayıcıda çalıştırılırsa aşağıdaki gibi bir sıralı liste elde edilir.
- Birinci
- İkinci
Tablolar
Tablolar, <table> etiketi arasına <tr>, <td> ve <th> etiketleri yazılarak oluşturulur. Satırlar <tr> etiketi kullanılarak oluşturulur. Sütunlar ise <td> etiketiyle oluşturulur. Tabloda başlık oluşturmak için ise <th> etiketi kullanılır.
<table border="1" >
<tr>
<th>Element</th>
<th>Sembol</th>
<th>Kategori</th>
</tr>
<tr>
<td>Hidrojen</td>
<td>H</td>
<td>Ametal</td>
</tr>
<tr>
<td>Lityum</td>
<td>Li</td>
<td>Alkali Metal</td>
</tr>
<tr>
<td>Demir</td>
<td>Fe</td>
<td>Metal</td>
</tr>
<tr>
<td>Karbon</td>
<td>C</td>
<td>Ametal</td>
</tr>
<tr>
<td>Sodyum</td>
<td>Na</td>
<td>Alkali Metal</td>
</tr>
</table>
Tablo için yazılan yukarıdaki HTML kodları tarayıcıda çalıştırıldığında aşağıdaki tablo elde edilir. Tabloda border="1" özelliği de tabloya kenarlıkların eklenmesini sağlar.
| Element | Sembol | Kategori |
|---|---|---|
| Hidrojen | H | Ametal |
| Lityum | Li | Alkali Metal |
| Demir | Fe | Metal |
| Karbon | C | Ametal |
| Sodyum | Na | Alkali Metal |
Formlar
Formlar kullanıcılardan veri almak için kullanılan yapılardır. Formlar <form> etiketinin içerisine <input>, <button>, <label> etiketleri eklenerek oluşturulur.
<form>
<label> Ad:</label>
<input type="text" id="ad" name="ad">
<button type="submit">Gönder</button>
</form>
Yukarıdaki HTML form kodları tarayıcıda çalıştırıldığında, kullanıcının ad bilgisini girebileceği bir metin kutusu ve "Gönder" butonu içeren bir form görüntülenir. <input> etiketi kullanıcıdan veri almak için kullanılır. “type=text” özelliği ile giriş alanının metin için olduğunu belirleriz. “name” özelliği ise form verilerinin işlenmesi ve sunucu tarafında tanımlanması için önemlidir. “name” özelliği genellikle dinamik kodlar yazılırken kullanılır. “type=submit” özelliği ile butona tıklanıldığında verinin gönderileceğini gösterir.
HTML kodları web sitelerinin yapı taşlarıdır. Web tasarımcıları ve geliştiriciler, web sayfalarını HTML ile oluşturur, CSS (Cascading Style Sheets) ile de sayfalara görsellik katarlar. JavaScript kullanarak sayfalar dinamik bir yapıya kavuşur. Bu nedenle web siteleri sadece HTML kodlarından oluşmaz. HTML, CSS, JavaScript birlikte kullanılarak bir web sitesi oluşturulur. Ayrıca web siteleri PHP, C#, Python gibi programlama dilleriyle entegre edilerek daha işlevsel hâle getirilir.
Kaynaklar:
