• Html

    Ders14- HTML5 nav etiketi

    HTML5 etiketlerinden yeni gelen nav etiketine değinelim. nav etiketi gezinti(navigasyon) linklerinin bulunduğu bölümü tanımlar. Fakat sayfadaki bütün linkler aklınıza gelmesin. Önceden el ile div’ler oluşturarak sayfamızın bir kenarına menü şeklinde navigasyon yani gezinti bölmesini yapardık. HTML 5 ile şimdi bu gezinti bölmesini nav etiketi ile daha iyi şekilde yapabiliyoruz. Nav etiketi sizi div’lerin karmaşasından kurtarırmış olur. Gezinti bölmemizin eski kullanımı; [crayon-5cf85bd025122470004720/] HTML5 ile nav etiketinin kullanımı; [crayon-5cf85bd02513e399062364/] Nav etiketine dileğiniz CSS kodlarıyla müdahale edebilir daha görsel hala getirebilirsiniz. Örnek bir CSS kodu aşağıda verilmiştir. [crayon-5cf85bd02514c153820432/]

  • Html

    Ders13- HTML 5 hgroup etiketi

    Yeni HTML 5 etiketlerinden biri olan ve h elementlerini gruplamak için kullanılan hgroup etiketine bakalım. Eğer içeriklerimiz birden fazla h elementi içeriyorsa bunları grup şeklinde tanımlayabiliriz. h1,h2,h3,h4,h5,h6 başlık etiketlerini gruplamak için kullanabileceğimiz yeni html5 etiketi olan hgroup etiketinin kullanımına örneklerle bakalım. Article etiketi altında bir başlık etiketini hgroup kullanmadan gösterme Article etiketi altında header etiketini kullanarak yazdırma Burada hgroup kullanmaya gerek yoktur. Başlık ve zaman bilgisini header da gösterildi. Article etiketi altında başlık ve alt başlık kullanımı Birden fazla başlık etiketi kullanacağımız için bu h etiketlerini hgroup etiketiyle bir gruplama yaptık. Article etiketi altında header etiketi altında gruplama yapma Özetle Bu makalede, hgroup etiketinin nasıl kullanılacağını gösterdik. Tek bir başlık…

  • Html

    Ders12- HTML 5 header ve footer etiketi kullanımı

    header ve footer etiketleri de html5 ile gelen yeni yapısal etiketlerdendir. header sayfanın başlık kısmının tanımlandığı yani başlık kısmında olması gereken ögelerin gruplandığı bölümdür diyebiliriz. Sadece başlığı yazacaksak h1 ile h6 arasındaki etiketler kullanılabilir. Header içerisinde örneğin sayfanın banner’ı, başlığı, logosu gibi bilgilerde yer alır. Bir sayfada birden fazla header da kullanılabilir. Özellikle siteye ait içindekiler tablosu oluşturulurken header işimize yarayabilir. header ayrıca section, article ve aside etiketleri içinde kullanılabilir. section ile sayfayı bölümledikten sonra istersek bu bölümü başlık kısmıyla da ayırabiliriz. footer da header’a benzer bir yapıda geliştirilmiştir. Sayfanın ya da bölümlendirmenin en altında kullanılacak olan elemanları gruplamak için kullanılır. Şimdi temiz bir html5 projesini Dreamweaver’da açalım. Body kısmının…

  • Html

    Ders11- HTML5 aside etiketi kullanımı

    Bölümlendirme için yeni oluşturulan etiketlerden biri de aside etiketidir. Diğer bölümlendirme etiketi gibi kullanılan bu etiket genelde web sayfalarında menülerimizi yerleştirdiğimiz sidebar isimli div’e karşılık gelmektedir. Yan menü olarak isimlendirme de mümkündür. Aside etiketi içerisinde başlık, paragraf, tablo gibi etiketler kullanılabilir. Bununla birlikte site içinde yer alacak resimler, reklamlar, menüler bu bölüm içerisinde yayınlanabilir. Biz örneklerimizi önceki derslerimizin devamı şeklinde devam ediyoruz. Bir önceki dersimizde article konusunun üzerinden devam edelim. Bir önceki dersimize bakmak için tıklayınız En alttaki div’in üzerinde section etiketinin altına bir aside etiketi açalım ve buna da bir id verelim. Ben örneğimde solmenu seklinde bir id vereceğim. Menümüz için oluşturacağımız liste için sırasız bir liste oluşturalım. Şimdi…

  • Html

    Ders10- HTML 5 Article Etiketi Kullanımı

    HTML 5 içerisinde kullanılan yeni yapısal etiketlerden biri de article etiketidir. Yapı olarak önceki derste bahsettiğimiz section ve div’e benzerlik gösterir. Article etiketi bir sayfa, uygulama ya da belgede kendi içinde bir düzen oluşturabilen bir bileşeni temsil eder. Article bileşeni sayfa içinde yeniden kullanılabilen şeklinde tasarlanmıştır. Bir forumda açılan bir konu, bir dergi ya da gazetedeki makale gibi sayfadan bağımsız nesneleri tutabilen ve organize edebilen bir yapıya sahiptir. Bununla birlikte statik sayfalarda da kullanabilir. Özet olarak article etiketi sayfamızda yer alan içeriği gruplandırarak ve css ile şekillendirebildiğimiz bir bölümdür. Bir önceki örneğimize article etiketi ekleyerek devam edelim. Section etiketimizin içine article etiketi koyalım ve id verelim. Ardından buraya başlık kısmımızı…

  • Html

    Ders9- HTML 5 Section Kullanımı

    HTML 4 ile sayfa oluştururken genel olarak sayfa yapısında başlık, navigasyon, içerik, menü ve alt menü gibi div’ler kullanırız. Daha sonra bu div’lere CSS’ler yazarak yerleşimlerini ve içeriğini ayarlarız. HTML 5 de bu bölümleri gruplama yapmak daha da kolaylaşmıştır. Bunun için HTML 5 içerisinde kullanılan yapısal etiketler tercih edilir. Div benzeri gruplamalar için section etiketini kullanırız. Bu etiketle beraber div elemanını kullanmaya devam edebiliriz. Section etiketi bir belge veya uygulama da genel bir bölümü temsil eder. Bir section’ı başlık veya gruplama olarak düşünebiliriz. Sayfaları bölümlere ayırmak ve bu bölümleri isimlendirmek ziyaretçilerin sayfada ulaşmak istedikleri veriye daha kolay ulaşması açısından yardımcı olacaktır. Örneğin ziyaretçi kolayca bir makaleden bir diğerine devam et…