Web Tasarım&Grafik Animasyon - Html Etiketleri
  Ana Sayfa
  Html Dersleri
  Web Tasarım Meb Modülleri
  Html Etiketleri
  Renk Kodları
  Html Hazır Kodlar
  Grafik & Animasyon
  Açık Kaynak İşletim Sistemi
  Sitene Banner Yap
  Haberler
  Oyunlar
  Ziyaretçi defteri
  İletişim
  Sitemap

<html>.....................</html> Etiketi:
Bütün html biçimindeki web sayfaları bu etiketle başlar ve biter.Diğer html kod blogları bu etiket içine yazılır.Web tarayıcısı sayfanın html biçiminde olduğunu bu etiket sayesinde anlar.

<head>.....................</head> Etiketi:

Sayfayı nitelendiren başlık etiketlerinin ve genel tanımlamaların yapıldığı etikettir.Head etiketinin yorum aralığında <meta> etiketi yer alır.Bu etiket siteyi web tarayıcılarına ve arama motorlarına tanıtır.Meta etiketinde bulunan parametreler aşağıda verilmiştir.

Parametre

Görevi

Name

Author; description ve keywords özelliği.

Http-equiv

Refresh, expires, content,styl type özelliği.

Size

Yazı boyu.


<title>.....................</title> Etiketi:

Head etiketi içinde bulunan title bölümünde sayfanın başlığı yazılır. Web tarayıcısının sol üst bölümünde görüntülenir.

<body>.....................</body> Etiketi:

Html belgesinin bütün içeriği bu bölümde yer alı. Buraya metin, resim, liste vb herşey eklenir.
 

Parametre

Görevi

Bgcolor

Arkaplan rengi.

Background

Arkaplanda kullanılacak resim.

Link

Linklerin rengi.

Alink

Link tıklandığındaki renk.

Vlink

Daha önce girilmiş linklerin rengi.


Metin ve Görünüm Düzenleme Etiketleri:
     1=<Hx>.....................</Hx> Etiketi:

Döküman içinde bulunan başlıkların büyüklüklerini belirler.1den 6ya kadar değer alabilir. En büyük 1 En küçük 6dır.
   
    2=Aling:
Yazıların ne şekilde yazılacağını belirler.
a)Left= Yazıyı sola yaslar.
b)Right= Yazıyı sağa yaslar.
c)Center= Yazıyı ortalar.
d)Justify= Yazıyı iki yana yaslar.
        Örnek= <h1 align="center">11 aa Sınıfı</h1>
   
    3=<b>....................</b> Etiketi:

Yazıyı koyu(bold) yapar.
   
    4=<u>.....................</u> Etiketi:
Yazıyı altı çizili(underline) yapar.

    5=<i>.....................</i> Etiketi:

Yazıyı yana yatık(italic) yapar.
   
    6=<p>.....................</p> Etieti:
Arasına yazılan metne paragraf özelliği kazandırır.

    7=<pre>.....................</pre> Etiketi:

Arasına yazılan metni alt alta(olduğu gibi) gösterir.

    8=<font>.....................</font>Etiketi:

Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi

özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki

gibidir.

<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">

Face : Yazı tipi (arial, tahoma, verdana, ...)

Size : Yazının büyüklüğü (1-7 arası)

Color : Yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk

değeri)

Bir etiketin herhangi bir parametresine atadığımız değer, o etiketin oluşturduğu alan

içerisinde geçerlidir. Örneğin, <font color="blue">...</font> ifadesi, sadece “...” ile

gösterilen alan içerisine yazılanları mavi yapar. 

 

Listeleme Etiketleri:
   
    1=Sıralı Etiketler:
    <ol>.....................</ol>

Sıralı listeye başlanacağını belirten etikettir. İçerisine yazılacak liste elemanları <li> etiketiyle belirtilir.

 

Sıralı Liste Tipi

Görevi

Type="a"

Listenin a, b, c den oluşacağını belirtir.

Type="i"

Listenin i, ii, iii den oluşacağını belirtir.

Type="1"

Listenin 1, 2, 3 den oluşacağını belirtir.


<start="x"> etiketi listenin hangi rakam yada harfle başlayacağını belirtir.

    2=Sırasız Listeler:
     <ul>.....................</ul>

Sırasız listeye başlanacağını belirtir. İçerisine yazılacak liste elemanları <li> etiketiyle belirtilir.

 

Sırasız liste tipi

Görevi

type="circle"

İçi boş yuvarlak.

type="square"

İçi dolu kare.

type="disc"

İçi dolu yuvarlak.

 

BAĞLANTI (KÖPRÜ) OLUŞTURMA

Bir WEB sitesinde altı çizili olarak bir takım kelimeler görmüşüzdür. Bu altı çizili

kelimelerin üstüne gelince fare şekil değiştirip bir el şekline dönüşmektedir. Bunun anlamı

kelimeye tıkladığınızda kelimeyle ilgili bir başka WEB sayfasına gideceğidir. HTML'nin bu

görevini yerine getirmesini sağlayan etiket <a>’dir. Dokümanınızdan başka dokümana

bağlantı yapabilmek için:

  • Etiketi giriniz. (Kısaca ilk satıra <a> yazınız)
  • Hangi dokümana geçiş yapmak istiyorsanız, ismini yazınız. HREF="dosyaismi"
  • Bu dokümanı ekranda hangi isimle göstermek istediğinizi belirtiniz.
  • Etiketi kapatınız. </a>

  

    Sayfa İçi Bağlantı Oluşturma

Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler kullanılabilir. <a

href="#...">...</a>, <a name="....">...</a> komutlarını kullanarak sayfa içi (dahili)

bağlantıları hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü

olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Böyle bir sayfa

hazırlamak için yapacağımız şeyler:

  • "Tıklandığında" açılacak konuyu işaretlemek (<a name="....">...</a> ).
  • Tarayıcıya, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya

gitmesini bildirmek (<a href="#...">...</a> ).   

  

    Sayfa Dışı Bağlantı Oluşturma

WEB sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve

dökümanlara geçiş yapılabilmesidir. Bunun için <a href >...</a> komutunu kullanırız. Bu

komutlar arasına yazmış olduğunuz ifade mavi renkte ve altı çizili olarak ekrana gelir.

İfadenin üzerine tıkladığınızda yazmış olduğunuz WEB adresine sizi yönlendirecektir.

Ana sayfaya dönmek için buraya tıklayınız.

Bağlantının açılacağı pencereyi belirtmek için "target" parametresinide kullanabiliriz.

<a href="..." target="..." ></a>     
target="_blank" Bağlantı yeni bir pencerede açılır.

target="_self" Bağlantı aynı pencere içerisinde açılır.

target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır.

target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa

onun yerine konur.

target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının

adı verilen çerçevede açılmasını sağlar.

    E-Posta Adresine Bağlantı Oluşturma

Hazırlamış olduğunuz WEB sayfasında insanların istediğiniz bir mail adresine kolay

bir şekilde ulaşabilmesini sağlayabilirsiniz. Bunun için, <a href=”mailto…….”>….</a>

komutunu kullanabilirsiniz.

Verilen komutları yazdığımızda ekranda “e-posta göndermek için tıklayınız” ifadesi

görünecektir. Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve

mail’in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

 

5. TABLOLAR

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada

istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli

yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir,

böylece istediğiniz düzenlemeyi yapabilirsiniz.

Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki

metnin genişliğine göre tablonun eni ve boyu değişebilir. Tablo, satır ve sütunlardan

oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve

sütunları ihtiva edebilir ve diğer satır ve sütunlarla birleştirilebilir. Tablolara başlık, liste,

paragraf, form, figür ve her formatta metin konabilir.

   

   <TABLE>

Tablolar <table> belirteci ile başlar.

    TR

Tabloda satır oluşturmayı sağlar.

   TD

Tabloda sütun oluşturmayı sağlar.

   Border

Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını

ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.

   TH

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine

ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption>

etiketi ile ikinci bir açıklama vermek mümkündür.

Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar etiketinde olduğu

gibi <tr>...</tr> arasına yazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına

alınır.

   Width

Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web

tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik

olarak atayacaktır.

   Height

Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web

tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik

olarak atayacaktır.

   Colspan

Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.

   Rowspan

Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.

   Cellspacing

Tablonun.içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel

cinsinden ayarlar.

   Cellpadding

Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo

içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun

(metin/grafik) bitişik olmasını sağlar.

 




Bugün 2 ziyaretçikişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol