HTML ‘ E GİRİŞ
1.
HTML NEDİR ?
HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarla
görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz
bu sayfa HTML dili kullanılarak
hazırlandı. Siz de browser'ınızı (Internet Explorer, Netscape Navigator,..)
kullanarak bu sayfayı
ekranınızda görüntülüyorsunuz. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz
belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa
bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri (pascal, basic,..)
gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.
Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için
kullandığımız komutlar dizisi bile
diyebiliriz HTML için. HTML Öğreniyorum yazı dizimizi okuyarak bu dil hakkında
hiçbir bilginiz olmasa bile yazının sonunda öğrendiklerinizle siz de kendi
sayfalarınızı
hazırlayabileceksiniz.
Hazırsanız buyurun başlayalım...
2.
HTML’ DE TEMEL UNSURLAR
Bu sayfaya geldiğinize göre HTML öğrenme işinde ciddisiniz
demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya
hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak
için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü
bulunmuyorsa bu işi Windows'un notepad'i ile dahi
halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod
yazmayı gerektiren fakat bunun yanı sıra rutin bazı işlemleri kolaylaştıran
editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne
görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı
gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..).
Benim yeni başlayanlara tavsiyem Windows'un notepad'i. Bu
işlerin nasıl
yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü
bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler
bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek.
Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum
farklarından dolayı sayfanız bir Browser'da iyi görünürken bir başka browser'da
hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı teknikleri (css,
dhtml gibi)sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu
teknikleri tam olarak desteklemiyor. Yine de piyasayı neredeyse yarı yarıya
paylaşan bu iki browser'ın birbirlerine üstün olduğu yönleri var.
Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz
başarı sayfanızı ziyaret eden kişinin
kullandığı browser'a mahkum. Hatta ziyaretçiniz browser'ına verdiği bir
talimatla "yalnız şu fontu kullan", "grafikleri
görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir.
Yine de bu kadar karamsar olmayalım. Bu kadar genel bilgi yeter. Bir sonraki
konuda ilk HTML sayfamızı yapıyoruz.
3.
İLK SAYFAM
İşte ilk HTML sayfamızı yapıyoruz. Öncelikle çalışmalarınızı
saklamak için
kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela
html_ders" olsun. Daha sonra bu ad bize lazım olacağından kolaylık olması
için siz de yeni klasöre bu adı
verebilirsiniz.
Şimdi de bu klasörü açıp yeni bir
"metin belgesi" oluşturun (sağ fare/Yeni/Metin belgesi). Dosyayı çift tıklayarak açın ve şunları
yazın:
<html>
<head>
<title>İlk
Sayfam</title>
</head>
<body>Sayfama
Hoşgeldiniz</body>
</html>
Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya adı kısmına
şöyle yazın: "sayfa1.htm" (tırnaklar dahil)ve Tamam'a basın.
Notepad'i kapatın, metin dosyasını silin ve oluşan yeni dosyayı açın. Dosya
varsayılan browser'ınız (internet
explorer, netscape navigator
gibi)tarafından açılacaktır. Şöyle bir görüntü elde edeceksiniz.
Tebrikler ilk HTML sayfanızı yaptınız.
Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Birşey
dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve
bu kelimeleri küçük "<" ve büyük ">" sembolleri
arasına yazdık. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi
istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra
metni yazıyoruz daha sonra aynı etiketi önüne bir bölü (/) işaretiyle tekrar
yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç
istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorundadır .
Burada kullandığımız etiketler ve anlamları şöyle:
|
<html>....</html> |
Tarayıcıya
HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki
etiket arasına yazılır. |
|
<head>....</head> |
Bir
HTML belgesi iki bölüme ayrılıyor: head(baş) ve body(gövde).
<head>....</head> etiketleri arasına sayfa hakkında bilgiler
yazıyoruz. Meta ve title gibi etiketler burada yeralıyor. Meta etiketlerine
ileride değineceğiz. |
|
<title>....</title> |
Title
sayfanın başlığını belirtiyor. Burada yazılanlar browser'ın üst tarafında
browser adıyla beraber gösteriliyor. |
Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri
kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu
yüzden <body>....</body>
arasına yazdığımız "Sayfama Hoşgeldiniz" yazısı browser'ın varsayılan
metin ayarlarıyla gösteriliyor. İşin ilginç tarafı hiçbir kod yazmadan sadece
"Sayfama Hoşgeldiniz" yazıp kaydetsek ve browser'da böyle görüntülesek de aynı
neticeyi elde edecektik. Sonraki bölümde metin biçimlendirmeye yarayan
etiketleri öğreneceğiz.
4.
METİN BİÇİMLENDİRME
Bu bölümde öğreneceğimiz etiketler:
• Başlık etiketleri:
<h1>...<h6>
• Paragraf etiketi:
<p>...</p>
• Ortalama:
<center>...</center>
• Diğer etiketler:
<b>...</b>,<i>...</i>,<u>...</u>
HTML'de metin stillerini üç şekilde belirleyebiliriz:
1.
Düzenlemek
istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna
in-line (aynı satırda) biçimlendirme denir.
2.
Sayfanın head
(baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin
biçimleme.
3.
(Embedded-Gömülü
biçimlendirme) HTML dosyasının dışında başka bir stil dosyası oluşturarak stil
için bu dosyayı kullanma. Buna Cascading Style Sheets-(Yığılmalı Stil
Kağıtları) deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın
stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.
Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci
ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz
metne uygulayabiliyoruz.
Burada önemli olan bir
diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve
3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları
ile beraber) destekliyorlar. Burada konumuz birinci metoda göre biçimlendirmeyi
öğrenmek. Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şunları
yazıyoruz;
|
<html> |
Sayfanın
işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi html, head,
title etiketlerini yerleştirdik. Sayfa başlığı (title) olarak "Başlık Etiketleri"ni
seçtik ve sayfanın gövde (body) kısmına istediğimiz metinleri yazdık ve bu
metinleri h1'den h6'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin
biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki
kelimelere belirli büyüklükler verdi.
Şimdi de kendiniz h1...h6 etiketlerinin yerlerini değiştirerek
alıştırma yapın ve tam olarak bu işin nasıl olduğunu kavrayın. Hatta iyi bir
deneme-yanılma olması
açısından örneğin her seferinde değişik bir etiketi veya sonlandırma
etiketini HTML kodundan silerek ne gibi etkiler oluşturduğunu gözlemleyin.
Denemelerinizin bir
kısmında hiçbir değişiklik olmadığını gözlemleyeceksiniz bunun sebebi,
browser'ınızın otomatik olarak hatayı algılayıp düzeltmesidir. Diğer etiketleri
toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde
olsun:
|
<html> |
Etiketleri kullanma mantığını anladınız herhalde. Biçimlendirmek
istediğimiz metnin başına ilgili etiketi yazıyoruz ve metnin sonunda da ilgili
etiketi
sonlandırıyoruz. Etiket biz sonlandırmadığımız müddetçe etkisini
göstermeye devam ediyor.
Eğer hala tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek
kaydedin ve diğer taraftan browser'ınızın reload/yenile tuşuna basarak
değişiklikleri gözlemleyin. Yeni öğrendiğimiz kodlara bir göz atalım:
|
<center>....</center> |
Aradaki
metinleri sayfaya göre ortalar. center) |
|
<b>....</b> |
Aradaki
metni koyu (bold)yazar. |
|
<i>....</i> |
Aradaki
metni eğik (italic) yazar. |
|
<u>....</u> |
Aradaki
metni altı çizili (underline) olarak yazar. |
|
<h1>....<h6> |
Başlık
(heading) etiketi. h1 en büyük, h6 en küçük. |
|
<p>....</p> |
Aradaki
metin paragraf özelliği kazanır. Sonlandırıldığında, takib eden metin bir
satır boşluk bırakılarak ve satır başına yazılır. |
Başladığınız etiketi sonlandırmayı
sakın unutmayın !
Burada bilmeyenler için küçük bir bilgi; bir html dökümanını açtığımızda ve ekran üzerinde
farenin sağ tuşuna tıklayıp kaynağı görüntüle/view source'u seçtiğimizde internet
explorer için notepad, netscape için kendi viewer'ı açılacak ve bize o sayfanın
kodunu gösterecektir.
Öğrendiğiniz komutlarla yukarıdaki gibi bir sayfayı nasıl
oluşturursunuz?
Şu ana kadar yazılarımızın font
ayarını browser'ın varsayılan fontu'na bıraktık. Bir sonraki konuda, metinlerde
istediğimiz fontu nasıl kullanacağımızı göreceğiz.
5.
FONTLAR
Font etiketinin kullanımı;
<font face=.... size=....
color=....> </font>
face= yazıtipinin adı (arial,
tahoma, verdana, ...)
size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada
RGB renk değeri)
Bunlara font
etiketinin parametreleri deniyor.
<font> etiketinin yanısıra öğreneceğimiz bir diğer etiket <br>
etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi bir
bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de
metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter
tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları
ve metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu
yüzden metinleri bölmek, yani ikinci satıra atmak için <br>
etiketini kullanıyoruz. İstisnai etiketlerden birisi bu, <br>
etiketi sonlandırılmıyor.
Buna bir örnek verelim;
<html>
<head>
<title>BRetiketi</title>
</head>
<body>
pazartesi
salı
çarşamba
<br>ocak<br>şubat<br>mart<br>nisan</body>
</html>
Yukarıdaki örneğimizde
"pazartesi, salı ve çarşamba"yı
yazarken enter'la bir alt satıra geçmemize rağmen browser bunu gözönüne
almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir
satıra yazdığımız halde bu kez browser
aradaki <br> etiketine bakarak bir sonraki metni satır başına aldı.
Buradan da anlaşıldığı üzere "enter" etkisini <br>
etiketiyle
veriyoruz. Bu etiketin bir özelliği de sonlandırılmaması. Şimdi font
etiketinin kullanımını bir örnekle inceleyelim. Eğer kullanmak istediğiniz
font
bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz
metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce
sisteminizde yüklü olan fontları inceleyin
(Başlat/Ayarlar/DenetimMasası/Yazıtipleri). Buradan yazıtiplerini açarak
inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte
kullandığım yazıtipleri (tahoma, comic sans ms, verdana, arial) sisteminizde
yüklü değilse bunun yerine sizde olan istediğiniz fontu kullanabilirsiniz.
<html>
<head>
<title>Renkler ve
Mevsimler</title>
</head>
<body>
<font face="tahoma"
size="5" color="#008000">İlkbahar</font>
<br>
<font face="verdana"
size="5" color="#ff0000">Yaz</font>
<br>
<font face="arial"
size="5" color="#ffff00">Sonbahar</font>
<br>
<font face="comic sans ms"
size="5" color="#0000ff">Kış</font>
<br>
</body>
</html>
Her zamankinden farklı olarak ve ilk defa sayfamızda renk
kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık. Aslında
bunun bir yolu daha var o da
renk
kodu yerine rengin ingilizcedeki adını yazmak (color="red" gibi). Bu
konuyu renkler bölümünde ayrıntılı olarak inceleyeceğiz. Burada yalnız bir kaç
örnekle yetinelim: Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy
Yeşil-green Bu renkleri yukarıdaki örnek
üzerinde deneyin, renk kodunu silin ve rengin ingilizce karşılığını yazın. Şu
ana kadar öğrendiğimiz etiketleri kullanarak (tabii ki hepsini kullanmak
zorunda değilsiniz) aşağıdaki görüntüyü browser'da nasıl elde ederiz?
6.
LİSTELER
HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;
þ
Sıralı listeler
(ordered list)
þ
Sırasız listeler
(unordered list)
þ
Tanımlama
listeleri (definition list)
Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak
liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak
liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık
metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Sıralı
listeler Liste içine alınacak metinler <ol>...</ol> etiketleri
arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini
belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini
getiriyoruz. Bu etikette tıpkı <br> etiketi gibi sonlandırılmıyor.
<ol>
etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı
harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz.
Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip
olmasını sağlıyor. Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü vereceğiz. Kodun geri kalan
kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın.
|
|
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta
mümkün. Dikkat edeceğimiz nokta, işe <ol> etiketi ile başlayıp liste
maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi
bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir
liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol>
etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type
parametresinde kullanabileceğimiz değerler şunlar olabilir;
sayılar,harfler
(küçük/büyük)ve romen rakamları
(i,ii,iii gibi)
Sırasız
Listeler
Bu
tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar
yerine küçük yuvarlaklar,kareler kullanabilmemiz. <ol> etiketi yerine
<ul> etiketini kullanıyoruz, maddeler için kullandığımız <li>
etiketi burada da geçerli. <ol> için parametreler ise şöyle; type için
disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact
parametresi sırasız listelerde de kullanılabiliyor.
|
|
Tanımlama
listeleri
Bu
listelemede kullanılan etiketler şöyle; <dl>...</dl> ,
<dd>...</dd> , <dt>...</dt>
Listenin
maddelerini belirtmek için kullandığımız <li>etiketinin yerini burada
<dd> ve <dt> etiketleri alıyor. Aynı şekilde
<ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>... </dl> arasına yazıyoruz. Yine
parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
Hemen
örneğimize geçelim,
<dd><font size="2"
color="black">HTML (HyperText Markup Language-Hareketli-Metin
İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları
oluşturmaya yarayan bir çeşit dildir...</font>
<dt><font size="3"
color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2"
color="black">Bu dilde binary veya hexadecimal kodlar yok. Herşey
metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir
editör.Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı
gerektiren...</font>
<dt><font size="3"
color="blue">Listeler</font>
<dd><font size="2"
color="black">Sıralı listeler rakam veya harf yada her ikisini
içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde
imleri koyarak liste oluşturmamızı sağlar...</font>
</dl>
Neler öğrendik? HTML nedir? HTML
(HyperText Markup Language-Hareketli-Metin İşaretleme Dili) basitçe,
browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir
çeşit dildir... HTML'de Temel Unsurlar Bu
dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML
dökümanı oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip
editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren... Listeler Sıralı
listeler rakam veya harf yada her ikisini içiçe kullanarak liste
oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak
liste oluşturmamızı sağlar...
7.
RENKLER
Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik.
Şimdi daha ayıntılı olarak ve bu işin mantığına inerek yeniden ele alacağız.
Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.
Bu bölümde öğreneceğimiz konular:
Renk kodları Artalanı renklendirmek Renk Kodları Fontlar
konusunda, metnin rengini belirlerken <font color=...> etiketini
kullanmıştık ve color komutunun
karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun
daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu
girmek. Önce sayı
düzenleri nedir nasıl olur ona bakalım.
Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı
sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle
ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de
vardır.
Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary)
ve onaltılı (hexadecimal) sayı
sistemleridir.
Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı
sisteminde de toplam 16 rakam var bunlar;
0 1 2 3 4 5 6 7 8 9 A B C D E F
[10'un
karşılığı A ... 15'in karşılığı F'dir.]
Etikette kullandığımız color=#xxxxxx ifadesi ise RGB
(red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu
renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum,
00 minimum karışımı verir). Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00
yeşil, #0000FF mavi, #FFFFFF beyaz'dır. Diğer renkleri sayıları değiştirerek
kendiniz deneyebilirsiniz.
|
#000000=black(siyah) |
#000080=navy(lacivert) |
|
#0000FF=blue(mavi) |
#008000=green(yeşil) |
|
#008080=teal(koyu yeşil) |
#00FF00=lime(parlak yeşil) |
|
#00FFFF=aqua(turkuaz) |
#800000=maroon(vişne çürüğü) |
|
#800080=purple(mor) |
#808000=olive(zeytuni yeşil) |
|
#808080=gray(gri) |
#C0C0C0=silver(gümüşi gri) |
|
#FF0000=red(kırmızı) |
#FF00FF=fuchsia(parlak pembe) |
|
#FFFF00=yellow(sarı) |
#FFFFFF=white(beyaz) |
Artalanı
renklendirmek
Bu renklerle yalnızca metinleri değil sayfamızın artalananını da
renklendirebiliriz. Bunun için <body bgcolor=#xxxxxx> etiketini
kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız
<body> etiketini,
<body bgcolor=#xxxxxx> şeklinde değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
<body bgcolor="#ffcc00">
<font type="verdana" size="4"
color="#ffffff">
<ol><h2><u>Günler</u></h2>
<font color="#0000ff">
<li>Pazartesi
<li>Salı
<li>Çarşamba
<li>Perşembe
<li>Cuma
</font>
<font color="ff0000">
<li>Cumartesi
</font>
</ol>
</font>
</body>
8.
RESİMLER
Renkleri
de öğrendikten sonra geldik en heyecanlı konuların bir diğerine, evet bu konuda
sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz. Bu
konu
aslında tablolar ve bağlantılarla da alakalı, bu yüzden burada genel olarak
işleyeceğiz. Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması
zorunluluğu dışında herhangi bir kısıtlama yok.
Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya
koyacağı resmin nerede olduğunu göstermekten ibaret. Her ne kadar şart olmasa
da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sizin hayrınıza
olacaktır. Kullanacağımız etiket şu şekilde olacak;
<img
src="resmin bulunduğu yer ve adı" width="x"
height="y">
Burada x resmin enini y ise boyunu
belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak
öğrenebilirsiniz. Dikkat edilecek hususlar:
Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir
soru: bu resmin nerede olduğunu browser'a nasıl izah ederiz?Diyelim ki
resmimizin adı kedi.gif eni 64, boyu da 79 piksel, eğer bu
resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde
olmalı:
<img src="kedi.gif"
width="64" height="79">
Fakat siz diyorsunuz ki; benim bir sürü eklemek istediğim resmim
var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda browser'ınız
o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul
edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu
şekilde kullanacağız;
<img
src="resim/kedi.gif" width="64" height="79">
Bölü işaretinin yönüne dikkat edin. Bu windows'ta ya da dos'ta dizinler için kullandığımız ters bölü
işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep
bu bölü işareti kullanılır. Ziyaret ettiğiniz internet adreslerini hatırlayın.
Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir
klasör var ve kedi.gif dosyası o klasörde,
diyelim ki klasörün adı da gifler olsun. Bu
durumda kedi.gif'in harddiskimizdeki yolu da c:\html_ders\resim\gifler\kedi.gif
şeklinde olacak.
Etiket tahmin ettiğiniz gibi şu şekilde olmalı:
<img
src="resim/gifler/kedi.gif" width="64"
height="79">
Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz. Fakat üst
dizinlere nasıl ulaşacağız? O da kolay. Bu seferde html dosyamızı bir klasör
oluşturup o klasörün içine koyalım, mesela klasörün adı da html olsun -umarım
karıştırmazsınız. Kedicik bulunduğu gifler klasöründe kalsın.
Son durum şöyle olacak;
c:\html_ders\html\deneme.htm yolunda html dökümanımız,
c:\html_ders\resim\gifler\kedi.gif yolunda resim var.
İzlememiz gereken yol şöyle; browser deneme.htm
dosyasının bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine
çıkmalıyız ardından resim dizinine oradan gifler dizinine girmeliyiz. Üst
dizine çıkmayı ../ ifadesiyle belirtiyoruz.
<img
src="../resim/gifler/kedi.gif" width="64"
height="79">
Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine
geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.
Resmi
Hizalama
Resim artık sayfamızda, fakat daima hep solda duruyor. Bir
hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola
(left) alabiliriz.iyi ama resim zaten solda değil miydi?Bir metinle
kullandığınızda ise buradaki gibi bir sonuç
alabilirsiniz,
hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır.
<img src="resim.jpg"
width="25" height="25" align="left">
Artalana
resim koyalım
Artalanı renklendirmeyi öğrenmiştik;
<body
bgcolor="....">
ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde
yazarsak resmimiz artalana döşenecektir.
<body bgcolor="...."
background="....">
Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin
karşısına yazmayı ihmal etmemek yine bizim hayrımızadır. Bunun yanında
background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde
istediğimiz resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza
gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde
sayfaya yerleştirilecektir.
Resme
alternatif metin eklemek
Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer
browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine
alternatif açıklama görüntülenecektir. alt=".." parametresiyle
açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı fare imlecini resim
üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir.
<img src="resim.gif"
alt="kum saati">
Son bir örnekle bu konuyu bitirelim,
Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde sayfaya
yerleştirelim.
<body bgcolor="#666dfe"
background="bulut.jpg">
<center>
<img src="world.gif"
width="360" height="170" alt="harita">
</center>
Eğer hala yapmadıysanız resimlere sağ tıklayıp (Resmi farklı
kaydet../Save image as..) seçeneğiyle bu resimleri harddiskinize
kaydedebilirsiniz. Şu ana kadar öğrendiğimiz komutlarla yerleştirme işlemini
ancak bu kadar yapabiliyoruz. Daha sonraki konularda tabloları kullanarak
istediğimiz düzeni sağlamayi öğreneceğiz.
9.
BAĞLANTILAR
<a>...</a>
Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara.
Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale
getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de
metinlere ve resimlere bağlantı kazandırmak mümkündür. Örnek için bu sayfayı
incelemeniz yeterli. Sol tarafta konuları veren bir menü bölümü var.
Siz bu bağlantılardan birisini tıkladığınızda ilgili konu
açılıyor, sayfa sonlarındaki ileri-geri düğmeleriyle de bağlantılar
oluşturulmuş, bunlar da tıklandığında ilgili sayfa açılıyor. Bu yolla başka
neler yapılabilir? Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet
adresleri,.. bunların hepsine bağlantı kazandırmak mümkün. Hatta yapacağımız
bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.
Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları
inceleyim:
<a href="....">...</a>
Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir,
kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının
kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma
göre bildiğimiz bağlantıları oluşturmak mümkün. Şimdi aşağıdaki örnekleri
birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim;
<a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine
sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser
tarafından altı çizili ve mavi renkli gösterilir.
<a href="meyve.gif">
buraya tıklandığında meyve resmi açılacak </a>
Birinci örnekte "buraya tıklandığında meyve resmi
açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından
altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine
getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında
browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif
resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla
karşılaşır.
<a
href="midi.zip"> sıkıştırılmış midi dosyalarını çekmek için
tıklayın </a>
İkinci örnekte aynı şekilde
"sıkıştırılmış midi
dosyalarını çekmek için tıklayın"
yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden
kaynaklanan bir
fark var; ilk örnekte meyve.gif'e tıklandığında
browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı
yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi
browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc,
xls, mp3 gibi dosyaları görüntüleyememesidir.
<a href="sayfa2.htm"> 2.sayfaya gitmek için
tıklayın </a>
Yine
üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa
isimli başka bir html dökümanı açılacaktır.
<a
href="resim/kedi.jpg"> kedi resmi </a>
<a
href="resim/bitki/karanfil.gif"> işte çok güzel bir karanfil
</a>
<a href="../araba/bmw.jpg"> otomobil resimleri
</a>
Bu
3 örnekte altdizinlere/üstdizinlere verilen bağlantıya misaller görüyorsunuz,
resimler konusunda gördüğümüz kurallar burada da geçerli. <a
href="http://www.benimsitem.com/"> tıklayın sitemi
ziyaret edin </a>
Yedinci
örnekte bir internet adresi verdik.
<a href="ftp://ftp.benimsitem.com/"> tıklayın
dosyaları indirin </a>
Bu
ise bir ftp adresine verilen link örneği.
<a href="mailto: bendeniz@mail.com"> mail atın
</a>
Buradaki
linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send
to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
<a href="#...">...</a> <a
name="....">...</a>
Sayfa
içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz. Örneğin
sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu
menüde istediği başlığa tıkladığında ilgili konu açılsın.
Böyle
bir sayfa hazırlamak için yapacağımız şeyler:
1.
"tıklandığında"
açılacak konuyu işaretlemek <a name="....">...</a>
2.
browser'a,
hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini
bildirmek.<a href="#...">...</a>
"Listeler"
sayfasının benzer bir örneğini yukarıda kodlarıyla birlikte görüyorsunuz. Sayfa
içerisindeki başlıkları <a name>...</a> komutları arasına
alıyoruz, "name" kısmına başlığı hatırlatıcı bir isim verebilirsiniz.
Benim burada kullandığım <u>
ve <b> etiketleri, önceden öğrendiğimiz gibi başlığı altı çizili
ve koyu olarak yazıyor. Yine 1-2-3 başlıklarıyla oluşturduğumuz menü linklerini
<a href> komutuyla hazırlıyoruz, yalnız bir farkla;
"name" kısmında başlığa verdiğimiz hatırlatıcı ismi önüne #
işaretini koyarak "href" kısmına yazıyoruz. İşte bu iş bu
kadar kolay.
Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir
sayfanın belli bir bölümünün açılmasını istiyoruz, bunun için linke
tıklandığında açılacak yazıyı
<a name>...</a>
ile işaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:
<a
href="sayfa2.htm#ilgiliyer">Bu linke tıklandığında başka bir sayfanın ilgili kısmı açılacak
</a> <a
name="ilgiliyer">Başka
bir sayfadaki linke tıklandığında burası açıldı</a>
Resimlere
bağlantı özelliği kazandırmak
Metinlere bağlantı vermeyi öğrendik, peki sayfadaki resimlere
nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız
<img src="..." width="x"
height="y"> etiketini <a href>...</a>
etiketinin
arasına alıyoruz.
İşte örnek;
<a href="sayfa1.htm"><img
src="resim.gif"border="0"></a>
resim.gif tıklanacak
resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor.
"Border" komutu ise resimde bağlantı özelliği olduğunu belirten
çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu
komutu değişik sayılarla deneyebilirsiniz.
Target parametresi
Son olarak bağlantının açılacağı pencereyi
belirtmek için kullanılan"target" parametresini öğrenelim;
Kullanımı:
<a href="..." target="..." ></a>
|
target="_blank" |
Bağlantı
yeni bir pencerede açılır. |
10. TABLOLAR
<table>...</table>
Tablolar, sayfaları satırlara/sütunlara bölmek ya da
metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla
kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya
da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar
öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette
HTML dizayn konusunda bir masaüstü yayıncılık
programının
gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini
yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine
hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu
tartışmak değil tablolar konusunu işlemek. İşte tablolar,
|
Sonbahar |
Kış |
İlkbahar |
Yaz |
|
Eylül |
Aralık |
Mart |
Haziran |
|
Ekim |
Ocak |
Nisan |
Temmuz |
|
Kasım |
Şubat |
Mayıs |
Ağustos |
Tabloyu
renklendirelim,
|
Sonbahar |
Kış |
İlkbahar |
Yaz |
|
Eylül |
Aralık |
Mart |
Haziran |
|
Ekim |
Ocak |
Nisan |
Temmuz |
|
Kasım |
Şubat |
Mayıs |
Ağustos |
Başka
bir örnek (farklara dikkat ediniz)
|
|
ÖLÇÜLER |
||
|
|
Boy |
Kilo |
|
|
1. |
Zafer |
1.77 |
80 |
|
2. |
Mustafa |
1.82 |
75 |
|
3. |
Osman |
1.75 |
83 |
|
|
|
||
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Bu örneklerde de görüldüğü gibi tablolar satır ve
sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de
kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya
tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption)
koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle
birleştirebiliriz:
|
Sütun Başlığı |
Sütun Başlığı |
Sütun Başlığı |
Sütun Başlığı |
|
|
|
hücre |
hücre |
hücre |
hücre |
|
|
|
|
hücre |
hücre |
hücre |
hücre |
|
|
|
|
hücre |
hücre |
|
|
|||
|
Tablonun alt yazısı(caption) |
||||||
Bu kadar örnek yeterli, şimdi basit bir tablo yapmak
için gerekli etiketleri öğrenelim. Öncelikle <table>...</table>
etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile
satırları <td> etiketi ile de sütunları oluşturuyoruz.
|
<table
border="1"> |
||||
|
<table
border="1"> |
||||
|
<table
border="1"> |
||||
|
<table
border="1"> |
<table> etiketinden sonra ilk olarak <tr>
etiketiyle ilk satırı oluşturuyoruz. Oluşturmak istediğimiz sütun kadar
<td> etiketi yazıyoruz. <td>...</td> etiketleri arasına metin
yada grafik (<img src=>) koyabiliriz.<td> etiketleri ile sütunları
oluşturduktan sonra </tr> etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci,
üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz.
Tabloda başlık ve gövde
Tablolar da HTML sayfasında olduğu gibi başlık (head)
ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi
<tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci
bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık
<th> etiketi ile belirtilir ve bunlar etiketinde olduğu gibi
<tr>...</tr> arasına yazılır. Tabloda satır ve sütunları belirten
<tr> ve <td> etiketleri <tbody>...</tbody> arasına
alınır.
Yukarıdaki
örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;
|
||
|
1.Sütun |
2.Sütun |
3.Sütun |
|
hücre1 |
hücre2 |
hücre3 |
|
hücre4 |
hücre5 |
hücre6 |
|
hücre7 |
hücre8 |
hücre9 |
alt-yazı (caption)
<tableborder="1">
<thead>TabloBaşlığı(thead)</thead>
<captionalign="bottom">
alt-yazı(caption)
<caption>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
<tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
<tr>
<td>hücre7</td>
<td>hücre8</td>
<td>hücre9</td>
</tr>
</tbody>
</table>
Parametreler
<table border=".." cellpading=".." cellspacing=".." align=".." width=".." height="..">
Border
parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini
sağlar.
|
<table
border="0"> |
|
|
<table
border="2"> |
|
|
<table
border="4"> |
|
|
<table
border="6"> |
Cellpadding
parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile
içinde bulunan unsurun (metin/grafik)
bitişik olmasını sağlar.
|
<table border="1" cellpadding="0"> |
|
|
<table border="1" cellpadding="5"> |
|
|
<table border="1" cellpadding="10"> |
Cellspacing parametresi hücreler arası marjı belirler.
|
<table border="1" cellspacing="1"> |
||
|
<table border="1" cellspacing="5"> |
||
|
<table border="1" cellspacing="10"> |
Align parametresi tabloyu düşey hizalamada kullanılır, align=left
sola, align=right sağa dayalı yapar, align=center ortalar.
|
<table border="1" align="left"> |
||
|
<table border="1" align="center"> |
||
|
<table border="1" align="right"> |
Width ve height parametreleri resimler konusunda gördüğümüz
gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip
olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate
alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.
|
||
|
<table border="1" width=150 height=200> |
||
|
||
|
<table border="1" width=80 height=80> |
||
|
||
|
<table border="1" width=5 height=5> |
<td>
etiketi için parametreler
<td bgcolor=".."
background=".." width=".." height=".."
align=".." valign="..">
Bgcolor parametresi hücreyi renklendirmede kullanılır.
|
<table border="1" cellpadding="7"> |
Background
parametresi ile hücreye grafik-artalan yerleştirebiliriz.
|
<table border="1" cellpadding="7"> |
Width ve height parametreleri ile hücrenin
boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda
her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi
değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı
şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en
büyük height değeri tüm satır için geçerli olacaktır.
|
||||
|
<table border="1" cellpadding="7"> |
|
||||
|
<table border="1" cellpadding="7"> |
Align parametresi hücre içinde yatay hizalama yapar.
|
|||
|
<table border="1" cellpadding="7"> |
Valign parametresi hücre içinde düşey hizalama yapar.
|
|||
|
<table border="1" cellpadding="7"> |
Hücreleri Birleştirme
<td
colspan=".." rowspan="..">
Aynı
satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri
birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye
ait <td>..</td> etiketini siliyoruz.
|
||||||||||||
|
<table
border="1" cellpadding="12"> |
Yukarıdaki
tabloda;
A ve B hücrelerini birleştirmek için A hücresine ait
<td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait
<td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek
için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve
F ve G hücrelerine ait <td>F</td> , <td>G</td>
etiketlerini siliyoruz.
|
||||||||||||||||
|
<table
border="1" cellpadding="12"> |
||||||||||||||||
Aynı şekilde E ve I hücrelerini birleştirmek için E
hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I
hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini
birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini
ekliyoruz ve G ve K hücrelerine ait <td>G</td> ,
<td>K</td> etiketlerini siliyoruz.
|
|||||||||
|
<table
border="1" cellpadding="12"> |
11. ÇERÇEVELER
Çerçeveler (frame), HTML'e sonradan eklenmiş bir
özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı
görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0
ve üstü sürümleri frameleri destekliyor). Bunun yanında çerçeve kullanımına
karşı düşmanca (!) tavır sergileyen
tasarımcılar
da hatırı sayılır miktarda ve hala birçok site, ziyaretçisine çerçeveli ve
çerçevesiz sunum seçeneği sunuyor.
Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer
tarafını, kullanıcının isteğine göre değiştirme imkanı verir (bu sayfalarda
olduğu gibi). Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası
oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan
kaynak dosyayı bulamazsa hata mesajı verecektir. Aşağıdaki örneği inceleyelim:
Örneğimizde 3 adet html dosyası var. Bunlardan
frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a
görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm
dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.
<body bgcolor="..."> etiketi ile htm1.htm dosyasının artalan rengi
kırmızı, htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması
açısından dosyaların
adlarını
görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi.
Şimdi bu çerçeveyi birlikte oluşturalım:
frame.htm dosyası:
<html>
<head>
<title>Çerçeveler</title>
</head>
<framesetcols="*,*">
<framename="sol"src="htm1.htm">
<framename="sag"src="htm2.htm">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
htm2.htm dosyası:
<html>
<head></head>
<bodybgcolor="blue">
<fontsize="7"color="#ffffff">htm2.htm;</font>
</body>
</html>
<frameset>...</frameset>
Çerçeve oluşturmada kullandığımız etiket frameset,
cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını
belirtiyor, buraya row> yazarsak çerçeveler alt alta satırlar görünümünde
açılacaktır.
Cols (sütunlar)
Rows(satırlar)
cols="*,*" ifadesi ile açılacak
çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin
cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile
browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması
sağlanabilir yada (*) sembolü ile açılacak çerçevenin ebadı browser'a bırakılır,
cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise
ebadının browser'a bırakıldığını
gösteriyor.
Bu şekilde aynı zamanda açılacak çerçeve sayısını da
belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız)
verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar.
frame name="..." src="..."
etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim
(name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede
görüntülenecek html dosyasının yerini gösteriyor. "resimler" bahsinde
belirttiğimiz yer (kaynak) gösterme
kuralları burada da geçerli. Açılacak çerçeve sayısı kadar frame
name="..." src="..." etiketi kullanıyoruz. Eski sürüm
browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes
kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar
görüntüleyebiliyor.
Buraya örneğin sayfanın çerçeve kullanılarak
yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni
sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.
FRAMESET etiketini HTML
dosyanızın </head>...<body> etiketleri arasında kullanmayı
unutmayın !!.
FRAMESET
etiketi ile kullanabileceğimiz diğer parametreler şunlar;
frameborder=".."
(yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini
belirler.
border=".."
(sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler x
FRAME
etiketi ile kullanabileceğimiz parametreler;
marginwidth=".."
marginheight=".." (sayı) Sayfanın solundaki (marginleft) ve üstündeki
(margintop) kenar boşluklarını belirler.
scrolling=".."
(yes, no, auto) Kaydırma çubuklarının durumunu belirler.
Noresize
Pencere boyutlarının sabit olmasını sağlar.
Daha karmaşık çerçeveler
Yan
yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik
peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde
de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün.
Bu
etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini
belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak
dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.
Örnekleri ve yanlarındaki kodları inceleyip, farklı
çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın.
<frame setrows="*,*
"cols="*,*">
<frame name="a" src="htm1.htm">
<frame name="b" src="htm2.htm">
<frame name="c" src="htm3.htm">
<frame name="d" src="htm4.htm">
</frameset>
<frameset cols="150,*">
<frame name="a" src="htm1.htm">
<frameset rows="100,*">
<frame name="b" src="htm2.htm">
<frame name="c" src="htm3.htm">
</frameset>
</frameset>
<frameset rows="50%,50%">
<frameset cols="*,*">
<frame name="a" src="htm1.htm">
<frame name="b" src="htm2.htm">
</frameset>
<frame name="c" src="htm3.htm">
</frameset>
<frameset rows="*,*,*">
<frame name="a" src="htm1.htm">
<frameset cols="*,*">
<frame name="b" src="htm2.htm">
<frame name="c" src="htm3.htm">
</frameset>
<frame name="d" src="htm4.htm">
</frameset>
Çerçeve konusu ile birlikte "HTML öğreniyorum"
yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle internette siz de
kendinize ait sayfalarınızı inşa edebilirsiniz, eğer bu konuda ciddi
düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini sakın unutmayın,
hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için
kaynak kodlarını inceleyin.
Görsel editörleri kullanarak sayfalar hazırlayın ve
sonra da editörün kodları nasıl oluşturduğuna bakın. Linkler kısmında benim
hoşuma giden, aynı zamanda bizzat yararlandığım sitelere yer verdim, burayı da
inceleyebilirsiniz.
12. LİNKLER
|
|
|
Free:
|
|
||||||||||||||||
|
|
||||||||||||||||
|
|
||||||||||||||||
|
|
||||||||||||||||
|
|
||||||||||||||||
|
|
||||||||||||||||
|
|
|
|
||||||||||||||
|
|
|
||||||||||||||||
Html:
|
|
|
|
|
|
|
|
|
Şu an elinizde bulunan notlar
www.webteknikleri.com adresinden alınarak derlenmiş ve sizlerin
kullanımına sunulmuştur. Web Teknikleri Ekibine böyle bir kaynak hazırladıkları
için teşekkürü bir borç biliyoruz. TEŞEKKÜRLER.....
Resme alternatif metin eklemek
Resimlere bağlantı özelliği kazandırmak