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

Transkript

1 Html'e Giriş HyperText Markup Language (hypertext işaret dili) Nedir? Hypertext terimi bir text'en başka bir text'e zıplamanızı(jump) sağlayan linklerin bulunduğu text'ler için kullanılır. Normal bir yazıda hiçbir zaman başka bir yazıya atlama yapamazsınız. Bilgisayar dünyasında başka bir dosyaya, metine vs.. atlamanıza(zıplamanıza) imkan veren metinlere hypertext denir. Her dil bazı işaretler kullanır. Html dili de işaretlerden oluşmuştur. Html ile hazırlanan sayfaları kullanıcılara gösteren tarayıcı(browser) denilen programlar vardır (Netscape, İnternet Explorer vs..). Html işaretleri ile tarayıcıya web sayfasının nasıl gözükeceğini belirtirsiniz. Yani html işaretleri ile tarayıcıya yazıların rengini kırmızı yap, resmi sola koy, link koy gibi komutlar verirsiniz. Tarayıcılar bu işaretlere göre sayfanızı oluşturduğu için html bir markup (işaretleme) dilidir. Tag(etiket) ve Attribute(özellik) Html tag(etiket) denilen birimlerden oluşmuştur. Tag'ler < (küçük) işareti ile başayıp > (büyük) işareti ile biten elemanlardır. Açılış tag'i arasındaki elemanlar ve kapanış tag'i hepsi birden bir elementi oluşturur. Her tag bir komut gibidir yani tarayıca bir şeyler belirtir. Yazı yazmak için bir tag,resim koymak için bir tag kullanılır. <img> tag'i resim koymak için, <a> tag'i link (tıklandığında başka sayfaya gitmenizi sağlayan yazı) koymak için, <table> tablo koymak için, <font> yazıların biçimini değiştirmek için kullanılır. Html'de çok sayıda tag bulunur. Bazı tag'ler açıldığı zaman kapatılması gerekir. Her html sayfasının başında mutlaka olması şart olan

2 tag'i mutlaka sayfanın sonunda ile kapatılmalıdır. Kapatma işlemi </tag> ile yapılır. Taglar açılıp kapandığı yerde yani arasındaki bölgede etkilidir. Bazı tagların yardımcı ekleri vardır. Bunlara attribute (özellik) denir. Genel yapısı <tag attribute1="value1" attribute="value2"> etkilenen bölge </tag> şeklindedir. Örneğin resim.gif diye bir resim dosyasını web sayfanıza koymak istiyorsanız <img> tag'inin src özelliğini kullanacaksınız. resim.gif dosyasını <img src="resim.gif"> </img> ile gösterebilirsiniz. Global Tag'ler-Genel Yapı Html'de elementler (açılış tag'i+arasındaki bölge+kapanış tag'i) hiyerarşik bir yapıdadır. Yani elementler içiçe kullanılabilir. Bir web sayfasında bütün elementler tag'leri arasındadır. Bu tag'in dışında başka bir tag kullanılamaz. Her tag bu tag'in arasında açılır ve kapanır. Genel <tag1> <tag2> <tag3> </tag3> </tag2> </tag1> şeklinde bir alt üst ilişkisi vardır. Açılan bir tag kapanmadan üst tag kapanamaz. En alttaki tag kapatılmalıdır. Html'de içiçe elementlerde alt element ile üst element aynı özelliğe değer veriyorlarsa alttaki elementin değeri geçerli olur. Örneğin üstteki element yazıların rengini kırmızı yap diyorsa ve altındaki element yeşil yap diyorsa alttaki elementin arasındaki yazılar yeşil olur. HTML hoşgörülü bir dildir. Açılan bir tag kapatılmamışsa da browser sayfayı gösterir. Ancak tag kapatılmadığı için açıldıktan sonraki tüm bölüme etkili olur. Bu da istenmeyen bir görünüm oluşturabilir. O yüzden her zaman açılmış bir tag'i kapatınız. Bir html kodu iki bölüme ayrılmıştır. Birinci bölüm sayfa hakkında genel bilgilerin bulunduğu head tag'i, ikinci bölümse sayfanın görünen kısmının bulunduğu body tag'idir. Aşağıda bu yapı görülmektedir.

3 <head> sayfa hakkında genel bilgiler buraya... </head> sayfanın görünecek olan kısmı buraya... Görüldüğü gibi html tag'i iki ana bölüme ayrılıyor. head ve body. Comment-Yorum Browser bir web sayfasındaki tüm yazılanları değerlendirir. Eğer siz bazı yazıları veya tag'leri browser'in değerlendirmesini istemiyorsanız comment kullanırsınız. Html yorum  ile biter. Aşağıda bir örnek görülüyor. <head> ; </head>

4 Html Yazış Stili Html elementleri yukarıdaki örneklerde görüldüğü gibi hiyerarşik bir yapı sergilerler. Yaptığın sayfanın html kodu bu hiyerarşiyi rahat görmenizi sağlamalıdır. Bir kodu aşağıdaki gibi yazsaydık anlayabilir miydiniz? <head> <title>welcome</title></head> <center><font color="red" size="12">hello world</font> </center> Eğer bir etiket başka bir etiketin içindeyse bir tab mesafesinde içeride olması çok iyi olur. Bu her zaman kullanmayabilirsiniz. Örneğin head ve body'yi içeriye almayabilirsiniz. Yine eğer etiket açılışı ve kapanışı bir satıra sığacak kadar küçükse tek satırda yazılabilir. Şimdi bu söylediklerimi koda uyguluyalım <head><title>welcome</title></head> <center><font color="red" size="12">hello world</font></center> Görüldüğü gibi html etiketini yok kabul ettik. Yine head ve title tek satıra sığdığı için tek satır haline getirdik. Ayrıca center ve font etiketinden oluşan grupta tek satır haline getirilmiştir. Bu yazışın yararı hem hiyerarşik yapıyı görebilirsiniz hem de çok az satır kullanmış olursunuz. Ancak eğer head etiketi içine başka bir etiket eklediğinizde tek satıra sığmaz ve okunaklılık azalır. Tekrar eski şekilde yazarsınız.

5 Yazı ile etiket nasıl yazılacağıda önemlidir. <title>welcome</title> şeklinde görüldüğü gibi etiket ile yazı arasında boşluk bırakılmamıştır. Aşağıda ki örnekte gereksiz boşluklar vardır. <head> <title> welcome </title> </head> <center> <font color="red" size="12"> hello world </font> </center> yazılar ile etiketler arasında boşluk, tab, enter yapmayın. Etiket biter bitmez yazıya başlayın ve biter bitmez kapatın. Html'de Yazı White space karekterler White space boşluk,tab gibi yazıya dahil olmayan karekterler için kullanılır. Html'de bu karakterler dikkate alınmaz. Sadece pre etiketinde bu karekterler dikkate alınır. Aşağıdaki kodda'ki boşluklar dikkate alınmayacaklardır.

6 <p> ağlasam sesimi duyar mısınız mısralarım da? dokunabilir misin ellerinizle göz yaşlarıma? </p> Sonuç olarak browser tek satırlık ağlasam sesimi duyar mısınız mısralarım da? dokunabilir misini ellerinizle göz yaşlarıma yazısını yazar. Çünkü p tag'i yeni satır karekterini ve tab karekterini dikkate almaz. Ancak p yerine pre tag'i kullanırsa istenen görüntü elde edilir. Paragraf-P Tag'i Html'de paragraf yazmak için p tag'i kullanılır. Ancak p tag'i yeni satır karekterini tanımadığı için tüm yazıları tek bir satıra yazar. Eğer yeni bir satıra geçmek istiyorsak br tag'i kullanılmalıdır. br tag'i yazının alt satırdan devam etmesini sağlar. Aşağıda üç satırlık bir paragraf yazı yazıyoruz. <p>html'de white space denilen karekterler dikkate alınmaz. O yüzden br etiketi kullanacağım <br> artık alt satırdan yazıma devam ediyorum. yeni bir satır açaçağım zaman yine <br> kullanıyorum. ſimdi üçüncü satırdayım.</p> Pre Tag'i Yukardaki şiir örneğinde yazdığımız şiiri p tag'i tek bir satılık yazı haline getirmişti. Eğer şiir'in

7 biçimini korumak istiyorsak pre tag'i kullanmalıyız. pre etiketi white space denilen karekterler dikkate alır. Yazdığınız yazı aynen görünür. Aşağıda kullandığımız pre tag'i ile istediğimiz görüntüyü elde ederiz. <pre> ağlasam sesimi duyar mısınız mısralarım da? dokunabilir misin ellerinizle göz yaşlarıma? </pre> Html'de Liste Liste'lere Giriş Html'de üç tip liste vardır. Birinci tip unordered list-kuralsız liste, ikinci tip ordered list-kurallı liste, üçüncü tipse definitions-tanımlamalar'dır. Unordered list'de her yeni eleman ekleyişinizde sizin istediğiniz bir işareti koyar. Örneğin yıldız,nokta vs.. Ordered list'te ise her eleman eklendiğinde list sayısını veya sırasını bir artırır. Örneğin 1 ise 2, a ise b, A ise B yapar. Siz her eleman eklediğinizde o bu artımı gerçekleştirir. Definitions'larda ise bir terim verilir ve sonra onun açıklaması verilir. her terim ve açıklamasını eklediğinizde aynı biçimde gözükecektir. Şimdi ayrı ayrı bu üç listeyi kullanıcaz.

8 Unordered Liste Bu listede her eleman eklediğinizde elamanın başına bir disk işareti koyar. Aşağıda bir unordered liste yapıyoruz. <ul> <li>ali <li>veli <li>züleyha </ul> Listenin başına koyacağı işareti değiştirebiliriz. Aşağıda listenin başına bir kare ekliyoruz. Üç tip'te olabilir: square-kare,disc-siyah disk,circle-çember <ul type="square"> <li>ali <li>veli <li>züleyha </ul> Listelerin işaretlerini değiştirmek için artık CSS(Casceding Style Sheet) kullanılmaktadır. CSS çok daha iyi özellikler sağlamaktadır. O yüzden listelerdeki type özelliğini kullanmayın.

9 Ordered Liste Bu listede her eleman eklediğinizde daha önceki işaret bir artırılır. Bu işeret 2 ise bir sonraki 3 olur. Eğer A ise bir sonraki B olur. Orderd listede beş tip vardır ,a b c..,a B C...,i ii iii...,i II II IV... Aşağıda bir ordered liste yapıyoruz. Type'ni vermediğimiz zaman şeklinde artar. <ol> <li>ali <li>veli <li>züleyha </ol> Şimdi a b c şeklinde artıralım. <ol type="a"> <li>ali <li>veli <li>züleyha </ol> Yukarda verdiğimiz uyarı geçerlidir. Artık listeleri biçimlendirmek için CSS kullanılmaktadır.

10 İç içe Liste kullanımı Listelerin içinde başka listeler bulunabilir. Örneğin bir unordered listenin elamanları ordered liste olabilir. Aşağıda ki örnekte bunu yapıyoruz. <ul> <li>ali <ol> <li>akıllı <li>iyi </ol> <li>veli <ol> <li>inatçı <li>kibirli </ol> <li>züleyha <ol> <li>korkak <li>uyanık <li>iyi </ol> </ul>

11 Html'de Link Link'lere Giriş Web sayfasında üzerine tıklandığında başka bir sayfaya bağlanmanızı sağlayan yazılara link deniyor. Link koymak için a tag'i kullanılır. href attribute'si ile bağlanılacak sayfanın adresi verilir. Aşağıda bir link yapılıyor. <a href=" w3'e bağlanın </a> bağlanılacak sayfa default-varsayılan olarak linkin bulunduğu pencereye yüklenecektir. Başka bir browser penceresinde gözükmesini istiyorsanız a tag'inin target attribute'sini kullanacaksınız. Aşağıda bağlanılan sayfayı yeni bir pencerede gösteren link vardır. <a href=" target="_blank">tıklayın w3'e bağlanın </a> Target attributesi için tanımlı 4 değer vardır. Bunlar _blank,_self,_parent,_top'dır. _blank sayfayı yeni bir pencerede açar. _self sayfayı link'in bulunduğu frame'de açar. _parent ise link'in frame'nin bulunduğu frameset'te açar. _top ise sayfayı en tepede tüm frame'lerin bulunduğu frameset'te açar. İstediğiniz bir frame'de açması için ise target attribute'sine frame'nin adını yazmanız yeterlidir. Image'dan da link yapılabilir. Image'a tıklayarak başka bir sayfaya bağlanılabilir. Şimdi bir image link'i yapıyoruz. <a href=" src="image.gif"></img></a> Anchor-Doküman İçinde Link Eğer sayfanız fazla uzunsa sayfanızın içinde link yapabilirsiniz. Örneğin sayfanızın sonunda

12 adres bilgisi var. Sayfanızın başından tıklandığında bu adresin bulunduğu yere gelinmesini istiyorsunuz. Şunu yapmalısınız. Adres'in yazıldığı yere bir isim vermelisiniz. Sonra sayfanın başında o isme bağlanan bir link yapacaksınız. Aşağıda biz bunu yapıyoruz. <a href="#adress">adress bilgisi</a> <p> sayfanın sonundayız.</p> <a name="adress">hacıyatmaz mah. Fahriye Abla Sok No:007</a> Görüldüğü gibi sayfanın sonundaki adres bölümüne adress ismini verdik. En yukardaki link'te #adress ile bu bölüme link sağladık. Bu link tıklandığında adress bölümüne gelinecektir. Bu başka sayfaların da belirli bir bölümüne link sağlanabilir. test.html sayfasının adress bölümüne ulaşmak için href="test.html#adress" yazmak yeterli olacaktır. Başka bir sitedeki sayfanın bir bölümünede aynı şekilde ulaşılabilir. Örneğin sayfasının adress bölümüne ulaşmak için href=" yazmanız gerekir. Base Sayfanızda klasörünün bulunduğu yere 10 link olduğunu düşünün. Her link eklediğinizde href attributesine

13 /test/t3.html şeklinde her defasında ifedesini yazmak zorundasınız. Bunun yerine ifadesini base yapıyosunuz. Bundan sonra href="t2.html" kullandığınızda sizin için çağırılıyor. Siz her defasında ifadesini yazmanız gerekmiyor. Aşağıda bu işlemi yapıyoruz. <head> <base href=" </head> <a href="t1.html">godoro t1</a> <a href="t2.html">godoro t2</a> <a href="t1.html">godoro t3</a> <a href="t2.html">godoro t4</a> <a href="t1.html">godoro t5</a> <a href="t2.html">godoro t6</a> Aynı işlemi target içinde yapabilirsiniz. Sayfanızdaki tüm linklerin main adında bir frame'de açılacağını düşünün. Eklediğiniz her link için target="main" yazmanız gerekir. Bunun yerine <base target="main"> yazarsanız bundan sonra her linke eklemeniz gerekmez. Daha sonra linkleri main'de değil de test frame'inde açmak isterseniz yanlızca base tag'in target attribute'sini değiştirmeniz yeterli olacaktır.

14 Html'de Tablo Tablolara Giriş Tablolar normal anladığımız manasındaki tablolar için kullanılmakla birlikte web sayfasının genel yerleşimi için de kullanılır. Bir resmin solda yazınında sağda olması için tek satırlı bir tablo yapıp ilk hücreye resmi, ikinci hücreyede yazıyı koyabilirsiniz. Tablolarda yeni satır için tr kullanılır. yeni satı açtıktan sonra hüçre eklemek için td tag'i kullanılır. Aşağıda iki satır ve sütunlu tablo yaratılıyor. <table> <tr><td> 11 eleman <td> 12 elemen <tr><td> 21 eleman <td> 22 eleman </table> colspan ve rowspan Hücrelerin genişliği ve yüksekliği değişik olabilir. Örneğin bir hücrenin genişliği yanındaki hücrenin genişliğinin iki katı olabilir. Bunun için colspan ve rospan kullanılır. Şimdi aşağıdaki örneğe bakalım. <table> <tr><td colspan="2">1111<td>12 elemen <tr><td>21<td>22 </table> Eğer colspan 2 denmesse 1111 hücresi ile 21 hücresi aynı genişlikte olurlar. halbuki 1111'in 21'in 2 katı genişliğinde olmasını istersek 1111'in altında hem 21 hemde 22 görülür. colspan=2 şu

15 anlama gelir. En küçük hücrenin boyunun iki katı. Aynı şey rowspan içinde geçerlidir. En küçük satırnın boyunun kaç katı olacağını verirsin. Örneğin bir resim solda ve sağdada 4 hücre olacak. Bunun için resmin bulunduğu hücrenin rowspan'ı 4 yapılır. Solda bir resim gözükür. Sağdada yukardan aşağıya 1, 2, 3, 4 görülür. <table> <tr> <td rowspan="4"><img src="test.gif"> <td>1 <tr> </tr> <td>2 </tr> <tr> <td>3 </tr> <tr> <td>4 </tr> </table> Html'de Form Form Nedir? Form web sayfasını ziyaret eden kullanıcıdan bilgi almak için kullanılır. Kullanıcının girdiği bilgiler bir CGI programına gönderilir. Bu CGI programı form bilgilerini alır, değerlendirir ve

16 cevap olarak bir HTML üretir. Form bilgilerini hangi programa gönderileceği form tag'inin action property'si ile verilir.örneğin <form action="test.jsp" name="test">... </form> Form bilgileri test.jsp adında bir programa gönderilmektedir. Action Method'u Form bilgisi CGI programına iki şekilde gönderilir. GET ve POST. GET'te form bilgileri cgıprogram?element1=value&element2=value şeklinde gönderilir. Eğer formun action property'si test.jsp ise ve kullanıcı name'i ali ve surname="dayioglu" girilmişse CGI programı şu şekilde çağrılır. test.jsp?name=ali&surname=dayioglu test.jsp form tag'nin action property'sinde girilen değerdir. form bilgileri? işaretinden sonra ve aralarında & işareti alarak gönderilir. Tabi ki bunu browser yapmaktadır. Browser form elementlerinin adını ve value'sini alarak bu string'i üretmektedir. <form action="test.jsp" method="get">... </form> <form action="test.jsp" method="post">... </form> GET method'unun bir sakıncası vardır. Kullanıcı browser adres bar'ına yazarak direkt olarak CGI

17 programını çağırabilir. Eğer formun önce doldurulduktan sonra CGI programını çağırmak istiyorsanız GET method'unu kullanamazsınız. Bunun yerine POST methodunu kullanmak gerekmektedir. POST methodunda form bilgileri HTTP'in Post methodu kullanılılarak gönderilir. Halbuki GET metodunda tüm form bilgisi URL'eye eklenmişti. Eğer value çok büyükse GET methodu zaten kullanılamaz. Örneğin bir resim dosyasının içeriği gönderilmek istenirse POST method'u kullanılmalıdır. Submit Düğmesi Form bilgilerini CGI programına göndermek için forma submit düğmesi konulur. Submit düğmesi tıklandığında fomr bilgileri karşı tarafa gönderilir. Submit düğmesi eklemek için input tag'inin type attributesi submit olmalıdır. <input type="submit" value=" Tamam "></input> value özelliği ile submit düğmesini üzerindeki yazı verilmiştir. Text Field-Text Alanları Formlarda tek satırlık yazı girmek için input tag'inin type property'si kullanılır. aşağıdaki örnekte bir text alanı yaratıyoruz. <input type="text" size="10" name="surname"></input> Text alanı için type property'sine text değeri verilir. Size ise text alanının boyudur. Name property'si text alanaı isim vermek içindir. İsim verildiği zaman CGI programı bu ismi kullanarak text alanına girilen yazıyı alabilir.yazı girmek için diğer element textarea tag'idir. TextArea tag'i

18 birden fazla satırlık yazıları almak için kullanılır <textarea cols="10" rows="10" name="message"></textarea> cols kaç sütun olacağı rows ise kaç satır olacağıdır. Şifre girmek için kullanılan tag'de input tag'idir. type="password" yazarsanız şifre girilen bir text alanı elde edersiniz. <input type="password" size="10" name="pass"></input> Onay Kutusu Kullanıcının bir bilgiyi evet veya hayır diye cevap verebilmesini sağlayan elementlerdir. beyaz bir dikdörtgen şeklindedir. Tıklandığı zaman onay işareti gözükür. Bir kere daha tıklanırsa onay işareti kalkar. <input type="checkbox" name="smoking" value="yes">sigara içer misiniz?</input> Eğer kullanıcı bu onay kutusunu tıklarsa CGI programına smoking(sigara içme) değişkeninin değeri yes olarak gönderlir. Çünkü value property'si yes yazılmıştır. Eğer onaylanmazsa hiç bir değer gönderilmez. Seçenek Kutusu Kullanıcının birden fazla seçenekten birini seçmesini sağlayan elementlerdir. Bir seçenek seçildiğinde daha önce seçili olanın seçiçiliği kalkar. Yani yanlızca bir tane seçilebilir. <input type="radio" name="sex" value="fame">bayan</input> <input type="radio" name="sex" value="male">bay</input> Örnekte kullanıcıdan cinsiyet seçilmesi istenmektedir. İki element'in isminin aynı olduğuna

19 dikkat etmeniz gerekir. Eğer isimleri aynı olmassa hiç bir anlamı kalmaz. Hangisi seçiliyse CGI programına o elementin value'si gönderilecektir. Örneğin kullanıcı bay'ı seçmişse karşı tarafa sex=male gönderilecektir. Düğmeler-Reset,Button Rest düğmesi formda doldurulan bilgilerin temizlenmesi için kullanılır. <input type="reset" value="temizle"></input> Button ise normal bir düğme eklemek içindir. Bu düğme tıklandığında bir javascript kodu çalıştırlıması içindir. Aşağıdaki örnekte tıklandığında ekrana mesaj gösteren bir düğme ekliyoruz. <input type="button" value="tıklayın" onclick="alert('tıkladız. Aferin')"></input> onclick ile düğme tıklanma olayını yakalarsınız. Ve alert ile mesaj gösterirsiniz. File Element Kullanıcının bilgisayarından bir file almak için bu tag kullanılır. Bu tag koyulduğunda ekranda bir text alanı ve bir browse düğmesi görülür. Browse düğmesi ile verilmek istenen file seçilir. Bu düğme File seçmek için kullanılan pencereyi açmaktadır. Seçilen file text alanında görülür. Form submit edildiğinde seçtiğiniz file'in bilgisi CGI programına gönderilir. <input type="file" name="selectfile"></input> Hidden Element Hidden elementler web sayfasında görülmezler. Bunlar zaten belli olan verileri CGI programına göndermek için kullanılırlar.

20 <input type="hidden" name="mailaddress" burada mailaddres adlı elementin value'si bellidir. Form CGI programına gönderildiğinde bu bilgi gönderilir. Bir Basit Form Örneği Aşağıda tüm bu elementleri kullanan bir form görülmektedir. <form action="test.jsp" method="get" name="testform"> <input type="hidden" name="count" value="3"></input> Kullanıcı Ad: <input type="text" name="username" size="10"></input><br> ſifre: <input type="text" name="pass" size="10"></input><br> Cinsiyet: <input type="radio" name="sex" value="fale">bayan</input> <input type="radio" name="sex" value="male">bay</input> <br> Hangi Müzisyenleri Seviyorsunuz?<br> <input type="checkbox" name="music" value="nesetertas">neşet Ertaş</input><br> <input type="checkbox" name="music" value="orhangencebay">orhan Gencebay</input><br> <input type="checkbox" name="music" value="zekimuren">zeki Müren</input><br> File Seç: <input type="file" name="selectfile"></input><br> Mesaj Yaz:<br>

21 <textarea name="message" cols=20 rows=20></textarea><br> <input type="submit" value="tamam"></input> <input type="reset" value="temizle"></input> </form> Html'de Frame Frame'e Giriş Browser penceresi birden fazla sayfanın gösterilebilmesi için frame'lere ayrılabilir. Örneğin solda menuleri gösteren bir sayfa ortada içeriğin gösterildiği bir sayfa bulunabilir. Frame yerleştirmek için önce frameset yerleştirmek gerekir. Frameset iki frame'in yerleştirildiği frame'dir. örneğin 3 frame koymak istiyorsanız önce sayfaya bir frameset ekleyerek ikiye böleceksiniz. İki bölümden birine frame değil başka bir frameset yerleştireceksiniz. Şimdi örnek olarak sol'da ve sağ'da olamak üzere iki frame yaratıyoruz. <frameset cols="30%,*"> <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> Sol frame'in adı left, sağ frame'in adı right yaptık. Frameset'in cols özelliği ile soldaki frame'in genişliği tüm genişliğin %30'u olduğunu belirttik. * ile geri kalan genişliğin yani %70'in sağ

22 frame'e ayrıldığını söylemiş olduk. Şimdi yukarıda bir frame ve aşağıda bir frame yapıyoruz. <frameset rows="30%,*"> <frame src="top.html" name="top"> <frame src="bottom.html" name="bottom"> </frameset> Burada da yukarıdakine benzer şekilde tüm yüksekliği %30'u top.html'e geri kalan ise bottom.html'e verilir. İstinirse % cinsinden değil de pixsel olarakta verilebilir. İkiden fazla frame yerleştirmek için frameset içinde frameset kullanmamız gerekir. Şimdi solda bir frame, sağda ise üst'te ve ortada bir frame yapalim. Bunun için önce sol ve sağ diye ikiye bölmemiz gerekir. Sonra sağ bölgeyede üst ve ortadaki olarak iki frame ekleyeceğiz. <frameset cols="30%,*"> <frame src="left.html" name="left"> <frameset rows="20%,*"> <frame src="righttop.html" name="righttop"> <frame src="rightbottom.html" name="rightbottom"> </frameset> </frameset> Görüldüğü gibi sol'a left.html yerleşir. Sağ üste righttop.html sağ alta ise rightbottom.html gösterilecektir.

23 IFrame İstediğiniz yere, istediğiniz genişlikte bir frame yerleştirmek için iframe kullanılır. Şimdi aşağıda bir iframe ekliyoruz. <iframe src="test.html" width="200" height="300" scrolling="yes" frameborder="1"> </iframe> Html'de Object'ler Html'de Object'ler Image,applet ve iframe'ler bir object'tir. Object etiketi ile eklenebilirler. Applet etiketi artık deprecated olmuştur. (Html'in bir daha ki sürümde bu etiket olmayacak. Şu anda desteklenmektedir.) Image Ekleme Image object tag'i veya img tag'i ile eklenebilir. img tag'i ile ekleyelim <img src="test.html"></img> image eğer görünmediği zaman ekranda görülecek yazı alt attribute'si ile verilebilir. <img src="test.html" alt="bu resim önemlidir"></img>

24 Applet Ekleme Applet'ler browser'larda çalışan java programcıklarıdır. Bunları web sayfasına eklemek için applet etiketi kullanılır. Aşağıda Test.class appletini sayfaya ekliyoruz. <applet code="test.class" width="500" height="500"></applet> Eğer applet dışarıdan parametre alıyorsa bu param tag'i ile verilir. Aşağıda parametre alan bir applet örneği bulunmaktadır. <applet code="test.class" width="500" height="500"> <param name="test" value="a"> <param name="color" value="red"> </applet> Cascading Style Sheet Style Etiketinin Kullanımı Tüm stiller head etiketi içinde style etiketi ile yazılabilir. Aşağıda örnek görülmektedir. <head> <style>...stiller buraya yazılır... </style> </head>...stiller kullanılır...

25 İnline Kullanım Style'ler yanlızca tek bir element için bir attribute ile yaratılabilir. <p style="color:red;font-size:12pt">inline stil kullanılmış paragraf</p> Stillerin Ayrı Dosyadan Kullanılması Stiller.css ile ayrı bir dosyaya yazılabilir. Aşağıdaki örnekte test.css adlı dosyadaki css kullanılmaktadır. Bu link etiketi ile test.css dosyasının sayfaya bağlanması ile yapılır. <head> <link href="test.css" type="text/css" rel="stylesheet"></link> </head>...test.css dosyasındaki stiller kullanılır...

26 Script Script Html dinamik değildir. Yani kullanıcıya göre kendini değiştiremez. Bunun için scriptler kullanılır. Script dilleri javascript,jscript,vbscript'tir. Script etiketi Script'ler script etiketinin içine yazılırlar. Script etiketinin language özelliği ile hangi script dilininin kullanılacağı belirtilir. Langauge html 4.0 ile yerini type özelliğine bırakmıştır. Aşağıda scriptlerin sayfaya eklenmesi görülmektedir. <head> <script language="javascript">...script buraya yazılır... </script> </head>... <script language="javascript">...script buraya yazılır... </script> Genellikle scriptler head etiketinin içine koyulurlar. Ancak bu şart değildir. Script kodları ayrı bir

27 dosyaya yazılabilir. Javascript'te bu ayrı dosyaların uzantısı.js olur. Aşağıdaki sayfada test.js dosyasının kodları kullanılmaktadır <head> <script src="test.js" language="javascript"></script> <script language="javascript">...burada test.js dosyasındaki script kullanılabilir... </script> </head>... <script language="javascript">...burada test.js dosyasındaki script kullanılabilir... </script> Eğer browser scripti desteklemiyorsa noscript etiketi kullanılır. Script desteklenmediği için noscript etiketi ile kullanıcıya bir açıklama yapılır. Aşağıda örnek görülmektedir. <head> <script language="javascript">...script kullanılabilir... </script> <noscript>browser scripti desteklemiyor</noscript> </head>

28 Eğer browser scripti desteklemiyorsa tüm script etiketinin içini yazı olarak ekranda gösteririr. Script kodlarını ekranda görmek kullanıcının normal olarak hoşuna gitmez. Bunu engellemek için script etiketi html yorumu(comment) içine alınır. Böylece scripti tanımayan javascript kodlarını ekranda göstermez. Artık tarayıcılar script etiketini desteklediği için böyle bir şeye gerek yoktur. Aşağıda örnek görülüyor. <head> <script language="javascript">  </script> </head>