HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html page sections
html5 page sections
html page into sections
html semantic elements
html semantic elements example
html5 semantik elementler
html5 semantic elements
html5 header template
html5 header examples
html5 header tag
html5 header element example
html5 header kullanımı
html5 header tags
html5 nav kullanımı
html5 nav nedir,html5 section nedir
html5 section kullanımı
html5 article kullanımı
html5 aside kullanımı
html5 aside tag
html5 figure kullanımı
html5 figure tag
html5 figcaption tag
html5 footer tag
html5 details tag
html5 details summary
html5 summary element
html5 summary tag
html5 mark tag
html5 time input

HTML Sayfa Bölümleri

HTML Sayfa Bölümleri
Html
<header>


 <h1>Başlık Yazısı</h1>


 <h2>Sitemizin Tanımı/Amacı</h2>


</header>




<article>


  <header>


   <h2>Yazı Başlığı</h2>


   <p><time datetime="2014-12-30T14:29:26+00:00">30-12-2016</time></p>


  </header>


  <p>Yazının bulunduğu bölüm</p>


</article>




<nav>


<a href="/elma/">Elma</a><br>


<a href="/armut/">Armut</a><br>


<a href="/muz/">Muz</a><br>


<a href="/kivi/">Kivi</a><br>


<a href="/seftali/">Şeftali</a><br>


</nav>




<aside>


  <h2>Kategoriler</h2>


    <ul>


      <li><a href="/corbalar/">çorbalar</a></li>


      <li><a href="/etli-yemekler/">etli yemekler</a></li>


      <li><a href="/icecekler/">içecekler</a></li>


      <li><a href="/tatlilar/">tatlılar</a></li>


    </ul>


</aside>




<figure>


  <img src="kus.jpg" alt="Sitenin Resmi" width="500" height="250">


  <figcaption>Serçe Kuşu</figcaption>


</figure>

Semantik Element Nedir?

Html5 ile beraber birçok etiket(element) daha anlaşır hale geldi. Eskiden sürekli <div> etiketi kullanır ve onlara id vererek web sayfasının bölümlerini ayırırdık. Şimdi ise direk web sayfasının bölümleri etiket olarak dönüştürülmüş. Mesela sayfanın en altında bulunan "footer" dediğimiz kısım <div id="footer"> der ve içine ona göre içerik eklerdik. Şimdi ise direk <footer> etiketi arasına içeriğimizi ekliyoruz.<div> etiketinden size bu yüzden bahsetmedim aslında sizin gibi yeni öğrenen arkadaşlar için tabi ki kafa karıştırıcı olabilirdi ama tabi <div> kullanım tarzlarına da bir bakmanızı tavsiye ederim. Yani kısaca semantik demek; Geliştiricilerin(bizlerin) ve tarayıcıların açıkça ne işe yaradıklarını belirten elementlerdir.

Html 5 Yeni Semantik Elementler

Aslında yandaki resim her şeyi çok güzel bir şekilde anlatıyor. Yanda gördüğünüz resim, web sayfamızın bölümleridir:

  1. <header>
  2. <nav>
  3. <section>
  4. <article>
  5. <aside>
  6. <figure>
  7. <figcaption>
  8. <footer>
  9. <details>
  10. <summary>
  11. <mark>
  12. <time>

1-Html 5 <header> Elementi

Bu etiket sayfanın başlık bölümü için kullanılır. Birden fazla yerde kullanılabilir.

Kullanımı:

<header>


 <h1>Başlık Yazısı</h1>


 <h2>Sitemizin Tanımı/Amacı</h2>


</header>


 


<article>


  <header>


    <h1>Meyveler</h1>


  </header>


  <p>Elma,Armut,Kayısı</p>


</article>

2-Html 5 <article>(Makale/Yazı) Elementi

Bu elementi web sayfasının istediğiniz bölümün içinde kullanabilirsiniz. Yazı, makale, yorum kısımlarında kullanabilirsiniz.

Kullanımı:

<article>


  <header>


   <h2>Yazı Başlığı</h2>


   <p><time datetime="2014-12-30T14:29:26+00:00">30-12-2016</time></p>


  </header>


  <p>Yazının bulunduğu bölüm</p>


</article>

3-Html 5 <nav> Elementi

İçeriği uzun sayfalar için kullanılır. Örneğin "Meyveler" başlıklı bir sayfanız var ve 40 çeşit meyve de ayrı sayfalarda daha önceden yazmışsınız bunları tek bir sayfada linklerini vererek gösterebilirsiniz.

Kullanımı:

<nav>


<a href="kategori/elma">Elma</a><br>


<a href="kategori/armut">Armut</a><br>


<a href="kategori/muz">Muz</a><br>


<a href="kategori/kivi">Kivi</a><br>


<a href="kategori/seftali">Şeftali</a><br>


</nav>

4-Html 5 <aside> Elementi

Yan menü elementi olarak da bilinir. Kullanımı biraz karışık gelebilir bu yüzden örneği iyi inceleyin ve sizde ona göre değişik örnekler yapın.

Kullanımı:

<aside>


  <h2>Kategoriler</h2>


    <ul>


      <li><a href="/corbalar/">çorbalar</a></li>


      <li><a href="/etli-yemekler/">etli yemekler</a></li>


      <li><a href="/icecekler/">içecekler</a></li>


      <li><a href="/tatlilar/">tatlılar</a></li>


    </ul>


</aside>

5-Html 5 <figure> ve <figcaption> Elementleri

<figure>, içerisinde bir resim, gösterim, diyagram, kod listeleri vb. gibi içeriklerin olduğunu belirtir.

<figure> elementi ana akış ile ilgili olsa da, konumu ana akıştan bağımsızdır ve çıkarılırsa dökümanın akışını engellemez.

<figcaption> etiketi, <figure> elementinin belirttiği resme başlık koymaya yarar.

Kullanımı:

<figure>


  <img src="kus_resim.jpg" alt="Sitenin Resmi" width="500" height="250">


  <figcaption>Serçe Kuşu</figcaption>


</figure>

6-Html 5 <footer> Elementi

Sayfanın en alt kısmında bulunan sitenin genel bilgilerinin,telif hakkının,iletişim bilgilerinin bulunduğu bölümdür. Sayfada birden fazla yerde kullanılabilir.

Kullanımı:

<footer>


  <p>


    Enes KILIÇ


    Webmaster


  <p>


</footer>

Son Olarak...

Bir web sayfasının Html 5 ile hangi bölümlerden oluştuğunu öğrenmiş olduk. Diğer derslerimizde Html 5 "'in diğer özelliklerini göreceğiz.



Paylaş:

Enes KILIÇ
Webmaster