Temel HTML (Genel Tekrar)
Bu dersimize kadar birçok HTML etiketi gördük ve bunları inceledik. Bu dersimizde ise bu zamana kadar öğrendiklerimizin genel bir tekrarını yapacağız.
Basit bir HTML Yapısı
Basit bir HTML yapısı <html>, <head> ve <body> etiketlerinden oluşur ve bu etiketlerin hiyerarşik dizilimi daima şöyledir:
<html>
<head>
</head>
<body>
</body>
</html>
<head> etiketi içine yazdığımız içerikler tarayıcı ekranında gözükmez. Bu etiketin asıl amacı site hakkında arama motorlarına bilgi vermek (SEO çalışması), site başlığını bildirmek, farklı platformalardaki tarayıcılarda sitenin çalışma prensiplerini belirlemek ve site istatistiklerini tutan Google Analytics kodları gibi bazı JavaScript kodlarını barındırmaktır.
Paragraflar ve Satır Boşluğu
Paragrafları <p> etiketi ile oluşturuyoruz ve </p> etiketi ile kapatıyoruz. Satır boşluğunu ise boş element olarak tabir edilen <br /> etiketini kullanarak verebiliriz. Hemen bir örnekte inceleyelim:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh</p>
... şeklinde giden üç adet paragrafımızın olduğunu varsayalım. Çıktımız şu şekilde olacaktır:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Eğer kodlarımızdaki paragraf etiketlerini kaldırırsak... Yani şu şekilde yazmaya çalışırsak...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Tarayıcı ekranımızda şu görüntüyü elde edeceğiz:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Gördüğünüz gibi paragraf etiketi kullanılmadığı için tüm satırları tek bir satırmış gibi algılıyor. Şimdi bu kodumuzda satır boşluğu etiketimiz olan <br /> etiketini kullanalım:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Çıktımız şu şekilde olacaktır:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus tristique nibh
Paragraf boşluğu ile satır boşluğu arasındaki ince farkı görebildiniz sanırım.
Bağlantı Adresleri
HTML'de bağlantı, diğer bir ifade ile link verebilmek için <a> etiketini kullanırız.
<a href="//zinzinzibidi.com">Bu bir bağlantıdır.</a>
a harfinden sonra href atıfı ile bağlantısını vermek istediğimiz adresi yazarız. Çıktımız şu şekilde olacaktır:
Dikkat ederseniz bağlantı adresinin başına http: ifadesini yazmadım. Bunu yapmamın sebebi bazı bağlantı adreslerinin başında https: şeklinde bir protokol bildirimi olmasıdır. Bu sayede tarayıcı http ya da https olup olmadığına bakmadan beni en kısa yoldan var olan adrese yönlendirecektir.
Görseller
HTML'de görsel, daha çok tercih edilen deyimiyle resim eklemek için <img /> boş etiketini kullanıyoruz. alt atfı ile de resmimize alternatif bir isim veriyoruz.
<img src="~/Areas/web_tasarim/Content/img/lacin.jpg" alt="laçin ağaçları"/>
Çıktımıza bakalım...
src atfına yani resmin kaynağını belirttiğimiz kısma harici adresi de verebiliriz. Fakat bu yöntem kendi sitemizi tasarlarken tavsiye edilmez. Çünkü resim yanlışlıkla silindiğinde ya da başka bir kaynaktan silindiğinde Visual Studio bize hata uyarı vermez. Aşağıdaki örnekte harici bir kaynak adresinin nasıl verildiğini görebilirsiniz.
<img src="//www.zinzinzibidi.com/web_tasarim/Content/img/lacin.jpg" alt="laçin ağaçları"/>
Çıktımız ise yine aynı şekilde olacaktır:
Kalın, İtalik ve Altı Çizili Yazma
HTML'de kalın yazmak için <strong>, italik yazmak için <em> ve altı çizili yazmak içinse <u> etiketlerini kullanıyoruz. Aşağıdaki örneklerde bunları daha rahat inceleyebilirsiniz:
<p><strong>Bu yazı kalın</strong>, <em>bu yazı italik</em> ve <u>bu yazı altı çizili</u> yazıldı.</p>
Çıktımız şu şekilde olacaktır:
Bu yazı kalın, bu yazı italik ve bu yazı altı çizili yazıldı.
Liste Oluşturma
HTML'de sıralı liste oluşturmak için <ol>, sırasız lise oluşturmak için se <ul> etiketlerini kullanıyoruz. Liste elemanları içinse <li> etiketini kullanıyoruz. Aşağıdaki örnekte sıralı ve sırasız listeyi bir arada görebilirsiniz:
<ol>
<li>Sıralı liste elemanı 1</li>
<li>Sıralı liste elemanı 2</li>
<li>Sıralı liste elemanı 3</li>
</ol>
<br/>
<ul>
<li>Sırasız liste elemanı 4</li>
<li>Sırasız liste elemanı 5</li>
<li>Sırasız liste elemanı 6</li>
</ul>
Çıktımız ise şu şekilde olacaktır:
- Sıralı liste elemanı 1
- Sıralı liste elemanı 2
- Sıralı liste elemanı 3
- Sırasız liste elemanı 4
- Sırasız liste elemanı 5
- Sırasız liste elemanı 6
Belge Tipi Bildirimi (DOCTYPE)
Belge tipi bildirimi yazdığımız HTML kodlarının Internet Explorer, Google Chrome, Mozilla Firefox gibi web tarayıcıları tarafından yorumlanan ve sayfanın HTML sürümü hakkında tarayıcıya bilgi veren anahtar etikettir. Her sayfada en üstte bulunur ve < karakterinden sonra ! işareti konularak ardından doctype yazılır. Aşağıdaki örnekte HTML5 ile yazılmış basittir bir HTML iskeleti görebilirsiniz:
<!doctype HTML>
<html>
<head>
</head>
<body>
</body>
</html>
Yorum etiketi (<!-- ... -->)
HTML kodlarını yazarken daha sonra ne amaçla kod yazdığımızı öğrenmek, yazdığımız kodların diğer kodlarla karışmasını önlemek ve daha rahat görebilmek, bizim kodlarımızı kullanacak web yazılımcılarına yardımcı olmak amacıyla yorum satırları yazmak isteyebiliriz. Bunun için HTML yorum etiketini kullanmalıyız. HTML'de yorum yazabilmek için ilk önce <!-- karakterlerini yazdıktan sonra yazmak istediğimiz yorumu yazıyor ve --> karakterleri ile yorumumuzu kapatıyoruz. Yazdığımız yorumlar hiçbir şekilde tarayıcı ekranında gözükmeyecektir. Sadece kaynak kodlarını inceleyen biri yapılan yorumları görebilir. Örneğin; rareklam.com.tr adresine girer ve farenizin sağ tuşuna bastıktan sonra sayfanın kaynak kodlarını görüntülemeyi tercih ederseniz şu şekilde bir HTML yorumu görebilirsiniz: Ra Reklam Sayfa Kaynak Kodları :)
Biz yine de örnek olması amacıyla bir yorum satırı yazalım:
<p>Bu bir paragraf yazısıdır.</p><!-- Bu da bir HTML yorum satırıdır. -->
Çıktımız ise şu şekide olacaktır:
Bu bir paragraf yazısıdır.
Görüldüğü gibi yorum satırı tarayıcı ekranına yansımadı.
Tablolar
Genel tekrarın bu son bölümünde tabloları tekrar edeceğiz ve bilgilerimizi pekiştireceğiz.
Tablolar ilk olarak bilim insanlarının elde ettikleri verileri düzenli bir şekilde web'te yayınlama gereksiniminden doğmuştur. Daha sonra ise tablolar ile web sitesi yapımı yaygınlaşmış; ardından <div> mantığı ile tablo ile site yapımı tarih olmuştur.
3x2'lik yani 3 satırlık - 2 sütunluk bir tablo oluşturalım. Tablo sınır kalınlığı ise 1px olsun.
<table border="1">
<tr>
<td>Birinci Satır Birinci Sütun</td>
<td>Birinci Satır İkinci Sütun</td>
</tr>
<tr>
<td>İkinci Satır Birinci Sütun</td>
<td>İkinci Satır İkinci Sütun</td>
</tr>
<tr>
<td>Üçüncü Satır Birinci Sütun</td>
<td>Üçüncü Satır İkinci Sütun</td>
</tr>
</table>
Çıktımız ise şu şekilde olacaktır:
Birinci Satır Birinci Sütun
Birinci Satır İkinci Sütun
İkinci Satır Birinci Sütun
İkinci Satır İkinci Sütun
Üçüncü Satır Birinci Sütun
Üçüncü Satır İkinci Sütun
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Tebrikler! HTML'i artık temel seviyede biliyorsunuz. "İleri HTML5 Dersleri"ne geçebilirsiniz.