|
Bu bölümdeki konu başlıklarımız;
1.
Web Tasarımı Tam Olarak Ne Anlama Geliyor?
2. İlk Sayfamızı Oluşturalım
3. < ile > Arasındaki Şeyler Ne İşe Yarıyor?
4. Doküman içinde açıklama satırları nasıl yazılır?
5. Özet
1.2
İlk Sayfamızı Oluşturalım!
Bu iş için basit bir metin editörü veya kelime işlemci yeterli. Eğer işletim
sisteminiz Windows ise Not Defterini (NotePad), MacOS ise TeachText'i,
Unix'se vi'yi kullanabilirsiniz. Aslında olasılıkların sınırı yok. Başlangıç
için bu basit editörleri öneriyorum; çünkü ayrıca satın almanız gerekmiyor
- işletim sisteminizle beraber geliyorlar. Karışık Web sayfalarında Not
Defteri ve TeachText size biraz zorluk çıkaracaktır; çünkü bunların Bul/Değiştir
özelliği yok. Yine de şimdilik fazlasıyla yeterliler. Evet hadi başlayalım!
Metin Editörünüzü yükleyin ve aşağıdaki satırları editörünüzde yazın.
ornek1.html
<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD>
<BODY>
<CENTER>Örnek
Sayfa #1</CENTER>
<P>
<B>Kalın yazılar</B> genellikle vurgulanması gereken şeyler
için kullanılır. <I>Yatık (italik) yazılar</I> ise benzer
amaçlarla kullanılabilir; ama estetik amaçlı kullanımları daha yaygındır.
</BODY>
</HTML>
Sonra
bu metni diskiniz üzerinde bir yere ornek1.htm ismiyle kaydedin (karışıklığı
önlemek için bu yazı dizisindeki örneklere özel bir klasör kullanmanız
önerilir) ve sayfamızı görüntülemek için şu an bu yazıyı görüntülediğiniz
web tarayıcınıza geçin ve Ctrl+N'ye basarak yeni bir pencere açın.
Sıra Ctrl+O'ya basarak dosyamızı açmaya geldi. Internet Explorer kullanıyorsanız
Browse'a, Netscape Communicator kullanıyorsanız Choose File düğmesine
tıklayarak çıkan dosya ve klasör listesinden ornek1.htm'in bulunduğu klasörü
bulun ve ornek1.html'in ismi üstüne çift tıklayın. Tekrar Dosya açma diyalog
kutusuna geri döndük; ama artık ornek1.html'in tam yeri görünmekte. ornek1.html
benim E: diskimde web adlı klasörün içinde. Sizinki bambaşka bir yerde
olabilir tabi ki. Neyse Open'a basın ve ilk sayfamız nasıl görünüyor bir
bakalım.
Not: Rahatlıkla fark edebileceğiniz gibi buradaki örnekleri görüntülemek
için ilgili listeyi yukarıda anlatılan yöntemle diske kaydedip tekrar
açmanıza gerek yok. Liste başlıklarının yanında görüntülenen "Göster"
düğmesi basmanız da yeterli; ancak örnekler üzerinde oynamak ve sonuçlarını
görmek için yine de yukarıda anlatılanları uygulamanız en kısa yöntem.
1.3
< ile > Arasındaki Şeyler Ne İşe Yarıyor?
Fark ettiğiniz gibi ekranda görüntülediğimiz metnin arasına serpiştirdiğimiz
küçüktür (<) ve büyüktür (>) karakterleri arasındaki yazılar ekranda
görüntülenmiyor. Bunun yerine bunlar yazının nasıl görüntüleneceğini belirliyor.
Diğer bir deyişle < ve > karakterleri arasındaki her şey HTML işaretlerine
karşılık geliyor ve bu işaretler kendilerinden sonra gelen metin üzerinde
değişikliklere yol açıyorlar. Örneğin <CENTER> ile </CENTER>
arasında kalan "Örnek Sayfa #1" ortalanıyor; <B> ile </B>
arasında kalan "Kalın yazılar" ise ekranda kalın olarak görüntüleniyor.
Buradan çıkarabileceğimiz sonuç bir HTML işaretinin etkisinin bittiği
yerin aynı HTML işaretinin önüne / işareti konarak belirlendiği.
Peki eğer bir işareti kapatmazsak ne olur? Örneğin </B>'yi kaldıralım.
Sonuç pek istediğimiz gibi olmayacaktır. Eğer bir işareti kapatmayı unutursanız
o işaretten sonra gelen tüm metin o işaret ne yapıyorsa ondan etkilenecektir.
ornek1b.html
<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD>
<BODY>
<CENTER>Örnek
Sayfa #1</CENTER>
<P>
<B>Kalın yazılar genellikle vurgulanması gereken şeyler için kullanılır.
<I>Yatık (italik) yazılar</I> ise benzer amaçlarla kullanılabilir;
ama estetik amaçlı kullanımları daha yaygındır.
</BODY>
</HTML>
<HTML>
Bir HTML dosyasının ilk satırı daima <HTML> son satırı da </HTML>
olmalıdır. Bu iki işaret, Web tarayıcınızın, bir dosyanın HTML dosyası
olup olmadığını anlamasının iki yolundan biridir. İki yolundan biridir
dedik çünkü <HTML> işaretini kullanmasanız bile tarayıcınızın görüntületmek
istediğiniz dosyanın bir HTML dosyası olup olmadığını anlamasının bir
yolu daha var; o da dosyanın uzantısını .HTM veya .HTML yapmak. Siz yine
de değişik Web tarayıcılarının sorun çıkarabileceği olasılığını göz önüne
alıp her zaman için <HTML> ve </HTML> işaretlerini kullanın.
<HEAD>
<HEAD> ve </HEAD> arasında kalan bölüm HTML dosyası hakkındaki
bilgileri tutar. Bunlardan bir tanesinin <TITLE> yani başlık satırı
olduğunu gördük. Geri kalanları şimdilik ileriki bölümlere bırakalım.
<HEAD> işaretini kullanmak zorunda değilsiniz; ama ileride özellikle
kullanmanız gereken durumlardan bahsedeceğiz.
<TITLE>
Web tarayıcınızın başlık satırında görüntülenmekte olan HTML dosyasının
başlığını göstermek için kullanılır. ornek1.htm için başlık olarak "İlk
Sayfam"ı kullandık. Eğer bu işareti kullanmazsanız başlık olarak
hiçbir şey görüntülenmez.
<BODY>
Asıl HTML dosyamız yani ekranda görüntülenecek herşey <BODY> ile
</BODY> işaretlerinin arasında yer alır. Yine bu iki işareti kullanmak
zorunda değilsiniz; ama ileride <BODY>'nin önemli başka işlere yaradığını
göreceğiz.
Diğerleri...
<CENTER>, <P>, <B> ve <I>'nin ne işe yaradığını
ileriki bölümlerde inceleyeceğiz. Aslında <P> hariç diğerlerine
kısaca değindik. İzleyen bölümde daha ayrıntılı bilgiler bulacaksınız.
1.4 HTML Dökümanı İçinde Açıklama Satırları :
HTML
Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama
satırları konabilir. Döküman içinde herhangi biryerde, "<!--"
ve "-->" belirteçleri arasında kalan hiçbirşey web istemcileri
tarafından dikkate alınmaz.Örnek;
<!-- Bu bir açıklama satırıdır ve web istemcisinde görüntülenmez -->
1.5
Özet
* Web sayfası tasarımının ne demek olduğunu ve HTML'in bir programlama
dili değil işaretleme dili olduğunu öğrendik.
* Bir metin editörüyle basit bir sayfa hazırladık (ornek1.html).
* Her HTML dosyasının -zorunlu olmasa da- <HTML>, <HEAD> ve
<BODY> satırlarını içermesi gerektiğini gördük:
* <HTML> işaretinin Web tarayıcılarının bir dosyanın HTML dosyası
olup olmadığını anlamasında kullanıldığını,
* <HEAD> ile </HEAD> arasında kalan bölümün HTML dosyaları
hakkında bilgi tutma işine yaradığını,
* HTML dosyasının esas görüntülenen bölümünün <BODY> ile </BODY>
arasında yer aldığını öğrendik.
* <TITLE> işaretinin, görüntülenen HTML dosyasının başlığının Web
tarayıcısının başlık satırında gösterilmesinde kullanıldığı öğrendik.
Eğer
buraya kadar kafanızda bazı sorular oluştuysa ya da bazı şeyler size karışık
geldiyse cesaretiniz kırılmasın; izleyen bölümler pek çok örnekle kafanızdaki
soruların çoğunu temizleyecektir.
|