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;