HTML (Hyper Text Markup Language- Hiper Yazı İşaretleme Dili), internet sayfaları oluşturmayı sağlayan işaretleme dilidir. İnternet tarayıcıları, HTML taglarını göstermezler, onları sayfa içeriğini tanımlamak için kullanırlar. İlk HTML versiyonu 1991 yılında çıkmıştır. 2014 yılında ise HTML5 versiyonu çıktı. Biz HTML derslerimizi HTML5 standartlarına uygun olarak anlatmaya çalışacağız.
Bir tekst dosyası açalım ve uzantısını html olarak ayarlayalım. Biz dosyamızın adını 001.html koyduk.
Bu oluşturduğumuz dosyayı notepad veya geany benzeri bir editörle açalım.
İçerisine sadece "Selam olsun" yazalım ve editörü kapatalım.
Şimdi bir internet tarayıcısı (Firefox, Chrome veya benzeri) ile tekst dosyamızı açalım.
Yazdığımız yazıyı tarayıcıda göreceğiz. Maalesef doğru kodlama şekli bu değil, tarayıcımız bizim yerimize kodu tamamladı.
Şimdi html uzantılı yeni bir tekst dosyası daha açalım. (Biz 001b.html olarak açtık)
Şu kodları dosyamıza yazalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
Selam olsun sizlere, tüm karakterler UTF-8 kodlaması ile istediğimiz biçimde görüntüleniyor.
</body>
</html>
<!DOCTYPE html> ile dosyamızın tanımını yapmış olduk. Bu deyimi tercih ettiğinizde HTML5'in özelliklerini kullacağınızı, dosyanızı HTML5 standartlarına göre hazırladığınızı internet tarayıcınıza anlatmış oluyorsunuz. HTML5'ten önceki versiyonlara ait uzun kodlama tanımlamalarını da belki görmüşsünüzdür, örneğin HTML 4.01'e ait üç farklı tanımlama şekli var, dilerseniz onları da kullanabilirsiniz, ancak son teknoloji genelde en iyisidir, biz HTML5'in nimetlerinden faydalanmayı tercih edeceğiz.
<html> ile </html> tagları arasına kodlarımızı yerleştirdik. Bu iki tag başlangıcı ve bitişi belirlemektedir.
<head> ile </head> tagları arasına başlıklar ve tanımlamalar konulur. Örneğin karakter kodlamamızın UTF-8 olduğunu meta tagı ile tanımladık. Eğer bu tanımlamayı yapmasaydık Türkçe karakterleri düzgün görüntüleyemeyecektik.
<body> ile </body> tagları arası ise sayfamızın gövdesi yani görüntülecek kısmıdır. Buraya yazdığımız kodlarla sayfada nelerin görüntüleceğini tarayıcımza anlatacağız.
Kodlardan da anlayacağınız üzere HTML standartlarında başlangıç tagı < işareti ile aynı tagın bitişi ise </ işareti ile belirlenir. Tabii bazı tagların HTML5'te bitişini bildirmemize gerek yoktur. Örneğin yukarıdaki kodumuzdaki meta tagında olduğu gibi.
Standart kodlama için gerekli olan bu kodları öğrendikten sonra birkaç önemli bilgiyi daha öğrenirseniz, ilk dersi tamamladığınızda artık HTML ile düz yazı sunumu hazırlayabilir yeterliliğe de sahip olacaksınız. Bir yazı sunumu hazırladığınızda başlık kısmını <h1> (en büyük başlık), <h2>, <h3>, <h4>, <h5>, <h6> (en küçük başlık) tagları ile belirtebilirsiniz. Öntanımlı büyüklükleri şu şekilde görüntülenecektir:
<h1>Başlık</h1>
Başlık
<h2>Başlık</h2>
Başlık
<h3>Başlık</h3>
Başlık
<h4>Başlık</h4>
Başlık
<h5>Başlık</h5>
Başlık
<h6>Başlık</h6>
Başlık
Html dosyalarınızdaki boşluklar, siz aksini belirtmediğiniz sürece sadece tek bir boşluk olarak algılanacaktır. Bunu ile değiştirebilir, dilediğiniz kadar boşluk bırakabilirsiniz. Burada olduğu gibi. Nasıl birden fazla boşluk bırakabildiğimizi incelemek için Ctrl tuşunu basılı tutarken u harfine basınız. Sayfanın kaynak kodu açılacaktır. İlgili satırları bulup kodu inceleyin, yani boşluk bırakma kodunu nasıl kullandığımızı görmüş olacaksınız böylelikle. Bunun dışında <pre> tagı da boşluk bırakmak için harika bir seçimdir. İlerideki derslerde <pre> tagına da yer ayırmayı planlıyoruz.
İlk dersimizde son olarak <br> tagına değinelim. Bu en fazla kullanacağınız taglardan biridir. Bunu yazı dosyalarında kullandığınız Enter tuşuna benzetebiliriz. Her kullandığınızda bir satır aşağıya geçmiş olursunuz. <br> tagını HTML5'te bitiş tagı olmadan kullanabiliriz. Her kullanışımız bir satır boşluk bırakacaktır. Evet, artık html dili ile bir yazı hazırlayabiliriz. Bu kodu 001c.html dosyası içerisinde bulabilirsiniz:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Tekir</h1>
Nasreddin Hoca eve bir okka yahnilik et almış, bir ara işten eve uğrayarak hanımına etleri teslim etmiş ve işe geri dönmüş. Hanımı hazırlıklarını tamamlayıp etleri pişirdiği sırada misafirler çıkagelmişler. Misafirlere karşı cömert olan kadın, pişirdiği etleri onlara ikram etmiş, tüm etler bitmiş. Akşam yahnilik etin hasretiyle eve gelen Nasreddin Hoca, hanımının önüne koyduğu bir tabak pilavı görünce, şaşırıp yahnilik eti neden pişirmediğini sormuş. Nasreddin Hoca'dan çekinen hanımı, eti bizim kedi Tekir yedi demiş. Nasreddin Hoca hışımla fırlayarak Tekir'in peşine düşmüş. Tekir'i yakalamış, ancak bakmış ki Tekir'in neredeyse kemikleri görünecek. Tekir'i tutmuş ve teraziye çıkarmış, bakmış ki bir okka geliyor:
<br>
"Yahu hatun" demiş,
<br>
"Bizim eti Tekir yedi ise, Tekir nerede? Yok bizim Tekir burada ise yahnilik et nerede?"
<br>
</body>
</html>
Bilgi notu olarak eklemeliyiz ki, h1'den h6'ya kadar olan başlık taglarından sonra br tagını kullanmamıza gerek yoktur. Onlar standart olarak satır atlatırlar. (Aksi tanımlanmadığı sürece)
İlk dersimizin dosyalarını indirmek için
tıklayınız.