Bilişim İzle | Bilişim Teknolojileri Sitesi

HTML Etiketler 2

Web sayfaalarında kullanılan HTML dili etiketleri konu anlatımı.

HTML Etiketler 2

Web Sayfasının Genel Yapısı

HTML Etiketler 1 isimli yazımızda HTML’nin genel kurallarını öğrendik. Şimdi web sayfasını kodlamaya geçebiliriz. Bunun için öncelikle bir web sayfasında bulunması gereken bazı etiketler vardır. Bir web sayfası hazırlarken bu etiketlerin muhakkak bulunması gerekmektedir. Şimdi sayfamızın genel yapısını bu etiketleri kullanarak oluşturalım.
<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

<head> </head> etiketleri arasında sayfayı tanımlayıcı bilgilerin bulunduğunu belirtmiştik. Bu tanımlayıcı bilgileri <meta> etiketi ile belirtiyoruz.
 
Bu etiket ile belirtebileceğimiz bazı bilgiler şunlardır:
 
1. Sayfanın yazarı
   <meta name=“author” content=“Bişimizle” />
 
2. Sayfanın kısa bir tanıtım cümlesi
   <meta name=“description” content=“Sayfanın kısa tanıtımı burada yapılır.” />
 
3. Web Sitenin arama motorlarında bulunmasını sağlayacak anahtar sözcükler
   <meta name=“keywords” content=“Web sitesinin içeriği ile ilgili kelimeler virgülle ayrılarak burada yazılır.” />
 
4. Sayfanın karakter seti
   <meta http-equiv=“content-type” content=“text/html; charset=UTF-8” />
 
5. Sayfanın dili
   <meta http-equiv=“content-language” content=“tr” />
 
6. Sayfanın telif hakkı
   <meta name=“copyright” content=“&copy; 2016 Bilişim İzle” />
 
7. Sayfanın belirtilen saniye sonra yönlendirileceği adres
   <meta http-equiv=“refresh” content=“5; url=https://www.bilisimizle.com” />
 

Ö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>
web sayfası hazırlama örneği 1 ekran çıktısı

Ö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)

web tasarımında temel ilkeler

BİR YORUM YAZIN

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.

Bilisimizle.com - Bilişim Teknolojileri, Yazılım, Kodlama, Donanım, Elektronik, Eğitim Videoları, Deneme Sınavları, Öğretmen Evrak, Ders Notları... | 2016-2022