Html Düzeysel Anlatım
BÖLÜM 1. HTML PROGRAMLAMAYA GİRİŞ
1.1 HTML NEDİR?
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.
1.2 HTML’ E GİRİŞ?
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.
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.
1.3 Başlıca HTML Komutları
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.
1.3.1 <HTML> Komutu
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)
1.3.2 <HEAD> Komutu
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)
1.3.3 <TITLE> Komutu
"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.
1.3.4 <BODY> Komutu
HTML dokümanının içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15)
1.3.5 <H1> Komutu
<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>
<B></B> Komutu
Yazının koyu renkte yazılmasını sağlar.
Kullanımı: <B> buraya yazılan metin koyu renk basılır </B>
<I></I> Komutu
Yazının italik yazılmasını sağlar.
Kullanımı: <I> buraya yazılan metin italik basılır </I>
<CENTER></CENTER> Komutu
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>
<BR> Komutu
Satır başı yapar.
Kullanımı: <BR>
1.3.10 <P> Komutu
"<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.
<HR> Komutu
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.
1.3.12 BACKGROUND Komutu
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”>
1.3.13 BGCOLOR Komutu
BGCOLOR sayfanın arka plan rengi (#000000 = siyah);
Kullanımı:
<BODY BGCOLOR= “#FFFFF”>
ya da
<BODY BGCOLOR=’Yellow’>
1.3.14 <A HREF> Komutu
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:[email protected] ş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:
1.2.15 <IMG SRC> Komutu
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.
1.3.16 LI Komutu
Liste oluşturulmasını sağlar.
1.3.17 <FONT></FONT> Komutu
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.
1.3.18 <BLINK> Komutu
Yazının yanıp sönmesini sağlar.
Kullanımı:
<BLINK>YANIP SONEN YAZI</BLINK>
1.4. HTML ile WEB SAYFASI HAZIRLAMA
Aşağıdaki kodu not padde “Anasayfa.html” olarak kaydedin.
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
Beğenmeyebilirsiniz.Size kalmış birşey ben elimden geleni koydum.
Saygılarımla By_ajan
BÖLÜM 1. HTML PROGRAMLAMAYA GİRİŞ
1.1 HTML NEDİR?
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.
1.2 HTML’ E GİRİŞ?
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.
Kod:
<HTML>
<H1>BU BIZIM SAYFAMIZ</H1>
ILK DENEME SAYFASIDIR. <BR>
BU <I> ITALIK </I> BIR YAZI <BR>
[FONT=Times New Roman] BU DA <B> KALIN </B> BIR YAZI [/FONT]
</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.
1.3 Başlıca HTML Komutları
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.
1.3.1 <HTML> Komutu
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)
1.3.2 <HEAD> Komutu
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)
1.3.3 <TITLE> Komutu
"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.
1.3.4 <BODY> Komutu
HTML dokümanının içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15)
1.3.5 <H1> Komutu
<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>
<B></B> Komutu
Yazının koyu renkte yazılmasını sağlar.
Kullanımı: <B> buraya yazılan metin koyu renk basılır </B>
<I></I> Komutu
Yazının italik yazılmasını sağlar.
Kullanımı: <I> buraya yazılan metin italik basılır </I>
<CENTER></CENTER> Komutu
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>
<BR> Komutu
Satır başı yapar.
Kullanımı: <BR>
1.3.10 <P> Komutu
"<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.
<HR> Komutu
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.
1.3.12 BACKGROUND Komutu
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”>
1.3.13 BGCOLOR Komutu
BGCOLOR sayfanın arka plan rengi (#000000 = siyah);
Kullanımı:
<BODY BGCOLOR= “#FFFFF”>
ya da
<BODY BGCOLOR=’Yellow’>
1.3.14 <A HREF> Komutu
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:[email protected] ş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:
Kod:
<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:[email protected]">Mail me</A>
<A HREF="dene.jpg">Deneme resmi</A>1.2.15 <IMG SRC> Komutu
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.
1.3.16 LI Komutu
Liste oluşturulmasını sağlar.
1.3.17 <FONT></FONT> Komutu
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.
1.3.18 <BLINK> Komutu
Yazının yanıp sönmesini sağlar.
Kullanımı:
<BLINK>YANIP SONEN YAZI</BLINK>
1.4. HTML ile WEB SAYFASI HAZIRLAMA
Aşağıdaki kodu not padde “Anasayfa.html” olarak kaydedin.
Kod:
[FONT=Times New Roman]<HTML><head>[/FONT]
[FONT=Times New Roman]<title> html öğreniyorum </title>[/FONT]
[FONT=Times New Roman]<center><b><font size=7>BU BİZİM SAYFAMIZ<font> </b>[/FONT]
[FONT=Times New Roman] [/FONT]
[FONT=Times New Roman]<BODY BACKGROUND="C:\webtas\resim\star.jpg"[/FONT]
[FONT=Times New Roman]TEXT="white" LINK="yellow" VLINK="cyan"[/FONT]
[FONT=Times New Roman]ALINK="red"> [/FONT]
[FONT=Times New Roman] [/FONT]
[FONT=Times New Roman]<center> </br></p>[/FONT]
[FONT=Times New Roman]<div align><img src="c:\webtas\resim\sahil.gif" width=500[/FONT]
[FONT=Times New Roman]height=300 alt="Hayat Bir Sahildir.">[/FONT]
[FONT=Times New Roman]<br>[/FONT]
[FONT=Times New Roman]<font size=5>[/FONT]
[FONT=Times New Roman]<FONT COLOR="yellow">[/FONT]
[FONT=Times New Roman]<br>[/FONT]
[FONT=Times New Roman]<a href="http://www.gazi.edu.tr" >Universitemiz </a> </p>[/FONT]
[FONT=Times New Roman]<a href="http://www.altavista.com" > Web'de Kolay Arama </a> </p>[/FONT]
[FONT=Times New Roman]<a href="http://www.komik.net" > Komik Bir Site </a> </p>[/FONT]
[FONT=Times New Roman] [/FONT]
[FONT=Times New Roman]<a href="mailto:[email protected]"> [/FONT]
[FONT=Times New Roman]</p>[/FONT]
[FONT=Times New Roman]<img src="c:\webtas\resim\letter.gif" border=0 alt="mail me:[email protected]" align=bleedleft>[/FONT]
[FONT=Times New Roman]<a href="mailto:[email protected]"> </a>[/FONT]
[FONT=Times New Roman] [/FONT]
[FONT=Times New Roman]<font size=2>[/FONT]
[FONT=Times New Roman]<FONT COLOR="white">[/FONT]
[FONT=Times New Roman]<center>[/FONT]
[FONT=Times New Roman]Son Güncelleme Tarihi</br>[/FONT]
[FONT=Times New Roman]3.Kasım.2000 Ankara[/FONT]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
Beğenmeyebilirsiniz.Size kalmış birşey ben elimden geleni koydum.
Saygılarımla By_ajan
