Temel HTML Etiketleri
Takdir edersiniz ki hemen aşağıda bahsettiğim veri kaybı makalelerimizi de içeriyordu. Uzun zaman oldu ve internette çeşitli ortamlarda bulunabiliyor ancak yine de eklemekte fayda var, 1-2 Aralık 2007 Eskişehir Anadolu Üniversitesi - Temel Web Tasarımı eğitiminde kullandığımız materyal şuydu;
HTML Nedir?
HTML İng. (Hyper Text Markup Language)
World Wide Web (WWW) ‘in bilgi görüntülemekte kullandığı dosya formatıdır. İşaretleme yordamı ile yazılır ve HTTP (Hyper Text Transfer Protocol) ile transfer edilir.
HTML’in en belirgin özelliklerinden bir tanesi istemci tarafında, istemcinin kullandığı platformda (işletim sistemi, web tarayıcı) derlenmesidir.
Aşağıdaki doküman 1 Aralık 2007 – 2 Aralık 2007 tarihleri arasında, Eskişehir Anadolu Üniversitesi’nde Göktuğ İÇÖZ ve Can HANHAN tarafından verilen “Web Tasarımı” eğitiminde anlatılan temel HTML etiketlerini içermektedir.
Temel HTML Etiketleri
<html> : HTML sayfasının başladığını belirtir. Yazım kurallarına uygun olarak hazırlanmış bir HTML sayfasında, tüm etiket ve sayfa içerikleri hiyerarşik olarak <HTML> etiketinin altında bulunmalıdır.
HTML Örneği
<HTML>
</HTML>
<head> : HTML sayfa üst bilgisinin başlangıc etiketidir. HEAD etiketinin altına, sayfa başlığı, sayfa dili (charset), sayfanın kendini yenileme süresi, sayfa yapımcısı gibi temel bilgiler eklenir. <HEAD> etkieti, sayfa gövdesinden önce gelmelidir.
Alt HEAD Etiketleri
1. <TITLE> …. </TITLE>
2. <META NAME=”…..”>
3. <META HTTP-EQUIV=”…..”>
HEAD Etiket Örnekleri
1. <TITLE>Merhaba Dünya</TITLE>
2. <META NAME=”description” content=”İlk HTML Sayfamız!”>
3. <META NAME=”content-language” content=”TR”>
<body> : BODY, sayfa gövdesini belirtmektedir. Yazım kurallarına uygun olarak hazırlanmış bir HTML sayfasında, “tüm sayfa içeriği” <BODY> etiketinin altında bulunmalıdır.
BODY Örneği
<BODY bgcolor=”yellow”>
Sayfa İçeriği
</BODY>
<table> : HTML sayfa gövdesi içerisinde bulunan tablo başlangıç etiketidir. Bir tablonun istemci tarafında görüntülenebilmesi için en az bir satır (tr) ve en az bir sütun (td) bulundurması gereklidir.
TABLE Örneği
<TABLE cellspacing=”0” cellpadding=”2” width=”90%” height=”125”>
<TR>
<TD>İlk Tablo Sütunumuz</TD>
</TR>
</TABLE>
<tr> : ks. TableRow. Bir tablo içerisindeki satırı ifade eden HTML etiketidir. Her TR, en az bir sütun (TD) bulundurmak zorundadır. TableData olmaksızın, bir TR etiketinin içerisine yazılan herhangi bir metin ya da HTML kodunun çıktısı, tablo kodunun dışında, yani istenilen yer dışında çıktı üretir.
TR Örneği
<TABLE>
<TR>
<TD>Metin ya da HTML kodu, TD içerisinde olmalıdır.</TD>
</TR>
</TABLE>
<td> : ks. TableData. Bir tabloya ait satırın içerisinde bulunan sütunu ifade eder. TD, yalnızca TR içerisinde kullanılabilir ve bir tabloya ait olmalıdır. İçerisinde HTML hiyerarşik düzenine uygun herhangi bir HTML etiketi ya da metin eklenebilir.
TD Örneği
<TABLE width=”100%” cellspacing=”2” cellpadding=”3”>
<TR>
<TD colspan=”2”>Metin ya da HTML kodu, TD içerisinde olmalıdır.</TD>
</TR>
<TR>
<TD bgcolor=”red” color=”white”>İlk Sütun</TD>
<TD width=”50%”>İkinci Sütun</TD>
</TR>
</TABLE>
<img> : HTML sayfasına, kaynağını belirterek resim dosyası eklemeye yarayan imaj etiketidir.
IMG Örneği
<IMG src=”IMAJ_ADRESI.JPG”>
<IMG src=”http://www.anadolu.edu.tr/images/au_logo_01.gif” border=”2”>
<IMG src=”D:\imaj.png” width=”120” height=”200”>
<IMG align=”left” src=”IMAJ_ADRESI.JPG”>
<br> : ks. BreakLine. Gövde içerisine eklenen metinleri bir satır alta taşımak ya da iki metin arasında bir satır boşluk bırakmaya yarayan, kapatılması gerekmeyen HTML etiketi.
BR Örneği
Üst satırda bulunması gereken ilk cümle.<br>İkinci satıra ait cümle.
<hr> : ks. Horizontal Line. Gövde ya da element içerisine yatay çizgi eklemeye yarayan etiket.
HR Örneği
İlk metin burada.<hr>İkinci metin ise burada.
<a> : Bağlantı etiketi. HTTP ya da tarayıcılar tarafından desteklenen farklı herhangi bir protokol yordamıyla transfer edilebilen bir döküman ile mevcut HTML sayfası arasındaki Http bağlantısını kurmak için kullanılır. İçerisinde kullanan “href” özelliği “Hard Reference” anlamına gelmektedir.
A Örneği
<a href=”http://www.anadolu.edu.tr”>Anadolu Üniversitesi</a>
<a href=”http://www.anadolu.edu.tr” target=”_blank”>Anadolu Üniversitesi (Yeni Sayfada)</a>
<a href=”anasayfa.html”>Anadolu Üniversitesi</a>