İNTERNETİN DÜNYA ÜZERİNDEKİ TARİHSEL GELİŞİMİ
1969 yılında ARPA ( Advanced Research Projects ) isimli kurum ABD savunma bakanlığı bünyesinde ARPANET ( Advanced Research Agency Network - İleri Araştırma Proje Ajansı) isimli, herhangi bir nükleer savaş esnasında hiç kesintiye uğramayacak bir bilgisayar ağı kurmuştur. Bu bilgisayar ağının planlanan temel özelliği, öylesi bir ağ olacaktı ki ağ üzerinde var olan herhangi bir düğüm noktası kesintiye uğrasa bile, ağ üzerinde var olan diğer düğümler ağın işlemini sürdürme prensibine bağımlı olarak bilgi akışını sürdürecekti yani sistem çalışmaya devam edecekti. Bu kurum 1973 yılında ismini DARPA ( Defence Advanced Research Project Agency – İleri Savunma Projeleri Ajansı ) olarak değiştirdi ve aynı yıl içerisinde ( Interneting Project ) isimli bir proje başlattı. Bu projenin temelinde yatan amaç çeşitli ağlar tarafından kullanılan farklı yöntemlerini bünyesinde barındıracak olan bir iletişim yöntemi geliştirmekti, yani ağlar arası bir ağ kurmaktı.
Bu ağ 1973 yılında bir protokol seti geliştirmek üzere Stanford Üniversitesinde daha sonra BBN ve Universty Colloge London dahil olduğu bir internet çalışması başlattı. 1978 yılına kadar TCP’nin dört uyarlaması geliştirildi. 1980 ‘de bu küme sabitlendi ve iletişim kolaylaştırıldı. 1983 yılında tüm ARPANET kullanıcıları TCP/IP polarak bilinen yeni protokole geçiş yapmıştılar. ARPANET 1990 haziranda kaldırıldı yerine Backbone ( yüksek hızlı omurga ağı, çok hızlı bilgisayarları ve ana merkezleri birbirlerine bağlayan bir bilgisayar ağ yapısı ) aldı.
1986-1995 yılları arasında NSFNET ( National Science Foundation Net – Ulusal Bilim Araştırma Ağı ) olarak Amerika Hükümetinin sponsorluğunda işletilen Internet ağı ticari uygulamaların hızlanması ile VBNS ( Very High Speed Backbone – Çok Hızlı Bağlantı Servisi ) çatısında yeniden düzenlenmiştir. Amerika hükümeti yeni yapılanma çalışmaları esnasında internet ağının kendisine ait olan kısmının yapısını muhafaza ederek ticari ağların işletimini NETCOM, USENET, ANS, PSINET gibi özel firmalara devretmiştir. Bu tarihten itibaren intenette var olan teknik standartlar ( Internet Engineering Task Force – İnternet Mühendislik Görev Gücü ) tarafından belirlenmekte ve internetin mimarisinin genişletilmesi ile ilgili kararlar IAB ( Internet Architecture Board – Internet Mimari Kuruluşu ) tarafından alınmaktadır.
TEMEL İNTERNET KAVRAMLARI
World Wide Web ( WWW – Dünya Çapında Kütüphane ) olarak bilinen proje tüm uygulamaları bünyesinde toplayarak günümüzde internetin en temel ortamı olmuştur. Her an, her yerde elinizde var olan bir diz üstü bilgisayar veya taşınabilir telefon aracılığı ile Dünya üzerinde var olan bir çok bilgi kaynağına intrenet servislerini kullanarak ulaşabilir ve paylaşabilirsiniz.
Internet üzerinde mevcut sayfalara ulaşabilmek veya Internet üzerinde çalışabilecek olan sayfalar oluşturmak için çeşitli düzenleyici araçlara ihtiyaç duyulmaktadır. Bu kitap içerisinde internet üzerinde aktif çalışan sayfaların dizaynı ve internet üzerinde dinamik olarak çalışacak olan sayfaların programlanması anlatılacağı için, Internet üzerindeki temel kaynaklardan bazılarının ( incelenecek konuları hedefleyen ) incelenmesini yapalım.
HTML ( Hypertext Markup Language )
Günümüzde Worl Wide Web üzerinde etkili doküman yaratmak üzere geliştirilmiş metin işaretleme dilidir. HTML dokümanları bir text dosyadır ve tek başına yazı olmaktan öte gidemez. Ancak herhangi bir internet tarayıcısı yardımı ile çalıştırıldığında içerdiği komutlara göre ve de tarayıcıyı programın desteklediği özelliklere göre, hazırlanan dokümanlar bir anlam kazanır. Diğer bir söyleyiş ile herhangi bir text editöründe hazırlanarak, kullanmakta olduğumuz tarayıcının yorumlaması esasına dayanarak düz metinler, çeşitli efektler ve yönlendirmeler olarak anlatıp çoklayabileceğimiz bir çok işlemin yapılmasına izin veren bir dildir. HTML ile yapılandırılmış bir metin söz konusu olduğunda , WEB tabanlı içeriğinize uygulanan işaretleme komutları tarayıcı yazılımına dokümanın yapısını ve uygun olduğunda da bu içeriğin nasıl görüntülenmesini istediğinizi bildirir. HTML ile bir sayfa hazırlanırken kod kısmı bir HTML kodu ile başlar ve komutun geçerliliği bittiği yerde aynı komut ismi başına “ / ” işareti konularak sonlandırılır Aşağıda oluşturacak olduğumuz bir metnin üzerinde bu olayı kısaca inceleyelim ..
<komut>
...........
...........
</komut> gerçek bir örnek üzerinde açıklayacak olursak ;
<I> İnternet Programlama </I>WEB sayfası üzerinde belirtmiş olduğumuz metnin eğri (Ialic) olarak belirmesini istersek bu metni <I>...</I> sembolleri arasına alırız. Tarayıcı içerisinde HTML işaretleri olan bir doküman okunduğunda, onu ekranda nasıl oluşturacağını dokümana ilave edilmiş olan HTML özelliklerini göze alarak belirleyerek işleyecektir.
Tarayıcının dokümanın herhangi bir bölümünün HTML işaretçisi ile işaretlendiğini anlayabilmesi için, o metne HTML özellikleri veren ve “TAG” olarak adlandıracak ve kullanacak olduğumuz işaretçiler ile belirlenmesi gerekmektedir. Belirttiğimiz özelliklerin yanı şıra HTML ile ilgili şu noktalar özellikle bilinmeli ve çoğu temel kullanıcı tarafından düşülen yanılgılardan kaçınılacaktır. Her ne kadar HTML ile sayfa oluşturmak program yapmaya benzese de “ script” yapıları ilave edilerek “Dinamik HTML sayfaları” ile zenginleştirilmediği kısımlarında içerisinde mantıksal karar mekanizmaları oluşturulmayacağı için tam anlamı ile bir programlama dili değildir, ayrıca kendisine özel bir çok komutları olmasına rağmen etkili ekran ve yazıcı formlarını “ Stil Sayfaları” ilave edilmediği taktirde dizayn edebilecek kadar güçlü bir biçimlendirme dili değildir.
HTML Web sayfalarının oluşturulması için kullanılan bir işaretleme dilidir. Bu bölümden itibaren sayfalarımızı oluşturmak üzere kullanacak olduğumuz HTML kodlarını ve bu kodları bir araya getirme standartlarını inceleyeceğiz.
HTML Mantıksal Doküman Düzeni
HTML sayfaları oluşturulurken temelde takip edilmesi gereken mantıksal bir düzen mevcuttur. Bu düzen içerisinde şekillendirilen elemanlar internet tarayıcısı tarafından ait oldukları düzen çerçevesinde değerlendirilir. Şekil -1 içerisinde bu düzenin şematik yapılandırılması görülmektedir. Düzenli olarak yazılan HTML dokümanları, içeriği ne olursa olsun aşağıda örneklenecek olan yapıyı ortak olarak paylaşırlar.
<Html>
<Head>
<Title> Doküman Başlığı </title>
...... Diğer ek bilgiler ve yönlendirmeler buraya yazılabilir ........
</Head>
<Body>
........
........
........ Dokümanın içeriği ...........
........
........
</Body>
</html>
Şekil 1- HTML Doküman Mantıksal Düzeni
<HTML> Elementi
Bir HTML dokümanının başlangıç ve bitiş noktalarını belirleyen TAG’ dır ve içerisinde sadece <HEAD> ve <BODY> elementlerini içerir.
<HEAD> Elementi
Aktif olan doküman hakkında tanımlayıcı ve ek bilgilerin yer aldığı kısımdır. Kullanımı seçime bağlıdır ama dokümanların daha anlaşılır olabilmesi için kullanımı tavsiye edilir. <HEAD> elementi içerisinde tanımlayıcı ve yönlendirici olarak kullanılan ve ilerleyen konu ve örnekler içerisinde detaylandırılacak olan <BASE>, <ISINDEX>,<LINK>, <META>, <OBJECT>, <SCRIPT>, <STYLE> elementleri mevcuttur. Fakat HEAD elemanı içerisinde önemli bir rol oynayan ve yoğunlukla kullanılan <TITLE> elementine kısaca bu bölümde değinelim.
• <TITLE> elementi : Tüm HTML dokümanlarında kullanılması önemle tavsiye edilen bir elementtir. HTML dokümanına tarayıcılar ve indeksleme robotlarınca tanınacağı üst başlığı verir. Aşağıda <TITLE> elementi için küçük bir örnek ve bu örneğe ait tarayıcı çıktısı görülmektedir.
<HTML>
<HEAD>
<TITLE>Title Örneği </TITLE>
</HEAD>
<BODY>
Dökümanın Yazım Kısmı
</BODY>
</HTML>
Şekil 2 - Title Örneği Tarayıcı Görüntüsü
<BODY> Elementi
HTML dokümanının gövdesi <BODY> elementi ile başlayıp </BODY> sonlandırma elementi ile biten aralıkta yazılmaktadır. Ayrıca BODY elementi yardımı ile sayfanın zemin rengi, sayfa arkasına döşenecek olan resim, ayfa içerisinde kullanılacak düz metnin rengi, bağlantıların rengi ( Hyperlinks), sayfanın yukarı veya sol tarafa göre konumları belirlenebilir.
<Body
BACKGROUND="resimismi.gif"
BGCOLOR="#rrggbb"
TEXT="#rrggbb"
LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
LEFTMARGIN="40"
TOPMARGIN="40">
....... Yukarıda belirtilen tüm özelliklerin geçerli olduğu kısım ...
.....................
.....................
</Body>
Yukarıda tanımlanan özellikler aktif doküman içerisinde ;
Background Var olan bir imaj dosyasının dokümanın zeminini kaplaması için kullanılır
Bgcolor Dokümanın zemin renginin belirlenmesi için kullanılır. Rengin Hexcadecimal karşılığı, RGB değeri ve ya Rengin ismi yazılabilir.
Text Dokümanın Text renginin belirlenmesi için kullanılır. Rengin Hexcadecimal karşılığı, RGB değeri ve ya Rengin ismi yazılabilir.
Link Doküman içerisinde oluşturulmuş olan bağlantıların ( Hyperlinks ) rengini belirler.
Alink Doküman üzerinde aktif olan, yani o an seçili olan bağlantının rengini belirler.
Vlink Doküman üzerinden ziyaret edilen bağlantıların rengini belirler.
Topmargin Dokümanın üst kenardan ne kadar uzakta olacağını belirler.
Leftmargin Dokümanın sol kenardan ne kadar uzakta olacağını belirler.
HTML İle Doküman Oluşturma
Bildiğimiz gibi HTML Web üzerinde standart bir dildir. HTML, dokümanların mantıksal organizasyonlarını tasarlamak için kullanılan bir dildir. HTML’in sağladığı temel özellikleri aşağıdaki gibi sıralayabiliriz.
• Dokümanlarınızdaki ( Web sayfası dokümanları ) yazılara değişik düzenler verebiliriz.
• Tablo, Liste, Adres alanı, Sabit genişlikli yazı alanı gibi özel biçimler oluşturabiliriz.
• Dokümanlarınızda Çerçeve ( Frame ) olarak isimlendirilen birbirinden farklı fakat ilişkili yapılar oluşturabiliriz.
• Değişik tipteki menü yapıları ile kullanıcının etkileşimli bie şekilde seçebileceği veri giriş sistemlerini kullanabiliriz.
• Ses, Grafik ve Animasyon gibi uygulamaların dokümanlarımızda çalıştırılabilmemiz için gerekli ortamları sağlar
• Java, Javascript, VB Script gibi programlama dilleri ile doküman içeriklerinizin etkili kullanımı için gerekli ortamları sağlar.
• Sunucu tarafında çalışan programlar aracılığı ile içerikleri etkili kullanımını sağlar
Temel Olaylar
HTML dokümanları oluşturulurken, gerek bilgilendirme dokümanları olsun gerekse dinamik dokumanlar olsun kullanılan temel olaylar vardır. Bunlar doküman üzerinde işlem gören ve tarayıcı tarafından direk olarak yorumlanarak ekrana istenilen düzenleri gönderen, biçimlendirme olaylarıdır ve metinler üzerinde işlevlerini gerçekleştirirler.
Başlıklar
Dokümanlarımız içerisinde “ başlık satırları” kullanmak istediğimiz zaman başlık elementlerini kullanırız. Başlık koymak ile dokümanımız üzerindeki görsel kaliteyi ve ilgiyi artırabiliriz. Mevcut olarak kullanılan 6 başlık düzeni mevcuttur. <Hn> ile başlatıp </Hn> ile sonlandırabiliriz. En büyük başlık düzenimiz <H1> ve en küçük olanı ise <H6> dır. Başlık metninin temel özelliği bir çok tarayıcı üzerinde başlık satırları dokümanın normal metinlerine göre daha büyük ve ya belirgin olarak belirirler. Bu belirginlikte başlık satırlarına mantıksal olarak anlamlar yükler.
<HTML>
<HEAD>
<TITLE> Başlık Örneği </TITLE>
</HEAD>
<BODY>
<H1>En büyük başlığımız H1’ dir </H1>
<H2>2. büyük başlığımız H2’ dir </H2>
<H3>3. büyük başlığımız H3’ dir </H3>
<H4>4. büyük başlığımız H4’ dir </H4>
<H5>5. büyük başlığımız H5’ dir </H5>
<H6>6. büyük başlığımız H6’ dir </H6>
Bu da sayfamızda kullandığımız normal metnimiz.
</BODY>
</HTML>
Şekil 3 - Başlık Elementi Tarayıcı Görüntüsü
Başlık elementi kullanarak oluşturduğumuz satırları dokümanımız içerisinde hizalamak istersek “Align” özelliğini kullanmamız gereklidir
<HTML>
<HEAD>
<TITLE> Başlık Örneği </TITLE>
</HEAD>
<BODY>
<H1 Align=”Left”>En büyük başlığımız H1’ dir </H1>
<H2 Align=”Center”>2. büyük başlığımız H2’ dir </H2>
<H3 Align=”Right”>3. büyük başlığımız H3’ dir </H3>
</BODY>
</HTML>
Paragraf ve Kesmeler
Normal metin dokümanlarında var olan satır sonu, sekme ve ardışık boşluk karakterleri HTML dokümanlarında göz ardı edilirler. Bu sebepten dolayı dokümanlarımızın daha biçimle ve düzenli olarak tarayıcıda görünmesini istersek Paragraf ve Kesme elementleri ile metnimizi düzenlememiz gereklidir. Yazılan metnin <P> ve </P> elementleri arasına alınması bu metnin mantıksal paragraf içerisine alındığını gösterir.
Şekil 4 - Başlık Elementi Hizalama Tarayıcı Görüntüsü
<HTML>
<HEAD>
<TITLE> Paragraf Örneği </TITLE>
</HEAD>
<BODY>
Paragraf Örneği
<P>P elementleri kullanarak oluşturulmuş olan bir
paragraf örneğini incelemekteyiz. </P>
<P Align=”Center> Bu paragrafımızda ise Paragrafımızı oluşturan satırların Alinh=”Center” özelliği ile ortalandığı görülmektedir. </P>
<P Align=”Right”>Paragrafımızın satırları sağa hizalanmıştır </P>
</BODY>
</HTML>
Şekil 5 - Paragraf Elementi Tarayıcı Görüntüsü
Bir dokümana boş satırlar eklemek ve satırı istenilen yerde bitirerek bir alt satıra geçirmek için <BR> elementi kullanılır
<HTML>
<HEAD>
<TITLE> Paragraf ve Kesme Örneği </TITLE>
</HEAD>
<BODY>
<P>P elementleri kullanarak <BR>
oluşturulmuş olan bir
paragraf örneğini incelemekteyiz. </P>
<Br><Br><Br>
<P Align=”Center> Bu paragrafımızda ise Paragrafımızı oluşturan <BR>
satırların Alinh=”Center” özelliği ile ortalandığı görülmektedir. </P>
</BODY>
</HTML>
Dokümanımız içerisinde uzun bir satır yazmak istiyorsak ve bu satırın hiç kesilmeden yani birkaç satıra bölünmeden internet tarayıcısında görünmesini istiyorsak No Break elementini <NOBR> kullanmamız yeterlidir. Tüm HTML komutları için büyük küçük harf duyarlılığı mevcut değildir. <NoBr> ile yazılan komut ile <NOBR> şeklinde yazılan komut aynıdır.
Şekil 6 - Kesme Elementi Tarayıcı Görüntüsü
Metinleri Ortaya Hizalama <CENTER> Elementi
Hazırlamakta olduğumuz dokümanların tümünün veya bir kısmının veya dokümanımızın herhangi bir noktasına yerleştirecek olduğumuz imaj ( resim ) elemanımızın dokümanımızı internet tarayıcısında merkezden itibaren görüntülenecek şekilde yerleştirilmesini istediğimiz taktirde <CENTER> elementini kullanırız. <CENTER> ve </CENTER> elementleri arasına yazılacak veya yerleştirilecek olan her eleman, tarayıcının merkezinden itibaren görüntülenecek şekilde konumlandırılır.
<HTML>
<HEAD>
<TITLE> Merkeze Hizalama Örneği </TITLE>
</HEAD>
<BODY>
<CENTER>
<P> CENTER elementleri kullanarak <BR>
oluşturulmuş olan bir
paragraf örneğini incelemekteyiz. </P>
</CENTER>
<P> Bu Paragraf ise CENTER elementi sınırları <BR>
dışında olduğu için merkeze yerleştirilmemiştir
</BODY>
</HTML>
Şekil 7 - CENTER elementi Tarayıcı Görüntüsü
Bölümler
Oluşturduğumuz aynı HTML dokümanı içerisinde birbirinden bağımsız kısım yada bölümler halinde düzenlemek istediğimiz alanların oluşturulması için kullanılan elementimizdir. Özellikle kitabımızın ileriki bölümlerinde inceleyecek olduğumuz stil sayfalarında kendisine daha etkili kullanım imkanı bulmaktadır. <DIV> ve </DIV> elementleri arasına yerleştirilen tüm elemanlar doküman içerisinde farklı bir bölüm gibi davranmaktadır.
<HTML>
<HEAD>
<TITLE> Bölümler Örneği </TITLE>
</HEAD>
<BODY>
<CENTER> <P>
<H1> DIV Elementinin Kullanımı </H1>
</P> </CENTER>
<DIV> <P>
<H3> DIV elementi eğer hiçbir hizalama verilmezse başlangıç olarak sola dayalıdır </H3>
</DIV>
<DIV ALIGN=”RIGHT”>
<P> Eğer DIV elementimize hizalama ( Alignment ) değerini sayfamızın sağ veya soluna veya merkeze yönlendirirsek,b ayırmış olduğumuz bölüm belirtilen hizalara yerleşecektir. </P>
<P> Bu örneği iyice algılamaya çalışın.. </P>
</BODY>
</HTML>
Şekil 8 - DIV Elementi Tarayıcı Görüntüsü
Metin Elementleri
HTML dokümanları içerisinde kullanacak olduğumuz metin seviyeli elementlerin görünüm noktasındaki fiziksel özelliklerine etki etmek için kullanılan elementleri aşağıdaki tablo içerisinde kısaca inceleyelim.
<I> ... </I> Yatık yazı tipi ( Italik )
<B> ...</B> Kalın Yazı Tipi ( Bold)
<TT> ... </TT> Daktilo yazı tipi ( Eş aralıklı )
<U> ... </U> Altı çizgili yazı tipi ( Under line )
<STRIKE>...</STRIKE> İçinden çizgi geçen yazı tipi
<SUB>...</SUB> Alt indis
<SUP>...</SUP> Üs indis
<BIG>... </BIG> Büyük yazı tipi
<SMALL>...</SMALL> Küçük Yazı Tipi
Belirtmiş olduğumuz tüm bu fiziksel özellikleri aşağıdaki örnek üzerinde kısaca inceleyelim;
<HTML>
<HEAD>
<TITLE> Metin Özellikleri ve Bölme Özelliği </TITLE>
</HEAD>
<BODY>
<DIV>
Yazılan bu yazı <I> Yatık bir yazı tipidir </I> <BR>
Yazılan bu yazı <B> Kalın bir yazı tipidir </B> <BR>
</DIV>
<DIV ALIGN=”CENTER”>
Yazılan bu yazı <U> Altı Çizgili yazıdır </U> <BR>
Yazılan bu yazı <STRIKE> Üstünden Çizgi Geçen yazıdır </STRIKE> <BR>
Suyun Formülü H<SUB>2</SUB>O dur <BR>
Bir sayının karesi X<Sup>2</SUP> ile ifade edilir <BR>
</DIV>
<DIV ALIGN=”RIGHT”>
Bu <BIG> Yazı <BIG> giderek <BIG> Büyümektedir <BIG> Dimi </BIG></BIG></BIG></BIG>
<BR>
Bu <SMALL> Yazı <SMALL> giderek <SMALL> küçülmektedir <SMALL> Dimi </SMALL></SMALL></SMALL></SMALL>
</DIV>
</BODY>
</HTML>
Şekil 9 - Metin Elementlerinin Tarayıcı Görüntüsü
Biçimlendirilmiş Metin
HTML üzerinde hazırlamakta olduğumuz dokümanların bazen düz yazı gibi değil de düzenleyecek olduğumuz biçimde tarayıcıda belirmesini isteriz. Bu işlemi gerçekleştirmek için metnimizi <PRE>...</PRE> elementleri arasında oluştururuz. Eğer bu elementi kullanmayıp diğer metin şekillendirme ve biçimlendirme elementlerini kullanmaya kalkarsak, aynı biçimi elde edebiliriz ancak bu işlem için bir çok element kullanmamız gerekecektir.
<HTML>
<HEAD>
<TITLE> Biçimlendirilmiş Metin </TITLE>
</HEAD>
<BODY>
Pre elementleri
Arasına alınmayan bu
M
E
T
İ
N
Hazırlandığı gibi değil düz metin olarak görülecektir
<PRE>
Pre elementleri
Arasına alınan bu
M
E
T
İ
N
İ
S
E
Hazırlandığı gibi görülecektir
</PRE>
</BODY>
</HTML>
Listeler
Web dokümanlarımızın içerik ve görüntülerini, HTML kodlarının sağlamış olduğu üç farklı liste seçeneği ile zenginleştirebilir, dokümanlar içerisinde daha anlamlı içerikler oluşturabiliriz. Liste elementlerimiz sıralı, sırasız ve tanımlama listeleri olarak kullanılabilmektedir.
Sıralı Liste <UL>.....</UL>
Sırasız Liste <OL>.....</OL>
Tanım Listeleri <DL>
<DT> Tanımlanacak Terim
<DD> Tanım Kısmı
</DD> </DT> </DL>
Şekil 10 - Düzenlenmiş Metin Tarayıcı Çıktısı
Sırasız Listeler <UL> ( Unordered List)
Sıralamanın önemsiz olduğu tür listelerin oluşturulmasında kullanılır. <UL> ..</UL> elementleri arasında <LI> ( List Item) elementi aracılığı ile listemiz içerisinde yer almasını istediğimiz elemanlar yerleştirilir ayrıca liste elemanlarının belirteci olarak kullanılacak belirteçler (im) kullanılabilir. Bu belirteçler şöyle sıralanabilir;
İçi Dolu Daire =disc
Daire =circle
Kare =square
bu belirteçler TYPE=” belirteç adı” ile liste içerisinde tanımlanabilir. İç içe listeler tanımlayarak dokümanlarımızı biçimsel olarak etkili yapabiliriz.
<HTML>
<HEAD>
<TITLE> Sırasız Liste Örneği </TITLE>
</HEAD>
<BODY>
<UL>
<LI> Listenin ilk Elemanı
<LI TYPE=”Disc”> Listenin ikinci Elemanı
<UL TYPE=”SQUARE”>
<LI> Alt listenin ilk elemanı
<LI> Alt Listenin ikinci elemanı
<LI> Alt Listenin Üçüncü elemanı
</UL>
<LI> Listenin ikinci elemanı
<LI> Listenin üçüncü elemanı
</UL>
</BODY>
</HTML>
Şekil 11 - Sırasız Liste Tarayıcı Görüntüsü
Sıralı Listeler <OL> ( Ordered List)
Sıralamanın önemli olduğu bir listenin oluşturulması gerektiğinde kullanılır. Sıralama genellikle büyük harfler, küçük harfler, roma rakamları veya sayısal olarak seçime bağlı olarak yapılır. Eğer seçim yapılmamışsa başlangıç sıralama değeri sayısaldır. Listeye her yeni bir ilave edildiğinde otomatik olarak numaralandırılacaktır.
(TYPE=A) – Büyük Harfler...... A, B, C ...
(TYPE=a) – Küçük Harfler...... a, b, c ...
(TYPE=I) – Büyük Roma Rakamları..... I, II, III ...
(TYPE=i) – Küçük Roma Rakamları..... i, ii, iii ...
(TYPE=1) – Normal Sayısal Düzen.......1, 2, 3 ...
otomatik olarak sıralandırma işlemi TYPE tanımlamasından bağımsızdır, herhangi bir type tanımlaması yapmadan listemize 2 eleman ilave ettik, ilkinin numarası “1” ikincisininki “2 “ olacaktır, üçüncü elemanımızı ise TYPE=”A” olarak tanımlarsak numarası otomatik olarak artma prensibini bağlı olarak “A“ değil “C” olacaktır. Sıralı listeler ile ilgili vereceğimiz örneği iyi inceleyiniz.
<HTML>
<HEAD>
<TITLE> Sıralı Liste Örneği </TITLE>
</HEAD>
<BODY>
<OL>
<LI> Listemizin 1. elemanı
<LI> Listemizin 2. elemanı
<OL TYPE=”a”>
<LI> Alt listemizin 1. elemanı
<LI> Alt listemizin 2. elemanı
<LI> Alt listemizin 3. elemanı
<OL TYPE=”i”>
<LI> Alt, Alt Listemizin 1. elemanı
<LI> Alt, Alt Listemizin 2. elemanı
</OL>
<LI> Alt listemizin 4. elemanı
</OL>
<LI> Listemizin 3. elemanı
<LI TYPE=”I”> Listemizin 4. Elemanı
<LI TYPE=”A”> Listemizin 5. Elemanı
</OL>
</BODY>
</HTML>
Şekil 12 - Sıralı Liste Tarayıcı Görüntüsü
Tanımlama Listeleri <DL> ( Definition List)
Bir tanım listesi, ilgili açıklamaları ile eşleştirilmiş terimler çiftlerinden oluşan bir listedir. Yani terimler sözlüğüdür. Tanım listeleri <DL>...<DL> elementleri arasına yerleştirilir, tanımlanacak olan her terim <DT>...</DT> elementleri arasında terim adı ile belirtilir ve terimle ilgili tanım kısmı <DD>..<DD> elementleri arasına yazılır. Aşağıdaki örnekte tanım listeleri ile sıralı listeleri iç içe gösteren örneği inceleyelim.
<HTML>
<HEAD>
<TITLE> Tanımlama ve Sıralı Liste Örneği </TITLE>
</HEAD>
<BODY>
<OL>
<LI> A ile ilgili Tanımlamalar
<DL>
<DT> AT
<DD> Genellikle insanlar için, yük ve eşya taşımakta kullanılan, güçlü, hızlı koşabilen dört ayaklı bir binek hayvanı...
</DD>
</DT>
<DT> AYI
<DD> İri cüsseli, güçlü, yırtıcı ve çok tehlikeli evcil olmayan yabani bir hayvan
</DD>
</DT>
</DL>
<LI> B ile ilgili Terimler
<DL>
<DT> BALIK
<DD> Sularda yaşayan, insanlar ve diğer et yiyen canlılar için yüksek besin değeri olan bir hayvan
</DD>
</DT>
<DT> BİRA
<DD> Alkollü, arpa özünden yapılan insanlar tarafından tüketilen bir içecek
</DD>
</DT>
</DL>
</OL>
</BODY>
</HTML>
burada vermiş olduğumuz örnekte sıralı listeler ile tanımlama listelerini aynı dokümanda kullandık. Düzenli yapılan bir planlama ile her üş listeleme modelimizde aynı doküman içerisinde zenginlik ve anlaşılırlığı artırmak için kullanılabilmektedir. Listelerin iç içe kullanımlarında herhangi bir sınırlama mevcut değildir, fakat içeriklerin karışmamaları için liste modellerinin başlangıç ve bitim noktaları kesin olarak belirtilmelidir.
Şekil 13- Tanımlama Listelerinin Tarayıcı Görüntüsü
Yatay Çubuklar
HTML dokümanları içerisinde görsel olarak birbirinden ayrı görülmesini istediğimiz noktalara yatay çubuk <HR> elementleri koyarak gerçekleştirebiliriz. <HR> elementi boş bir elementtir, bitiş imi mevcut değildir.<HR> elementinin sahip olduğu bazı nitelikler aşağıda kısaca çıkartılmıştır.
ALIGN Yatay çizginin sayfaya göre hizalanmasını ayarlar. Varsayılan değer LEFT’ tir
COLOR Renk ismi veya Hexadecimal renk kodu girilerek çizgiye renk verilir
NOSHADE Yatay çizginin gölgesi olup olmamasına karar veren niteliktir
SIZE Yatay çizginin pixel olarak değerini gösterir
WIDTH Yatay çizginin genişliğini pixel veya, % cinsinden belirleyen niteliktir
<HTML>
<HEAD>
<TITLE> Yatay Çizgi Örneği </TITLE>
</HEAD>
<BODY>
<P> Yatay Çizginin büyüklüğü 20 olacak </P>
<HR SIZE=”10”>
<P> Yatay Çizginin gölgesi olmayacak ve genişliği %20 olacak </P>
<HR WIDTH=”20” NOSHADE>
<P> Yatay Çizginin Rengi Kırmızı olacak </P>
<HR COLOR=”RED”>
</BODY>
</HTML>
Şekil 14 - Yatay Çizgi Tarayıcı Görüntüsü
URL ( Uniform Resource Locator ) Biçimli Kaynak Bulucu
İnternet üzerindeki kaynaklar sürekli olarak hızla artmaktadır. İnternet üzerinde var olan bir bilgiye ulaşabilmek için, ilk olarak istenilen bilginin konumlandığı adresin bilinmesi gerekmektedir. Bu nedenle tüm dünya üzerinde internet üzerinde yer alacak olan bilgilerin adreslenmesi daha doğrusu belirlenen bir adres noktasına yerleştirilmesi gerekmektedir. Bu nedenle URL olarak adlandırılan bir standart kullanılmaktadır. Belirlenen bu adresler aracılığı ile pasif kullanıcılar bile tarayıcının adres hanesine yazacağı bir adres ile bilginin konumlandırılmış olduğu noktaya rahatlıkla ulaşabilmektedir. İnternet üzerinde var olan herhangi bir bilgiye ulaşmak için takip edilmesi gereken basamak ;
• Aranılan bilgiye konumlanmak için, bu bilginin var olduğu makinenin IP olarak bilinen adresinin bilinmesi gerekir.
• Ip adresi ile özelleştirilen makineye ulaştıktan sonra, aranılan dosyanın bulunduğu dizin veya alt dizin yapılarına ulaşmak gerekir.
Bir URL’ nin yapısı aşağıda gösterildiği gibidir.
protokol://site adresi/dizin/dosya adı
Site Adresi
Bütün WEB dokümanları, global internet veya özel bir intranetin üzerindeki bir hizmet birimi bilgisayarı üzerinde durur. Bir dokümana ulaşabilmenin ilk koşullarından birisi bilginin konumlanmış olduğu bu hizmet birimine ulaşmaktır. Internet üzerinde konumlanan her hizmet birimi TCP/IP olarak bilinen bir ağ protokolü kullanmaktadır ve kendisine özel IP adresine sahiptir. Fakat IP adresleri rakamsal kodlamadan oluştuğu için kullanıcılar tarafından bu kodlamayı hatırlamak ve kodlamak zor olacağı için Domain Name olarak adlandırılan sembolik isimler kullanılmaktadır.
Dizin
Hedeflemiş olduğumuz WEB dokümanına site adresi ile ulaştığımız zaman, o sitenin üzerinde WEB sunucu tarafından desteklenen kök dizin üzerine konumlanırız. Dizin bilindiği üzere bilgisayar sistemleri üzerinde bilgilerin daha düzenli olarak bulundurulması için oluşturulan mantıksal olarak ayrılmış birimlerdir. Bu noktadan sonra aradığımız bilginin konumlandırılmış olduğu dizin yapıya yönlenmek gerekmektedir. WEB ortamında dizinlere konumlanmak için ( / ) ayıracı kullanılır. Aşağıda basit bir örnek görülmektedir.
adı
protokol adı site adresi dizin adı dosya adı
Dosya Adı
Bir dokümanın hizmet birimi ve dizin yolu belirlendikten sonra bir sonraki adım, kullanıcın ulaşmak istediği tüm bilgileri içerisinde bulunduran dosya yapısına konumlanmaktır.
HTML ile Dokümanların Bağlanması <A> Elementi
Önceki kısımlarda HTML komutlarının doküman düzenleyici olarak kullanılan kısımlarını inceledik. HTML dokümanları içerisinde bulundurdukları yönlendirme elementleri aracılığı ile farklı sayfalar ve ya farklı siteler arasında gezinmeyi, diğer bir deyiş ile dokümanların birbirlerine yönlendirilmesini sağlayabilir. Hiper-bağlantı olarak da adlandırabilecek olduğumuz bu yönlendirme işlemini Anchor ( Çapa ) <A> olarak tanımlanan element ve içerdiği nitelikleri kullanılarak gerçekleştirilir. Diğer bir ifade ile herhangi bir yerleşimdeki dokümanlara hiper bağlantı oluşturmak üzere çapa elementi kullanılmaktadır. <A>...</A> elementleri arasında ve çapa elementinin var olan çeşitli niteliklerine verilecek değerler yardımı ile bu tür bağlantılar oluşturulabilir. Çapa elementlerinin mevcut olan niteliklerini kısaca inceleyecek olursak;
HREF
Dokümanlar arasında bağlantılar teşkil edileceği zaman çapa elementinin kullanılması zorunlu plan tek niteliği HREF dir. HREF ile bağlantı yapılacak olan diğer bir WEB sayfasının veya WEB sitesinin adresi belirtilir.
<A HREF="http://www.cumhuriyet.edu.tr/smyo"> Sivas MYO </A>
Eğer bağlantı kurulacak olan kısım dokümanın içerisinde var olan dahili bir dallanma olacaksa, konumu belirtmek için # sembolü kullanılır.
<A HREF="doküman.html#deneme">Deneme Kısmı</A>
yukarıdaki örneğimizde “doküman.html” içerisinde belirlenen deneme isimli bir noktaya yönlendirme yapılmaktadır. Tabi şu unutulmamalıdır, deneme isimli noktamız doküman.html dosyası içerisinde belirlenmelidir. Bu belirleme ise aşağıda gösterildiği gibi yapılmalıdır;
doküman.html dosyası içerisinde, deneme olarak belirlenecek ve yönlenilecek nokta seçildikten sonra o noktaya <A NAME=”deneme”>Deneme</A> gibi bir tanımlama yapılmalıdır. Burada NAME=”deneme” olarak belirtilen aslında yukarıda HREF=”doküman.html#deneme ile yönlendirme adresinin belirlendiği noktadır.
HREF elemanı ile yapılabilecek bazı yönlendirme işlemlerini örnekleyelim..
<A HREF="http://...">
Başka bir WEB sitesine yönlenmek için kullanılır
<A HREF="ftp://...">
Dosya tansferi için bir FTP sitesine yönlenmek için kullanılır
<A HREF="gopher://...">
Bir Gopher servisine konumlanmak için kullanılır
<A HREF="mailto:...">
Bir mail server veya mail adresine bağlanmak için kullanılır
<A HREF="mailto:agyuksek@vumhuriyet.edu.tr ">e-mail</A>
.
NAME
HREF elementini anlatırken değinmiş olduğumuz üzere yönlenilen doküman üzerinde herhangi bir dahili adrese konumlanmak için kullanılır.
<A NAME="Kahve">Kahve</A> Dokümanın içerisinde bağlantı yapacak link için hedef belirlemek için tanımlanır
<A HREF="#Kahve">Kahve</A> Hedef olarak belirlenen kısma yönlendirme yapmak için tanımlanır.
TITLE
Çapalar için Title niteliğinin kullanımın oldukça faydalı olduğu bilinir. Bağlantılar için balon yardım bilgileri ve ya ipucu ilave etmek için kullanılır. İmleç bağlantının üzerinden yapılacağı eleman üzerinde sabit tutulursa TITLE niteliği tarafından belirtilen ipucu belirecektir.
<A HREF=””” TITLE=” Cumhuriyet Üniversitesi Sayfası Bağlantısı”> Cumhuriyet üniversitesi</A>
Şekil 15 - TITLE Niteliği Tarayıcı Görüntüsü
TARGET
Tarayıcı pencereleri kendilerini temsil eden isimleri mevcuttur. Aktif olan pencere diğer bir pencereyi ismiyle hedefleyebilir. Bağlantı oluşturulduğu taktirde, hedeflenen pencere aktif olacaktır. Bu özellik sadece Çerçeve özelliğini destekleyen browserlar tarafından desteklenir. Basit kullanımı aşağıda belirtildiği gibidir.
<A HREF="url.html" TARGET="pencere_adı">Bağlantı Metni</A>
TARGET elementini bazı niteliklerini ileriki bölümlerde FRAME ( Çerçeveler ) konusunda inceleyeceğiz.
Görüntüler Üzerinden Bağlantı Kurulması
Dokümanımız üzerine yerleştirecek olduğumuz bir imaj dosyası üzerinden de farklı site veya dokümanlarımıza çapa elementi yardımı ile bağlantı kurabiliriz. Eğer bir imaj üzerinden bağlantı kuracak isek tarayıcı üzerinde bu imajın etrafında bağlantı rengi ile aynı renkte bir çerçevenin oluştuğunu görürüz. HTML dokümanımız üzerine bir imaj dosyası yerleştirelim ev bu imaj üzerinden diğer bir sayfaya ve ya siteye bağlantının nasıl yapılacağını bir örnek ile inceleyelim.
<HTML>
<HEAD>
<TITLE> İmage Üzerinden Bağlanma </TITLE>
</HEAD>
<BODY>
<A HREF=”smyo.html”><IMG SRC=”smyo.jpg”></A>
</BODY>
</HTML>
Yukarıda kodları görülen dokümanda, smyo.jpg olarak dokümanımıza ilave edilen imaj üzerine mouse ile seçim yaptığımız zaman, smyo.html dosyasına bağlantı yapma işlemi görülmektedir. HTML dokümanları üzerinde imajlar kullanırken, imajlarımız üzerinde işlemler yapmamızı sağlayan bazı nitelikler mevcuttur bunları şöyle sıralayabiliriz ;
ALT Bu seçenek, görüntüleri göstermeyen kullanıcı vekilleri ve kullanıcının görüntü seçeneğini devre dışı bıraktığı grafik tarayıcıları için alternatif metin sunulması amacı ile kullanılır. Ayrıca ALT niteliği görüntü için alternatif bilgi sağlayıcı olabilir. Çoğu tarayıcılarda imajın üstüne mouse ikonunu getirip bir süre tutarsanız ALT niteliği ile verilen metin görülebilir.
<IMG SRC=”dunya.jpg” ALT=”Dünya Resmi”>
ALIGN Bir imaj dokümanımız içerisine yerleştirildikten sonra, bu imaj ALIGN niteliğinin TOP,CENTER ve BOTTOM değerleri ile doküman içerisinde hizalanabilir. ALIGN niteliği ile metin satırı imajın sağına soluna,üstüne veya altına da hizalanabilir. Eğer hiçbir değer atanmamış ise varsayılan olarak aşağı hizalanır.
BORDER İmajın etrafını belirginleştirmek için sınır koymak amacı ile kullanılır. Dğer olarak 0 verilir ise sınır çizgisi olmaz.
HSPACE İmajın metne göre daha hassa bir konuma yerleştirilmesini istediğimiz taktirde piksel olarak verilecek değerler ile imajın yatay ve dikey olarak tanımlanan tampon alanlarının boş kalacağı ve metin bilgilerinin bu tampon alanlarından sonra başlayacağı görülecektir.
VSPACE
HEIGHT Kullanacak olduğumuz imajın dokümanımız içerisine konumlanırken % lik olarak imajın yüksekliğinin ayarlanmasını sağlar.
WIDTH Kullanacak olduğumuz imajın dokümanımız içerisine konumlanırken % lik olarak imajın genişliğinin ayarlanmasını sağlar.
LOWSRC İmajların sayfaya yüklenirken geçen sürede LOWSRC ile tanımlanan asıl imajın daha küçük boyutlu bir versiyonun hızlıca yüklenip sayfada belirmesini ve daha sonra büyük boyutlu olan imajın yüklenmesinin tamamlanmasını sağlar. Dokümanların hızlı şekilde yüklenerek bütünlüğün sağlanması açısından önemlidir.
<html>
<head>
<title>Baglanti Örnegi</title>
</head>
<body>
<P><A HREF=www.Cumhuriyet.edu.tr><IMG SRC="genel.jpg" ALT="Cumhuriyet Üniiversitesi"
ALIGN="left" BORDER =4 HSPACE=10 VSPACE=10 STYLE="HEIGHT: 124px; WIDTH: 198px" >
Cumhuriyet Universitesi Genel Gorunum</P></A>
<P>Universite icerisindeki genclik parkı ve</P>
<P>icerisinden gecen yol gorulmektedir</P>
<P>Bu hazırlıkta ALIGN="LEFT" yapilmistir</P>
<P>Kenar cizgi kalinligi BORDER="5" verilerek</P>
<P>elde edilmistir, Yazinin resme olan uzakligi ise</P>
<P>HSPACE ve VSPAE degerleri 10 yapilarak ayarlanmistir.</P>
<P> </P>
<P><IMG src="genel2.jpg align=right alt="Hastane Resmi" border=0 height=236
hspace=10 " style="HEIGHT: 139px; WIDTH: 263px" vspace=10
width=365></P>
<P>Burada da hastahane nin genel gorunumu
verilmektedir.</P>
</body>
</html>
Şekil 16 - İmaj Üzerinden Bağlantı Kurma Örneği
Görüntü Haritaları
Bazı Web dokümanlarında, dokümanın üzerine yerleştirilmiş bir imajın farklı noktalarından farklı url adreslerine yönlendirmeler yapıldığını görmüşsünüzdür. HTML dokümanlarında kullanılan iki tür görüntü haritası mantığı mevcuttur;
• Hizmet birimi taraflı
• İstek birimi taraflı
Tercih edilme yoğunluğu ve talepleri yerine getirmede sağladığı yüksek avantajlarından dolayı bu kitabımızda istek birimi taraflı görüntü haritalarını inceleyeceğiz.
IMG elementine USEMAP niteliği eklenerek ve görüntü haritasının etkin bölgelerini tanımlayan MAP elementine gönderme yapmasının sağlanmasıdır. Bu açıklamamızı bir örnek üzerinde daha iyi ifade edebiliriz ;
<IMG SRC=”dunya.jpg” USEMAP=”#duzenharitası”>
<MAP> elementi genellikle aynı doküman içerisinde yer alır ama, etkin dokümanın dışında olması durumu içinde destek vardır. <MAP> elementi bir HTML dokümanının gövdesi içerisinde herhangi bir yerde geçebilir, ancak genellikle dokümanın sonunda bulunur. <MAP> elementinin NAME isimli niteliği harita ile ilişkilendirilmiş belirleyiciyi işaretler. Bu haritanın ismini de , IMG elementinin bir niteliği olan USEMAP niteliği ile belirlenir. Imaj üzerinde oluşturulacak olan haritanın ( MAP ) sınırları AREA elementi içerisinde belirlenir ve aşağıda verilen tabloda AREA elementinin nitelikleri görülmektedir.
SHAPE RECT, CIRCLE, POLY Şeklin türünü belirler
COORDS x,y koordinat çiftleri Şekli tanımlayan noktalar
HREF URL Bağlantının Hedefi
TARGET Bir çerçeve ismi Bağlantının çerçeve ismini belirler
ID Metin Çapa hedefini başka bir çapa, stil sayfası erişimi ve programlama kullanımına açar
TITLE Metin Şeklin ipucu metnini gösterir
<AREA> elementinin önemli niteliklerini şu şekilde inceleyebiliriz ;
HREF Söz konusu alan tıklanıldığı zaman hedef URL nin belirlenmesi amacı ile tanımlanır.
SHAPE Bu iki nitelik hedef URL ye yönlendirmenin yapılacağı alanların tanımlanması için kullanılır. SHAPE nin niteliği RECT yapıldığında, COORDS ile bu dikdörtgen alanın koordinatları belirlenecektir. Aşağıdaki tabloda farklı şekillerde SHAPE ve COORDS un alacağı durum ve değerleri inceleyelim
COORDS
SHAPE ve COORDS ‘un farklı biçimlere göre alacağı değerler;
RECT Sol-x, Üst-x, Sağ-x, Alt-x <AREA SHAPE=”Rect” COORDS=”0,0,100,50” HREF=”den.htm”>
CIRCLE Orta-x, Orta-y, çap <AREA SHAPE=”Circle” COORDS=”25,25,10” HREF=”den.htm”>
POLY x1,y1,x2,y2, ..... <AREA SHAPE=”Poly” COORDS=”255,122,206,333,..” HREF=”den.htm”>
<html>
<head>
<title>Görüntü Haritaları</title>
</head>
<body>
<IMG SRC=”genel.jpg” USEMAP=”#sekiller” >
<!— genel.jpg imajının alanlara ayrılmasının tanımlanması -->
<MAP NAME=”sekiller”>
<AREA SHAPE=”rectangle” COORDS="273,152, 354, 236 HREF=””">
<AREA SHAPE=”circle” COORDS="56,110,22 HREF=””">
<AREA SHAPE=”poly” COORDS="110,34,55,67,45,23,234” HREF=””">
</body>
</html>
Fontlar <FONT> Elementi
Hazırlamış olduğumuz Web dokümanlarının daha zengin görünüşlü olmasını <FONT> elementini ve niteliklerini kullanarak gerçekleştirebiliriz. <FONT> elementi kapsadığı elementin boy, renk ve fontunun belirtilmesini sağlar. Bu element kullanılırken dikkat edilmesi gereken önemli koşul şudur ki, Web sayfanıza internet ortamından bağlanacak kişilerin dokümanınız içerisinde kullanmış olduğunuz font tipini kendi tarayıcı ekranlarında doğru olarak görüntülenebilmesi için kullanılan bu font tipinin, kendi sitemlerinde var olması gerekmektedir. Bu sebeple tasarlayıcı konumundaki kişilerin oluşturdukları web dokümanlarında yo bu elementi kullanmamaları ya da yaygın olarak sistemlerde var olan font tiplerini seçmeleri gerekmektedir.
<FONT > elementi içerisinde yaygın olarak kullanılan nitelikleri kısaca inceleyecek olursak;
COLOR Kullanılan FONT’un renginin belirlenmesi amacıyla kullanılır, renk bilgileri ya renk adı ile yada hexadecimal kod karşılıkları ile verilir.
FACE Kullanılan fontun tipini belirler, virgülle ayrılmış birkaç font tipi kullanılabilir, tarayıcı bu tipler arasında sisteminde var olana göre algılama yapar
SIZE Fontun büyüklüğünü belirlemek amacı ile kullanılır. Bu değerler +1..+6|1..6|-1..-6 değerleri arasında olabilir
<FONT FACE=”Arial,Helvatica,Sans-Serif” COLOR=”RED”> Font elementi kullanımı</FONT>
<FONT FACE=”Bitanic Bold”> Diğer bir örnek </FONT>
TABLO KULLANIMI
Tablolar bilgilerin satır ve sütunlara bölünmüş olan yapılar üzerinde işlem görmesini sağlayan yapılardır. Aynı mantıktan yola çıkılarak WEB dokümanları üzerinde de tablo kullanımı gerçekleştirilmektedir. Özellikle dokümanlarımız ile ilgili tasarlama ve yerleşimleri üzerinde yapmış sistem ayarları, dokümanımızı incelemek için kullanılan tarayıcı ile örtüşmez ise tasarımlarımız bu tarayıcılarda istenilen biçimlerde çıkmayacaktır. İmajlarda kaymalar, metinlerde karışmalar v.b gibi bir çok istenilmeyen sonuçlarla karşılaşılacaktır. Tabloları bu istenmeyen durumu ortadan kaldırmak için şablon gibi kullanabileceğimiz gibi özellikle veritabanı işlemleri ve sorgularında, verilerin daha düzenli bir biçimde özetlenip görüntü alma işlemlerinde de yaygın olarak kullanılmaktadır. Belirtilen bu özellikleri ilerleyen konularımızda da görüleceği üzere WEB dokümanlarında yüksek kullanım oranları sağlamaktadır.
Basit Tablolar
Tabloları basit olarak, bilgileri satır ve sütunlardan ibaret olan hücre yapıları içerisine yerleştirilerek kullanma olarak açıklayabiliriz. WEB dokümanlarında bir tablo oluşturabilmek için <TABLE>...</TABLE> elementini kullanırız.<TR>...</TR> elementi ile ( Table Row ) tablomuz içerisine satırlar ekleriz, bu satırların içerisinde oluşturacak olduğumuz alanlara <TH>..</TH> ile başlıklar veririz ( Table Header ) ve oluşturulan bu yapılar içerisine <TD>..</TD> ile verileri yerleştiririz ( Table Data ). Anlatılanların daha iyi algılana bilmesi için aşağıdaki örneği dikkatle inceleyelim;
<html>
<head>
<title>Basit Tablo Örneği</title>
</head>
<body>
<table Border=1>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
<th>Başlık 4</th>
</tr>
<tr>
<td> Veri 1-1</td>
<td>Veri 2-1</td>
<td>Veri 3-1</td>
<td>Veri 4-1</td>
</tr>
<tr>
<td>Veri 1-2</td>
<td>Veri 2-2</td>
<td>Veri 3-2</td>
<td>veri 4-2</td>
</tr>
</table>
</body>
</html>
Şekil 17 - Basit Tablo Tarayıcı Görüntüsü
<TABLE> elementinin sahip olduğu ve yoğun olarak kullanılan bazı niteliklerini aşağıda kısaca inceleyelim;
ALIGN Bu nitelik tablonun etrafındaki metne göre hizalanışını belirler. CENTER, RIGHT ve LEFT değerleri tanımlanır.
BACKGROUND Tablonun arka planına yol ve dosya adı tanımlanan bir imajın yerleştirilmesini sağlar. Explorer bu imajı tüm tablo arkasına döşerken, netscape içerisinde bu imaj hücrelere döşenir
BGCOLOR Arka rengini belirlemek için kullanılır, Renk adı veya hexcadecimal olarak kodu girilerek renk belirlenir.
BORDER Tablonun kenar kalınlığını piksel cinsinden belirtir, 0 değeri atanır veya BORDER niteliği hiç kullanılmazsa kenarsız bir tablo kullanılmış olur. Bu da sayfa tasarımlarında çok faydalıdır.
BORDERCOLOR Tablonun kenar renginin belirlenmesi için kullanılır.
BORDERCOLORDARK Internet Explorer’a özgü bir özelliktir. Üç boyutlu görüntü efektini tabloya vermek için kullanılır. Bu efekti veren koyu rengi belirlemek amacıyla değer verilir.
BORDERCOLORLIGHT Internet Explorer’a özgü bir özelliktir. Üç boyutlu görüntü efektini tabloya vermek için kullanılır. Bu efekti veren açık rengi belirlemek amacıyla değer verilir.
CELLPADING Bu özellik bir hücrenin kenarları ile içeriği arasındaki tampon boşluk miktarını piksel olarak belirler.
CELLSPACING Hücreler arasındaki genişliği piksel cinsinden ayarlar
<html>
<head>
<title>Basit Tablo Örneği</title>
</head>
<body>
<div align="center">
<center>
<table border="2" cellpadding="2" cellspacing="3" bgcolor="#C0C0C0" bordercolorlight="#800000" bordercolordark="#800000">
<tr>
<td width="33%">1</td>
<td width="33%">2</td>
<td width="34%">3</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">21</td>
<td width="34%">31</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">22</td>
<td width="34%">32</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Şekil 18- Bazı Tablo Nitelikleri Eklenmesi
ROWSPAN ve COLSPAN
Tablo oluşturduğumuz zaman bize standart olarak bir tablo yapısı verir yani her hücrenin büyüklüğü ve ait olduğu satır ve sütun sabittir. Bazı uygulamalarda ise belli sütunların ve ya kolonların birleşik olması istenilir işte bu gibi durumlarda satırları birleştirmek için <ROWSPAN> sütunları birleştirmek için <COLSPAN> nitelikleri kullanılır. Aşağıdaki verilen örnek üzerinde bu olayı daha iyi inceleyebilirsiniz ;
<html>
<head>
<title>ROWSPAN COLSPANÖrneği</title>
</head>
<body>
<p><font size="4"><b><u>ROWSPAN Örneği</u></b></font></p>
<div align="center">
<center>
<table border="1" cellpadding="2" cellspacing="3" height="84" bgcolor="#C0C0C0" bordercolorlight="#00FFFF" bordercolordark="#000080">
<tr>
<td width="33%" rowspan="2" height="48" align="center">1. Hücre </td>
<td width="33%" height="19" align="center">3. Hücre</td>
<td width="34%" height="19" align="center">6. Hücre</td>
</tr>
<tr>
<td width="33%" height="19" align="center">4. Hücre</td>
<td width="34%" height="35" rowspan="2" align="center">7. Hücre</td>
</tr>
<tr>
<td width="33%" height="16" align="center">2. Hücre</td>
<td width="33%" height="16" align="center">5. Hücre</td>
</tr>
</table>
</center>
</div>
<p> </p>
<p><font size="4"><b><u>COLSPAN Örneği</u></b></font></p>
<div align="center">
<center>
<table border="1" cellpadding="2" cellspacing="3">
<tr>
<td colspan="3" align="center">1. Hücre</td>
</tr>
<tr>
<td align="center">2. Hücre</td>
<td align="center">3. Hücre</td>
<td align="center">4. Hücre</td>
</tr>
<tr>
<td colspan="2" align="center">5. Hücre</td>
<td align="center">6.. Hücre</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Şekil 19 - ROWSPAN COLSPAN Tarayıcı Görüntüsü
Tabloların Sayfa Tasarımında Kullanılması
Tablolar HTML sayfaları içerisinde kullanılan önemli araçlardan birisidir. Dokümanımız içerisinde yerleştirilen görsel elemanların doküman içerisinde başarılı ve etkili düzenlenmesini sağlar. Tablo kullanarak Web dokümanı tasarımı yaparken yüklü görev width
Niteliğine düşmektedir. Hücrenin genişliğini pixel veya % cinsinden belirler ve ve TH elementlerini ile birlikte kullanılabilir. Yukarı ki örneklerde witdh niteliğinin kullanımı hakkında bilgi sahibi olabilirsiniz. Oluşturacak olduğumuz bir sayfa ile bir WEB sitesinin ana sayfasını tasarlayalım ve şimdiye kadar işlediğimiz konuların bir özetini bu örnek içerisinde inceleyelim.
<html>
<head>
<title>ROWSPAN COLSPANÖrneği</title>
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="2" cellspacing="3">
<tr>
<td>
<p align="center"><img border="0" src="webresimleri/baslik.jpg" width="518" height="124"></td>
<td bgcolor="#C0C0C0">
<p align="center">Cumhuriyet Üniversitesi</p>
<p align="center">Sivas Meslek Yüksek Okulu</p>
<p align="center">219 10 10</td>
</tr>
<tr>
<td bgcolor="#808080">
<p align="center"><font face="Modern" size="5" color="#800000">Sivas
Meslek Yüksekokulu Sitesine Hoş Geldiniz</font></p>
<ul>
<li><a href="http://smyo.mudurluk.html">Müdürlük</a></li>
<li><a href="http://akademıkbırımler.hml">Akademik Birimler</a></li>
<li><a href="http://duyurular.html">Duyuru ve Etkinlikler</a></li>
<li><a href="http://servisler.html">Servisler</a></li>
<li><a href="http://mail:agyuksek@hotmail.com">e-mail</a></li>
</ul>
</td>
<td>Sivas Meslek Yüksekokulu Site Haritası
<ol>
<li>Müdürlük
<ul>
<li>Mudur</li>
<li>Mudur Yardımcıları</li>
</ul>
</li>
<li>Akademik birimler
<ul>
<li>Bilgisayar Programcılığı</li>
<li>Elektrik Teknikerliği</li>
<li>Halıcılık Teknikerliği</li>
<li>Hazır Giyim Teknolojisi</li>
<li>Otomotiv Teknikerliği</li>
</ul>
</li>
<li>Duyuru ve Etkinlikler
<ul>
<li>Sportif Duyurular</li>
<li>Müdürlük Duyuruları</li>
</ul>
</li>
</ol>
<p> </td>
</tr>
</table>
</center>
</div>
</body>
</html>
Şekil 20 - Genel Örnek Tarayıcı Görüntüsü
Tarayıcı üzerinde sayfamızı çalıştırıp incelersek, tarayıcının ekran üzerine yayılımı ne boyutta olursa olsun tablo hücrelerimizin genişlik ve yükseklikleri sabit tanımlandığı için boyutlarında dolayısı ile sayfa dizaynımızda hiçbir değişiklik olmadığı görülecektir.
ÇERÇEVE ( FRAME ) KULLANIMI
Çerçevenin en kısa ve genel tanımı ; Web dokümanı içerisinde bağımsız olarak davranan bir penceredir. Diğer bir deyiş ile web tarayıcılarının dokümanları birden çok birbirine bağlı ve ya bağımsız olan pencerelerde sunmalarına olanak sağlayan yapılardır. Çerçeveler aynı Web tarayıcı ekranında birbirinden bağımsız birden çok pencereyi, tek bir dokümanmış gibi kullanılması için gereken düzenekleri temin eden yapılar olarak ta algılanılabilir. Bu yapı içerisinde yer alan her bir çerçeve farklı bir URL adresini işaretler.
Basit Çerçeve Örneği
Çerçeveler üzerinde tasarlama yapılırken unutulmaması gereken önemli hususlardan birisi, çerçeveli bir dokümanın birden fazla dokümanlardan oluştuğudur. Kısacası eğer bizim web dokümanımız içerisinde iki çerçeve mevcut ise, asıl dokümanımız üç adet dosya içermektedir.
Şekil 21 - Çerçeve Doküman Genel Yapısı
Çerçeveleyici dokümanı belirtmek için, <BODY> yerine <FRAMESET> elementini kullanan bir dosya oluşturmanız gerekir. <FRAMESET> elementi bu dokümanı oluşturan çerçeveler kümesini tanımlar. Bu elementin temel nitelikleri, ROWS ve COLS nitelikleridir. Yukarıdaki şekilde görülen örnekte toplam ekranı iki satır kaplar ve bu sebeple Frame dokümanı içerisinde ki <FRAMESET COLS=”50%,50%”> şeklindedir. Dokümanımızı iki çerçeveye ayıran diğer çerçeveler ekranı yarı yarıya ( 50%) oranda kaplar. Şekil-21 içersinde oluşturmuş olduğumuz çerçeveler ile ilgili dokümanın kodlaması ise ;
<html>
<head>
<title>Basit Çerçeve Örneği</title>
</head>
<frameset rows="50%,50%">
<frame name="top" src="den1.htm">
<frame name="bottom" src="den2.htm">
<noframes>
<body>
<p>Bu Dokümanlar Çerçeveler içermektedir fakat sizin tarayıcınız Çerçeveler için destek sağlamamaktadır. </p>
</body>
</noframes>
</frameset>
</html>
Oluşturmuş olduğumuz sayfa içerisinde
<FRAMESET COLS=”50%,50%”> elementi ile hem çerçeve içeren dokümanlarımız için temel teşkil eden ana çerçeve dokümanımızın oluşumuna başlattık, hem de COLS=”50%,50%” ifadesi ile ana çerçevemiz içerisinde iki farklı çerçeve oluşturacağımızı ve bunlarında ana çerçeve içerisinde % 50 ‘ lik oranlarla dokümanı iki eşit parçaya ayıracağını belirledik. Daha sonraki satırlarda yazmış olduğumuz
<frame name="top" src="den1.htm"> satırı ile ana çerçeve alanına üst kısım olarak ayrılan çerçeve ( pencere ) içerisinde den1.htm dosyamın çalıştırılmasını sağlar. Benzer şekilde yazılan <frame name="bottom" src="den2.htm"> satırı ile de ana çerçevemin % 50 lik olarak kalan diğer alt çerçevesinde ise den2.htm dosyası çalıştırılacak ve tarayıcı ekranında her iki WEB dokümanı, görsel olarak beraber fakat bağımsız olarak çalışacaktır.
Verilen örnek uygulamayı oluşturan temel elementleri ve niteliklerini kısaca incelemeye çalışalım;
<FRAMESET> elementi ; içerisinde farklı <FRAME> elementleri barındırır ve bunlar için gerekli olan HTML’yi hedefler. <FRAME> elementi ise tanımlamış olduğu çerçeve için kaynak URL yi ve bu çerçeve için gerekli olabilecek olan NAME tanımlamasını yaptırır.
<HTML>
<HEAD> ...</HEAD>
<FRAMESET ROWS=” x%,y%, . . “>
<frame name="..." src="...htm">
<frame name="..." src="....htm">
<frame name="..." src="....htm">
<NOFRAME>
<BODY>
..........
...........
</BODY>
</NOFRAMES>
</FRAMESET>
<HTML>
<FRAME> elementinin yaygın olarak kullanılabilen niteliklerini aşağıdaki gibi sıralamak mümkündür;
BORDERCOLOR Çerçevenin kenar renklerinin renk ismi veya hexcadecimal kod karşılığı olarak verilmesini sağlar
FRAMEBORDER Çerçeve dış çizgilerinin tarayıcı ekranında gösterilip gösterilmeyeceğine karar verir. YES ve No değerleri ile belirlenir
SCROLING Çerçevenin kaydırma çubukların olup olmayacağına karar vermek amacı ile kullanılır. NO değeri ile kaydırma çubuğu olmaz, YES ile her durumda olur, AUTO ile karar tarayıcıya bırakılır, yani doküman pencereye sığmıyor taşıyor ise kaydırma çubukları olur aksi durumda olmaz.
MARGINHEIGHT Çerçevenin içeriği ile üst ve alt kenarlar arasındaki mesafeyi belirler.
MARGINWIDTH Çerçevenin içeriği ile sağ ve sol kenarlar arasındaki mesafeyi belirler.
Kayan Çerçeve
Çerçeve özelliği içermeyen bir WEB dokümanımızın herhangi bir yerinde, diğer bir WEB dokümanının olmasını ve bu bölge üzerinde hedeflenen bu dokümanın yönetilmesi istenir ise <IFRAME> elementi ve nitelikleri tanımlanarak böyle bir doküman oluşturulabilir. <IFRAME> elementinin HEIGHT ve WIDTH özelliği ile doküman içerisine yerleştirilecek olan çerçevenin genişlik ve yüksekliği, SRC ile hedeflenecek olan dokümanın URL adresi, ALIGN ile doküman içerisindeki hizalanması belirlenebilir. Genel tanımlanması ve kullanımı aşağıda verilen örnek incelenerek daha iyi anlaşılabilir.
<html>
<head>
<title>Kayan Çerçeve Örneği</title>
</head>
<BODY>
<p align="center"><b><font size="5" color="#800000">KAYAN ÇERÇEVE ORNEGİ</font></b>
<p align="center"><font size="3">Normal sayfamızın içerisine bir kayan çerçeve
yerleştirelim</font></p>
<IFRAME NAME="FLOAT1" src="den1.htm" wıdth="500" heıght="300" alıgn="center">
Bu bizim kayan çerçevemizdir...
</IFRAME>
<ul>
<li>1. Madde</li>
<li>2. Madde</li>
<li>3. Madde</li>
</ul>
</html>
Şekil 22 - Kayan Çerçeve Örneği Tarayıcı Görüntüsü
BÖLÜM 1 1
HTML ( HyperText Markup Language ) PROGRAMLAMAYA GİRİŞ 1
İNTERNETİN DÜNYA ÜZERİNDEKİ TARİHSEL GELİŞİMİ 1
TEMEL İNTERNET KAVRAMLARI 2
HTML ( Hypertext Markup Language ) 2
HTML Mantıksal Doküman Düzeni 3
<HTML> Elementi 4
<HEAD> Elementi 4
<BODY> Elementi 5
HTML İle Doküman Oluşturma 6
Temel Olaylar 7
Başlıklar 7
Paragraf ve Kesmeler 8
Metinleri Ortaya Hizalama <CENTER> Elementi 11
Bölümler 12
Metin Elementleri 13
Biçimlendirilmiş Metin 14
Listeler 15
Sırasız Listeler <UL> ( Unordered List) 16
Sıralı Listeler <OL> ( Ordered List) 17
Tanımlama Listeleri <DL> ( Definition List) 19
Yatay Çubuklar 20
URL ( Uniform Resource Locator ) Biçimli Kaynak Bulucu 22
Site Adresi 22
Dizin 22
Dosya Adı 23
HTML ile Dokümanların Bağlanması <A> Elementi 23
HREF 23
NAME 24
TITLE 24
TARGET 25
Görüntüler Üzerinden Bağlantı Kurulması 25
Görüntü Haritaları 28
Fontlar <FONT> Elementi 30
TABLO KULLANIMI 31
Basit Tablolar 31
ROWSPAN ve COLSPAN 34
Tabloların Sayfa Tasarımında Kullanılması 35
ÇERÇEVE ( FRAME ) KULLANIMI 38
Basit Çerçeve Örneği 38
Kayan Çerçeve 41