Genel HTML Tagları
Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek
Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r. HTML içinde kullan?lan tüm etiketler “<” i?areti ile ba?lar ve “>”ile biter. Ayr?ca etiketin yorum aral??? da “</etiket ismi>” kal?b? ile bitirilir. A?a??da etiket kullan?m?na k?sa bir örnek verdim.
<etiket1>...Buras? etiket1’in yorum aral???...</etiket>
<etiket2>
....Buras? etiket2’nin yorum aral???...
....
<etiket3>...Burada etiket3 tan?ml?...</etiket3>
...Etiket2 hala tan?ml?...
...
</etiket2>
Görüldü?ü gibi en son, etiket2 </etiket2>etiketi ile kapat?l?yor. Dikkat ederseniz de?i?ik etiketler birbirlerinin içinde kullan?labiliyor. Yani aç?k etiketin içinde ba?ka bir etiket aç?p istedi?iniz i?lemi gerçekle?tirebiliyorsunuz. Etiketin biti? i?aretini (</etiket ismi>) vermedi?iniz sürece o etiket tan?ml? olarak i?lem görür.
Tüm HTML dosyalar? <html> etiketi ile ba?lay?p </html> etiketi ile son bulur. Bunun yan?nda <html> etiketi ile <HTML> etiketi aras?nda hiçbir fark yoktur. Ancak etiketleri küçük harflerle yazmaya al??man?z? öneririm. ?leride XHTML kodlar? yazmak zorunda kalabilirsiniz ve XHTML dilinde etiketlerin küçük harflerle yaz?lmas? zorunludur.
HTML dosyalar? temel olarak iki bölümden olu?ur. Bunlar HEAD (Ba?l?k) ve BODY (Gövde) k?s?mlar?d?r. Ba?l?k k?sm?nda ziyaretçiye görünmeyen, sayfa hakk?nda tan?mlay?c? bilgiler bulunur. Gövde k?sm? ise web sayfam?z?n ziyaretçiye görünen k?sm?n? yani as?l k?sm?n? olu?turur.
<html> </html>
Daha öncede belirtti?im gibi html kodlar?n?n yorum aral???n? ba?latmak için bu etiketi kullan?r?z. Sayfam?z?n head ve body bölümleri bu etiketin yorum aral???nda tan?ml?d?r.
1 <html>
2 <head>... head etiketinin içeri?i ....</head>
3 <body>
4 ....
5 body etiketinin içeri?i
6 ....
7 </body>
8 </html>
Birinci sat?rda <html> etiketi ile HTML sayfam?za ba?l?yoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi içerisinde tan?mlan?p içerikleri yaz?l?yor. En son olarak da </html> etiketi ile HTML sayfam?z? bitiriyoruz.
Yazd???m?z html dosyas?n?n ba??nda bu etiketin tan?mlanmamas? ?u an kullan?lan web istemciler aç?s?ndan bir sorun olu?turmayacakt?r. Fakat sitenizi ziyaret eden ziyaretçi eski bir istemci kullan?yorsa bu etiketi kullanmaman?z bir tak?m sorunlar olu?turabilir (sonsuz uzunlukta sayfa gibi). En iyisi siz her html dosyas?na ba?larken ve bitirirken bu etiketi kullan?n.
<head> </head>
Yorum alan?nda sayfam?z hakk?nda bilgilerin bulundu?u bir etikettir. Örne?in sayfam?z?n ba?l?k bilgisinin bulundu?u TITLE etiketi ya da arama motorlar?na bilgi sa?lamak için olu?turulan META etiketi bu etiketin yorum alan?nda tan?mlan?r.
<html>
<head>
<title>.....</title>
</head>
<body>
....
body etiketinin içeri?i
....
</body>
</html>
Yorum alan?nda kullan?labilecek etiketler: SCRIPT, STYLE, META, LINK, OBJECT, TITLE, BASE
<title> </title>
Sayfam?z?n ba?l?k bilgisi bu etiket alt?nda yer al?r. Bu etiket head etiketi içinde kullan?lmak zorundad?r.
<head>
<title>?lk HTML denemem</title>
</head>
Gibi bir kod parças? istemcimizin ba?l?k çubu?unda a?a??daki gibi bir görünüm olu?turacakt?r. Bu etiket ile body etiketinde oldu?u gibi renk seçenekleri kullan?lamaz.
<meta> </meta>
Sayfam?z?n ba?l?k bilgisi bu etiket alt?nda yer al?r. Bu etiket head etiketi içinde kullan?lmak zorundad?r.
<head>
<title>?lk HTML denemem</title>
</head>
Gibi bir kod parças? istemcimizin ba?l?k çubu?unda a?a??daki gibi bir görünüm olu?turacakt?r. Bu etiket ile body etiketinde oldu?u gibi renk seçenekleri kullan?lamaz.
<meta> </meta>
HTML dosyas?ndaki head etiketinin yorum aral???nda tan?mlanan bu etiket web istemcisine ve arama motorlar?na sayfam?z hakk?nda bilgi verir. Bu etiketi ile birlikte kullan?lan yard?mc? kodlar?n aç?klamas? ilk bak??ta size biraz karma??k gelebilir. Her kodun kendisi ile birlikte tan?mlanan yard?mc? kodlar? da oldu?u için bu etiket ile birlikte kullan?lan kodlar?n listesini öncekilerden daha farkl? bir ?ekilde vermeyi uygun gördüm.
Tablo 1.11. Meta etiketi ana kodlar?
| Girilecek Kod | Görevi |
| name = "veritürü" | Bu bölümde author, description ve keywords özellikleri tan?mlan?r. |
| http-equiv = "veritürü" | Bu bölümde refresh, expires, content ve content-style-type özellikleri tan?mlan?r. |
| size = "boyut" | Yaz?m?z?n boyu belirlenir. |
Yukar?daki tabloda verdi?im kodlar ile birlikte tan?mlanan yard?mc? kodlar? tablo ?eklinde vermek yerine örnek ?eklinde vermenin daha faydal? olaca??n? dü?ündüm.
<meta name=”author” content=”Linux Belgelendirme Çal??ma Grubu”> <meta name=”description” content=”Linux Belgelendirme Çal??ma Grubu Web Sayfas?”> <meta name=”keywords” content=”linux unix bsd openbsd freebsd programlama ozguryaz?l?m özgüryaz?l?m sunucu internet”>
Yukar?daki birinci sat?r (author), sayfay? haz?rlayanlar?n kim oldu?u hakk?nda k?sa bilgiler verir.
?kinci sat?r (description), sitenin ne hakk?nda oldu?una dair k?sa bir bilgi verir.
Sonuncu sat?r ise (keywords), arama motorlar?na bilgi sa?lamak için kullan?l?r. Yani siz bir arama motoruna girip arama k?sm?na linux, unix, bsd, openbsd, freebsd, programlama, özgüryaz?l?m, sunucu, internet sözcüklerinden birisini yazarsan?z bu site adresi de görüntülenecek adresler aras?nda olacakt?r.
<meta http-equiv=”refresh” content=”5; URL=http://www.belgeler.org/”> <meta http-equiv=”expires” content=”Wed, 25 Feb 2002 12:00:00 GMT”> <meta http-equiv=”content” content-type=”text/html; charset=iso-8859-9”> <meta http-equiv=”content-style-type” content=”text/css”>
Yukar?daki birinci kod sat?r? (refresh) sayfam?z aç?ld?ktan 5 saniye sonra belirtilen adresi otomatik olarak açacakt?r.
?kinci kod sat?r? (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfan?n dosyas? silinecektir.
Üçüncü kod sat?r? (content) taray?c?ya html dosyam?zda kulland???m?z karakter kodlamas?n?n ISO-8859-9 oldu?unu belirtir.
Dördüncü ve son sat?r (content-type-style) belgemizde kullan?lan CSS dosyam?z?n bir metin dosyas? oldu?unu belirtir.
Daha öncede belirtti?im gibi meta etiketi ile tan?mlanan bilgiler kullan?c?ya görüntülenmez. Bu bilgiler genellikle taray?c?ya ve arama motorlar?na bilgi sa?lamak için kullan?l?r.
<body> </body>
HTML dosyam?z içindeki en geni? içerikli etiket budur. Ziyaretçiye görünen her?ey bu etiketin yorum alan?nda tan?mlan?r. Ayr?ca bu etiket içinde kullan?lan bile?enlerle de sayfam?z?n baz? temel özelliklerini belirtebiliriz.
Tablo 1.1. Body etiketinin bile?enleri
| Girilecek Kod | Görevi |
| text = “renk” | Sayfan?zdaki yaz?lar?n rengine renk ile belirtilen de?eri verir. |
| link = “renk” | Sayfan?zdaki ba?lar?n rengine renk ile belirtilen de?eri verir. |
| vlink = “renk” | Sayfan?zdaki ziyaret edilmi? ba?lar?n rengine renk ile belirtilen de?eri verir. |
| alink = “renk” | Sayfan?zdaki aktif ba?lar?n rengine renk ile belirtilen de?eri verir. |
| bgcolor = “renk” | Sayfan?z?n arka plan rengine renk ile tan?ml? de?eri verir. |
| background = “resim_dosyas?” | E?er arka planda sade bir renk de?il de bir resim kullanmak istiyorsan?z, resim_dosyas? kullanaca??n?z resmin ad?n? temsil eder. |
| topmargin = “de?er” | Sayfam?zda kullanaca??m?z bile?enlerin istemci penceresinin üst kenar?na olan uzakl???n? belirler. |
| leftmargin = “de?er” | Sayfam?zda kullanaca??m?z bile?enlerin istemci penceresinin sol kenar?na olan uzakl???n? belirler. |
| rightmargin = “de?er” | Sayfam?zda kullanaca??m?z bile?enlerin istemci penceresinin sa? kenar?na olan uzakl???n? belirler. |
| onload = “betik” | Sayfa yüklenirken çal??t?r?lacak javascript beti?ini belirler. |
| onunload = “betik” | Ba?ka bir sayfaya geçerken çal??t?r?lacak javascript beti?ini belirler. |
Yukar?daki tabloda kulland???m renk de?eri HTML içinde kullan?lan renk kodlar?n? temsil etmektedir. Alt? basamaktan olu?an bu renk kodlar? ana renkler olan mavi, sar? ve k?rm?z?n?n kullan?lan renkteki tonuna göre onalt?l?k tabanda say?larla istedi?imiz rengi elde edebiliriz.
Renk kodlar? hakk?nda k?sa bir bilgi vermek gerekirse kodlar iki?er basamakl? üç bölümden olu?ur. A?a??daki tablo bu konu hakk?nda kafan?zda olu?an soru i?aretlerinin silinmesinde size yard?mc? olacakt?r.
Tablo 1.2. Renk Kodlar?n?n Yap?s?
| K?rm?z? | Ye?il | Mavi |
| 00...FF | 00...FF | 00...FF |
2. Sat?rda ifade etti?im aral?klara de?i?ik de?erler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi olu?turmam?z mümkündür. Kod kullanman?n yan? s?ra renkleri do?rudan ?ngilizce adlar?n? yazarak da kullanabiliriz. Örne?in beyaz?n kodu olan #FFFFFF yerine white yazmam?zda sonucu de?i?tirmeyecektir.
Tablo 1.3. Baz? Renkler ve Kodlar?
|
|
Dikkat ederseniz her renk kodu bir diyez (#) i?areti ile ba?l?yor ve daha sonra alt? basamaktan olu?an bir bölüm geliyor. Bu alt? basamak içinde F yada f bulundu?u basamaktaki rengin tam olarak kullan?lmas?n? ve s?f?r (0) ise o basamaktaki rengin hiç kullan?lmamas?n? sa?lamak için kullan?l?r. Yine html kodlar?nda oldu?u gibi renk kodlar?nda da büyük-küçük harf ayr?m? yoktur. Yani #FFFFFF ve #ffffff ayn? rengi yani beyaz? temsil eder.
<body text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000"> <body text="#000000" background="../resimler/arkafon.gif"> <body bgcolor="#334455" text=”#ffffff" topmargin="0">
Yukar?daki birinci kod sat?r? sayfam?z?n arka plan rengini beyaz, yaz?lar? siyah, ba?lar? ve ziyaret edilmi? ba?lar? gri ve etkin ba?lar? da siyah yapmak için kullan?l?r.
?kinci sat?r ise yaz? rengini siyah yapmak, bulundu?umuz dizinin bir üst dizinindeki “resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullan?l?r.
Yazd???m son sat?r ile de sayfam?n arka fon ve yaz? rengini belirliyor, sayfam?n bile?enlerinin istemci penceresinin üst kenarl???na olan uzakl??? s?f?rl?yorum.
<hx> </hx> Ba?l?k Etiketleri
Bu etiketler basit olarak bir ba?l?k kullanmak istedi?imiz zaman, ba?l??? yazmak için kullan?lan etikettir. Etiketin kullan?m?nda “Hx” ifadesindeki “x” 1 ile 6 aras?nda de?erler alabilen bir tamsay?d?r. Bu etiket ile ekrana bas?labilecek en büyük boyutlu yaz? <H1> etiketi ile, en küçük boyutlu yaz? <H6> etiketi ile bas?l?r.
Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullan?labilir. Etiketin kullan?m? <h1 align="center">Bu benim en büyük ba?l???m!</h1> ?eklindedir. Etiketin yorum aral???ndaki metin ba?l?k olarak ekrana bas?l?r.
<h1 align="center" style="color:black;">Bu ba?l?klar gittikçe küçülecek!!!</h1> <h2 align="center" style="color:blue;">Bu ba?l?klar gittikçe küçülecek!!!</h2> <h3 align="center" style="color:navy;">Bu ba?l?klar gittikçe küçülecek!!!</h3> <h4 align="center" style="color:green;">Bu ba?l?klar gittikçe küçülecek!!!</h4> <h5 align="center" style="color:maroon;">Bu ba?l?klar gittikçe küçülecek!!!</h5> <h6 align="center" style="color:purple;">Bu ba?l?klar gittikçe küçülecek!!!</h6>
Yukar?daki örne?in istemci ç?kt?s? a?a??dakine benzer olacakt?r.
Bu ba?l?klar gittikçe küçülecek!!!Bu ba?l?klar gittikçe küçülecek!!!Bu ba?l?klar gittikçe küçülecek!!!Bu ba?l?klar gittikçe küçülecek!!!Bu ba?l?klar gittikçe küçülecek!!!Bu ba?l?klar gittikçe küçülecek!!! |
<b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>
Bunlar yaz? tiplerinin nas?l yorumlanaca??n? belirten etiketlerdir.
<b>kal?n</b>, <i>e?ik</i>, <s>üzeri çizili</s>, <u>alt? çizili</u>, <small>küçük</small>, <big>büyük</big>, <tt>daktilo yaz?s?</tt>
|
kal?n, e?ik,
|
<sub> </sub>, <sup> </sup>
Formül ve benzeri metinleri yazarken kullan?l?r.
H<sub>2</sub>SO<sub>4</sub> <br> E = mc<sup>2</sup>
|
H2SO4
E = mc2 |
<hr>
Ekrana yatay çizgi çizmek için kullan?l?r. Bu etiketinde <br> etiketi gibi sonland?r?c?s? yoktur. Yani bu etiket bir yorum aral??? belirtmez. Bu etiket ile tan?mlanabilecek üç de?i?ik özellik vard?r.
Tablo 1.4. hr etiketi içinde kullan?lan kodlar
| Girilecek Kod | Görevi |
| width = "geni?lik" | Çizilecek çizginin yatay uzunlu?unu belirlemek için kullan?l?r. |
| size = "kal?nl?k" | Çizilecek çizginin kal?nl???n? belirtir. |
| color = "renk" | Çizilecek çizginin rengini belirtir. |
Bu kod, sayfa geni?li?inde kal?n ve mavi bir çizgi <hr width="100%" color="#0000F8" size="4"> çizer.
|
Bu kod, sayfa geni?li?inde kal?n ve mavi bir çizgi
çizer. |
<p> </p> ve <br>
BR etiketinin sonland?r?c?s? (</br>) yoktur, yani bir yorum aral???ndan söz edilemez. BR etiketi bulundu?umuz sat?rdan bir sat?r a?a?? geçmek için kullan?l?r.
Burada bir metin var Bir alt sat?ra geçti?imi san?yorum!
Yukar?daki metin ekran yan yana bas?lacakt?r. Her ne kadar kodu yazarken sat?r atlayarak yazm?? olsak bile browser bu kodu yorumlarken arada <br> etiketi olmad??? için bu iki cümleyi yan yana basacakt?r. Kodun do?ru kullan?m?
Burada bir metin var <br> Bir alt sat?ra geçtim!
?eklinde olmal?d?r.
<p> ve </p> etiketleri ise paragraf olu?turmak için kullan?l?r. P etiketi içinde yine body etiketinde oldu?u gibi birtak?m tan?mlamalar yap?labilir.
Tablo 1.5. <p> etiketinin bile?enleri
| Girilecek Kod | Görevi |
| align = "left" | Paragraf? sola dayal? olarak yazar. |
| align = "right" | Paragraf? sa?a dayal? olarak yazar. |
| align = "center" | Paragraf? ortalar. |
| align = "justify" | Paragraf? sola ve sa?a dayal? olarak yazabilmek için sözcüklerin ara bo?luklar?n? de?i?tirir. |
| class = "css_etiketi" | Önceden tan?ml? bir CSS dosyas?ndaki font-size, color... gibi özellikleri paragrafa uygular. |
| style = "css:tan?m?1;css:tan?m?2;..." | font-size, color... gibi css tan?mlar?n? paragrafa uygular. |
<p align="justify"> Burada bir metin var.<br> Bir alt sat?ra geçti?imi san?yorum! Daha önceki örne?e ek olarak yaz?m? bir paragraf içinde yaz?yorum. </p>
| Burada bir metin var. Bir alt sat?ra geçti?imi san?yorum! Daha önceki örne?e ek olarak yaz?m? bir paragraf içinde yaz?yorum. |
<pre> </pre>
Bir kod parças?, bir konsol ekran? al?nt?s? ya da bir ascii-art gibi içindeki bo?luklar?n korunmas?n? gerektiren metinleri görüntülemek için kullan?l?r. Web istemciniz, tüm di?er etiketler için yorum aral???ndaki fazladan bo?luklar?n? gözard? ederek metni sarmalad??? halde <PRE> etiketinin yorum aral???ndaki metnin bo?luklar?n? oldu?u gibi görüntüler.
<pre>
switch($i){
case "2":
echo "De?eri 2";
break;
case "3":
echo "De?eri 3";
break;
default:
echo "De?eri bilinmiyor";
break;
}
</pre>
Yukar?daki kodun istemcinizdeki görüntüsü a?a??dakine benzer olacakt?r.
switch($i){
case "2":
echo "De?eri 2";
break;
case "3":
echo "De?eri 3";
break;
default:
echo "De?eri bilinmiyor";
break;
}
|
Tan?mlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
Terimler ve aç?klamalar?n? içeren listeler olu?turmakta kullan?l?rlar. Bir uygulaman?n komut sat?r? seçeneklerini listelemek ve altlar?nda aç?klamalar?n? vermek için kullan??l?d?r.
<dt> ve <dd> etiketleri <dl> etiketinin yorum aral??? içinde kullan?l?r. <dt> etiketi terim, <dd> etiketi ise aç?klamas? için kullan?l?r. Bir örnekle kullan?m? daha kolay anla??lacakt?r.
<dl> <dt>align = "left"</dt> <dd>Paragraf? sola dayal? olarak yazar.</dd> <dt>align = "right"</dt> <dd>Paragraf? sa?a dayal? olarak yazar.</dd> </dl>
Yukar?daki kodun istemcinizdeki görüntüsü a?a??dakine benzer olacakt?r.
|
align = "left" Paragraf? sola dayal? olarak yazar. align = "right" Paragraf? sa?a dayal? olarak yazar. |
Di?er Listeler <ul> </ul>, <ol> </ol>, <li> </li>
Yukar?daki bölümde anlat?lan tan?mlama listesinden ba?ka iki tür liste daha vard?r. <ol> etiketi kullan?larak olu?turulan listeler s?ral? listelerdir. S?ralama say?sal, alfabetik ya da romen rakamlar? ile yap?labilir. <ul> etiketi ile olu?turulan listelerde ise s?ralama eleman? bir grafik semboldür. <li> etiketi bu etiketlerin yorum aral???nda kullan?larak liste ö?eleri verilir.
Bu etiketlerle kullan?labilecek yard?mc? kodlar? a?a??daki tabloda belirttim.
Tablo 1.6. Liste kullan?m? için yard?mc? kodlar
| Girilecek Kod | Görevi |
| type = "listeleme türü" | Bu alanda belirtilebilecek de?erleri a?a??da bir tablo halinde verdim. |
| start = "de?er" | Sadece <ol> etiketi içindir. S?ralama eleman?n?n ba?lang?ç de?erini belirtmekte kullan?l?r. |
| value = "de?er" | Sadece <li> etiketi içindir. Yorum aral???ndaki liste ö?esinin numaras?n? belirtmek amac?yla kullan?l?r. start = "de?er" parametresi ile belirtilen de?er, say?sal olmasa bile burada say?sal bir "de?er" belirtilebilir. |
S?ralamas?z liste (<ul>) türü de?erleri:
S?ralamas?z listlerde liste ö?elerini belirtmek için 3 sembol ismi kullan?l?r:
-
disc - ?çi dolu bir daire görüntüler
-
circle - ?çi bo? bir daire görüntüler
-
square - ?çi dolu ya da bo? bir kare görüntüler
Tablo 1.7. S?ral? liste (<ol>) türü de?erleri
| Türü | S?ralama |
| 1 | Onluk tabanda numaralama (1,2,3,4,...) |
| i | Küçük rakamlarla romen say?lar? (i,ii,iii,iv,...) |
| I | Büyük rakamlarla romen say?lar? (I,II,III,IV,...) |
| a | Küçük harflerle alfabetik (a,b,c,...) |
| A | Büyük harflerle alfabetik (A,B,C,...) |
Örnek:
<ol type="i">
<li> Birinci ö?e...</li>
<li> ?kinci ö?e ...
<ul type="square">
<li>?kinci ö?enin bir ö?esi...
<li>?kinci ö?enin ba?ka bir ö?esi...
</ul>
</li>
<li> Üçüncü ö?e...</li>
</ol>
Yukar?daki kodun istemcinizdeki görüntüsü a?a??dakine benzer olacakt?r.
|
<img>
Sayfam?za resim yerle?tirmek için kullan?lan etikettir. Etiketin kullan?m?na geçmeden önce Internet üzerinde kullan?lan resim dosyas? biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullan?lan resim dosyas? biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfan?n yüklenmesini kolayla?t?rmakt?r. Windows ortam?nda en çok kullan?lan resim format? olan BMP'lerin web üzerinde kullan?lmamas?n?n en büyük sebebi, iyi resim kalitelerine kar??n bunun bir bedeli olarak boyutlar?n?n çok büyük olmas?d?r. Kullan?lan üç biçemin kendine has baz? özellikleri vard?r.
GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz k?sarak boyut sorununu halleder.
Bunun yan? s?ra sayfam?zda, mecbur kalmad?kça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaç?nmak sayfam?z?n yüklenmesini kolayla?t?racakt?r. Yine bu etikette de sonland?r?c? yoktur. Yani bir yorum aral??? belirtmez.
Bu etiket alt?nda kullanaca??m?z resmin baz? özelliklerini belirtmek için tan?mlay?c? baz? kodlar kullan?r?z. Bu kodlar? a?a??daki tabloda belirttim.
Tablo 1.8. Resim kullan?m? için yard?mc? kodlar
| Girilecek Kod | Görevi |
| src = "resim_dosyas?" | Kullanaca??m?z resim dosyas?n?n tam yolunu yazarak, hangi resmin kullan?laca??n? belirtiriz. |
| width = "geni?lik" | Resmin geni?li?i burada tan?mlan?r. Büyük bir resminiz varsa geni?lik de?erini "100%" vererek resmin web istemci geni?li?ine dinamik uydurulmas?n? sa?layabilirsiniz. |
| height = "yükseklik" | Resmin yüksekli?i burada tan?mlan?r. |
| vspace = "dü?ey_aral?k" | Resmimizi e?er metin içinde kullan?yorsak metne olan dikey uzakl???. |
| hspace = "yatay_aral?k" | Resmimizi e?er metin içinde kullan?yorsak metne olan yatay uzakl???. |
| alt = "metin" | Resmin üzerinde fare ile bir süre beklendi?inde ç?kan aç?klay?c? bilgi burada tan?mlan?r. |
| border = "de?er" | Resmin d???nda çerçeve çizgisi olacaksa "1", olmayacaksa "0" de?eri kullan?l?r.. |
<img src=”./resimler/banner.jpg” width=”250” height=”85” alt=”Bilgisayar Toplulu?u”>
Yukar?daki sat?r bulundu?umuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyas?n? belirtilen ölçüler do?rultusunda ekrana basar. (Resmin boyutlar?n? belirtmek zorunlu de?ildir!). “Alt” kodu ile tan?ml? k?s?m da resmin üzerinde belli bir süre beklendi?inde “Bilgisayar Toplulu?u” yaz?s?n?n belirmesini sa?lar.
<a> </a>
Bu etiketi bir adres belirterek ba?ka sitelere, sayfalara ya da ayn? sayfan?n farkl? bölümlerine ba? vermek veya eposta adreslerini yazmak için kullan?r?z. Web istemciler genellikle öntan?ml? olarak ba?lar? alt? çizili ve mavi olarak görüntüler. <a> etiketinin bir yorum aral??? vard?r ve çe?itli tan?mlay?c? kodlar da etiket ile birlikte kullan?labilir.
Tablo 1.9. Ba? vermek için kullan?lan kodlar
| Girilecek Kod | Görevi |
| href = "URL" | Yorum alan?ndaki bile?ene t?kland???nda yorumlanacak adres. |
| target = "hedef" | Yorum alan?ndaki bile?ene t?kland???nda sayfan?n aç?laca?? yer belirtilir. |
| name = "isim" | Sayfa içi ba?lant?larda ba?ka bir ba??n hedefi olacak yeri belirtmek için kullan?l?r. |
| type = "mime_türü" | Hedefin içeri?ini belirtmek için kullan?l?r. |
<a href=”http://www.belgeler.org”>Linux Belgelendirme Çal??ma Grubu</a> <a href="http://www.slackware.com" target="new">Slackware Linux</a> <a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan ?S?</a>
?lkinden farkl? olarak ikinci kodda “target” özelli?ini kulland?m. Target özelli?ine “new” de?erinin verilmesi ile aç?lacak yeni site yeni bir istemci penceresinde aç?l?r.
Üçüncü sat?r belirtilen adrese eposta yollamak için kullan?l?r. Ba??n üzerine t?kland??? zaman web istemcisinde öntan?ml? olarak kay?tl? eposta istemcisi aç?lacakt?r.
Bunlar?n d???nda resimleri de ba? olarak kullanabilme imkan?m?z var. Sayfam?zda resimleri ba? olarak kullanabilmek için kullanmam?z gereken kal?p a?a??daki gibidir.
<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="0"></a> <a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="1"></a>
Yukar?daki iki sat?r da görev olarak ayn? ?eyleri yaparlar. Fakat ziyaretçiye görünen bölümler aras?nda küçük bir fark vard?r.
 |
|
?lk kod sat?r? olu?acak ba??n etraf?nda ikinci resimde oldu?u gibi bir çerçeve olu?turmayacakt?r. Kulland???m?z resimli ba?larda çerçeve olu?mas?n? engellemek için border="0" kodunu kullan?r?z.
<font> </font>
HTML dosyas? içinde yazd???m?z yaz?lar?n ekrana nas?l bir ç?kt? verece?ini bu etiket ile belirleriz. Uyumlu yaz? tipleri ve renkler ile sayfan?za güzel bir görünüm kazand?rabilirsiniz. Bu etiketin kullan?m?na alternatif olarak sayfan?zda CSS de kullanabilirsiniz. CSS kullan?m? sayesinde fazla kod yaz?m?ndan da kurtulmu? olursunuz. Etiket ile birlikte yaz? tipi, renk ve boyut belirtmek üzere üç kod kullan?l?r.
Tablo 1.10. Font etiketi kodlar?
| Girilecek Kod | Görevi |
| face = "yaz?tipi" | Kullan?lacak yaz? tipi belirlenir. |
| color = "renk" | Yazaca??m?z yaz?n?n rengi belirlenir. |
| size = "boyut" | Yaz?m?z?n boyu belirlenir. |
<p><font face="tahoma" size="3" color="maroon"> <b>Burada bir yaz? var.</b></font></p> <p><font face="tahoma" size="4" color="maroon"> <b>Burada bir yaz? var.</b></font></p> <p><font face="tahoma" size="5" color="maroon"> <b>Burada bir yaz? var.</b></font></p> <p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%"> Burada bir yaz? var.</p> <p class="author">Burada bir yaz? var.</p>
|
Burada bir yaz? var. Burada bir yaz? var. Burada bir yaz? var. Burada bir yaz? var. Burada bir yaz? var. |
Yukar?daki kod parças? ile ilk 3 sat?rda boyut de?eri 3,4,5 yaz? tipi tahoma ve rengi koyu k?rm?z? olan bir yaz? yazd?m. ?lk 3 sat?rda <p>, <font> ve <b> etiketleri ile elde etti?im sonucu sonraki 2 kodda sadece <p> etiketi ile elde ettim. Son sat?rdaki class="author" ile tan?ml? css kodu için belgeler.css dosyas?nda 2. sat?rdaki style="..." alan?ndaki tan?mlar bulunmaktad?r. Gördü?ünüz gibi CSS kulland???nda elimizde daha fazla seçenek bulunmakta ve kod basitle?mektedir.
Burada dikkat etmeniz gereken husus kullan?lan yaz? tipidir. Kendi bilgisayar?n?za özgü yaz? tipleri kullanm??san?z ve o yaz? tipi ziyaretçinin bilgisayar?nda mevcut de?ilse yazd???n?z yaz?lar ziyaretçinin web istemcisinin öntan?ml? ayarlar? do?rultusunda ekrana bas?l?r.
<acronym> </acronym>
K?saltmalar için kullan?l?r.
<acronym title="Linux Kullan?c?lar? Derne?i">LKD</acronym>
|
LKD
|
Fare, "LKD" üzerine getirildi?inde k?saltman?n aç?l?m? balon içinde görüntülenecektir.
<!-- -->
Bu etiket yorum aral??? olarak kullan?l?r. Bu kodun kullan?m amac? HTML kodunun içine kullan?c?ya görünmeyen aç?klamalar yerle?tirmektir. (?lk etapta i?imize yaramasa bile tablo ve frame kullanarak haz?rlanan kar???k HTML dosyalar?nda çok yard?mc? olacakt?r.)
<!-- Buras? bir yorum aral??? ve bu k?s?m sayfada görünmez!!!! --> Basit Bir HTML Dosyas? Örne?i
HTML’ye giri? için bu kodlar? yeterli olaca??n? dü?ünüyorum. Bu bölümde buraya kadar ö?rendi?imiz HTML kodlar?n? kullanarak basit bir sayfa yapt?m. Kullan?lan kodlar?n nerelerde ve nas?l kullan?ld???na dikkat etmenizi öneririm. Sayfan?n yap?m?nda göze hitap etmesinden çok ö?retici olmas?na dikkat ettim.
<html>
<head>
<!-- Meta etiketleri ile ek bilgiler veriliyor -->
<meta name="author" content="Acemi tasar?mc?">
<meta name="description" content="Acemi tasar?mc? web okulu">
<meta name="keywords" content="web,html,css">
<meta http-equiv="content" content-type="text/html; charset=iso-8859-9">
<title>?lk HTML Denemem</title>
</head>
<!-- Body etiketi ile sayfam?zdaki renkleri ayarl?yoruz -->
<body text="#000000" bgcolor="#ffffff" link="#808080" vlink="#eaeaea" alink="#000000">
<h1> Bu büyük boyutlu ortalanmam? bir ba?l?k</h1>
<br><center>
<h1> Bu da büyük boyutlu bir ba?l?k fakat ortalanm??.</h1>
</center>
<!--
Center etiketi ile ortalama bitti?i için buradan sonra sola dayal?
yaz?lacakt?r.
-->
<br><br>
<font face="verdana" size="5" color="#800000">
Buradan itibaren paragraf?ma ba?layaca??m.
</font>
<!-- p etiketi kendili?inden bir sat?r bo?luk verdi?i için sat?r atlamad?m -->
<p>
Bu sayfay? yapmaktaki amac?m etiketlerin ve ba?l? kodlar?n nas?l
kullan?ld???n? göstermektir. Yukar?daki k?rm?z? ba?l??? <font>
etiketini kullanarak elde ettim. ?nternette gezerken ziyaret etti?iniz
sayfalar?n kayna??n? görüntüleyerek de de?i?ik teknikler ö?renebilirsiniz.
</p>
<!-- ba?ka sayfalara link verelim -->
<a href="mailto:fni18444@gantep.edu.tr">Bana e-mail yollay?n</a><br><br>
<br><br>
<!-- HTML dosyan?z? yazd???n?z dizine abc.png adli bir resim yerle?tirin -->
A?a??daki resmin görüntülenmesi için HTML dosyan?z?n oldu?u dizine
<b>abc.png</b> resmini olu?turmal?s?n?z.<br>
<a href="http://www.belgeler.org"><img src="abc.png" border="0"></a>
<br><center>
<hr width=80%>
<u>Bu alt? çizili bir yaz?</u>, <i>bu yana yat?k, italik, bir yaz?</i><br>
Bu sayfan?n amac? <acronym title="Hyper Text Markup Language">HTML</acronym>
kodlar? hakk?nda bilgi vermektir.
<hr width=80%>
<!-- Sayfan?n ba??nda ba?latm?? oldu?umuz body etiketini bitiriyoruz. -->
</body>
</html>
Meta Etiketi ile Yönlendirme Örne?i
Burada <meta> etiketindeki refresh özelli?ini kullanarak yönlendirmeye bir örnek verdim.
Sayfada yaz?l? olan kodlar? herhangi bir metin düzenleyici içine yap??t?r?p dosyalar? belirtildi?i gibi kaydedin. Daha sonra tek yapman?z gereken ornek_html2.html dosyas?n? üzerine çift t?klayarak açmak ;)
<!-- ornek_html2.html ad? ile kaydedin -->
<html>
<head>
<title>Geçici Sayfa</title>
<! -- meta etiketindeki refresh kodu ile ba?ka bir sayfaya yönlendirme yap?l?yor -- >
<meta http-equiv="refresh" content="10;URL=ornek_html2_ana.html">
</head>
<body bgcolor=#334455 text=#eaeaea link=#eaeaea vlink=#eaeaea alink=#808080>
<br><br>
<center>
<h1>
Bu sayfa aç?ld?ktan 10 saniye sonra otomatik olarak ayn? dizinde bulunan
<a href="./ornek_html2_ana.html"> ornek_html2_ana.html</a>
dosyas?n? açacakt?r.
</h1>
</center>
</body>
</html>
Yukar?daki dosya bizim birinci HTML dosyam?z. Bu dosya aç?ld?ktan 10 saniye sonra otomatik olarak a?a??daki dosyay? açmas? gerekli.
<!-- ornek_html2_ana.html ad? ile kaydedin -->
<html>
<head>
<title>Ana Sayfa</title>
</head>
<body bgcolor="#334455" text="#eaeaea">
<center>
<h1>
ornek_html2_ana.html dosyas?ndas?n?z.
<br>Yönlendirme ba?ar?l?!
</h1>
</center>
</body>
</html>
<frameset> </frameset>
Sayfam?za çerçeve deste?i katmak için kullan?lan etikettir. Etiketin kullan?m?na geçmeden önce yabanc? olan okuyucular için çerçeve kavram?n? aç?klamak istiyorum. Çerçeve deste?i içeren bir sayfa olu?turmak için en az üç tane normal HTML dosyas?na ihtiyac?m?z vard?r. Bu üç dosyadan biri hangi HTML dosyalar?n?n çerçeveleri olu?turaca??n? belirler. Di?er ikisi de çerçeveleri olu?turur. Çerçeve kullan?m?na en güzel örnek yahoo ve hotmail gibi eposta sunucular?n?n kullan?c? arayüzüdür.
Yukar?da yahoo.com'un eposta servisinin arayüzü görülmektedir. Sol tarafta görünen mavi k?s?m ve sa?daki gelen maillerin listesinin oldu?u k?s?m ayr? HTML dosyalar?d?r. Bu iki HTML dosyas?n? bir HTML dosyas? gibi göstermek için frame'ler kullan?l?r.
Frameset etiketinin kullan?m?n? anlatt?ktan sonra birkaç örnekle daha iyi anlayaca??n?z? san?yorum.
Tablo 1.1. Frameset yard?mc? kodlar?
| Girilecek Kod | Görevi |
| cols = "de?er" | Bir çerçevenin ekrandaki geni?li?ini verir. |
| rows = "de?er" | Bir çerçevenin ekrandaki yüksekli?ini verir. |
| frameborder = "de?er" | Çerçeveler aras?nda çizgi olup olmayaca?? belirlenir |
<frameset cols=”125,*” frameborder=”0”>
<frame name=”menu” target=”ana” src=”menu.html” scrolling=”auto”>
<frame name=”ana” src=”ana.html” scrolling=”auto”>
<noframes>
<body>
<h1>Oppps...Web istemcinizin frame deste?i yok!!!!</h1>
</body>
</noframes>
</frameset>
Yukar?daki HTML kodlar?n? index.html adl? bir HTML dosyas? içine yaz?p dosyay? çal??t?rmam?z halinde hata ile kar??la??r?z. ?stemci HTML kodumuzda verilen bilgi do?rultusunda bulundu?umuz dizinde ana.html ve menu.html dosyalar?n? da arayacakt?r. Bu dosyalar? yaz?p dizine kaydetmemiz halinde istemci penceresinin sol taraf?ndan itibaren 125 piksellik alan <frame> etiketi ile belirtilen menu.html dosyas?na ayr?lacakt?r. Frameset etiketi ile birlikte kullan?lan frameborder = "0" kodu kulland???m?z çerçeveler aras?nda çerçeve çizgisi olu?mas? engellenecektir.
<frame> etiketi da frameset etiketi içerisinde yard?mc? etiket olarak kullan?l?r. Kullanaca??m?z çerçeve sayfalar?n? ve özelliklerini belirlemek için kullan?r?z.
name = "ad" kodu ile kulland???m?z çerçeveye bir isim veririz. Bu isim sayesinde target = "hedef" yard?mc? kodu ile belirtilen sayfada bir ba?a t?kland??? zaman aç?lacak yeni sayfan?n yeri belirlenir.
scrolling = "auto" kodu kayd?rma çubu?u için kullan?l?r.
<noframes> etiketi, e?er ziyaretçinin istemcisinin frame deste?i yoksa ziyaretçiye görüntülenecek sayfay? belirlemede kullan?l?r.
Daha çok eski ve Linux alt?nda kullan?lan metin tabanl? istemcilerde frame deste?i yoktur.
Son olarak da frame etiketi ile birlikte kullan?lan src = "dosya ad?" koduna gelmek istiyorum. Tahmin etti?iniz gibi frame için kullan?lacak sayfay? belirlemede kullan?l?r.
<frameset rows=”125,*” frameborder=”0”>
<frame name=”menu” target=”ana” src=”menu.html” scrolling=”auto”>
<frame name=”ana” src=”ana.html” scrolling=”auto”>
<noframes>
<body>
<h1>Oppps...Web istemcinizin frame deste?i yok</h1>
</body>
</noframes>
</frameset>
Yukar?daki kod kümesi de ilkinden farkl? olarak sayfalar? yahoo.com'daki gibi de?il de biri yukar?da di?eri de onun a?a??s?nda olacak ?ekilde konumland?r?l?r. Sayfan?n ilk 125 pikseli ilk dosyaya geri kalanlar da di?er dosyaya ayr?l?r.
Yorumunuzu Ekleyin
