1. DERS


1 HTML komutlari ve kullanimlari:

1.1 Temel bileşenler: html, head, title, meta ve body
Bir WEB sayfasının standard bileşenleri şunlardır:
ve : sayfanin baslangic ve bitisini belirtir.
ve : sayfanin baslik bilgileri 'title', 'meta' vs. buraya yerlestirilir.
: sayfanin iceriginin ne oldugunun tanitilmasinda kullanilir. Sayfada gorunmez ama netscape bunu sayfayi tanimlamakta kullanir.
******> : sayfanin icerigi hakkinda www tarayicilarina bilgi saglamak icin gereklidir.
ve : 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:



****** name="description" content="html sayfasi icin bir kullanim ornegi">

'Bu sayfa insa halindedir', ya da 'this page is under construction' web sayfalarinda ille de olmasi gerektigi dusunulen sacma yazilardir.

Aslinda en basit web sayfasi soyle olabilir:

Benim neyim eksik?

sondaki '' yi koymasak dahi www gosterici programi (lynx, netscape, ...) bunu bir HTML sayfasi olarak yorumlayacaklardir.

Eyvallah ders biri inceledık
Ders ikiye gecebilirmiyiz.. ;)

Eyvallah ders biri inceledık
Ders ikiye gecebilirmiyiz.. ;)

2. DERS

1.2 Renkler, body, font, ve h1..h6

Onceki ornekte '' diye, asagidakinin basitlestirilmis bicimini kullanmistik:



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.

ve arasindaki yazilar belirtilen renkte yazilir.

ve

gerçekten yararlı bi paylaşım teşekkürler

rica ederim kardeşim siz yorum yazdıkça yarım bıraktığım konulara devam ediyorum :-[

ben de size teşekkür ederim :)

3. DERS

1.3 Yazilari bicimlendirmek: kalin, yatik, ortalanmis, vs. ...

Onceki ornekte

,

, ... ile yazilarin buyukluklerini ayarlamanin basit bir yolunu gormustuk. HTML sayfamizin yazilarina biraz daha kisilik kazandirmak icin asagidaki komutlari da kullanabiliriz.

< b> ve arasindaki yazilar koyu gorunur.

< i> ve arasindaki yazilar ise italik basilir.

< blink> ve arasindaki yazilar ise yanip soner.

< center> ve arasindaki yazilar ortalanir.

< pre> ve 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.

Hocam 4. derse geçebilirmiyiz :)

4. DERS ;)

1.4 Sayfada resim gostermek

En basit sekliyle, bir sayfaya resim koymak icin asagidaki komut su sekilde;


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:
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 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 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.

Sayfanin hizli geliyor gibi gorunmesini saglamanin bir yolu da 'lowsrc' belirtecini icinde kullanmak. Eger kullandigimiz resimlerin bir de bulanik/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha yapar, ve bunu seklinde tanimlarsak, ilk once hizliresim.gif yuklenip gosterilecektir. Bu sayede bulanik iken yavas yavas netlesmeye baslayan resimler belirir sayfamizda. Bunun yarari ise sayfaniza bakan kisinin cabuk karar vermesini sagliyor olmasindadir.

tesekkürler

tesekkürler

5. DERS :)

1.5 HTML sayfasina bag (link) yerlestirmek

ve : HTML'nin temeli olan bu komutlarla bag (link) yapilir.

Aciklama 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;

Neye Benzedigimi Gormek Icin Buraya Bas
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

NetNews'in Commodore bilgisayarlarina iliskin tartismalari

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

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:

Insan Haklari Dernegi ve pismis tavuk icin buraya tiklayabilirsiniz.

teşekkürler

6. derse geçebilirmiyiz..

teşekkürler

6. derse geçebilirmiyiz..

6. DERS (gecikmeden dolayı özür dilerim :))

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:








sonra da ikinci sayfa da hazirlanmali:








... 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.