HTML5 Tarayıcı Desteği
Eski web tarayıcıların, html5'e nasıl uyumlu hale getirileceğini kolayca öğrenebilirsiniz.
Html5, bütün modern tarayıcılar tarafından desteklenir.
Bunun yanında, bütün tarayıcılar, tanımlayamadıkları bütün html elemanlarını, satır içi elemanlar olarak yorumlarlar. Bu yüzden, eski tarayıcılara, html elemanlarını nasıl yorumlayacaklarını siz öğretebilirsiniz.
Html5, bütün modern tarayıcılar tarafından desteklenir.
Bunun yanında, bütün tarayıcılar, tanımlayamadıkları bütün html elemanlarını, satır içi elemanlar olarak yorumlarlar. Bu yüzden, eski tarayıcılara, html elemanlarını nasıl yorumlayacaklarını siz öğretebilirsiniz.
HTML5 Elemanlarını Bir Block Elemanı Olarak Tanıtmak
Html5, 8 tane yeni anlamsal (semantic) eleman getirmiştir. Bunların hepsi de block elemanlardır.
Eski tarayıcıların sorun çıkarmaması için, bu sekiz html5 elemanının, CSS display özelliğine block değeri atayabiliriz.
Bunu yapacak CSS kodları şunlardır:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
display: block;
}
HTML'e Yeni Bir Eleman (Element) Eklemek
HTML5 ile gelen hoş bir özellik de, kendi html elemanlarımızı oluşturabilmektir. Bunun için CSS kullanıyoruz.
Aşağıdaki örneğe dikkat edelim:
<!DOCTYPE html>
<html>
<head>
<title>Bir HTML elmanı oluşturmak</title>
<script>document.createElement("benimTagim")</script>
<style>
benimTagim {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<p>Bu bir paragraftır.</p>
<benimTagim>İlk tagımı oluşturdum</benimTagim>
</body>
</html>
Bu html dökümanı, tarayıcımızda şöyle gösterilecektirrr:
İlk tagımı oluşturdum
Yukaridaki html kodunda, document.createElement("benimTagim") scripti, Internet Explorer'in gönlünü almak için eklenmiş bir koddur.
Görülüdüğü gibi, benimTagim adında bir CSS elemanı oluşturuyoruz ve bu elemana arzu ettiğimiz CSS özelliklerini veriyoruz.
Daha sonra bu CSS elemanını bir html tagı gibi kullanabiliyoruz:
<benimTagim>İçerik</benimTagim> (eklediğimiz içerik, benimTagim tagının stillerini taşıyacaktır)
<html lang="en">
<head>
<title>HTML5 İskeleti Örneği</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 İskeleti</h1>
</header>
<nav>
<ul>
<li><a href="url">Anasayfa</a></li>
<li><a href="url">CSS</a></li>
<li><a href="url">JavaScript</a></li>
</ul>
</nav>
<section>
<h1>Sitemiz Hakkında</h1>
<article>
<h2>Amacımız</h2>
<p>Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. </p></article>
<article>
<h2>Site Kullanımı</h2>
<p>Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır. </p></article>
<article>
<h2>Site İçeriği</h2>
<p>Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. </p></article>
</section>
<footer>
<p>© 2015 dersimikod-html.blogspot.com.tr Bütün hakları saklıdır.</p>
</footer>
</body>
</html>
Tarayıcımızda yukarıdaki kod şöyle görünecektir:
UYARI: Verdiğimiz kodların gerçek sonuçları görmek için, bu kodları, html editörlerinize kopyala-yapıştır yapıp, kendi tarayıcınızda test ediniz. Burada, tarayıcıdaki görüntüsü/çıktısı olarak sizlere sunduğum kısımlarda, bazen sorunlar yaşanabilir.
Aşağıdaki örneğe dikkat edelim:
<!DOCTYPE html>
<html>
<head>
<title>Bir HTML elmanı oluşturmak</title>
<script>document.createElement("benimTagim")</script>
<style>
benimTagim {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<p>Bu bir paragraftır.</p>
<benimTagim>İlk tagımı oluşturdum</benimTagim>
</body>
</html>
Bu html dökümanı, tarayıcımızda şöyle gösterilecektirrr:
Bu bir başlıktır.
Bu bir paragraftır.Yukaridaki html kodunda, document.createElement("benimTagim") scripti, Internet Explorer'in gönlünü almak için eklenmiş bir koddur.
Görülüdüğü gibi, benimTagim adında bir CSS elemanı oluşturuyoruz ve bu elemana arzu ettiğimiz CSS özelliklerini veriyoruz.
Daha sonra bu CSS elemanını bir html tagı gibi kullanabiliyoruz:
<benimTagim>İçerik</benimTagim> (eklediğimiz içerik, benimTagim tagının stillerini taşıyacaktır)
Internet Explorer (IE) Problemi
IE8 ve daha önceki sürümleri, yeni HTML tagları oluşturma özelliğini desteklemez.
IE9 içinse şu yorum (comment) elemanı sayesinde tarayıcımızda, HTML5 etkinleştirilmiş olacaktır:
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
Bu yorum elemanı, "HTML5 Etkinleştirme Javascript"i olarak bilinir ve Sjoerd Visscher tarafından geliştirilmiştir ve "shiv" kodu olarak bilinir. Bir yorum elemanı olsada, IE9'dan önceki tarayıcılar bu yorum elemanını okuyup anlayabilir.
Yukarıda görüldüğü gibi, shiv kodu, html dökümanının <head> elemanı içine yazılmalıdır. Böylece, Internet Explorer, html5 taglarıyla karşılaşmadan önce, onları tanımış oluruz.Tam Bir Shiv Çözümü Örneği
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Stillendirme</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<h1>İlk Makalem</h1>
<article>
Bu benim ilk makalem. Bu benim ilk makalem. Bu benim ilk makalem. Bu benim ilk makalem.
</article>
</body>
</html>
<html>
<head>
<title>HTML5 Stillendirme</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<h1>İlk Makalem</h1>
<article>
Bu benim ilk makalem. Bu benim ilk makalem. Bu benim ilk makalem. Bu benim ilk makalem.
</article>
</body>
</html>
Örnek Bir HTML5 Dökümanı İskeleti
<!DOCTYPE html><html lang="en">
<head>
<title>HTML5 İskeleti Örneği</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 İskeleti</h1>
</header>
<nav>
<ul>
<li><a href="url">Anasayfa</a></li>
<li><a href="url">CSS</a></li>
<li><a href="url">JavaScript</a></li>
</ul>
</nav>
<section>
<h1>Sitemiz Hakkında</h1>
<article>
<h2>Amacımız</h2>
<p>Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. </p></article>
<article>
<h2>Site Kullanımı</h2>
<p>Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır. </p></article>
<article>
<h2>Site İçeriği</h2>
<p>Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. </p></article>
</section>
<footer>
<p>© 2015 dersimikod-html.blogspot.com.tr Bütün hakları saklıdır.</p>
</footer>
</body>
</html>
Tarayıcımızda yukarıdaki kod şöyle görünecektir:
HTML5 İskeleti
Sitemiz Hakkında
Amacımız
Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir. Burada amacımız belirtilir.Site Kullanımı
Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır. Burada site kullanımı hakkında bilgi vardır.Site İçeriği
Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır. Burada sitemizin içeriği hakkında bilgi vardır.UYARI: Verdiğimiz kodların gerçek sonuçları görmek için, bu kodları, html editörlerinize kopyala-yapıştır yapıp, kendi tarayıcınızda test ediniz. Burada, tarayıcıdaki görüntüsü/çıktısı olarak sizlere sunduğum kısımlarda, bazen sorunlar yaşanabilir.
Hiç yorum yok:
Yorum Gönder