RENK KODLARI

TABLOLAR

1. <TABLE>
Hazırlamış olduğunuz web sayfanıza tablo eklemek için kullanılan etikettir. Bir tablo
<Table> etiketi ile başlayıp </Table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur.
Satırların ve sütunların kesiştikleri kutuya “hücre” adı verilir.
Aşağıdaki örnekte 1x1’lik (1 satır ve 1 sütundan oluşan) bir tablo gösterilmiştir.

2.TR
Tabloda satır oluşturmak için kullanılır.

3.TD
Tabloda sütun oluşturmak için kullanılır.

4.Border
Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak
için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama
sürecinde bu seçenek sıklıkla kullanılmaktadır.

5.Bordercolor
Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.

6.Bgcolor
Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için
kullanılır.

7.Background
Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.

8 Width
Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır.
<table width=”200”> Tablo genişliğini belirlemek için kullanılır.
<td width=”200”> Hücre genişliğini belirlemek için kullanılır.
9. Height
Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır.
<table height=”200”> Tablo genişliğini belirlemek için kullanılır.
<td height=”200”> Hücre genişliğini belirlemek için kullanılır.

10.Colspan
Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.

11.Rowspan
Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.

12.Cellspacing
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel
türünden ayarlamak için kullanılır.
13.Cellpadding
Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını
belirlemek için kullanılır.

BAĞLANTI (KÖPRÜ) OLUŞTURMA

1. Sayfa İçi Bağlantı Oluşturma
Html kodları kullanarak, sayfa içi bağlantılar oluşturabilirsiniz. Bir sayfadaki metne
tıklayarak,  aynı sayfanın başka bir bölümüne gidebilirsiniz. Bu işlem çapa olarak da
adlandırılır.
Çapa oluşturma işlemi;
<a href="#...">...</a>, <a name="....">...</a>  komutları kullanılarak yapılmaktadır.
<a href=”#...”> ile tıklanmasını istediğimiz metin; <a name=”...”> ile de karşımıza
gelmesini istediğimiz bölüm belirlenir.

2. Sayfa Dışı Bağlantı Oluşturma
Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar,
dokümanlar, resimler  arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link,
köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.
 Herhangi bir web sayfasına bağlantı oluşturmak;
<a href=”http://www.meb.gov.tr”> Milli Eğitim Bakanlığı</a>
“Milli Eğitim Bakanlığı”, yazısına tıkladığınız zaman “www.meb.gov.tr “ internet
sitesi açılacaktır.
 Hazırlamış olduğumuz site içerisinde link vermek;
<a href=”index.html”>Ana Sayfa</a>
“Ana Sayfa” yazısına tıkladığımız zaman hazırlamış olduğumuz ve bilgisayarımızda
kayıtlı olan “index.html” sayfasına bağlantı oluşturulacaktır.
 Herhangi bir yazıya tıkladığınız zaman resim açılması için;
<a href=”okul.jpg”>Okulumuzun Resmini Görmek İçin Tıklayınız</a>
 Herhangi bir dosyaya link vermek için;
<a href=”portlar.pdf”>Portlar modülünü indirmek için tıklayınız…</a>
<a href=”resimler.zip”>Bilgisayarınıza indirmek için tıklayınız</a>
Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı
pencereyi belirtebiliriz.
<a href="..." target="..." > </a>
target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar.
target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar.
target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar.
target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa
onun yerinde açılmasını sağlar.
target="çerçeve(frame)  adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak
için kullanılır.
<a href=http://www.meb.gov.tr target=”_blank”> Milli Eğitim Bakanlığı</a>

3. E-Posta Adresine Bağlantı Oluşturma
Hazırlamakta olduğunuz web sitesi aracılığıyla istenilen herhangi bir e-posta adresine
bağlantı oluşturabilirsiniz.
E-posta adresine bağlantı oluşturmak için;
<a href=”mailto:e-posta adresi”>….</a> komutu kullanılır.
Örnek:
<a href=”mailto: etogm@meb.gov.tr”> E-posta göndermek için tıklayınız.</a>
Yukarıdaki html komut satırını yazıp kaydettiğinizde tarayıcıdaki
görüntü aşağıdaki gibi olacaktır.
E-posta göndermek için tıklayınız yazısına, tıklandığı zaman  konu, bilgi ve e-posta
adresi gibi bilgilerin girilebileceği Şekil 4.1’de görünen e-posta gönderme programı
açılacaktır. İstenilen bilgiler yazıldıktan sonra “Gönder” düğmesine tıklandığında,
e-postamız gönderilmiş olur.

METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ

1)<HX>
<HX> etiketleri, dokümana başlık eklemek için kullanılan etiketlerdir. <hx>
etiketindeki “x” ifadesi, 1’den 6’ya kadar değer almaktadır. Sayı azaldıkça yazı
büyüklüğünde artış olmaktadır. Buradaki <h1>…</h1> en büyük başlığı, <h6>…</h6> ise
en küçük başlığı gösterir.
<HX> ile kullanılacak parametrelerden birisi “align” parametresidir.
Align parametresi,  Left (sola hizala), right (sağa hizala), center (ortala), justify (iki
yanayasla) değerlerini alabilir.
<h1 align=”center”> Milli Eğitim Bakanlığı </h1>  şeklinde yazıldığında “Milli
Eğitim Bakanlığı” yazısı sayfaya ortalanmış bir şekilde yazılacaktır.

2)<B>
İstenilen metni kalın (bold) olarak yazmak için kullanılır.
Kullanımı:
<B>…</B> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore
3) <U>
İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.
Kullanımı:
<U>…</U> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore

4)<I>
İstenilen metni eğik(italik) olarak yazmak için kullanılır.
Kullanımı:
<I>…</I> şeklindedir.
Örnek:
Boş zaman yoktur boşa geçen zaman vardır. Tagore

5)<BR>
Enter tuşu görevini görür. Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz.
Örnek:
Ey Türk Gençliği!
Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini,
ilelebet, muhafaza ve müdafaa etmektir

6)<P>
Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır
boşluk bırakarak, metne satır başından devam edilmesini sağlar.

7)<FONT>
<FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini
değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir.
Size: Yazının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.).
Örnek:
<FONT SIZE ="1"> Merhaba</FONT>
<FONT SIZE ="4"> Merhaba</FONT>
<FONT SIZE ="7"> Merhaba</FONT>

Size parametresine -1, +2 gibi değerler verilerek de metnin büyüklüğü verilen değer
kadar arttırılıp eksiltilebilir (Burada font büyüklüğü 1 eksiltilip, 2 arttırılmıştır.).
Color: Yazı tipi  etiketi içerisinde metnin rengini değiştirmek için kullanılır.
Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği
yapabilirsiniz.
Örnek:
<FONT size="5" COLOR="aqua"> Merhaba</FONT>
<FONT size="5" COLOR="#FF0000"> Merhaba</FONT>

Face: Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır. Örneğin Face="
Times New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.
<font face="Algerian" size="7" color="purple">Merhaba</font>
Burada yazı tipi olarak “Algerian” yazı tipi kullanılmıştır

<HR>
<HR> etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer
etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.
Size, çizilen çizginin kalınlığını belirlemek için kullanılır.
Width, çizginin sayfadaki uzunluğunu belirlemek için kullanılır.
Align, çizginin sayfada yer alacağı konumunu (sağa hizalı, sola hizalı, ortalanmış)
belirlemek için kullanılır.
Örnek:
<hr size=“6” width=”200” align=“center”>

LİSTELEME ETİKETLERİ

1)<OL>
Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma
işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından
başlayarak sıralı listenizi oluşturabilirsiniz.
<ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır.
Örnek 1:
Burada <ol> etiketini kullanarak listeleme işlemine başlıyoruz. <li> etiketini
kullanarak da listeleyeceğimiz elemanların isimlerini yazıyoruz

Type  parametresi kullanarak listenin rakamla mı harfle mi başlayacağını
belirleyebiliriz.
“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle
olacaktır

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma
rakamları ile yapılacaktır

Sıralamanın  her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür
durumlarda  Start  parametresi kullanılır.  Start parametresinin her zaman sayı olması
gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C”
yazmak yerine “3” yazmak zorundayız.

2)<UL>
<ul> etiketi madde işaretleri şeklinde listeleme yapmak için kullanılır.

Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type
ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu
kare)’dir.

.3) <LI>
Liste  oluşturmak için  liste elemanlarını belirtmede  kullanılan etikettir. Sıralamanın
hangi şekilde olacağını ise <ol> ve <ul> etiketleri belirler.

HTML BAŞLANGIÇ

HTML Komut Yapısı
Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir
dildir. Html komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi,
çeşitli web tasarımı editörlerini kullanarak da oluşturulabilir.
Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki
kurallara dikkat edilmesi gerekir;
 Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >”
etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>,
<tag>…..</tag>
 Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)
 Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü
büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket
ile kapatılabilir.<body>….</BODY> veya <Html>….</html>
 Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi
kapatma sırasında “/” işareti unutulmamalıdır.

                                                <HTML>
<html> etiketi, html kodlarının yazımına başladığımızı gösteren etikettir. Tüm html
kodları <html>…</html> arasında yer alır. </html> ile html kodlarının yazımının bittiği
anlaşılır. Bu etiketin hiçbir parametresi yoktur.
                                                <HEAD>
Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu  sayfa başlığı (title), link
özellikleri,  siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta
etiketleri bölümdür.


Sıklıkla kullanılan meta etiketleri ve açıklamaları:
 <meta http-equiv=Content-Type content="text/htm; charset=windows-
1254">
 <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
 <meta http-equiv=Content-Type content="text/htm; charset=utf-8">
Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği
sağlamak için kullanılır.
 <meta http-equiv="expires" content ="Tarih">

                                                 <BODY>
Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin
tümü tarayıcıda görüntülenir. Body etiketi ile birlikte kullanılabilecek parametreler ve
görevleri aşağıda gösterilmiştir.
Bgcolor:  Hazırlamış olduğunuz web sayfasının arka plân rengini belirlemek
için kullanılır.
Kullanımı;
<body bgcolor=”blue”>…</body>
Background:  Hazırlamış olduğunuz web sayfasının zemininin bir resimden
oluşmasını isteyebilirsiniz. Bu parametre arka plânda kullanılmak istenilen resmi
belirlemek için kullanılır.
Kullanımı;
<body background=”resim.jpg”>….</body>
Link: Web sayfanızda kullanacağınız linklerin rengini belirlemek için kullanılır.
Alink:  Web sayfanızdaki herhangi bir Linke tıklandığı zaman oluşacak  rengin ne
olacağını belirlemek için kullanılır.
Vlink:  Web sayfanızdaki önceden ziyaret edilmiş linklerin renginin hangi renk
olacağını belirlemek için kullanılır.
<TITLE>
Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri
<Head>….</Head> etiketleri arasında yer alır.
Kullanımı;
<title> görüntülenmesini istediğiniz başlık</title>