Html ile Web İşlemleri 4 - Head, Meta ve Style Etiketleri
TEMEL HTML5 ETİKETLERİ
3. <head> Etiketi
<head> etiketi, belgenin başlık kısmını tanımlar. <head> etiketi <html> etiketinin içinde yer alır. <head> açma ve kapama etiketleri arasında site başlığını bildirmek için yazılan <title> etiketi dışındaki hiçbir içerik kullanıcı tarafından görülmez.
Arama motorlarına bilgi vermek (SEO çalışması) için <head> etiketi arasındaki bilgiler kullanılır. Bu etiket içerisinde sunucu ve arama motorlarına yönelik bildirimler (meta bilgileri), title (başlık), stiller vb. bulunur.
Uygulama - 2
HTML kaynak kodunu görüntüleme işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: Açılan sayfanın boş bir yerinde sağ tıklayınız.
3. Adım: Açılan hızlı menüden “Sayfa Kaynağını Görüntüle” seçeneğini seçiniz.
4. Adım: Açılan HTML kodlarını inceleyiniz.
5. Adım: <head> açık etiketini bulunuz.
6. Adım: </head> kapalı etiketini bulunuz.
7. Adım: HTML belgesi iskeletinde yer alan temel HTML etiketlerini bu sayfa içinde bulunuz.
8. Adım: Bulduğunuz temel etiketleri (html, head, title, body) yukarıdan aşağıya sırayla not alınız.
9. Adım: Bulduğunuz temel etiketlerin sırasını, arkadaşlarınızla karşılaştırınız.
4. <meta> Etiketi
<meta> etiketleri, HTML belgesi hakkında bilgiler içerir; meta veriler, sayfada gösterilmez. Meta verileri tarayıcılar, arama motorları ve diğer web hizmetleri tarafından kullanılır. <meta> etiketleri <head> etiketi arasına yazılır. <meta> etiketinin kapama etiketi bulunmaz Meta verilerinde; sayfa karakter kodlaması, web sayfası hakkında açıklama, arama motorları için anahtar kelime tanımlama, web sayfası yazarı, web sayfası yönlendirme vb. bilgiler bulunur.
<meta charset="UTF-8">
<meta name="description" content="Web Tasarımı ve Programlama">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="İKRA">
<meta http-equiv ="refresh" content="4; url = 'https://mtegm.meb.gov.tr/' ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Sıra Sizde
Meta bilgilerini HTML belgesine ekleyip kaydediniz ve tarayıcıda görüntüleyiniz. Sayfada değişiklik olup olmadığını gözlemleyiniz.
Hazırlanan web sayfalarının görüntülendiği tüm cihazlarda düzgün görünmesi için <meta> verileri ile ayarlama işlemine ihtiyaç vardır.
HTML belgesinde viewport tanımlaması yapılmadığında web sitesinin görüntülendiği cihazdaki görüntüsü Görsel 3.9.a’daki gibi olur. Viewport tanımlaması yapıldığında ise Görsel 3.9.b’deki gibi web sayfası cihazda düzgün görüntülenecektir.
Uygulama - 3
Web sayfası görüntü alanını tüm cihazlarda düzgün görüntülemek için meta verileri ile ayarlama işlemini yönergeler doğrultusunda gerçekleştiriniz.
</head>
<head>
<meta charset="utf-8"/>
<title> WEB TABANLI UYGULAMA GELİŞTİRME </title>
</head>
5. <style> Etiketi
<style> etiketi ile sayfada kullanılan stil işlemlerinin tanımlaması yapılır. Örneğin; arka plan rengi, yazı rengi ya da nesnelerin hizalanması vb.
<style> Buraya CSS kodlarınız gelir </style>
Modüler Sistem Konuları
2.2.1. <OL> Etiketi
Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından başlayarak sıralı listenizi oluşturabilirsiniz.
<ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır.
Örnek 1:
Burada <ol> etiketini kullanarak listeleme işlemine başlıyoruz. <li> etiketini kullanarak da listeleyeceğimiz elemanların isimlerini yazıyoruz.
|
Kod |
Görünüm |
|---|---|
 |
 |
Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz.
“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle olacaktır.
“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma rakamları ile yapılacaktır.
Sıralamanın her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.
2.2.2. <UL> Etiketi
<ul> etiketi madde işaretleri şeklinde listeleme yapmak için kullanılır.
Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.
2.2.3. <LI> Etiketi
Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi şekilde olacağını ise <ol> ve <ul> etiketleri belirler.
Örnek Uygulama
Aşağıdaki görüntüyü elde etmeyi sağlayacak HTML kodlarını yazınız.
Listeleme etiketlerini kullanınız.
Hiç yorum yok