mehmet yüksel html ders notları

8/9/2019 Mehmet Yksel HTML Ders Notlar

1/34

r.Gr. Mehmet YKSEL M.. Tarsus Teknik Eitim Fakltesi Temel Bilgisayar Bilimleri

WEB TASARIMI

1) HTML (Hyper Text Markup Language-Hiper Metin iaretleme Dili): HTML bitr metiniaretleme dilidir. HTML kodlar < ve > iaretleri arasna yazlr.

r: : Al belirteci : Kapan belirteci

HTML Belgesi Oluturma:

HTML belgesi oluturmak iin Not Defteri kelime ilemci program alr, kodlar yazldktansonra uzants.htm ya da .html olacakekilde belge kaydedilir.

Editrler:

a) Belirte Editrleri: erdii butonlar yardmyla belirteleri (etiketleri) kullancnn doruolarak yazmasn salar. Bu programlara rnek olarak; Hot Dog ve Homesite verilebilir.

b)WYSIWYS Tr Editrler: Ne grrsen onu alrsn anlamna gelen bir ksaltmadr. Butr editrlerde kullanc hibir kodu yazmadan Web sayfas oluturabilir. Bu tr editrlereMM Dreamweaver ve MS Frontpage rnek olarak verilebilir.

c) eviriciler: Kullancnn deiik biimlerde hazrlad belgeleri HTML biiminedntrmeye salayan programlardr.

HTML Belgelerinin Yaps:

Sayfa Bal

: Belgede html kodlarnn baladn ve bittiini gsteren etiketlerdir.

: Bal

k k

sm

d

r. Bu iki etiket aras

na, sayfa bal

, stiller, anahtar kelimelerve scriptler yazlr.: Sayfa balnn tanmland ksmdr.: Sayfa ieriinin kodland ksmdr.

Not Defterini Kullanarak HTML Hazrlama:

1) Balat-Programlar-Donatlar-Not Defteri2) HTML kodlar Not Defterinde yazlr.3) Dosya Farkl Kaydet seenei ile dosya uzants htm ya da html olacakekilde kaydedilir.

1


2/34


Sayfa Yapsle lgili lemler:

oklu Ortam: Metin, ses, grafik ve video. etiketi ierisinde sayfann zemin rengi, sayfa zemininde resim olup olmamas,sayfadaki metinlerin renkleri, kprlerin (linklerin) renkleri ve sayfa boluklarnn

tanmlanmas yardmc etiketlerle yaplr.

bgcolor: Zemin renginin dzenlenmesi iin kullanlr.text: Metin renginin dzenlenmesi iin kullanlr.link: Kpr renginin belirlenmesi iin kullanlr.

rnek:

Not: Bu renkleri tanmlarken ya isimlerini ya da Hexadecimal karlklarn kullanrz.

Baz Renklerin Hexadecimal Karlklar: RGB=Red Gren Blue

RGB Rengi Hexadecimal DeeriBeyaz #FFFFFFSiyah #000000Krmz #FF0000Yeil #00FF00Mavi #0000FFMagenta #FF00FFSar #FFFF00Pembe #FF6EC7Turuncu #FF7F00Cyan #00FFFF

rnek 1: Balk ve paragraf etiketleri

Web Tasarm

Balk 1 Balk 2 Balk 3 Balk 4 Balk 5 Balk 6Bu metin bir paragraf oluturur mu?Buras birinci paragraf mdr?

Bu paragraf birinci paragraftr.

Bu paragraf ikinci paragraftr.

Bu paragraf nc paragraftr.

2


3/34


ekil 1. Balk ve paragraf etiketleri (rnek 1)

rnek 2: Paragraf hizalama ve yatay izgi

Web TasarmBu paragraf sola hizalanm bir paragraftr. Alignparametresi paragraf etiketi ierisinde kullanlarak metnin sola ve saahizalanmasn, ortalanmasn ya da iki yana yaslanmasn salayan yardmcbir parametre olarak kullanlmaktadr. Bu yardmc parametrenin kullanmile web sayfalarmzn biimsel grnmn daha gzel bir halegetirebiliriz. Web sayfamzn grselliinin daha gzel olmas sayfannekiciliini arttran bir zelliktir. Bu nedenle bu yardmc parametreleri

kullanmak olduka faydal olabilir.
Bu paragraf saa hizalanm bir paragraftr. Alignparametresi paragraf etiketi ierisinde kullanlarak metnin sola ve saahizalanmasn, ortalanmasn ya da iki yana yaslanmasn salayan yardmcbir parametre olarak kullanlmaktadr. Bu yardmc parametrenin kullanmile web sayfalarmzn biimsel grnmn daha gzel bir halegetirebiliriz. Web sayfamzn grselliinin daha gzel olmas sayfannekiciliini arttran bir zelliktir. Bu nedenle bu yardmc parametrelerikullanmak olduka faydal olabilir.Bu paragraf ortalanm bir paragraftr. Align parametresiparagraf etiketi ierisinde kullanlarak metnin sola ve saa hizalanmasn,ortalanmasn ya da iki yana yaslanmasn salayan yardmc bir parametreolarak kullanlmaktadr. Bu yardmc parametrenin kullanm ile web
sayfalarmzn biimsel grnmn daha gzel bir hale getirebiliriz. Websayfamzn grselliinin daha gzel olmas sayfann ekiciliini arttran

3


4/34


bir zelliktir. Bu nedenle bu yardmc parametreleri kullanmak oldukafaydal olabilir.
Bu paragraf iki yana yaslanm bir paragraftr. Alignparametresi paragraf etiketi ierisinde kullanlarak metnin sola ve saahizalanmasn, ortalanmasn ya da iki yana yaslanmasn salayan yardmcbir parametre olarak kullanlmaktadr. Bu yardmc parametrenin kullanm
ile web sayfalar

m

z

n biimsel grnmn daha gzel bir halegetirebiliriz. Web sayfamzn grselliinin daha gzel olmas sayfannekiciliini arttran bir zelliktir. Bu nedenle bu yardmc parametrelerikullanmak olduka faydal olabilir.
Aadaki linke tklayarak Mersin niversitesi web sayfasnaulaabilirsiniz.
Mersin niversitesi

ekil 2. Paragraf hizalama ve yatay izgi (rnek 2)

Kullanlan Etiket ve Parametreler:

a): Metni ortalamak iin kullanlan etiketlerdir.b) etiketi ierisinde kullanlan parametreler.

alink: Aktif linktir, yani zerine gelindiinde link renginin ne olacan belirtir.vlink: Ziyaret edilmi link rengini belirler.

leftmargin: Sol ve sa kenarlardaki boluun deerini belirler.topmargin: st ve alt kenarlardaki boluun deerini belirler.

4


5/34


c)
: Paragraf yapmak iin kullanlr.d)
: Paragraflar hizalamak iin

parametresi ierisinde;

left:paragraf sola hizalamak iin,center:paragraf ortalamak iin,right:paragraf saa hizalamak iin,

justify:paragraf iki yana yaslamak iin,gibi parametreler kullanlr.e)
: Yazdmz metnin bir ksmnn bir alt satrda olmasn ya da dier bir ifade ile satr

ba (veya satr sonu) yapmamz salayan etikettir. Kapan etiketi yoktur.f) .: Balk etiketleridir.g) : Yatay izgi etiketidir.

Yatay izgi iin zellikler:

Etiket Grevisize izgi kalnln belirler.

width izgi uzunluunu pixel veya % olarak belirler.align Hizalamay dzenler.color izgi rengini dzenler.h) background: etiketi ierisinde kullanlarak arka plana resim yerletirmemizisalar.

Resim dosyasn adresinin belirtilmesi:

Adresleme Anlamresim.jpg resim dosyas ve web sayfas ayn klasrderesimler/resim.jpg resim dosyas bir alt klasrde (resimler klasrnn iinde)resimler/foto/resim.jpg resim dosyas bir alt klasrn alt klasrnde../resim.jpg resim dosyas bir st klasrde../../resim.jpg resim dosyas iki klasr stte

Biimlendirilmi Metin: Bir HTML sayfasnda bilgileri stun halinde gsterebilmeyi salar.Ancak tablolarn gelitirilmesi ile bu alanda kullanlmamaya balanmtr. HTMLsayfalarnda biimlendirilmi metin elde etmek iin etiketleri kullanlr.

rnek 3: Biimlendirilmi metin

HTML Kursu

Ad Soyad TelAli Aydn 1234567Ahmet Sel 7654321Veli Altn 1985567

5


6/34


ekil 3. Biimlendirilmi metin (rnek 3)

Karakter Biimleme: Yaz tipinin, renginin ve byklnn belirlenmesidir.

Etiketi: Yaz tipinin, renginin ve byklnn belirlenmesi bu etiket ileyaplr. Yardmc etiketlerunlardr:

size: Bykl belirler. 1-7 aras deer alr.color: Yaz rengini dzenler.face: Yaz tipini belirler. (Arial, Times New Roman, vs.)

rnek 4: Karakter biimleme

HTML Kursu Bu bir rnektir.Bu bir rnektir.Bugn hava ok gzel.

6


7/34


ekil 4. Karakter biimleme (rnek 4)

Size parametresi iin punto deerleri: zel karakterlere ait komutlarSize Punto Deeri zel Karakter Komut1 8 & &2 10 3 12 4 14 5 18 6 24 > >7 36

mehmet yüksel html ders notları

Documents