Merhabalar bundan sonra bu kategori altında HTML ile ilgili makaleler yayınlayacağım. "Neden HTML ile başlıyoruz?" sorusunun en önemli yanıtı bütün web programlama dillerinin temelde HTML bilgisi gerektirmesi. Yani PHP, ASP, ASP.NET veya diğer dinamik web dilleriyle program yazacak olsanız bile HTML bilmeden çok güzel işler yapamazsınız.

HTML öğrenme amacımız "Not Defteri"ni kullanarak siteler oluşturmak değil. Zaten Dreamweaver, Frontpage gibi WYSIWYG (What You See Is What You Get) editörler sayesinde hiç HTML bilmeden de basit işler yapabiliyoruz. HTML, bazı düzeltmeler ve eklemeler yaparken işimize yarıyor. HTML etiketlerini bilmek birçok konuda işinize yarayacaktır.

İlk dersimize başlayabiliriz. Dersleri makale tadında örneklerle açıklamaya çalışacağım. Her türlü görüş ve önerilerinizi yorumlar aracılığıyla bekliyorum.

HTML Nedir?

HTML, Hyper Text Markup Language'in kısaltmasıdır. Türkçe'ye Babylon sözlüklerinde "Hareketli Metin İşaretleme Dili" şeklinde çevirmişler. Ama ben olayın özünde bir hareket göremediğim için sadece "Metin İşaretleme Dili" diyeceğim. Lütfen "Metin kim?" gibi kötü espriler yapmayın, bundan sonra HTML diyelim ve bu bahsi burada kapatalım :)

HTML'in bir işaretleme dili olduğunu belirtmiştik. Burada işaretleme derken değişken tanımlamaları vs. yapamayacağımızı; sadece dilin bize sunduğu etiketleri kullanacağımızı anlatıyoruz. Etiket (tag) kavramı ise HTML'in özünü oluşturuyor. Birazdan bu konuya derinlemesine gireceğiz.

HTML Dosyası Nedir?

HTML dosyası işaretleme etiketleri içeren bir metin dosyasıdır. Bu etiketler, web browser'a sayfayı nasıl biçimlendirmesi gerektiğini gösterir.

Saf HTML dosyaları .htm veya .html uzantısına sahip olmalıdır.

HTML öğrenmenin en keyifli noktalarından birisi; çalışır durumda bir işletim sisteminiz (Windows, Linux...) ve basit bir metin editörü programınız (Not Defteri...) varsa istediğiniz gibi HTML dosyaları oluşturabilmenizdir. Ben örneklerimi Windows Server 2003'ün Notepad'i üzerinde yapacağım. Ama XP veya 98'de de aynı "Not Defteri" programı vardır.

Bu kadar gevezelik yeter diyorsanız ilk HTML sayfamızı oluşturmaya başlayabiliriz.

İlk HTML Sayfamız

1. Başlat -> Tüm Programlar -> Donatılar -> Not Defteri sırasını izleyerek "Not Defteri"ni açın.

2. Tertemiz sayfamıza şu kod satırlarını aynen yazın. Bunların ne işe yaradığını birazdan açıklayacağım.

PLAIN TEXT
HTML:
  3. <title>İlk İnternet Sayfam</title>
  4. </head>
  5. <body>İnternet sayfama hoş geldiniz!</body>
  6. </html>

3. Eğer yukarıdaki satırları doğru bir şekilde yazdıysanız Not Defteri'nin Dosya -> Farklı Kaydet menüsünü seçin.

4. Açılan pencerede soldaki menüden "Masaüstü"nü seçin.

5. Dosya adına "Deneme.html" yazın. Dosya adını yazarken çift tırnak arasına almayı unutmayın, yoksa dosyanız "Deneme.html.txt" adıyla kaydedilir. Bu da işimize yaramaz ;)

6. Kaydet'e tıklayın.

7. Sayfamızı oluşturduk.Şimdi masaüstüne gidelim. İsterseniz bunu klavyenizdeki Windows ve D tuşlarına aynı anda basarak yapabilirsiniz.

8. Masaüstünde "Deneme" dosyasını bulup çift tıklayın. İşte ilk internet sayfanız karşınızda ;)

İlk HTML Sayfamızdaki Bileşenler

Sayfamızı çalışır vaziyette gördükten sonra biraz da işin temellerini öğrenelim.

Kodumuz

PLAIN TEXT
HTML:

etiketiyle başlıyor ve

PLAIN TEXT
HTML:
  1. </html>

etiketiyle bitiyor.

Hemen sonra

PLAIN TEXT
HTML:

etiketi geliyor. Burası sayfamızın başlığının olduğu kısım. İlerleyen makalelerde buraya farklı şeyler eklendiğini de göreceğiz. Ama şimdilik

PLAIN TEXT
HTML:
  1. </head>

kapatma etiketinden hemen sonra

PLAIN TEXT
HTML:

etiketinin geldiğini ve sayfamızın Internet Explorer'daki (veya Firefox vs...) üst başlığının burada belirlendiğini belirtelim. Başlığımızı yazdıktan hemen sonra

PLAIN TEXT
HTML:
  1. </title>

yazarak etiketi sonlandırıyoruz.

Ve şimdi html sayfasının en önemli kısmı başlıyor, vücudu. sayfadaki bütün bilgiler buraya yazılıyor. Etiketlerin çoğu da

PLAIN TEXT
HTML:
  1. <body> </body>

etiketlerinin arasına yerleştiriliyor. Biz ilk ders olduğu için hiç biçimlendirme yapmadan sadece metnimizi yazdık ve istediğimiz sonucu da gördük.

Gördüğünüz gibi HTML çok zor değil. Bir sonraki derse kadar önerim kodun

PLAIN TEXT
HTML:
  1. <title> </title>

ve

PLAIN TEXT
HTML:
  1. <body> </body>

kısımları arasında kalan metinleri değiştirerek oyalanmanız. :) Ayrıca bu derste gördüğümüz "Basit Bir HTML sayfası nasıl oluşturulur?" sorusunu da ezberden, hızlı bir şekilde yapabiliyor olmalısınız.

Görüşmek üzere ;)


Benzer Yazılar

  • Benzer yazı bulunamadı!