Html Nedir ?

HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi diyebiliriz

Html’de Temel Unsurlar

HTML dilinde binary veya hexadecimal kodlar yoktur. Her şey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta herhangi bir HTML editörü bulunmuyorsa bu işi Windows’un notepad’i ile dahi halledebiliriz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri kolaylaştıran editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion)

Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum farklarından dolayı sayfamız bir browser’da iyi görünürken bir başka browser’da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı teknikleri (css, dhtml gibi)sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser’ın birbirlerine üstün olduğu yönleri var. Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz başarı sayfanızı ziyaret eden kişinin kullandığı browser’a mahkum. Hatta ziyaretçiniz browser’ına verdiği bir talimatla “yalnız şu fontu kullan”, “grafikleri görüntüleme” şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir. Yine de bu kadar karamsar olmayalım.

Web Sayfası Yapısı
HTML 4.0’daki etiketlerin çoğu aynı niteliklere (attribute) sahiptir. Aşağıdaki listede bunların en Ben gerizekalıyım kullanılanlarını görüyoruz:

· accesskey=”karakter”: Form denetimlerinde ve <a> (anchor) etiketlerinde, doküman öğesine erişim için kullanılabilen tek karakter.

· align=”metin”: Bir dokümanın bir kısmındaki bilginin hizalanması.

· alt=”metin”: Resimleri, formları, nesneleri ve bir dokümanın diğer kısımlarını tanımlayan alternatif metin.

· char=”karakter”: Bir tablonun içeriği hizalanırken, bir hizalama ekseni olarak davranan karakter.

· charoff=”sayı”: Tablo içeriğini hizalarken, eksen karakterinden itibaren bırakılacak boşluk sayısı.

· class=”metin”: Doküman öğesine atanmak üzere birbirinden boşluklarla ayrılmış bir veya daha fazla sınıf ismi.

· dir=”metin”: Metin ve tabloların doğrultusu: “ltr” (left-to-right, yani soldan sağa) veya “rtl” (right-to-left, yani sağdan sola).

· disabled: Bir form üzerindeki denetimi kullanıcı girdisini idare edemeyeceği şekilde iptal eden bir nitelik.

· id=”metin”: Doküman öğesine verilecek isim.

· lang=”metin”: Bir doküman öğesinin niteliklerinde ve içerdiği metinde kullanılan dil.

· name=”metin”: Doküman öğesi için bir isim.

· onblur=”script”: Bir doküman öğesi kullanıcı girişi odağını yitirdiğinde olan bir olay.

· onchange=”script”: Bir doküman kullanıcı girişi odağını yitirdiğinde ve değeri odaktayken değiştirilen bir doküman öğesi.

· onclick=”script”: Kullanıcı doküman öğesine fareyle tıkladığında olan bir olay.

· ondblclick=”script”: Kullanıcı doküman öğesi üzerine fareyle çift tıkladığında olan bir olay.

· onfocus=”script”: Bir doküman öğesi, kullanıcı girişi odağını aldığında olan bir olay.

· onkeydown=”script”: Bir tuş basıldığında olan bir olay.

· onkeypress=”script”: Bir tuşa basılıp bırakıldığında olan bir olay.

· onkeyup=”script”: Bir tuş bırakıldığında olan bir olay.

· onload=”script”: Tüm doküman veya bir frameset’teki tüm çerçeveler yüklendiğinde olan bir olay.

· onmousedown=”script”: Fare doküman öğesi üzerindeyken fareyle tıkladığında olan bir olay.

· onmouseout=”script”: Fare, bir doküman öğesi üzerindeyken o öğeden uzaklaşırken olan bir olay.

· onmouseover=”script”: Fare imleci bir doküman öğesi üzerine getirildiğinde olan bir olay.

· onmousemove=”script”: Fare imleci bir doküman öğesi üzerindeyken hareket ettirildiğinde olan bir olay.

· onmouseup=”script”: İmleç bir doküman öğesi üzerindeyken kullanıcı fare öğesini bıraktığında olan bir olay.

· onreset=”script”: Bir formdaki tüm kontroller resetlendiğinde olan bir olay.

· onselect=”script”: Bir metin isleme kullanıcı kontrolü seçildiğinde olan bir olay.

· onunload=”script”: Bir doküman bir pencere veya çerçeveden atıldığında olan bir olay.

· readonly: Bir form kontrolündeki bir değerin değiştirilemeyeceğini belirten bir nitelik.

· style=”metin”: Bu bağımsız doküman öğesi için stil bilgisi.

· tabindex=”sayı”: Doküman öğesinin sekme sırasındaki konum.

· target=”metin”: Bir dokümanın içinde açılması gereken çerçevenin adi.

· title=”metin”: Bir doküman öğesi hakkında açıklayıcı metin.

· usemap=”URI”: Bir imagemap’in doküman öğesiyle ilişkilendirilecek URL’si, bunun mevcut <MAP> öğesinin name niteliğine uyması gerekir.

· valign=”metin”: Tablo hücreleri içindeki bilginin dikey hizalaması

Başlık ve Sayfa Metnini Girmek
Ders Hedefi:
Bir web sayfasının başlığı, sayfa üzerinde değil browser penceresinin başlık kısmında görüntülenir. Sayfada görüntülenmesi gereken metni sayfanın gövde kısmında yazın.

Atölye:
Aşağıdaki işlemleri adım adım uygulayın.

1. Not Defteri'nde gerekirse Dosya/Aç komutunu çalıştırınız ve ekrana gelen iletişim penceresinde "Kurs" klasörünü açın.
2. Dosya türü alanından Tüm Dosyalar'ı seçin.
3. "t0B_yapi.htm" dosyasını seçiniz ve Aç düğmesine basın.
4. HTML kodunun <HEAD></HEAD> komutları arasında kalan başlık alanına tıklayınız.
5. Sayfa başlığı olarak kullanılmak üzere bu alana aşağıdaki kodu ekleyin:

<TITLE>Benim ilk web sayfam</TITLE>

6. Web sayfasının <BODY> ve </BODY> komutları arasında kalan gövde kısmına, sayfa üzerinde görüntülenmesi için aşağıdaki metni girin.

Hoş Geldiniz

7. Dosya/Farklı Kaydet komutunu çalıştırın, 'Kurs' klasörünü açın ve aşağıdaki dosya adını verin:
t03_baslik.htm

8. Kaydet düğmesine tıklayın.

Ek Bilgi:
Bir Word belgesi veya Excel tablosu içerisine kaydedilen bir dosya yalnızca bir dosya adı alır. Bir web sayfası ise dosya adı dışında, bir de sayfa başlığına sahiptir ve bu sayfa başlığının önemli işlevleri vardır. İlgili web sayfası yüklendiğinde sayfa başlığı, browser penceresinin başlık kısmında görüntülenir. Bu sayfa başlığı ayrıca Microsoft Internet Explorer'da Sık Kullanılanlar ve Netscape Navigator'da ise Bookmark altında kısayol ismi olarak kullanır.
Arama hizmetleri World Wide Web'in rehberleridir. Siz bilgiyi girersiniz ve bu doğrultuda arama yapılır. Birçok arama hizmeti, en uygun arama kriteri olarak sayfa başlığını kullanır ve onu sonuç listesinde gösterir. Çeşitli anlamların varlığı dolayısıyla, sayfa başlığını özenle oluşturmalısınız.

İpucu:
Browserın, HTML kodunun daha okunaklı olması için kullanılan satıra başı, sayfa başı ve boş satırlar gibi boşlukların sayfa görüntüsünü etkilemediğini göz önünde bulundurmalısınız.

Dikkat!
Hazırladığınız web sayfaları Aç iletişim penceresinde görüntülenmiyorsa dosya türü listesinden 'Tüm Dosyalar'ı seçmeyi unutmuş ve sadece TXT dosyalarını görüntülüyor olabilirsiniz.

Özetle:
Web sayfasının başlığı olarak görüntülenecek olan metin <TITLE> </TITLE> komutları arasına yazılır.
Sayfa başlığı, browser penceresinin başlık kısmında görüntülenir ve arama hizmetlerinde kriter olarak kullanılır ve Sık Kullanılanlar veya Bookmark'ların ismin yerine geçer.
Web sayfasında görüntülenmesi gereken metinler <BODY> </BODY> komutları arasına yazılmalıdır.