INTERNET
Word wide web (dünya
çapında kütüphane) projesi , internet ile hızla büyümektedir. Her an,
her yerde elinizin altındaki bir diz üstü bilgisayarı ve taşınabilir
telefon ile istediğiniz bilgi kaynaklarına ulaşmanız mümkündür. Web
aracılığı ile bilgileri dağıtmak ve herkese hizmet verebilmek, internet
ve servisleri aracılığı ile mümkündür.
İnternet üzerindeki
sayfalarda istediğiniz bilgilere ulaşabilmeniz için, bu sayfaları
düzenlemek için araçlara ihtiyacınız vardır. Bu araçlar internet
sayfaları; çok yönlü metin dokümanları tasarımı ile internet çok yönlü
metin sunucuları ile mümkün olmaktadır. (Karahoca A., s.2 )
Web sayfalarının
gerçekte programlama dili gibi bir kaynak kodu bulunur. Web sayfaları bu
doğrultuda iki türlü hazırlanmaktadır. Bunlardan ilki WYSIWYG (what you
see is what you get - Ne görürsen onu alırsın) denilen yöntemdir. Visual
Page, Front Page, Dream Viewer ve Flash gibi programlar web sayfalarının
ekranda yazıların ve resimlerin istenilen yere görsel olarak
yerleştirilmesini sağlayan programlardır. Web sayfası oluşturmak için bu
programlar kullanılarak HTML dili bilmeye gerek duymadan bir web sayfası
yapılabilir.
Web sayfası hazırlamanın diğer yoluysa Notepad gibi bir metin editörü ya
da HTML editör programı kullanmaktır. Kaynak kodundan web sayfası
hazırlamak her zaman için daha avantajlıdır. WYSIWYG programları web
sayfasına gereksiz kodlar ekler ve çoğu zaman sayfayı hazırlayan kişinin
kafasını karıştırır. Bazen de sayfaya istenildiği gibi müdahale etme
kapasitesine sahip olunamaz.
HTML, yani Hyper Text Markup Language
kısaca bir yazı işaretleme dilidir. Yazının göze hoş gelmesi için
şekillendirilmesi, HTML'nin amacıdır. Ancak yazıyı şekillendirirken
arada resim, ses gibi öğeler de hoş olacağından HTML bunları da kapsar.
HTML, belgelerin metinler, tablolar, listeler,
fotolar içerecek şekilde internette yayımına izin verir. (Karahoca,
A.s.7) Basit bir web sayfası hazırlamak için temel olarak HTML
komutlarını bilmeniz yeterlidir. Bu bölümde sadece temel HTML
komutlarına değinilmiştir.
Çeşitli web dizayn programlarında görsel olarak
objelerle hazırlanan sayfaların HTML kodlarını da görüntüleyebilirsiniz.
Ayrıca Browser’ ların View Source özelliği ile internette gördüğünüz
ilginç sayfaların HTML’ sine ulaşabilirsiniz.
HTML ile dokümanlar
oluşturulurken diğer programlama dillerinde olduğu gibi mantıksal
ünitelerden oluşur. Başlıklar, paragraflar veya listelerden oluşabilir.
Normal bir editörde yazdığınız HTML kodları için compiler(derleyici)
bulunmadığından dolayı hata yapmamaya dikkat etmeniz gerekmektedir.
Tarayıcı program (browser: yani Netscape,
Internet Explorer vs.) küçüktür (<) ve büyüktür (>) işaretlerinin
arasına yazılan her şeyi HTML komutu olarak yorumlar.
Şimdi temel HTML
komutlarından örnekler verelim. Bunun için örneğin note pad’ i
kullanabilirsiniz.
<HTML>
<H1>BU BIZIM SAYFAMIZ</H1>
ILK DENEME SAYFASIDIR. <BR>
BU <I> ITALIK </I> BIR YAZI <BR>
BU DA <B> KALIN </B> BIR YAZI
</HTML>
Bu dosyayı ilk.html
adıyla boş bir dizine kayıt (save) edin ve tarayıcı programınızla bu
dosyayı çağırın. (Kaydettiğiniz dosyaya çift tıklayarak ya da "file"
mönüsünden "open" ile bu dosyayı seçerek)
Önünüzde şöyle bir
ekran olması lazım:
Yazdıklarımıza dikkat
ederseniz komutlar "<KOMUT>Komuttan etkilenecek yazı</KOMUT>"
şeklindedir. "<B>kalın</B>" kalın(bold), "<I>italik</I>" italik
yazı yazmamızı sağladı. Hemen hemen tüm HTML komutlarında aynı mantık
hakimdir. Ancak bazı komutlarda "</KOMUT>" ile komutu kapatmak
gerekli değildir. Bunlardan ilk akla gelenler <BR> ve <IMG>
komutlarıdır. Bu komutlar bir yazı grubunu etkilemediğinden </BR>
ile kapatılmasına gerek yoktur. Aynı şey<IMG>, yani resim ekleme
komutunda da geçerlidir.
HTML ile ilgili en temel komutlara bakalım,
ayrıntılı açıklama ve örnek sayfa, tablodan sonra:
KOMUT
|
AÇIKLAMA
|
|
<HTML> |
Metnin HTML olduğunu belirtir. |
|
<HEAD> |
Dokümanın içreği hakkında bilgi verir. |
|
<TITLE> |
Sayfaya başlık verir. |
|
<BODY> |
Dokümanın içindeki tüm paragrafları listeler. |
|
<H1> |
Metne ana başlığını verir. |
|
<B></B> |
Kalın Yazı |
|
<I></I> |
İtalik yazı |
|
<CENTER></CENTER> |
Ortalamak
|
|
<BR> |
Satır
başı
|
|
<P> |
Paragraf başı |
|
<HR> |
Yatay çizgi |
|
<BACKGROUND> |
Arkaya plana yayılacak resmi seçer. |
|
<BGCOLOR> |
Renk ayarlar. |
|
<A
HREF="hakkımda.html"></A> |
Diğer sayfalara bağlantı |
|
<IMG
SRC="images/sahil.gif" ALT="sahil resmi"> |
Resim yerleştirmek |
|
<FONT> </FONT> |
Yazının özellikleri. |
|
<LI> |
Listeleme yapar. |
|
<BLINK> |
Yazının yanıp sönmesini sağlar. |
HTML, en dıştaki
elemandır. Bu eleman metnin bir HTML dokümanı olduğunu işaret eder.
Ayrıca bu eleman web sayfasını gösteren programa HTML dilinin
versiyonunu belirtir. (Karahoca .A,s.15)
HEAD komutu dokümanın
içeriği hakkında bilgi verir. Bu bilgi dokümanın bir parçası gibi Web
tarayıcısından (Nescape ve Internet Explorer) görünemez. (Karahoca.A,s.15)
"TITLE" sayfaya başlık vermek için
kullanılır. Bu başlık tarayıcınızın en üstündeki kutucukta ve taskbar'da
yazar.
HTML dokümanının
içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15)
<BODY>
elemanından sonra gelen <H1> komutu en büyük fontlu başlıktır.
H1-H6 arasındaki başlıkların büyüklükleri azalan sıradadır. (Karahoca.A,s.15)
Kullanımı:<HTML>
<BODY>
<H1>ANA BASLIKTIR</H1>
Yazının koyu renkte
yazılmasını sağlar.
Kullanımı: <B>
buraya yazılan metin koyu renk basılır </B>
Yazının italik
yazılmasını sağlar.
Kullanımı: <I>
buraya yazılan metin italik basılır </I>
Yazı, resim, çizgi,
tablo ve listelerin ortalanmasını sağlar.
Kullanımı: <center>
bu aradakiler tüm sayfayı ortalamış olarak ekrana görüntülenir.
</center>
Satır başı yapar.
Kullanımı: <BR>
"<P>" komutu
paragraf başı yapar ancak bu paragraf başı Türk yazı standartlarına
uymaz. Türk standartlarına göre yeni paragrafın ilk satırı biraz
içeriden başlar. Ancak HTML’ deki paragrafta yeni paragraf içeriden
başlamaz. İçeriden başlamaması çok önemli bir sorun değildir.
"<P>" komutunun
bir tane seçeneği vardır: "ALIGN". Eğer <P ALIGN="RIGHT">
şeklinde kullanırsanız </P> işaretine kadar olan yazılar hem
paragraf başı yapılmış olacaktır, hem de yazı sağa yanaşık görünecektir.
<PALIGN="JUSTIFY"> şeklinde kullanırsanız satır sonları
hizalanacaktır.
Yatay bir çizgi çizer. Bu çizgi ayırıcı olarak
kullanılabilir. Yazıların sonuna eklenemez. HR komutu otomatik olarak
yeni satırdan başlayacaktır. Seçenekleri ise şu şekildedir:
<HR WIDTH=80% SIZE=5>
Burada "WIDTH" yatay çizginin tüm sayfaya olan
oranıdır. Eğer % işaretini koymazsanız piksel cinsinden sabit bir
uzunlukta çizgi çizersiniz. "SIZE" piksel cinsinden çizginin
kalınlığıdır. (Pixel'i açıklamayacağım. 1-30 arası değerler vererek
kendiniz görebilirsiniz). Bunun yanında "HR" komutunda kullanılan bir
seçenek de "NOSHADE"dir.
<HR NOSHADE>
yazarsanız yatay çizgi üç boyutlu görünmeyecektir.
Arka plan resmi
sayfanıza oldukça güzel bir görüntü veren bir özelliktir. Sayfanızın
arka plan resmi olarak gif, jpg, jpeg uzantılı resim dosyaları
kullanabilirsiniz.
Kullanımı:
<BODY
BACKGROUND= “c:\ucak.jpg”>
BGCOLOR sayfanın arka
plan rengi (#000000 = siyah);
Kullanımı:
<BODY BGCOLOR=
“#FFFFF”>
ya da
<BODY BGCOLOR=’Yellow’>
Bağlantılar, HTML’ DE
çok kullanılan komutlardandır. Bu yüzden mantığını iyi anlamanız
gerekir. Yapmanız gereken tek şey <A HREF="URL">Açıklama</A>
komutunu sayfanızda herhangi bir yere yerleştirmek. Burada URL olayı çok
önemlidir.
URL;
html, jpg, gif, js,
wrl vb. uzantılı herhangi bir dosya adı olabilir;
http://www.angelfire.com/ne/esin
şeklinde bir web sayfası adresi olabilir;
news://news.metu.edu.tr
şeklinde bir news sunucusu adresi olabilir;
ftp://ftp.gazi.edu.tr
şeklinde bir ftp adresi olabilir;
gopher://gopher.metu.edu.tr
şeklinde gopher adresi olabilir;
telnet://narwhal.cc.metu.edu.tr
şeklinde telnet adresi olabilir ya da
mailto:esin@sirius.gazi.edu.tr
şeklinde bir e-posta adresi olabilir.
Görüldüğü gibi birçok
seçenek bulunuyor. Eğer web sayfanızın bulunduğu sunucudaki dosyalara
ulaşmak istiyorsanız doğrudan dosya adını yazacaksınız, yoksa
protokol://adres şeklinde bir yapı kullanacaksınız; ya da bağlantıya
tıklandığında e-posta atılmasını istiyorsanız mailto: yazısını
kullanacaksınız.
Örnekler:
<A HREF="yeni.html">Bir
başka sayfanız</A>
<A HREF="../index.html">Bir
üst dizindeki başka bir sayfanız</A>
<A HREF="http://www.angelfire.com/ne/esin/anasayfa.html">Esin’
Sayfası</A>
<A HREF="http://www.gazi.edu.tr">Gazi
Üniversitesi</A>
<A HREF="ftp://ftp.metu.edu.tr/pub">ODTU
ftp sitesinde istediğiniz programları
bulabilirsiniz</A>
<A HREF="gopher://gopher.gazi.edu.tr">Gazi
Üniversitesi gopher servisi</A>
<A HREF="telnet://bbs.bilkent.edu.tr:3000">Buces
BBS</A>
<A HREF="mailto:hayse@sirius.gazi.edu.tr">Mail
me</A>
<A HREF="dene.jpg">Deneme
resmi</A>
Sayfanıza herhangi bir
resmi eklemek için <IMG SRC="dene.gif"> gibi bir satır yazmanız
gerekiyor. Ancak dene.gif adlı bir dosyanın bulunması ve bu dosyanın
yazmakta olduğunuz html uzantılı dosya ile aynı dizinde bulunması
lazım. (örneğin deneme.html dosyası C:\WebProjects\ dizinindeyse dene.gif
de o dizin altında bulunmalı). Aksi taktirde resim yerine, resmin
bulunamadığını ifade eden garip bir işaret çıkar.
Sayfanıza resim
eklemeye başladığınız zaman çok fazla resim dosyası olduğunda bunları
bir alt dizinde toplamak isteyebilirsiniz. Örneğin deneme.html dosyası
C:\WebProjects\ altındayken dene.gif dosyasını (ve diğer resimleri) C:\WebProjects\resimler\
altına koyduysanız:
<IMG SRC="resimler/dene.gif">
şeklinde bir komut
yazmanız gerekecektir. Aynı DOS'ta cd komutunu kullanmak gibi ama burada
\ yerine / kullanacaksınız. Aynı şekilde C:\Windows\ altındaki bir
resmi çağırmak için:
<IMG SRC="../windows/dene.gif">
komutunu yazmanız
gerekir. (.. bir üst dizin demek. Aynı mantıkla ../.. iki üst dizin
oluyor)
Diyelim ki DENE.GIF
adlı bir resminiz var ve bu resmi sayfanıza yerleştirmek istiyorsunuz.
Eklemek istediğiniz html dosyasının adı da "resim.html" olsun. Şimdi
öncelikle DENE.GIF dosyasını resim.html dosyasının bulunduğu dizine (directory
ya da folder) kopyalayın. Sonra da resim.html dosyasının herhangi bir
yerine <IMG SRC="DENE.GIF"> yazın. Burada dikkat edilmesi gereken
nokta resim dosyasının tam adıdır. Örneği resim dosyanızın adı dene.GIF
olsaydı <IMG SRC="dene.GIF"> şeklinde yazmanız gerekir. Böylece
web sayfanıza resim eklediniz. Şimdi tarayıcı programınızla açıp
sayfanıza bakın. Komutu yazdığınız yerde resmin çıktığını göreceksiniz.
Resimlerle ilgili
birçok seçenek vardır. Tüm seçeneklerin kullanıldığı bir IMG komutu
örneği şu şekildedir:
<IMG SRC="images/dene.jpg"
BORDER=2 WIDTH=20 HEIGHT=35 ALT="Bu deneme adlı resim" ALIGN="LEFT"
LOWSRC="images/dene-dusuk-cozunurluk.gif">
"SRC"
seçeneğinde resim dosyasının ismi yazılır. "BORDER" seçeneği ile
resminize çerçeve verebilir ya da "BORDER=0" yazarak var olan
çerçeveyi kaldırabilirsiniz. "WIDTH" ve "HEIGHT" ile
resimlerinizin boyutlarını değiştirebilirsiniz. Ancak bu durumda resim
kalitesi düşebilir.
Eğer PhotoShop® ya da
PaintShop gibi resim editörlerinden birini kullanmayı biliyorsanız
resmin boyutlarını WIDTH - HEIGHT ile değil editörle küçültünüz.
Çünkü editörle küçültüldüğünde resmin byte olarak büyüklüğü düşecektir,
bu da sayfanızın daha çabuk yüklenmesini sağlayacaktır.
"ALT" ile
resminize alternatif bir yazı koyabilirsiniz. Bu yazı herhangi bir
nedenden dolayı resim görünmediğinde ve yeni tarayıcı programlarda fare
imleci resmin üzerine geldiğinde görünecektir. Bütün resimlerinize bir
alternatif yazı yazmayı alışkanlık haline getirmelisiniz.
"ALIGN" seçeneği resmin yazıya göre
konumunu belirtir. Eğer "LEFT" yazarsanız resim sola yanaşacak ve
"IMG" komutundan sonra yazılan tüm yazılar resim bitene kadar
resmin sağına yazılacaktır. Ancak resim bitmeden yazının resmin solundan
kurtulmasını istiyorsanız <BR CLEAR="LEFT"> yazmalısınız. Burada
"LEFT" ya da "RIGHT" kullanabilirsiniz.
Liste oluşturulmasını
sağlar.
Sayfanızda kullandığınız yazıların büyüklüğünü,
rengini ve yazı tipini seçebilirsiniz. Yazıların her türlü özellikleri
"FONT" komutu ve bu komutun içine yazılan seçeneklerle belirlenir.
Seçenekler şu şekildedir:
Seçenek
Açıklama Örnek
SIZE
Yazı büyüklüğü <FONT SIZE="+1">...</FONT>
COLOR Yazı
rengi <FONT COLOR="#FF0000">...</FONT>
FACE
Yazı türü <FONT FACE="Times New Roman">...</FONT>
SIZE seçeneğini
iki türlü kullanabilirsiniz. (+,-) ile o anki yazı büyüklüğüne göre
değer verebilirsiniz, ya da doğrudan 1 ile 7 arası bir rakam ile
büyüklüğünü belirtebilirsiniz. Yazıya müdahale etmediğiniz sürece yazı
büyüklüğü "3"tür. Örneğin "FONT SIZE=+1" komutunu kullanırsanız
yazı büyüklüğü 4 olacaktır. Aynı sonucu "FONT SIZE=4" yazarak da
elde edebilirsiniz.
COLOR seçeneği
için BODY komutunu referans alın. Oradakine benzer bir şekilde
seçili olan (yani <FONT> ve </FONT> arasında kalan)
yazının rengini değiştirebilirsiniz. Renklerin tanımı için renk
referansı kısmına bir bakın.
Face seçeneği
için; standart olarak kullanabileceğiniz yazı türleri arasında Arial,
Helvetica, Times New Roman, Comic Sans, Courier, Tahoma ve Verdana yer
alır.
Yazının yanıp sönmesini
sağlar.
Kullanımı:
<BLINK>YANIP
SONEN YAZI</BLINK>
Aşağıdaki kodu not padde “Anasayfa.html” olarak
kaydedin.
<HTML><head>
<title> html öğreniyorum </title>
<center><b><font size=7>BU BİZİM SAYFAMIZ<font>
</b>
<BODY BACKGROUND="C:\webtas\resim\star.jpg"
TEXT="white" LINK="yellow" VLINK="cyan"
ALINK="red">
<center> </br></p>
<div align><img src="c:\webtas\resim\sahil.gif"
width=500
height=300 alt="Hayat Bir Sahildir.">
<br>
<font size=5>
<FONT COLOR="yellow">
<br>
<a href="http://www.gazi.edu.tr" >Universitemiz
</a> </p>
<a href="http://www.altavista.com" > Web'de Kolay
Arama </a> </p>
<a href="http://www.komik.net" > Komik Bir Site
</a> </p>
<a href="mailto:apachi79@hotmail.com">
</p>
<img src="c:\webtas\resim\letter.gif" border=0
alt="mail me:apachi79@hotmail.com" align=bleedleft>
<a href="mailto:apachi79@hotmail.com"> </a>
<font size=2>
<FONT COLOR="white">
<center>
Son Güncelleme Tarihi</br>
3.Kasım.2000 Ankara
Bu sayfadan bir link seçilip ayrıldığında bu
sayfaya geri dön mek için aşağıdaki kodu yazmak gerekir.
<a href="http://www.anasayfa.html" > Ana sayfaya
dön </a> </p>
Burada önemli olan dönmek istediğiniz html
uzantılı dosyanın isminin doğru verilmesidir.