Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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.

Benzer bir sunumlar


... konulu sunumlar: "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."— Sunum transkripti:

1 BÖLÜM VI HTML

2 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: HTML bir metin işaretleme dilidir. Yukarıdaki örnekte HTML koyu olarak yazılacaktır.

3 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)

4 HTML Versiyonları Cascading Style Sheets (CSS) 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.

5 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.

6 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.

7 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ı

8 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ü.

9 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

10 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

11 HTML ( Nedir? 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.

12 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.

13 Bir Web Sayfasının Genel Yapısı Başlık Metni Body Metni Not: Web Sayfaları 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. ile etiketleri arasında bir fark yoktur.

14 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İKETSON ETİKETAÇIKLAMA HTML dokümanının başlangıç ve bitini tanımlar. Başlık bölümünün başlangıç ve bitimini tanımlar. Web Sayfasının başlığını tanımlar. Browser’ın isim çubuğunda görünecek olan metindir. 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.

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

16 İ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.

17 Etiket Özellikleri (Tag Attributes) Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin davranışını düzenlemek için değerler atarız. Kullanımı; Örnek: Örnek olarak etiketini söyleyebiliriz. etiketi yeni bir paragraf başlatır ve varsayılan olarak metni sola yazlar. Bu Metin Sola Yaslıdır. Bu Metin Sağa Yaslıdır. Bu Metin Ortalanmıştır.

18 İ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 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.

19 İ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.... 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.

20 Etiket Özellikleri (Tag Attributes) Etiketi Bütün HTML dosyaları kodu ile başlar kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. 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 ve etiketlerini etiketlerini, (CSS) etiketlerini ve etiketlerini içerir.

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

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

23 Etiket Özellikleri (Tag Attributes) 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.

24 Etiket Özellikleri (Tag Attributes) Örnek: Ornek08.html Erkan TANYILDIZI

25 Etiket Özellikleri (Tag Attributes) 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.

26 Etiket Özellikleri (Tag Attributes) ….. Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

27 Etiket Özellikleri (Tag Attributes) ….. 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.

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

29 Etiket Özellikleri (Tag Attributes) Diğer Ö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.

30 Etiket Özellikleri (Tag Attributes) Diğer Özelikleri Örnek: WEB SAYFAMA HOŞGELDİNİZ (003_link.htm) WEB SAYFAMA HOŞ GELDİNİZ Web Sayfası Fırat Üniversitesinin Sayfasına Gitmek İçin Tıklayınız Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin Tıklayınız Arama motoru Google

31 Etiket Özellikleri (Tag Attributes) Diğer Özelikleri Örnek:

32 Etiket Özellikleri (Tag Attributes) Etiketi 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.

33 Etiket Özellikleri (Tag Attributes) Etiketi Örnek Ornek09.html

34

35

36 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.

37 Belge Biçim Etiketleri İLK ETİKETSON ETİKETAÇIKLAMA... 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 Emphasis: Güçlü Vurgu Ediketidir. Genellikle Bold kalın metin olarak gözükür. Emphasis: Vurgu Etiketi. Genellikle italik gözükür. Bold: Kalın yazı Italic: İtalik yazı Underline: Altçizgili yazı Bu iki deyim arasına yazılan metin üst indis olarak işlem görür. Bu iki deyim arasına yazılan metin alt indis olarak işlem görür.

38 Belge Biçim Etiketleri İLK ETİKETSON ETİKETAÇIKLAMA 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 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. 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. 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.

39 Belge Biçim Etiketleri İLK ETİKETSON ETİKETAÇIKLAMA Arada yazılan metni ortalamada kullanılır. Bunun yerine de kullanılabilir. yokLine Break: Satır kırma etiketi. yokHorizontal Rule: Yatay çizgi etiketi yok Sayfanın genel metin büyüklüğünü ve rengini değiştirmede kullanılır. size, color özellikleri vardır. Bir metin bloğunun büyüklüğünü, rengini ve biçimini ayarlamada kullanılır. Kullanıldığı alanda geçerli olan fontun büyüklüğünün 1 derece büyüğünü yazmada kullanılır Kullanıldığı alanda geçerli olan fontun büyüklüğünün 1 derece büyüğünü yazmada kullanılır

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

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

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

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

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

45 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.

46 Metin Biçimleme

47 Metin Biçimlendirme Etiketlerinin Kullanımı Örnek: Metin Biçimleri (005_text.htm) Metin Biçimleri (005_text.htm) Güçlü Vurgu STRONG (Strong Emphasis) Metni Kalın B (Bolt) Gibi Gözüküyor. Vurgu EM (Emphasis) Metni İtalik I (Italic) Gibi Gözüküyor.

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

49 Metin Biçimlendirme Etiketlerinin Kullanımı

50

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

52 Fontlar Etiketi Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı :... 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.

53 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.

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

55 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.

56 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

57 Fontlar ve Etiketleri ve Bağlı Fontlar Önceki örnekte 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. ve 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 ile ve ile aynı kullanıma sahiptir.

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

59 Fontlar Örnek:

60

61 Listeler HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar : Sıralı listeler (ordered list)-Otomatik Numaralı ( Sırasız listeler (unordered list)-Madde imli ( ) Tanımlama listeleri (definition list) Kullandığınız stil hangisi olursa olsun. Maddelere 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.

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

63 Sıralı Listeler Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) 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 nin START etiketinden ayarlayabileceğimiz gibi etiketinin VALUE özelliğinden de ayarlayabiliriz.

64 Sıralı Listeler

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

66 Sırasız Listeler Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz. etiketi yerine etiketini kullanıyoruz, liste maddeleri için kullandığımız etiketi burada da geçerli. 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).

67 Sırasız Listeler

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

69 Tanımlama Listeler

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

71

72 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

73 Renk Kodları Fontlar konusunda, metnin rengini belirlerken 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.

74 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.

75 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).

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

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

78 Artalanı Renklendirmek

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

80

81 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 adresine bakabilirsiniz.

82 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;

83 Resimler Etiketinin Özellikleri HTML ’nin çoğu taglarından farklı olarak 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?)

84 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ı:

85 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 : 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.

86 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.

87 Resimler Bu şekilde ardarda../ ifadesiyle istediğimiz kadar üst dizine geçebiliriz. Eğer iki üste geçeceksek../../ ifadesi işimizi görecektir.

88 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.

89 Resimler 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.

90 Resmi Hizalama Örnek: WEB TASARIMI Resmin Align Özelliği Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.

91 Resmi Hizalama Örnek

92 Resmi Hizalama 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 etiketini kullanırız.

93 Resmi Hizalama Örnek: WEB TASARIMI Resmin Align Özelliği Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor. Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.

94 Resmi Hizalama Örnek:

95 Artalana Resim Koyalım Artalanı renklendirmeyi öğrenmiştik: ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir. 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.

96 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.

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

98

99 Bağlantılar... 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.

100 Bağlantılar Bağlantılar (Hyperlinks) Sayfalara link (bağlantılar) oluşturmak için Anchor etiketi kullanılır. 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.

101 Bağlantılar Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim :... 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.... 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.

102 Bağlantılar buraya tıklandığında meyve resmi açılacak 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.

103 Bağlantılar midi dosyalarını çekmek için tıklayın İ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.

104 Bağlantılar 2.sayfaya gitmek için tıklayın 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. kedi resmi işte çok güzel bir karanfil otomobil resimleri Bu 3 örnekte altdizinlere/üstdizinlere verilen bağlantıya örnekler görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli.

105 Bağlantılar tıklayın sitemi ziyaret edin İnternet adresine giden link örneği. tıklayın dosyaları indirin Bu ise bir ftp adresine verilen link örneği. mail atın 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. Bölümüm Title ifadesi bağlantıya açıklama eklemeyi sağlar.

106 Bağlantılar-Yer İmi... ve... 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 browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek....

107 Bağlantılar

108 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ı... ile işaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:

109 Resimlere bağlantı özelliği kazandırmak Bunun için resmi yerleştirmek için kullandığımız: etiketini... 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.

110 Target parametresi Bağlantının açılacağı pencereyi belirtmek için target parametresi kullanılır....

111 Resim ve Bağlantılar Bir resme hyperlink (bağlantı) eklemek için ve etiketlerini birlikte kullanırız. Örnek: image1.htm -- Resim Örneği image2.htm -- Resmin Align Özelliği image3.htm -- BR etiketinin clear özelliği image4.htm -- Width ve Height Özelliği images.htm -- Sayfanın Kendisi

112 Resim ve Bağlantılar Bir resme hyperlink (bağlantı) eklemek için ve etiketlerini birlikte kullanırız. Örnek: image1.htm -- Resim Örneği image2.htm -- Resmin Align Özelliği image3.htm -- BR etiketinin clear özelliği image4.htm -- Width ve Height Özelliği images.htm -- Sayfanın Kendisi

113 Image MAP- Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN ve 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)

114 Image MAP- Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN 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. Etiketi etiketi ile etiket bloğunun arasında tıklanabilir alanlar ve hedef linkler tanımlanır. 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.

115 Image MAP- 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.

116 Image MAP- Image MAP- RESİMLERİNİZİN HARİTASINI ÇIKARTIN Son olarak etiketinin usemap özelliğine haritanın adı yazılarak haritaya çağrı yapılır. Örnek: map.htm Untitled Document

117 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.

118

119 Ö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. " < > ) --> & ©

120 Tablolar Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON ETİKET AÇIKLAMA Tablonun başlangıç ve bitimini tanımlamada kullanırız. 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. Table Row: Tablo satırı oluşturmada kullanılır. Table Header: Tabloya başlık hücresi ekler. Başlık hücresi bold ve ortalı yazılır. Table Data: Tablonun satırına veri elemanı (hücre) eklemede kullanılır.

121 Tablolar

122 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:

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

124 Tablolar

125 Tablolar Etiketi 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.

126 Tablolar 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.

127 Tablolar ve 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

128 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ığı gövdeyi etiketleri arasına yazarız. etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık etiketi ile belirtilir ve bunlar etiketinde olduğu gibi... arasına yazılır. Tabloda satır ve sütunları belirten ve etiketleri... arasına alınır.

129 Tablolar

130 Parametreler border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

131 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.

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

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

134 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.

135 Parametreler

136 etiketi için parametreler etiketi için parametreler bgcolor parametresi hücreyi renklendirmede kullanılır.

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

138 etiketi için parametreler 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.

139 etiketi için parametreler etiketi için parametreler

140

141 align parametresi hücre içinde yatay hizalama yapar.

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

143 Hücreleri Birleştirme 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 :

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

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

146 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.

147 Sayfa Biçimlendirmede Tablo Kullanımı Örnek: FIRAT ÜNİVERSİTESİ Web Sitemiz Hakkında Öğrenciler Üniversitemiz Elektronik ve Bilgisayar alanında deneyimli öğretmenler yetiştirmektedir.

148 Sayfa Biçimlendirmede Tablo Kullanımı Personel Bigisayar Sistemleri Elektronik Kontrol ve Telekom

149 Sayfa Biçimlendirmede Tablo Kullanımı Göner Bu WEB sayfası deneme amaçlı yapılmıştır.

150 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.

151

152 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.

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

154 Etiketi Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için ve etiketlerini kullanırız. i kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz. 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)

155 Etiketi Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde. Üç 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. 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: etiketi ve etiketinin dışında kullanılması nedeni ile diğer çoğu etiketlerden farklıdır.

156 Etiketi ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da etiketi ile yaparız. Özellikleri; etiketinin içerisinde her bir satır ya da sütun çerçeve için 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.

157 Ç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.

158 Çerçeveler

159 Çerçeveler 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.

160 ... Ç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.

161 ... 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.

162 ... 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. 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 etiketi kullanıyoruz.

163 ... 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.

164 ... 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... etiketleri arasında kullanmayı unutmayın !

165 ... 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.

166 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.

167 Daha karmaşık çerçeveler

168

169

170 Ç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…

171 Çerçeveler Etiketi Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa bu etiket arasında oluşturulacak olan etiket bloğuna yazılır. Çerçeveler Browserınız çerçeveleri desteklemiyor

172 Çerçeveler 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ı

173 Çerçeveler Örnek:

';
Google Reklamları