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

Transkript

1 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 de binlerde Web sayfasna bakyoruz artk.!"te HTML bu gördü ünün Web sayfalarnn resmi dilidir.!nsanlarn bakaca Web sayfalarn HTML dili kullanarak hazrlayabilirsiniz. HTML dili bir HTML belgesini olu"turur. Di er bir deyi"le bu HTML belgesi tarayc programlar aracl yla gördü ümüz Web sayfasdr. HTML (HyperText Markup Language), tag (etiket) denilen özel etiketler kullanarak belgelerin biçimlendirildi i bir i"aretleme dilidir. Bu belgeler, özellikle tarayc (browser) denilen programlar aracl yla görüntülenirler. HTML, Internet ve Intranet alannda belgelerin al"veri"inde bir standart haline gelmi"tir larn sonlarnda Ted Nelson adl bilgisayar uzman bugünkü Word Wide Web'in temeli olan hypertext kavramn bulmu"tur. Hypertextler belgelerin içindeki metinlerin taraycda (browser) nasl görünece ini ve i"levsel olaca n düzenleyen i"aretlerdir. Ayrca belgeler arasnda ba lant kurulmasna olanak sa lar. Örne in belgenin bir ksmnn koyu görülmesi ya da ba"lk olarak görünmesi için a"a daki biçimin kullanlmas gibi: <H1> En Büyük Bizim Takm </H1> <H6> En Küçük Sizin Takm </H2> H1 etiketiyle biçimlenen karakterlerin taraycdaki görüntü: En Büyük Bizim Takm En Küçük Sizin Takm A. HTML Belgesi Nedir? HTML yalnzca bir belge olarak düzenlenen ve görüntülenecek metini içeren bir text (metin) bir dokümandr. Bu nedenle HTML belgesi olarak adlandrlr. HTML veriler içine yerle"tirilen etiketler, belgenin tarayc (browser) tarafndan nasl görünece ini belirler. HTML belgesi, tarayc tarafnda yorumlanr ve içeri ini kullancya gösterir. B. HTML Dilinin Tarihi HTML, teknik olarak Standard Generalized Markup Language (SGML) dili ve Document Type Definition (DTD) olarak tanmlanr. SGML ilk olarak IBM tarafndan 1960'larn sonlarnda, de i"ik bilgisayar ortamlarnda belge ta"ma sorununa çözüm olarak GML

2 (General Markup Language) olarak geli"tirilmi"tir. Zaman içinde GML, SGML olarak International Standards Organization (ISO) tarafndan standart haline getirilmi"tir. Bir SGML belgesi üç ana parçadan olu"ur.!lk parça, etiket ile normal metni birbirinden ayrmak için hangi karakter setinin kullanlaca n tanmlar.!kinci parça, etiketlerin uygun olarak kullanlaca belge tipini tanmlar. Üçüncü parça ise, belgenin asl metnini ve etiketlerini içerir. Bu üç parçann hepsi ayn fiziksel dosya içinde olmak zorundadrlar. Bütün HTML tarayclar ayn SGML karakter setini ve belge tipini kabul ederler, böylece kullanc yalnz metin içeri ini dü"ünür. HTML dilinin standardn sa lamak için W3C (WWW Consortium) adl bir çal"ma grubu çal"maktadr. Ancak yine de HTML bir standarda kavu"amam"tr. HTML 4 adl bir standart üzerinde çal"lmasna kar"n henüz bütün tarayclar (Internet Explorer ve Netscape gibi) bu standartlar desteklememektedirler. C. HTML Belgesinin Yap s HTML belgesi (document), HTML i"aretleme dili ile olu"turulur. Bu dosyann uzants.htm ya da.html dir. HTML, Internet üzerinde bilgilerin payla"m için geli"tirmi" bir biçimleme yöntemi ya da bir i"aretleme dilidir. Internet tarayclar (Microsoft Internet Explorer gibi) bu belgeleri okuyarak kullancya gösterir. HTML belgeleri, "< >" i"aretleri arasnda ba"layan ve "</>" i"aretleri arasnda biten ö elerden olu"ur. Bu i"aretlerle yaplan tanmlamalara etiket (tag) denir. <B> Bu yazlar koyu görülecek </B> Yukarda örnekte dikkat edilecek olursa açlan <etiket >, <B> ile ba"lar ve </B> ile sonlanr. Bütün HTML etiketleri "<" ve ">" i"aretleri arasna yazlr. Bazlar tek olarak kullanlr, <B> gibi, bazlar ise açma-kapama olarak kullanlrlar, <B> Dikkat! </B> gibi. Genel Biçimi: <Etiket balangc>!çerik </Etiket sonu> Örnek Etiketler: Title etiketi <TITLE> Örnek Web Sayfas</TITLE> Font Etiketi: <FONT SIZE=10> Sayfamza Ho" Geldiniz </FONT> Bir HTML Belgesinin Yaps: <HTML> <HEAD> Bu alana, normal olarak Web sayfasnda görüntülenmeyen bilgiler yazlr. Bunlar; sayfa bal, anahtar kelime tanmlamalar ve sayfa içeriinde kullanlan karakter bilgisidir (dil, code page vb).

3 Sayfa genelinde öncelikle yüklenmesi istenen JavaScript, VBScript kodlar da bu alana yazlabilir. Bunun dnda sayfa hakknda tanmlamalar yaplr. <BODY> Bu alana, dorudan Web sayfasnda görüntülenecek yazlar ve dier biçimleme etiketleri yer alr. ASP kodlar da yazlabilir. </BODY> Örnek 1:!lk HTML Belgesi <HTML> <HEAD> <TITLE> ÖRNEK FORM </TITLE> <body> <form name=tatil action=tatilkayit.asp method=post> Tarih: <input type=text Name= "tarih"> Otel: <input type=text Name= "otel"> Sure: <input type=text Name= "sure"> <input type=submit Name= "kaydet" value="kaydet"></form> </body> D. Taray c lar (Browser) HTML belgesinin içinde yer alan etiketleri yorumlamak ve belgeyi görüntülemek için tarayclar kullanlr. Microsoft Internet Explorer ve Netscape Navigator programlar birer tarayc programdr.!stemci bilgisayarda çal"an tarayc, yolu belirtilen HTML dosyasn görüntüler. Bu bir Intranet uygulamasnn bir sayfas olabilir ya da Internet'e ba l olan bilgisayarn, görüntüledi i bir Web sitesi olabilir. Tarayc program içinde istenirse HTML kaynak kodlar da görüntülenebilir. Örne in, Internet Explorer için bu komut View mönüsünden Source komutuyla yaplr. Ayrca Notepad gibi metin i"leyici programlarla da HTML dosyalarn içeri i açlabilir. II. Gözden Geçirme Sorular 1. HTML Nedir? Dil midir? Yoksa Web sayfas hazrlamak için kullanlan bir düzenleme biçimimidir. 2. HTML etiketlerinin (tag) görevi nedir?

4 3 Bir HTML belgesi dosyasn uzants nedir? 4. Bir HTML belgesinde bulunan ana etiketler nelerdir? Hafta 2: HTML Belgesi Olu2turmak HTML belgesinin yapsn açklamak. Ana etiketleri tanmak. Di er belge ve dokümanlarla ba lant kurmay açklamak. I. HTML Belgesinin Yap s HTML belgesi (document), bir Web sayfas tasarmnda gerekli görsel ö eleri göstermek için HTML etiketleriyle olu"turulan bir HTML dosyasdr. Bir HTML belgesinin ana etiketleri vardr. Onlar belgenin belli ksmlarn belirtir. Örne in HTML belgelerinin <HTML> etiketiyle ba"lamas gibi. Bunun d"nda özellikler biçimleme etiketleri belgenin görünümünü düzenler. Bir HTML Belgesinin Yaps: <HTML> <HEAD> Bu alana, normal olarak Web sayfasnda görüntülenmeyen bilgiler yazlr. Bunlar; sayfa bal, anahtar kelime tanmlamalar ve sayfa içeriinde kullanlan karakter bilgisidir (dil, code page vb). Sayfa genelinde öncelikle yüklenmesi istenen JavaScript, VBScript kodlar da bu alana yazlabilir. Kodlama için <SCRIPT> etiketi kullanlr. <BODY> Bu alana, dorudan Web sayfasnda görüntülenecek metinler ve dier biçimleme etiketleri yer alr. ASP kodlar burada da yazlabilir. </BODY> Örnek : 0lk HTML Belgesi <HTML> <HEAD> <TITLE> ÖRNEK WEB SAYFASI </TITLE> <body> <H1> Bizim 8irket </H1> Faaliyetlerimiz: Ürünlerimiz:

5 8ubelerimiz: Di:er Faaliyetlerimiz: </body> NOT: etiketi bir satr bo"luk vermek için kullanlr. Di er etiketler gibi e" olarak kullanlmaz. A. Ba4lant (Hyperlink) Yapmak HTML dosyalarnn en önemli özelliklerinden birisi; bir dosyadan di erine geçi" yapmay sa layan ba lantlardr (links). Bir HTML dosyada istedi iniz kadar ba lantya yer verebilirsiniz. Ba lantlar <A> etiketi ile yaplr. Anchor (çapa) anlamnda gelen bu ba lant etiketi de i"ik özellikler alarak kullancnn ba lant (link) yapmasn sa lar. Örnek: <A HREF="URL" E itim Sitesi </A> Örnek : Ba:lantlarn Kullanlmas <HTML> <HEAD> <BODY> Örnek SAyfa <p> <a href=" </p> Bana yazmak için: <a href="mailto:farukcubukcu@hotmail.com">mailto:farukcubukcu@hotmail.com</a> adresini tiklayin </BODY> Taray c daki görünümü: Bana e-posta göndermek için tklayn. Ba lantlar sadece Internet adreslerine ba lanmay de il, ayrca metin ve grafik dosyalara ba lanmay da sa lar. Örne in.txt ya da gif, jpeg, gibi dosyalara ba lanmak ya da onlar görüntülemek için ba lantlardan yararlanlabilir:

6 <A HREF="resim.gif"> Resmi görmek için tklayn </A> II. HTML Etiketleri HTML belgeleri orijinal metin ve özel HTML etiketlerinden olu"ur. Bu etiketler < > ile </ > i"aretleri arasnda yer alr. Örne in bir paragrafn taraycda tam olarak görünmesini sa lamak için <P> etiketinin kullanlmas gerekir. Bu etiketi kullanmazsanz cümlenin gösteriminde parçalanma olabilir. Örnek Yap: <P> cümle </P> Etiketlerin Genel Biçimi: <etiket ad > de er ya da metin </etiket ad > Örnek: <B> Bizim Sirket </B> Etiket adlar genellikle büyük harfle yazlr. HTML sayfalarn biçimlemek için kullanabilece iniz yüzlerce etiket vardr. Örne in <BR> etiketi yeni bir satra geçi" yapmak, <B> etiketi ise koyu yazmay sa lar. A. Görünmeyen Etiketler HTML etiketlerinin bazlarnn biçimleme i"levi yoktur. Di er bir deyi"le bu etiketler yalnzca tanmlama amaçl kullanlr: Örne in <HEAD> ve etiketleri HTML belgesinin tantmn yapar, ancak tarayc tarafndan görüntülenmez. Örnek: <HTML> <HEAD> <TITLE> XYZ Sirketi Web Sayfas </TITLE> <BODY>... </BODY> Örnek: Karakter Seti Düzenlemesi A"a daki iki satr HTML sayfasnn Türkçe olarak görünmesini sa lar.

7 <title> Ornek HTML Dosyas </title> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> B. Ana Etiketler Bir HTML belgesi içinde mutlaka olmas gereken asl çaty olu"turan üç tane temel etiket (eleman) vardr. Bu üç eleman, standard olu"turabilmek için gerekli olan tek HTML elemanlar durumundadrlar. <HTML>... <HEAD>... <BODY>... </BODY> Bu etiketlere tanmlayc etiketler denir. Bu etiketler HTML belgesinin türünü belirler. Bu etiketler HTML DTD (Document Type Definition) olarak da adlandrlrlar. C. Biçimleme Etiketleri HTML belgeleri içindeki, harflerin tek ba"na de il de bir blok olarak biçimlenmesi için kullanlr. Kullanldklarnda, <BODY> elemannn içinde olmaldrlar. Blok biçimleme etiketleri <unlardan olu<ur: <ADDRESS>...</ADDRESS> Adres bölümünü biçimler. <H1>...</H1> Alt ba"lk düzeyini biçimler. <HR> Boyutlanabilen, yatay bir çizgi atar. <BR> BReak (yeni satra geçi"). <P>...</P> Metnin bir paragraf oldu unu ve yasl oldu u taraf belirtir. <B>...</B> Metnin koyu görünece ini belirtir. <PRE>...</PRE> Daha önceden biçimlenmi" bir metni kullanmay sa lar. <BLOCKQUOTE>...</BLOCKQUOTE> Di er bir kaynaktan metin alr. <CENTER>...</CENTER> Metni sayfann ortasna getirir. <NOBR> Kelimelerin kesilmeyece ini belirtir. <WBR> E er gerekirse kelimenin kesilebilece ini anlatr. <BASEFONT SIZE=...> Belge için varsaylan yaz tipini belirler. <FONT >...</FONT> Yaz tipini, büyüklü ünü ve rengini tanmlar. <DIV>...</DIV> Metnin ortalanmasn, sa a ya da sola yaslanmasn sa lar. <MARQUEE> Kayan yaz sa lar. <DFN>...</DFN> Tanm yerle"tirir. <XMP>...</XMP> Metin biçimleme. <LISTING>...</LISTING> Metin biçimleme. <COMMENT>...</COMMENT> Metne açklama ekler. <PLAINTEXT> Metin biçimleme. D. Resimleri Kullanmak HTML sayfalarnda resim (image) kullanmak oldukça etkilidir. Bu i"lem için iki etiket kullanlr: <img> ve <a>.

8 Resimler genellikle bir dosya olarak sistemde durur. HTML belgesi içinde onlarn ba lantlar yaplr: <img src="c:\resim\araba.jpg"> Bunun d"nda Internet üzerindeki bir adresten de resimler alnabilir: <img src=" Resmin Boyutunu Ayarlamak <img> etiketiyle bir resmin geni"li ini ve yüksekli ini ayarlamak için bir çift özellik kullanmak gerekir: Bunlar: width ve height. III. Uygulama 1. Bir Web sayfas üzerinde "En Büyük Bizim Takm" cümlesini de i"ik font, renk ve büyüklüklerde görüntüleyin. 2. Bir Web sayfas üzerinde "En Büyük Bizim Takm" cümlesini sola, sa a ve ortal olarak görüntüleyin. 3. Bir Web sayfas üzerinde "En Büyük Bizim Takm" cümlesini H1, H2, gibi ba"lk stilleriyle biçimleyin. 4. Bir Web sayfas üzerinde "En Büyük Bizim Takm" cümlesini <b> etiketiyle koyu yazdrn. IV. Gözden Geçirme 1. Her HTML belgesinde bulunan ana etiketler nelerdir? 2. HTML sayfasnn ülke kodunu (dilini) düzenlemek için hangi etiketler kullanlr? 3. Di er bir URL'e ba lant nasl sa lanr. 4. Resimlerle çal"mak için hangi etiketleri kullanrz? 5. Resimlerimizi istedi imiz boyutta görüntülemek için ne yapabiliriz? 6. Resim kullanmnda en önemli sorun; resimlerin sayfa üzerinde hizalanmasdr.bu konuda en yaygn çözüm, resimleri bir tablonun hücresinde görüntülemektir. Bunun d"nda resimleri hizalamak için hangi etiketleri kullanabiliriz? Hafta 3: Sayfa Tasar m Amaçlar: Font kullanmn açklamak. Arka plan düzenlemesi yapmak. Tablo kullanmay açklamak.

9 I. Sayfa Tasar m HTML dili, Web sayfas hazrlamann resmi dilidir. Ancak Web sayfalarnn içerik ve görsel bakmndan etkili olabilmesi için, iyi bir "ekilde tasarlanmas gerekir. Tasarm temelde bütün HTML kursu boyunca ö renece imiz etiketler aracl yla yaplr. Örne in sayfadaki bir metnin yaz tipi, rengi ve hizalamas sayfa tasarm konularn olu"turur. Bu hafta arka plan olu"turma, font kullanm ve tablo kullanm konularnda bilgiler ö renece iz: A. Arka Plan (Backgroud) Yaratmak Arka plan (zemin) olu"turmak için BACKCOLOR etiketi kullanlr: Genel Biçimi: <BODY BGCOLOR="#rrggbb"> Metin... </BODY> NOT: "#rrggbb" krmz-ye"il-mavi tonlarn kar"mndan olu"an onaltl (hexadecimal) bir saydr. Krmz Zemin: <html> <head> <meta http-equiv="content-language" content="tr"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new Page 1</title> </head> <body bgcolor="#ff0000"> <b><font size="4">bizim Sirket'e Ho" Geldiniz</font></b></p> </body> </html> <BODY> etiketine <BACKGROUND> parametresi resimlerin, belgenin arka plan olarak kullanlmasn sa lanr. Su anda kullanlan bütün tarayclarda bu arka plan resmi, metin alannn arkasna dö"enerek kullanlr. Genel Biçimi: <BODY BACKGROUND="URL ya da PATH/Dosya.gif">... </BODY>

10 Tanmlanan Dosya_ad.gif resim dosyas, metin ve grafiklerin bulundu u görünen alann arkasnda görünür. Kullanm ayn Windows i"letim sisteminde kullanlan Wallpaper (Duvarka d) a benzetilebilir. Örnek: Zeminde Bitmap Dosyas Kullanmak <html> <head> <meta http-equiv="content-language" content="tr"> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>yeni Sayfa </title> </head> <b><font size="4">bizim Sirket'e Ho" Geldiniz</font></b></p> </body> </html> B. Yaz tipini De4i2tirmek Web sayfalarnda görüntüledi imiz metinlerinde de i"ik font ve büyüklükte olmas için FONT etiketi kullanlr. Genel Biçimi: <FONT SIZE=De er> Örnek: <font size="4">bizim Sirket </font> Buradaki geçerli de er 1 ile 7 arasnda olabilir. Default (varsaylan) de er ise 3 tür.!stenirse, + ya da - i"areti ile <BASEFONT SIZE > eleman yardmyla göreceli olarak yaz tipi ayarlanabilir. Internet Explorer <FONT> etiketine, COLOR ve FACE parametrelerini ekleyerek, yaz tipini ve rengini de i"tirme olana na sahiptir. Netscape ise yalnz COLOR parametresini kabul eder. COLOR=#rrggbb ya da COLOR=renk COLOR parametresi, metnin ekranda hangi renk ile görüntülenece ini tayin eder. #rrggbb olarak hexadecimal (onaltl) "eklinde RGB kod sistemini temsil eder. Alternatif olarak, 16 renk ad da kullanlabilir. Kullanlabilecek baz renk adlar: Black, Olive, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple. Bütün bu renkler, <BODY> elemannn, BGCOLOR, TEXT, LINK ve VLINK parametrelerinde de ayn "ekilde kullanlabilir.

11 Örnek: <FONT COLOR=#ff0000> Bu metin krmzdr </FONT> ya da <FONT COLOR=Red > Bu metin de krmzdr </FONT> C. Tablo Tasarlamak Tablolar, genellikle verilerin tarayc üzerinde listelenmesinde yaygn olarak kullanlr. Özellikle metinlerin ve resimlerin kontrollü biçimde görüntülenmesi için yaygn olarak kullanlr: Tablo yaratmada kullanlan etiketler: <TABLE>... </TABLE> Tablo ba" ve sonu <TR...>... </TR > Tablo içindeki satrlar <TD...>... </TD> Hücreler <TH...>... </TH> - Tablo ba"l hücresi <CAPTION...>... </CAPTION > Tablo tantc yazs <THEAD>... </THEAD> Tablonun ba"l <TBODY>... </TBODY> Tablonun gövdesi <TFOOT>... </TFOOT> Tablo alt ba"l <COLGROUP>... </COLGROUP> Kolon gruplarnn hizalamas <COL>... </COL> Tek bir kolonun hizalamas <TABLE BACKGROUND="..."> Tablonun arka alan resmi <TH BACGROUND="..."> Tablo ba"l için arka plan resmi <TD BACKGROUND="..."> Hücre için arka plan resmi <TABLE FRAME="..."> Tablo çerçevesinin görünü"ü <TABLE RULES="..."> Tablo çizgilerinin görünü"ü!çinde hiçbir veri bulunmayan hücrelerin snrlar ekranda görüntülenmez. Bu durumlarda snrlarn görünmesi için, hücre içine bo" bir satr ya da kesilmeyen bo"luklar yerle"tirilir. (<TD> </TD> ya da <TD> <BR> </TD>) Belge içinde tablo yaratrken "u i"lemler yerine getirilir: Tablolar, <table> etiketi ile tanmlanr. <table> ile ba"lar, en sonunda </table> ile biter. <table> etiketi, tablonun satr says kadar ard arda <tr> etiketi içerir. Her sütun için ise bir takm <td> kullanlr. <td> etiketli hücrelere her türlü bilgi (yaz, link, resim, liste, ve hatta ba"ka bir tablo) gelebilir. Tablo yapsna örnek: ADI AY9E Ahmet SOYADI YILMAZ Uzun

12 Yukardaki tabloyu HTML ile "u "ekilde kodlayalm: <table border> - tablo balangc <tr> 1. satir balangc <td>adi </td> 1. satir 1. sütun <td>soyadi </td> 1. satir 2. sütun </tr> 1. satir sonu <tr> 2. satir balangc <td>ayse </td> 2. satir 1.sütun <td>yilmaz </td> 2. satir 2. sütun </tr> 2. satir sonu <tr> 3. satir balangc <td>ahmet </td> 3. satir 1.sütun <td>uzun </td> 3. satir 2. sütun </tr> 3. satir sonu </table> - tablo sonu <TABLE> etiketi, tablonun ba"n ve sonunu belirler. Tablonun olu"mas için gereklidir, çünkü di er tablo elemanlar bu elemann içinde olmadan i"lem görmezler. Varsaym olarak tablolarn snrlar yoktur. Tablolar a"a daki örnekteki gibi verilerin düzenli olarak görüntülenmesi (listelenmesinde) yaygn olarak kullanlr. A"a daki kodda bir ASP sayfas için veriyi sorgularken HTML tablosunun yaratld na dikkat edin: Örnek: Veritaban Çktlarnn Bir Tablo Olarak Listelenmesi = VBScript Codepage= 1254 %> <HTML>  <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-type" content="text/html; charset=windows-1254">  <TITLE> listeleme 1</TITLE> Mü"teri Bilgileri: <% Set Con = Server.CreateObject("ADODB.connection") Set Rs = Server.CreateObject("ADODB.recordset") Con.Open="Provider=Microsoft.Jet.OLEDB.4.0 ; Data Source=c:\data\sirket.mdb" Rs.Open "SELECT * FROM musteriler", Con Response.Write "<TABLE BORDER= '1'>" Do While Not Rs.Eof Response.Write "<TR> <TD>" & Rs("kodu") & "</TD> <TD>" & Rs("adisoyadi") & "</TD> <Td>" & Rs("adresi") & "</TD> </Tr>" Rs.MoveNext Loop Response.Write "</TABLE>"

13 Rs.Close %> </BODY> Tablo tasarmnda kullanlan baz etiketler: BORDER Kullanld nda, atanan de er tablonun bütün snrlar için geçerli olur. Kullanlmad nda ise tablonu biçbir snr olmaz. Fakat kolonlar arasnda snrlar için belli bir alan braklr. Bunun anlam snrl geni"likleri ya da snrsz geni"likleri ayndr. BORDER=de er CELLSPACING Tablo içindeki hücrelerin arasndaki bo"lu u belirler. CELLPADDING Hücrenin snr ile metin arasndaki uzakl verir. <TABLE BORDER=0 CELL SPACING=0 CELL PADDING=0> Olabilecek en sk"k tablo biçimidir. WIDTH Tablonun istenen geni"li ini belirtir. Belge geni"li inin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanlar içinde de kullanlr. HEIGHT Tablonun istenen yüksekli ini belirtir. Belge geni"li inin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanlar içinde de kullanlr. ALIGN Tabloyu sa a ya da sola hizalamak için kullanlr. Bu parametrenin kullanlmas, metnin tablonun etrafna sarlmasn da sa lar. VALIGN (Internet Explorer) Tablo içindeki yazlarn dikey hizasn belirler. top yada bottom de erlerini alabilir. BGCOLOR (Internet Explorer) Belirli renk adlar ya da rrggbb olarak ile tablonun arka plan rengini belirler. BORDERCOLOR (Internet Explorer)

14 Tablonun snr rengini belirli renk adlar ya da rrggbb olarak belirler. Ancak bu parametrenin çal"abilmesi için, daha önceden BORDER parametresi ile bir snr de eri verilmi" olmaldr. <CAPTION> Etiketi Tablonun açklayc ba"l n tanmlar. Bu ba"lk tabloyu yatay olarak ortalar. <COL> Etiketi Yalnz Internet Explorer taraycsnn destekledi i bu eleman tablo kolonlarnn hizalanmasn sa lamak için kullanlr. ALIGN="center justify left right" Kolonun metin yatay hizalamasn belirler. Default olarak center de erini ta"r. SPAN ALIGN parametresinin etkileyece i kolon saysn verir. II. Uygulama</P< <HTML> <HEAD> <TITLE> ÖRNEK WEB SAYFASI </TITLE> <body> <H1> Bizim Sirket </H1> Faaliyetlerimiz: Ürünlerimiz: Subelerimiz: Di er Faaliyetlerimiz: </body> 1. Yukardaki HTML belgesinde metinleri belli bir font ve büyüklükte yazn: 2. Belgenin zeminine bir gif ya da bmp resim yerle"tirin. 3. Subelerimiz bölümüne a"a daki tabloyu koyun: Subelerimiz: =ube >l >lçe A Ticaret <zmir Karyaka B Ticaret <zmir Göztepe

15 C Ticaret <stanbul Kadköy D Ticaret <stanbul Taksim III. Gözden Geçirme 1. Web sayfalarnzda kaç renge yer verirdiniz? 2. Tablolar neden yaygn olarak kullanlmaktadr? 3. Bir tablo verileri kontrollü gösterdi i gibi, verilerin kontrollü olarak girilmesini de sa lar m? Hafta 4: Çerçeve Yaratmak Amaçlar: Çerçeveleri tanmlamak. Çerçeve tanmlar yapmak ve kullanmak. I. Çerçeve (Frame) Nedir? HTML sayfas üzerinde; kendi içinde kontrol edilebilen ayr bölümlere çerçeve (frame) denir. Çerçeveler, bir HTML sayfasn ba msz olarak kontrol edilebilen de i"ik ksmlara böler. A. Frame (Çerçeve) Yaratmak Frame'ler görüntü alann parçalara bölerek her parçada de i"ik bir belge görüntülemek için kullanlrlar. Geli"mi" kullanm olan çerçeve düzenlemesinin temel özelliklerini bu bölümde ele alaca z. Çerçevelerin özellikleri: Her çerçeve kendi URL'ine sahiptir. Her çerçeveye bir ad verilebilir. Her çerçeve kullanc tarafndan boyutlanabilir ve kendi kendine otomatik olarak boyutlayabilir. Çerçevelerin kullanm alanlarndan bazlar "unlardr:!çindekiler sayfas hazrlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir. Bir çerçevede kriter verilerek yaplan i"lemler di er çerçevede beraber görüntülenebilir.sürekli görünmesi istenen mesajlar ya da araç çubu u gibi bile"enler için kullanlabilir. Bir çerçeve belgesi normal bir HTML belgesine çok benzer. Tek fark içinde <BODY> etiketi yerine <FRAMESET> etiketinin kullanlmasdr. Bu etiket bir alt HTML belgesi yaratmay sa lar.

16 Bir çerçeve olu<turmak: <HTML> <HEAD> <FRAMESET>... </FRAMESET> Çerçevenin yaratmak için <FRAMESET> etiketi kullanlr. Bu etiket kullanlmadan önce <BODY> etiketi kullanlmamaldr, aksi takdirde çerçeve olu"turulamaz. <FRAMESET> etiketi içinde yalnzca <FRAMESET> etiketleri, <FRAME> ve <NOFRAME> etiketleri kullanlabilir. <FRAMESET> ile kullanlabilecek parametreler "unlardr: <FRAMESET ROWS="de er"> Virgülle ayrlm" de erler girilerek çerçeveyi olu"turacak alanlarn satr olarak yükseklikleri tanmlanr. Bu de erler pixel olarak verilebilece i gibi, 1 ile 100 arasndaki bir yüzde ile ya da göreceli boyutlar olarak tanmlanabilir. Burada belirtilen satr says, yaratlacak olan çerçeve saysn da belirleyecektir. NOT: Bu dokümanlar Faruk Çubukçu tarafndan hazrlanm"tr. Ticari amaçl olarak kullanlmaz. Daha fazla bilgi için adresine baknz. De:er Girilen herhangi bir say pixel kadar sabit aralk olarak i"lem görecektir. Tehlikeli olan kullancnn penceresi boyut de i"tirdi inde frame boyutunun de i"memesidir. E er aralklardan biri pixel olarak kullanld nda, di er satr aralklarnn yüzde olarak verilmesi daha kullan"l olacaktr. Aksi taktirde satrlar i"lem görürken birbirleri üzerine binerler. De:er% 1 ile 100 arasnda bir say verilebilir. E er toplam de er 100'den fazla ise, bütün yüzdeler ayn oranda azalacaktr. E er de erler toplam 100'den az ise ve bir göreceli de er atanm"sa, fazla kalan bo"luk göreceli de ere eklenir. Göreceli bir de er olmad durumlarda, bütün yüzdeli de erler orantl olarak arttrlr. De:er* "*" de eri göreceli de er verilirken, satrn geriye kalan bütün alan kapsamas için kullanlr. E er "*" i"areti önünde bir say varsa, satr di er göreceli de erlerden daha büyük olacaktr. Örne in; "2*,*" yazld nda, ilk satr bütün alann 2/3'ünü, di er satr ise 1/3ünü alacaktr. Örnek: ROWS="satrlarn yüksekli:ini veren de:erler listesi"

17 <FRAMESET ROWS="20%,60%,20%" Birinci ve son satr arkadaki satrdan daha küçük olacaktr. <FRAMESET ROWS="100,*,100" Birinci ve son satr sabit aralkl, ortadaki satr ise geriye kalan aral kullanr. COLS="Kolon geni<li:ini veren de:erler listesi" Satrlarn de erleri verilirken kullanlan formatn ayns kullanlarak kolonlarn geni"likleri tanmlanr. <FRAMESET COLS="250,*"> <FRAME> Etiketi Bir frameset içindeki tek bir frame'i tanmlar. <FRAME> eleman ta"yc olmad için kapama eleman yoktur. 6 tane parametresi vardr. SRC="URL" Tanmlanan frame içinde görüntülenecek belgenin adresini tanmlar. Bu parametre olmadan, frame bo" olarak görünecektir. NAME="Pencere ad" Di er belgeler tarafndan hedef olarak gösterilebilen frame adn belirtir. (Bu olay genelde ayn belgedeki di er frame'ler tarafndan yaplr.)!stenirse kullanlmayabilir. Varsaylan de er olarak bütün frame'ler adszdr. Adlar alfanümerik bir karakter ile ba"lamaldr. Atanacak de erler d"nda önceden tanmlanm" bir kaç hazr ad vardr. _blank Belirlenen linki her zaman yeni ve adsz bir pencere içinde açar. _self Belirlenen linki her zaman kendi üzerine yükler. _parent Belirlenen linki parent (ana) pencere üzerine yükler. Parent pencere yoksa kendi üzerine yükler. _top Belirlenen linki en yüksek dereceli pencereye yükler. En yüksek pencere kendisi ise kendi üzerine yükler. MARGINWIDTH="de:er" Frame üzerinde marjin ayarlamas yapmak istendi inde kullanlr. Frame'in sol ve sa marjinlerini pixel olarak tanmlar. MARGINHEIGHT="de:er" Frame üzerinde marjin ayarlamas yapmak istendi inde kullanlr. Frame'in üst ve alt marjinlerini pixel olarak tanmlar.

18 SCROLLING="yes no auto" Frame'in kaydrma çubu u alp almayaca n belirtir. Yes de eri her zaman bir kaydrma çubu una sahip olacaktr. No de eri verilirse hiçbir zaman görünür duruma gelmeyecektir. Auto de eri ise kaydrma çubu unun gerekli oldu u zaman görünmesini sa lar. NORESIZE Frame penceresinin kullanc tarafndan tekrar boyutlandrlamayaca n belirtir. Dikkat edilmesi gereken durum, bir frame boyutlandrlamaz duruma getirildi inde, o frame'in etrafndaki frame'lerde ayn duruma gelecektir. FRAMEBORDER="yes no" Internet Explorer tarafndan kullanlan bu parametre, frame snrlarnn görünmesini ya da gizlenmesini sa lar. FRAMESPACING="de:er" Yine yalnz Internet Explorer tarafndan kullanlan bu parametre, snrlara de i"ik görünü" kazandrmak için kullanlr. <NOFRAMES> Taraycnn frame'leri gösteremedi i durumlarda bu parametreler arasndaki frame elemanlarn dikkate alnmamasn sa lar. Örnek: Frame Örne:i A"a daki HTML belgesi üç çerçeve olu"turmaktadr: <html> <head> <title>new Page 1</title> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> </head> <frameset rows="115,*" framespacing="0" border="0" frameborder="0"> <frame name="banner" scrolling="no" noresize target="contents" src="up.htm"> <frameset cols="182,*"> <frame name="contents" target="main" src="left.htm"> <frame name="main" src="right.htm"> </frameset> <noframes> <body> </body> </noframes> </frameset> </html>

19 A"a daki örnekte bir ana mönü frame'i ve onun ça rd bir alt mönü HTML dosyasyla mönü seçeneklerinin seçilmesi sa lanmaktadr. Ana Mönü: <html> <frameset cols="150,*"> <frame name="contents" target="main" src="malzeme_altmenu.htm"> <frame name="main" src="malzeme_bos.htm"> <noframes> <body> <p> Çerçeveli sayfa.</p> </body> </noframes> </frameset> </html> Menü seçenekleri: Altmönü: <html> <head> <base target="main"> </head> <body BGCOLOR="#aaffbb"> <BR> <a href="malzeme_ana_giris_formu.htm">malzeme Ana Kart Giri?i</a> <BR> <BR> <a href="malzeme_hareket_giris_formu.htm">malzeme Hareket Kart Giri?i</a> <BR> <BR> </body> </html> NOT: Frame örne i için program dosyalarmz arasndaki malzeme_menu.htm ve di er malzeme_ ile ba"layan örnekleri inceleyin. Bu dosyalar bildi imiz gibi yaynevinin sitesinden ( ya da yazarn inden (farukcubukcu@hotmail.com) temin edebilirsiniz. II. Uygulama Sirketimizin Web sayfasn çerçeveli olarak olu"turalm: Web sayfasn ili bölüm olarak dü"ünün. Sol tarafta bir bölümde ana menü gibi seçenekler listelensin. Bu bölüm bir çerçeve olarak çal"sn. Yine bu bölümdeki menü seçeneklerine tkland nda sa tarafta (ikinci çerçevede) ilgili metinler görünsün.

20 <HTML> <HEAD> <TITLE> ÖRNEK WEB SAYFASI </TITLE> <body> <H1> Bizim Sirket </H1> Faaliyetlerimiz: Ürünlerimiz: Subelerimiz: Di er Faaliyetlerimiz: </body> III. Gözden Geçirme 1. Çerçeve kullanmann yararlar nelerdir? Hafta 5: Stil Sayfalar Amaçlar: Stil Sayfalarn tanmlamak. Stil Sayfalarn HTML belgelerine eklemeyi açklamak. I. Stil Sayfalar Cascading Style Sheets (CSS), HTML nin en yeni özelliklerinden birisidir. HTML belgelerinin farkl görünmelerini sa layan "ablonlar olu"turmay sa lar. Stil sayfalar bir etiketin de i"ik "ekillerde uygulanmasn sa lar. A. <STYLE> Etiketi Stil sayfalar <style> etiketiyle tanmlanr. Genel Biçimi: <STYLE>

21 Etiket { stil belirtimi } </STYLE> Stil bilgileri bir belgenin tamam için kullanlabilece i gibi bir etiketin etkileyece i alan için de yaplr: Style yaratma örne:i: <HTML> <HEAD> <TITLE> Sral Liste </TITLE> <STYLE TYPE= text/css > H1 {font.size:50pt; Font-family: Times New Roman} </STYLE> <BODY> <H1> Sral Liste </H1> </BODY> Cascading Style Sheet (CSS) standard kod yazarna fontlar, boyutlar ve grafik i"lemler üzerinde daha fazla kontrol sa lamasna olanak sa lar. CSS ayrca formatlama bilgisini Web sayfasnn içeri inden ayrabilir. Style sheetler, HTML etiketlerinin görünümünü kontrol ederler. Ancak onlar de i"tirmezler. Style sheetler ayrca style bilgisinin bir ya da daha çok HTML belgesine ba lanmasn sa larlar. Formatlama bilgisi belli bir tarayc için özel etiketlere ve standart HTML etiketlerine uygulanabilir. CSS bilgisi link edilerek ya da gömülerek belirtilebilir. Bir HTML belgesi bu yöntemlerden birisini kullanabilir. Bununla birlikte en yaygn kullanlan yöntem ba lantdr (linking). Bir style sheet için yaplan ba lantya örnek: <LINK REL=STYLESHEET TYPE="text/css" HREF="./bizim.css"> Örnek : CSS Kullanm <link REL="stylesheet" HREF="fcc.css" TYPE="text/css"> <BODY> <P class=yazi16 align=center>kurs Kayt Sayfas</P> <P class=yazi10 align=center>lütfen a"a da kaytl olan alanlar doldurunz ve gönder dü mesine basnz. Girmi" oldu unuz adresine kayt bilgileriniz gönderilecektir.!lginiz için te"ekkür ederiz.</p> <FORM action="kurskaydi2.asp" method=post id=form1 name=form1> <TABLE class=yazi10 WIDTH=75% ALIGN=center BORDER=1 CELLSPACING=1

22 CSS dosyalar a"a daki biçimde { i"aretleri } arasnda hazrlanr ve HTML belgelerinde bu format belgeleri i"aret edilerek kullanlr. Yukardaki satr buna bir örnektir. Örnek: Bir CSS Dosyas CSS dosyas a"a daki biçimde hazrlanr ve CSS uzantl olarak kaydedilir. Örne in fcc.css. Tasarmda belli format adlar ve onlarn özellikleri tanmlanr: body {font-family: Verdana, Arial, Helvetica; } p {font-family: Verdana, Arial, Helvetica; }.anabaslik {font-family: Arial, Helvetica; font-size: 12pt; line-height: 12pt; margin-bottom: -10px; top-margin: 5pt; color: #330099; font-weight:bold; }.Yazi10 {font-family: Verdana, Arial, Helvetica; font-size: 11pt; font-weight: normal; text-decoration: none; }.Yazi16 {font-family: Verdana, Arial, Helvetica; font-size: 10pt; font-weight: bold; } CSS dosyasndaki belirtimlerin HTML dosyasndan kullanm: Yukardaki CSS dosyas a"a daki HTML belgesinin formatlanmasnda kullanlacaksa "u "ekilde tanmlanr: Örnek: Bir CSS Dosyasnn Kullanm <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft FrontPage 4.0"> <link REL="stylesheet" HREF="fcc.css" TYPE="text/css"> <BODY> <P class=yazi16 align=center>kurs Kayt Sayfas</P> <P class=yazi10 align=center>lütfen a"a da kaytl olan alanlar doldurunz ve gönder dü mesine basnz. Girmi" oldu unuz adresine kayt bilgileriniz gönderilecektir.!lginiz için te"ekkür ederiz.</p> <FORM action="kurskaydi2.asp" method=post id=form1 name=form1>

23 <TABLE class=yazi10 WIDTH=75% ALIGN=center BORDER=1 CELLSPACING=1 CELLPADDING=1> <TR> <TD align=right width=25%><strong>ad-soyad:</strong></td> <TD width=75%><input class=yazi10 type="text" id=tadsoyad name=tadsoyad size=50 MaxLength=200></TD> </TR> <TR> <TD align=right><strong> Adresi:</STRONG></TD> <TD><INPUT class=yazi10 type="text" id=t name=t size=50 MaxLength=200></TD> </TR> <TR> <TD align=right><strong>katlmak istedi iniz Kurs:</STRONG></TD> <TD><INPUT class=yazi10 type="text" id=tkurs name=tkurs size=50 MaxLength=200></TD> </TR> <TR> <TD align=center colspan=2><input class=yazi10 type="submit" value="gönder" id=submit1 name=submit1></td> </TR> </TABLE> </FORM> </BODY> B. D 2 Stil Sayfalar Stil sayfas tanmlamalarnn belge içinde yaplmas ve kullanlmasna iç (internal) stil sayfas kullanm denir. Bir de d" (external) stil sayfas kullanm vardr. Bu tanmlamada stil sayfalar ayr olarak hazrlanr ve HTML belgelerine ba lant kurulan bir di er belge gibi eklenir. D" stil sayfas için olan kod iç stil sayfalar için olandan farkl de ildir. Örne in a"a da bir d" stil sayfasnn kullanm yer almaktadr: <link REL="stylesheet" HREF="fcc.css" TYPE="text/css"> Örnekte: fcc.css adl d" stil dosyas kullanlmaktadr. II. Uygulama 1. Önceki haftalarda yaratt mz "irket Web sayfasnn biçimleme düzenlemelerini bir CSS aracl yla yapn. Örne in belli bir font ve renk için tanmlamalar içeren bir stil sayfas. III. Gözden Geçirme 1. Stil sayfas kullanmann yararlar nelerdir? 2.!ç ve d" stil sayfalar nelerdir?

24 Hafta 6: Formlar Amaçlar: Form yapsn açklamak. Form yaratmann temel i"lemlerini açklamak. I. Form Kullanmak Ço u Web sayfasnda özellikle bilgi giri"i yaplr. Bilgi giri"i için metin alanlar (text box), onay kutular (check box) gibi kontroller kullanlr. Di er bir deyi"le veri giri"i ve görüntülenmesi için kullanc arabirimi yaratmada en çok kullanlan "ek form yaratmaktr. Formlar metin kurular, onay kutular, seçim kutular gibi kontrollerin kullanmna olanak tanrlar. Örnek: <HTML> <HEAD> <TITLE> ÖRNEK FORM </TITLE> <body> <form name=tatil action=tatilkayit.asp method=post> Tarih: <input type=text Name= "tarih"> Otel: <input type=text Name= "otel"> Sure: <input type=text Name= "sure"> <input type=submit Name= "kaydet" value="kaydet"> </form> </body> A. Form Yaratmak Formlar, ziyaretçiden alnacak alanlarn HTML belgesi içinde tanmlanmasyla yaratlr. Ana form etiketi <FORM > dr. Genel Yaps: <FORM>

25 form alanlar </FORM> Örnek: Form ile bilgi almak. <HTML> <BODY> Adnz girin: <BR> <FORM ACTION="kayit.asp" METHOD="POST"> Ad Soyad: <INPUT TYPE="Text" NAME="Adisoyadi"><BR> Adresi: <INPUT TYPE="Text" NAME="Adresi"><BR> Mesle i: <INPUT TYPE="Text" NAME="Meslegi"><BR> Açklama: <TEXTAREA NAME="mesaj" ><BR> <INPUT TYPE="Submit" NAME="Dugme" VALUE="Gönder"> </BODY> 0PUCU: HTML alanlarnn alnmasnda tablo yaps kullanlr. Böylece alanlarn form üzerinde da lm kontrol edilebilir. Yukardaki örnekte; ad soyad bilgisinin giri"i için bir metin alan yaratmak için "u satr kullanlm"tr: Ad Soyad: <INPUT TYPE="Text" NAME="Adisoyadi"> B. Text Box Kullan m Text Box (metin kutusu), HTML üzerinde bilgi girilen kutularn yaratlmasn sa lar. Projemizde yer alan ad, adresi, borcu vb gibi alanlarn giri"i için birer metin kutusu tasarlanr. Genel yaps: <INPUT TYPE="TEXT" NAME="ADI" SIZE="10"> HTML form üzerinde istenildi i kadar metin kutusu yaratlabilir. Ancak bu kutularn ve adlarnn form üzerinde daha iyi bir "ekilde görünmesi için tablo kullanlr. C. TextArea Kullan m TextArea alan metin kutusuna göre daha geni" bir alana metin girili"i yaplr. Projelerimizde, görü"leriniz, açklama gibi metin kutusuna göre daha geni" alana olan ihtiyacmz metin alan yaratarak giderebiliriz. Bu alann geni"li i belirtilen satr ve sütun saysna göre ayarlanr: Genel Yaps: <TEXTAREA NAME="GORUS" ROWS="5" COLS="30">

26 Örnekte, ziyaretçinin görü"lerinin yazlaca bir metin alan tasarlanmaktadr. Sütun says kutusunun uzunlu unu, satr says ise kaç satr olaca n belirtir. D. Radyo Dü4meleri Seçenek dü meleri (radio buttons) form üzerinde birden çok seçenekten yalnz birini seçmek için kullanlan bir denetimdir. Örne in mü"terinin grubunun seçimi: <input type="radio" name="tur" value="pe"in" checked> Pe"in <input type="radio" name="tur" value="vadeli"> Vadeli <input type="radio" name="tur" value="toptan"> Toptan E. Onay Kutular Radyo dü melerine benzer. Ancak onay kutular birden çok sayda i"aretlenebilir. Örne in bildi iniz diller? gibi bir soruya yant olarak birden çok seçene in seçilmesi beklenebilir. Bu durumda radyo dü meleri yerine onay kutular (check boxes) kullanlr. Onay kutular (check boxes), yine form üzerinde birden çok seçene i de erlendirmek için kullanlan bir denetimdir. Örne in mü"terinin hangi bölge ya da bölgelerde faaliyet gösterdi inin seçimi gibi: <input type="checkbox" name="bolge" value="ege" > EGE BÖLGES! <input type="checkbox" name="bolge" value="marmara"> MARMARA BÖLGES! <input type="checkbox" name="bolge" value="akden!z"> AKDEN!Z BÖLGES! <input type="checkbox" name="bolge" value="!ç">!ç ANADOLU BÖLGES! F. Liste Kutular Liste kutular (list boxes), yine form üzerinde birden çok seçene i de erlendirmek için kullanlan bir denetimdir. Liste kutularnda seçenekleri listenin açlmasyla görüntülenir ve listede yer alan bir elemann seçilmesi sa lanr. Örne in mü"terinin faaliyet türünün seçilmesi: <SELECT NAME = "tur"> <OPTION SELECTED VALUE = "pesin" > PES!N </OPTION> <OPTION VALUE = "vadeli" > VADEL! </OPTION> <OPTION VALUE = "toptan" > TOPTAN </OPTION> II. Uygulama Sirketimiz Web sayfasn için a"a daki alanlar olan bir anket formu tasarlayn: Sirketimiz Hakkndaki Görü"leriniz:

27 ADI SOYADI: MESLEi!: ADRES!:!L!: S!KAYET!: TAR!H: VARSA EK B!LG!LER: III. Gözden Geçirme 1. Form kullanmyla olu"an kullanc arabirimi kontrollerini saynz? 2. Onay kutusu kullanmna örnek verin? 3. Radyo dü mesi kullanmna örnek verin?