HTML , Hypertext Markup Language (Köprü Metni İşaretleme Dili) anlamına gelir. Web sayfaları oluşturmak için kullanılan özel bir dildir. Bir web sitesini ziyaret ettiğinizde, bilgisayar size kelimeleri, resimleri ve bağlantıları göstermek için HTML'yi okur. HTML'yi bir web sitesinin yapı taşları olarak düşünün. Tıpkı bir ev veya araba inşa etmek için Lego parçaları kullandığınız gibi, biz de bir web sayfası oluşturmak için HTML etiketlerini kullanırız.
HTML, bir bilgisayara bir web sayfasında metin, resim, video ve bağlantıları nasıl görüntüleyeceğini söyleyen koddur. Tıpkı sizin için resim çizen bir arkadaşınıza talimat vermek gibidir. HTML, web sayfasının bir bölümünün başlangıcını ve sonunu işaretlemek için açılı parantez içindeki etiketler adı verilen sözcükleri kullanır.
Ziyaret ettiğiniz her web sitesi bir şekilde HTML kullanır. HTML olmasaydı, görebileceğiniz web sayfaları olmazdı. HTML, içeriği düzenlemeye yardımcı olur ve bilgisayara sayfanın nasıl görüntüleneceğini söyler. Web geliştirmede öğrenilen ilk şeydir çünkü internetin çalışmasını sağlar!
Bir HTML belgesinin özel bir yapısı vardır. Bilgisayara sayfanın HTML kullandığını bildiren <code><!DOCTYPE html></code> adlı bir bildirimle başlar. Ardından belge iki ana bölüme ayrılır: başlık ve gövde.
Çok basit bir HTML belgesi şu şekilde görünür:
<kod><!DOCTYPE html>
<html>
<kafa>
<title>İlk Web Sayfam</title>
</head>
<gövde>
<p>Merhaba dünya!</p>
</body>
</html> </code>
Bu örnekte, <head> bölümü sayfanın başlığını verir ve <body> bölümü ise ekranda görünen içeriği koyduğunuz yerdir.
HTML, web sayfasının farklı bölümlerini işaretlemek için etiketler kullanır. Etiket , açılı parantez içindeki bir kelimedir. Örneğin, <code><p></code>, bilgisayara bir paragraftan sonra gelenin bir paragraf olduğunu söyler. Paragrafı bitirdiğinizde, sonu belirtmek için kapanış etiketi olan <code></p></code>'yi kullanırsınız.
HTML'deki bir öğe , bir açılış etiketi, bir miktar içerik ve bir kapanış etiketinden oluşur. Örneğin:
<code><p>Bu bir paragraftır.</code>
Her etiket, web tarayıcısına içeriğin nasıl görüntüleneceğini bildirir.
HTML'de birçok etiket bulunur. En yaygın olanlarından bazıları şunlardır:
Nitelikler, bir HTML öğesi hakkında ek bilgi sağlar. Etiketin açılı parantezleri içindeki açılış etiketine eklenirler. En yaygın nitelikler, resim etiketiyle birlikte kullanılan src ve alt'tır .
Örneğin, bir resim eklemek için şunu yazabilirsiniz:
<code><img src="picture.jpg" alt="Güzel bir resim"></code>
Burada src tarayıcıya resim dosyasının nerede olduğunu söyler ve alt ise resim görüntülenemiyorsa resim hakkında bir açıklama sağlar.
HTML belgesi iki bölüme ayrılmıştır:
Bağlantılar, bir sayfadan diğerine geçmenizi sağlar. HTML'de bağlantıları <a> etiketini kullanarak oluştururuz. Etiketin içindeki href niteliği, tarayıcıya bağlantının hedefini söyler.
Örneğin:
<code><a href="https://www.example.com">Example.com'u ziyaret edin</a></code>
Bu bağlantıya tıkladığınızda tarayıcınız example.com web sitesini açacaktır.
Görseller bir web sayfasını canlandırır ve daha ilgi çekici hale getirir. Görsel eklemek için <img> etiketini kullanırsınız. Unutmayın, <img> etiketinin bir kapanış etiketi yoktur.
Resim ekleme işlemi şu şekilde yapılır:
<code><img src="sunflower.jpg" alt="Parlak bir ayçiçeği"></code>
Bu kod, tarayıcıya bir ayçiçeği resmi görüntülemesini söyler. src niteliği resmin konumunu belirtir ve alt niteliği resmin açıklamasını sağlar.
Listeler, bilgileri düzenli bir biçimde düzenler. HTML'de iki ana liste türü vardır:
İşte sırasız listeye bir örnek:
<kod><ul>
<li>Elma</li>
<li>Muz</li>
<li>Kiraz</li>
</ul> </code>
Ve işte sıralı bir liste örneği:
<kod><ol>
<li>İlk</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol> </code>
Tablolar, bilgilerin satır ve sütunlarda görüntülenmesine yardımcı olur. Verileri karşılaştırmanız veya bir tablodaki öğeleri listelemeniz gerektiğinde kullanışlıdırlar.
İşte basit bir HTML tablosu örneği:
<code><table border="1">
<tr>
<th>İsim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</table> </code>
Bu tabloda, <tr> bir tablo satırını tanımlar, <th> tablo başlığı (kalın metin) için kullanılır ve <td> tablo verileri (hücreler) için kullanılır.
HTML ayrıca ses ve video gibi multimedya öğeleri eklemenize de olanak tanır. <audio> etiketiyle ses dosyaları ekleyebilirsiniz. <video> etiketiyle ise web sayfanıza video oynatıcılar yerleştirebilirsiniz.
İşte bir video yerleştirme kodunun örneği:
<code><video width="320" height="240" denetimleri>
<source src="movie.mp4" type="video/mp4">
</video> </code>
Bu kod, oynatma, duraklatma veya ses seviyesini değiştirme düğmelerine sahip bir video oynatıcı oluşturur. Kontroller özniteliği, tarayıcıya bu düğmeleri göstermesini söyler.
İnternetteki her web sitesi HTML ile oluşturulmuştur. Okulunuzun web sitesini, eğlenceli bir oyun sitesini ziyaret ettiğinizi veya çevrimiçi bir hikaye okuduğunuzu düşünün. HTML, metni, resimleri ve diğer içerikleri net bir şekilde görebilmeniz için perde arkasında düzenler.
Örneğin, internette en sevdiğiniz çizgi film karakterinin resmini gördüğünüzde veya eğlenceli bir konu hakkında daha fazla bilgi edinmek için bir bağlantıya tıkladığınızda, HTML bunu başarmak için oradadır.
Basit bir projeye bakalım. En sevdiğiniz hayvan, örneğin bir kedi hakkında küçük bir web sayfası oluşturmak istediğinizi düşünün. Bir başlık, kediler hakkında bir paragraf, bir resim ve hatta eğlenceli kedi bilgileri içeren bir web sitesinin bağlantısını ekleyebilirsiniz.
HTML kodunuz şu şekilde görünebilir:
<kod><!DOCTYPE html>
<html>
<kafa>
<title>En Sevdiğim Hayvan</title>
</head>
<gövde>
<h1>Kediler Hakkında Her Şey</h1>
<p>Kediler oyuncu ve yumuşaktır. Uyumayı ve mırıldanmayı severler. Birçok insan evcil hayvan olarak kedi beslemeyi sever.</p>
<img src="cat.jpg" alt="Sevimli bir kedi">
<a href="https://www.catfacts.com">Kediler hakkında daha fazla bilgi edinin</a>
</body>
</html> </code>
Bu proje, başlıklar, paragraflar, görseller ve bağlantılar kullanır. HTML'nin birçok parçadan oluşan eksiksiz bir web sayfası oluşturmak için nasıl kullanıldığını gösterir.
HTML bir web sayfasının yapısını oluştururken, web sitelerinin eğlenceli bir şekilde görünmesini ve davranmasını sağlayan başka araçlar da vardır.
Günümüzde HTML öğreniyor olsak da CSS ve JavaScript'i bilmek web sitelerinin nasıl yapıldığını anlamamıza yardımcı olur.
HTML'i keşfederken birçok başka etiketle karşılaşacaksınız. İşte bilmeniz gereken birkaç etiket daha:
Bu etiketler, içeriğinizin bir web sayfasında nasıl görüneceği konusunda size daha fazla kontrol sağlar.
HTML, ilk ortaya çıktığından beri çok değişti. Zamanla birçok yeni etiket ve özellik eklendi. HTML'nin her yeni sürümü, karmaşık ve güzel web siteleri oluşturmayı kolaylaştırıyor. Günümüzde HTML, CSS ve JavaScript ile birlikte çalışarak kullanımı eğlenceli ve harika görünen modern web siteleri oluşturuyor.
Bu evrim, HTML'nin hem öğrenmesi kolay hem de basit web sayfalarından karmaşık web uygulamalarına kadar her şeyi oluşturmak için yeterince güçlü olduğu anlamına geliyor.
HTML öğrenmek eğlenceli olsa da, internette güvende kalmak her zaman önemlidir. Web sitelerini ziyaret ederken veya çevrimiçi içerikleri incelerken, bir konuda emin değilseniz mutlaka bir yetişkinden yardım isteyin. Güvenliğiniz her şeyden önce gelir ve HTML öğrenmek her zaman eğlenceli ve güvenli bir deneyim olmalıdır.
Bugün öğrendiğiniz bazı önemli terimlere bir bakalım:
HTML birçok gerçek dünya ortamında kullanılır. İşte bazı örnekler:
Bu örnekler HTML'in günlük hayatın birçok alanında ne kadar kullanışlı bir araç olduğunu gösteriyor.
Bugün, HTML'nin Hypertext Markup Language'ın kısaltması olduğunu öğrendik. Web sayfaları oluşturmak için kullanılan temel dildir. İşte akılda tutulması gereken önemli noktalar:
HTML, internette gördüğünüz her web sitesinin temelidir. Etiketler ve öznitelikler gibi basit yapı taşlarıyla eğlenceli ve etkileşimli sayfalar oluşturabilirsiniz. Öğrenmeye devam ettikçe, HTML'nin web sayfalarını nasıl canlandırdığını ve interneti keşfedilecek faydalı ve heyecan verici bir yer haline nasıl getirdiğini göreceksiniz.
