HTML (Hyper Text Markup Language) arayüz – işaretleme dilidir. Bir yazılım dili demek pek doğru olmaz. Javascript, PHP, C#, C++ veya Python gibi bir programlama dili değildir. O yüzden sadece bu dili bilenler, yazılım dili biliyorum diye avunmayın. 🙂 Biran önce bir yazılım dili öğrenmeye başlayın bakalım.
HTML ile hazırladığımız sayfaları .html veya .htm uzantısıyla kaydedip, tarayıcılarda doğrudan açabiliriz. HTML ile yazılan kodlara etiket ismini veriyoruz. Bu yazımızda temel yapı taşları, sıkça kullanılan etiketleri göreceğiz.
<Title> </title>
<title> ... Başlık ... </title>Başlık eklemek, daha doğrusu oluşturduğumuz sayfanın adını belirtmek için kullanılır. Bir paragrafın başlığı için kullanılmaz.
Yorum Satırı Eklemek
<! — … — >HTML sayfalarda sadece bizim görebileceğimiz veya tarayıcıda “Sayfa Kaynağını Gör” alanıyla inceleyenlerin görebileceği temel satır ve bilgileri yorum etiketiyle yazarız. Bunun için <! — … — > kod yapısını kullanırız.
Temel Yapı ve Etiketler
Tıpkı makale yazar gibi kod yazmanında “Giriş, Gelişme, Sonuç” mantığı vardır. Edebiyat gibi kod yazmak da bir sanattır. Bir sayfa hazırladığımızda aşağıdaki dizilime dikkat etmemiz ve uymamız gerekir.
<html>
<head>
<title> Web Site Adı</title>
</head>
<! — Gövde Kısmı — >
<body>
</body>
</html>Resim Ekleme
<img src="resim.png" alt="resim açıklaması" title="Resim Adı"/>Görüntülenmesi istenen resmin URL’sini, “SRC=” kısmı içerisine yazmamız yeterlidir.
Not: Resimlere boyut ve çeşitli stiller tanımlamak için bir başka arayüz dili olan CSS’ten faydalanmamız gerekiyor. Bir başka makalede ondan da bahsederiz.
Video Ekleme
<video src="video.mp4" poster="gorsel.jpg" controls> </video>Bağlantı Verme (Link/Köprü Oluşturma)
<a href="websiteadresi/url"> Görüntülenecek İsim </a>Örnek: Bu bir bağlantıdır.
Paragraf Ekleme
<p> … </p>Metinsel Paragraf Başlığı Ekleme
<h1> … </h1>Ana başlıkları <h1> etiketi ile, alt başlıkları ise <h2>, <h3>, <h4> … şeklinde listeleyebiliriz. Ayrıca SEO açısında yazı başlığı dışındaki başlıkları <h1> yapmamanızı öneriyorum.
Çizgi Ekleme
<hr>Boşluk Ekleme
<br>Tablo Ekleme
<table>
<tr>
<td> ... </td>
</tr>
</table>Satırlar için <tr>, sutunlar için <td>eklememiz gerekiyor.
HTML ile onlarca etiket kullanabilirsiniz. Bu makalede her birine detaylıca girmeye gerek görmüyorum. Çünkü yalnızca HTML ve CSS konusunda gerçekten faydalı kaynaklar mevcut. Onları inceleyerek hem örneklerle, hem canlı düzenlemelerle bu etiketleri öğrenebilirsiniz.
