HTML, Hyper Text Markup Language ifadesinden oluşturulmuş bir İngilizce kısaltmadır ve Türkçe'ye "Hiper Metin İşaretleme Dili" şeklinde çevrilebilir. Bir işaretleme dilinin temel işlevi, bir belge içindeki metnin (text) yapısını, biçimini ve genel görünümünü tanımlayacak kuralları içermesi ve bunun uygulanmasına olanak vermesidir.
İşaretleme dilinin kuralları belgeye yüklendikten sonra doğal olarak belge, bu kuralları okuyup nasıl uygulayacağını bilen bir bilgisayar programı tarafından işlenmelidir. Burada oluşturulan HTML içerikleri tarayıcılar tarafından anlamlaştırılarak, gördüğümüz web sitelerinin temelini oluştururlar.
HTML öğrenebilmeniz için herhangi bir metin editörünü kullanmanız yeterlidir. Bu noktada size Sublime Text, Brackets ve Notepad++ gibi bazı başarılı metin editörlerini önerebiliriz. Bu editörler, HTML kodlarını yazarak bir web sitesi inşa etmek için kullanılmaktadır. Bunun dışında, görsel olarak da bir web sitesi oluşturmak mümkündür. Bunun için Microsoft Expression Web, Adobe Dreamweaver ve BlueGriffon gibi farklı araçlar kullanılabilir.
Bu tür uygulamalar, görsel olarak yapmış olduğunuz işlemleri, arkaplanda HTML koduna dönüştürmektedir. Dilerseniz, Web Programlama kursunu tamamladıktan sonra, WYSIWYG uygulamaları kullanarak web sitenizi geliştirebilirsiniz. Ancak; HTML kodlamayı iyi bir şekilde öğrenmek için ilk etapta bu uygulamaları kullanmamanızı, HTML kod vurgulama özelliğine sahip metin editörleri kullanmanızı tavsiye ederiz.
HTML dosyalarının çalıştırılması için oluşturduğunuz dosyaların sonuna .html uzantısı eklemeniz ve bir internet tarayıcısı üzerinde açmanız yeterli olacaktır. Böylelikle yazmış olduğunuz HTML kodları ile oluşturduğunuz web sitesini görüntüleyebilirsiniz.
HTML derslerine başlamadan önce, az önce anlattığımız olayı basit bir örnekle gösterelim:
Öncelikle istediğiniz bir metin editörünü açın ve aşağıdaki kodları yazın.{html taglari arasinda, head taglari arasinda, meta charset="utf-8", body taglari arasinda "Hello World!" metininin ekrana ciktisi sadece Hello World! seklinde olacaktir.}
Hello World!Daha sonra oluşturduğunuz bu dosyayı kaydedin. Açılan diyalog penceresinde, dosya isminin sonuna .html uzantısını ekleyin. Böylelikle dosyanın bir metin dosyası değil, html dosyası olduğunu belirtmiş olduk.
Oluşturduğunuz html dosyasına çift tıklayın ve favori web tarayıcınızda çalıştırın.
Sürüm -> Yıl
HTML -> 1991
HTML 2.0 -> 1995
HTML 3.2 -> 1997
HTML 4.01 -> 1999
XHTML -> 2000
HTML5 -> 2014
Bir HTML belgesi etiket dediğimiz bileşenlerden oluşur. HTML yapısındaki temel bileşen bir elemandır. Elemanları anlatmak için her gün gördüğünüz başlıklar, paragraflar, listeler birer elemandır. Etiketler kullanılarak bu elemanlar birbirinden ayrılarak mantıklı hale gelirler. HTML etiketleri yapısı ise çok basittir. < (küçüktür işareti) etiket ve > (büyüktür işareti) işaretiyle belirtilir. Örneğin, paragraf belirtmek için p etiketini kullanırız. Paragraf etiketini kapatmak istediğimizdeyse < işareti sonrasında / işareti koymak yeterlidir.
HTML dili büyük küçük ayrımı yapan bir dil değildir. Bir etiketi girerken büyük, küçük ya da bir kısmı büyük bir kısmı küçük girebilirsiniz (XHTML için durum farklıdır. Tüm etiketlerin küçük harflerle yazılması gerekir) ve bu herhangi bir değişime sebep olmaz. Ancak; HTML sayfası içindeki tüm kodların küçük harfle yazılması, geliştiriciler arasında kabul görmüş bir kuraldır. Dolayısıyla etiketleri küçük harfle yazmanız tavsiye edilir.
Bir HTML belgesi başlıca iki kısımdan oluşur:
Baş (HEAD) metni
Gövde (BODY) metni
Baş metni, sayfaya ait başlıkla ilişkili ifadeleri içerir.
Gövde metni ise, HTML koduna ait asıl metni içerir. Bu metin,
Paragraflar,
Listeler ve
Diğer elemanlardan oluşur.
Genel olarak buraya kadar anlatılanları bir çatı altında toplayacak olursak:
Tüm HTML belgeleri tip deklerasyonu ile başlamak zorundadır: ! DOCTYPE html HTML belgeleri, html etiketi ile başlar ve /html etiketi ile biter. HTML belgesi içindeki görüntülenen kısım ise body ve /body etiketleri arasında yer alır.
!DOCTYPE html Aşağıda basit bir HTML dosyası örneğini bulabilirsiniz.
html head titleBasit bir HTML metni başlığı/title meta charset="utf-8" /head body h1 HTML, Web'in dilidir./h1 P Bu metnin ilk paragrafıdır. /p p Bu da ikinci paragraftır. /p /body /html!DOCTYPE> deklerasyonu DOCTYPE deklerasyonu, web tarayıcıların bir web sitesini doğru bir şekilde göstermesini sağlamaktadır. Web üzerinde farklı belge tipleri bulunmaktadır: HTML5 HTML 4.01 XHTML 1.0
- HTML etiketiHTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir. Dosya adındaki .html uzantısı ise bu dosyanın bir HTML belgesi olduğunu belirtir. - HEAD etiketi
Bir HTML belgesinin ilk kısmını belirler. İçinde TITLE elemanının bulunması zorunludur. Belgenin başlığını TITLE elemanı belirler. - TITLE etiketi
TITLE etiketi yardımıyla oluşturduğunuz web sayfasının başlığını belirleyebilirsiniz. Bu başlık, yukarıda görüldüğü gibi, başlık çubuğu üzerinde görüntülenecektir.
Başlık içeriği, sayfanın içeriği ve işlevi ile uyumlu olmalıdır. Sayfayı tanımlayıcı nitelikte ve kısa olmalıdır. - META etiketi
Meta etiketiyle sayfanızın bir tanımını yapabilir ve sayfa içeriğini uygun anahtar sözcüklerle tanımlayabilirsiniz.
1) Keywords: Sitenizin içeriğini oluşturan kelimelerin bulunduğu etikettir.
2) Description: Bu etiket site hakkında bilgi veren temel etiketlerden biridir.
3) Author: Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.
- BODY etiketi HTML belgenizin ikinci ve en uzun parçası BODY kısmıdır. Belgenizin tüm içeriği burada yer alacaktır. Bir sonraki belgede açıklanan etiketlerin tümü BODY içinde yer alacaktır.
- Başlıklar (Headings)
HTML metni içinde H1 ile H6 aralığında ölçeklendirilmiş 6 farklı düzeyde başlık kullanılabilir. Burada H1 en büyük başlığı, H6 ise en küçük başlığı simgelemektedir.
Bir başlık elemanının genel yazılış biçimi,
Başlık Metni şeklindedir. Burada x, 1 ile 6 arasında bir tamsayıdır ve başlığın düzeyini belirlemektedir.
HTML kodunuz içinde başlık düzeylerini atlatmamaya dikkat ediniz. Örneğin H1 ile başlayıp daha sonra H4'ü kullanmayın. Düzeyler birbirini sırasıyla izlemesi, arama motorları tarafından daha iyi bir konumda endekslenmeniz için de önemlidir. Oluşturacağınız Web sayfası üzerine yerleştireceğiniz metni ayrı paragraflar şeklinde ifade etmek için p ve /p etiketlerini kullanmalısınız.
- Listeler (Lists)
HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,
- Numaralanmamış liste
- Numaralanmış liste
- Tanım listesi
şeklindedir. Numaralanmamış listeyi oluşturmak için ul ve /ul etiketleri kullanılır. Bu etiketler arasına liste elemanlarını yerleştirmek için
Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.
Ornek:{syntax'in belli olmasi icin alttaki taglari cevreleyen "< >" silinmistir.!!}
html head title TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER /title /head body h3 TÜRKİYE-ŞEHİRLER /h3 ul li ISTANBUL'UN ÖNEMLİ İLÇELERİ /li ul li Fatih /li li Bakırköy /li li Kadıköy /li /ul li ANKARA'NIN ÖNEMLİ İLÇELERİ /li ul li Çankaya /li li Yenimahalle /li /ul /ul /body /html
<title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
- ISTANBUL'UN ÖNEMLİ İLÇELERİ
- Fatih
- Bakırköy
- Kadıköy
- ANKARA'NIN ÖNEMLİ İLÇELERİ
- Çankaya
- Yenimahalle
Sabit genişlikli bir yazıtipi içinde bir metin oluşturmak istediğiniz takdirde, HTML'in " pre /pre (elmaslar icinde yazacak sekilde<>)" etiketini kullanabilirsiniz. pre terimi, İngilizce preformatted (önceden biçimlendirilmiş) sözcüğünden alınmıştır.Bu etiket ayrıca metin içindeki boşlukları, satır başlarını ve tab'ları da anlamlı hale getirir.
pre etiketi, width özelliğiyle birlikte kullanılarak bir satır içinde yer alabilecek en fazla karakter sayısı da belirlenebilir.pre /pre etiketleri arasında hiperlinkler (hyperlink) kullanılabilir.Bununla birlikte, pre /pre etiketleri arasında, diğer etiketlerin kullanılmasından kaçınmak gerekir.
Aşağıdaki örnekte ülkeler ve nüfusları önceden belirlenmiş bir biçimde web sayfası üzerine yerleştirilmek isteniyor.HTML kodunda ilerde daha ayrıntılı olarak ele alacağımız hiperlink oluşturma ve bu bağlantı tıklandığı takdirde buna bağlı dosyayı ekranda görüntülemeyle ilişkili küçük bir örnek de yer almaktadır.
Aşağıdaki HTML kodu çağrılınca ekranda alt çizgili ve mavi renkte bir "DAHA FAZLA BİLGİ İÇİN" ifadesi belirecektir.Bu bir hiperlink'tir ve tıklandığında X.htm dosyası çağrılmaktadır.
pre etiketinin kullanımını hiperlink ile birlikte anlatan örneğimiz aşağıdadır:
ÜLKE ADI NÜFUSU (MİLYON KİŞİ) TÜRKİYE 65 AVUSTURYA 8 ABD 230 ALMANYA 80 DAHA FAZLA BİLGİ İÇİN
Yukardaki sayfa ekrana geldiği zaman, fareyle DAHA FAZLA BİLGİ İÇİN hiperlinkini tıkladığınızda, X.htm adlı HTML dosyası çağırılacaktır.
Aşağıda ise, X.htm adlı HTML dosyasının içeriği görülmektedir:
ÜLKELER VE NÜFUSLARI
ÜLKE ADI NÜFUSU (MİLYON KİŞİ) KBMG($) KITA
TÜRKİYE 65 3100 AVRUPA-ASYA
AVUSTURYA 8 25000 AVRUPA
ABD 230 32000 KUZEY AMERİKA
ALMANYA 80 29000 AVRUPA
br etiketi, bulunduğu konumdan itibaren bir satırı sona erdirerek yeni bir satırın başına geçilmesini sağlar.Aşağıdaki örnek kod incelenerek br etiketinin kullanımı görülebilir:
<title>ÜLKELER VE NÜFUSLARI</title>
Avusturya 8 milyon nüfuslu bir Orta Avrupa
ülkesidir.
Almanca resmi dilidir. Doğası itibariyle
dünyanın en güzel
ülkelerinden biridir.
Macaristan bir diğer Orta Avrupa
ülkesidir.
Nüfusu 10 milyondur. Komşuları genelde dağlık
birer ülke
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.
Bir metnin istenilen kısmını belirgin hale getirmek için kullanılır. ve etiketleri arasındaki kısım tipik olarak italik biçimde görüntülenir.
em etiketinin nasıl kullanıldığını görmek için aşağıdaki örneği inceleyelim:<title>ALGORİTMA TANIMI</title> ALGORİTMA
Algoritma bir problemi çözmek için izlenmesi gereken işlem adımları kümesidir.
em etiketi etkisindeki kısım “işlem adımları kümesidir” şeklinde italik olarak belirgin hale getirilmiştir.Uygulandıkları metnin üzerine bir çizgi çizilmesini sağlarlar.
s ve strike kullanımı için aşağıdaki örneği inceleyebilirsiniz:
<title>title taglari arasi</title>
Bir sen kaldın
Cemal Süreya
İşaret edilen metni özellikle vurgulamak için kullanılır. Bu vurgulama bold (koyu) yazı karakteriyle gerçekleştirilir.
strong etiketinin kullanımını aşağıdaki örnekten görebilirsiniz.
<title>ÖRNEKLER</title> FUZULİ
Öyle sermestemki idrak etmezem dünya nedür
Men kimem saki olan kimdür mey-i sahbah nedür
İşaretlediği metnin altına bir alt çizgi çekilmesini sağlar.
u etiketinin nasıl kullanıldığını aşağıdaki örnekten görebilirsiniz:
<title>ÖRNEKLER</title> h3 ÖNCE uDÜRÜST/u OLUNUZ /h3 h3BUNUN DIŞINDAKİ uHER ŞEY İKİNCİ PLANDADIR/u /h3 b ve /b etiketleri arasına alınan metin, koyu(bold) hale getirilir.
b etiketinin nasıl kullanılacağını aşağıdaki örnekten görebilirsiniz.
html head title Modern Türk Edebiyatı /title <title>Modern Türk Edebiyatı</title> /head body h3Attila İlhan/h3 Ne b kadınlar sevdim /b ,zaten b yoktular/b br Ne kadınlar sevdim,zaten yoktular
Böyle bir sevmek b görülmemiştir /b Böyle bir sevmek görülmemiştir /body /html i ve /i etiketleri arasına alınan metin, italik(eğik yazı biçimi) hale getirilir.
i etiketinin nasıl kullanılacağını aşağıdaki örnekten görebilirsiniz:
<title>Modern Türk Edebiyatı</title> Her çocuk bir b i nur topudur/i /b br Her çocuk bir nur topudur
Paçavralar içine bile düşse
Bir nur topudur
Dar çağlara gelmese
Değmese hoyrat ayaklar
Çamurlara belenmese
Her çocuk bir nur topudur
u etiketi
İşaretlediği metnin altına alt çizgi çekilmesini sağlar.
u etiketiyle ilgili örneğimiz aşağıdadır:
<title>writeTitle</title>
HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka bir belgeye bağlantı kurabilmesidir. Bu bağlantı, link adı verilen yapılar sayesinde gerçekleştirilmektedir. Bir resim ya da metnin rengi değiştirilerek ya da metin alt çizgili hale getirilerek bu resim ya da metnin bir hipermetin linki (hypertext link) ya da sadece link olduğu belirtilir.
Bir link oluşturmak için aşağıdaki adımlar izlenmelidir:
a sembolü ile başlanır.
href="DosyaAdı" ifadesi yerleştirilir. Burada DosyaAdı parametresi, oluşturulan link yardımıyla çağrılacak olan dosyanın adıdır.
sembolünü yerleştiriniz.
Linki oluşturacak metni giriniz.
/A etiketiyle ifadeyi tamamlayınız.
a href="http://gelecegiyazanlar.turkcell.com.tr" Anasayfa /a
Anasayfa
Yukarıdaki örnekte anasayfa adında bir link oluşturulmakta ve bu bağlantıya fareyle tıklandığında portalın anasayfasını çağırmaktadır.
URL, bir adres bilgisidir. Web tarayıcıya işaret edilen dosyanın nerede bulunduğunu gösterir. URL'ler, dosyaların Web ya da yerel sabit diskiniz üzerindeki yerini işaret eder.
Bir URL'in genel yapısı aşağıdaki gibi üç kısımdan oluşur:
- Erişilecek olan kaynağın tipi (Web, FTP vb.)
- Sunucunun adresi
- Dosyanın yeri
Bir URL'in yazılış biçimi aşağıdaki gibidir:
KaynakTipi://host.saha [:port]/yol/DosyaAdı
KaynakTipi parametresi aşağıdakilerden biri olabilir:
file: Yerel sisteminizdeki bir dosya adıdır. Yerel erişim söz konusudur.
ftp: Erişilecek kaynak bir FTP sunucusundaki dosyadır.
http: Erişilecek kaynak World Wide Web üzerindeki bir sunucuda bulunan dosyadır.
Target özelliği
Target özelliği sayesinde, bağlanan web sitesinin nerede açılacağını belirleyebilirsiniz. Örneğin adresin yeni bir sayfada açılmasını sağlamak için aşağıdaki HTML
kodunu girmek gerekir.
Turkcell Geleceği Yazanlar
Aşağıdaki tabloda, target özelliği ile kullanabileceğiniz parametrelerin listesi yer almaktadır:
Özellik Tanım
_blank sayfayı yeni bir pencere ya da sekmede açar.
_self sayfayı aynı çerçevede açar. (öntanımlı olan özelliktir)
_parent sayfayı bir üst çerçevede açar.
_top sayfayı en üst çerçevede açar.