HTML’in Temel Bileşenleri
Bir web sitesinin temeli içeriktir. Resimde olsa metinde
olsa görüntüde olsa sonuçta hepsi içeriktir. Bu içerikler
ise Etiket denilen (TAG) iĢaretleyiciler yardımıyla
biçimlendirilir.
Etiketler (Tag)
HTML komutları içeren ve tarayıcıların tanıyabildiği
dosya, aslında içinde ASCII karakterlerden baĢka bir Ģey
olmayan, düz yazı dosyalarıdır. Tarayıcıya, sayfayı
ekranda oluĢtururken vermesini istenilen biçimle ilgili
komutlar bir dizi özel etiketler ile belirtilir. Bunları
içerikten ayırmak içinse ―<>‖ çifti arasına almak gerekir.
Sayfa tasarımı yaparken örneğin <b> etiketi kullanılırsa
tarayıcıya ―ben buraya bu etiketi koydum. Artık benden
ikinci bir komut gelene kadar her Ģeyi ekrana KOYU
olarak bastır‖ denilmiĢ olur. Dolayısıyla HTML‘de ilke,
önünde etiketi olmayan herhangi metne yer
vermemektir. Önünde etiketi olmayan herhangi bir metin
parçası, tarayıcı tarafından temel paragraf olarak
nitelenir.
HTML, içinde kontrol kodu olmayan metin dosyasıdır.
Yani Wordde bir dosya yazdığınızda içinde HTML
etiketleri kullanmıĢ ble olsanız bu dosya metin dosyası
olmadığından HTML dosyası değildir. Böyle bir dosyanın
adındaki uzantıyı silerek, yerine ―.html‖ uzantısını
verilirse ekrana gelecek olan dosyadaki metin değil,
Çinçe yada Japonca dilini çağrıĢtıran karakterler yığını
olacaktır. HTML düz yazı olduğuna göre, bir HTML
dosyası oluĢturmak için, herhangi bir kelime-iĢlem
yazılımı kullanılabilir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
45
HTML Yazım Kuralları
1. Etiketlerin büyük harfle veya küçük harfle
yazılması arasında fark yoktur. <br> ile <BR> aynı
iĢi yapmaktadır.
2. Bir kaç istisna tiket hariç bütün etiketlerin birde
sonlandırma çifti vardır. Sonlandırma için aynı
etiketin önüne ―/‖ (bölü) iĢareti konulur. Örneğin
<strong>Türkiye</strong> gibi.
3. <!-- ile --> arasındaki metinler yorum olarak ele
alınır ve gösterilmez.
İyi bir programcı açtığı etiketi kapatmayı
unutmamalıdır. Bunun için en kolay yöntem
önce açma ve sonladırma etiketlerini yazma
sonra içerisini doldurmaktır.
HTML Dosyasının Bölümleri
HTML dosyası iki kısımdan oluĢur.
1. Head denilen baĢlık kısmı.
2. Body denilen metnin kendisi
Web tarayıcılar, HTML etiketini gördükten sonra hemen
HEAD ve BODY etiketlerini arar ve ekrandaki sayfayı
buna göre biçimlendirirler.
Basit bir HTML örneği,
<HTML>
<HEAD>
BaĢlık Metni
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
46
</HEAD>
<BODY>
Body Metni
</BODY>
</HTML>
<html>
<head>
<title> İlk Sayfam </title>
</head>
<body>
Sayfama Hoş geldiniz
</body>
</html>
Türkçe bilgi içeren bir sayfa örneği ise;
<HTML>
<HEAD>
<meta http-equiv = "Content-Type" content =
"text/html; charset = windows-1254">
</HEAD>
<BODY>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
47
Merhaba. Web Tasarım Rehberi‘ne HoĢ Geldiniz!
</BODY>
</HTML>
<html>...</html>
Örneklerde görüldüğü gibi bu etiket bloku tarayıcıya
HTML dosyasının baĢladığını ve bittiğini belirtir. Tüm
diğer kodlar bu iki etiket arasına yazılır.
<head>...</head>
Etiketleri arasında ise sayfa hakkında bilgiler verilir. title
gibi etiketler, anahtar kelimeler, sayfanın dili vs
burada yer alır. Bu alandaki bilgiler ekranda
görünmezler. Sadece title tarayıcı baĢlığı olarak kullanılır.
<title>...</title>
Title etiketi tarayıcı penceresinin üstüne yazılacak olan
baĢlığı belirtir. Yazılan metin penceresinin üstünde
tarayıcı adı ile birlikte yazılır.
<body>...</body>
Bu etiketler ise sayfanın ekranda görüntülenecek olan
kısmını yazdığımız bloktur. Parametreleri ile birlite
sayfanın zemin rengini, linklerin rengini, arkaplan
resmini ayarlamak mümkündür.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
48
Meta Etiketleri Arama Motorları Ġçin Sitemize Eklememiz
Gereken Bilgiler
Normal olarak oluĢturulan her sayfanın HEAD kısmına
sayfanın açıklamasının yapıldığı, sayfa hakkında anahtar
kelimelerin belirtildiği meta etiketler konabilir ve
konulmalıdırda.
Anahtar kelimeler arama motorlarının sayfayı tanımasını
ve tespit etmesini sağlar. Yeni nesil arama motorları
(Örn : Google gibi) meta etiketlerinin yanısıra belgenin
Gövde kısmındaki içeriği de dikkate alır. Eskiden sırf
ziyaretçi çekmek için popüler metinlere meta
etiketlerinde alakasız yer verilir bir nevi kullanıcı
aldatılırdı. Google BODY kısmınıda dikkate alarak bu iĢe
bir önlem almıĢ olmaktadır.
NAME: Sayfanın yazarı, sayfanın yayın tarihi, vb.,
bilgiler içerir. <META NAME="bilginin türü"
CONTENT="bilgi"> Ģeklinde yazılır.
<META NAME="keywords" CONTENT = "kelime1
kelime2 kelime3">
"keywords" sayfa hakkında bazı anahtar kelimeler
içerir. Böylece arama motorları için index oluĢturmaya
yardımcı olur. (Dikkat: bu kısma ilgisiz alakasız Ģeyler
yazarak arama motorları aldatıldığından artık sadece
bu alan değil komple içerik indekslenmektedir. Kısaca
kendinizi kandırmayın)
<META NAME ="description" CONTENT
="metin">
"description" etiketi site hakkında tanımlanma bilgisini
içerir. Bu etiketi tanımayan arama motorları ise
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
49
sayfanın ilk bir kaç kelimesini tanımlama aracı olarak
kullanır. Örnek:
<META NAME="description" CONTENT ="KiĢisel PHP
sitem.">
<META NAME="author" CONTENT ="Adı
Soyadı">
Arama yapanlara siteler gösterilirken bazı arama
motorları site yazarını bu etiketi tarayarak bulur.
Örnek:<META NAME="author" CONTENT="Türkiye"
HTTP-EQUIV: Ġçinde yer aldığı sayfanın, Web Server
tarafından ziyaretçiye gönderilmesinde oluĢturulacak
Response Header (KarĢılık BaĢlığı) bölümünde yer
alacak bilgiler içerir. <META HTTP-EQUIV="bilginin
türü" CONTENT="bilgi"> Ģeklinde yazılır.
AĢağıda, meta etiketlerinin content bölümünde açıklama
yapılmıĢ ve parantez içinde bu sayfa için uygun örnekler
verilmiĢtir.
<meta name="author" content="Sayfayı düzenleyenin
adı">
<meta name = "Description" content = "Sayfanın
açıklaması">
<meta name="keywords" content="Arama motorlarına
yardımcı olmak için sayfa hakkında anahtar kelimeler (bu
sayfa için HTML,ders,web sayfası,web sitesi, PHP vs) ">
<META name="copyright" content="Telif hakkı ve
tanımları" >
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
50
Eğer sayfa içeriği Ġngilizceden farklı ise hazırlanan
sayfada herhangi bir karakter görüntüleme sorunu
sorunu yaĢamamak için <head> bölümünde sayfasının
kod sayfasını belirten meta etiketleride eklenmelidir.
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-9">
<meta http-equiv="Content-Type" content="text/html;
charset=win-1254">
Bugünlerde arama motorları için yapılabilecek iĢlemler
SEO Uzmanlığı adıyla ayrı bir meslek haline
dönüĢmüĢtür. Bu konuda bazı materyalleri ilerleyen
konularda bulacaksınız.
Meta Tağlarının GeliĢmiĢ Kullanımı
Sayfanın Süre AĢımını Belirtmek
Bu iĢlem için ―expires‖ etiketi kullanılır.
<META HTTP-EQUIV="expires" CONTENT="Wed,
04 Apr 2008 23:59:59 GMT">
Yukardaki örnekte sayfanın 4 Nisan 2008 günü
Greenwich saatiyle gece yarısından itibaren arama
motorlarından ve ziyaretçilerin bilgisayarlarında geçici
Internet dosyaları klasöründen silinmesini sağlar.
Bir Sayfanın Belirli Bir süre Ekranda Kalıp Otomatikman
BaĢka Bir Adrese Yönlenmesini Sağlamak
Bu iĢlem için ―refresh‖ etiketi kullanılır. Böylece tanımlı
süre sonunda hedef URL otomatik açılır.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
51
<meta http-equiv = "refresh" content ="5;
url=http://abc.com/dnm.html">
Bu sayfanın 5 saniye ekranda kalacağını ve daha sonra URL
ile belirtilen adresteki sayfanın yüklenmesini sağlar.
Türkçe Karakterleri Görüntülemek-Kod Sayfası
Yukarda örneğini gördüğümüz meta etiketi sayesinde
sayfa için bir kod sayfası belirtebiliriz. Böylece hazırlanan
sayfanın ekranda hangi karakter seti ile
görüntüleneceğinin bilgisini tarayıcıya vermiĢ oluruz.
Türkçe için 3 adet karakter seti kullanma imkanımız
vardır.
Windows-1254
Iso-8859-9
UTF
Türkçe bilgilerin görüntülenebilmesi için
<meta http-equiv="Content-Type" content = "text/html;
charset=windows-1254">
<meta http-equiv="Content-Type" content = "text/html;
charset=iso-8859-9">
Seçenekleri kullanılabilinirse de en doğrusu UTF-8 kod
sayfasının kullanımıdır. UTF evrensel karakter seti olmak
iddiasındadır. Bu konuda da hayli yol katetmiĢtir. Bu
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
52
nedenle artık UTF kodlamasının kullnaılması kesinlikle
önerilir.
<meta http-equiv="Content-Type" content = "text/html;
charset=utf-8">
<BODY> Etiketinin Parametreleri
Body etiketi çeĢitli parametreler ilede kullanılabilir.
Bunlar
Bgcolor : Sayfanın zemin rengini belirtir
Background : Sayfanın zemini için bir resim
kullanılmasını sağlar.
Text : Sayfadaki yazıların rengini belirtir. Bu
renk belirtilmiĢ ise sayfa içinde renk belirten etiket
görülmediği sürece tüm içerik bu renkte basılır.
Örneğin
<body bgcolor=‖aqua‖ text="red" background=―1.jpg">
Normalde resimler için en boy belirtilebilir ancak <body>
etiketinde bu durum söz konusu değildir. Seçilen resim
tarayıcı tarafından tüm sayfayı kaplayacak Ģekilde
sayfaya yerleĢtirilir.
TrueType Fontlar-Harf GeniĢliği Serif ve Sans Serif
Harfler
Daktilolarda, kağıdı hareket ettiren mekanizma, her
harfin geniĢliğine göre farklı hareket yeteneğine sahip
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
53
olmadığından ―i‖ veya ―k‖ veya hepsinden geniĢ olan ―m‖
harfi de aynı geniĢlikte bir alana yazılırdı. Zamanla
teknoloji sayesinde bu sorun aĢıldı. Harfleri
büyüklüklerine göre göreli geniĢlikte olan fontlarla bütün
harfleri aynı geniĢlikte olan fontların farkı buradan
kaynaklanır. Günümüzde, teknik gerekçelerle eski tip
fontlar hala vardır.
Harflerin genel karakteristiğine göre ayrımda ise fontlar
serif, sans serif ve dekoratif olarak üçe ayrılır. Serif
harfler kuyruklu yazılmıĢ, sans serif harfler ise düz olan
biçimdir. Web de görsel etki, zıtlıklardan yararlanarak
sağlanır. Bir sayfada yer alacak bir metnin serif diğerinin
sans serif harflerle yazılması iyi bir zıtlık oluĢturup
okunulabilirliği artıracaktır Ekranda okuma kolaylığı
açısından sans serif harfler tercih edilmelidir. Özellikle
küçük puntolu serif harflerin okunması çok zor olabilir.
Sans serif harfler içeren en bilinen fontlar Arial Verdana
ve Tahoma fontlarıdır. Serif için en bilinen örnek ise
times New Roman fontudur.
H1,H2,H3,H4,H5,H6 BaĢlık Etiketleri
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani
en küçük olmak üzere altı ayrı büyüklükte baĢlık
kullanma imkanı veriyor. Farklı baĢlık büyüklüklerini
daha yakından tanımak için, Ģu sayfayı yazarak, örneğin
baslik.htm adıyla kaydedin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
54
<title>BaĢlıklar</title>
</head>
<body>
<p><font face="Arial">
<h1>H1: baĢlık 1<h1>
<h2>H2: baĢlık 2 <h2>
<h3>H3: baĢlık 3 <h3>
<h4>H4: baĢlık 4 <h4>
<h5>H5: baĢlık 5 <h5>
<h6>H6: baĢlık 6 <h6>
Normal Metin
</font> </p>
</body>
Paragraf etiketi gibi, baĢlık etiketinin de arkasına
koyabileceğiniz tek özellik ALIGN‘dır ve bununla baĢlığın
sola, sağa, ortaya hizalanmasını veya sağ sol marjların
aynı anda hizalanmasını sağlayabilirsiniz.
<br> etiketi
Bu etiket metni iki satıra bölmek için kullanılır. Enter
tuĢunun iĢlevini taĢır. HTML metni biçimlendirirken
MSWORD gibi davranır. Yani ―alt satıra geç‖ yada ―yeni
paragrafa baĢla‖ iĢaretini görmedikçe metni sağa doğru
yazmaya ve pencere sonuna gelince alta doğru
kaydrmaya devam eder. Metni bölmek için HTML
kodunda iken enter tuĢuna basmıĢ olmanız tarayıcı için
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
55
bir anlam ifade etmez. Tarayıcı <br> etiketini görünce
bir alt satıra geçer.
<HTML>
<BODY>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
Bu satır da bir önceki gibi <br><çok çok çok ama çok
<br> uzun bir satır. <br>Ancak HTML için için bunun için
bir <br>önemi yok. <br>Çünkü ne yazarsanız yazın
<br> özel etiketi görmedikçe aynı paragraftaymıĢ
<br>gibi ekrana görüntülenmeye devam edilecektir.
<br> Bu satırın farkı ise BR etiketi ile bölünmüĢ olması.
</BODY>
</HTML>
<p>…</p> etiketi
ĠĢlev olarak <br>etiketine benzer ancak temelde
farklıdır. <p> etiketi </p> ile sonlandırılır. <br> sadece
alt satıra geçerken bu etiket paragraf baĢı yapar.
<HTML>
<BODY>
<br>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
56
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir.
<p>
Bu satır çok çok çok ama çok uzun bir satır. Ancak HTML
için için bunun için bir önemi yok. Çünkü ne yazarsanız
yazın özel etiketi görmedikçe aynı paragraftaymıĢ gibi
ekrana görüntülenmeye devam edilecektir. </p>
</BODY>
</HTML>
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013 alıntıdır.
Hiç yorum yok:
Yorum Gönder