Html ile Web İşlemleri 5 - Title Etiketi
TEMEL HTML5 ETİKETLERİ
6. <title> Etiketi
<title> etiketi içeriği, tarayıcının başlık çubuğunda veya sayfa sekmesinde görüntülenir. <title> etiketi <head> etiketi arasında yazılır.
<meta charset="utf-8"/>
<title> WEB TABANLI UYGULAMA GELİŞTİRME </title>
</head>
SEO açısından sayfa başlığı ve <title> etiketi önemlidir. Arama motorları, web sitesindeki her sayfanın başlık içeriğini veri tabanlarına kaydeder. <title> etiketi içinde geçen bir kelime arandığında aranan kelimeye sahip tüm sayfalar listelenir, sayfanın arama listesinin kaçıncı sırasında olacağını arama motoru algoritması belirler. Başlık, içeriği tanımlayıcı, kısa ve her HTML belgesinde farklı olmalıdır. <title> tagı, sitenin künyesi gibidir. HTML belgesi içeriği ile <title> içeriği uyumlu olmalıdır, arama motorları bu uyumsuzluğu tespit ettiğinde sayfa puanı (page rank) düşer.
Uygulama - 4
<title> elemanı kullanarak ANASAYFA, HAKKIMDA, İLETİŞİM başlıklı HTML sayfaları oluşturma işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <head> elemanı içinde <title> ANASAYFA </title> HTML kodunu ekleyiniz.
3. Adım: Oluşturduğunuz HTML belgesini “anasayfa.html” olarak kaydediniz.
<html>
<head>
<meta charset="utf-8"/>
<title> ANASAYFA </title>
</head>
<body>
<!--Burada anasayfa içeriği yer alacak-->
</body>
</html>
4. Adım: “anasayfa.html” HTML belgesinde Head elemanı içindeki <title> ANASAYFA </title> HTML kodunu <title> HAKKIMDA </title> olarak güncelleyiniz.
<html>
<head>
<meta charset="utf-8"/>
<title> HAKKIMDA </title>
</head>
<body>
<!--Burada hakkımda içeriği yer alacak-->
</body>
</html>
</title> kodunu <title> İLETİŞİM </title> olarak güncelleyiniz.
7. Adım: Bu HTML belgesini “iletisim.html” olarak “Farklı” kaydediniz.
<head>
<meta charset="utf-8"/>
<title> İLETİŞİM </title>
</head>
<body>
<!-- Burada iletişim içeriği yer alacak-->
</body>
</html>
8. Adım: Oluşturduğunuz sayfaları tarayıcıda görüntüleyiniz. Tarayıcı sekmelerinde görüntülenen başlıkları gözlemleyiniz.
Modüler Sistem Konuları
3.1. Metin Düzenleme Etiketleri
Html etiketleri kullanılarak metinler üzerinde görsel düzenlemeler yapılabilir. Bir metnin rengi, şekli, boyutu vs. üzerindeki değişiklik ve düzenlemelerin html etiketlerini kullanarak nasıl yapılacağına bakalım.
3.1.1. <HX>
<HX> etiketleri, dokümana başlık eklemek için kullanılan etiketlerdir. <hx> etiketindeki “x” ifadesi, 1’den 6’ya kadar değer almaktadır. Sayı azaldıkça yazı büyüklüğünde artış olmaktadır. Buradaki <h1>…</h1> en büyük başlığı, <h6>…</h6> ise en küçük başlığı gösterir.
ÖĞRENME FAALİYETİ-3
AMAÇ
ARAŞTIRMA
<HX> ile kullanılacak parametrelerden birisi “align” parametresidir.
Align parametresi, Left (sola hizala), right (sağa hizala), center (ortala), justify (iki yanayasla) değerlerini alabilir.
<h1 align=”center”> Milli Eğitim Bakanlığı </h1> şeklinde yazıldığında “Milli Eğitim Bakanlığı” yazısı sayfaya ortalanmış bir şekilde yazılacaktır.
3.1.2. <B>
İstenilen metni kalın (bold) olarak yazmak için kullanılır.
Kullanımı:
<B>…</B> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore
3.1.3. <U>
İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.
Kullanımı:
<U>…</U> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore
3.1.4. <I>
İstenilen metni eğik(italik) olarak yazmak için kullanılır.
Kullanımı:
<I>…</I> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore
3.1.5. <BR>
Enter tuşu görevini görür. Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz.
Örnek:
Ey Türk Gençliği!
Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini,
ilelebet, muhafaza ve müdafaa etmektir.
3.1.6. <P>
Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.
Örnek:
3.1.7. <FONT>
<FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir.
Size: Yazının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.).
Örnek:
<FONT SIZE ="1"> Merhaba</FONT>
<FONT SIZE ="4"> Merhaba</FONT>
<FONT SIZE ="7"> Merhaba</FONT>
Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.
Size parametresine -1, +2 gibi değerler verilerek de metnin büyüklüğü verilen değer kadar arttırılıp eksiltilebilir (Burada font büyüklüğü 1 eksiltilip, 2 arttırılmıştır.).
Color: Yazı tipi etiketi içerisinde metnin rengini değiştirmek için kullanılır. Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği yapabilirsiniz.
Örnek:
<FONT size="5" COLOR="aqua"> Merhaba</FONT>
<FONT size="5" COLOR="#FF0000"> Merhaba</FONT>
Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.
Face: Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır. Örneğin Face=" Times New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.
<font face="Algerian" size="7" color="purple">Merhaba</font>
Burada yazı tipi olarak “Algerian” yazı tipi kullanılmıştır.
Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.
Hiç yorum yok