HTML5 Details Ve Summary Etiketleri(5.Ders Açılır Kapanır İçerik)

HTML5 ile gelen Details ve Summary etiketleri çok güzel ancak sadece bu özelliği Google Chrome desteklemektedir. Details Ve Summary Etiketleri sayesinde sayfa içindeki uzun yazılarımızı kategorize ve açılır kapanır şekilde hazırlamamıza yarar.

HTML5 Details Ve Summary Etiketleri(5.Ders Açılır Kapanır İçerik)

Details : Ayrıntılar başlığı altında etiketimizin içindeki içeriği kapalı bir şekilde ekrana yazdırır mause ile üzerine tıklanıldığında açılır ve içindeki içerik ortaya çıkar.

open=”open” : Details Etiketi varsayılan olarak kapalı şekilde tanımlanır ancak open=”open” komutları ile o içeriğin açık halde başlamasını tanımlar.

Summary : Etiketimizi Ayrıntılar yerine yazmak istediğimiz başlığı belirtir ve Details Etiketi içerisinde kullanılır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/04/HTML5-Details-Ve-Summary-Etiketleri5.Ders-Açılır-Kapanır-İçerik.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


	

HTML5 Caption Etiketi (4.Ders Tablo Başlığı)

Html5 ile gelen <caption> etiketi tablo başlığını tanımlar. <caption> etiketini <table> etiketinden sonra tanımlanmalıdır ve her tabloda sadece tek <caption> etiketi ile bir başlık tanımlanabilir.

HTML5 Caption Etiketi (4.Ders Tablo Başlığı)
Not: <caption> Etiketi ile oluşturulan başlıklar varsayılan olarak tablo üzerinde ve ortalanmış halde olacaktır ancak CSS ile align (left, right, top, bottom) özellikleri ile biçimlendirilebilir. Ancak Tarayıcı farklılıklarından dolayı biçimlendirmeleri göremeyebilirsiniz bunun için aşağıdaki tarayıcı uyumluluklarına bakabilirsiniz

– Internet Explorer 8: left, right, top, bottom değerlerini çalıştırabilir.

– Internet Explorer 9: top, bottom değerlerini çalıştırabilir.

– Firefox: left, right, top, bottom değerlerini çalıştırabilir.

– Opera: left, right, top, bottom değerlerini çalıştırabilir.

– Chrome: top, bottom değerlerini çalıştırabilir.

– Safari: top, bottom değerlerini çalıştırabilir.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/04/HTML5-Caption-Etiketi-4.Ders-Tablo-Başlığı.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]


<table border="1" width="400" align="center">
      <caption align="bottom">Tablo Başlığımız</caption>
	<tr align="center">
		<th>Ders No</th>
		<th>Ders</th>
		<th>Etiket</th>
	</tr>
	<tr align="center">
		<td>4</td>
		<td>HTML5</td>
		<td>Caption</td>
	</tr>
</table>

Tablo Başlığındaki Caption Etiketine verilen  <caption align=”bottom”> komutu ile başlığın alt kısımda olması sağlanır.

HTML5 Temel Çalışma Alanları (3.Ders Sayfa Yapısı)

HTML5 in yeni getirmiş olduğu etiketler sayesinde arama motorlarının desteklediği şekilde çalışma alanları oluşturacağız bu sayede seo uyumlu sayfalar tasarlamış oluruz.

HTML5 İle Gelen Yeni Alan Etiketleri

  • Header : Etiketi sitenin üst bilgi alanını kapsa bu alanda logo, menü, başlık, slogan, resim, reklam alanı, arama alanı, giriş alanı ve aklıma gelmeyen birçok özelliği bu alanda kullanabilirsini bu alanın temel kullanım alanı sitenin tanıtıcı özelliklerini ve kolay erişim için kullanılan alanları barındırmasıdır. Htlm de bu alanı oluştururken <div id=”hedader”></div> Olarak Tanımlıyorduk html5 de  sadece <header></header> olarak tanımlamamız yeterlidir.
  • Nav : Etiketinin Açılımı navigation’dır. Dilimizde navigasyon (yönlendirme) anlamına gelir. Sitemizdeki menü oluşumlarını <nav> Etiketi İçinde oluşturmamıza olanak sağlamaktadır. Htlm de bu alanı oluştururken <div class=”menu”></div> Olarak Tanımlıyorduk html5 de  sadece <nav></nav> olarak tanımlamamız yeterlidir.
  • Section : Etiketi Dilimizde kesim, kısım gibi bir anlama gelir. Section etiketi, sayfa detayımızı yani içerik alanımızı belirler. Htlm de bu alanı oluştururken <div id=”alan1″></div> Olarak Tanımlıyorduk html5 de  sadece <section></section> olarak tanımlamamız yeterlidir.
  • Article : Etiketi dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu etiket içinde yer alır. <section> etiketi ile birlikte kullanılması tavsiye edilir. Htlm de bu alanı oluştururken <div id=”icerik”></div> Olarak Tanımlıyorduk html5 de  sadece <article></article> olarak tanımlamamız yeterlidir.
  • Aside : Etiketi sidebar olarak tanımlanan yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer alır. Htlm de bu alanı oluştururken <div id=”alan2″></div> Olarak Tanımlıyorduk html5 de  sadece <aside></aside> olarak tanımlamamız yeterlidir.
  • Footer : Etiketi Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, “hakkımızda”, “iletişim” gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır. Htlm de bu alanı oluştururken <div id=”footer”></div> Olarak Tanımlıyorduk html5 de  sadece <footer></footer> olarak tanımlamamız yeterlidir.

html5 ile yeni gelen bu etiketler sayesinde div alanları oluşturmadan  ve daha tanımlayıcı biçimde alanlar belirleriz. Bu Yazımızda Örnek Kod sayfamız olmayacak ancak ilerleyen derslerde bu sayfa şablonunu kullanacağız.

Ters Dönen Masaüstü Ekranı Çözümü

Bu hatayı almışsanız mutlaka bilgisayarınıza profesyonel bir çocuk dokunmuştur ve sizde bunu nasıl yaptığını anlamamışsınızdır ve anlayamazsınız da çünkü onların teknolojileri bizden çok çok gelişmiş durumdadır:D Çocuğumuza, Kardeşimize, Misafirin Çocuğuna Kızmadan bu sorunu çözebiliriz veya tanıdığım bir arkadaşım gibi ekranınızı ters çevirip öyle kullanmaya da devam edebilirsiniz:) Neyse Aslında Sorun çok basit klavyenin tuş konbinasyonlarıyla ekranınızı düzeltebilirsiniz. Ctrl + Alt Tuşlarına Basılı Tutarak ve Yön tuşlarıyla ekranınızı düzeltebilirsiniz.

ters dönen masaüstü

Resimdeki Gibi Bir Görüntü Oluştuysa Ekranınızda Ctrl + Alt ve Üst Ok Tuşuna Basarak Ekranınızı Düzeltebilirsiniz.

yan dönen ekranı düzeltme tuşları

Ekran Ekran Sola veya Sağa Döndüyse de Yine Aynı Şekilde Ekranınızı Düzeltebilirsiniz..