Merhaba arkadaşlar
Bu yazımı HTML ye başlayan arkadaşlar için hazırladım. Başlangıç için
ideal bir yazıolacağını düşünüyorum. ve başlıyorum;
HTML (Hyper Text Markup Language) WEB sayfalarının hazırlanmasında
kullanılan dildir. Web siteleri gördüğümüz gibi herhangi bir resimden
veya görselden ibaret değildir. Arkasında çalışan ilk bakışta anlamakta
zorlanacağımız kodlar vardır.
Öcelikle bir web sayfası hazırlanırken dikakt edilecek bazı noktalar
avrdır. bunlar;
-Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar
kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.
-WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız.
Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan
sayfanın default.html olarak adlandırılmasını ister.
HTML Ye Giriş
HTML
diğer proğramlama dillerinden farklı olarak sadece görsel tasarımiçin
kullanılır. Örneğin bir emlak sitesi, haber sitesi veya bir forum sitesi
oluşturacaksak bunu sadece görsel kısmını yani tasarımı içeren kısmını
HTML ile yaparız. Diğer kısımları farklı dillerle oluştururuz ör; PHP
ASP vs.. Dillerin genel mantığı hemen hemen aynıdır yani bir dili
öğrendiğimiz zaman diğerlerini anlamakta pekte zorlanmayız.
HTML
herhangi bir text editörü ile hazırlanabilir. Fakat bunu yerine dahada
gelişmiş olan bazı proğramlarıda kullanabilirz örneğin Dreamweaver,
FrontPage, Netscape Composer gibi.
Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya
“dosya_adi.html” olarak kaydedilmelidir. Tabi bazı yazım kurallarıda bulunmaktdır bunlarıda şu şekilde sıralayayım size;
- Komutlar büyük ya da küçük harfle yazılabilir.
- Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
- Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır.
Kullanım Biçimi
<etiket (tag)_adi>
örneğin;
<HTML>, <BODY>, <TITLE> bunalr bazı etiketlerdir
hepsinin farklı görevleri bulunmaktadır bunları ileride açıklayacağım.
Bir etiket <etiket_adi> şeklinde başlar ve bazı etiketler dışında </etiket_adi>
şeklinde biter.
Etiketler
iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların
okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket
açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır.
Bkz.
<tag_1>
<tag_2>
......
</tag_2>
</tag_1>
Bunada bir örnek vereyim;
<HTML>
<BODY>
......
<FORM>
......
</FORM>
</BODY>
</HTML>
Bir
etiket parametreler kullanarak biçimlendirilir ve bu parametrelere
tırnak ("") işaretleri arasında değer atanır. Değerle parametre adı
arasında eşittir (=) işareti kullanılır.
Kullanım biçimi:
<tag_adi parametre_adi ="deger">
Örnek:
<body bgcolor="blue">
WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada
mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre
görüntüler.
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
Sayfanızın tüm içeriği: resim, yazı, video, vb.
</body>
</html>
Şimdi bazı sık kullandığımız bazı etiketlerin tanımını ve kullanım amaçlarıan bakalım.
1. <HTML>
<html>, bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML
belgesinin başladığı ve bittiği yeri bildirir.
2. <HEAD>
Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Metaetiketinde kullanılan parametreler aşağıdadır.
Kullanılacak parametreler Görevi
name Author, description ve keywords özellikleri tanımlanır.
http-equiv Refresh, expires, content ve content-style-type özellikleritanımlanır.
Size Yazının boyu belirlenir.
3. <BODY>
HTML
belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler,
listeler vb. her türlü HTML nesnesi yerleştirilebilir.
Kullanılacak parametreler Görevi
Bgcolor Arka plan rengini belirler.
Background
Arka planda kullnılmak istenen resmi belirler.
Link Sayfadaki linklerin
rengini belirler.
Alink Linke tıklandığındaki rengi belirler.
Vlink Daha önce ziyaret edilmiş linklerin rengini belirler.
4. <TITLE>
Head
bölümü içine yazılan title bölümüne sayfanın başlığı yazılır,
tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.
<HTML>
<HEAD>
<TITLE> htmlcity html kodları
</TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
5. <OL>
Sıralı
liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya
da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma
rakamlı olarak sıralı göstermektir. Liste içine alınacak metinler
<ol>...</ol> etiketleri arasına alınarak yazılır. Bu
etiketler listenin başladığını ve bittiğini belirtir. <ol>
etiketine parametreler ekleyebiliyoruz. Type parametresi listemizin
rakamla mı harfle mi başlayacağını, start ise hangi rakam/harfle
başlayacağını belirler. Yani a) b) c) değil de d) e) f) gibi. Start
değeri her zaman bir sayı olmalıdır. Yani sırayı alfabe olarak atamak ve
“f” den başlamak istersek start değerini “f” değil “6”, type değerini
de küçük “a” yapmalıyız. Compact parametresi ise listenin mümkün olan
minimum satır aralığına sahip olmasını sağlıyor. Type parametresinde
kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler
(küçük/büyük) ve romen rakamları (i,ii,iii gibi)
6. <UL>
Listeleme
yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük
yuvarlaklar, kareler yerleştirmek için <ul> etiketini
kullanıyoruz. <ul> için kullanılan parametreler type ve
compact’tır. Type ile kullanacağımız madde iminin şeklini seçebiliriz.
Bunlar disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu
kare)’dir.
7. <LI>
<li>
etiketi ingilizce “liste elemanı” anlamına gelen 'list item'
kelimesinin kısaltılmışıdır. Yukarıda anlatmış olduğumuz <ol> ve
<ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de
<li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin
başına <li> getirmeliyiz.
örnek;
<html>
<head><title> Listeler </title>
</head>
<body>
<ol type="1">
<li>Html kodları
<ol type="a">
<li>yazı kodları
<li>parametreler</ol>
<li>JAWA kodlar
<ol type="a" start="3">
<li>JAWA
<li>Temel Bilgiler
<ol type="i">
<li>başlangıç
<li>orta </ol>
</ol>
</ol>
</body>
</html>
Ve şimidide Metin Düzenleme Etiketlerinden bahsedelim.
ilk etiketimizle başlayalaım.
1.<HX>
Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini
tanımlar.
<html>
<head><title>Başlık Komutları</title>
</head><body>
<h1>HTML KOMUTLARI</h1>
<h2>HTML KOMUTLARI</h2>
<h3>HTML KOMUTLARI</h3>
<h4>HTML KOMUTLARI</h4>
<h5>HTML KOMUTLARI</h5>
<h6>HTML KOMUTLARI</h6>
<body></html>
Sayı arttıkça yazı büyüklüğü azalır.
2.<B>
Aradaki metni koyu (bold) yazar.
<html>
<head><title> Kalın yazma </title>
</head><body>
HTML<b>CITY</b> HTML
<br>
<b>Kodları</b> Dersi
</body>
</html>
3.<U>
Aradaki metni altı çizili (underline) olarak yazar.
<html>
<head><title> Kalın yazma </title>
</head><body>
HTML <u>CITY</u> HTML
<br>
<u>Kodları</u> Dersi
</body>
</html>
4.<I>
Aradaki metni eğik (italic) yazar.
<html>
<head><title> Kalın yazma </title>
</head><body>
HTML <i>CITY</i> HTML
<br>
<i>Kodları</i> Dersi
</body>
</html>
5.<BR>
Metinleri bölmek,
yani ikinci satıra atmak için <br> etiketini kullanıyoruz.
6.<P>
Aradaki metne paragraf özelliği kazandırır. Sonlandırıldığında, takib eden metin bir
satır boşluk bırakılarak ve satır başına yazılır.
<HTML>
<HEAD><TITLE> Metne Paragraf Ekleme </TITLE>
</HEAD><BODY>
<p> Bilgisayara fazlaca merakı olan bir çok kişinin isteği, bilgisayar yardımı ile
dış çevre birimlerini kontrol etmektir.</p>
<p> Windows 2000 ( NT teknolojisi ) üzerinde port uygulamaları geliştirmek
diğer işletim sistemlerine göre daha zor bir iştir. Zira NT teknolojisi üzerine kurulu
sistemler donanım aygıtlarına direk erişiminizi kısıtlamaktadırlar.</p>
</BODY>
</HTML>
7.<FONT>
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.
Size, color, Face kavramlarını daha iyi anlayalaım;
--Size
Metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin
büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlayabilir, direkt olarak bir rakam
vererek de bunu yapabilirsiniz. Yazı tipi çok büyük olmamalıdır, büyük yazı tipleri hem
kullanıcıların sayfayı okumasını zorlaştırır, hem de sayfanın güzelliğini bozar.
--Color
Yazının rengini (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri)
belirler. HTML'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı
düzeninde 6 rakamdan oluşur. Bu düzende 9'dan sonraki sayı1arı göstermek için A’dan F’ye
kadar olan harfler kullanılır.Örneğin #FFFFFF
beyaz, #000000 siyah, #C0C0C0 gri (tabloda 'silver'), #FFFF00 sarı, #FF0000 kırmızı
renklerini verir. Renk kodlarını
burada bulabilirsiniz
---Face
Face parametresini tüm WEB tarayıcıları desteklemese de bu parametre kullanılarak
sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin Face="Arial
Tur" parametresi kullanıldığında yazı tipi Türkçe Arial olacaktır.
<html>
<head><title>font komutu</title>
</head><body>
<font face="tahoma">HTML</font><br>
<font size="5">CITY</font><br>
<font color="#ff0000">HTML kod</font><br>
<font face="comic sans ms" size="7"
color="green">dersi</font><br>
</body>
</html>
Görünüm Düzenleme Etiketlerinden olan BGCOLOR'dan da biraz bahsedelim.
BGCOLOR Sayfanın arka plan rengini belirler. <body> belirteci ile kullanıldığında sayfa arka plan
rengini; tabloda <td> etiketi ile kullanıldığında hücre rengini değiştirir.
<html>
<head><title>Hücre rengi</title>
</head><body>
<table border="1" cellpadding="7">
<tr>
<td bgcolor="#ff0000">KIRMIZI</td></tr>
<tr>
<td bgcolor="#00ff00">YEŞİL</td></tr>
</table>
</body>
</html>
Evet
arkadaşlar HTML deki sık kullanılan ve işimizi kolaylaştıran bazı
etiketleri yukarıda anlatmaya çalıştım. Takıldığınız yerler olursa
srmaktan çekinmeyin. Diğer yazımda tablo oluşturma ve tablo örnekleri
hakkında bilgiler vereceğim. Dğer derste görüşmek üzere...
