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

Save this PDF as:
 WORD  PNG  TXT  JPG

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "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

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

Note: If you want to validate a page containing frames, be sure the DTD is set to Frameset DTD. Read more about XHTML Validation. FRAME Tagı Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla

Detaylı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer

Detaylı

HTML (Hyper Text Markup Language) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

HTML (Hyper Text Markup Language) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 1 HTML (Hyper Text Markup Language) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir. Eğer bu işi kod kullanmadan yapacaksanız Frontpage,

Detaylı

<html> <head> </head> <body> </body> </html> METİN BİÇİMLENDİRME ETİKETLERİ Şimdi yukarıda öğrendiklerimizi bir örnek ile uygulayalım.

<html> <head> </head> <body> </body> </html> METİN BİÇİMLENDİRME ETİKETLERİ Şimdi yukarıda öğrendiklerimizi bir örnek ile uygulayalım. WEB TASARIMI-1 DERSİ Internet WEB TASARIMI-1 Programcılığı DERSİ -1 Dersi Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir.eğer bu işi kod kullanmadan yapacaksanız Frontpage,

Detaylı

HTML WEB TASARIMI-1 DERSİ

HTML WEB TASARIMI-1 DERSİ WEB TASARIMI-1 DERSİ HTML Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir.eğer bu işi kod kullanmadan yapacaksanız Frontpage, Dreamweaver vs programları kullanabilirsiniz.ama

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

Ö RENME FAAL YET -1 1. DOSYALAMA LEMLER AMAÇ ARA TIRMA. 1.1. Genel Bilgiler

Ö RENME FAAL YET -1 1. DOSYALAMA LEMLER AMAÇ ARA TIRMA. 1.1. Genel Bilgiler ÖRENME FAALYET-1 AMAÇ ÖRENME FAALYET-1 Bu faaliyette verilen bilgiler dorultusunda, sunu hazrlama programlarnda kullanlan temel dosya ilemlerini (sunu açma-kapatma-kaydetme-düzenleme) yapabileceksiniz.

Detaylı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

Bölüm 4 Button 4.1 Button Nedir? Button (dü me), tkinter içinde bir snftr; ba³ka bir deyi³le bir widget'tir. Üstelik, Button, öteki GUI araç çantalarnn hemen hepsinde ayn ad ile var olan standart bir widget'tir.

Detaylı

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals The European Union s Making the Labour Market more Inclusive III programme For North Cyprus Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals Module

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. > 1) Tüm kodlar bunun arasında çalışır. 2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. 3) Sayfa gövde kısmıdır. Renkler, yazılar

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML Formları Temel Başlıklar HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML/WWW veri paylaşımı üzerine kurulmuştur. Html işaretleme dilidir. Diğer içerikler ile bağlantılar (linkler)

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 482BK0153 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

HTML (Hyper Text Markum Language)

HTML (Hyper Text Markum Language) HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin

Detaylı

Web Teknolojileri ve Programla

Web Teknolojileri ve Programla Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir?

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page vii Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? 6 Web Taray c (Browser)

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

Temel HTML Eğitimi. Erman Yükseltürk

Temel HTML Eğitimi. Erman Yükseltürk Temel HTML Eğitimi Erman Yükseltürk HTML Nedir? 1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

İnternet Programcılığı

İnternet Programcılığı İnternet Programcılığı 1 Öğr.Gör. Fırat YÜCEL Akdeniz Üniversitesi Enformatik Bölümü Kaynak H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002 2 Web

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI. KONU 12 Sıralı Liste

BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI. KONU 12 Sıralı Liste BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI KONU 12 Sıralı Liste Sıralı Liste nasıl yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

Detaylı

TEMEL HTML DERS NOTLARI - Table-Form

TEMEL HTML DERS NOTLARI - Table-Form Tablolar ... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir.

Detaylı

INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 3. HAFTA HTML KOMUTLARI. KONU 12 Sıralı Liste

INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 3. HAFTA HTML KOMUTLARI. KONU 12 Sıralı Liste INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 3. HAFTA HTML KOMUTLARI KONU 12 Sıralı Liste Sıralı Liste nasıl yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik

Detaylı

HTML Ders Notları.

HTML Ders Notları. HTML Ders Notları HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin bir web sayfası

Detaylı

21 BÖLÜMDE WEB SĐTE YAPIN!

21 BÖLÜMDE WEB SĐTE YAPIN! 21 BÖLÜMDE WEB SĐTE YAPIN! Yazan: Emin Yılmaz Üçer Önsöz Zor ve zahmetli bir iş olarak görünen web site yapımını sizler için en kolay şekliyle anlatmaya çalıştım. Örneklerimi resimlendirerek sıkıcı sayfa

Detaylı

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için HTML Ders 8 Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için Web sayfasının bu kısmında kayan çerçeve

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

WEB TASARIMI VE PROGRAMLAMA

WEB TASARIMI VE PROGRAMLAMA WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ

Detaylı

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM

Detaylı

HTML' e Giriş. Windows kullanıyorsanız Notepad'i, Macintosh kullanıyorsanız SimpleText'i çalıştırın.

HTML' e Giriş. Windows kullanıyorsanız Notepad'i, Macintosh kullanıyorsanız SimpleText'i çalıştırın. HTML Dersleri HTML' e Giriş Html Nedir? HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer

Detaylı

WEB TASARIMI VE PROGRAMLAMA DERSİ

WEB TASARIMI VE PROGRAMLAMA DERSİ WEB TASARIMI VE PROGRAMLAMA DERSİ Dersin Modülleri HTML 1 HTML 2 Web Tasarım Editörü 1 Web Tasarım Editörü 2 Web Tasarım Editörü 3 Web Tasarım Editörü 4 Etkileşimli Web Uygulamaları 1 Etkileşimli Web Uygulamaları

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir?

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? ÇALIŞMA SORULARI 1. HTML nedir? a) Sayfa içindeki metinlerin tarayıcıda nasıl görüneceğini ve işlevsel olacağını düzenleyen işaret dilidir. b) Diğer sayfaları bağlayan linkler c) Nesneyi bağlayan linkler

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

Temel Kavramlar Açklamak. Bir HTML Belgesinin Mantksal ve Fiziksel Yapsn Açklamak. Web Tasarm ve Web Yayncl!"lemlerini Açklamak.

Temel Kavramlar Açklamak. Bir HTML Belgesinin Mantksal ve Fiziksel Yapsn Açklamak. Web Tasarm ve Web Yayncl!lemlerini Açklamak. Hafta 1: Temel Bilgiler Amaçlar: Temel Kavramlar Açklamak. Bir HTML Belgesinin Mantksal ve Fiziksel Yapsn Açklamak. Web Tasarm ve Web Yayncl!"lemlerini Açklamak. I. HTML Nedir? Her gün belki birkaç belki

Detaylı

PHP ile İnternet Programlama

PHP ile İnternet Programlama PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 3. BÖLÜM: Formlarla Çalışmak HTML Formlarının Temelleri Dinamik etkileşim

Detaylı

Excel Sorular? 1. Excel Sorular? 1. A Grubu

Excel Sorular? 1. Excel Sorular? 1. A Grubu Excel Sorular? 1. A Grubu 1. A?a??dakilerden hangisi hücreye girilen yaz?n?n içeri?ini biçimlendirmek için kullan?lamaz? a. Biçim-Yaz? tipi b. Biçim-Hücreler-Yaz? tipi c. Sa? tu?-hücreleri biçimlendir

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

Matematiksel denklemlerin çözüm yöntemlerini ara t r n z. 9. FORMÜLLER

Matematiksel denklemlerin çözüm yöntemlerini ara t r n z. 9. FORMÜLLER ÖRENME FAALYET-9 AMAÇ ÖRENME FAALYET-9 Gerekli atölye ortam ve materyaller salandnda formülleri kullanarak sayfada düzenlemeler yapabileceksiniz. ARATIRMA Matematiksel denklemlerin çözüm yöntemlerini aratrnz.

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

Uluslararası arası ağ (International Network) bağlanan tüm bilgisayarların ortak bir dil konuşur ortak iletişim diline TCP/IP

Uluslararası arası ağ (International Network) bağlanan tüm bilgisayarların ortak bir dil konuşur ortak iletişim diline TCP/IP INTERNET 3 INTERNET Internet, Uluslararası arası ağ (International Network) demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir. Internet, binlerce omurgalar arası bağ,

Detaylı

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI Ders Notları WEB TASARIMI Đçerik: HTML, Frontpage 2000, Dreamweaver MX, Photoshop 6.0, Flash MX, Paint Shop Pro, Swish, Javascript, Javaapplet, FTP, Đsim Registeri, Server Kiralama Đnternet Nedir? Đnternet,

Detaylı

WEB TABANLI PROGRAMLAMA

WEB TABANLI PROGRAMLAMA WEB TABANLI PROGRAMLAMA 6. ve 7. DERS Köprü Ekleme (hyperlinks) ve Map (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için Anchor etiketi kullanılır.

Detaylı

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2 Giriş Html temelleri Ders 2 World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

Internet Programcılığı-I Ders Notları HTML. Kaynak

Internet Programcılığı-I Ders Notları HTML. Kaynak Internet Programcılığı-I Ders Notları HTML Kaynak Active Server Page (ASP) Professional Skills Devlopment AppDev (Application Development: http://www.appdev.com) 2 Bazı Internet Terimleri Internet: TCP/IP

Detaylı

INTERNET. Fırat Üniversitesi Enformatik Bölümü

INTERNET. Fırat Üniversitesi Enformatik Bölümü INTERNET 3 INTERNET Internet, Uluslararası arası ağ (International Network) demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir. Internet, binlerce omurgalar arası bağ,

Detaylı

İNTERNET TABANLI PROGRAMLAMA- 5.ders

İNTERNET TABANLI PROGRAMLAMA- 5.ders Html nedir? İNTERNET TABANLI PROGRAMLAMA- 5.ders Hareketli metin işleme dili basitce browser larda görebileceğimiz (internet exp.) internet dökümanları olusturmaya yarayan bir cesit dildir html ile oluşturduğumuz

Detaylı

WEB TASARIMIN TEMELLERİ

WEB TASARIMIN TEMELLERİ WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.

Detaylı

Hazırlayan Mustafa ULAŞ mulas@firat.edu.tr

Hazırlayan Mustafa ULAŞ mulas@firat.edu.tr HTML ve Uzaktan Eğitim Materyali Hazırlama Teknikleri Hazırlayan mulas@firat.edu.tr INTERNET 3 INTERNET Internet ağlar arası ağ demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağdır.

Detaylı

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını

Detaylı

ÖNCE BEN OKU WorkCentre 7300 Serisi Fiery Yüklemesi

ÖNCE BEN OKU WorkCentre 7300 Serisi Fiery Yüklemesi ÖNCE BEN OKU WorkCentre 7300 Serisi Fiery Yüklemesi Bu belgede WorkCentre 7300 Serisi için Fiery A Denetleyicisi nin nasl yüklenecei ve kurulaca açklanmaktadr. A ortamnz ve çalma eklinize uygun admlar

Detaylı

T.C. MİLLİ EĞİTİM BAKANLIĞI

T.C. MİLLİ EĞİTİM BAKANLIĞI T.C. MİLLİ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) BİLİŞİM TEKNOLOJİLERİ HTML 2 ANKARA-2007 Milli Eğitim Bakanlığı tarafından geliştirilen modüller; Talim

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

HTML5 Form Yapısı ve Form Elemanları

HTML5 Form Yapısı ve Form Elemanları HTML5 Form Yapısı ve Form Elemanları HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.formlar

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre

Detaylı

Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. Ders 2

Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. Ders 2 Giriş Html temelleri Ders 2 World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

Detaylı

İnternet Programcılığı

İnternet Programcılığı İnternet Programcılığı 1 Yrd. Doç. Dr. Fırat YÜCEL Akdeniz Üniversitesi Enformatik Bölümü Kaynak H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002

Detaylı

1. FORMLAR AMAÇ ARA TIRMA. Programlamaiçindeformkullan m n ö renerekuygulamalaryapabileceksiniz.

1. FORMLAR AMAÇ ARA TIRMA. Programlamaiçindeformkullan m n ö renerekuygulamalaryapabileceksiniz. Ö RENMEFAAL YET 1 Ö RENMEFAAL YET 1 AMAÇ Programlamaiçindeformkullan m n ö renerekuygulamalaryapabileceksiniz. ARA TIRMA PHP ded kaynaklardan(kullan c dan)bilgialmayollar n ara t r n z. Formolu turmadagetvepostmetotlar

Detaylı

Web Tasarımının Bugünü ve Geleceği

Web Tasarımının Bugünü ve Geleceği Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin

Detaylı

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir?

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir? Html'e Giriş HyperText Markup Language (hypertext işaret dili) Nedir? Hypertext terimi bir text'en başka bir text'e zıplamanızı(jump) sağlayan linklerin bulunduğu text'ler için kullanılır. Normal bir yazıda

Detaylı

T.C. MİLLİ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) BİLİŞİM TEKNOLOJİLERİ HTML 2

T.C. MİLLİ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) BİLİŞİM TEKNOLOJİLERİ HTML 2 T.C. MİLLİ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) BİLİŞİM TEKNOLOJİLERİ HTML 2 ANKARA-2007 Milli Eğitim Bakanlığı tarafından geliştirilen modüller; Talim

Detaylı

İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı

İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı Web Programcılığı Dalı HTML, XHTML, CSS 2011 1 HTML HTML Nedir? HTML Web sayfalarının kullandığı dildir. HTML bir programlama dili değildir. HTML

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 5. DERS, YARD. DOÇ. DR. MEHTAP YALÇINKAYA 01.04.2011 RENK 16'lık sayı düzeninde d renk kodu girmek 16'lık sayı sisteminde de toplam 16

Detaylı

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı