Ana Sayfa / Kodlama Dilleri / Html Etiketleri Kullanım Alanları ve Etiketlerin Doğru Kullanımı

Html Etiketleri Kullanım Alanları ve Etiketlerin Doğru Kullanımı

Uyarı !!!Bu yazının kaynağı “grafiktasarimmedya.com” dur. Kopyalanması ve başka website yada benzer kaynaklarda gösterilmesi yasaktır.
HatırlatmaBu yazımızda gösterdiğimiz örneklemeler, sitemizde kullandığımız css tanımlamalarından ötürü farklı görünümlerde yansıyabilir. Kendiniz deneme yapmak için bilgisayardan metin editörünü açarak kodları uygulayabilir daha sonra *.html uzantısı ile kaydederek tarayıcınızda nasıl göründüğüne bakabilirsiniz.

Html Etiketleri ve Kullanım Şekilleri

Aslında HTML için bir programlama dili tabiri yanlıştır. Çünkü HTML ile kendi başına çalışan bir program yazılamaz. Ancak HTML kodlarını yorumlayabilen bir program aracılığı ile bu yapılabilir. Asıl olarak html yazı, video, resim gibi değişik verileri basitçe birbirine bağlamak olarak tanımlanabilir. Kısaca HTML’den bahsettikten sonra şimdi gelin bu HTML etiketleri neymiş birlikte inceleyelim.

1. <html></html> Etiketi ve Kullanımı

html etiketi sayfamızın html içerdiğini belirtmek için kullanılır. Diğer html kodlarının yorum aralığı bu etiket sayesinde belirlenir. Kodlamaya başlamadan önce <html> ile başlanır en sonunda ise etiket </html> şeklinde kapatılır.


Örnek:

 

<html>

<head>Etiket İçeriği</head>

<body>Etiket İçeriği </body>

</html>

2.<head> </head> Etiketi ve Kullanımı

<head> etiketi sayfa bilgilerinin yazıldığı etiket kısmıdır. Sayfa başlığını simgeleyen <title> ve arama motorlarına bilgi amaçlı hazırlanan <meta> etiketleri <head> etiketi arasında yer alır.

Örnek:

<html>

<head>

<title>Grafik-Tasarım-Medya | Destek Platformu</title>
<meta name="keywords" content="corel,photoshop,flash,dreamweaver />

</head>

<body> …. body etiketinin içeriği …. </body>

</html>

3.<body></body> Etiketi ve Bileşenleri

Oluşturacağımız HTML sayfamızda en geniş etiket içeriği <body> etiketi içerisinde bulunur. Ziyaretçiye göstereceğiniz tüm sayfa içeriği bu kısımda görünür. Bu nedenle burada belirtilen etiketlerle sayfamızın genel hatlarını ortaya koyabiliriz. Body etiketi bahsettiğimiz üzere birçok bileşeni içerisinde bulundurur. Bu bileşenler ve aktivitelerini açıklayalım şimdi…

Kod İşlevi (Yansıması)
text = “renk-değeri” Sayfanızdaki yazıların rengine renk-değeri ile belirtilen değeri verir.
link = “renk-değeri” Sayfanızdaki bağların rengine renk ile belirtilen değeri-değeri verir.
vlink = “renk-değeri” Sayfanızdaki ziyaret edilmiş bağların rengine renk-değeri ile
belirtilen değeri verir.
alink = “renk-değeri” Sayfanızdaki aktif bağların rengine renk-değeri ile belirtilen
değeri verir.
bgcolor = “renk-değeri” Sayfanızın arka plan rengine renk-değeri ile tanımlı değeri verir.
background = “resim_dosyası” Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız,
resim_dosyası kullanacağınız resmin adını temsil eder.
topmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst
kenarına olan uzaklığını belirler.
leftmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol
kenarına olan uzaklığını belirler.
rightmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ
kenarına olan uzaklığını belirler.
onload = “betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload = “betik” Başka bir sayfaya geçerken çalıştırılacak javascript betiğini
belirler.

Tablodaki belirtilen etiketler body etiketi içerisinde sıklıkla kullanılan etiketlerden bazılarıdır. Bu etiketlerden en sık kullanılan ve renk değeri olarak belirtilen kodlamalar içeriğinizin rengini belirleyecektir.

Renk Kodlarının Kullanımı

Renk kodları daima # (diyez) sembolü ile başlar ve 6 harf yada rakam kombinasyonunda oluşur. Her harf yada rakam rengin değişmesine neden olur. Rakam ve harf kullanılabildiği gibi renkleri ingilizce isimlerini yazarakta kodlayabiliriz.

Örnek:

#ffffff : Beyaz Renk

#000000: Siyah Renk

#808080: Gri Renk

white: Beyaz Renk

black: Siyah Renk

grey: Gri Renk

Renk kodlarında da diğer kodlarda olduğu gibi Büyük/Küçük harf duyarlılığı yoktur. Büyük harfle yazsanızda , küçük harfle yazsanızda yansıması aynı şekilde olacaktır. ( Örnek: #ffffff: Beyaz, #FFFFFF: Beyaz)

Şimdi yukarıda tabloda belirttiğimiz bileşenleride kullanarak bir örnek yazalım.

1. <body text=”#808080″ bgcolor=”#FFFFFF” link=”#000000″ vlink=”#000080″ alink=”#000000″>

2. <body text=”#808080″ background=”../images/arkaplan.png”>

3. <body bgcolor=”#C0C0C0″ text=”#ffffff” topmargin=”0″>

Yukarıdaki örneğimizde 1. satırda, body etiketi içerisinde yazımızın renginin gri, arkaplan renginin beyaz, yazdığımız linklerin siyah, aktif linkimizin lacivert, ziyaret edilmiş linkimizinde siyah olacağını belirledik. 2. satırda yine body etiketi içerisinde yazı rengimizin gri, arkaplanın ise ftp de images klasörüne upload ettiğimiz arkaplan.png isimli resim dosyasının olmasını istedik. 3. satırımızda da, sayfa arka fonunun gri, yazımızın beyaz ve body etiketi içerisindeki bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirlemiş olduk.

Lütfen Diğer Sayfaya Geçiniz –>

Yorum Yazın

3 Yorumlar

  1. vallahi süper anlatmışınız bana çok yaradı tşklr… 🙂

  2. yapanın eline sağlık.10 numara.tam ihtiyacım olan şeydi……

  3. Harika anlatım olmuş. Daha ne kadar yalın anlatılabilirdi ki…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir