HTML yani Hyper Text Markup Language bir işaretleme dilidir. Kesinlikle C/C++, Java, Python gibi programlama dili değildir. Programlama dili olmamasının nedeni de fonksiyonel amaca sahip olmamasıdır. Örnek olarak matematiksel bir işlem yapmak için JavaSciprt dilinde yazılmış fonksiyonlara ihtiyaç duyar.

HTML dili ile yazılmış dökümanları .html, .htm gibi uzantılarla kaydedip tüm tarayıcılarda açarak görebiliriz. Bu HTML dökümanlarını da en basit metin düzenleyici ile bile yazabiliriz. Örnek olarak wordpad,notepad++ gibi editörler verilebilir.

HTML dilinde <> işaretleri içerisine yazılan kodlara etiket (tag) denir. Bütün HTML dökümanları <html> etiketiyle başlar </html> etiketiyle de sonlanır. Bu HTML dökümanları iki ana kısımdan oluşur: başlık ve gövde. <head></head> etiketlerinin arasına başlık, <body></body> etiketlerinin arasına ise gövde bölümü yazılır. <title> ve <meta> etiketleri <head> bölümünün içerisine yazılırken, sayfamızda görüntülenmesini istediğimiz bölümler <body> içerisine yazılır.

<title> … </title>

Başlık eklemek için kullanılır.

<! — … — >

Yorum satırı yazmak için kullanılır.

<img src=”resim.jpg” alt=”açıklama yazısı” />

Image eklemek için kullanılır. Src kısmı görselin kaynağının yazıldığı bölümdür, alt kısmına ise görselin açıklamasını yazabilirsiniz.

<video src=”video.mp4" poster=”thumb.jpg” controls> </video>

Src kısmına videonun yolunu, poster kısmına ise video başlatılmadan önce gösterilecek poster resminin yolunu yazarız. İsteğe bağlı genişlik ve yükseklik bilgileri de girilebilir. Ayrıca autoplay komutunu etiketler arasına yazarsak video otomatik olarak çalışmaya başlar.

<a href=”url”> … </a>

Link eklemek için kullanılır. Ayrıca bu linke tıklanınca bir web sitesi açmak yerine ekrana bir resim de verebiliriz. Bunun için href kısmına web urlsi yerine resmin yolunu yazarız.

<a href=”kedi.jpg” target=”_self”> Kedi </a>

Kullanıcı “Kedi” metnine tıklayınca karşısına kedi resmini çıkartmış oluruz. Ayrıca target kısmına “_blank” yazarsak resmi yeni pencerede açar.

METİN ETİKETLERİ

<p> … </p>

Parargaf eklemek için kullanılır.

<h1> … </h1>

h1 en büyüğü h6 en küçüğü olmak üzere 6 çeşit başlık etiketi bulunur.

<hr>

Sayfa genişliği boyunca düz çizgi çeker.

<br>

Alt satıra geçmek için kullanılır. <p> etiketleri içerisnde kullanılabilir. <p> İlk Satır <br> İkinci Satır </p>

<i> … </i>, <em> … </em>

Yazıyı italik yapar.

<b> … </b>, <strong> … </strong>

Yazıyı kalın yapar.

<s> … </s>, <strike> … </strike>

Yazının üstüne çizgi çeker.

<u> … </u>, <ins> … </ins>

Yazının altına çizgi çeker.

<pre> … </p>

Önceden biçimi verilmiş yazıyı aynı şekilde yazar.

<q> … </q>

Cümleyi tırnak içinde yazmak için kullanılır.

<small> … </small>

Küçük punto yazı yazmayı sağlar.

<adress> … </adress>

Adres yapısı şeklinde yazar.

<cite> … </cite>

Resim/Şema altı italic yazı yazmayı sağlar.

<blockquate> … </blockquate>

Bir tab boşluk bırakmayı sağlar.

<sup> … </sup>

Üst yazı yazmak için kullanılır. x³ gibi

<sub> … </sub>

Alt yazı yazmayı sağlar.

<code> … </code>

Kod biçiminde yazı yazılmasını sağlar.

LİSTE ETİKETLERİ

<caption> … </caption>

Liste başlığını yazmak için kullanılır.

<ol> … </ol> , <ul> … </ul>

<ol> ( Ordered List) etiketleri arasına yazılan liste 1,2,3 gibi sıralı ilerleyerek gider. Yazılacak elemanlar <li> … </li> etiketleri arasına yazılır. Başlangıç değerinin 1'den başlamasını istemiyorsak başka bir başlangıç değeri atayabiliriz. <ol start = “199” > gibi. Sıralı listeler type=”a” , type=”I” , type=”i” gibi değerler alabilirler. Bu sayede sadece rakamlarla liste yapmak zorunda kalmayız.
<ul> ( Unordered List) etiketleri arasına yazılan liste ise sırasız liste olarak yazılır. Sırasız listeler type değeri olarak üç değer alabilir. disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare)
<dl> (Definition List) etiketleri arasına tanımlama listeleri yazılır. Yazılacak elemanların kategori başlığı <dt> … </dt> etiketleri arasına yazılır. Kategorilere ait elemanlar ise <dt> etiketleri içesine açılan <dd> .. </dd> etiketleri arasına yazılır. Bu sayede kategorilerden sonra alt satıra geçerek bir tab boşluk bırakılı ve elemanlar oraya yazılır. Bu listelerde elemanların başınca hiçbir simge veya yazı bulunmaz.

TABLO ETİKETLERİ

<table> .. </table>

Tablolar bu etiketler arasına yazılır. Her <tr> ... </tr> etiketi bir satırı tanımlar. Ve bu satır arasına yazdığımız <td> … </td> etiketi de hücreleri tanımlar. Yani yazdığımız <tr> etiketi kadar satımız ve her satıra yazdığımız <td> etiketi kadar hücremiz oluşmuş olur. Hücrelerin içerisine yazacağımız bilgileri de <td> … </td> etiketleri arasına yazabiliriz.

Tabloları tanımlarken bazı bağımsız değişkenlerden de yararlanabiliriz.

border: Çerçeve kalınlığını belirler. border=”0" çerçevesiz yapar. Sayı arttıkça çerçeve kalınlığı da artar.

cellpadding: Hücrelerde bulunan elemanların hücre sınırlarına olan uzaklıklarını belirler.

cellspadding: Hücrelerin birbirleri ile arasında olan uzaklıklarını belirler.

align: Hücre içerisindeki elemanların yatay konumunu belirler. (left, right, center)

valign: Hücre içerisindeki elemanların düşey konumunu belirler. (top, bottom, middle)

colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır.

rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.

FORM ETİKETLERİ

<form> … </form>

Formlar bu etiketler arasına yazılır. Ayrıca formlara name ve action da verilebilir. Ancak action için javaScript ile entegre etmemiz gereklidir. Yani action sayesinde alınan bilgileri kullanabiliriz. Formlardaki bilgi kutucaklarını <input> etiketleri ile alırız. Ancak type değerlerini değiştirerek farklı inputlar ortaya çıkarabiliriz.

<input type=”text” />

Yazı bloğu ekrana verilir. Başına Adınız: yazarak kullanabiliriz.

<input type=”password” />

Şifre için bir blok ortaya çıkar ve yazılan her şey **** olarak görülür.

<input type=”date” />

Tarih seçimi için özel blok tipi.

<input type=”email” />

E-mail adresi girmek için özel blok tipi.

<input type=”range” />

Aralık seçmemize yarayan özel blok tipi.

<input type=”file” />

Dosya eklemek için kullanılan özel blok tipi.

<input type=”checkbox” />

Tik atarak seçmemizi sağlayan özel blok tipi. Hobilerinizi seçiniz gibi.

<input type=”radio” />

Sadece bir tane seçim yapma hakkı tanıyan özel blok tipi. Cinsiyetinizi seçiniz gibi.

<textarea> … </textarea>

Alt satıra doğru uzayan yazı bloğu.

Kansız Kvothe — Selim Can Ermiş @2019

Temel HTML komutları