HTML ile web sayfası hazırlama dersleri
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.
<b> ve </b> arasindaki yazilar koyu gorunur.
<i> ve </i> arasindaki yazilar ise italik basilir.
<blink> ve </blink> arasindaki yazilar ise yanip soner.
<center> ve </center> arasindaki yazilar ortalanir.
<pre> ve </pre> ile sinirlanan yazilarin goruntusunde ayarlama yapilmaz. Yani birden fazla bosluk varsa bunlar bir tane olacak sekilde azaltilmaz.
<p> paragraf basi yapmak icin kullanilir.
<br> bir satir atlamak icin kullanilir.
<hr> 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 yerlestirebilecektir.
___1.5 HTML sayfasina bag (link) yerlestirmek___
<a> ve </a> : HTML'nin temeli olan bu komutlarla bag (link) yapilir.
<a href="hedef bag"> Aciklama </a> Biciminde kullanilir.
Aciklama denilen kisim ister yazi ister bir grafik ya da herhangi bir nesne olabilir. "hedef bag" kismi ise yerel kaynaklari gosteren bir dosya adi ya da uzak bir makinadaki bir baska nesneyi (yazi, grafik, video vs.) gosteren bir bag (link) olur.
Bu linkler, mevcut internet araclarindan biridir.
Ornegin:
http:// ftp:// telnet:// gopher:// news:// bu araclardan bazilaridir.
Bunu kullanirken;
<a href="telnet://orca.cc.metu.edu.tr/> Orca'ya Netscape icinden baglanmak icin buraya tiklayin</a>
yazarak, telnet aracini bir bag (link) olarak sayfamiza yerlestirmis oluruz.
Ya da;
<a href="resmim.jpg">Neye Benzedigimi Gormek Icin Buraya Bas</a>
Yukarida adi gecen resim bu web sayfasi ile ayni dizinde (directory) olmalidir.
Baska sekilde ornekler ise:
<a href="ftp://ftp.metu.edu.tr/pub/cica-win95/"> Windows95 icin Uygulama dosyalari</a>
<a href="nntp://news.metu.edu.tr/> Netnews 60000 den fazla konuda insanlarin yazistigi bolge</a>
<a href="news:comp.sys.cbm"> NetNews'in Commodore bilgisayarlarina iliskin tartismalari</a>
Ve, internetin en gozde kullanimi: bir web sayfasindan baska bir web sayfasina baglanma:
<a href="http://www.physics.metu.edu.tr/~filker/nukleer/"> Turkiye'de nukleer enerji tartismalari</a>
dikkat ettiyseniz yukaridaki ornekte sayfanin hangi dizinde oldugu (...ilker/nukleer/") belli ama hangi dosyada oldugu yazilmamis. Boyle bir durumda gosterici program dosyanin adinin 'index.html' oldugunu ongorur.
Kendi dizininizdeki bir sayfa icin:
<a href="ihd.html"> Insan Haklari Dernegi ve pismis tavuk icin buraya tiklayabilirsiniz.</a>
___1.6 Baglar yardimiyla etkilesimli kullanim ornegi___
Bir baga (link) ard arda tiklamak yoluyla, slow motion biciminde ardisik resim gosterebilirsiniz. Bu kullanim en basit sekliyle bir Bilgisayar Destekli egitim sayfasinda kullanilabilir. Amac, kullaniciya konuyu belli bir sirayla vermek ve konu icindeki iliskilerin anlasilmasini kolaylastirmak.
Bunu yapmak icin, once tek bir resim ve o resmin link olarak tanimlandigi bir web sayfasi hazirlamalisiniz:
<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><img src="resim1.gif"></a>
</body>
</html>
sonra da ikinci sayfa da hazirlanmali:
<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><img src="resim2.gif"></a>
</body>
</html>
... bu sekilde devam edilir.
ve ilk sayfa yuklendikten sonra resmin ustune tiklandiginda ikinci sayfa ve icindeki resim yuklenir.
Iyi hazirlandiginda, bu basit HTML kullanim sekli ile www-programciligina (Java, cgi-bin, ...) bulasmadan da etkili 'sunu' ve 'anlatilar' yapilabilir.
___1.7 Ekran duzenine iliskin daha cok komut___
<multicol cols=2> ... </multicol> : Aradaki yazilar cols= ile belirtilen sutunlara ayrilarak ekrana basilirlar. Sadece Netscape3.0 ve ustunde calisir. Sutun icindeki yazinin sutunun ne kadarini kaplayacagini width parametresi ile belirtiriz. <multicol cols=3 width=75%> gibi. Burada boslugu yuzde yerine piksel olarak da verebiliriz. Ayrica iki sutun arasindaki boslugu da gutter parametresi ile veririz: <multicol cols=2 width=500 gutter=25> yazilar... </multicol>
<spacer type=... size=... height=... width=... align=...> : Bununla paragraf baslari icin bosluk birakmak mumkun. Ornegin
<spacer type=block size=48> ile 48x48 piksellik bir bos kare alan yaratmis oluruz. Burada block yerine vertical ya da horizontal kullanmak da olasi. Ayrica, <spacer type=block width=320 height=200 align=right> ile 320x200'luk bir bosluk yaratip bunu ekranda saga dayatmis oluruz. Gene align komutundan sonra right, left, center, absmiddle gibi diger konum belirteclerini kullanabiliriz.
___1.8 Sayfalarda tablo kullanimi___
Genel kullanim:
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sutun 1 yazilari </td><td [seçenekler] >sütun 2</td><td> sütun 3.....</td> </tr>
<tr><td>2.satirin 1. sütunu</td><td>2. sütunu</td><td>3. sütunu </td></tr></table>
Tablolar satirlar ve sütunlar seklinde ayrilmis hücrelerden olusuyor. Her yeni satira baslamak için <tr> etiketini, her yeni sütun için ise <td> etiketini kullaniyoruz.
Bir örnek ile incelersek:
<table border=1 width=200 cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <td align=top width="50%">FPM<br>EDO<br>SDRAM<br>DDR RAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <td align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA ATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">Islemci tipleri</td> <td align=top width="50%">RISC<br>CISC<br></td> </tr></table>
Burada 2x3'lük bir tablo olusturduk. Tablomuz 1 pixel kalinliginda cerceveye sahip (border=1), tablo sayfada 200 pixel genisliginde yer tutacak (width=200), hücreler arasI 2 pixell bos ve 2 pixellik bir kalinlik efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genisliklerin yazI uzunluguna göre otomatik ayarlanmamsI için genislikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: <td width="100"> ile.
Hücreler içindeki yazIlarIn nasIl yerlestirilecegini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.
Ve eger, bir hücrenin iki hücre genisliginde veya yüsekliginde olmasini istiyorsak colspan ve rowspan seçeneklerini de kullaniyoruz. Önceki örnege bir baslik ekleyecek olursak:
<tr><td align=center colspan="2">Bilgisayar Ana Bilesenleri</td></tr>
Tablolari icice de kullanmamiz mumkun. Bu sekilde bir kullanimla bir www sayfasindaki resim ve yazilari tam istedigimiz gibi konumlandirmamiz mümkün olur.
___1.9 Basit bir HTML sayfasi icin gereken son noktalar___
Daha once kisaca deginildigi gibi, ilk yuklenecek sayfanin adi standart olarak 'index.html' olarak belirlenmistir. Dolayisiyla ilk sayfanizi bu sekilde adlandirirsaniz;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kisa olan, bir adres kullanabilirsiniz.
___Renk kodları___
#000000
#000033
#000066
#000099
#0000CC
#0000FF
#990000
#990033
#990066
#990099
#9900FF
#9900CC
#003300
#003333
#003366
#003399
#0033CC
#0033FF
#993300
#993333
#993366
#993399
#9933CC
#9933FF
#006600
#006633
#006699
#0066CC
#0066FF
#996600
#996633
#996666
#9966CC
#9966FF
#009900
#009933
#009966
#009999
#0099CC
#0099FF
#996600
#996633
#996699
#9966CC
#9966FF
#009900
#009933
#009966
#009999
#0099CC
#0099FF
#999900
#999933
#999966
#999999
#9999CC
#9999FF
#00CC00
#00CC33
#00CC66
#00CC99
#00CCCC
#00CCFF
99CC00#
#99CC33
#99CC66
#99CC99
#99CCCC
#99CCFF
#00FF00
#00FF33
#00FF66
#00FF99
#00FFCC
#00FFFF
#99FF00
#99FF33
#99FF66
#99FF99
#99FFCC
#99FFFF
İyi ÇAlışmalar
HTML ile web sayfası kodlarken neyi nasıl yapacağımızı bilmek çok önemlidir.
Bunun içinde HTML kodlarını bilmemiz gerekir. Bu kodlara tag ismi verilir. Aşağıda
bunlardan bazılarını bulabilirsiniz.
<address>; adres, imza, yazar gibi bilgileri bloklamada kullanılır. Bilgiler diğer
komutlarda olduğu gibi <address> işte burası </address> şeklinde yazılır.
*<b>; kalın (bold) yazılar oluşturmak için kullanılır. Kullanımı, <b>kalın yazı</b>
şeklindedir.
*<blockquote>; bu komutun içerisinde yeralan metin kendisinden önceki yere göre
biraz daha içeride görünür. Kullanımı;<blockquote> içeride görünecek metin
</blockquote> .
*<br>; Bir alt satıra geçmek için kullanılır.Kullanımı sadece <br> dir.
*<caption>;Bir tablonun başlığını belirlemek için kullanılır.Kullanımı;
<caption>başlık</caption> şeklindedir.
*<center>;Nesneleri ortalamak için kullanılır.Bu etiket arasındaki yazı,resim gibi öğeler
bulundukları ortama göre ortalanırlar.Kullanımı; <center>ortalanacak metin</center>
şeklindedir.
*<cite>;başka bir yerden alıntı yapıldığı zaman kullanılır.Kullanımı; <cite>Alıntı
yapılan metin</cite> şeklindedir.
*<code>;Başka bir programlama dilinden alınmış satırları belirtmek için
kullanılır.Kullanımı; <code>echo "php";</code>
*<h1>;Size belirtmeden daha büyük yazılar yazmak içindir.1 rakamının yerine 1 ile 6
arasında rakam yazılabilir.Rakam büyüdükçe yazı küçülür.Kullanımı;
<h6>Başlık</h6> şeklindedir.
*<del>;Ortasında çizgi olan yazılar için kullanılır.kullanımı; <del>ortası çizgili
yazı</del>
*<dfn>;Bir terimin örneğini tanımlamak için kullanılır.Yazılar italik bir şekilde
görünür.Kullanımı; <dfn>Örnek metin</dfn>
*<hr>;Belirlenen ölçülerde çizgi çizmeye yarar.Bu çizgiye boy,kalınlık,renk ve gölge
özelliği verilebilir.Kullanımı <hr width=400 size=1 color=red noshade>.Bu örnek 400
pixel uzunluğunda 1 pixel kalınlığında kırmızı renkte gölgesiz bir çizgi oluşturur.
*<p>;Paragraf elemanıdır.Belirli bir paragrafı başlatır ve kesimini yapar. Kullanımı;
<p>Bu bir paragraf</p>.
*<pre>;Bu etiket arasındaki metin HTML'de nasıl görünürse browserdede o şekil
görünür.Mesela kelimeler arasında birden fazla boşluk vermek için   kullanılırken
pre komutu ile html de birden fazla boşluk verebiliriz ve bu sayede browserdede aynı
şekilde görünür.Kullanımı;
<pre>
Data1 12555
Data1-2 15859
</pre>
*<em>;Vurgu yapmak için kullanılır.Bu şekilde yazılar italik görünür.Kullanımı;
<em>vurgu cümlesi</em> şeklindedir.
*<kbd>;Bu şekilde textler sabit genişlikte yazıcı fontunda gösterilir.Kullanımı; <kbd>bu
bir metin</kbd>.
**<strike>;Taslağı çıkarılmış blok textler için kullanılır.Kullanımı; <strike>bloklanmış
text</strike>.
*<strong>;Blok textleri işaretlemek için kullanılır.Kullanımı; <stroke>İşaretlenmiş
text</stroke>.
*<tt>;Sabit büyüklükteki fontlardan oluşan bir blok text tanımlar.Kullanımı; <tt>bu bir
cümle</tt>.
*<u>;Textlerin altını çizmek için kullanılır.Kullanımı; <u>altı çizgili text</u>
*<lit>ökümanın içerisine dipnot ekleme için kullanılır.Kullanımı; <lit>dipnot
yazısı</lit>.
*<math>;Karışık matematiksel ifadelerin döküman içerisinde görünebilmesi için
kullanılır.Kullanımı; <math>matematiksel ifadeler</math>.
*<img>;Resim eklemek için kullanılır.Kullanımı; <img src="dosya_adi"> şeklindedir.
*<map>;Resim üzerinde birden fazla link vermek için kullanılır.Yani bir resim üzerinde
birden fazla link belirtilebilir. En mantıklı kullanımı bir map tanımlama ve img
etiketinin içinde onu belirtmektir.Map tanımlama;
<map name="Map">
<area shape="rect" coords="4,4,110,27" href="1.htm">
<area shape="rect" coords="5,60,108,84" href="2.htm">
<area shape="rect" coords="5,87,108,109" href="3.htm">
</map>resimde onu belirtmek için;
<img src="resimadi.jpg" usemap="#Map"> |
|
 |
|
