27 Ekim 2012 Cumartesi

HTML Etiketler


HTML Etiketler Dersleri

1. <html> </html> Etiketi ;

Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır.

Örnek :
1 <html>
2 <head>... head etiketinin içeriği ....</head>
3 <body>
4 ....
5 body etiketinin içeriği
6 ....
7 </body>
8 </html>

2. <head> </head> Etiketi ;

Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.

<html>
<head>
<title>.....</title>
</head>
<body>
....
body etiketinin içeriği
....
</body>
</html>


3. <body> </body> Etiketi ;
 
HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.

Tablo 1.1. Body etiketinin bileşenleri
Girilecek Kod
Görevi
text = “renk”
Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.
link = “renk”
Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.
vlink = “renk”
Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir.
alink = “renk”
Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir.
bgcolor = “renk”
Sayfanızın arka plan rengine renk 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.

Yukarıdaki tabloda kullandığım renk değeri HTML içinde kullanılan renk kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık tabanda sayılarla istediğimiz rengi elde edebiliriz.
Renk kodları hakkında kısa bir bilgi vermek gerekirse kodlar ikişer basamaklı üç bölümden oluşur. Aşağıdaki tablo bu konu hakkında kafanızda oluşan soru işaretlerinin silinmesinde size yardımcı olacaktır.

Tablo 1.2. Renk Kodlarının Yapısı
Kırmızı
Yeşil
Mavi
00...FF
00...FF
00...FF
2. Satırda ifade ettiğim aralıklara değişik değerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi oluşturmamız mümkündür. Kod kullanmanın yanı sıra renkleri doğrudan İngilizce adlarını yazarak da kullanabiliriz. Örneğin beyazın kodu olan #FFFFFF yerine white yazmamızda sonucu değiştirmeyecektir.

Tablo 1.3. Bazı Renkler ve Kodları

Renk Adı
Kodu
black (siyah)
#000000
maroon (k.kırmızı)
#800000
green (k.yeşil)
#008000
navy (lâcivert)
#000080
purple (k.mor)
#800080
teal (k.türkuaz)
#008080
oliver (hâki)
#808000
gray (gri)
#808080
Renk Adı
Kodu
silver (gümüş)
#C0C0C0
red (kırmızı)
#FF0000
lime (yeşil)
#00FF00
blue (mavi)
#0000FF
magenta (mor)
#FF00FF
aqua (türkuaz)
#00FFFF
yellow (sarı)
#FFFF00
white (beyaz)
#FFFFFF

Dikkat ederseniz her renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu altı basamak içinde F yada fbulunduğu basamaktaki rengin tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder.
<body text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000">

<body text="#000000" background="../resimler/arkafon.gif">

<body bgcolor="#334455" text=”#ffffff" topmargin="0">
Yukarıdaki birinci kod satırı sayfamızın arka plan rengini beyaz, yazıları siyah, bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır.
İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki “resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullanılır.
Yazdığım son satır ile de sayfamın arka fon ve yazı rengini belirliyor, sayfamın bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlıyorum.

4. <title> </title> Etiketi ;
Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.

<head>
<title>İlk HTML denemem</title>
</head>

5. <center> </center> Etiketi ;

Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar.
<center>
....
Burası etiketin yorum aralığı
.....
</center>
...
Burası center etiketinin yorum aralığının dışında

6. <hx> </hx> Başlık Etiketleri
 
Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.
Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align="center">Bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır.
<h1 align="center" style="color:black;">Bu başlıklar gittikçe küçülecek!!!</h1>
<h2 align="center" style="color:blue;">Bu başlıklar gittikçe küçülecek!!!</h2>
<h3 align="center" style="color:navy;">Bu başlıklar gittikçe küçülecek!!!</h3>
<h4 align="center" style="color:green;">Bu başlıklar gittikçe küçülecek!!!</h4>
<h5 align="center" style="color:maroon;">Bu başlıklar gittikçe küçülecek!!!</h5>
<h6 align="center" style="color:purple;">Bu başlıklar gittikçe küçülecek!!!</h6>
Yukarıdaki örneğin istemci çıktısı aşağıdakine benzer olacaktır.

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!
Bu başlıklar gittikçe küçülecek!!!

7. <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>
Bunlar yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir.
<b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>,
<small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt>
kalıneğiküstü çizilialtı çizili, küçük, büyük, daktilo yazısı


8. <sub> </sub>, <sup> </sup>
Formül ve benzeri metinleri yazarken kullanılır.
H<sub>2</sub>SO<sub>4</sub> <br>
E = mc<sup>2</sup>
H2SO4
E = mc2


9. <hr> Etiketi ;
 
Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Bu etiket ile tanımlanabilecek üç değişik özellik vardır.

Tablo 1.4. hr etiketi içinde kullanılan kodlar

Girilecek Kod
Görevi
width = "genişlik"
Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır.
size = "kalınlık"
Çizilecek çizginin kalınlığını belirtir.
color = "renk"
Çizilecek çizginin rengini belirtir.
 
Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi

<hr width="100%" color="#0000F8" size="4">
çizer.
Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi

çizer.

10. <p> </p> ve <br> Etiketi ;
 
BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır.
Burada bir metin var
Bir alt satıra geçtiğimi sanıyorum!
Yukarıdaki metin ekran yan yana basılacaktır. Her ne kadar kodu yazarken satır atlayarak yazmış olsak bile browser bu kodu yorumlarken arada <br> etiketi olmadığı için bu iki cümleyi yan yana basacaktır. Kodun doğru kullanımı
Burada bir metin var <br>
Bir alt satıra geçtim!
şeklinde olmalıdır.
<p> ve </p> etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir.

Tablo 1.5. <p> etiketinin bileşenleri

Girilecek Kod
Görevi
align = "left"
Paragrafı sola dayalı olarak yazar.
align = "right"
Paragrafı sağa dayalı olarak yazar.
align = "center"
Paragrafı ortalar.
align = "justify"
Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir.
class = "css_etiketi"
Önceden tanımlı bir CSS dosyasındaki font-size, color... gibi özellikleri paragrafa uygular.
style = "css:tanımı1;css:tanımı2;..."
font-size, color... gibi css tanımlarını paragrafa uygular.
 
<p align="justify">
Burada bir metin var.<br>
Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak
yazımı bir paragraf içinde yazıyorum.
</p>
Burada bir metin var.
Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak yazımı bir paragraf içinde yazıyorum.

11. <pre> </pre> Etiketi ;
 
Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler.

<pre>
switch($i){
case "2":
echo "Değeri 2";
break;
case "3":
echo "Değeri 3";
break;
default:
echo "Değeri bilinmiyor";
break;
}
</pre>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
 
Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını vermek için kullanışlıdır.
<dt> ve <dd> etiketleri <dl> etiketinin yorum aralığı içinde kullanılır. <dt> etiketi terim, <dd> etiketi ise açıklaması için kullanılır. Bir örnekle kullanımı daha kolay anlaşılacaktır.
<dl>
<dt>align = "left"</dt>
<dd>Paragrafı sola dayalı olarak yazar.</dd>

<dt>align = "right"</dt>
<dd>Paragrafı sağa dayalı olarak yazar.</dd>
</dl>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.



align = "left"
Paragrafı sola dayalı olarak yazar.
align = "right"


Paragrafı sağa dayalı olarak yazar.

13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>
 
Yukarıdaki bölümde anlatılan tanımlama listesinden başka iki tür liste daha vardır. <ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir.
Bu etiketlerle kullanılabilecek yardımcı kodları aşağıdaki tabloda belirttim.

Tablo 1.6. Liste kullanımı için yardımcı kodlar

Girilecek Kod
Görevi
type = "listeleme türü"
Bu alanda belirtilebilecek değerleri aşağıda bir tablo halinde verdim.
start = "değer"
Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır.
value = "değer"
Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. start = "değer"parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir "değer" belirtilebilir.

Sıralamasız liste (<ul>) türü değerleri:
Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır:
  1. disc - İçi dolu bir daire görüntüler
  2. circle - İçi boş bir daire görüntüler
  3. square - İçi dolu ya da boş bir kare görüntüler
Tablo 1.7. Sıralı liste (<ol>) türü değerleri

Türü
Sıralama
1
Onluk tabanda numaralama (1,2,3,4,...)
i
Küçük rakamlarla romen sayıları (i,ii,iii,iv,...)
I
Büyük rakamlarla romen sayıları (I,II,III,IV,...)
a
Küçük harflerle alfabetik (a,b,c,...)
A
Büyük harflerle alfabetik (A,B,C,...)
Örnek:
<ol type="i">
<li> Birinci öğe...</li>
<li> İkinci öğe ...
<ul type="square">
<li>İkinci öğenin bir öğesi...
<li>İkinci öğenin başka bir öğesi...
</ul>
</li>
<li> Üçüncü öğe...</li>
</ol>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.
  1. Birinci öğe...
  2. İkinci öğe ...
    • İkinci öğenin bir öğesi...
    • İkinci öğenin başka bir öğesi...
  3. Üçüncü öğe...

14. <img> Etiketi ;
 
Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP'lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.
GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder.
Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez.
Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirttim.

Tablo 1.8. Resim kullanımı için yardımcı kodlar

Girilecek Kod
Görevi
src = "resim_dosyası"
Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz.
width = "genişlik"
Resmin genişliği burada tanımlanır. Büyük bir resminiz varsa genişlik değerini "100%" vererek resmin web istemci genişliğine dinamik uydurulmasını sağlayabilirsiniz.
height = "yükseklik"
Resmin yüksekliği burada tanımlanır.
vspace = "düşey_aralık"
Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı.
hspace = "yatay_aralık"
Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı.
alt = "metin"
Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır.
border = "değer"
Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır..
 
<img src=”./resimler/banner.jpg” width=”250” height=”85” alt=”Bilgisayar Topluluğu”>
Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!). “Alt” kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde “Bilgisayar Topluluğu” yazısının belirmesini sağlar.

15. <a> </a> Etiketi ;
 
Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. <a> etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.

Tablo 1.9. Bağ vermek için kullanılan kodlar

Girilecek Kod
Görevi
href = "URL"
Yorum alanındaki bileşene tıklandığında yorumlanacak adres.
target = "hedef"
Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir.
name = "isim"
Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır.
type = "mime_türü"
Hedefin içeriğini belirtmek için kullanılır.
 
<a href=”http://www.belgeler.org”>Linux Belgelendirme Çalışma Grubu</a>

<a href="http://www.slackware.com" target="new">Slackware Linux</a>

<a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan İSİ</a>


İlkinden farklı olarak ikinci kodda “target” özelliğini kullandım. Target özelliğine “new” değerinin verilmesi ile açılacak yeni site yeni bir istemci penceresinde açılır.
Üçüncü satır belirtilen adrese eposta yollamak için kullanılır. Bağın üzerine tıklandığı zaman web istemcisinde öntanımlı olarak kayıtlı eposta istemcisi açılacaktır.
Bunların dışında resimleri de bağ olarak kullanabilme imkanımız var. Sayfamızda resimleri bağ olarak kullanabilmek için kullanmamız gereken kalıp aşağıdaki gibidir.
<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="0"></a>

<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="1"></a>

16. <font> </font> Etiketi ;
 
HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzel bir görünüm kazandırabilirsiniz. Bu etiketin kullanımına alternatif olarak sayfanızda CSS de kullanabilirsiniz. CSS kullanımı sayesinde fazla kod yazımından da kurtulmuş olursunuz. Etiket ile birlikte yazı tipi, renk ve boyut belirtmek üzere üç kod kullanılır.

Tablo 1.10. Font etiketi kodları
Girilecek Kod
Görevi
face = "yazıtipi"
Kullanılacak yazı tipi belirlenir.
color = "renk"
Yazacağımız yazının rengi belirlenir.
size = "boyut"
Yazımızın boyu belirlenir.
 
<p><font face="tahoma" size="3" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="4" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="5" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%">
Burada bir yazı var.</p>

<p class="author">Burada bir yazı var.</p>

Burada bir yazı var.
Burada bir yazı var.
Burada bir yazı var.
Burada bir yazı var.
Burada bir yazı var.

17. <acronym> </acronym> Etiketi ;

 
Kısaltmalar için kullanılır.
<acronym title="Linux Kullanıcıları Derneği">LKD</acronym>
LKD
Fare, "LKD" üzerine getirildiğinde kısaltmanın açılımı balon içinde görüntülenecektir.

18. <meta> </meta> Etiketi ;

 HTML dosyasındaki head etiketinin yorum aralığında tanımlanan bu etiket web istemcisine ve arama motorlarına sayfamız hakkında bilgi verir. Bu etiketi ile birlikte kullanılan yardımcı kodların açıklaması ilk bakışta size biraz karmaşık gelebilir. Her kodun kendisi ile birlikte tanımlanan yardımcı kodları da olduğu için bu etiket ile birlikte kullanılan kodların listesini öncekilerden daha farklı bir şekilde vermeyi uygun gördüm.
Tablo 1.11. Meta etiketi ana kodları
Girilecek Kod Görevi
name = "veritürü" Bu bölümde author, description ve keywords özellikleri tanımlanır.
http-equiv = "veritürü" Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır.
size = "boyut" Yazımızın boyu belirlenir.
Yukarıdaki tabloda verdiğim kodlar ile birlikte tanımlanan yardımcı kodları tablo şeklinde vermek yerine örnek şeklinde vermenin daha faydalı olacağını düşündüm.

<meta name=”author” content=”Linux Belgelendirme Çalışma Grubu”>

<meta name=”description” content=”Linux Belgelendirme Çalışma Grubu Web Sayfası”>

<meta name=”keywords” content=”linux unix bsd openbsd freebsd programlama ozguryazılım özgüryazılım sunucu internet”>

Yukarıdaki birinci satır (author), sayfayı hazırlayanların kim olduğu hakkında kısa bilgiler verir.
İkinci satır (description), sitenin ne hakkında olduğuna dair kısa bir bilgi verir.
Sonuncu satır ise (keywords), arama motorlarına bilgi sağlamak için kullanılır. Yani siz bir arama motoruna girip arama kısmına linux, unix, bsd, openbsd, freebsd, programlama, özgüryazılım, sunucu, internet sözcüklerinden birisini yazarsanız bu site adresi de görüntülenecek adresler arasında olacaktır.

<meta http-equiv=”refresh” content=”5; URL=http://www.belgeler.org/”>

<meta http-equiv=”expires” content=”Wed, 25 Feb 2002 12:00:00 GMT”>

<meta http-equiv=”content” content-type=”text/html; charset=iso-8859-9”>

<meta http-equiv=”content-style-type” content=”text/css”>

Yukarıdaki birinci kod satırı (refresh) sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır.
İkinci kod satırı (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
Üçüncü kod satırı (content) tarayıcıya html dosyamızda kullandığımız karakter kodlamasının ISO-8859-9 olduğunu belirtir.
Dördüncü ve son satır (content-type-style) belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
Daha öncede belirttiğim gibi meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez. Bu bilgiler genellikle tarayıcıya ve arama motorlarına bilgi sağlamak için kullanılır.

19. <!-- --> Etiketi ;

Bu etiket yorum aralığı olarak kullanılır. Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir. (İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)
<!-- Burası bir yorum aralığı ve bu kısım sayfada görünmez!!!!


KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-etiketler.html

HTML Elementler


HTML dosyaları HTML elementlerinden oluşur. 
HTML elementleri HTML komutlarından oluşur. 

 
HTML Komutları
HTML komutları ile HTML elementleri hazırlanır. 
HTML komutları ve işaretlerinin arasında yazılır. 
HTML komutları <b> ve </b> şeklinde yazılır. 
Birinci komut başlangıç komutu iken ikinci komut bitiş komutudur. 
Bu iki komut arasında element içeriği bulunur. 
HTML komutları büyük/küçük harf ayrımına duyarlı değildir. <b> ile <B> aynı şeydir. 

HTML Elementleri

Bir önceki örneğimizi tekrar hatırlayalım

<html>
<head>
<title>Benim Sayfam</title>
</head>
<body>
Bu benim ilk anasayfam. 
<b>Kalin Harfli Metin</b>
</body>
</html>

Bu bir HTML elementidir;

<b>Kalin Harfli Metin</b>

HTML elementi <b> başlangıç komutu ile başlamaktadır. 
HTML elementinin içeriği Kalin Harfli Metin metindir. 
HTML elementi </b> bitiş komutu ile sonlanmaktadır. 

<b> komutunun amacı HTML içeriğinin kalın harfler ile gösterilmesini sağlamaktır. 

Bu da bir HTML elementidir.

<body>
Bu benim ilk anasayfam. 
<b>Kalin Harfli Metin</b>
</body>

HTML elementi <body> başlangıç komutu ile başlayıp, </body> komutu ile bitmektedir. 

<body> komutunun amacı HTML elementinin HTML dosyasının gövdesini taşıdığını tanımlamaktır. 

Neden komutları küçük harfler ile yazarız?

Biraz önce HTML komutlarının büyük/küçük harfe duyarlı olmadığını söylemiştik. Fakat kodlarını görebileceğiniz hemen hemen tüm sitelerde komutlar küçük harfler ile yazılmıştır. Peki neden?
Eğer en son internet standartlarını kullanmak istiyorsanız komutlarınızı küçük harfler ile yazmalısınız. HTML 4 ve XHTML gibi yeni nesil HTML disiplinleri küçük harfli komutlar gerektirmektedir.

HTML Giriş


1.HTML'e GİRİŞ

HTML açılımı HyperText Markup Language olan,kullanıcılarına browserlar tarafından gorüntülenebilen web sayfalaları tasarlama imkanını sunan bir programlama dilidir(Belki metin biçimlendirme dili desek daha uygun olur).Fakat C/C++,Basic,Java gibi yüksek dereceli programlama dillerine kıyasla ögrenmesi çok kolaydır,tabi yapabilecekleri de bir o kadar kısıtlıdır.Tabi bu 'kısıtlı' lafına aldanmayin,iyi bir HTML temeli uzerine biraz JavaScript ve CSS (ve tabi yaratıcılığınızı) ekleyerek,internette görup de kıskandiginiz birçok sayfayı yapabilecek hale gelebilirsiniz! Amacımız HTML oğrenmek olduğuna göre,HTML'i bir tanıyalım İlk olarak HTML ile yapılan web sayfalarının calışma mantıgına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacagımızı öğrenelim: 

1/1.HTML'in ÇALIŞMA MANTIĞI 
HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz. Bu mantığı konular ilerleyince daha iyi kavrayacaksınız. 

1/2.HTML İLE NE YAPILABİLİR,NE YAPILAMAZ

HTML ile bir web sayfasında

Yapılabilecekler:
Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(l ink),resim kullanımı,tablolar,Çerçeveler,Formlar

Yapılamayacaklar:
Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.

Yapılamayacaklardan ilkini Javascript,ikincisini CGI ,ASP, veya PHP kullanarak yapabilirsiniz. Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web tasarımı konusunda ilerlemek istiyorsanız,HTML bilginizin sağlam olması gereklidir!

HTML Nedir?

Html'e Giriş

Hypertext Markup Language (HTML) belgelerin birbirlerine nasıl bağlanacaklarını ve belge içindeki metin ve resimlerin nasıl yerleşeceklerini belirleyen ve etiket (tag) denilen kod parçalarından oluşan bir sistemdir. Belgeleri birbirlerine bağlamak için kullanılan Hypertext'ler oldukça güçlüdürler. Internet üzerinde yaşayan World Wide Web (Kısaca WWW ya da Web), HTML sisteminin arkasında etkileşimli, çok platformlu, multimedia ve client/server uygulamaları yaratmak için kullanılır.

Web, formatlı metinler, ses ve resimlerden oluşan "yaşayan" belgelerden oluşur. Bu belgeler Webspace denen alanları oluşturur. Bir webspace tipik olarak,home page etrafında biriken linkli sayfalardan oluşur. Bu linkler webspace içinden bir iç adres ya da dış kaynaklı bir adres olabilir. Bir home page ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır.

Aslında HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser)tarafından verileri nasıl işleyeneceğini belirler.

Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz,okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.

Teknik olarak HTML, Standard Generalized Markup Language (SGML) Document Type Definition (DTD) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960'ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO) tarafından standart haline getirildi. (Referans numarası: ISO8879:1986)

Bir SGML belgesi üç ana parçaadan oluşur. İlk parça, tag ile normal metni birbirlerinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret etiketlerini içerir. Bu üç parçanın hepsiaynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür.

Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <P> gibi, bazıları ise açma-kapama olarak kullanılırlar,>B>Dikkat! >/B>gibi.

Dikkat etmeniz gereken nokta: Bütün başlama kodları "<" ve ">" işaretleri arasında, bitirme kodları da "</" ve ">" işaretleri arasında olmalıdır. Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur

Örnek:

<TITLE> Ornek Web Sayfasi </TITLE>
<option>Seçiminizi Yapın: </option>


HTML kodlarını görebilmek için Internet Explorer'da View menüsünden Source (Görünüm/Kaynak) menüsünü tıklayın. Acılan Txt dosyasında (Not Defteri) HTLM kodlarını görebilirsiniz. Dosya/Farklı Kaydet.. menüsünden .htm veya .html uzantılı olarak HTML dosyası yaratabilirsiniz.