1.HTML'e GİRİŞ


HTML açılımı HyperText Markup Language olan,kullanıcılarına browserlar tarafından gorüntülenebilen web sayfalaları tasarlama imkanını sunan bir programlama dilidir(Belki metin biçimlendirme dili desek daha uygun olur).Fakat C/C++,Basic,Java gibi yüksek dereceli programlama dillerine kıyasla ögrenmesi çok kolaydır,tabi yapabilecekleri de bir o kadar kısıtlıdır.Tabi bu 'kısıtlı' lafına aldanmayin,iyi bir HTML temeli uzerine biraz JavaScript ve CSS (ve tabi yaratıcılığınızı) ekleyerek,internette görup de kıskandiginiz birçok sayfayı yapabilecek hale gelebilirsiniz! Amacımız HTML oğrenmek olduğuna göre,HTML'i bir tanıyalım İlk olarak HTML ile yapılan web sayfalarının calışma mantıgına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacagımızı öğrenelim:


1/1.HTML'in ÇALIŞMA MANTIĞI

HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz. Bu mantığı konular ilerleyince daha iyi kavrayacaksınız.


1/2.HTML İLE NE YAPILABİLİR,NE YAPILAMAZ

HTML ile bir web sayfasında

Yapılabilecekler:
Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(l ink),resim kullanımı,tablolar,Çerçeveler,Formlar


Yapılamayacaklar:
Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

Yapılamayacaklardan ilkini Javascript,ikincisini CGI ,ASP, veya PHP kullanarak yapabilirsiniz. Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web tasarımı konusunda ilerlemek istiyorsanız,HTML bilginizin sağlam olması gereklidir!

2.NE GEREKİR?

Bir web sayfası yapmak için ne gerekir?Bu noktada iki seçeneğiniz var.Eğer web sayfanızı hiçbir kod kullanmadan yazmak istiyorsanız,Homepage veya Dreamweaver gibi,sizi bu işten kurtaracak yazılımlar kullanabilirsiniz.Kendi içlerinde başarılı sayılabilecek bu yazılımların dezavantajı ise,yapabileceklerinizin programın size sunduklarıyla sınırlı olmasıdır.Veya oturup kendiniz kod yazmak/üretmek isteyebilirsiniz.Zaten bu siteye geldiğiniz için ikinci gruba girdiğinizi varsayıyoruz,yani bu işi geçekten öğrenmek istiyorsunuz... O zaman iyi haber şu: İhtiyacınız olan şey sadece bir düzyazı programı,mesala (Windows için) Notepad .Tabi yazdıklarınızı test etmek için bir browser da fena olmaz,ama onu zaten her yerde bulabilirsiniz.

Opsiyonel olarak kod yazma işini kolaylaştıran, size zaman kazandıran text tabanlı bazı yazılımlar kullanabilirsiniz,mesela 'allaire Homesite'.Bu tip programlar sadece kod yazma işlemini kolaylaştırır,ancak yazma işlemini yine siz yaparsınız,dolayısıyla yapabileceklerinizi sınırlayan tek şey bilginizdir.Yine de işlerin nasıl yürüdüğünü öğrenmek için önce Notepad ile başlamanız faydalı olacaktır.

Notepad kullanırken, konulara ilişkin verilen örnekleri ve/veya kendi yazdığınız kodları '.htm' veya '.html' uzantılı kaydedin.Aksi takdirde browser'ınız bu dosyaları görüntülemez.Homesite yazdıklarınızı zaten standart olarak bu uzantılarla kaydeder.

Üzücü bir durum,iki yaygın browser olan 'Microsoft Internet Explorer' ve 'Netscape Navigator''ün html kodlarını yorumlamada farklılık göstermesidir.Piyasanın bu iki browser arasında neredeyse eşit olarak bölünmüş olmasından dolayı,yazdığınız kodları her iki browser'ın da aynı/benzer şekilde yorumlayacağı şekilde yazmaya özen göstermelisiniz.Sayfayı tasarlarken belli aralıklarla Explorer ve Netscape ile görüntüleyip sonucu karşılaştırmak,bu sorunu çözmek için iyi bir yöntemdir.

Son olarak;Browser'ınızın 4. veya daha ileriki bir sürüm olması tavsiye edilir,çünkü eski sürüm browser'lar bazı özellikleri desteklememektedir.


3.TEMEL KAVRAMLAR

HTML'i kısaca tanıdık ve gerekli araçları öğrendik,artık gerçekten HTML öğrenmeye başlayalım...


3/1.BAZI TEMEL KAVRAMLAR

# Tag(Etiket): HTML belgelerine bir şey yerleştirmek ve/veya bir biçim belirtmek için 'Etiket' denen ifadeler kullanırız.Etiketler '<Etiketin Adı>' şeklinde yazılırlar.Bazı istisnalar hariç açılan etiketlerin yeri gelince kapatılması gerekir; bu da '</Etiketin adı>' ifadesiyle yapılır.
<center> : Metnin ortalanmasını sağlar ; <textarea> : Metin alanı oluşturur.

# Parameter(Parametre): Parametreler etiketlerin değiştirilebilen özelliklerinin isimleridir.
<textarea rows="50">
Burada 'rows' ifadesi metin alanının yükseklik özelliğinin adıdır,bu özelliğin değeri değiştirilebilir.

# Value(Değer): Parametre tanımından da kolayca anlayabileceğiniz gibi,parametreler ile değiştirdiğimiz sayılara(veya bazen keywordlere)değer adı verilir.
<textarea rows="50">
Burada '50' ifadesi metin alanının yüksekliğinin değeridir.

NOT:Kursun devamında parantez içinde verilen Türkçe terimler kullanılacaktır.Fakat bu terimlerin orjinallerini de aklınızın bir kenarında tutun.


3/2.TEMEL ETİKETLER

<html>...</html> Bu etiket browser'a HTML belgesinin basladığı ve bittiği yeri bildirir.Bütun HTML kodları bu etiketin içinde yeralmadır.
<head>...</head> HTML belgesinin ilk bölümüdür.Title bölümü ile ileride göreceğimiz CSS ve JavaScript kodları buraya yazılır.Bu bölume yazılanlar metin olarak ekranda görünmez.
<title>...</title> Head bölümü içine yazılan Title bölümüne sayfanın başlığı yazılır,bu başlık browser'ın sol üst bölümünde görüntülenir.
<body>...</body> HTML belgesinin bütün içeriği burada yeralır.Buraya metinler,resimler,listeler... vb. her türlü HTML nesnesi yerleştirilebilir.

Diğer üç etiketin aksine body etiketinin parametreleri bulunur.Bunları ilerde ayrıntılı olarak inceleyeceğiz.

4.İLK SAYFAM VE HTML BELGESİNİN YAPISI


4/1.İLK SAYFAM

İlk web sayfamızı yapacak kadar HTML öğrendik bile! İşte adet olduduğu üzere Merhaba dünya...

<html>
<head>
<title>Merhaba!</title><br><METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
Merhaba Dünya!
</body>
</html>

Yukarıda görgüğünüz kodu düzyazı programınızda yazıp merhaba.htm adıyla kaydedip çalıştırırsanız ilk HTML sayfanızı yapmış olursunuz. Burada 4. satırda gördüğünüz meta etiketi,sayfanızda Türkçe karakterlerin görüntülenmesini sağlar.Diğerlerini zaten biliyorsunuz...


4/2.HTML BELGELERİNİN GENEL YAPISI

HTML belgeleri,ilk sayfamızdan da anlaşılabileceği gibi aşağıdaki şablon üzerine yazılır:


<html>
<head>
<title>Başlık</title>
</head>
<body>
...
</body>
</html>

Eğer isterseniz bu şablonu istediğiniz bir adla .txt uzantılı olarak kaydedip, bundan sonra yazacağınız örnekleri kaydettiğiniz bu dosyanın uzerine yazabilirsiniz; böylelikle her seferinde fazladan birkaç kod yazmaktan kurtulmuş olursunuz.Eğer sitenizde Türkçe karakter kullanacaksanız lütfen bu şablonun head bölümüne, 'Merhaba Dünya' örneğinin kodlarında 4. satırda yer alan

<meta content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>< /td>

satırını da ekleyin...


5.METİN BİÇİMLENDİRME TAGLARI

HTML'in temel unsurlarını öğrendikten sonra,artık işin inceliklerine geçebiliriz. İlk olarak yazdığımız metinleri şekillendirmeyi öğreneceğiz.Aşağıdaki tablodaki etiketler,size bu konuda geniş olanaklar sağlayacak. Önce Başlık etiketleri:


5/1.BAŞLIK ETİKETLERİ

<h1>...</h1>
Başlık
<h2>...</h2>
Başlık
<h3>...</h3>
Başlık
<h4>...</h4>
Başlık
<h5>...</h5>
Başlık
<h6>...</h6>
Başlık


5/2.VE DİĞERLERİ...

<b>...</b> Yazılarınızı 'bold' yapar. Örnek Yazı
<i>...</i> Yazınızı italik karakterlerle yazar Örnek Yazı
<u>...</u> Altı çizgili yazar Örnek Yazı
<p>...</p> Paragraf etiketi,paragrafınızın altına ve üstüne boşluk koyar ...

Paragraf
...
<br> satırbaşı yapar,bu etiketi kapatımak gerekmez ...
Satırbaşı

Şimdi bir örnek ile öğrendiklerimizi uygulayalım:

<html>< br><head><br><title>MetinBiçimlendirmeörneği</title><br><metacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>

HTML size metin biçimlendirme konusunda geniş olanaklar sağlar; Metinlerinizi ister <h1>kocaman</h1>,
ister <h6>küçücük</h6>,isterseniz <b>koyu</b>,<u>altyazılı</u>,veya <i>eğik</i> yazabilirsiniz.
Yada satırbaşı yapabilir,<br>Veya<p>Paragraf oluşturabilirsiniz</p>

</body>
</head>
</html>

Metin biçimlendirmek için yukarıda gördüğümüz etiketlerin dışında <font>...</font> etiketi de kullanılır.Bu etiketi ve parametrelerini bir sonraki bölümde bulabilirsiniz...