HTML SAYFASI HAZIRLAMA DERSLERİ WEB TASARIM KODLARI!
Dersler:1.1 Temel bilesenler: html, head, title, meta ve body
1.2 Renkler, body, font, ve h1..h6
1.3 Yazilari bicimlendirmek: kalin, yatik, ortalanmis, vs. ...
1.4 Sayfada resim gostermek
1.5 HTML sayfasina bag (link) yerlestirmek
1.6 Baglar yardimiyla etkilesimli kullanim ornegi
1.7 Ekran duzenine iliskin daha cok komut:
1.8 Sayfalarda tablo kullanimi
1.9 Basit bir HTML sayfasi icin gereken son noktalar___1.1 Temel bileşenler: html, head, title, meta ve body___Bir WEB sayfasının standard bileşenleri şunlardır:
<html> ve </html> : sayfanin baslangic ve bitisini belirtir.Yani kodlara başlamadan önce <html> tagını kullanırız.Kodlar bitincede </html> tagı kullanılır.
<head> ve </head> : sayfanin baslik bilgileri 'title', 'meta' vs. buraya yerlestirilir.
<title> ve </title> : sayfanin iceriginin ne oldugunun tanitilmasinda kullanilir. Sayfada gorunmez ama netscape bunu sayfayi tanimlamakta kullanir.
<meta> : sayfanin icerigi hakkinda www tarayicilarina bilgi saglamak icin gereklidir.
<body> ve </body> : sayfanin iceriginin baslangic ve bitisini belirtmekte ve sayfa hakkindaki genel tanimlamalari yapmakta kullanilir.
Yukaridaki bu komutlarin, bir web sayfasinin icindeki siralari asagidaki gibidir. Bir yazi editoru (joe, pico, xedit, edit, vs.) ile ilk ornegimizi yazarsak:
<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="html sayfasi icin bir kullanim ornegi"> </head>
<body bgcolor=white>
'Bu sayfa insa halindedir', ya da 'this page is under construction' web sayfalarinda ille de olmasi gerektigi dusunulen sacma yazilardir. </body>
</html>
___ 1.2 Renkler, body, font, ve h1..h6 ___Onceki ornekte '<body color=white>' diye, asagidakinin basitlestirilmis bicimini kullanmistik:
<body font=purple bgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanilan genel yazilarin rengi,
bgcolor ile arkaplan rengi,
text ile tanimsiz yazilarin rengi,
link ile uzerine gelince el hareketi cekilen yazilarin rengi,
vlink ile de secilmis baglarin rengi belirlenir.
renk belirtmek icin o rengin ingilizce adi ya da RGB degerleri onaltilik systemde verilir. RGB deki siraya gore 00-FF arasi uc deger kullanilir. Hepsi sifir ise hicbir renkten karistirilmaz. hepsi FF ise her renk maksimum oranda kullanilir ve beyaz elde edilir.
Ornegin salt bir kirmizi #FF0000 ile elde edilir.[Arkadaslar bu renk kodlarını topicin ilerleyen yerlerinde wericem]
<font color=...> ve </font> arasindaki yazilar belirtilen renkte yazilir.
<h1> ve </h1> den <h6> ve </h6> ya kadar standard yazi tiplerinden biri secilerek yazi yazilir. h1 ile belirtilenler h6 ile tanimlananlardan daha buyuktur.
ornegin:
<html>
<h1>Sayfa basligi icin uygun buyuklukte harfler</h1>
<h4>Bu harfler sanirim yazi icin yeterliler</h4>
<h6> Gozleriniz bozuk degilse, ve her gun A vitamini aliyorsaniz bu yazi sizin icin okunabilir olmali.</h6>
</html>
Arkadaslar yani bu taglarda asyı küçüldükçe yazı büyür.
___1.3 Yazilari bicimlendirmek: kalin, yatik, ortalanmis, vs. ... ___Onceki ornekte <h1>, <h2>, ... ile yazilarin buyukluklerini ayarlamanin basit bir yolunu gormustuk. HTML sayfamizin yazilarina biraz daha kisilik kazandirmak icin asagidaki komutlari da kullanabiliriz.
ve arasindaki yazilar koyu gorunur.
ve arasindaki yazilar ise italik basilir.
<blink> ve </blink> arasindaki yazilar ise yanip soner.
<center> ve </center> arasindaki yazilar ortalanir.
ve
ile sinirlanan yazilarin goruntusunde ayarlama yapilmaz. Yani birden fazla bosluk varsa bunlar bir tane olacak sekilde azaltilmaz.
<p> paragraf basi yapmak icin kullanilir.
bir satir atlamak icin kullanilir.
bir cizgi ceker.
___1.4 Sayfada resim gostermek___En basit sekliyle, bir sayfaya resim koymak icin asagidaki komut su sekilde;
<img src="dosya-adi" alt="..." align=... >
kullanilir.
Burada dosya-adi gosterilecek grafik dosyasinin (gif ya da jpg tipinde) bulundugu yer ve adidir. Baglanilan html sayfasi ile ayni dizinde bulunan resimler icin yer adi belirtmeye gerek yoktur.
Alt ile ise lynx kullanicilarinin gorebilecegi bir aciklama yazmis oluruz.
Align ile de resmin konumunu belirleriz.
Ornegin:
<img src=resim.gif align=right> ile resmin saga yanasik olarak cizilmesini saglariz. 'right' yerine 'left', 'center', 'middle' gibi konum bildirici bir baska sozcuk de kullanilabilir.
Ayrica yukaridakilere ek olarak 'border', 'width', 'height' belirteclerini de <img ...... > icinde kullanabiliriz. Bunlardan 'border='i kullanarak resmin cercevesini belirleriz; border=0 dersek hic cerceve cizilmez.
Width ve height ile resmin boyutlarini belirleyebiliriz. Bunlardan sadace birini verirsek, resmin boyutu orantili olarak cizilecektir. Yani <img src=resim.gif width=300> demissek, ve de resmimiz aslinda 100 nokta genisliginde 50 nokta yuksekliginde idiyse, ekrana 300 nokta eninde ve 150 nokta yuksekliginde cizilecektir. Her iki degeri de (width=... height=...) kullanmissak, resmin oranini istedigimiz gibi degistirmek mumkun olur.
Bu arada, sayfanin internetten indirilirken hizli gosterilmesini istiyorsak, her resmin width ve height ozelliklerini kullanmaliyiz. Bu sayede browser (gosterici) programiniz resimlerin yuklenmesini beklemeden cevrelerine yazilari yerlestirebilecekti r.
