Saban K.Merhabalar, mobilhanem.com için hazırladığım HTML5, CSS3 eğitim setine hoşgeldiniz. Bu derste Temel Html Etiketleri’ni tanımaya çalışacağız. Bir html sayfası oluştururken kullanmamız gereken temel html etiketleri (<html><head><title><meta><body>) vardır. Bu html etiketleri sayesinde sayfamızı temel parçalara bölerek işlemlerimizi daha düzenli yaparız. Örnek olarak, <head> etiketleri arasında sayfa başlığı, sayfa hakkında temel bilgileri barındıran meta etiketleri veya css, javascript dosyalarımızı sayfaya dahil ettiğimiz alandır. Tarayıcı tarafında gözükmesini istediğimiz diğer tüm etiketleri de <body> etiketleri arasına yazarız.
Temel html etiketlerini kullanarak hemen bir sayfa tanımlayalım.
Önceki derste bahsettiğimiz üzere .html uzantılı bir sayfa tanımlayarak işe başlıyoruz.
Örnek olarak index.html adında bir dosya açabiliriz.
Ardından
<html> <head> <meta charset="UTF-8" /> <title>İlk HTML Sayfam</title> <meta name="description" content="Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız." /> <meta name="keywords" content="html nedir?, css nedir?" /> <meta name="author" content="@mobilhanem" /> <meta name="robots" content="index, follow"> </head> <body> <p>İlk html paragrafım.</p> </body> </html>
etiketlerini yazıyoruz. Yine önceki dersimizde bahsettiğimiz üzere etiketlerin açılıp kapanma özelliğini kullanarak etiket içinde başka etiketler tanımladık.
İlk olarak <html> etiketini açarak, sırasıyla <head>, <body> etiketlerini açtık ve kapattık. Şimdi de kullandığımız tüm etiketlerin ne işe yaradıklarına tek tek bakalım.
<html> Etiketi Ne İşe Yarar?
html etiketi içerisine yazılacak tüm etiketleri kapsar. Html etiketi kullanmadan diğer etiketlerin bir anlamı olmaz.
<head> Etiketi Ne İşe Yarar?
Bu etiket sayfanın tarayıcıya ve arama motorlarına tanıtıldığı (Meta etiketleriyle), CSS ve Javascript dosyalarının dahil edildiği alanı temsil etmektedir. Sayfa görünümde herhangi bir değişikliğe sebep olmaz. Görünmez özellikleri temsil edecektir.
<title> Etiketi Ne İşe Yarar?
Bu etiket sayfa isminin belirtilmesini sağlar. Yani tarayıcı sekmesini temsil eden adı kapsar.
<meta /> Etiketi Ne İşe Yarar?
Meta etiketleri sayfaya ait temel bilgileri (Sayfa açıklaması, anahtar kelimeler, başlık vs) gibi bilgileri tarayıcılara ve arama motorlarına iletir. Böylelikle sayfanın hangi konu ile alakalı olduğunu arama motorları öğrenir ve sonuçları o bilgilere göre listeler. Meta etiketleri her html sayfasında muhakkak olması gereken etiketlerdir.
Kullanılan en temel metalar :
<meta name="description" content="Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız." /> //Sayfa hakkında genel bilgi (maksimum 255 karakter) <meta name="keywords" content="html nedir?, css nedir?" /> //Sayfayı temsil eden anahtar kelimeler (maksimum 255 karakter) <meta name="author" content="@mobilhanem" /> //Yazar bilgisi <meta name="robots" content="index, follow"> //Sayfanın indexlenip (follow) indexlenmemesini (nofollow) belirten etikettir.
Not: HTML etiketlerinin açılıp kapanma özelliğinde bahsetmiştik önce derste hatırlarsanız. Fakat meta etiketlerinde görüldüğü üzere kapanma etiketi ayrı bir etiket olarak tanımlanmıyor, tek etiket içerisinde / ifadesiyle hem açılıp hemde kapatıldığını görüyoruz. İstisnai etiketler olduğunu meta etiketleriyle görmüş olduk.
<body> Etiketi Ne İşe Yarar?
Bu etiket arasında yazacağımız tüm etiketler ekrana yansır. Genel olarak tasarım yaparken <body> etiketleri arasında çalışacağız. Yani <body> etiketi bir html dosyanın en önemli kısmı.
<p> Etiketi Ne İşe Yarar?
En sık kullanacağımız etiketlerden birisi olan <p> etiketi, paragraflar oluşturmamızı sağlar.
Bu dersimizde her html sayfasında olması gereken temel html etiketlerini (<html><head><title><meta><body>) öğrendik. Gelecekte tanımlayacağımız tüm html sayfalarımızda bu etiketleri defalarca kullanacağız.
Bir sonraki HTML dersinde görüşmek üzere hoşça kalın!
212
Ferhat Yaldıran
Emine Yılmaz
Slack Grubumuza Üye Oldunuz mu ?
Thanks very interesting blog!
Emeğinize sağlık.
Emeğinize sağlık. hepsini sizler sayesinde öğrendim.
Wonderful article! We will be linking to this great content
on our site. Keep up the great writing.
meta etiketlerinde wiewport niye yok hocam
Anlaşılır ve sade anlatım için teşşekürler .
İyi çalışmalar…