HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.

... konulu sunumlar: "HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu."— Sunum transkripti:

1 HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

2 Html Giriş Html Nedir? Açılımı H yper T ext M arkup L anguage tam Türkçe’si bulunmamakla birlikte HiperMetin İşaretleme dili denilebilir Web sayfalarını oluşturmak için kullanılan ana dildir. Önceden tanımlanmış, biçimlenmiş etiket (tag) lerini kullanır. Bir programlama dili değil, işaretleme dilidir. Html dosyaları, sunucu bilgisayarda.html ya da.htm uzantılı olarak saklanır

3 Html Giriş Html Nedir? Html etiketlerinin görevi, web sayfalarının birbirine nasıl bağlanacağını; sayfa içindeki metin, resim vb. elemanların nasıl yerleşeceğini belirlemektir. Sunucudan istemciye gelen web sayfasının içeriği bu etiketler vasıtasıyla biçimlendirilerek ziyaretçiye sunulur. İçeriğin biçimlendirme görevini İnternet Explorer, Firefox, Chrome gibi web tarayıcıları üstlenmiştir.

4 Html Giriş Html Nedir? Html tasarlanırken son derece basit ve anlaşılır olması planlanmıştır. Bu nedenle özel programlara ihtiyaç duyulmadan sadece NotePad ile yazılabilir. Günümüzde html kodlarını otomatik olarak oluşturan bir çok editör programı mevcuttur. Bunların bazıları Dreamweaver, Frontpage, Corel Web Suite olarak sıralanabilir.

5 XHTML XHtml Nedir? XHTML açılımı eXtensible Hyper Text Markup Language yani html’in hem genişletilmiş hem de daha işlevsel olan versiyonudur. Html ve Xml yapılarının World Wide Web Consortium (W3C) tarafından 2001 yılında birleştirilerek XHTML 1.0 olarak duyurmasıyla ortaya çıkmıştır. XML (eXtensible Markup Language) ise genişletilmiş işaretleme dilidir. Şimdilik XML’in daha önceden tanımlanmış etiketlerle değil kullanıcının tanımladığı etiketlerle oluşturulduğunu bilmemiz yeterlidir.

6 XHTML Neden XHtml? Html de uyulması gereken kurallar daha gevşektir. Bu nedenle çoğu zaman düzgün bir şekilde gösterilmeyen sayfalar ortaya çıkmaktadır. Xhtml de ise belirli katı kurallar bulunmaktadır. Böylece hem görüntü hem de hız açısından daha işlevsel sayfalar oluşturulur. Örneğin DOCTYPE etiketi kullanılmak zorundadır. Arama motorları açısından da indekslemenin daha çabuk olması ve üst sıralarda yer alabilmesi için Html’den daha katı kurallara sahip Xhtml’in kullanılması daha iyi olacaktır.

7 XHTML XHtml ile HTML Arasındaki Farklar 1.Etiketler düzgün bir biçimde iç içe geçmelidir. Bu yazım yanlıştır: Bu yazım ise doğrudur

8 XHTML XHtml ile HTML Arasındaki Farklar 2.Tüm etiketler küçük harflerle yazılmalıdır. Bu yazım yanlıştır: Bu yazım ise doğrudur

9 XHTML XHtml ile HTML Arasındaki Farklar 3.Tüm XHTML etiketleri kapatılmalıdır. Bu yazım yanlıştır: Bu yazım ise doğrudur

10 XHTML XHtml ile HTML Arasındaki Farklar 4.Boş elemanlar da sonlandırılmalıdır. Bu yazım yanlıştır: Bu yazım ise doğrudur XHTML web sayfalarınızı tarayıcılar ile uyumlu hale getirmek istiyorsanız "/" işaretinden önce bir boşluk bırakmalısınız.

11 XHTML XHtml ile HTML Arasındaki Farklar 5.Öznitelikler küçük harflerle yazılmalıdır Bu yazım yanlıştır: Bu yazım ise doğrudur

12 XHTML XHtml ile HTML Arasındaki Farklar 6.Öznitelik değerleri tırnak işareti içinde olmalıdır. Bu yazım yanlıştır: Bu yazım ise doğrudur

13 XHTML XHtml ile HTML Arasındaki Farklar 7.Öznitelik sadeleştirme kaldırılmıştır. Bu yazım yanlıştır: Bu yazım ise doğrudur

14 XHTML XHtml ile HTML Arasındaki Farklar 8.id parametresi name parametresinin yerine geçmiştir. Bu yazım yanlıştır: Bu yazım ise doğrudur

15 XHTML XHtml ile HTML Arasındaki Farklar 9. XHTML DTD zorunlu elemanları tanımlar. DTD dokümanı sayfada uyulması gereken kuralları bilgisayarın anlayabileceği bir dille belirtir. Yazdığınız XHTML dokümanının hangi standartlara uyduğunu DTD belirtir ve sayfada ilk satır olarak DOCTYPE elemanı içerisinde yer almalıdır. DOCTYPE elemanı bir XHTML elemanı değildir ve standartlara uymasına gerek yoktur. Ayrıca sonlandırılması da gerekmez.

16 XHTML XHtml ile HTML Arasındaki Farklar 10.DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML doküman tipi vardır. a)XHTML Strict DTD (Sıkı XHTML) XHTML standartlarına uygun kod yazmak istiyorsanız ve sayfanıza görünüm vermek için CSS kodlarını kullanacaksanız bu tip sizin için. XHTML Strict DTD kullanacağınız HTML kodlarınızın başına eklemeniz gereken kod;

17 XHTML XHtml ile HTML Arasındaki Farklar 10.DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML doküman tipi vardır. b)XHTML Transitional DTD (Geçiş XHTML) XHTML Transitional DTD eğer standartlarına uygun kod yazmak istiyorsanız ve XHTML’in görünüm yeniliklerini yani CSS’i kullanmayacaksanız örneğin gibi html etiketlerini kullanıyorsanız bu tip sizin için uygun. XHTML Strict, gibi etiketleri desteklemez.

18 XHTML XHtml ile HTML Arasındaki Farklar 10.DOCTYPE zorunlu olarak mevcut olmalıdır. Geçerli 3 adet XHTML doküman tipi vardır. c)XHTML Frameset DTD (Çerçeveli XHTML) XHTML Frameset DTD eğer standartlarına uygun kod yazmak istiyorsanız ve sayfanız çerçeveli bir tasarıma sahip ise bu doküman tipini kullanmalısınız.

19 XHTML Head Etiketi etiketi içinde genel bilgiler ve sayfa bilgileri bulunur. Bu bilgiler tarayıcı ve arama motorları tarafından okunmaktadır. XHTML standartlarına göre aşağıdaki etiketler etiketi içerisinde kullanılmalıdır. -Eklenen başlık tarayıcın durum çubuğunda yer alır. - Bir HTML dokümanında daha sonra belirtilecek kaynakların aranması gereken temel URL’i gösterir. - Bu etiket, HTML sayfası ile farklı bir dosya arasındaki ilişkiyi tanımlar. - Arama motorlarının kontrol ettiği bölüm, burada anahtar kelimeler tanımlanır.

20 XHTML Head Etiketi Örnek olarak görelim:

21 XHTML Base Etiketi Etiketi: Bir HTML dokümanında daha sonra belirtilecek kaynakların aranması gereken temel URL’i gösterir. Server veya tarayıcıya neyi nerede arayacaklarını bildirir. Html dokümanının başlık kısmına şeklinde bir tanımlama ekleyerek her resim için ayrı ayrı yazmaktan kurtuluruz. http://website.com.tr/resimler/ Ayrıca resimleri farklı bir dizine aldığınızda sitedeki bütün kodları tek tek düzeltmektense yalnızca base etiketini düzenleriz.

22 XHTML Meta Etiketi Abstract Güncel sayfanızın kısa özetinin belirtilmesini sağlar. Author Site yapımcısının adı ve iletişim bilgilerinin bulunduğu etikettir.

23 XHTML Meta Etiketi Copyright Sitenin telif hakları konusunda bilgi veren etikettir. Description Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir. Maksimum 139 karakter olabilir.

24 XHTML Meta Etiketi Expires Site içeriğinin hangi tarihte zaman aşımına uğradığını arama motorlarına ileten etiket Sayfayı daimi olarak geçersiz kılmak için content özelliğine 0 değeri atanmalıdır. Keywords Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket. Anahtar kelimler virgülle ayrılır 10 taneyi geçemez.

25 XHTML Meta Etiketi Language Sitenizin varsayılan dilini belirleyen etiket Revisit-After Arama motorlarına sitenin içeriğinin kaç günde bir güncellendiğini belirten etiket.

26 XHTML Meta Etiketi Redirect Sayfanın belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Aşağıdaki örnekte sayfa 5 saniye sonra belirtilen adrese yönlenecek

27 XHTML Meta Etiketi Robots Arama motorlarına sayfa ve sayfadaki linklerin takibi hakkındaki davranışlarının bildirilmesini sağlayan etikettir. Content özelliği aşağıda verilen değerleri alabilir. Virgül ile ayrılarak birkaç değer birden verilebilir. index: Sayfanın dizine eklenmesini bildirir. follow: Sayfa içindeki bağlantıların (linklerin) izlenmesini belirtir. Archive: Sayfanın önizleme için ekran görüntüsünün oluşturulmasını bildirir. Noindex: Sayfanın dizine eklenmesini engeller. Nofollow: Sayfa içindeki bağlantıların(linklerin) izlenmesini engeller

28 XHTML Meta Etiketi Robots Content özelliğinin alabileceği diğer değerler: noarchive: Sayfanın önizleme için ekran görüntüsünün oluşturulmasını engeller. Saha önce oluşturuldu ise silinmesini sağlar. All: Tüm olumlu bildirimleri uygular. None: Sayfanın gözardı edilmesini bildirir. Bir arama motoru robotu aksi belirtilmediği sürece bir sayfayı dizine ekleyebilir, linkleri takip edebilir ve sayfanın önizlemesini oluşturabilir. Bu nedenle robots özelliği ile all, follow, index ve archive değerlerinin kullanımına gerek yoktur. Bunlar yerine sadece robotu engellemek amacıyla none, noindex, nofollow ve noarchive değerlerinin kullanımı daha doğru olacaktır.

29 XHTML Meta Etiketi Robots

30 XHTML Meta Etiketi charset Sayfanın karakter kodlamasını belirtmek için kullanılır. Türkçe karakterlerin düzgün görüntülenmesini sağlar. Copyright Sayfanın oluştuğu yılı belirtmek için kullanılır

31 XHTML Başlıklar - Headings Sayfaya başlık eklemek için … arasındaki başlık etiketleri kullanılır. boyut olarak en büyük başlık etiketidir. boyut olarak en küçük başlık etiketidir. Arama motorları başlık etiketlerinin içeriğini kullanmaktadır. Bu nedenle başlık etiketlerini kullanmak önemlidir. Örnek olarak görelim…

32 XHTML Başlıklar - Headings

33 XHTML Yatay Çizgi- Etiketi etiketi sayfada boylu boyunca yatay bir çizgi yapmamızı sağlar. Kendi içinde kapatılan bir etikettir. Örnek olarak görelim…

34 XHTML Yatay Çizgi- Etiketi etiketinin aldığı özellikler : Align: Çizginin sayfadaki konumunu belirler. Size: Piksel cinsinden çizgi kalınlığını belirler. Varsayılan değeri 2 piksel’dir. Width: Çizginin kalınlığını belirler. Varsayılan değeri %100’dür. Color: Çizginin rengini belirler. NoShade: Gölgeli olmayan çizgi

35 XHTML Yorumlar - Comments Yorumlar yazılan kodun daha kolay okunmasını sağlamaktadır. Yorumlar, tarayıcı tarafından yok sayılır. Yani dikkate almaz. Bir kodda ne kadar çok yorum varsa kod o kadar iyidir. Yorum etiketi karakterleri ile kapatılır ve yorum bu karakterler arasına yazılır. Örnek olarak görelim…

36 XHTML Yorumlar - Comments Örnek olarak görelim…

37 XHTML Paragraflar - Paragraphs Metnin içinde paragraf oluşturmak için kullanılır. Paragraf etiketi ile açılır ile kapatılır. Otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Örnek olarak görelim.

38 XHTML Satır Sonu – Br Etiketi etiketi kullanıldığı yerde satırın sonunun geldiğini bildirir ve gelecek olan kodun bir alt satırdan başlamasını sağlar. Bir nevi enter tuşunun görevini yapar. etiketinin ayrıca bir kapanış etiketi yoktur, kendi içinde kapatılır. Dikkat edilmesi gereken br yazıldıktan sonra bir boşluk bırakılıp / karakteri ile devam edilmelidir. (Kodun standartlara uygum olması için) Örnek olarak görelim…

39 XHTML Satır Sonu – Br Etiketi

40 XHTML Pre Etiketi XHTML sayfalarda ard arda 2 boşluk kullanılmasını ya da enter tuşuna basıldığında bir alt satıra geçmesine imkan vermiyor ama etiketi ile bu mümkün. etiketi arasında yazılanlar kod sayfasında nasılsa tarayıcıda da aynı şekilde görünür. Örnek olarak görelim…

41 XHTML İpucu – Sayfa Tasarımları Unutmamak gerekir ki yapılan web sayfaları ekran çözünürlüğüne bağlı olarak her bilgisayarda farklılık gösterebilir. Bu nedenle tasarımlarınızı 1024X768 boyutlarına uygun olarak yapmanızı öneririm. Ayrıca yazdığınız kod geçerli bir kod değilse kodunuz her sayfada farklı çıkacaktır. Bazı kodlarınız geçerli olsa bile Internet Explorer da farklı görünebilir.

42 XHTML İpucu – Boşluk Verme XHTML ile yalnızca bir boşluk verilebilir ekstra ikinci bir boşluk verilmek istenirse kodu eklenmelidir. Bu kod eklenmeden boşluk verilirse tarayıcı sadece bir boşluk gösterecektir. Bu boşluk kodunu arka arkaya yazarak istediğiniz kadar boşluk kullanabilirsiniz fakat birden fazla kez kullanmanız önerilmez.

43 XHTML Metin Formatları – Formatting Bu bölümde metinleri nasıl şekillendirebileceğimizi göreceğiz. Metni kalın, vurgulu hale çevirmek için ya da etiketi kullanılır. Metni büyük yapmak için etiketi kullanılır. Metni küçük yapmak için etiketi kullanılır. Metni eğik yapmak için ya da etiketi kullanılır. Metni alt simge yapmak için etiketi kullanılır. Metni üst simge yapmak için etiketi kullanılır.

44 XHTML Metin Formatları – Formatting Metin biçimlendirme etiketleri "p ", "h1 ", "h2", "h3", " h4 ", " h5 ", " h6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir. Örnek olarak görelim…

45 XHTML Metin Formatları – Formatting Etiketi – İtalik bir şekilde adres ve yer tanımlamaları yapmak için kullanılır Etiketi – Kısaltma yazmak için kullanılır. Üzerine gelince ayrıntı çıkar. Örnek olarak görelim…

46 XHTML Stiller - Styles Stiller ile sayfa üzerindeki tüm görsellere müdahale edebiliriz (renk, font, boyut, arkaplan, bölüm içindeki boşluklar, bölüm dışındaki boşluklar, yükseklik, genişlik, bölümü sağa ve sola yaslama, fare ile yazının boyutunun/renginin/stilinin değişmesi vb aklınıza gelebilecek herşey ) Yani görsel anlamdaki tüm değişiklikleri CSS ile yapabilirsiniz. Bu gibi stilleri verebilmek için style özelliğini kullanacağız Önemli Not: Stiller, css’in işi olduğu için style özelliğini kullanmak tavsiye edilmemektedir. O yüzden sadece ne olduğunu bilin ve kullanmayın

47 XHTML Stiller - Styles Örnek olarak görelim…

48 XHTML Stiller - Styles Örnek olarak görelim…

49 XHTML Stiller - Styles Örnek olarak görelim…

50 XHTML Uygulamaları - 1 H 2 SO 4 ifadesini web sayfasında oluşturunuz (X+Y) 2 =X 2 +2XY+Y 2 " Burada sigara içmek yasaktır" ifadesini aynı şekilde sigara kelimesi eğik, yasaktır kelimesi kalın ve altçizgili olacak şekilde yazdırınız MEB kelimesi üzerine gelindiğinde Milli eğitim bakanlığı şeklinde bir açıklama yazısının görüntülenmesini sağlayın. Sayfanın arkaplan rengini sarı, tüm yazıların rengini mor olacak şekilde biçimlendirin. Yalnızca MEB yazısının yazı renginin kırmızı olmasını sağlayın.

51 XHTML Özel Karakterler Bazı karakterler XHTML tarafından özel karakterler olarak saklı tutulmaktadır. Bu karakterleri XHTML içinde kullanamıyorsunuz çünkü XHTML bu karakterleri kod olarak algılayabiliyor. Eğer bu karakterleri sayfanızda kullanmanız gerekirse aşağıdaki tablodan Öğe Adı karşılığını sayfanıza eklemelisiniz. KarakterÖğe AdıAçıklama Fazladan boşluk ""Çift tırnak ‘&apos;Tek tırnak &&Ve işareti <<Küçüktür işareti >>Büyüktür işareti

52 XHTML Özel Karakterler Örnek olarak görelim… Ekran çıktısı aşağıdaki gibi olan sayfayı kodlamak için

53 XHTML Linkler - Links Bir web sayfasına, fotoğrafa, videoya veya herhangi bir şeye link vermek için etiketi kullanılır. Bir link verilmek isteniyorsa Link Not: etiketi, "p ", "h1 ", "h2", "h3", " h4 ", " h5 ", " h6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir.

54 XHTML Linkler - Links 4 farklı şekilde link verilebilir: 1.Sayfa arası link 2.Sayfa içi link 3.Dosya linki 4.Mail linki

55 XHTML Linkler - Links Sayfa arası link Haberler Hakkımızda İletişim

56 XHTML Linkler - Links Sayfa içi link Uzun içeriğe sahip sayfalarda kullanılır. Eklenen bağlantı farklı bir sayfayı değil aynı sayfada farklı bir bölümü işaret eder Sayfanın farklı kısımlarına bağlantı eklemek için öncelikle bağlantı eklenecek satır veya paragraflara yer imi konulur Yer imi tanımlaması şu şekildedir: Gözükecek Metin Tanımlanan yer imine bağlantı oluşturmak için Gözükecek Metin

57 XHTML Linkler - Links Dosya Linki Bir resim dosyası, müzik dosyası, winzip arşivi gibi farklı türdeki dosyalara link vermek için kullanılır. Tıkla ve İndir İndir indirmek için tıkla

58 XHTML Linkler - Links Mail Linki Belirtilen bir mail adresine bağlantı oluşturur. Bu linke tıklandığında otomatik olarak bilgisayarda varsayılan tanımlanmış mail uygulaması açılacak ve hızlı bir şekilde mail gönderilebilecek) Bize sorun Konu belirtmek için; Bize sorun

59 XHTML Linkler - Links Örnek olarak görelim…

60 XHTML Görseller - Images Sayfaya bir görsel eklemek için etiketi kullanılır. Bu etiket açıldığı gibi kapanır. Bir web sayfasından ya da serverdan görsel eklenecekse " src " yani source(kaynak) özniteliği kullanılır. Ayrıca görselin yüklenemediği durumlar için mutlaka " alt " özniteliği kullanılmalıdır, bu kod içerisine " yüklenemedi " ya da benzeri şeyler yazılabilir.

61 XHTML Görseller - Images Not: etiketi, "p ", "h1 ", "h2", "h3", " h4 ", " h5 ", " h6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir. Eğer mouse ile fotoğraf üzerine gelindiğinde yazı ya da bilgi çıkması istenirse "title " özniteliği kullanılır. Not: etiketi sadece veri gösterirken kullanılmalıdır, tasarım amacıyla etketi kullanılmamalıdır. Tasarımda görsel kullanma işini CSS üstlenmiştir. Örneğin, etiketini sayfaya fotoğraf galerisi eklemek için kullanabiliriz.

62 XHTML Görseller - Images Örnek olarak görelim…

63 XHTML Görseli Link Yapmak Sayfadaki linkleri bir görsel olarak gösterebilirsiniz. Örneğin "web.jpg" adlı resim dosyasına tıklandığında istediğiniz bir sayfanın açılmasını sağlayabilirsiniz. Örnek olarak görelim…

64 XHTML İpucu – Hızlı Sayfa Görseller, sayfanın yüklenme hızını azaltacağından dolayı görselleri az kullanmanızı öneririm ayrıca görsellerin boyutlarını olabildiğince düşük tutmanız sayfanızın hızlı kalmasını sağlayacaktır.

65 XHTML Tablolar – Tables Sayfaya tablo eklemek için etiketi kullanılır. Bu etiket sadece ve sadece verilerin tablo şeklinde gözükmesi için kullanılmalıdır. Bu etiket sayfa tasarımı yapma, sayfayı bölümlere ayırma gibi sebeplerle kullanılmamalıdır. etiketi sayfaya ekstra yük getirmektedir ve sayfanın açılış süresini uzatmaktadır. Biz de hızlı bir sayfa istediğimiz için etiketini olabildiğince az kullanacağız, hatta mümkün olduğu kadar kullanmayacağız. Tasarımlar için etiketi yerine etiketi kullanılacaktır.

66 XHTML Tablolar – Tables Tabloya yeni satır eklemek için etiketi kullanılır. Tabloya yeni bir hücre eklemek için etiketi kullanılır. Tablodaki dış çerçeveyi görüntülemek için border özniteliği kullanılır. Tabloya başlık eklemek için etiketi kullanılır.

67 XHTML Tablolar – Tables Örnek olarak görelim…

68 XHTML Rowspan Özniteliği "Row" satırı ifade eder, "rowspan" ise satırların birleştirilmesini ifade eder. Bir satırı 1’den fazla satır büyüklüğünde göstermek için "rowspan" özniteliği kullanılır. Örnek olarak aşağıdaki tablonun kaynak kodunu yazalım…

69 XHTML Rowspan Özniteliği

70 XHTML Colspan Özniteliği "Col", ingilizce "Column" ifadesinden bir kısaltmadır. "Column" sütun anlamına gelir, "colspan" ise sütunların birleştirilmesini ifade eder. Bir sütunu 1’den fazla sütun büyüklüğünde göstermek için "colspan" özniteliği kullanılır. Örnek olarak aşağıdaki tablonun kaynak kodunu yazalım…

71 XHTML Colspan Özniteliği

72 XHTML Cellpadding Özniteliği Tablo içeriğinin tablo sınırlarına olan uzaklığını belirlemek amacıyla cellpadding özniteliği kullanılır. Cellpadding özniteliği tablo etiketinin başlangıç etiketi içinde kullanılır Örnek olarak görelim…

73 XHTML Cellspacing Özniteliği Tablo hücreleri arasındaki boşluğu belirlemek amacıyla cellspacing özniteliği kullanılır. Cellspacing özniteliği de tablo etiketinin başlangıç etiketi içine yazılır Örnek olarak görelim…

74 XHTML Tablo Uygulamaları Aşağıda verilen tablonun kaynak kodunu yazınız.

75 XHTML Tablo Uygulamaları Aşağıda verilen tablonun kaynak kodunu yazınız.

76 XHTML Tablo Uygulamaları Aşağıda verilen tablonun kaynak kodunu yazınız.

77 XHTML Tablo Uygulamaları Aşağıda verilen tablonun kaynak kodunu yazınız.

78 XHTML Listeler - Lists Html’de 3 çeşit listeleme yöntemi bulunmaktadır: ―Sıralı Listeleme ―Sırasız Listeleme ―Tanımlama Listeleri Listeye yeni bir eleman eklemek için etiketi kullanılır

79 XHTML ul Etiketi etiketinin açılımı unordered list’tir. Unordered List ise sırasız liste anlamına gelmektedir. etiketi numara ve harfler olmaksızın çeşitli işaretler ile listeleme yapmak için kullanılır Type özniteliği ile listeleme de kullanılacak işaretlerin tipi belirlenir. Type özniteliğinin aldığı değerler aşağıdaki gibidir:  circle – İçi boş daire  disc– içi dolu daire  square – içi dolu kare

80 XHTML ul Etiketi Örnek olarak görelim…

81 XHTML ul Etiketi Örnek olarak görelim…

82 XHTML ul Etiketi Örnek olarak görelim…

83 XHTML ol Etiketi etiketinin açılımı ordered list’tir. Ordered List ise sıralı liste anlamına gelmektedir. etiketi harf veya rakam ile işaretlenmiş listeler oluşturmak için kullanılır Type özniteliği ile listeleme de kullanılacak işaretlerin tipi belirlenir.  1 – Sayı ile listeleme  a – Küçük harf ile listeleme  A – Büyük harf ile listeleme  i – Küçük roma rakamı ile listeleme  İ – Büyük roma rakamı ile listeleme

84 XHTML ol Etiketi Örnek olarak görelim…

85 XHTML ol Etiketi Örnek olarak görelim…

86 XHTML ol Etiketi Örnek olarak görelim…

87 XHTML ol Etiketi Örnek olarak görelim…

88 XHTML ol Etiketi Örnek olarak görelim…

89 XHTML Tanım Listeleri Bir tanımı ve açıklamasını karşılıklı olarak yazmak istiyorsak bu listeleme stilini kullanabiliriz. Listeyi açmak için etiketi, Tanım için etiketi, Açıklama için etiketi kullanılır. Örnek olarak görelim…

90 XHTML Tanım Listeleri

91 XHTML Liste Uygulamaları - 1 Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız.

92 XHTML Liste Uygulamaları - 2 Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız.

93 XHTML Liste Uygulamaları - 3 Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız.

94 XHTML Formlar - Forms Formlar ziyaretçiden/kullanıcıdan bilgi almak için kullanılır. Alınan bilgiler ise farklı yazılım dilleri ile (javascript, php, asp.net) kullanılır. Yani formların esas görevi veri taşımak’tır. Örneğin bir üye giriş sayfasında bizden kullanıcı adı ve şifre istenir, bizde kullanıcı adı ve şifremizi sisteme gireriz. Diğer yazılım dilleri (javascript, php, asp.net) ile formlardan bilgiyi alıp veritabanından doğrulama yaptırabiliriz.

95 XHTML Method Parametresi Ziyaretçi tarafından girilen verilerin belirtilen adrese ne şekilde gönderileceğini belirler. 2 çeşit veri gönderim metodu vardır. Bunlar; POST: Verileri HTTP isteği üzerine yazarak yollamadır. Form verileri adres satırında görüntülenmezler. Daha güvenli ancak, daha yavaştır GET: Tüm veriler URL adresine eklenerek yollanır. Gönderilen veri miktarı sınırlıdır. (100’den fazla karakter gönderiminde POST metodu kullanılmalıdır) POST metoduna göre daha fazla sayıda tarayıcı tarafından desteklenir Gönderilen veriler adres satırında özel bir formatta görüntülenirler

96 XHTML Action Parametresi Ziyaretçinin form elemanlarına girmiş olduğu verilerin nereye gönderileceğini belirler. Ziyaretçi verileri, bir mail adresi ya da.php,.aspx sayfasına gönderilebilir Form üzerindeki hiçbir veri kullanıcı belirtmediği sürece gönderilmez. Kullanıcı verileri submit buton ile gönderilir. Reset butonu ile form verileri temizlenir

97 XHTML Method-Action Parametresi Örnek olarak görelim…

98 XHTML Form Elemanları Metin Kutusu (TextBox) Elemanı Kullanıcının tek satırlık veri girişi yapmasını sağlar şeklinde tanımlanır Aldığı özellikler; MAXLENGHT: Metin kutusuna girilecek karakter sayısını belirler SİZE: Metin kutusunun sayfada görünen boyutunu belirler VALUE: Metin kutusunun ilk değerini ayarlamak için kullanılır NAME: Metin kutusunu adlandırmak için kullanılır READONLY: Metin kutusuna değer girilmesini engeller. Yalnızca atanan ilk değer görünür Eğer metin kutusuna girilen verilerin görünmesini istemiyorsanız type parametresinin değerini PASSWORD yapın

99 XHTML Form Elemanları Metin Kutusu (TextBox) Elemanı Örnek olarak verelim…

100 XHTML Form Elemanları Metin Alanı (TextArea) Elemanı Çok satırdan oluşan metin kutusudur. … html etiketleri ile tanımlanır Ziyaretçi den adres, istek, şikayet ve görüş gibi bilgiler almak için kullanılır. Aşağıda verilen özellikleri alır; Cols: Metin alanının karakter cinsinden uzunluğunu verir. Rows: Metin alanının kaç satırdan oluşacağını belirler Name: isim belirlemek için kullanılır

101 XHTML Form Elemanları Metin Alanı (TextArea) Elemanı Örnek olarak görelim…

102 XHTML Form Elemanları Radio Button Elemanı Birden fazla seçenek arasından yalnızca birinin seçilebilmesi isteniyorsa radio button kullanılır. Eklenen radio butonlardan yalnızca birinin seçilebilir olması için her birinin name özelliği aynı olmak zorundadır. şekllinde eklenir. Value özniteliği ile radio butona tıklandığında gönderilecek değer belirtilir. Checked özniteliği ile varsayılan olarak bir radio butonun seçili gelmesi sağlanır.

103 XHTML Form Elemanları Radio Button Elemanı Örnek olarak görelim:

104 XHTML Form Elemanları Seçim Kutuları (CheckBox) Elemanı Birden fazla seçenek arasından birden fazla seçim yapılabilmesi isteniyorsa checkbox elemanı kullanılır. şeklinde eklenir. Name ve value özniteliklerinin mutlaka yazılması gereklidir. Value özniteliği seçim yapıldığında hangi değerin gönderileceğini belirler. Checked özniteliği ise varsayılan olarak seçili gelmesini sağlar.

105 XHTML Form Elemanları Seçim Kutuları (CheckBox) Elemanı Örnek olarak görelim…

106 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Bir açılır kutu içinde seçenekleri listelemek için etiketi kullanılır. Menü içine seçenekleri eklemek için etiketleri kullanılır. Menü içinde seçili olarak gelmesi istenen seçenek için selected="selected" kodu kullanılır. Seçim kutusu içindeki seçenekleri gruplandırmak için etiketi kullanılır. NOT: etiketi, "p ", "h1 ", "h2", "h3", " h4 ", " h5 ", " h6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir.

107 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Örnek olarak görelim…

108 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Aşağıda örnekte gösterildiği gibi liste seçeneklerini gruplandırmak istersek aynı grup da olan elemanları etiketleri arasında oluşturmalıyız.

109 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Aşağıda örnekte gösterildiği gibi liste seçeneklerini gruplandırmak istersek aynı grup da olan elemanları etiketleri arasında oluşturmalıyız.

110 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Liste seçeneklerini açılır liste şeklinde değil de tüm elemanların görüntülendiği bir formatta sunmak istersek etiketine size özniteliği ekleyerek kaç eleman görüntüleneceği belirtilmelidir. Listenin eleman sayısı 10, size ile belirtilen sayı 5 ise ilk 5 eleman görüntülenecek, diğerleri için kaydırma çubuğu eklenecektir.

111 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Örnek olarak görelim…

112 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı Örnek olarak görelim…

113 XHTML Form Elemanları Açılır Seçim Kutusu (DropDown) Elemanı CTRL tuşuna basılı tutup birden fazla liste elemanının seçilebilir olmasını sağlamak için etiketi içine multiple="multiple" kodu eklenir.

114 XHTML Form Elemanları Label Etiketi (Label Tag) Radio butonlarda sadece yuvarlak alan içine tıklandığında seçenek işaretlenir. Radio butonun yanındaki yazıya tıklandığında da seçenek işaretlensin istersek label etiketini kullanmalıyız. Label etiketi içerisine radio buton koyularak bu özellik çalıştırılır. Eğer label etiketi radio butonun dışanda (üstüne, altında, sağında, solunda ) kullanılacaksa input etiketine id vermemiz gerekir ve verilen id’yi label etiketi içerisine for özniteliği olarak yazmamız gerekir.

115 XHTML Form Elemanları Label Etiketi (Label Tag) Örnek olarak görelim…

116 XHTML Form Elemanları Fieldset ve Legend Etiketleri etiketi form elemanlarını gruplamak için kullanılır. Form elemanlarının çevresini çizerek kapsar. etiketi ise, hem form elemanlarının çevresini çizerek kapsar hem de çerçeveye başlık ekler. İkisi ayrı ayrı ya da iç içe kullanılabilir.

117 XHTML Form Elemanları Fieldset ve Legend Etiketleri Örnek olarak görelim…

118 XHTML Form Uygulamaları Aşağıda verilen formu oluşturunuz. Form elemanlarından alınan verilerin pmyo@klu.edu.tr adresine gönderilmesini sağlayınız.pmyo@klu.edu.tr

119 XHTML Form Uygulamaları Aşağıda verilen formu oluşturunuz.

120 XHTML Bölümleme – Div Etiketi Sayfayı bölümlere ayırmak, kutular eklemek, tasarım yapmak gibi işler için etiketi kullanılır. Sayfa iskeleti oluşturmak için bu etiketi kullanacağız. Ancak div etiketi ile oluşturulan bölümlere stil vermek, kutuları renklendirmek için CSS dilini öğreneceğiz. Burada etiketine örnek olması için XHTML kodunda style özniteliğini kullanacağız. Örnek olarak görelim…

121 XHTML Bölümleme – Div Etiketi Örnek olarak görelim…

122 XHTML Span Etiketi etiketi etiketinin daha esnek olanıdır. Sınırları yoktur. Mesela etiketi içine bir şey yazıldığında etiketi yazının boyutu ile aynı boyutta büyüyecektir. Span etiketi için bir nevi acil durum etiketidir denebilir. Hemen hemen herşey için kullanılır. Örneğin paragraf içindeki bir kelimenin yeşil olması isteniyorsa etiketine komple stil vermek yerine etiketine stil verilir. NOT: etiketi, "p ", "h1 ", "h2", "h3", " h4 ", " h5 ", " h6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir.

123 XHTML Span Etiketi Örnek olarak görelim…

124 XHTML Geçerli Kod Yazmak Geçerli kod yazmak için şimdiye kadar öğrendiğimiz tüm kurallara uymamız gerekir. Ek olarak aşağıda verilen maddeler de kodunuzun geçerli olmasını sağlayacaktır. Etiketlere inline css kodu yazılmamalıdır. ( Paragraf ) Olabildiğince az kodlama yapılmalı, gereksiz kod yazmaktan kaçınılmalıdır. Her şeyi gruplamalıyız. XHTML sayfasının en üstüne sayfanın hangi standartlara uygun olarak yazıldığını belirten DOCTYPE etiketi mutlaka eklenmelidir.

125 XHTML Geçerli Kod Yazmak Son olarak etiketi mutlaka xmlns özniteliği içermelidir. XHTML Sayfam Geçerli mi? Sayfanız web üzerinde ise geçerlilik kontrolü buradan yapılabilir.buradan Sayfanız bilgisayarınızda ise geçerlilik kontrolü buradan yapılabilir.buradan