HTML Etiketler 2
Web sayfaalarında kullanılan HTML dili etiketleri konu anlatımı.
Web Sayfasının Genel Yapısı
<html> -- Web sayfasının başladığını belirtir. <head> -- Sayfayı tanımlayıcı bilgilerin olduğunu belirtir <title>Sayfanın Başlığı</title> -- Web sayfasının pencere ya da sekme başlığıdır </head> -- Sayfayı tanımlayıcı bilgilerin bittiğini belirtir <body> -- Web sayfasının içeriğinin başladığını belirtir Sayfadaki yazı, resim, tablo, ... -- Web sayfasının görünen tüm içeriği buradadır. </body> -- Web sayfasının içeriğinin bittiğinin belirtir </html> -- Web sayfasının bittiğini belirtir.
Yukarıdaki etiketleri açıklayacak olursak;
<html> </html>: Bir web sayfasında bulunan ilk etikettir. Bu etiket web tarayıcılarına web sayfasının başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.
<head> </head>: Bu etiket web sayfasının tanımlayıcı bilgilerini içermektedir. Buradaki bilgiler ekranda görüntülenmez. Daha çok arama motorlarını bilgilendirmek amaçlıdır. Örneğin sayfanın başlığı, dili, karakter seti, yazarı, anahtar sözcükleri gibi tanımlayıcı bilgiler bu bölümde yazılır.
<title> </title>: Web sayfasının pencere yada sekme başlığıdır. Günümüzdeki tüm tarayıcılar artık sayfaları kendi içerisinde sekmeler şeklinde açmaktadır. Bu özellik ile tarayıcıda görünen sekmenin başlığı ayarlanmaktadır. Bu etiket sadece <head> </head> arasında yazılır.
<body> </body>: Web sayfamızda görünmesini istediğimiz her şey bu etiketler arasına yazılır. Bunlar yazılar, listeler, tablolar, resimler ya da videolar olabilir. Sayfanın arka plan rengi için bgcolor ve arka plan resmi için background parametreleri vardır.
Meta Bilgileri
Örnek: Aşağıdaki bilgiler doğrultusunda bir web sayfası hazırlayalım. Sayfa Başlığı: Bilişim Teknolojileri Sayfa Dili: Türkçe Karakter Kodlaması: UTF-8 Anahtar Sözcükler: bilişim teknolojileri, internet, web tarayıcısı Sayfa İçeriği: İnternet nedir? İnternet, dünya üzerindeki bilgisayarları birbirine bağlayan büyük bir iletişim ağıdır. İnternet gün geçtikçe büyümekte ve teknolojisi hızla gelişmektedir. İnternetin gelişmesiyle beraber pek çok alandaki bilgilere insanlar daha kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedirler. WEB Tarayıcısı (Browser) nedir? WEB Tarayıcısı (Browser), internet sayfalarını görüntülememizi sağlayan programlara denir. WEB tarayıcısı, adres çubuğuna yazdığımız adresteki sayfaları bize görüntüler. WEB tarayıcılarına, kodlarla hazırlanan web sayfalarını çözümleyip görüntüleyen bir çeşit dönüştürücü de diyebiliriz. |
<html> <head> <title>Bilişim Teknolojileri</title> <meta http-equiv="content-language" content="tr" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="bilişim teknolojileri, internet, web tarayıcısı" /> </head> <body> <h3>İnternet nedir?</h3> <p>İnternet, dünya üzerindeki bilgisayarları birbirine bağlayan büyük bir iletişim ağıdır. İnternet gün geçtikçe büyümekte ve teknolojisi hızla gelişmektedir. İnternetin gelişmesiyle beraber pek çok alandaki bilgilere insanlar daha kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedirler.</p> <h3>WEB Tarayıcısı (Browser) nedir?</h3> <p>WEB Tarayıcısı (Browser), internet sayfalarını görüntülememizi sağlayan programlara denir. WEB tarayıcısı, adres çubuğuna yazdığımız adresteki sayfaları bize görüntüler. WEB tarayıcılarına, kodlarla hazırlanan web sayfalarını çözümleyip görüntüleyen bir çeşit dönüştürücü de diyebiliriz.</p> </body> </html>
Örnek: Aşağıdaki bilgiler doğrultusunda bir web sayfası hazırlayalım. Sayfa Başlığı: URL Nedir? Sayfa Dili: Türkçe Karakter Kodlaması: UTF-8 Anahtar Sözcükler: url, internet, özgün kaynak adresi Arkaplan Rengi: #faffff Arkaplan Resmi: bg.jpg Sayfa İçeriği: URL nedir? URL, “Uniform Resource Locator” (Özgün Kaynak Adresi) kelimelerinin baş harflerinden oluşan bir kısaltmadır. İnternetteki her sayfanın, resimlerin ve diğer nesnelerin birer adresleri vardır. Bu adreslere URL denilmektedir. Her URL benzersizdir ve ilgili sayfa, resim ya da nesneye ulaşmak için kullanılır. |
<html> <head> <title>URL Nedir?</title> <meta http-equiv="content-language" content="tr" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="url, internet, özgün kaynak adresi" /> </head> <body bgcolor="#f4ffff" background="img/bg.jpg"> <h3>URL Nedir?</h3> <p>URL, "Uniform Resource Locator" (Özgün Kaynak Adresi) kelimelerinin baş harflerinden oluşan bir kısaltmadır. İnternetteki her sayfanın, resimlerin ve diğer nesnelerin birer adresleri vardır. Bu adreslere URL denilmektedir. Her URL benzersizdir ve ilgili sayfa, resim ya da nesneye ulaşmak için kullanılır.</p> </body> </html>
Body etiketinin içerisinde hem bgcolor hem de background parametreleri kullanılmıştır. Bu durumda eğer resim bulunamazsa arka plan rengi etkili olacaktır. Ama şu durumda arka plan resmi görünecektir. Her ikisini birlikte kullanmak zorunda değilsiniz. Sadece birini de kullanabilirsiniz.
Bilindiği gibi bir web sitesi birçok sayfadan, resimden ve diğer nesnelerden oluşmaktadır. Planlı bir çalışmanın gereği olarak bir site yapmaya bağlamadan önce sitenin kök dizini olacak bir klasör, daha sonra da bunun içerisinde resimlerin ve diğer dosyaların saklanacağı img, css, js gibi klasörler oluşturmalısınız.
Yukarıdaki örnekte bir masaüstünde url/ adında bir klasör oluşturduktan sonra bunun içinde img/ adında bir klasör daha oluşturduk. Sonra arka plan resmi olarak kullanacağımız bg.jpg resmini img/ klasörüne kopyaladık.
Body’nin background parametresinde bg.jpg resminin kullanırken öncelikle bu resmin yolunu yazdığımıza dikkat ediniz. ( <body bgcolor=“#faffff” background=“img/bg.jpg”> )
Web sayfamız görseli (img/bg.jpg) bulamazsa bgcolor devreye girecek ve web sayfamız aşağıdaki gibi görünecektir.
Web sayfamız görseli (img/bg.jpg) içerisinde bulursa o zaman da backgroud devreye girecek ve web sayfamız aşağıdaki gibi görünecektir.
HTML Etiketler 3 Konu Anlatımı için Tıklayınız…(Listeleme Etiketleri) |