TEMEL HTML ( HyperText Markup Language ) PROGRAMLAMAYA GİRİŞ
BÖLÜM 1
TEMEL HTML ( HyperText Markup Language ) PROGRAMLAMAYA GİRİŞ
İ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 ..
...........
...........
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.
Doküman Başlığı
...... Diğer ek bilgiler ve yönlendirmeler buraya yazılabilir ........
........
........
........ Dokümanın içeriği ...........
........
........
Şekil 1- HTML Doküman Mantıksal Düzeni
Elementi
Bir HTML dokümanının başlangıç ve bitiş noktalarını belirleyen TAG’ dır ve içerisinde sadece ve elementlerini içerir.
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. elementi içerisinde tanımlayıcı ve yönlendirici olarak kullanılan ve ilerleyen konu ve örnekler içerisinde detaylandırılacak olan , ,, , , , elementleri mevcuttur. Fakat HEAD elemanı içerisinde önemli bir rol oynayan ve yoğunlukla kullanılan elementine kısaca bu bölümde değinelim.
• 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 elementi için küçük bir örnek ve bu örneğe ait tarayıcı çıktısı görülmektedir.
Title Örneği
Dökümanın Yazım Kısmı
Şekil 2 - Title Örneği Tarayıcı Görüntüsü
Elementi
HTML dokümanının gövdesi elementi ile başlayıp 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.
LEFTMARGIN="40"
TOPMARGIN="40">
....... Yukarıda belirtilen tüm özelliklerin geçerli olduğu kısım ...
.....................
.....................
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, [Linkler Misafirlere Gizlenmiştir,Forumdan Yararlanmak İçin Üye OLunuzÜye Olmak için Burayı tıklayın] 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
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=” [Linkler Misafirlere Gizlenmiştir,Forumdan Yararlanmak İçin Üye OLunuzÜye Olmak için Burayı tıklayın] 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.
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.
İmage Üzerinden Bağlanma
<A HREF=”smyo.html”></A>
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.
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.
Baglanti Örnegi
<A HREF=www.Cumhuriyet.edu.tr>
Cumhuriyet Universitesi Genel Gorunum</A>
Universite icerisindeki genclik parkı ve
icerisinden gecen yol gorulmektedir
Bu hazırlıkta ALIGN="LEFT" yapilmistir
Kenar cizgi kalinligi BORDER="5" verilerek
elde edilmistir, Yazinin resme olan uzakligi ise
HSPACE ve VSPAE degerleri 10 yapilarak ayarlanmistir.
Burada da hastahane nin genel gorunumu
verilmektedir.
Ş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 ;
elementi genellikle aynı doküman içerisinde yer alır ama, etkin dokümanın dışında olması durumu içinde destek vardır. elementi bir HTML dokümanının gövdesi içerisinde herhangi bir yerde geçebilir, ancak genellikle dokümanın sonunda bulunur. 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
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
CIRCLE Orta-x, Orta-y, çap
POLY x1,y1,x2,y2, .....
Görüntü Haritaları
Fontlar Elementi
Hazırlamış olduğumuz Web dokümanlarının daha zengin görünüşlü olmasını elementini ve niteliklerini kullanarak gerçekleştirebiliriz. 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.
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 elementi kullanımı
Diğer bir örnek
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 ... elementini kullanırız.... elementi ile ( Table Row ) tablomuz içerisine satırlar ekleriz, bu satırların içerisinde oluşturacak olduğumuz alanlara .. ile başlıklar veririz ( Table Header ) ve oluşturulan bu yapılar içerisine .. ile verileri yerleştiririz ( Table Data ). Anlatılanların daha iyi algılana bilmesi için aşağıdaki örneği dikkatle inceleyelim;
Basit Tablo Örneği
Başlık 1
Başlık 2
Başlık 3
Başlık 4
Veri 1-1
Veri 2-1
Veri 3-1
Veri 4-1
Veri 1-2
Veri 2-2
Veri 3-2
veri 4-2
Şekil 17 - Basit Tablo Tarayıcı Görüntüsü
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
Basit Tablo Örneği
<div align="center">
1
2
3
2
21
31
3
22
32
</div>
Ş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 sütunları birleştirmek için nitelikleri kullanılır. Aşağıdaki verilen örnek üzerinde bu olayı daha iyi inceleyebilirsiniz ;
ROWSPAN COLSPANÖrneği
<b>ROWSPAN Örneği</b>
<div align="center">
1. Hücre
3. Hücre
6. Hücre
4. Hücre
7. Hücre
2. Hücre
5. Hücre
</div>
<b>COLSPAN Örneği</b>
<div align="center">
1. Hücre
2. Hücre
3. Hücre
4. Hücre
5. Hücre
6.. Hücre
</div>
Ş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.
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, yerine elementini kullanan bir dosya oluşturmanız gerekir. 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 ş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 ;
Basit Çerçeve Örneği
Bu Dokümanlar Çerçeveler içermektedir fakat sizin tarayıcınız Çerçeveler için destek sağlamamaktadır.
Oluşturmuş olduğumuz sayfa içerisinde
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
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 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;
elementi ; içerisinde farklı elementleri barındırır ve bunlar için gerekli olan HTML’yi hedefler. 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.
...
..........
...........
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 elementi ve nitelikleri tanımlanarak böyle bir doküman oluşturulabilir. 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.
LinkBack URL
About LinkBacks
TEMEL HTML ( HyperText Markup Language ) PROGRAMLAMAYA GİRİŞ
Yetkileriniz
Alıntı ile Cevapla
Paylaş