Yazar: html yazılarımı okuduysanız <head> etiketini sizlere anlatmıştım. <head> etiketi içerisindeki etiketlerin tarayıcıda görüntülenmediğini ve web sitemizin meta, title, css ve ya java script tanımlamalarını içerdiğini söylemiştim.
html 5 head etiketlerini sizlere bu yazımda anlatacağım.
çok yakından bildiğiniz <title> etiketi ilk etiketimizdir.
<title> … </title>
bu etiketi başlığımızı oluşturmak için kullanırız.
örnek kullanımı:
<!doctype HTML>
<html>
<head>
<title> bu bir başlık etiketidir </title>
</head>
<body>
</body>
</html>
meta etiketleri:
bu etiket guruplarını söylemiştik zaten sadece burada html 4 ve html 5 arasındaki farkı görmeniz için anlatacağım.
web sitemizin anahtar kelimeleri, açıklamaları, yazar ismi telif hakkı gibi içeriklerin bulunduğu bölüme meta data adını veririz.
bu kısım arama motorlarını ilgilendiren bir kısımdır. web sitemizin seosu ile ilgili içerikleri yazacağımız kısımdır.
aynı zamanda charsetlerin yani karakter guruplarının yer aldığı bölümdür.
türkçe karakterleri ve ya dilimizle ilgili gerekli karakter guruplarını belirtiriz.
aşağıdaki örneği inceleyelim:
<!doctype HTML>
<html>
<head>
title> sayfanın başlığı </title>
<meta charset=”utf-8″ />
<meta name=”description” content=”Bu bir web sayfasının tanımıdır.”>
<meta name=”keywords” content=”anahtar, kelimeler, burada, olur”>
</head>
<body>
</body>
</html>
yukarıdaki örnekte ilk olarak başlığımızı belirttik, daha sonra ise türkçe sayfaolduğunu ve karakter gurubunun utf-8 olduğunu belirttik, web sitemiz ile ilgili açıklamaların yer alacağı kısım ve son olarak anahtar kelimelerin yer alacağı kısımı belirttik.
link etiketi:
<link> html sayfalarında link tanımlarken kullanırız genelde bu etiketi <head> etiketi içerisinde css tanımımızı yaparken yani css dosyasını çağırırken kullanırız.
örnek:
<!doctype HTML>
<html>
<head>
<link rel=”stylesheet” href=”style.css”/>
<link rel=”shortcut icon” href=”favicon.png”>
</head>
<body>
</html>
<style>: etiketi:
sadece tek bir sayfada etkili olmasını istediğimiz css kodlarını tanımlayabileceğimiiz etikettir.
css derslerini incelerseniz detaylı bir şekilde orada anlattım.
<style>…</style>
örnek kullanım:
<!doctype HTML>
<html>
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<p>Bu bir deneme yazıdır.</p>
</body>
</html>
<script etiketi:
java script kodlarımızı tanımlamak için html sayfalarında script etiketini kullanırız bu etiket ile javascript kodlarımızı tanımlarız.
aynı zamanda src komutu ile sayfamıza javascript kodlarınıda dail ederiz.
<script>… </script>
örnek kullanım:
<!doctype HTML>
<html>
<head>
<script>
<script src=”~/ozdogan/web_tasarim/Scripts/jQuery-2.0.2.min.js”></script>
$(document).ready(function() {
alert(‘Sayfa hazır!’);
});
</script>
</head>
<body>
</body>
</html>
Yukarıdaki örnekte sayfaya jQuery’nin 2.0.2 sürümünün minimize edilmiş dosyasını yükledik. Diğer satırlarda ise sayfa yüklendikten sonra “Sayfa hazır!” şeklinde bir yazının olduğu uyarı penceresi açılmasını istedik.
Html 5 head etiketleri arısında kullanılan temel etiketleri bu şekilde belirtmeliyim. çünkü genel olarak bu etiket guruplarını head etiketleri arasında kulanmaktayız.
Html 5 etiket kullanımını ilerleyen yazılarımda daha iyi anlayacağınıza eminim. soru ve sorunlarınızı yorum olarak bana ulaştırabilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan html 5 teknolojisine giriş başlıklı makalemizde html 5 makaleleri, html 5 nedir ve html 5 teknolojisi hakkında bilgiler verilmektedir.