HTML Nedir?
HTML (Hypertext Markup Language), web sayfalarının yapısını oluşturmak için kullanılan temel bir işaretleme dilidir. Web sayfaları genellikle metin, resimler, videolar ve diğer içerik türlerini içerebilir ve HTML, bu içeriklerin nasıl sunulacağını belirlemek için kullanılır. HTML, tarayıcıların web sayfalarını doğru bir şekilde anlamalarını ve kullanıcıya gösterebilmelerini sağlamak için içerik üzerinde anlam katmanları oluşturur.
HTML belgeleri, metin dosyası olarak oluşturulabilir ve herhangi bir metin editörü ile düzenlenebilir. HTML dosyaları genellikle ‘.html’ veya ‘.htm’ uzantısına sahiptir. Bu dosyalar, web tarayıcıları tarafından okunur ve render edilir, böylece kullanıcılar bu içeriği görebilir. HTML’nin önemli özelliklerinden biri, diğer web teknolojileri ile sorunsuz bir şekilde entegre olabilmesidir; örneğin CSS ile stil verme ve JavaScript ile etkileşim sağlama.
HTML, içeriklerin anlamlandırılmasına yardımcı olan etiketlerle yazılır. Bu etiketler, açılış ve kapanış etiketleri şeklinde gelir ve içerik üzerinde stil ve yapı oluşturur. Örneğin, bir başlık, paragraflar, bağlantılar ve görseller gibi temel bileşenler için özel etiketler mevcuttur.
HTML Temel Etiketleri
En temel HTML belgesi, başlık, gövde ve içerik gibi bileşenlerden oluşur. Aşağıda, basit bir HTML belgesinin temel yapı taşlarını gösteren bir örnek bulunmaktadır:
<!DOCTYPE html>
<html>
<head>
<title>İlk HTML Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu, HTML dilini öğrenmeye başladığınız ilk örnektir.</p>
</body>
</html>Bu kod parçası, web tarayıcınızda ‘Merhaba Dünya!’ başlığıyla yüklenen basit bir web sayfası oluşturacaktır. <!DOCTYPE html> ifadesi, belgenin HTML5 standardında olduğunu belirtirken, <html> etiketi sayfanın başlangıcını ve bitişini göstermektedir. <head> ve <body> etiketleri, sayfanın başlık ve içerik bölümlerini ayırır.
<title> etiketi tarayıcı sekmesinde görünen ismi belirtirken, <h1> etiketi başlık içeriğini temsil eder. <p> etiketi ise bir paragraflık metni belirtmek için kullanılır. Bu temel yapı, daha karmaşık dizaynlar oluşturmada da temel bir referans noktasıdır.
HTML Elemanları ve Öznitelikleri
HTML’deki her bir yapı taşı, bir eleman olarak adlandırılır. Elemanlar, açık ve kapalı etiketlerden oluşur ve her elemanın farklı işlevleri vardır. Örneğin, görsel eklemek için <img> elemanı kullanılır:
<img src="resim.jpg" alt="Açıklama">Bu örnekte, <img> elemanının ‘src’ özniteliği, görselin dosya yolunu belirtirken, ‘alt’ özniteliği görselin yüklenememesi durumunda gösterilecek yazıyı tanımlar. HTML’de birçok öznitelik mevcuttur ve bunlar elemanın davranışını veya özelliklerini değiştirmek için kullanılır.
Örneğin, <a> etiketiyle bağlantı oluşturmak istediğimizde, bağlantının gideceği URL’yi ‘href’ özniteliğine ekleriz. Böylece kullanıcılar tıkladığında belirttiğimiz web sayfasına yönlendirilirler:
<a href="https://www.ornek.com">Ornek Web Sitesi</a>Basit HTML Kod Örnekleri
HTML dilinde basit kod örnekleri ile başlayarak daha karmaşık yapılar oluşturabiliriz. Aşağıda bazı yaygın kullanımlar için örnekler bulunmaktadır:
Başlıklar
HTML’de başlıkları belirtmek için <h1> ile <h6> arasında etiketler kullanılır. <h1> en önemli başlığı, <h6> ise en az önemli başlığı temsil eder:
<h1>Bu en yüksek başlıktır</h1>
<h2>Bu daha düşük bir başlıktır</h2>
<h3>Bu da bir alt başlıktır</h3>Bu başlıklar, içeriklerinizin hiyerarşisini belirlemenize ve okuyucularınızın bilgiyi daha iyi anlamalarına yardımcı olur.
Paragraflar
Metin paragraflarını belirtmek için <p> etiketini kullanabiliriz. Her bir <p> etiketi, yeni bir paragrafa başlayacaktır:
<p>Bu ilk paragraf. </p>
<p>Bu ise ikinci paragraftır.</p>Paragraf etiketlerindeki boşluklar, metin içindeki düzen ve okunabilirlik açısından önemlidir.
Liste Oluşturma
HTML’de sıralı ve sırasız listeler de oluşturabilirsiniz. Sırasız liste için <ul> (unordered list) etiketini, sıralı liste için <ol> (ordered list) etiketini kullanırız:
<ul>
<li>Birinci öğe</li>
<li>İkinci öğe</li>
</ul>
<ol>
<li>İlk sıradaki öğe</li>
<li>İkinci sıradaki öğe</li>
</ol>Bu örneklerde <li> etiketi, listenin her bir öğesini temsil eder ve liste düzeninin belirlenmesinde önemli rol oynar.
HTML ile Resim Ekleme
Web sayfalarına görsel içerik eklemek için <img> etiketini kullanırız. Resim dosyasının bilgisini sağlayan ‘src’ özniteliği ve alternatif metin için kullanılan ‘alt’ özniteliği ile birlikte işlemi gerçekleştirebiliriz:
<img src="gorsel.jpg" alt="Açıklama Metni">Bu durumda, ‘gorsel.jpg’ dosyası yüklendiğinde görüntülenecek, eğer yüklenemezse ‘Açıklama Metni’ kullanıcıya gösterilecektir. Resimleri boyutlandırmak için ‘width’ ve ‘height’ özniteliklerini de ekleyebilirsiniz:
<img src="gorsel.jpg" alt="Bir resim" width="300" height="200">HTML ile Tablo Oluşturma
Tablolar, verilerin düzenli bir şekilde gösterilmesi için kullanılır. HTML’de tablo yapısı <table>, satırlar için <tr>, hücreler için <td> (veri hücresi) ve <th> (başlık hücresi) etiketleri kullanılarak oluşturulur:
<table>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
<tr>
<td>Veri 1</td>
<td>Veri 2</td>
</tr>
</table>Tablolar, veri organizasyonu ve birden fazla bilgiyi karşılaştırma açısından son derece kullanışlıdır. Ayrıca, CSS ile tabloların stillendirilmesi de mümkündür.
Sonuç
HTML, web geliştirme dünyasının temelini oluşturan önemli bir işaretleme dilidir. Temel HTML etiketlerini ve yapısını görerek, içeriklerinizi etkili bir şekilde sunmak için gerekli bilgi birikimine ulaşmış olursunuz. Örnek çalışmaları ile, daha karmaşık web sayfaları oluşturma becerisini kazanmaya başlayabilirsiniz. Bu yazı, HTML’deki temel kavramları anlamanızı ve pratik yaparak becerilerinizi geliştirmenizi hedeflemektedir.
HTML’de ilerledikçe, CSS ve JavaScript gibi diğer teknolojileri de öğrenerek daha dinamik ve görsel açıdan zengin web siteleri geliştirebilirsiniz. Her yeni öğrendiğiniz kavram, sizi daha ileri seviyelere taşıyacaktır.