Webbier: HTML'ye Başlangıç

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.

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...

HTML'ye Başlangıç

Hiç yorum yok:

Yorum Gönder