HTML Hakkında
* İlk HTML dökümanınızı yazmak
* HTML dökümanınızı düzenlemek
* Başlıklar (headings)
* Paragraflara ayırmak
* Dökümana stil kazandırmak
* Listeler (lists)
* Grafikler ve dosya biçimleri
a. Resim kullanımı
9. Bağlantılar kullanmak
a. Yerel dosyalara linkler
b. URL’ler
c. İnternet’ e linkler oluşturmak
d. Bir sayfanın bölümlerine linkler eklemek
e. Hipergrafik linkleri
10. Text biçimi (
belirteci)
11. Özel karakterler
12. Açıklama listeleri
13. Adres Satırları ve e-mail linkleri
14. Blockquote belirteci
15. Renk kullanımı
16. Text düzenlemeleri
17. belirteci
18. Text ve grafik konumunu ayarlamak
19. Tablo kullanımı
1. HTML Hakkında
HTML, ya da HyperText Markup Language, bir web browser’ın multimedya dökümanlarını gösterme yoludur. Dökümanlar aslen ASCII text formatında bazı özel “tag”ler (belirteç) içeren, browserların anlayabileceği kodu içerir.
Web’deki öncelikli amaç, herkesin yayıncılık yapmasını sağlayacak standart ve geliştirilmesi basit bir sistem kurmaktı. HTML’in özellikleri ilk günlerinden bu yana oldukça uzun bir yol aldı. Bugün, HTML için üç ayrı standart tanımlanmıştır. Bunlar:
· HTML 1.0
· HTML 2.0
· HTML 3.0
Bugün artık genel olarak HTML 2.0 ve HTML 3.0 kullanılmaktadır. HTML 3.0
da eklenen özellikler ise şunlardır:
Sayfa düzeni üzerinde ileri derecede kontrol
Manşetler
Görüntülerdeki popüler noktaların istemci tarafından işlenmesi
Özelleştirilmiş listeler
Matematik denklemler
Stil yaprakları
Form içi tablolar
HTML dökümanımızda hangi standartları kulanacağımızı dökümanımızın başında belirtmemiz gerekir (bir sonraki dersimizde bunu göreceğiz). Bu sayede, dökümanı görüntüleyen bilgisayar neye göre işlemler yapacağını bilir.
2. İlk HTML Dökümanınızı Yazmak
HTML belirteçleri nedir?
Bir web browser bir sayfayı görüntülediği zaman, öncelikle normal bir text dosyasından sayfa hakkında bilgileri okur ve < ve > işaretlerinin (tag/belirteç) kullanıldığı özel kodlara bakar. Bir HTML belirteci için genel format şöyledir:
<belirteç_ismi>yazılacak text</belirteç_ismi>
Örnek olarak, bu kısımdaki başlığı sayfanızda çıkarmak için:
<h4>HTML belirteçleri nedir?</h4>
Bu belirteç, web browser’ına HTML belirteçleri nedir? textini 4’lük başlık şeklinde (bunun hakkında geniş bilgi ileride verilecek) göstermesini söyler. HTML belirteçleri, bir browser’a texti koyulaştırmasını, italik yapmasını, başlık olarak göstermesini ya da bir link olarak göstermesini söyleyebilir. Not edilmesi gereken nokta, bitiş belirtecinin,
</belirteç_ismi>
şeklinde, bir bölü “/” işareti ile başlamasıdır. Bu bölü işareti, browser’a o anki komutun texte uygulanmasının bitirilmesini söyler. Eğer bölü işaretini unutursanız, browser son texti izleyen texte de aynı komutu uygulamaya devam eder; bu da istenmeyen sonuçlar doğurur.
NOT: Bir web browser, büyük ya da küçük harf arasında ayırım yapmaz.
Mesela, <h3>…</h3> ile <H3>…</H3> arasında bir fark yoktur.
HTML’in, bilgisayar programlarından bir farkı da, dökümanda bir hata yaparsanız browser ya da bilgisayarınız kilitlenmez, sadece görüntülenen döküman yanlış görüntülenir; bu durumda dökümanı açıp yanlışlığı düzeltirsiniz.
Browserınızın küçük bir sözlüğü vardır, ve HTML’in ilginç bir yanı da bu sözlükte bulamadığı komutları sadece gözardı etmesidir. Mesela:
<ahmet><h4>HTML belirteçleri nedir?</h4></ahmet>
gene aynı başlığı verir (<ahmet> diye bir komut henüz hiç bir browser tarafından desteklenmiyor!); yani browser <ahmet> komutunu gözardı eder.
HTML Dökümanınızı Oluşturmak
Bir HTML dökümanı iki ayrı parçadan oluşur, head ve body (baş ve vücut). Head kısmı, döküman hakkında ekranda görünmeyen bilgileri taşır. Body ise geri kalan tüm bilgileri içerir.
Tüm HTML sayfalarının temel görüntüsü şöyledir:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>
<html>
<head>
<!-- bu döküman hakkında ek bilgilerin bulunduğu başlık kısmı , ekranda görünmez -- >
</head>
<body>
<!-- görüntülenen tüm HTML -- >
: :
: :
</body>
</html>
İlk satır:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>
teknik olarak gerekli değildir, fakat browser’a o anki sayfanın hangi HTML standardına göre yazıldığını gösterir.
Tüm HTML çalışmanızı <html>…</html> belirteçlerinin içine yerleştirin. Web sayfalarınız bu belirteçler olmadan da bir çok bilgisayarda çalışabilir, fakat bunları kullanarak sayfanızın Uluslararası standartlara tamamen uygun hale gelmesini, ve bu standartları kullanan her makinada çalışmasını garanti altına almış olursunuz.
Ayrıca dikkat ederseniz <!-- …… -- > arasında yer alan satırlar web sayfanızda görünmez, buraya sayfa hakkında size ya da onu inceleyen başkasına yararlı olabilecek bilgileri yazarsınız. Web sayfalarınız daha karışık hale geldiğinde (tablolar ve çerçevelerle çalışırken bolca başınıza gelecek) bu komutlar eski bir sayfanızı kontrol ya da update ederken oldukça işinize yarayacak.
İşte ilk HTML dosyanızı oluşturmak için yapmanız gerekenler:
1. Önce text editörünüzü açın (bunun için notepad’i kullanmanızı öneririm).
2. Text editör ekranına gidin.
3. Aşağıdaki texti girin:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>
<html>
<head>
<title>Volkanlar Sayfası</title>
</head>
<!-- HTML ders notları için yapılmıştır, Ahmet Münir Piroğlu,
3 Eylül, 2000 -- >
<body>
Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.
</body>
</html>
NOT: <title>…</title> belirtecinin bulunduğu yere dikkat edin. <head>…</head> belirtecinin içinde bulunuyor ve ekranda görünmüyor. <title>…</title> belirteci, dökümanları tanımlamaya yarar ve browserınızın başlık bölümündeki yazıyı belirlemeye yarar.
4. Dökümanı “volkanlar.html” isminde kaydedin ve bunun için ayrı bir dizin yaratmayı unutmayın.
NOT: Windows 3.1 kullanıcıları dosya isminin uzantısını .htm yapmak zorundadır. Browserlar .html ya da .htm dosyalarını aynı kabul ederek açarlar.
Dökümanınızı bir web browser’da görüntülemek
1. Web browser’ınızı açın.
2. File menüsünden Open File… komutunu seçin.
3. “yunuslar.html” dosyanızı bulun ve açın.
4. Şimdi browserın başlık kısmında “Volkanlar Sayfası” yazısını ve aşağıda web sayfasında da <body> belirtecinin içine yazdığınız yazıyı görüyor olmalısınız.
Sayfanız şu an aşağıdaki gibi görünüyor olmalı:
Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.
3. HTML Dökümanınızı Düzenlemek
İlk HTML dökümanınızı yaptığınıza göre şimdi bir döküman üzerinde nasıl değişiklikler yapacağınızı ve nasıl yenileyeceğinizi göreceksiniz. Şimdi,
1. Eğer değilse browserınızda dökümanınızı tekrar açın.
2. Text editörünüzü tekrar açın (mesela notepad).
3. Text editöründe “volkanlar.html” dosyasını açın.
HTML Dökümanınızda Değişiklikler Yapmak
1. Text editör ekranına gidin.
2. Daha önce yazdığınız textin altında bir kaç kere ENTER a basın ve aşağıdaki texti yazın:
Volkan, bir gezegenden erimiş kaya
veya mağmanın yüzeye çıktığı noktadır.
Bu çıkış, büyük bir patlama ile olabileceği
gibi sessiz ve yavaş bir şekilde de olabilir.
Dikkat etmeniz gereken nokta, bu text </body> ve </html> belirteçlerinin üstünde ve HTML dosyanızın en alt kısmında olmalıdır.
3. File menüsünden Save komutunu seçin.
Web Browserınızda Dökümanı Tekrar Yüklemek
Dosyanızın bir önceki halinin görüntülendiği browsera dönün. Şu an son yazdığınız textin ekranda görünmediğine dikkat edin. Değişiklikleri görmek için Reload tuşunu kullanın. Bu komut, browserınıza o anki dökümanı tekrar yüklemesini belirtir. Artık yaptığınız değişiklikler ekranda görünüyor olmalı. Dikkat ederseniz yazı ekranda yazdığınız şekilde görünmez. Browser, normal olarak yazdığınız texti tüm ekrana yayacak şekilde görüntüler. İlerleyen derslerde sayfanızı istediğiniz şekilde düzenlemeyi öğreneceksiniz.
4. Başlıklar
Başlıklar, HTML dilinde başlığa yazmak istediğiniz yazıyı başlık belirteçleri arasına yerleştirilerek oluşturulur. HTML formatında başlık belirteci şu şekildedir:
<hN>Başlıkta görünecek yazı</hN>
N, 1’den 6’ya kadar başlık boyutlarını belirten bi rakamdır. Değişik boyutlara göre bazı başlık örnekleri:
1. Düzey Başlık
2. Düzey Başlık
3. Düzey Başlık
4. Düzey Başlık
5. Düzey Başlık
6. Düzey Başlık
HTML Başlıklarını Dökümanınıza Yerleştirmek
1. Text editörünü tekrar açın.
2. “volkanlar.html” dosyasını açın.
3. Öncelikle en büyük başlığı yapmak için <h1> belirtecini kullanacağız. Aşağıdaki yazıyı şu anki textin üzerine ve </head><body> belirteçlerinden sonra yerleştirin:
<h1>Volkanlar Sayfası</h1>
4. Bunun altına da ileride kullanacağımız başlıkları yazın. (Bazı başlıkların h3, bazılarının h2 ile yazıldığına dikkat edin, aynı önem derecesine sahip başlıkları aynı boyutta kullanırsanız daha düzenli bir sayfanız olur.)
<h2>Giriş</h2>
<h2>Volkan Terminolojisi</h2>
<h3>St Helen Dağı</h3>
<h3>Long Valley</h3>
<h2>Mars’ta Volkan Bölgeleri</h2>
<h3>Araştırma Projesi</h3>
<h3>Referanslar</h3>
5. Text editöründe değişiklikleri kaydedin.
6. Browserınıza geri dönün, dökümanı Reload edin.
Browserınızda sonuç şöyle görünmelidir:
Volkanlar Sayfası
Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız. Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır. Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir.
Giriş
Volkan Terminolojisi
St Helen Dağı
Long Valley
Mars’ta Volkan Bölgeleri
Araştırma Projesi
Referanslar
5. Paragraflara Ayırmak
Daha önce browserınızın textinizi yazarken kullandığınız ENTER’ları gözardı ettiğini gördük (browser tüm yazıyı boşlukları dolduracak şekilde dağıtıyordu). Fakat browser, bir paragraf belirteci gördüğü anda yazıya bir boşluk koyar ve yeni bir paragrafa başlar. Bir paragraf başlatmak için yazılması gereken kod:
<p>
Not edilmesi gereken nokta bu belirtecin bir bitiş belirtecine ihtiyacı yoktur. (Yani </p> belirtecini kullanmanıza genel olarak gerek yok).
Ayrıca başlık belirteçlerinde <p> belirteci hazır olarak vardır, yani <hN> ile <p> belirtecini birlikte kullanmanıza gerek olmaz. (<h> belirteci kullanıldığında browser otomatik olarak başlığın başına ve sonuna bir satır boşluk bırakır.)
Paragraf Belirtecini kullanmak
HTML dökümanınıza paragraf belirteci koymak için aşağıda anlatılanları uygulayın.
1. Dökümanınızı notepad’de tekrar açın (eğer açık değilse).
2. Öncelikle (“Volkan, bir gezegenden…”) cümlesiyle başlayan bölümü yeni bir paragraf yapalım ve ardından yeni bir paragraf ekleyelim. Şimdi yazımız yaklaşık olarak şöyle görünmelidir:
Bu derste interneti volkanlar hakkinda bilgi toplamak için kullanacak ve bulgularinizdan bir rapor hazirlayacaksiniz.
<h2>Giriş</h2>
Volkan, bir gezegenden erimiş kaya
veya mağmanın yüzeye çıktığı noktadır.
Bu çıkış, büyük bir patlama ile olabileceği
gibi sessiz ve yavaş bir şekilde de olabilir.
<p>
Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört milyar yıl ile karşılaştırın.
3. Dökümanı kaydedin.
4. Browserınıza dönün ve sayfayı Reload edin.
Yazıyı bölmenin başka yolları
Dökümanınızı bölümlere ayırmak için “hard rule/ hr” belirtecini kullanabilirsiniz. Bu
belirteç dökümana aşağıdaki gibi bir çizgi ekler:
Şimdi bunu deneyelim. Volkanlar dökümanında ilk paragraftan sonra bir belirteci kullanın. Dökümanın ilgili parçası:
<h1>Volkanlar Sayfası</h1>
Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.
<h2>Giriş</h2>
Volkan, bir gezegenden erimiş kaya
veya mağmanın yüzeye çıktığı noktadır.
Bu çıkış, büyük bir patlama ile olabileceği
gibi sessiz ve yavaş bir şekilde de olabilir
<p>
Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört milyar yıl ile karşılaştırın.
şeklinde görünmelidir.
Son olarak da textin istediğiniz yerinden diğer satıra geçmesini sağlayan bir belirteç:
. Bu belirteci bir liste yaparken, bir şiirin mısralarını yazarken, vb. yerlerde kullanabilirsiniz. İzleyen iki örnekte
ve <p> belirteçleri arasındaki farkları inceleyin:
Sadece Paragraf Belirteci
HTML Sonuç
Tüm kontrolü bilgisayara Tüm kontrolü bilgisayara bırakmaktansaonu
bırakmaktansa onu istediğiniz istediğiniz gibi yönlendirmeniz daha iyidir.
şekilde yönlendirmeniz daha
iyidir.
<p>Devam ediyor…
Devam ediyor…
<p>Gördüğünüz gibi belirteçler bu iş için
Gördüğünüz gibi belirteçler var!
bu iş için var!
Paragraf <p> ve
belirteci
Konu: HTML Hakkında Herşey 
Çarş. Haz. 10, 2009 2:00 pm