HTML

2008-2009 BAHAR YARIYILI HTML DERS NOTLARI
Dersi Alan Blmler : lkretim Matematik rt. 1-A(1nci retim) / Snf rt. 1-A (1nci retim)
Trke rt. 2A (1nci retim) / Sosyal Bilgiler1 (1 ve 2nci retim) / Okul ncesi rt. 1 / Beden Eitimi rt. 2 Ders Sorumlusu : Mustafa ETN BA Enformatik Blm ! Bu html notlarna derste aldnz notlar ile beraber alnz. ! Final snav excel ve html kapsamnda test+klasik doldurma sorular tipinde olacaktr.
HTML bir programlama dili deildir. Bir mark-up (metin iaretleme) dilidir, yani tag denen zel iaretlerle bir yaznn tmn ya da sadece bir ksmnn grnmn,ilevini deitirmeye yarar. Ayrca, gelien web taraycs (browser) teknolojileri sayesinde, HTML iine yazlar dnda resim, ses, video, animasyon flash yansra JavaScript, Java gibi dillerle yazlm programlar, ya da dier nesneler de yerletirilebilir.
<html> </html> -------------------------------------------------------------------------------------------------------------------------nemli Not: Bir taga parametre eklenmesi gerekiyorsa bu parametre, tagn balang ksmndaki > iaretinden hemen nceki ksma yerletirilir. rnek: <x></x> Bu tag gerekte kullanlmamaktadr. Biz x tagna p1 parametresi ekleyeyip parametre deeri olarak d1 deerini verelim: <x p1=d1></x> Bir parametre daha ekleyelim, p2 parametresi ve d2 deerini ekliyoruz: <x p1=d1 p2=d2></x> Bu kod u ekilde de yazlabilrdi: <x p2=d2 p1=d1></x> -------------------------------------------------------------------------------------------------------------------------<html> <head> </head> </html> HEAD, Dokman ierii (gvdesi) dnda bulunan, BALIKLAR(Dkmann bal), SCRPTLER, STLLER , META BLGLER (Dkmann yazar, arama motorlar iin gerekli olan arama kelimeleri olan keywords anahtar szckler) verilerini ierir. Balklar rnek olarak u ekilde gsterilebilir: <html> <head> <title>Sayfann Bal buraya yazld</title> </head> </html> Meta bilgileri rnek olarak u ekilde gsterilebilir: <head> <meta http-equiv=content-type content=text/html;charset=windows-1254> <meta http-equiv=content-type content=text/html;charset=iso-8859-9> <meta name=description content=Bir cmle ile sitenin Tanm> <meta name=keywords content= Virglle, ayrlm, anahtar kelimeler> </head>
SAYFA 1 / 16
Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm
HTML TAGLARI
Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.
<html> <head> <title>Web Sayfama Hogeldiniz</title> </head> <body> Gvde metni (Taraycda grntlenecek metinler, resimler, ses verileri, gibi veriler bu etiketler iine yazlr. </body> </html> <html> <head> <title>Web Sayfama Hogeldiniz</title> </head> <body bgcolor=gray> sayfann zemin rengini gri yapm olduk.. </body> </html> <html> <head> <title>Web Sayfama Hogeldiniz</title> </head> <body bgcolor=#ff0000 text=#ffff00> Gvde metni </body> </html> Not: renkler isimleri ile veya renk kodlar ile ifade ediliyordu. rnein red veya #ff0000 olarak krmz renk, green veya #00ff00 olarak yeil renk, blue veya #0000ff olarak mavi renk ifade edilirdi. Bkz. Derste aldnz notlar.. <html> <head> <title>Web Sayfama Hogeldiniz</title> </head> <body background=zemin.jpg> sayfaya arkaplan resmi yerletirildi. </body> </html>
sayfann zemin rengini krmz (#ff0000) Sayfaya yazlan btn yazlarn rengini ise krmz + yeil (#ffff00) yapm olduk.
<body>..</body> TAGLARI ARASINA yazlan HTML TAGLARI

<h1>ABC</h1> <h2>ABC</h2> <h3>ABC</h3> <h4>ABC</h4> <h5>ABC</h5> <h6>ABC</h6> h1 iine yazlan metinler byk boyutlu olarak gsterilir.
h6, h1 e gre en kk metin
SAYFA 2 / 16
lk Satr <br> kinci Satr lk Satr <br><br> kinci Satr <hr> izgi oluturur.
bir satr aa iner (bir satr alta konumlandrr) iki satr aa iner (iki satr alta konumlandrr)
<hr width=50%> (sayfann %50 si kadarlk bir izgi) <marquee> Kayan yaz</marquee> <marquee direction=X>KAYAN METN</marquee> X (Kayma stili): right up down left <marquee bgcolor=X></marquee> X yerine renk ismi veya kodu verilebilir. Kayan yaznn zeminine zemin rengi atanm olur.
<marquee bgcolor=#ff0000>Kayan yaz</marquee> <p> : <br> : <b> : <i> : <u> : paragraf tag bir satr aa metni koyu(bold) yapmak iin kullanlan tag metni eik(italic) yapmak iin kullanlan tag metni altizili(underlile) yapmak iin kullanlan tag
rnek: <p>. ormanda gezen tilki kapana <u>yakalanm<u> kurtla <i>karlat.</i><br>Ona yle seslendi: <p> Hey! <b>Kurt karde</b>, rnein grn: . ormanda gezen tilki kapana yakalanm kurtla karlat. Ona yle seslendi: Hey! Kurt karde, Not:Hepsi bir arada yle kullanlmaldr(Bkz: derste aldnz notlar): (ilk alan son kapatlr, son alan nce kapatlr) rnek:<b><u><i>Kurt karde</i></u></b> <big>Tilki</big> <small>Tilki</small>
SAYFA 3 / 16
Metni bir derece bytr. Metni bir derece kltr.

X<sup>2</sup>+2X H<sub>2</sub>O <strike>st izili Metin</strike>
X2+2X H2 O st izili Metin ABC metninin yaztipi Times New Roman olur.
<font face=Times New Roman>ABC</font>
face parametresi yerine gelebilen baz yaz tipi adlar: Helvetica Courier Arial sans-serif Georgia comic sans ms <font size=2>Deneme metni</font> (yaznn bykl deiti)
Hem yaz tipi hem de yaz byklnn beraber kullanlmas <font face=courier size=2>Deneme metni</font> Bu kodlamay u ekilde de yapabilirdik: <font size=2 face=courier>Deneme metni</font> <font title=Aklama>Metin</font> Metin kelimesinin zerinde Mouse ile beklendiinde u ekilde grnt oluur: Metin1<font color=#ff0010>Metin2</font>Metin3 yalnzca Metin2 renklendirilmitir. Not: dokman banda body tagna text parametresi ekleyerek sayfann iine eklenmi olan btn metinlerin rengini deitirmitik. u an ise yalnzca belirli bir metnin rengini deitirdik.
Ordered List (Numaral Listeler) <ol>Karnyark iin gerekli malzemeler <li>4 adet patlcan <li>250gr kyma <li>Baharat <li> </ol>
Unordered List(Numarasz Listeler) <ul>Karnyark iin gerekli malzemeler <li>4 adet patlcan <li>250gr kyma <li>Baharat <li> </ul>
SAYFA 4 / 16
<ul>Karnyark iin gerekli malzemeler <li>4 adet patlcan <li>250gr kyma <li>Baharat <ul> <li>Karabiber <li>Kekik </ul> <li> </ul> <ul>Karnyark iin gerekli malzemeler <li type=disc>4 adet patlcan <li type=square>250gr kyma <li type=circle>Baharat <li>Son madde </ul> kt u ekilde olacaktr: disc: ii dolu daire eklinde madde iareti square: kare ii dolu eklinde madde iareti circle: ii bo ember eklinde daire iareti
Not: Numarasz listelerde (ul) her bir madde iareti olan listeler (li) iin type parametresi belirtilmezse type=disc olarak alglanr (Son maddede olduu gibi) <ol>Karnyark iin gerekli malzemeler <li type=A>4 adet patlcan <li type=A>250gr kyma <li type=A>Baharat <li> Tereya </ol>
A.4 adet patlcan B.250gr kyma C.Baharat 4.Tereya
Type parametresinin alabilecei deerler: A, a, I, i, 1 A ve a byk veya kk harfler ile madde iaretleri oluturur. I ve i byk ve kk roma rakamlar ile madde iaretleri oluturur. 1 ise saylar ile madde iaretleri oluturur. Not: Numaral listelerde (ol) her bir madde iareti olan listeler (li) iin type parametresi belirtilmezse type=1 olarak alglanr (Tereyada olduu gibi) <ol start=5> <li type=A>Birinci madde <li>kinci madde <ol start=10> <li> madde 1 <li type=i> madde 2 </ol> </ol>
SAYFA 5 / 16
Kprler: <a href=http://www.balikesir.edu.tr>BA</a> Genel anlamda kpr tag: <a href=GDLECEK_ADRES>TIKLANACAK_METN</a> <a name=ust">Sayfa Ba</a> (Word deki yer imi gibi) Haber metni<br> Haber metni<br> Haber metni<br> Haber metni<br> Sayfay taracak kadar ok sayda metin Haber metni<br> Haber metni<br> Yukar <a href="#ust">Git</a> (Yer iaretine gitme kprs) Hedefi yeni pencerede amak iin <a href=hedef.html target=_blank>a</a> Mail gndermek iin kullanlacak kprnn eklenmesi : <a href=mailto:ALICININ_MAL_ADRES>TIKLANACAK_METN</a> rnek: <a href=mailto:ashgkeorlsjmnvb@yahoo.com>TIKLA VE MAL GNDER</a> ZEL KARAKTERLER: <body></body> arasna eklenecek kod & < > " © ® <center>Ortalanm metin</center> SAYFADAK GRNM & < > tek bir boluk gstererir eridekini sayfaya gre ortalar
DV (KATMAN) <div align=left> Sola dayal metin </div> <div align=right> Saa metin </div> <div align=center> Ortal metin </div> SAYFA 6 / 16 IKTISI=>>
Sola dayal metin
Saa dayal metin
Ortal metin
Divi, iinde metin, resim gibi nesnelerin yerletirilecei bir kutucuk gibi dnebiliriz. Bu kutucuu kullanarak ierideki nesneyi sayfaya gre istediimiz gibi hizalayabiliriz. SAYFAYA RESM EKLEMEK: Daha nceden body tagna background parametresi ile sayfaya arkaplan resmi eklemitik. imdi resmi direkt sayfann iine ekliyoruz. <img src=RESM DOSYASI ADI ></img> <img src= resim.jpg></img> Bu kodun yazld html sayfasnn bulunduu yerdeki resim.jpg dosyas eklenmi olur. (Html sayfas ile resim ayn klasrde bulunuyor) <img src=B/resim.jpg></img> Bu kodun yazld html sayfasnn bulunduu yerdeki B isimli klasrn iinde bulunan resim.jpg dosyas eklenmi olur. (Resim, Html sayfas ile ayn konumda bulunan B klasr iinde bulunuyor) <img src=../resim.jpg></img> Bu kodun yazld html sayfasnn bulunduu yerin bir st dizininde bulunan resim.jpg dosyas eklenmi olur. (Resim, Html sayfasnn bulunduu konumun bir st dizininde bulunuyor) <img src=fotograf.bmp width=100 height=200></img> width ile genilik height ile ykseklik deeri ayarland. <img src=fotograf.bmp witdh=100 height=200 border=2></img> Resme 2piksel kalnlnda kenarlk eklendi. <img src=fotograf.bmp witdh=100 height=200 border=0 alt=ResimAklamas></img> Resme aklama eklendi. Resmin zerine gelip beklediinizde aklama kacaktr.
TABLOLAR: <table border=1> <tr> <td></td> satrn iine hcre ald </tr> </table> (Not: Uygulamada tabloyu rahat ekilde grmeniz iin aada olduu gibi hcre iine bir metin yazmalsnz) <table border=1> <tr> <td>Ali</td> </tr> </table> <table border=1> <tr> <td>Ali</td> <td>Kemal</td> </tr> </table>
SAYFA 7 / 16
SAYFA 8 / 16
SAYFA 9 / 16
SAYFA 10 / 16
Btn tabloya zemin rengi eklemek :

Baz renkler:
Sadece bir satra zemin rengi eklemek <table border=1> <tr bgcolor=Aqua> <td>Ali</td> <td>Kemal</td> </tr> <tr> <td>Veli</td> <td>ahin</td> </tr> </table> Sadece bir hcreye zemin rengi eklemek <table border=1> <tr> <td>Ali</td> <td bgcolor=Aqua>Kemal</td> </tr> <tr> <td>Veli</td> <td>ahin</td> </tr> </table>
ilk satr boyand
Kemal hcresi boyand
Ayn bgcolor parametresi <tr> veya <td> iin de geerlidir. <table bgcolor=silver> <tr> <td>Zemini gm renk ile boyanm hcre</td> </tr> </table> Tablo ereve rengi <table bgcolor=silver bordercolor=red> <tr> <td>erevesi krmz zemini silver(gm) renkli tablo</td> </tr> </table>
SAYFA 11 / 16
Formlar:
<form action=VERLER_KARILAYACAK_SAYFANIN_ADI rnein degerlendir.php gibi" method=bu ksma POST veya GET yazlmaldr> BU KISIM BRAZDAN DOLDURULACAK. </form> Bu bilgiye gre rnek form alan oluturalm: <form action=karsila.php method=POST> </form> Method deeri POST ya da GET deerinden birisi olmaldr. Post kullanldnda, kutucuk ve nesnelerin gnderdii deiken isimleri ve deerleri adres ubuunda grntlenmemektedir. Get kullanldnda, kutucuk ve nesnelerin gnderdii deiken isimleri ve deerleri adres ubuunda grntlenir. <form action=HEDEFSAYFA" method=X> <input type=submit> <input type=reset> </form> INPUT KUTUCUKLARI <input type=X> X yerine yazlabilecek INPUT tipleri: Checkbox File Password Radio Reset Submit Text <form action="HEDEFSAYFA" method=post> <input type="text" name="ad"><br> <input type="submit" value="GONDER"> <input type="reset"> Not: reset tipli elemana value=SL yazsaydk Yukarda </form> ekildeki zerinde Sfrla yazan buton zerinde Sfrla deil SL yazard. name, burada text kutucuuna isim verdi. sim olarak ad deeri atand. Kutucua girilen deer ad ismi (deikeni) ile hedef sayfaya gnderilmi olacaktr. <form action="HEDEFSAYFA" method=post> <input type="text" name="ad" value=sminizi giriniz><br> <input type="submit" value="GONDER"> <input type="reset"> </form> lk deer olarak sminizi giriniz metni yerletirildi. stenirse silinip baka metin yazlabilir.
SAYFA 12 / 16
<form action="HEDEFSAYFA" method=post> <input type="text" name="ad" maxlength=3><br> <input type="submit" value="GONDER"> <input type="reset"> </form> Kutucua maksimum 3 karakter girilebilir. <form action="HEDEFSAYFA" method=post> <input type="text" name="ad" disabled><br> <input type="submit" value="GONDER"> <input type="reset"> </form> Kutucua artk metin girilemez. Adnz : <input type=text name=ad disabled maxlength=3 title=Adnz Giriniz>
<form action="HEDEFSAYFA" method=post> <input type="text" name="ad" title="sminizi giriniz"><br> <input type=checkbox name=sec1>Seenek1 <input type="submit" value="GONDER"> <input type="reset"> </form> <form action="HEDEFSAYFA" method=post> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name=sec1 value=Se1 checked>Seenek1<br> <input type="checkbox" name=sec2 value=Se2>Seenek2<br> <input type="submit" value="GONDER"> <input type="reset"> </form> <form action="HEDEFSAYFA" method=post> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name="sec1" value="Se1" checked>Seenek1<br> <input type="checkbox" name="sec1" value="Se2">Seenek2<br> <input type="radio" name="cinsiyet" value="E" checked>Erkek <input type="radio" name="cinsiyet" value="B">Bayan<br> <input type="submit" value="GONDER"> <input type="reset"> </form>
SAYFA 13 / 16
<form action="HEDEFSAYFA" method=post> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name="sec1" value="Se1" checked>Seenek1<br> <input type="checkbox" name="sec1" value="Se2">Seenek2<br> <input type="radio" name="cinsiyet" value="E">Erkek <input type="radio" name="cinsiyet" value="B" checked>Bayan<br> <select name="memleket"> <option value="stanbul">st <option value="stanbul">zm <option value="stanbul" selected>Ank selected parametresi bu rnekte, stanbul deil Ankarann seili </select> gelmesini salad. <input type="submit" value="GONDER"> <input type="reset"> </form> Ank seilince form sayfada
yle grnmeye balar:
<form action="HEDEFSAYFA" method="post"> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name="sec1" value="Se1" checked>Seenek1<br> <input type="checkbox" name="sec1" value="Se2">Seenek2<br> <input type="radio" name="cinsiyet" value="E">Erkek <input type="radio" name="cinsiyet" value="B" checked>Bayan<br> <select name="memleket"> <option value="stanbul">st <option value="stanbul">zm <option value="stanbul" selected>Ank </select> <br> <textarea rows="10" cols="40" name=gorusler> MetinGiriniz </textarea> <br> <input type="submit" value="GONDER"> <input type="reset"> </form>
Textarea iin rows parametresi satr adedini, cols ise stun geniliini belirler.
SAYFA 14 / 16
<form action="HEDEFSAYFA" method="post"> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name="sec1" value="Se1" checked>Seenek1<br> <input type="checkbox" name="sec1" value="Se2">Seenek2<br> <input type="radio" name="cinsiyet" value="E">Erkek <input type="radio" name="cinsiyet" value="B" checked>Bayan<br> <select name="memleket"> <option value="stanbul">st <option value="stanbul">zm <option value="stanbul" selected>Ank </select> <br> <textarea rows="10" cols="40">MetinGiriniz</textarea> <br> <input type="file" name="dosya"><br> <input type="submit" value="GONDER"> <input type="reset"> </form> file tipindeki input, forma gz at ve solundaki kk kutuyu ekledi. Bylelikle bir dosyay gsterip onu da form araclyla gnderebiliriz. <form action="HEDEFSAYFA" method="post"> <input type="text" name="ad" title="sminizi giriniz"><br> <input type="checkbox" name="sec1" value="Se1" checked>Seenek1<br> <input type="checkbox" name="sec1" value="Se2">Seenek2<br> <input type="radio" name="cinsiyet" value="E">Erkek <input type="radio" name="cinsiyet" value="B" checked>Bayan<br> <select name="memleket"> <option value="stanbul">st <option value="stanbul">zm <option value="stanbul" selected>Ank </select> <br> <textarea rows="10" cols="40">MetinGiriniz</textarea> <br> <input type="file" name="dosya"><br> ifre: <input type="password"><br> <input type="submit" value="GONDER"> <input type="reset"> </form>
HEDEFSAYFA ksmnda sizin tasarmnza bal olarak kuracanz Web sitenizde bulunan ve bu form verilerini deerlendirme kabiliyetinde olan dinamik bir internet sayfasnn ad olabilir. (Bu, uanki dersimizin konusu olmayp mevcut bilginizin zerine aratrp renmeniz gereken bir seviye st bilgidir) = = FORMLAR KONUSU BTT = =
SAYFA 15 / 16
Sayfaya eklenebilecek dier unsurlar <embed src="01.mp3"> <embed src="02.mpeg">
Sayfaya bir video ya da ses dosyas ekleyebilirsiniz. lk rnek mp3 formatnda ses, ikinci rnek mpeg formatnda grntdr. = = DOKMAN SONU = = Baarlar Dilerim.
SAYFA 16 / 16

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

2008-2009 BAHAR YARIYILI HTML DERS NOTLARI

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

<body>..</body> TAGLARI ARASINA yazlan HTML TAGLARI

h6, h1 e gre en kk metin

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Metni bir derece bytr. Metni bir derece kltr.

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

X<sup>2</sup>+2X H<sub>2</sub>O <strike>st izili Metin</strike>

<font face=Times New Roman>ABC</font>

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

A.4 adet patlcan B.250gr kyma C.Baharat 4.Tereya

Sola dayal metin

Saa dayal metin

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Btn tabloya zemin rengi eklemek :

ilk satr boyand

Kemal hcresi boyand

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

yle grnmeye balar:

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

Sayfaya eklenebilecek dier unsurlar <embed src="01.mp3"> <embed src="02.mpeg">

Hazrlayan: Mustafa ETN Balkesir niversitesi Enformatik Blm

Bu dkman http://donanim.balikesir.edu.tr/~mustafa/index.php?secim=duyurular adresinde HTML notlar ksmndan indirebilirsiniz.

You might also like