BÖLÜM VI HTML

HTTP ve HTML HTTP, Web Server ile Web Browser ’ın birbirleri ile haberleştiği bir protokoldür. HTML dokümanları metin ve etiketlerden meydana gelir. HTML etiketleri açılı parantez içerisinde (< >) yazılır. HTML etiketlerinin çoğu slash(/) karakteri ile biten etiket ile kapatılarak bloklar halinde kullanılır. Örnek: <B>HTML</B> bir metin işaretleme dilidir. Yukarıdaki örnekte HTML koyu olarak yazılacaktır.

HTML Versiyonları HTML nin birkaç versiyonu vardır. Günümüzde çoğu Web Tarayıcısının desteklediği 3.2 versiyonudur. HTML’nin standardı Word Wide Web Consortium (W3C) tarafından kontrol edilmektedir. HTML nin 4. versiyonunda iki yeni eklenti vardır.Bu eklentilerin en önemlileri; Cascading Style Sheets (CSS) Dynamic HTML (DHTML)

HTML Versiyonları Cascading Style Sheets (CSS) Dynamic HTML (DHTML) CSS nin her yerde kullanılması nedeni ile W3C, CSS nin Internet Explorer ve Netscape Navigator tarafından desteklenen standardını belirledi. CSS Microsoft Word ün stili gibi çalışır. Stili önceden tanımlarız. Daha sonrada sayfadaki elemanlarda stile başvuru yaparsınız. CSS ile madde imlerini, metin fontlarını, kullanılan başlık fontunu vs. değiştirebiliriz. Dynamic HTML (DHTML) Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket etmesini ya da görünümünün değişmesini sağlayabilen Web Sayfaları yapabilme imkanı sağlayan dildir.

HTML Extensions (Uzantıları) Son birkaç yılda bazı satıcılar web modelini dinamik (mekanik) ve interaktif (etkileşimli) içerikli olarak geliştirdiler. Bunlar; Client-Side Extensions (İstemci Tarafı) Server-Side Extensions (Server Tarafı) Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dynamic HTML, Client-Side a birer örnektirler. CGI programları ve scriptler, Active Server Page ve FrontPage WebBots’ lar da birer Server-Side Extension a örnektirler.

XML: eXtensible Markup Language Genişletilebilir İşaretleme Dili XML Internet’teki en yeni dillerdendir. XML “Verilerde yapı belirtmek için ortak bir yazım şekli” olarak ifade edilebilir. Bu bağlamda XML pek de dil sayılmaz. HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized Markup Language (SGML) den türerler. XML in HTML’den farkı HTML sabit etiketlere sahiptir fakat XML kendi etiketlerinizi tanımlamanıza izin verir.

Web Hazırlama Yazılımları Web hazırlamak için birçok araca sahibiz. Bunları üç sınıfta toplayabiliriz. HTML editörleri Web Sitesi geliştirme araçları Web Uygulaması geliştirme araçları

HTML Editörleri HTML yazmak için NotePad ‘i kullanabileceğimiz gibi yardımcı programlar da vardır. Metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörlerdir. Bunlardan bir kısmı; Hot Dog HotMetal Pro HomeSite 1st Page 2000 Basit bir metin editörü.

Web Sitesi Geliştirme Araçları Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte linkler kontrol edebilen araçlar ve Web Sitesini Web Server a yayınlayabilecek araçlar içerir. Bu kategorideki programlar görsel, kodlamayla uğraştırmayı gerektirmeyen editörler dir. Bunlar; Fusion Visual Page Dreamweaver, Flash FrontPage

Web Uygulamaları Geliştirme Araçları Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır. Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları; ColdFusion NetDynamics Dreamweaver UtraDev Visual InterDev

HTML (HyperText Markup Language) Nedir? HTML(Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi diyebiliriz.

HTML Kodlarını Görüntüleme Web tarayıcıları (browser) standart HTML komutlarını/kodlarını yorumlayarak web sayfası olarak görüntülememize yarar. Internet Explorer, Netscape Navigator, Opera vb.

Bir Web Sayfasının Genel Yapısı <HTML> <HEAD> Başlık Metni </HEAD> <BODY> Body Metni </BODY> </HTML> Not: Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani yazmasak ta olur. Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy> etiketleri arasında bir fark yoktur.

Yapısal Etiketler (Structural Tags) Yapısal etiketler (< >) web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar; İLK ETİKET SON ETİKET AÇIKLAMA <HTML> </HTML> HTML dokümanının başlangıç ve bitini tanımlar. <HEAD> </HEAD> Başlık bölümünün başlangıç ve bitimini tanımlar. <TITLE> </TITLE> Web Sayfasının başlığını tanımlar. Browser’ın isim çubuğunda görünecek olan metindir. <BODY> </BODY> Web Sayfasında gösterilecek olan içeriğin yazıldığı bölümü tanımlamada kullanılır. <!-- --> Bu etiketler Web Sayfamıza açıklamalar eklemede kullanılır.

İlk sayfam Notepad'i açın ve şunları yazın: Dosyayı “sayfa1.htm” olarak kaydedin.

İlk sayfam Sayfa1.htm dosyasını açtığınızda varsayılan browserınız (Internet Explorer, Netscape Navigator gibi) tarafından görüntülenecektir.

Etiket Özellikleri (Tag Attributes) Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin davranışını düzenlemek için değerler atarız. Kullanımı; <ETİKET özellik1=”value” özellik2=”value”> Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P> etiketi yeni bir paragraf başlatır ve varsayılan olarak metni sola yazlar. <P>Bu Metin Sola Yaslıdır.</P> <P align=”left”>Bu Metin Sola Yaslıdır.</P> <P align=”right”>Bu Metin Sağa Yaslıdır.</P> <P align=”center”>Bu Metin Ortalanmıştır.</P>

İlk sayfam Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim: Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.

İlk sayfam Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor. İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.

Etiket Özellikleri (Tag Attributes) <HTML> Etiketi Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. <HEAD> Etiketi Bu etiket içerisinde yazılan sayfada gözükmezler. Web sayfası ile ilgili temel özellikler, Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi, burada tanımlanır. Kısaca head kısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu etiket genellikle sadece <TITLE> ve </TITLE> etiketlerini <META> etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini içerir.

Etiket Özellikleri (Tag Attributes) <TITLE></TITLE>  <TITLE> satırında Internet Explorer (=IE) programına sayfaya başlık verilmek istendiği işaret edilmektedir. IE <TITLE> ve </TITLE> arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler <HEAD></HEAD> deyimleri arasına yeralır.

Etiket Özellikleri (Tag Attributes) <BODY> Etiketi <BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık kullanılanları; BACKGROUND BGCOLOR TEXT LINK VLINK ALINK

Etiket Özellikleri (Tag Attributes) <BODY> Etiketi BACKGROUND Sayfamızın arka planında gözükmesini istediğimiz resmi belirtmede kullanırız. Arka plan resmi kaynak dosyası olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan resmi web sayfasını doldurmaz, döşenir.

Etiket Özellikleri (Tag Attributes) <BODY BACKGROUND= “resim.gif” ></BODY> Örnek:  <HTML> <HEAD> <TITLE> Ornek08.html</TITLE></HEAD> <BODY BACKGROUND=”File:///a:/resimler/artalan.gif”> <!--Diskette bulunan bir resim artalan olarak görüntüleniyor... --> <B> Erkan TANYILDIZI</B> </BODY> </HTML>

Etiket Özellikleri (Tag Attributes) <BODY> Etiketi BGCOLOR Sayfamızın arka plan rengini belirtmede kullanırız. Bu özelliğe vereceğimiz değerler renk adı olabileceği gibi rengin hexadecimal RGB renk kodu da olabilir.

Etiket Özellikleri (Tag Attributes) <BODY BGCOLOR =”renk”>…..</BODY> Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

Etiket Özellikleri (Tag Attributes) <BODY BGCOLOR =”renk”>…..</BODY> Not: Bazı Web Browser lar yukarıdakilerin haricinde renk adlarını da destekler. Mesela Internet Explorer lightgreen, darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı Browser dan sayfa isteminde bulunmayacağını göz önüne alarak yukarıdaki renk isimlerini ya da hexadecimal renk kodunu kullanmak daha sorunsuz olacaktır.

Etiket Özellikleri (Tag Attributes) <BODY BGCOLOR =”renk”>…..</BODY> Örnek: Daha önce hazırladığımız bir html sayfasının <BODY> etiketini <BODY bgcolor=”yellow”> ya da <BODY bgcolor=”#FFFF00”> olarak değiştirelim. Arka plan renginin sarı olduğunu görürüz. Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR özelliklerinin her ikisine de değer atandığında BACKGROUND resmi gösterilecektir.

Etiket Özellikleri (Tag Attributes) Diğer <BODY> Özelikleri TEXT:Metin rengi LINK: Ziyaret edilmemiş link rengi VLINK: Ziyaret edilen link rengi (vizited link) ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükecek olan renktir. BGPROPERTIES: Bu özelliğe fixed değeri atandığında arka plan resmi sabit olup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.

Etiket Özellikleri (Tag Attributes) Diğer <BODY> Özelikleri Örnek: <HTML> <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE></HEAD> <BODY background="bg.jpg" bgcolor="gray" text="white" link="yellow" vlink="aqua" alink="red" bgproperties="fixed"> <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1> <HR> <H2>Web Sayfası</H2> <HR> Fırat Üniversitesinin Sayfasına Gitmek İçin <A href="http://www.firat.edu.tr">Tıklayınız</A> <BR> Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin <A href="www.ktu.edu.tr">Tıklayınız</A> <BR> Arama motoru <A href="http://www.google.com.tr">Google</A> <BR> </BODY> </HTML>

Etiket Özellikleri (Tag Attributes) Diğer <BODY> Özelikleri Örnek:

Etiket Özellikleri (Tag Attributes) <HR> Etiketi <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE> Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır.  WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder. SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır. COLOR : Çizginin rengi. NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay çizginin gölgesi ortadan kalkar.

Etiket Özellikleri (Tag Attributes) <HR> Etiketi Örnek <HTML> <HEAD><TITLE>Ornek09.html</TITLE></HEAD> <BODY BGCOLOR=#66CCFF> <HR> <HR WIDTH=75% NOSHADE> <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE> <HR COLOR=Red WIDTH=100 SIZE=3> <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE> </CENTER> </BODY> </HTML>

Metin Biçimleme

Belge Biçim Etiketleri (Document Formatting Tags)

Belge Biçim Etiketleri HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede; başlık oluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <H1>...<H2> </H1>...</H2> Header Tags: Başlık etiketleridir. 1 numaralısı en geniş olanıdır. Varsayılan hizalama (align) sol (left) olup istersek değiştirebiliriz. <STRONG> </STRONG> Strong Emphasis: Güçlü Vurgu Ediketidir. Genellikle Bold kalın metin olarak gözükür. <EM> </EM> Emphasis: Vurgu Etiketi. Genellikle italik gözükür. <B> </B> Bold: Kalın yazı <I> </I> Italic: İtalik yazı <U> </U> Underline: Altçizgili yazı <SUP>  </SUP> Bu iki deyim arasına yazılan metin üst indis olarak işlem görür. <SUB> </SUB> Bu iki deyim arasına yazılan metin alt indis olarak işlem görür.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <PRE> </PRE> Preformatted: Metni Courier fontu gibi her bir karakteri aynı genişlikte gösterir. Bu tip fontlara font-pitch denir. Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken <BR> deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır. <P> </P> Paragraph: Paragraf etiketi. Kapatma etiketi kullanılmaya bilir. Align değeri varsayılan olarak left olup bu etiket bloğundan önce ve sonra bir satır boş bırakılır. <DIV> </DIV> Division: Bölüm Etiketi. Sayfada yeni bir bölüm açmada kullanılır. Align özelliğinin varsayılan değeri left olup P etiketinde olduğu gibi bloktan önce ve sonra boş satır yoktur.

Belge Biçim Etiketleri İLK ETİKET SON ETİKET AÇIKLAMA <CENTER> </CENTER> Arada yazılan metni ortalamada kullanılır. Bunun yerine <DIV align=”center”> </DIV> de kullanılabilir. <BR> yok Line Break: Satır kırma etiketi. <HR> Horizontal Rule: Yatay çizgi etiketi <BASEFONT> Sayfanın genel metin büyüklüğünü ve rengini değiştirmede kullanılır. size, color özellikleri vardır. <FONT> </FONT> Bir metin bloğunun büyüklüğünü, rengini ve biçimini ayarlamada kullanılır. <BIG> </BIG> Kullanıldığı alanda geçerli olan fontun büyüklüğünün 1 derece büyüğünü yazmada kullanılır <SMALL> </SMALL>

Metin Biçimleme Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz :

Metin Biçimleme Dosyayı “sayfa2.htm” olarak kaydedin. Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

Metin Biçimleme Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:

Metin Biçimleme Dosyayı “sayfa3.htm” olarak kaydedin. Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Başladığınız etiketi sonlandırmayı sakın unutmayın ! Bir html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp , kaynağı görüntüle / view source 'u seçtiğimizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.

Metin Biçimleme

Metin Biçimlendirme Etiketlerinin Kullanımı Örnek: <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> </HEAD> <BODY> <H1>Metin Biçimleri (005_text.htm)</H1> <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG> <BR> <B>Kalın B (Bolt) Gibi Gözüküyor.</B> <!--Bir sonraki etiket yatay çizgi oluşturur.--> <HR> <EM>Vurgu EM (Emphasis) Metni</EM> <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>

Metin Biçimlendirme Etiketlerinin Kullanımı <PRE> Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan Metindir. Başka Bir Satır ve biraz boşluk<BR> </PRE> <HR> Birkaç Metin Yazalım. <BR>Bu Satırdan Önce Bir BR etiketi Var. <P>Bu Satırdan Önce P Etiketi Var.</P> Birkaç Metin Daha <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV> Bu Kadar Metin Yeter. </BODY> </HTML>

Metin Biçimlendirme Etiketlerinin Kullanımı

Fontlar

Fontlar <BASEFONT> Etiketi Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> un varsayılan font büyüklüğü 3 tür. Örnek: <BASEFONT size=”5” color=”red”> yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır. (Aksi belirtilmedikçe)

Fontlar <FONT> Etiketi Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı : <font face="..." size="..." color="...">...</font> face= yazıtipinin adı (arial, tahoma, verdana, ...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri) Bunlara font etiketinin parametreleri diyoruz.

Fontlar Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.

Fontlar Şimdi font etiketinin kullanımını bir örnekle inceleyelim :

Fontlar Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık.

Fontlar Aslında renkli yazmanın bir yolu daha var o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi). Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green

Fontlar <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü ayarlamıştık font un size özelliğine +n veya –n değerlerini atayarak mevcut fontun n fazlası veya n eksiği olarak ayarlayabiliriz. <BIG> ve <SMALL> etiketleri de bağlı etiketlerdir. Bu etiketlerle da sırası ile mevcut fontun bir derece büyüğünü ve bir derece küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT size=”+1”> ve <SMALL> ile <FONT size=”-1”> aynı kullanıma sahiptir.

Fontlar <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar Örnek: <HTML> <HEAD><TITLE>Bağlı Fontlar (Relative Fonts)</TITLE></HEAD> <BODY> <P>Bu normal BODY metnidir.</P> <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P> <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P> <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p> <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P> <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P> <P><SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL></P> <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p> <P><SMALL><SMALL>Bu metin iki tane SMALL etiketi ile yazılmıştır.</SMALL></SMALL></P> </BODY> </HTML>

Fontlar Örnek:

Listeler

Listeler HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar : Sıralı listeler (ordered list)-Otomatik Numaralı (<OL> Sırasız listeler (unordered list)-Madde imli (<UL>) Tanımlama listeleri (definition list) Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret ederiz. Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sağlar. Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.

Sıralı Listeler Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini getiriyoruz. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz.

Sıralı Listeler <OL TYPE=” A|a|I|i|1” START=”sayı”></OL> Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) <OL> etiketinin TYPE özelliğine 1, a, A, I ya da i değerlerini atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri “1” dir. Numaralı listenin başlangıç değerini <OL> nin START etiketinden ayarlayabileceğimiz gibi <LI> etiketinin VALUE özelliğinden de ayarlayabiliriz.

Sıralı Listeler

Sıralı Listeler Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. Dikkat edeceğimiz nokta, işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz.

Sırasız Listeler <UL TYPE=”DISC|CIRCLE|SQUARE”></UL> Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare).

Sırasız Listeler

Tanımlama Listeler Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dt> ve <dd> etiketleri alıyor. Dt terim başlatma dd ise terimin açıklaması için başlatma etiketi olarak kullanılır. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz.

Tanımlama Listeler

Tanımlama Listeler Yazdığımız kodu browser’dan açtığımızda :

Renkler

Renkler Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik. Şimdi daha ayıntılı olarak ve bu işin mantığına inerek yeniden ele alacağız. Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz. Bu bölümde öğreneceğimiz konular: Renk kodları Artalanı renklendirmek

Renk Kodları Fontlar konusunda, metnin rengini belirlerken <font color="..."> etiketini kullanmıştık ve color komutunun karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım. Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir.

Renk Kodları İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? İşte burada işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sağa doğru yanyana yazılır.

Renk Kodları Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar : Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir).

Renk Kodları Buna göre : #000000 siyah #FF0000 kırmızı #00FF00 yeşil #0000FF mavi #FFFFFF beyaz. Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.

Artalanı Renklendirmek Bu renklerle yalnızca metinleri değil sayfamızın artalananını da renklendirebiliriz. Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz. Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

Artalanı Renklendirmek

Artalanı Renklendirmek Yazdığımız kodu browser’dan açtığımızda :

Resimler

Resimler Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) GIF (Graphics Interchange Format) genellikle küçük resimler ya da hareketli animasyonlar için kullanılır. Gif sıkıştırıldığında resmin kalitesinde bozulma olmaz. JPEG Genellikle büyük ebatlardaki resim formatıdır. Jpeg resimlerini sıkıştırdığımız ölçüde kalitesinde azalma olur. Yalnız bu bozulmalar insan gözü ile pek belli olmaz. Not: Yeni browserların desteklediği yeni bir üçüncü tip resim formatı da PNG (Portable Network Graphics). Png formatı, Gif’in yerine geçebilir. Bu format hakkında daha detaylı bilgi almak için http://www.cdrom.com/pub/png adresine bakabilirsiniz.

Resimler Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sizin faydanıza olacaktır. Kullanacağımız etiket şu şekilde olacak; <img src="resmin bulunduğu yer ve adı" width="x" height="y">

Resimler <IMG> Etiketinin Özellikleri HTML ’nin çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri şunlardır; src: resmin bulunduğu dosya ve yol ismi alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek olan metindir. align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir. hspace: Resmin etrafındaki yatay boşluk vspace: Resmin etrafındaki dikey boşluk height: pixel olarak resmin yüksekliği width: pixel olarak resmin genişliği border: Resmin etrafındaki çerçeve kalınlığıdır. “0” değeri verilerek çerçeve kaldırılabilir. (Bir resme hyperlink verildiğinde bu iyi bir yoldur. Neden?)

Resimler Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir soru: bu resmin nerede olduğunu browser'a nasıl izah ederiz? Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı: <img src="kedi.gif" width="65" height="91">

Resimler Fakat siz diyorsunuz ki; benim birden çok eklemek istediğim resmim var ve bunları resim adlı bir alt klasörde topladım. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız : <img src="resim/kedi.gif" width="65" height="91"> Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret ettiğiniz Internet adreslerini hatırlayın.

Resimler Alt dizine ulaşabildik. Fakat üst dizinlere nasıl ulaşacağız? O da kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün içine koyalım, mesela klasörün adı da html olsun. Kedicik bulunduğu resim klasöründe kalsın. Son durum şöyle olacak; c:\html_ders\html\deneme.htm yolunda html dosyamız , c:\html_ders\resim\kedi.gif yolunda resim var. İzlememiz gereken yol şöyle: browser deneme.htm dosyasının bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine girmeliyiz. Üst dizine çıkmayı ../ ifadesiyle belirtiyoruz. <img src="../resim/kedi.gif" width="65" height="91">

Resimler <img src="../resim/kedi.gif" width="65" height="91"> Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.

Resmi Hizalama Resim artık sayfamızda, fakat daima hep solda duruyor. Bir hizalama (align) komutuyla resmi sağa, ortaya ya da sola alabiliriz. Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır. <img src="resim.jpg" width="25" height="25" align="left">

Resimler <IMG> Etiketinin Özellikleri Align Özelliği Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu özelliği kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerleşir. Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır. Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır. Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır. Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin sağına yerleşir. Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin soluna yerleşir.

Resmi Hizalama Örnek: <HTML> <HEAD> <TITLE>WEB TASARIMI</TITLE> </HEAD> <BODY text="#0000CC"> <IMG src=../../Belgelerim/Resimlerim/delta.gif align="left"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. </BODY> </HTML>

Resmi Hizalama Örnek

Resmi Hizalama <BR clear=”all”> Etiketinin Kullanımı Bazen align özelliğine verdiğimiz değere göre metin resmin etrafını çevreler. Align özelliğini kaybetmesini istediğimiz yerde <br clear=”all”> etiketini kullanırız.

Resmi Hizalama Örnek: <HTML> <HEAD> <TITLE>WEB TASARIMI</TITLE> </HEAD> <BODY text="#0000CC"> <IMG src=../../Belgelerim/Resimlerim/delta.gif align="left"> <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.--> <H1>Resmin Align Özelliği</H1> Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. <br clear="all"> <!--Burada clear'a farklı değerler atayarak durumu gözleyelim--> </BODY> </HTML>

Resmi Hizalama Örnek:

Artalana Resim Koyalım Artalanı renklendirmeyi öğrenmiştik: <body bgcolor="...."> ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir. <body bgcolor="..." background="..."> background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde istediğimiz resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.

Resme alternatif metin eklemek Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama görüntülenecektir. alt="..." parametresiyle açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir. <img src="resim.gif" alt="kum saati">

Resimler Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde sayfaya yerleştirelim.

Bağlantılar

Bağlantılar <a>...</a> Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara. Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların hepsine bağlantı kazandırmak mümkün. Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.

Bağlantılar (Hyperlinks) Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi kullanılır. <A> etiketini kullanarak; Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki, Başka bir Web Sitesinin bir sayfasına http hyperlinki, Dosya download etmek için bir ftp linki, Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz.

Bağlantılar Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim : <a href="....">...</a> Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün. <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.

Bağlantılar <a href="meyve.gif"> buraya tıklandığında meyve resmi açılacak </a> Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

Bağlantılar <a href="midi.zip"> midi dosyalarını çekmek için tıklayın </a> İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

Bağlantılar <a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a> Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır. <a href="resim/kedi.jpg"> kedi resmi </a> <a href="resim/bitki/karanfil.gif"> işte çok güzel bir karanfil </a> <a href="../araba/bmw.jpg"> otomobil resimleri </a> Bu 3 örnekte altdizinlere/üstdizinlere verilen bağlantıya örnekler görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli.

Bağlantılar <a href="http://www.benimsitem.com/"> tıklayın sitemi ziyaret edin </a> İnternet adresine giden link örneği. <a href="ftp://ftp.benimsitem.com/"> tıklayın dosyaları indirin </a> Bu ise bir ftp adresine verilen link örneği. <a href="mailto: mymail@mail.com"> mail atın </a> Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır. <a href="http://www.firat.edu.tr/elkbilgi" title="Elektronik Bilgisayar"> Bölümüm</a> Title ifadesi bağlantıya açıklama eklemeyi sağlar.

Bağlantılar-Yer İmi <a href="#...">...</a> ve <a name="....">...</a> Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konu açılsın. Böyle bir sayfa hazırlamak için yapacağımız şeyler : 1 - "tıklandığında" açılacak konuyu işaretlemek <a name="....">...</a> 2 - browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek.<a href="#...">...</a>

Bağlantılar

Bağlantılar Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir sayfanın belli bir bölümünün açılmasını istiyoruz. Bunun için linke tıklandığında açılacak yazıyı <a name>...</a> ile işaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:

Resimlere bağlantı özelliği kazandırmak Bunun için resmi yerleştirmek için kullandığımız: <img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına alıyoruz. resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor. Border komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.

Target parametresi Bağlantının açılacağı pencereyi belirtmek için target parametresi kullanılır . <a href="..." target="...">...</a>

Resim ve Bağlantılar Bir resme hyperlink (bağlantı) eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız. Örnek: <HTML> <BODY> <A href=“image1.htm"><IMG src="b1.gif" align="middle"border="0"></A> image1.htm -- Resim Örneği <br clear="left"><BR> <A href=“image2.htm"><IMG src="b2.gif" align="middle"border="0"></A> image2.htm -- Resmin Align Özelliği <br clear="left"><BR> <A href=“image3.htm"><IMG src="b3.gif" align="middle"border="0"></A> image3.htm -- BR etiketinin clear özelliği <brlear="left"><BR> <A href=“image4.htm"><IMG src="b4.gif" align="middle"border="0"></A> image4.htm -- Width ve Height Özelliği <br clear="left"><BR> <A href=“images.htm"><IMG src="b5.gif" align="middle"border="0"></A> images.htm -- Sayfanın Kendisi </BODY></HTML>

Resim ve Bağlantılar Bir resme hyperlink (bağlantı) eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız. Örnek: <HTML> <BODY> <A href=“image1.htm"><IMG src="b1.gif" align="middle"border="0"></A> image1.htm -- Resim Örneği <br clear="left"><BR> <A href=“image2.htm"><IMG src="b2.gif" align="middle"border="0"></A> image2.htm -- Resmin Align Özelliği <br clear="left"><BR> <A href=“image3.htm"><IMG src="b3.gif" align="middle"border="0"></A> image3.htm -- BR etiketinin clear özelliği <brlear="left"><BR> <A href=“image4.htm"><IMG src="b4.gif" align="middle"border="0"></A> image4.htm -- Width ve Height Özelliği <br clear="left"><BR> <A href=“images.htm"><IMG src="b5.gif" align="middle"border="0"></A> images.htm -- Sayfanın Kendisi </BODY></HTML>

Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN <IMG usemap> ve <IMG> etiketlerini kullanarak bir resmin belli bölgelerine hyperlink verebiliriz. çoğu Web Site Geliştirme programları Image Map araçlarına sahiptir. Bir resim üzerine harita üç farklı şekilde tanımlanabilir; Rect (Dikdörtgensel) Circle (Dairesel) Poly (Çokgensel)

Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN <MAP> Etiketi Resmin üzerinde tıklanabilir alanlar ve tıklandığında gideceği hedef tanımlanır. Bu etiketin NAME özelliğine bir isim verilir ki bu isim daha sonra haritaya başvuru yapmada kullanılır. <AREA> Etiketi <AREA> etiketi ile <MAP> etiket bloğunun arasında tıklanabilir alanlar ve hedef linkler tanımlanır. <AREA> etiketinin özellikleri; SHAPE: Tıklanabilir alanın şeklini belirttiğimiz özellik. Recti Circ, Poly değerlerini alabilir. COORDS: Bu özelliğe de şeklin koordinatlarını atarız. HREF: Bu özelliğine de hedef Web Sayfasını belirtiriz.

Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN COORDS Özelliği Şekil rect ise; dikdörtkenin sol üzt köşesi ve sağ alt köşesinin koordinatları sıra ile yazılır. Şekil circ ise; çemberin merkesinin koordinatı ve daha sonra pixel olarak yarıçapı yazılır. Şekil poly ise; herhangi bir noktadan başlanıp teker teker koordinatlar sıra ile yazılır.

Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN Son olarak <IMG> etiketinin usemap özelliğine haritanın adı yazılarak haritaya çağrı yapılır. Örnek: map.htm <HTML> <HEAD> <TITLE>Untitled Document</TITLE></HEAD> <MAP name="harita"> <AREA shape=rect coords="55, 59, 135, 165" href=image1.htm alt=image1.htm> <AREA shape=poly coords="29, 215, 29, 175, 71, 186, 112, 211, 76, 227, 95, 259, 40, 244" href="image2.htm" alt="image2.htm"> <AREA shape="circle" coords="160, 208, 35" href=“image3.htm” alt=“image3.htm“> </MAP> <BODY> <IMG src="Nilüfer çiçekleri.jpg" width="232" height="308" usemap=#harita border="0"> </BODY> </HTML>

Uygulama Bu uygulama çalışmasında 4 çalışma yapılacak Basit bir Web Sayfası yapımı HTML biçimlendirme etiketlerinin kullanımı Hyperlinkler oluşturma Web Sayfasına grafik ekleme Bu işlemleri yapmak için şimdiye kadar tüm öğrendiklerinizi kullanarak kendinizi tanıtan ve en az 3 sayfadan oluşan bir Web Sitesi hazırlayınız.

İLERİ HTML

Özel Karakterler HTML metin içerisine özel karakterleri yazmak için aşağıdaki format kullanılır. xxx ISO karakter kodu olmak üzere; &#xxx; şeklindedir. Örneğin copyright sembolü için “©” yazılır. Buna ilaveten HTML çok sık kullanılan bazı özel karakterler için aşağıdaki gibi kısa yola sahiptir.   <!-- non-breaking space ( ) --> " <!-- quote character (“) --> < <!-- less-then charakter (<) --> > <!-- greater-then charakter (>) --> & <!-- ampersand charakter (&) --> © <!-- copyright symbold charakter (©) -->

Tablolar Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON AÇIKLAMA <TABLE> </TABLE> Tablonun başlangıç ve bitimini tanımlamada kullanırız. <CAPTION> </CAPTION> Tablonun altına ya da üstüne başlık metni eklemede kullanılır. Bunun için Align özelliğine top ya da bottom değeri atanır. <TR> </TR> Table Row: Tablo satırı oluşturmada kullanılır. <TH> </TH> Table Header: Tabloya başlık hücresi ekler. Başlık hücresi bold ve ortalı yazılır. <TD> </TD> Table Data: Tablonun satırına veri elemanı (hücre) eklemede kullanılır.

Tablolar

Tablolar Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz (thead). Her sütun için de kendi başlığını oluşturmak mümkündür. Tablonun sona erdiği satırdan sonraki satıra açıklama koyabiliriz (caption). Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

Tablolar Şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile satırları , <td> etiketi ile de sütunları oluşturuyoruz.

Tablolar

Tablolar <TABLE> Etiketi <TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir. ÖZELLİK AÇIKLAMA ALIGN Tablonun sayfadaki hizalamasını kontrol eder. Left, center veya right olabilir. Varsayılanı left tir. WIDTH Tablonun genişliğini sabit olarak belirteceksek bu özelliğe pixel olarak bir sayı, sayfanın yüzdesi büyüklüğünde olmasını istiyorsak yüzdeli bir sayı yazılır. (WIDTH=”100” ya da WIDTH=”100%”) BORDER Border yani çerçeve büyüklüğü pixel olarak bildirilir. “0” verilirse çerçevesizdir. CELLSPACING Hücreler arasındaki çerçevenin kalınlığını belirtir. Varsayılan olarak 1 dir. CELLPADDING Hücre çerçevesi ile içeriği arasındaki mesafeyi pixel olarak belirler. Varsayılanı 1 pixeldir.

Tablolar <TR> Etiketi TR etiketi iki tane özelliğe sahiptir. Bunlar; ÖZELLİK AÇIKLAMA ALIGN Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder. left, right, center olabilir. VALIGN Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder. top, middle, bottom olabilir.

Tablolar <TH> ve <TD> Etiketleri Tablo Başlığı (Table Header=TH) ve Tablo Verisi (Table Data=TD) etiketlerinin özellikleri; ÖZELLİK AÇIKLAMA ALIGN Hücre içeriğinin yatay hizalamasını kontrol eder. VALIGN Hücre içeriğinin dikey hizalamasını kontrol eder. NOWRAP Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping) ROWSPAN Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir. COLSPAN Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1 dir. WIDTH Hücrenin pixel olarak genişliği HEIGHT Hücrenin pixel olarak yüksekliği

Tabloda başlık ve gövde Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır. Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.

Tablolar

Parametreler <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

Parametreler cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

Parametreler cellspacing parametresi hücreler arası marjı belirler.

Parametreler align parametresi tabloyu hizalamada kullanılır . align=left sola, align=right sağa dayalı yapar, align=center ortalar .

Parametreler width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

Parametreler

<td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır.

<td> etiketi için parametreler background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

<td> etiketi için parametreler width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.

<td> etiketi için parametreler

<td> etiketi için parametreler

<td> etiketi için parametreler align parametresi hücre içinde yatay hizalama yapar.

<td> etiketi için parametreler valign parametresi hücre içinde düşey hizalama yapar.

Hücreleri Birleştirme <td colspan=".." rowspan=".."> Aynı satırdaki hücreleri birleştirmek için colspan, Aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Aşağıdaki gibi bir tablo yapımız olsun :

Hücreleri Birleştirme A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td> , <td>G</td> etiketlerini siliyoruz.

Hücreleri Birleştirme Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz.

Sayfa Biçimlendirmede Tablo Kullanımı HTML ’in en büyük avantajlarından biri de ekstra boşlukları ve carriage return (satır kırma, paragraf, sekme vs.)karakterleri kaldırarak sayfayı otomatik olarak biçimlendirmesidir. Maalesef bu durum aynı zamanda en büyük problemdir. Sayfanın şeklini ayarlarken metinleri istediğimiz yerlere konumlandıramayız. Neyse ki bunun için tabloları kullanabiliriz.

Sayfa Biçimlendirmede Tablo Kullanımı Örnek: <HTML> <BODY background="bg2.gif"> <TABLE border="0"> <TR> <TD width="10“> <img border="0" src="amblem.jpg"></TD> <TD> <H1>FIRAT ÜNİVERSİTESİ </H1> </TD> <TD><FONT size="2"><A href="hakkinda.htm">Web Sitemiz Hakkında</A></FONT></TD> </TR> <TD width="10"><A href="ogrenciler.htm">Öğrenciler</A></TD> <TD colspan="2">Üniversitemiz Elektronik ve Bilgisayar alanında deneyimli öğretmenler yetiştirmektedir.</TD>

Sayfa Biçimlendirmede Tablo Kullanımı <TR> <TD><A href="personel.htm">Personel</A></TD> <TD colspan="2“> <UL> <LI>Bigisayar Sistemleri</LI> <LI>Elektronik</LI> <LI>Kontrol ve Telekom</LI> </UL> </TD> </TR>

Sayfa Biçimlendirmede Tablo Kullanımı <TR> <TD><A href="mailto:etanyildizi@firat.edu.tr"> E-Mail Göner </A> </TD> </TR> <TD></TD> <TD><FONT size="2">Bu WEB sayfası deneme amaçlı yapılmıştır.</FONT></TD> </TABLE> </BODY> </HTML>

Sayfa Biçimlendirmede Tablo Kullanımı Yukarıdaki gibi bir sayfayı oluşturmanın bir başka yöntemi ise frame (çerçeve) kullanmaktır.

Frame (Çerçeve) Kullanımı

Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz. Çerçeveler (frames), HTML'e sonradan eklenmiş bir özelliktir. Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekler. Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Görüntülenen sayfalardan birindeki linkin tıklanması ile başka bir çerçevedeki içeriği değiştirebiliriz.

Frame (Çerçeve) Kullanımı Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz. İLK ETİKET SON ETİKET AÇIKLAMA <FRAMESET> </FRAMESET> Çerçeveli sayfayı belirtmede kullanılır. <FRAME> yok Bir çerçeve sayfası için ad ve kaynak belirtmede kullanılır. <NOFRAME> </NOFRAME> Çerçeveyi desteklemeyen browserların göstereceği alternatif sayfa bu etiket arasına yazılır.

<FRAMESET> Etiketi Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET> ve <FRAME> etiketlerini kullanırız. <FRAMESET> i kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz. <FRAMESET> etiketi iki tane özelliğe sahiptir; COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler. Aşağıdaki üç metottan birini kullanarak satır ve sütunları tanımlayabiliriz. Sayfa yüksekliği ve genişliğinin bir yüzdesi olarak (“50%” gibi) Piksel cinsinden sabit bir sayı ile (“100” gibi) Kullanılabilir boşluğun kalanını kullanarak (“*” ile)

<FRAMESET> Etiketi Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. <FRAMESET COLS=“100,100,*”> Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde. <FRAMESET COLS=“100,30%,*”> Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü de kalan boşluğun tamamı büyüklüğünde. <FRAMESET ROWS=“20%,*,30%”> Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u yüksekliğindedir. Not: <FRAMESET> etiketi <BODY> ve <HEAD> etiketinin dışında kullanılması nedeni ile diğer çoğu etiketlerden farklıdır.

<FRAME> Etiketi <FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da <FRAME> etiketi ile yaparız. Özellikleri; <FRAMESET> etiketinin içerisinde her bir satır ya da sütun çerçeve için <FRAME> etiketini kullanmak gerekir. ÖZELLİK AÇIKLAMA NAME Pencerenin adını belirler SRC Pencerede gösterilecek kaynak dosyayı belirler FRAMEBORDER Piksel olarak Çerçeve kalınlığı NORESIZE Bu özellik yazıldığında çullanıcı çerçeveyi boyutlandıramaz. SCROLLING Kaydırma çubuğunun olup olmayacağına işaret eder. Auto, Yes ya da No değerlerini alabilir. Varsayılan Auto dur.

Çerçeveler Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

Çerçeveler

Çerçeveler <body bgcolor="..."> etiketi ile htm1.htm dosyasının artalan rengi kırmızı, htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmıştır.

<frameset>...</frameset> Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

<frameset>...</frameset> cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz. Buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir, * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır. cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor.

<frameset>...</frameset> Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar. <frame name="..." src="..."> etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. Açılacak çerçeve sayısı kadar <frame name="..." src="...“> etiketi kullanıyoruz.

<frameset>...</frameset> Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik. İşte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.

<frameset>...</frameset> FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar; frameborder="...“  (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler. FRAMESET etiketini HTML dosyanızın </head>...<body> etiketleri arasında kullanmayı unutmayın !

<frameset>...</frameset> FRAME etiketi ile kullanabileceğimiz parametreler; marginwidth="..." marginheight="..."    (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=".."    (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize    Pencere boyutlarının sabit olmasını sağlar.

Daha karmaşık çerçeveler Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün. Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.

Daha karmaşık çerçeveler

Daha karmaşık çerçeveler

Daha karmaşık çerçeveler

Çalışma: Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol çerçevede linkler olacak ve target özelliğinin farklı değerleri bu örnek üzerinde denenecek…

Çerçeveler <NOFRAME> Etiketi Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa bu etiket arasında oluşturulacak olan <BODY> etiket bloğuna yazılır. <HTML> <HEAD> <title>Çerçeveler </title> </HEAD> <frameset cols="200,*"> <frame name="sol" src="sol.htm"> <frame name="sag" src="ana.htm"> </frameset> <noframes> <BODY> <h2>Browserınız çerçeveleri desteklemiyor</h2> </BODY> </noframes> </HTML>

Çerçeveler <IFRAME> Etiketi Bu tag ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir sayfa gösterilebilir. Özellikleri: ÖZELLİK AÇIKLAMA SRC Çerçevede gösterilecek kaynak web sayfası WIDTH Çerçevenin genişliği HEIGHT Çerçevenin yüksekliği SCROLLING Kaydırma çubuğu durumu (yes, no, auto) FRAMEBORDER Çerçevenin kalınlığı ALIGN Çerçevenin sayfadaki hizalaması

Çerçeveler Örnek: <BODY> <IFRAME src="http:\\www.firat.edu.tr" align="center" height=“300" width=“400" frameborder="1" scrolling="yes"> </IFRAME> </BODY> </HTML>

HTML Formları

HTML Formları HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir. Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar. Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de kullanabiliriz.

HTML Formları <FORM> Etiketi Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir. Genel kullanım; <FORM ACTION=url METHOD=get- post TARGET=pencere> ….. </FORM> Özellikleri: ÖZELLİK AÇIKLAMA ACTION Formun onay buttonuna basıldığında form bilgilerinin gönderileceği URL yi belirtir. METHOD Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman çoğunlukla Post metodunu kullanırız. Get metodunda form ile gönderilen veriler URL nin sonuna eklenir. TARGET Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir.

HTML Formları Kontrol Tipleri HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur. KONTROL YAZIM ŞEKLİ TextBox <INPUT TYPE=“text”> Kullanıcının tek satırdan oluşan string değer girmesinde kullanılır.

HTML Formları Password <INPUT TYPE=“password”> Yukarıdaki gibi string ifade girişi yapılır. Bununla birlikte yazılan karakterler yerine “*” karakteri gösterilir. Hidden <INPUT TYPE=“hidden”> Formla birlikte taşınan bu alandaki bilgi kullanıcıdan gizlenir. File <INPUT TYPE=“file”> Forma eklenen kullanıcının bir dosyasının ismini girmesine izin verir.

HTML Formları CheckBox <INPUT TYPE=“checkbox”> Kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde kullanılır.

HTML Formları RadioButton <INPUT TYPE=“radio”> Özel bir seçenek listesinden saçim yapma imkanı sağlar. Radibuttonların name özelliğine aynı değerler verilerek sınıflandırılabilir.

HTML Formları Submit <INPUT TYPE=“submit”> <FORM> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini göndermede kullanılır. Reset <INPUT TYPE=“reset”> Bütün form kontrollerini sıfırlamada kullanılır. Formun sayfa ilk yüklendiğindeki eski halini almasını sağlar. Image <INPUT TYPE=“image”> Tıklandığında Mouse imlecinin X ve Y koordinatlarını göndererek grafiksel onay buttonu yapmada kullanılır.

HTML Formları Button <INPUT TYPE=“button”> İstemc-tarafı (Client-Side) scriptlerinden JavaScript ya da VBScript i tetikleyebilecek komut düğmesi oluşturur. TextArea <TEXTAREA> Çok satırlı metinlerin girilmesine imkan sağlayan bir kontroldür. ComboBox <SELECT size=“1”> Kullanıcıya açılan bir listeden hazır seçenekler sunar. ListBox <SELECT size=“n”> Kullanıcıya liste şeklinde hazır seçenekler sunar. Buradaki “n” ListBox ın kaç satırlı olacağını belirtir.

HTML Formları <INPUT> Etiketi Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi özelliklere sahip olduğu be bu özelliklerinin anlamları: ÖZELLİK KULLANAN KONTROL AÇIKLAMA TYPE hepsi Kontrolün çeşidini belirtir. Varsayılan Text tir. NAME Hepsi Kontrolün adını belirtir. Kontrolün adı formun ACTION özelliğinde belirtilen URL ye kontrolde yazılı olan değeri taşır.. VALUE Text, password, hidden, radio, submit, reset, button Text, password ve hidden kontrolleri için birinci değeri, radio ve checkbox kontrolleri için seçildiğinde gidecek olan değeri, submit, reset ve button kontrollerinde ise kontrolün başlığını (caption) belirtir. SIZE file Kontrolün gösterebileceği karakter uzunluğu MAXLENGTH Kullanıcının gireceği maksimum karakter sayısı CHECKED Checkbox, radio Eğer yazılırsa başlangıçta kontrolün seçili olmasını sağlar. SRC image Resmin kaynağını gösterir. ALIGN Resmin hizalanmasını belirtir. (left, right, top, middle ya da bottom olabilir.)

HTML Formları <TEXTAREA> Etiketi Çok satırlı metin kutusu oluşturmada kullanılır. Kullanımı: <TEXTAREA name=”adi” rows=”m” cols=”n”> Sayfa yüklendiğinde kontrolde gözükecek olan metin </TEXTAREA> Özellikleri: ÖZELLİK AÇIKLAMA NAME Yukarıda yazmıştık ROWS Ekranda gösterilecek satır sayısı COLS Ekranda gösterilecek sütun sayısı (karakter sayısı olarak)

HTML Formları <SELECT> ve <OPTION> Etiketleri Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur. Kullanımı: <SELECT name=”adı” size=”n”> <OPTION value=”değer1”> Gözüken Metin1</OPTION> <OPTION value=”değer2”> Gözüken Metin2</OPTION> </SELECT> Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan budur) ComboBox (Drop-Down Menu) stilinde gözükecektir.

HTML Formları <SELECT> Özellikleri: <OPTION> Özellikleri: AÇIKLAMA NAME Yukarıda yazmıştık SIZE Gösterilecek satır sayısını belirtir. MULTIPLE Eğer yazılırsa çoklu seçime izin verir. Sadece ListBox görünümünde etkilidir. ÖZELLİK AÇIKLAMA VALUE Seçimin yapılması durumunda formun göndereceği değer SELECTED Bunu yazdığımız <OPTION> etiketi değeri sayfa yüklendiğinde seçilmiş durumdadır.

HTML Formları Örnek: form1.htm <HTML> <HEAD> <TITLE> Müşteri Kayıt Formu </TITLE> </HEAD> <BODY text="#0000FF"> <H2><FONT color="#FF0001"> Müşteri Kayıt Formu</FONT></H2> <H3> <FORM action="hedefdosya.htm" method="post" name="frmMusteri"> <TABLE> <TR> <TD> <B> Adı : </B></font></TD> <TD><INPUT type="text" name="txtAdi" size="30"></TD> </TR>

HTML Formları <TR> <TD><B> Soyadı : </B></TD> <TD><INPUT type="text" name="txtSoyadi" size="30"></TD> </TR> <TD><B>E-Mail : </B></TD> <TD><INPUT type="text" name="txtEmail" size="30"></TD> <TD><B>Adres : </B></TD> <TD><INPUT type="text" name="txtAdres" size="43"></TD>

HTML Formları <TR> <TD><B> Şehir, Ülke, Posta Kodu : </B></TD> <TD><INPUT type="text" name="txtSehir" size="20">   <INPUT type="text" name="txtUlke" size="20"> <INPUT type="text" name="txtPostaKodu“ size="10"> </TD> </TR> <TD><B>Açıklama : </B></TD> <TD><TEXTAREA name="textareaAciklama" rows="2” cols="30">Buraya Herhangi Bir Açıklama Yazınız. </TEXTAREA></TD> <TD><B>Yaş : </B></TD>

HTML Formları <TD><SELECT name="cboxYas" size="1"> <OPTION value="0"> 0 - 11</OPTION> <OPTION value="1">12 - 19</OPTION> <OPTION value="2">20 - 29</OPTION> <OPTION value="3">30 - 39</OPTION> <OPTION value="4">40 + </OPTION> </SELECT></TD> </TR> <TR> <TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz? : </B></TD>

HTML Formları <TD> <INPUT type="radio" name="radMailListesi" checked value="evet"> Evet <INPUT type="radio" name="radMailListesi” value="hayir"> Hayır </TD> </TR> <TR> <TD><INPUT type= "submit" name="kaydet” value="Kaydet"></TD> <TD><INPUT type="reset" name="temizle” value="Temizle"></TD> </TR> </TABLE> </FORM></H3> </BODY> </HTML>

HTML Formları

HTML Formları Uyarı: Formlar, server-side (sunucu-tarafı) CGI veya ASP programlarına teslim edilirler. Dolayısıyla bu formları ileride daha detaylı ASP programlarında test edeceğiz.

HTML Formları Uygulama

CSS (Cascading Style Sheets) Kullanımı

Stil Sayfaları (CSS) Stil sayfaları web sayfası tasarımcılarının, sayfa görünümlerini daha hareketli hale getirmelerini sağlayan .css uzantılı dosyalardır. Css kullanırken kullanacağımız etiket <STYLE> dir. Bu etiketin bir çok kullanım şekli ve kullanım alanı bulunmaktadır. Örnek <P> etiketi içinde olan yazıların yeşil, punto büyüklüğü 10, font verdana olsun. <P style=“font:10pt verdana; color=green”> ifadeler</P> Şeklinde bir kullanım yeterli olacaktır.Yapılan işlemin normal HTML komutları ile yazılması; <Font size=2 face= verdana color =green> font tagı ile yapılan örnek</font>

Stil Sayfaları (CSS) Bu iki örnek arasında görünürde bir fark yoktur, fakat tasarım yapılırken olacaktır. Sayfamızda bazı bölümleri farklı göstermek istiyorsak her bir bölüm için font etiketini kullanmamız gerekecektir. Fakat sadece basit bir tanımlama ile sayfanın hatta sitenim her sayfasında bu yeni stilinizi kullanabilirsiniz. Şimdi farklı örnekler ile STYLE etiketini tanımaya çalışalım.

Stil Sayfaları (CSS) Sayfamızda bir bölümü kırmızı, Comic Sans MS fontu ve 12 punto büyüklüğüne gösterelim <div style=“font:12pt Comic Sans MS; color=red”;>bu bölüm diğer bölümlerden farklı görünecektir.</div> Yeni başlayan paragraftaki yazılar farklı olsun; <P style=“color:#12ddfa;”>bu yazı mavidir.</P> Yeni linkimiz dikkat çekmeli siyah üzerine beyaz yazı <A style “color:white;backround:black;”href=“#”>Siyah zemin beyaz link</A> Örnekler çoğaltılabilir.

Stillerin Etiketlerde Kullanımı <HEAD>.. </HEAD> etiketleri arasında <HTML> <HEAD> <STYLE> <!-- P { font-size:font büyüklüğü pt; font-family: font tipi; color: kullanılacak renk; } H1 { --> </STYLE> </HEAD>

Stillerin Etiketlerde Kullanımı <BODY> <H1> bu yeni stilde H1 başlıktır</H1> Burası Body tagının standart stilidir. <P> bu yeni stilde paragraftır </P> <P> burada yine yeni stilde paragraf görülecektir </P> </BODY> </HTML>

Stillerin Etiketlerde Kullanımı Örnek: <HTML> <HEAD> <STYLE> <!-- P { font-size:8pt; font-family: verdana; color: green; } H1 { font-size:14pt; font-family: times; color: red; DIV { font-size:10pt; color: aqua; } A { font-size:9pt; font-family: tahoma; color: #5010dd; --> </style> </head>

Stillerin Etiketlerde Kullanımı <body> <h1>Yeni Sayfa başlığımız</h1> Bu bölümde kullanılan stil standart stildir. <p>Paragraf kullanıyoruz </p> <div> div tagında değişiklik yaptık. Fakat sadece font büyüklüğü ve renk değişti</div> <a href="javascript:window.close()">Pencereyi kapat</a> </body> </html>

Stillerin Etiketlerde Kullanımı

Seçiciler (Selectors) Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id seçicisi ve sınıf seçicisi.

Id Selectors(Id Seçicileri) Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır.

Class Selectors (Sınıf Seçicileri) Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz.

Stillerin Bağımsız Olarak Kullanımı Stilleri etiketlere ait olarak değil de bağımsız olarak kullanmak için bir class dosyası şeklinde hazırlanmalıdır. Bunun için etiket adı yerine .stiladı şeklinde bir tanımlama yapılır. Bu şekilde bir stil oluşturalım. <STYLE> <!-- .stil1{ font-size:8pt; font-family: verdana; color: green; } .stil2 { font-size:14pt; color: blue; --> </style>

Stillerin Bağımsız Olarak Kullanımı Şimdi etiketler içerisinden class dosyalarının nasıl çağrıldığına bir bakalım. <p class=“stil1”> Yazılacak yazı </p> <DIV class=stil2”> Yazılacak yazı </DIV> <A class=stil1” href=“#”>Link </A>

Stillerin Farklı Sayfalarda Kullanımı Stilleri farklı sayfalarda kullanmak için stillerimizi bir metin dosyası olarak yazıyoruz ve uzantısını .css vererek kaydediyoruz. Daha sonra bu stilleri kullanmak istediğimiz sayfada head etiketleri arasında bu dosyaya link veriyoruz. <LINK rel=stylesheet href=“stillerim.css” type=“text/css”>

Stillerin Farklı Sayfalarda Kullanımı Örnek: <STYLE> <!-- .stil{ font-size:8pt; font-family: verdana; color: green; } .stil1 { font-size:14pt; font-family: times; color: red; Bu dosyayı stillerim.css olarak kaydedelim. .stil2{ font-size:10pt; color: aqua; } .stil3{ font-size:9pt; font-family: tahoma; color: #5010dd; .stil4 { font-family:impact; --> </style>

Stillerin Farklı Sayfalarda Kullanımı Örnek:deneme.html <HTML> <HEAD> <LINK rel=stylesheet href=“stillerim.css” type=“text/css”> </HEAD> <body> <h1 class=“stil1”>Yeni Sayfa başlığımız . stil1</h1> Bu bölümde kullanılan stil standart stildir. <P class=“stil ”>Paragraf kullanıyoruz . stil </P> <div class=“stil3”> Div tagında stil değişikliği yaptık. stil3 </div> <SPAN class=“stil4”> Yine SPAN tagında değişiklik var. stil4 </SPAN> </BODY> </HTML> <SPAN> etiketi: Bu etiket stilsiz kullanılırsa hiçbir etkisi yoktur. CSS kullanılarak metinler üzerinde biçimlendirme yapabiliriz.

Stillerle Fontların Kullanımı Fonlarla ilgili parametreler background=red; font-weight=bold (kalın)|none (normal yazı); font-style=italic|none; text-decoration=underline(altı çizili)|overline (üstü çizili) |none; text-transform=uppercase|lowercase|none; text-align=left|right|center|justify;

Stillerle Fontların Kullanımı Örnek: STYLE> <!-- .stil{ color: green; font-family: verdana; font-size:8pt; font-style:none; font-weight:bold; background:yellow; } .stil1{ background:pink; font-family: impact; text-align:center; } --> </style>

Stillerle Fontların Kullanımı Örnek: <HTML> <HEAD> <LINK rel=stylesheet href=“stil.css” type=“text/css”> </HEAD> <body> Body tagının normal stili <p class=“stil1”>İlk paragrafımız . stil1</h1> <P class=“stil ”>ikinci paragraf . stil </P> Bu bölümde kullanılan stil standart stildir. <div class=“stil”> Div tagında stil değişikliği yaptık. stil </div> <SPAN class=“stil1”> Yine SPAN tagında değişiklik var. stil1 </SPAN> </BODY> </HTML>

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme Örnek: <HTML> <HEAD> <STYLE> <!— BODY{ background:#000000; color: #ffffff; font-family: verdana; font-size:10pt; font-weight:bold; text-decoration=none; margin-left:30px; margin-right:50px; margin-top:27px; } --> </STYLE> </HEAD> Body etiketi için tanımlanan yeni değerler sayfada etkin olarak kullanılacaktır. Normal olarak sayfalar sol en köşeden itibaren yazmaya başlanır. Sayfaya kenarlıklarına boşluk vermek için margin ifadesi kullanılır.

Stillerle BODY Etiketinin Varsayılan Değerini Değiştirme <HTML> <head> <STYLE> <!-- BODY {background: white;} H1 {font: 24pt Arial bold} P {background: yellow;} A {text-decoration: none; color: blue} --> </STYLE> <title>Style Sheet Kullanımı</title> </head> <BODY> <H1>Bu bir başlık! 24 punto, Arial ve Kalın.</H1> <p>Üzeri sarı işaretleyici ile çizilmiş alelade bir yazı.</p> <a href="deneme.htm”> Linklerin altının çizilmemesini bu yolla sağlayabilirsiniz.</a>

Stillerin Link Düzenlemeleri İçin Kullanılması Link stilleri oluşturulurken dört parametre kullanılacaktır. a:link : Sayfada bulunan bir link renk ve durumu a:active : Link tıklandığında alacağı renk ve durum a:visited : Ziyaret edilmiş bir linkin alacağı renk ve durum a:hover : Fare ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin fare linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır. color : Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada yapılır. text-decoration: none seçilirse ilgili linkin altı çizili özelliği ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam eder.

Stillerin Link Düzenlemeleri İçin Kullanılması <style> A:link { color : renk; text-decoration :none|underline font-size:10pt; color:red; } A:active { color : renk; text-decoration :none|underline } A:visited { color : renk; text-decoration :none|underline } A:hover { color : renk; text-decoration :none| underline| overline } </style>

Stillerin Link Düzenlemeleri İçin Kullanılması <html> <head> <style> A:link { color : Yellow; text-decoration :none } A:active { color : Yellow; text-decoration :none } A:visited { color : White; text-decoration :none } A:hover { color : Yellow; text-decoration :overline } </style> <title>Ornek.html</title> </head> <body bgcolor=”#000080”> <a href=”http://www.firat.edu.tr”>Fırat Üniversitesi</a> </body></html>

Stiller İle Sayfanın Her Noktasının Kullanılması Sayfa tasarımı yaparken en çok sıkıntı çekilen konulardan biri bir elamanı sayfanın istenilen noktasına yerleştirememektir. CSS sayfaya noktasal olarak ulaşmaya izin verir. Örneğin Sayfanın alt kısımlarında iken ortaya yazı yazdırılabilir. <P style=“font:14pt times;position:absolute;top:150px; left:100px; width;200px”>deneme</P>

Stiller İle Sayfanın Her Noktasının Kullanılması position:absolute|reletive; absolute: sayfanın en başından geçerli noktayı alır. reletive: sayfanın en son yazılan elamanının bulunduğu noktayı başlangıç olarak alır. top: belirlenen başlangıç noktasından belirtilen pixel kadar aşağı yazar. left: başlangıç noktasında sağa doğru belirtilen pixel kadar uzaklığa yazar. width: yazılacak yazı için maksimum genişlik belirler ve bu genişlik aşıldığı zaman bir alt satıra geçer.

Stiller İle Sayfaya 3. Boyut Verme Bu bölümde sayfamıza derinlik vermeyi göreceğiz. Bir web sayfası hazırlanırken sayfamıza düzen verirken sayfayı yatay ve dikey olarak düşünüyoruz. Bu koordinat sisteminde x ve y olarak ifade edilen iki boyuta denk gelir. Üçüncü boyut ise derinliktir. Derinliğe koordinat sisteminde z ismi verilir. Verilen parametrelerden yararlanılarak üçüncü boyutun özellikleri web sayfalarında kullanılabilir. z-index parametresi derinlik olarak yeni stile bir değer verir. İki stil hazırladığımızda z-index değeri büyük olan üstte görünecektir. Aşağıdaki kodlar iki stilin birlikte kullanılmasını gösteriyor.

Stiller İle Sayfaya 3. Boyut Verme <HTML> <HEAD> <STYLE> <!- - #bolum1{ position:absolute; top:10px; left:20px; z-index:0; } #bolum2{ z-index:1; --> </STYLE> </HEAD> <BODY> <SPAN id=“bolum1”> <IMG src=“cizgi1.gif” alt=“cizgi1”> </SPAN> <SPAN id=“bolum2”> <IMG src=“cizgi2.gif” alt=“cizgi2”> </SPAN> </BODY></HTML>

Stiller İle Sayfaya 3. Boyut Verme

Stiller İle Sayfaya 3. Boyut Verme Şimde de bu örnek üzerinde z-index parametrelerini değiştirerek aynı örneği tekrar görelim <HTML> <HEAD> <STYLE> <!- - #bolum1{ position:absolute; top:10px; left:20px; z-index:1; } #bolum2{ z-index:0; --> </STYLE> </HEAD> <BODY> <SPAN id=“bolum1”> <IMG src=“cizgi1.gif” alt=“cizgi1”> </SPAN> <SPAN id=“bolum2”> <IMG src=“cizgi2.gif” alt=“cizgi2”> </SPAN> </BODY></HTML>

Stiller İle Sayfaya 3. Boyut Verme

CSS İle Menü Oluşturma

display : inline : Kullandığımız nesneleri yanyana sıralar. block : Kullandığımız nesneleri alt alta sıralar. none : Kullandığımız nesneleri göstermez. Genellikle JavaScript methodlarında kullanılır.

Padding: İçeriğin elementin sınırlarına olan uzaklığını belirlemek için kullanılır.Örneğin "padding:4px;" şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Margin: Elementin komşu elementlere olan uzaklığını belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki bir deklerasyon elementin komşularının sınırlarına (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Aşağıdaki şekilde padding ve margin seçeneğini gösterir.

CSS’de birimleri 4 gruba ayırabiliriz. · Uzunluk Birimleri · Yüzde Birimleri · Renk Birimleri · Url Birimleri

Uzunluk Birimleri CSS’de 8 farklı uzunluk birimi vardır Uzunluk Birimleri CSS’de 8 farklı uzunluk birimi vardır. Bunların 3′ü relative (göreceli) 5′i ise absolute (kesin) uzunluklardır. Sayfa ölçeğinin değişmesi veya çıktısının alınması gibi durumlarda göreceli uzunluk birimleri avantaj sağlar. Her kullanıcının bilgisayarı özellik olarak farklılıklar gösterebilir.Özellikle kullanılan monitörlerin farklı ebatlarda-özelliklerde olması bu birimleri kullanışsız kılmaktadır.Misal, 15inc’lik bir monitörde gayet hoş görünen bir metin, 19inc bir monitörde kötü görünebilir.

Göreceli uzunluk birimlerini · em: Elementin fontunun yüksekliğidir.1 em, 16 pixele karşılık gelmektedir. CSS’de “em” uzunluk birimini kullanmak isteyenler için pixel olarak dönüşüm yapmak oldukça zordur. · ex: Metnin küçük “x” harfinin yükseklik değeridir.Ortalama olarak 1ex, 8 pixele karşılık gelmektedir.Her fontun “x” karakteri farklı boyutlarda olduğundan, her font için bu uzunluk birimi farklı sonuçlar çıkaracaktır. ·

Göreceli uzunluk birimlerini · px: Pek yabancı olmadığımız, sıklıkla kullanılan bir ölçü birimidir.Bir resmi yeterince büyütürseniz, çok küçük kutucuklardan oluştuğunu görürsünüz.İşte bu kutuların her biri 1 pixele karşılık gelmektedir.Aynı mantık monitörlerde de vardır.Eğer monitörünüze çok takından bakarsanız ızgara şeklinde kutuculardan oluştuğunu görürsünüz.Bu kutucukların da her biri 1pixeldir.Bu da her monitöre göre farklı değerler demektir. CSS: #deneme {font-size: 22px;}

Kesin uzunluklar ise, gerçek hayatta kullanılan kati ölçü birimleridir. · in (inch): 1in, 2,54cm’e karşılık gelmektedir.TopStyle Lite programında 1in, 96px e karşılık gelmektedir.Bu dönüşümleri Photoshop ile de test edebilirsiniz.Ancak 1in=72px’e karşılık gelecektir.CSS ile uğraştığımıza göre TopStyle Lite’daki değeri kullanabiliriz. · cm (santimetre): Günlük hayatta kullandığımız değerdir. TopStyle Lite’da 1cm, 38px’e karşılık gelmektedir.

· mm (milimetre): Yine günlük hayattan tanıdığımız bir ölçü birimi · mm (milimetre): Yine günlük hayattan tanıdığımız bir ölçü birimi.Bilindiği üzere 10mm, 1cm’e karşılık gelmektedir.Bu da 10mm=38px demektir. · pt (point): Standart baskı birimidir.100pt, 133pixele karşılık gelmektedir.Ufak bir bilgi, Photoshop programında 1px=1pt alınmıştır. · pc (pica): Bu da bir baskı ölçü birimidir.1pc, 16px’e karşılık gelmektedir.

Yüzde Birimleri : Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir. CSS: h4 { line-height: 150% } böyle bir kod, metnin font büyüklüğünün %150 kadarı bir satır yüksekliğini ifade eder. CSS: p { text-indent: 10% } böyle bir kod ise metnin soldan satır genişliğinin %10'u kadar içerden başlayacağını ifade eder.

Renk Birimleri : CSS'de renklerin İngilizce isimleri kullanılarak tanımlama yapılır.Design ile ilgilenen arkadaşlarımız varsa, RGB kavramı pek yabancı gelmeyecektir onlara.Bu mod Red(Kırmızı), Green(Yeşil), Blue(Mavi) renklerinin başharfleri ile tanımlanmaktadır. 5 Çeşit renk belirleme özelliği vardır. 1- İlgili renk özelliğine HTML tablosundaki renklerden birinin isminin direk olarak atanması yöntemi.Misal, Aşağıdaki kodlar 12px font büyüklüğünde açıkyeşil renkte bir yazıyı karşılamaktadır.

CSS: #deneme { font-size: 14px; color: LightGreen; } gibi.

2-Kısa RGB kodu ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0,...,F arası tek basamaklı heksadesimal değer alabilirler. En fazla renk değeri : #FFF (Önceki yöntemlere göre = White) 'dir. Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: #FFF; }

3-RGB kodu ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 00,...,FF arası iki basamaklı heksadesimal değer alabilirler. En fazla renk değeri : #FFFFFF (Önceki yöntemlere göre = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde yeşil renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: #9ACD32;}

4-Tam sayı değer ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,255 arası 3 basamaklı tam sayı değerleri alarak aşağıdaki örnekteki gibi belirtilirler. En fazla renk değeri : rgb(255, 255, 255) (Önceki yöntemlere göre = #FFFFFF = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: rgb(255,255,255); }

5-Yüzde değeri ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,100 arası kayar noktalı sayı değeri alarak gösterilir. En fazla renk değeri : rgb(100%, 100%, 100%) (Önceki yöntemlere göre = rgb(255,255,255) = #FFFFFF = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: rgb(100%, 100%, 100%) }

URL Birimleri : Herhangi bir metnin,belirli bir alanın, arkaplanına veya etrafına yerleştirilen resmin gösteriliş şeklidir.Misal; Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte, arkaplanına benim atadığım style.css ile aynı dizinde olan images klasöründeki deneme.gif dosyasının gösterileceğini söyler. #deneme { font-size: 12px; color: rgb(100%, 100%, 100%) background: url("/images/deneme.gif“) }

Örnek 1: <html> <head>  <style type="text/css">  #coolmenu { border: 1px solid black; border-bottom-width: 0; width: 170px; background-color: #E6E6E6; }  

#coolmenu {width:164px;/*tablo sütün genişliği*/} #coolmenu a{ font: bold 13px Verdana; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; }

#coolmenu a:hover{ background-color: black; color: white; }  </style>  </head>  <body>  <div id="coolmenu"> <a href="http://www.cssdrive.com">CSS Drive</a>  <a href="http://www.javascriptkit.com">JavaScript Kit</a>

<a href="http://www. javascriptkit. com/cutpastejava <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a href="http://www.codingforums.com">Coding Forums</a> </div>  </body> </html>

Örnek 2: <html> <head> <style type="text/css">  #button { width: 150px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; font-size: 90%; background-color: #90bade; color: #333; }

#button ul { list-style:none ; margin: 0; padding: 0; border: none; }  #button li { border-bottom: 1px solid #90bade; margin: 0; }  

#button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; }

#button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }  </style> </head>

<body> <div id="button"> <ul> <li> <a href="#">e-dersler</a></li> <li> <a href="#">C/C++</a></li> <li> <a href="#">Pascal</a> </li> <li><a href="#">Java</a></li> <li> <a href="#">HTML</a></li> <li><a href="#">xhtml</a> </li> <li><a href="#">xml</a></li> </ul> </div> </body> </html>

Örnek 3: <html><head> <style> #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; }   #navcontainer li { margin: 0 0 .2em 0;

#navcontainer a:hover{ display: block; color: #ffffff; background-color: #003366; width: 9em; padding: .2em .8em; text-decoration: none; } #navcontainer a:hover{ background-color: rgb(51,102,153); color: #ffffff; }

#active a { } </style> </head> display: block; color: #FFF; background-color: #600; width: 9em; padding: .2em .8em; text-decoration: none; } </style>  </head>

#active a { } </style> </head> display: block; color: #FFF; background-color: #600; width: 9em; padding: .2em .8em; text-decoration: none; } </style>  </head>

<body> CSS CODE HTML CODE <div id="navcontainer"> <ul><li><a href="#">Ankara</a></li>  <li id="active"><a href="#">İstanbul</a></li> <li><a href="#">İzmir</a></li> <li><a href="#">Adana</a></li> <li><a href="#">Erzurum</a></li> </ul></div></body></html>

Farklı Özellikler

KAYAN YAZILAR KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Bu işlemler için Microsoft, <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş. Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim. <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>

KAYAN YAZILAR <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n> BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.

KAYAN YAZILAR BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir. DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar. HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir. HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.

KAYAN YAZILAR LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur. SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir. Örnek Kullanım: <MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... :) </MARQUEE>

MULTİMEDİA ÖĞELERİ Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz. <BGSOUND SRC=' deneme.mid' LOOP=5> Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır. <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >

ARAMA MOTORLARINA YARDIMCI OLUN Hazırlanan sitenin arama motorları sayesinde görülmesi için yapılamsı gereken bazı işlemler bulunmaktadır. Arama motorlarının kullandığı ' ajan'  programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır. <META NAME="author" CONTENT="EMEL KAÇAR"> Kodu sayfanın tasarımcı kimliğini gösterir. <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.

ARAMA MOTORLARINA YARDIMCI OLUN <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir. <META http-equiv=”refresh” CONTENT=”5; URL=http://www.megep.meg.gov.tr”> Refresh ile sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <META http-equiv=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00 GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.

ARAMA MOTORLARINA YARDIMCI OLUN <META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını gösterir. <META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir. <META http-equiv=”content-style-type” CONTENT=”text/css”> Content-typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.

ARAMA MOTORLARINA YARDIMCI OLUN <META NAME="copyright" CONTENT="© 2006 EMEL KAÇAR“> Kodu sayfanın telif hakkının kime ait olduğunu gösterir. <META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu sayfanın hangi editörle yapıldığını gösterir. <META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir. <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur. Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.