HTML Ders Notlar. Bu temel kodlar gördükten sonra isterseniz bir HTML sayfasnn genel yapsna göz atalm. <html> <head> <title> <title> </head>

Transkript

1 S HTML Ders Notlar izlere bu notlarla web sayfas yapm hakknda ksa bir fikir vermeye çel!aca#m. Öncelikli olarak bir web sayfasnn yani uzantsn HTML (Hyper Text Markup Language)olan bir sayfann çal!ma mant#na göz atalm.html dilinde yazlm! kodlar servis sa#laycsnn sunucusuna(server) yüklersiniz (Upload). Bu sunucuda yaynlanan web sayfamz sitemize gelen ziyaretçilerin browserlar tarafndan kodlar yorumlanr ve böylece ziyaretçi bizim sayfamz görmü! olur. HTML diliyle baz i!lemleri yapabilece#imiz gibi bazlarn ise yapamayz.mesela metin biçimlendirme, liste, ba#lantlar, resim kullanma, tablolar, çerçeveler ve forumlar yapabilirken etkile!imli ve olaylara duyarl sayfalar, formlar i!leyip de#erlendiren sayfalar yapamayz. Bir web sayfas yapmak için tek gereken onu nasl tasarlayaca#mz bilmektir.e#er bu i!i kod kullanmadan yapacaksanz Frontpage, Dreamweaver vs programlar kullanabilirsiniz.ama ben bu i!i kodlarla yapaca#m diyorsanz size tek gereken herhangi bir metin editörü(metin editörü olarak Windows ta NOTEPAD i kullanbilirsiniz).7imdi gelelim temel kodlar tanmaya: <title> </title> Bu kod browsera HTML belgesinin ba!lad# ve biti#i yeri bildirir.bütün di#er kodlar bu iki kod arasna yazlr HTML belgesinin ilk bölümüdür.bu bölüme yazlanlar metin olarak ekranda gözükmez. Head bölümü içine yazlan Title kodu sayfann ba!l#nn yazld# bölümdür. HTML belgesinin bütün içeri#i bu kodlar arasna yazlr. Bu temel kodlar gördükten sonra isterseniz bir HTML sayfasnn genel yapsna göz atalm. <title> <title> Bu temel yapy kavradktan sonra basit bir sayfa yapabiliriz. <title>deneme Sayfas</title> Bu bir deneme sayfasdr Yukarda gördü#ünü kodlar metin editörüne yazp deneme.html adyla kaydedersek ve bu deneme.html dosyasn çal!trrsak ekrana a!a#daki gibi Bu bir deneme sayfasdr yazl bir sayfa gelecektir

2 METN BÇMLENDRME ETKETLER: HTML sayfasnn temel unsurlarn ö#rendikten sonra,artk i!in inceliklerine inebiliriz.?lk olarak yazd#mz metinleri!ekillendirmeye bakalm.a!a#daki tabloda yer alan etiketleri bilmemiz bu konuda bize çok kolaylk sa#layacaktr. <h1> </h1> Balk <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <b> </b> <i> </i> <u> </u> <p> </p> <br> Balk Balk Balk Ba!lk Balk Yazlar koyu yapar Yazlarnz italik karakter yapar Yazlarnza alt çizgi koyar Paragraf etiketi yapar. Paragrafnzn altna ve üstüne bo!luk koyar. Satrba! yapar. 7imdi yukarda ö#rendiklerimizi bir örnek ile uygulayalm. <title>metin Biçimlendirme</title> HTML size metin biçimlendirme konusunda geni! olanaklar sa#lar.metinleri ister <h1>kocaman</h1> ister <h6>küçücük</h6> isterseniz <b>koyu</b>, <i>italik </i> veya <u>altyazl</u> yazabilirsiniz.yada satrba! yapabilir <br> veya <p> paragraf olu!turabilirsiniz </p> <\body> <\html> FONT TAGI: Metin biçimlendirmek için yukarda gördü#ümüz etiketler d!nda biraz sonra görece#imiz <font> </font> etiketi de kullanlr. Font etiketi sahip oldu#u parametreler sayesinde metinlerin renk,yaz tipi,boyut gibi özelliklerini de#i!tirmenize yardmc olur.?sterseniz bu etikette geçmeden önce renklerden ksaca bahsetmek yerinde olur. HTML de renkler hexdecimal formunda ifade edilir Bir renk 16'lk say düzeninde 6 rakamdan olu!ur ve Bu düzende 9'dan sonraki say1ar göstermek için 'A'dan 'F'ye kadar olan harfler kullanlr. Bununla birlikte HTML baz renklerin?ngilizce isimlerini anlar; a!a#daki örnekte bu renkleri görmektesiniz

3 Green=Ye!il Black=Siyah Blue=Mavi Red=Krmz Yellow=Sar Orange=Turuncu Burada görülen renkler hexdecimal cinsinden de ifade edilebilir: Örne#in #FFFFFF beyaz,# siyah. Renkleri ksaca tandktan sonra artk asl konumuza geçebiliriz.html belgesinin body bölümüne yazd#mz metni <font></font> etiketleri arasna alarak bu metne etiketin a!a#da da listelenen parametreleri do#rultusunda baz özellikler kazandrabiliriz Color hexdecimal veya rengin?ngilizce ismi de#erini alr Face Yaz türünün ismi de#erini alr Size 1 ile 7 arasnda istenilen de#eri alr 7imdi bu parametreleri bir örnekte kullanalm: <title>font kullanm</title> Font etiketinin color parametresini kullanarak <font color="#ff0000">renkli</font> <font color="blue">yaz1lar</font> <font color="#00ff00">yazabilir</font>;<p> de#i!ik yaz karakterleri kullanabilirsiniz: <font face="verdana">mesela öyle!</font><p> Hatta yazlarnz <font size="+6"> büyütüp</font> <font size="-1"> Küçültebilirsiniz</font> A!a#daki ekran görüntüsünde de yukardaki örne#in nasl çal!t#n görebilirsiniz. ARKA PLAN ve BODY ETKET: Web sayfasnn içeri#e yaz yazmay ö#rendikten sonra isterseniz web sayfalarmzn arka planlarn renklendirmeye geçelim. HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün ba!lad#n browser'a etiketiyle bildirdi#imizi biliyoruz. Bir etiketin herhangi bir parametresine atad#mz de#er, o etiketin olu!turdu#u alan içerisinde geçerlidir.yani gibi etiketinin parametrelerine verilen de#erler, bütün sayfa için geçerlidir.a!a#da bu parametreleri ve kullanl!larn görüyorsunuz. bgcolor Sayfanzn arka plannn rengini belirler Arka plana.gif,.jpg gibi HTML'in yorumlayabildi#i bir resim background dosyas koymanz sa#lar text Sayfanzdaki metinlerin rengini belirler <body bgcolor= blue > Sayfamzn arka plann mavi yapar. <body background= c:\belgelerim\resim.jpg > Sayfamzn arka planna resim.jpg isimli dosyann içeri#i ta!r. RESMLER ve IMG ETKET: Bir web sayfasnda do#ru ve yerinde kullanldklarnda sayfaya estetik açsndan çok!eyler katarlar. fakat büyük boyutlar nedeniyle yava! yüklenirler.bu da ziyaretçinin sklmasna,hatta sayfay terk etmesine neden olabilir.bu - 3 -

4 nedenle, en azndan Internet ba#lantlar daha hzl oluncaya kadar, resimleri 'az ve öz' kullanmanz do#ru olacaktr.resimler <img> etiketi aracl#yla kullanlrlar.a!a#da bu etiketin parametrelerini görüyorsunuz. src Resmin bulundu#u dizini bu parametre ile bildiririz width Resmin geni!li#ini piksel cinsinden bildirir height Ayn!ekilde resmin yüksekli#ini bildirir border Resmin etrafndaki çizginin kalnl#n belirtir. align Yatay konum belirler;left,right,center de#erlerini alr. alt Mouse resmin üzerindeyken yazaca#nz meni gösterir <img src="deneme.gif" border="6" align="left alt= left > BA#LANTILAR: Web sayfalarmzn içeriksel ksmn bitirdi#imize göre!imdi web sayfalarnda en çok kullanlan unsurlardan biri ba#lantlara (Hyperlink)geçebiliriz.Ba#lantlar ziyaretçinin bir tklama ile, sitenizin içinde veya d!nda, belirledi#iniz herhangi bir adrese gitmesini sa#lar.ba#lantlar browser'a <a> etiketi ile bildirilir. href target Ba#lantnn adresi bu parametreyle bildirilir Sayfann açlaca# yeri belirler.target parametresi,açlacak sayfa yeni bir sayfa olarak açlacaksa'_blank',ayn pencere içinde açlacaksa '_self',ayn pencerere içerisinde üstten itibaren açlacaksa '_top' de#erini alr. <a href= target= blank > Sayfa Ad </a> Sayfamzda yukardaki sayfa görüntüsünde oldu#u gibi Sayfa Ad adnda Internet sitesine ba#l bir yaz yazar.bu ba#lantya tklad#mzda Sayfaadi.com sitesi yeni bir pencerede açlr. Ba#lantlar konusuna girmeden sayfamza nasl resim ekleyece#imizi görmü!tük.7imdi bu resimleri nasl bir ba#lant haline getirebiliriz bunu görelim.a!a#daki örne#i yazd#nzda, üzerine tklannca istedi#iniz bir adrese yeni pencere açan bir resim elde edersiniz. <a href= target="blank"> <img src="deneme.gif" ></a> TABLOLAR: Metinleri listelerin yansra tablolar yardmyla da düzenleyebiliriz. Sörf yaparken rastlad#nz sayfalar ço#unlukla iç içe geçmi! tablolardan olu!ur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir. Tablolar <table>...</table> etiketleri arasna yazlr.<tr> etiketi bir yatay sra olu!turulur, bu yatay sra istenilen sayda <td> etiketiyle hücrelere bölünür.a!a#daki örne#e bakarak tablo mant#n anlayabilirsiniz < table> Hücre1 Hücre2 Hücre3 <table border="1"> <tr> <td >Hücre1</td> <td >Hücre2</td> - 4 -

5 Hücre4 Hücre5 Hücre6 <TD< td> bgcolor background border bordercolor bordercolorlight bordercolordark align cellspacing cellpadding <td >Hücre3</td> </tr> <tr> <td>hücre4</td> <td>hücre5</td> <td>hücre6</td> </tr> </table> Hücrenin içinin rengini belirler. Hücre içine resim koyar. Hücre etrafna yerle!tirece#iniz çerçevenin kalnl#n belirler Çerçeve rengini belirler Çerçevenin sol ve üst kenarlarnn rengini belirler Çerçevenin sa# ve alt kenarlarnn rengini belirler. Hücrenin yatay konumu belirler Hücre etrafndaki çerçevenin kalnl#n belirler. Hücre içindeki elemanlarn (metin, resim, vs.) çerçeveden uzakl#n belirler. <title>bu bir table denemesidir</title> <table width= 250 height= 250 bgcolor= #ffffff border= 2 bordercolor= 5 bordercolrlight= aqua bordercolordark= blue align= left cellapacing= 2 cellpadding= 2 > <tr> <td align= center >hücre</td> </tr> </table> ÇERÇEVELER (FRAME): Çerçeve tekni#i, bir web sayfasn istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekni#in en çok kullanlan varyasyonu, sayfann sol veya üst ksmndan küçük bir alan bölmek (yani sayfay ikiye bölmek), bu küçük alana menü bilgilerini, di#er büyük alana ise sayfann asl içeri#ini yerle!tirmektir

6 Fakat!unu da belirtmekte fayda var, birçok tasarmc estetik açsndan çerçevelere pek scak bakmaz; genelde üst üste tablolar kullanmay tercih eder. Yine de pek sk kullanlmayan bu tekni#i aklnzn bir yerinde tutun, belki faydal olabilir. Çerçeve tekni#inde, ilk önce parent(ana) frame denilen bir sayfa olu!turmak gerekir. <Frameset>... etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfay dikey ve yatay olarak ne oranda bölmek istedi#imizi browser'a bildiririz. Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfalarn adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdi#imiz sayfalar uygun bir!ekilde hazrlamak kalr. 7imdi bu kar!k ifadeyi a!a#daki örnekle daha iyi anlayalm, sonra da <frameset> etiketini inceleyelim. <title>çerçeveörne#i</title> <frameset cols="150,*"> <frame name="menu" src="menu.html"> <frame name="esas" src="esas.html"> <noframes> <h1>browser'nzn sürümü sayfamz görüntülemeye uygun degil, lütfen daha yeni bir sürüm yükleyip tekrar deneyin!</h1> </noframes> Burada yapt#mz!ey ana sayfay soldan 150 piksel geni!li#inde bölüp iki sayfa elde etmekten ibaret. Ayrca browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci bölüme ise 'esas.html' sayfalarn yerle!tirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset> etiketinin ile etiketleri arasna yerle!tirilmesidir. <Noframes>...</noframes> etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. 7imdi a!a#daki kodlardan ilkini 'menu.html', ikincisini ise 'esas.html' adyla ana pencereyi kaydetti#iniz dizine kaydedin. Menu.html <title>menu</title> <body bgcolor="teal"> Esas.html <title>esas</title> <body bgcolor="red"> Son olarak tekrar ana sayfay açt#nzda (ismi önemli de#il, yeter ki di#er iki sayfa ile ayn dizinde bulunsun!) sonuç a!a#daki gibi olacaktr: - 6 -

7 A!a#da <frameset> etiketinin parametrelerini görüyorsunuz : Rows Cols Safay enine bölmenizi sa#lar Sayfay boyuna bölmenizi sa#lar <frameset rows="150,*"> <frame name="menu" src="menu.html"> <frame name="esas" src="esas.html"> <frameset cols="150,*"> <frame name="menu" src="menu.html"> <frame name="esas" src="esas.html"> cols ve rows parametreleri piksel de#eri alabilecekleri gibi '%' cinsinden de de#er alabilirler, örne#in: <frameset cols="%20,%80"> Daha önce kulland#mz '*' ifadesi ile bölünecek alann geni!li#ini browser'a brakabiliriz: <frameset cols="%20,*"> Son olarak sayfay üçe veya daha fazlaya da bö!ebiliriz: <frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz. frameborder Border Ana sayfann bölümleri arasnda snr çizgisi olup olmamassn belirler.('yes', 'no'; veya '1', '0' de#erlerini alr) Çerçeveler arasndaki snrn kalnl#n piksel cinsinden belirler. <frameset cols="150,*" frameborder="1"> <frame name="menu" src="menu.html"> <frame name="esas" src="esas.html"> <frameset cols="150,*" border="10"> <frame name="menu" src="menu.html"> <frame name="esas" src="esas.html"> 7imdi de <frame>; etiketinin parametreleri: Src marginwidth marginheight Noresize Scrolling Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfann yeri Sayfann solundaki kenar bo!lu#unu belirtir Sayfann üstündeki kenar bo!lu#unu belirtir '1' veya '0' de#erlerini alr, '1' verilirse pencere boyutlar sabitlenir. 'yes', 'no', 'auto' de#erlerini alr, kaydrma çubuklarnn durumunu belirler. Çerçevelerle çal!maya ba!lamadan önce bilmeniz gereken önemli bir nokta: Hatrlarsanz ba#lantlar konusunda <a> etiketinin target isimli bir parametresi oldu#undan ve bu parametrenin 'Çerçevead' de#erini alabilece#inden bahsetmi!tik. Bu parametre bize ba#lantnn belirtti#i adresdeki sayfann adn verdi#imiz çerçeve içinde açlmasn sa#lar.?sterseniz bunu bir örnekte görelim. Bu sayfay index.htm adyla kaydedin Bu sayfay menu.htm adyla kaydedin - 7 -

8 <title>çerçeveörne#i</title> <frameset cols="150,*"> <frame name="menu" src="menu.htm"> <frame name="ana" src="esas.html"> <noframes> <h1>browser'nzn sürümü sayfamz görüntülemeye uygun degil, lütfen daha yeni bir sürüm yükleyip tekrar deneyin!</h1> </noframes> Bu sayfay esas.htm adyla kaydedin <title>ana</title> <body bgcolor="red"> <title>menu</title> <body bgcolor="teal"> Lütfen örne#i görmek istiyorsanz <a href= link.htm target= ana >tklayn</a> Bu sayfay da link.htm adyla kaydedin <title>menu</title> <body bgcolor="yellow"> <h1>bu sayfaya menu.htm sayfasndaki linke tklayarak krmz sayfamzn(ana çerçevesinde) yerine bu sayfa açlm!tr.</h1> Yukardaki örne#in ekran çkts a!a#daki gibi olacaktr. Ye!il Sayfadaki Linke Tklamadan Önce Ye!il Sayfadaki Linke Tkladktan Sonra FORMLAR: Formlar bize HTML kullanarak sayfanz ziyaret edenlerle temas kurmanz sa#larlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görü!lerini alabiliriz; veya hazrlayaca#mz bir formla ziyaretçilerden ki!isel bilgilerini isteyebiliriz. Formlar... etiketleri arasna yazlrlar. Bu etiketin parametrelerini ö#renmeden önce form türlerine bir göz atalm. FORM TÜRLER: - 8 -

9 A!a#da form türlerini ve kullanl!larn görüyoruz.: maxlength: Yazlabilecek maksimum text uzunlu#u text value: varsaylan de#er size: Px cinsinden alann uzunlu#u <input type="text"> Ziyaretçinin ismi, telefonu gibi ksa bilgilerini almak için kullanlr. password Tüm parametrleri text ile ayndr. <input type="password"> 7ifre almak için kullanlr, yazlan karakterler ekranda '*'!eklinde görüntülenir textaraea rows : Alann karakter cinsinden yüksekli#i cols : Alann geni!li#i <input type="text" maxlength="10" size="12" value="?sminiz?" Lütfen!ifre girin:<br> <input type="password" maxlength="10" size="12"> <textarea cols="12" rows="4">buras bir textarea!</textarea> <textarea >...</textarea> Text kutusuna s#mayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili dü!üncelerini almak için kullanlr. <input type="checkbox" checked: sayfa açld#nda 'checked' checkbox checked>seçenek 1 ibaresi bulunan kutu i!aretli olur. <input type="checkbox">seçenek 2 <input type="checkbox> Ziyaretçiye, verilen seçeneklerden birini, birkaçn veya hepsini seçme imkan verir. Radio checked: sayfa açld#nda 'checked' ibaresi bulunan daire seçilmi! olur. <input type="radio"> Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkan verir. size: Select etiketinin karakter cinsinden boyutu selected: Görevi checked ifadesinin select ayndr. multiple: Ziyaretçinin birden çok seçim yapmasna olanak verir <select><option>...<option>...</select> Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçn seçme imkan verir. submit value: Butonun üzerine yazlacak metin buraya yazlr <input type="submit> Ziyaretçi doldurdu#u formu bu dü#meye basarak gönderir reset value: Butonun üzerindeki metin <input type="reset" > Ziyaretçinin doldurdu#u formda, ziyaretçinin yazd# her!eyi siler. button value: Butonun üzerindeki metin <input type="radio" name=sec">seçenek1<br> <input type="radio" name= "sec"checked>seçenek2<br> <input type="radio" name="sec">seçenek2 <select size= "1"> <option selected>seçenek1 <option>seçenek2 <option>seçenek3 </select> <input type="submit" value="gönder"> <input type="reset" value="sil">

10 <input type="button> Dü#melere JavaScript ile baz i!levler kazandrlabilir. <input type="button" value="dü#me"> <FORM> ETKET:?!te etiketinin parametreleri ve bunlarn i!levleri: method <form method= "post> 'Get' veya 'post' de#erlerini alabilir. Method parametresinin de#eri formu gönderece#iniz CGI program açsndan önemlidir. E#er CGI kodlar yazmay bilmiyorsanz, birçok servis sa#layc size form'larnzn sonuçlarn 'inize gönderme imkan verir. E#er böyle bir hizmetten yararlanacaksanz 'post' metodunu seçmelisiniz. Formu gönderece#iniz CGI programnn adresini action parametresiyle bildirirsiniz. E#er action yukarda bahsedilen hizmetten yararlanmak istiyorsanz, servis sa#laycnzdan bu programn adresini ö#renmelisiniz. Örne#in bu adres 'freeservers' için '/cgi-bin/cgi ' 'dir. <form method="post" action= "/cgi-bin/cgi "> Yukardaki kodlar kullanarak bir örnek yapalm. <title>asd</title> <form method="post" action="aa.asp"> <h3>html dersini nasl buldunuz</h3> <br>adnz <input type="text" maxlength="12" size="12" value"=adnz"> <br>7ifre <input type="password" maxlength="6" size="6"> <br>cinsiyetiniz <input type="checkbox" checked>erkek <input type="checkbox">kadn <br>seçiminiz <br> <input type="radio" name="oy" checked>mükembel <br> <input type="radio" name="oy">?yi <br> <input type="radio" name="oy">fena De#il <br> <input type="radio" name="oy">berbat <br> <input type="radio" name="oy">fikrim Yok <br>görü!leriniz <br> <textarea rows="10" cols="30">lütfen fikrinizi girin</textarea> <br>lütfen bölümünüzü seçin <br> <select size="1"> <option selected>bilgisayar Müh <option>elektronik Müh <option>deri Müh <option>di#er </option></select> <br><input type="submit" value="kaydet"> <input type="reset" value="temizle"> Yukardaki örne#in ekran çkts a!a#daki gibi olur

11 Evet arkada!lar HTML dersimizin tüm konular bu kadar. Bu derste ö#rendiklerinizle sizlerde kendinize istedi#iniz gibi bir web sayfas yapabilirsiniz.ama!unu unutmayn ki tek ba!na HTML sizi ancak pasif sayfalar yapabilirsiniz. Daha aktif daha olaylara duyarl sayfalar yapmak istiyorsanz di#er web tasarlama dillerinden en az bir tanesini daha ö#renmezin gerekecektir.bunlarn en ba!nda ise JavaScriptler gelmektedir. Günümüz Türkiye sine bakt#mz zaman birçok firma web tasarlamak konusunda sadece HTML bilgisine de#il ASP veya PHP bilgilerinin de olup olmad#na bakmaktadr. E#er bir web tasarmcs olmak istiyorsanz yukarda bahsedilen dillerden en az birini daha bilmeniz sizin aleyhinize olacaktr. Sizlere bu konuda ba!arlar dilerim