HTML TEMELLER r Gr Emine TUNEL Krklareli niversitesi

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

Html Giriş Html Nedir? • Açılımı Hyper Text Markup Language tam Türkçe’si bulunmamakla birlikte Hiper. Metin İş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

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.

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 Note. Pad 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.

XHTML XHtml Nedir? • XHTML açılımı e. Xtensible 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 (W 3 C) tarafından 2001 yılında birleştirilerek XHTML 1. 0 olarak duyurmasıyla ortaya çıkmıştır. • XML (e. Xtensible 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.

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.

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

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

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

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.

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

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

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

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

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.

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;

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 <font> gibi html etiketlerini kullanıyorsanız bu tip sizin için uygun. • XHTML Strict, <font><u> gibi etiketleri desteklemez.

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.

XHTML Head Etiketi • <head> 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 <head> etiketi içerisinde kullanılmalıdır. • <title>-Eklenen başlık tarayıcın durum çubuğunda yer alır. • <base>- Bir HTML dokümanında daha sonra belirtilecek kaynakların aranması gereken temel URL’i gösterir. • <link> - Bu etiket, HTML sayfası ile farklı bir dosya arasındaki ilişkiyi tanımlar. • <meta>- Arama motorlarının kontrol ettiği bölüm, burada anahtar kelimeler tanımlanır.

XHTML Head Etiketi • Örnek olarak görelim:

XHTML Base Etiketi • <BASE> 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 <base href=" http: //website. com. tr/resimler/"> şeklinde bir tanımlama ekleyerek her resim için ayrı <img src="http: //website. com. tr/resimler/ resim. png"/> yazmaktan kurtuluruz. • Ayrıca resimleri farklı bir dizine aldığınızda sitedeki bütün kodları tek düzeltmektense yalnızca base etiketini düzenleriz.

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

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.

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.

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

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

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 oluşturulmasını bildirir. • önizleme için ekran görüntüsünün Noindex: Sayfanın dizine eklenmesini engeller. • Nofollow: Sayfa içindeki bağlantıların(linklerin) izlenmesini engeller

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.

XHTML Meta Etiketi • Robots

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

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

XHTML Başlıklar - Headings

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

XHTML Yatay Çizgi-<hr> Etiketi • <hr/> 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. • No. Shade: Gölgeli olmayan çizgi

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 açılır ve -- > karakterleri ile kapatılır ve yorum bu karakterler arasına yazılır. • Örnek olarak görelim…

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

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

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…

XHTML Satır Sonu – Br Etiketi

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

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ı 1024 X 768 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.

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 arkaya yazarak istediğiniz kadar boşluk kullanabilirsiniz fakat birden fazla kez kullanmanız önerilmez.

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

XHTML Metin Formatları – Formatting • Metin biçimlendirme etiketleri "p ", "h 1 ", "h 2", "h 3", " h 4 ", " h 5 ", " h 6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir. • Örnek olarak görelim…

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

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

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

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

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

XHTML Uygulamaları - 1 • H 2 SO 4 ifadesini web sayfasında oluşturunuz • (X+Y)2=X 2+2 XY+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.

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

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

XHTML Linkler - Links • Bir web sayfasına, fotoğrafa, videoya veya herhangi bir şeye link vermek için <a> etiketi kullanılır. • Bir link verilmek isteniyorsa • <a href="linkadresi"> Link </a> • Not: <a> etiketi, "p ", "h 1 ", "h 2", "h 3", " h 4 ", " h 5 ", " h 6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir.

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

XHTML Linkler - Links • Sayfa arası link • <a href="http: //www. milliyet. com. tr">Haberler</a> • <a href="hakkimizda. html">Hakkımızda</a> • <a href="http: //www. facebook. com. tr"> <img src="facebook. png" /></a> • <a href="iletisim. html" target="_blank" > İletişim</a>

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: • <a name=" yer imi adı " > Gözükecek Metin </a> • Tanımlanan yer imine bağlantı oluşturmak için • <a href="#yer imi adı"> Gözükecek Metin </a>

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. • <a href="D: MuzikBirsen TezerHoşgeldin. mp 3"> Tıkla ve İndir</a> • <a href="C: UsersEmine. TuncelDesktopnivoslider 3. 2. zip">İndir • <a href="D: FilmDedemin İnsanlarıDedemin Insanlari. avi">indirmek için tıkla</a>

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) • <a href="mailto: //emine. tuncel@kirklareli. edu. tr"> Bize sorun</a> • Konu belirtmek için; • <a href="mailto: //emine. tuncel@kirklareli. edu. tr ? subject=sorular">Bize sorun</a>

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

XHTML Görseller - Images • Sayfaya bir görsel eklemek için <img /> 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.

XHTML Görseller - Images • Not: <img /> etiketi, "p ", "h 1 ", "h 2", "h 3", " h 4 ", " h 5 ", " h 6 ", " 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: <img /> etiketi sadece veri gösterirken kullanılmalıdır, tasarım amacıyla <img /> etketi kullanılmamalıdır. Tasarımda görsel kullanma işini CSS üstlenmiştir. Örneğin, <img /> etiketini sayfaya fotoğraf galerisi eklemek için kullanabiliriz.

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

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…

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.

XHTML Tablolar – Tables • Sayfaya tablo eklemek için <table> etiketi kullanılır. • Bu etiket 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. • <table> 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 <table> etiketini olabildiğince az kullanacağız, hatta mümkün olduğu kadar kullanmayacağız. • Tasarımlar için <table> etiketi yerine <div> etiketi kullanılacaktır.

XHTML Tablolar – Tables • Tabloya yeni satır eklemek için <tr> etiketi kullanılır. • Tabloya yeni bir hücre eklemek için <td> 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 <caption> etiketi kullanılır.

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

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…

XHTML Rowspan Özniteliği

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…

XHTML Colspan Özniteliği

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…

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…

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

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

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

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

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 <li> etiketi kullanılır •

XHTML ul Etiketi • <ul> etiketinin açılımı unordered list’tir. • Unordered List ise sırasız liste anlamına gelmektedir. • <ul> 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

XHTML ul Etiketi • Örnek olarak görelim…

XHTML ul Etiketi • Örnek olarak görelim…

XHTML ul Etiketi • Örnek olarak görelim…

XHTML ol Etiketi • <ol> etiketinin açılımı ordered list’tir. • Ordered List ise sıralı liste anlamına gelmektedir. • <ol> 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

XHTML ol Etiketi • Örnek olarak görelim…

XHTML ol Etiketi • Örnek olarak görelim…

XHTML ol Etiketi • Örnek olarak görelim…

XHTML ol Etiketi • Örnek olarak görelim…

XHTML ol Etiketi • Örnek olarak görelim…

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 <dl> etiketi, • Tanım için <dt> etiketi, • Açıklama için <dd> etiketi kullanılır. • Örnek olarak görelim…

XHTML Tanım Listeleri

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

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

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

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.

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

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 action="sorgula. aspx" method="post" > • Form üzerindeki hiçbir veri kullanıcı belirtmediği sürece gönderilmez. • Kullanıcı verileri submit buton ile gönderilir. • <INPUT TYPE="submit" VALUE="Gönder"> • Reset butonu ile form verileri temizlenir • <INPUT TYPE="reset" VALUE="Temizle">

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

XHTML Form Elemanları • Metin Kutusu (Text. Box) Elemanı • Kullanıcının tek satırlık veri girişi yapmasını sağlar • <input type="text" …> ş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

XHTML Form Elemanları • Metin Kutusu (Text. Box) Elemanı • Örnek olarak verelim…

XHTML Form Elemanları • Metin Alanı (Text. Area) Elemanı • Çok satırdan oluşan metin kutusudur. • <textarea>…</textarea> 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

XHTML Form Elemanları • Metin Alanı (Text. Area) Elemanı • Örnek olarak görelim…

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

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

XHTML Form Elemanları • Seçim Kutuları (Check. Box) Elemanı • Birden fazla seçenek arasından birden fazla seçim yapılabilmesi isteniyorsa checkbox elemanı kullanılır. • <input type="checkbox" checked /> şeklinde eklenir. name="hobi" value="muzik" • Name ve value özniteliklerinin mutlaka yazılması gereklidir. • Value özniteliği seçim gönderileceğini belirler. yapıldığında hangi değerin • Checked özniteliği ise varsayılan olarak seçili gelmesini sağlar.

XHTML Form Elemanları • Seçim Kutuları (Check. Box) Elemanı • Örnek olarak görelim…

XHTML Form Elemanları • Açılır Seçim Kutusu (Drop. Down) Elemanı • Bir açılır kutu içinde seçenekleri listelemek için <select> etiketi kullanılır. • Menü içine seçenekleri eklemek için <option> 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 <optgroup> etiketi kullanılır. • NOT: <select> etiketi, "p ", "h 1 ", "h 2", "h 3", " h 4 ", " h 5 ", " h 6 ", " div ", "pre ", "address ", "fieldset", "ins", "del", gibi etiketler içinde kullanılmalıdır. Aksi takdirde kodumuz hata verecektir.

XHTML Form Elemanları • Açılır Seçim Kutusu (Drop. Down) Elemanı • Örnek olarak görelim…

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

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

XHTML Form Elemanları • Açılır Seçim Kutusu (Drop. Down) 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 <select> 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.

XHTML Form Elemanları • Açılır Seçim Kutusu (Drop. Down) Elemanı • Örnek olarak görelim…

XHTML Form Elemanları • Açılır Seçim Kutusu (Drop. Down) Elemanı • Örnek olarak görelim…

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

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.

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

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

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

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.

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

XHTML Bölümleme – Div Etiketi • Sayfayı bölümlere ayırmak, kutular eklemek, tasarım yapmak gibi işler için <div> 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 <div> etiketine örnek olması için XHTML kodunda style özniteliğini kullanacağız. • Örnek olarak görelim…

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

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

XHTML Span Etiketi • Örnek olarak görelim…

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. (<p style="color: Blue">Paragraf </p>) • 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.

XHTML Geçerli Kod Yazmak • Son olarak <html> etiketi mutlaka xmlns özniteliği içermelidir. • <html xmlns="http: //www. w 3. org/1999/xhtml"> • XHTML Sayfam Geçerli mi? • Sayfanız web üzerinde ise geçerlilik kontrolü buradan yapılabilir. • Sayfanız bilgisayarınızda ise geçerlilik kontrolü buradan yapılabilir.