1. HTML. <body text= blue link= #0000FF vlink= #FF00FF alink= #FF0000 background= zeminfon.jpg bgcolor= # >

(1)

1. HTML

HTML, HyperText Markup Language, tarayıcılardan görebileceğimiz (Internet Explorer,Netscape gibi) Internet dökümanlarını yaratmaya yarayan bir işaretleme dilidir.

Internet üzerindeki tüm sayfaların kaynağı html'dir. Tarayıcı olmadan html kodları birşey ifade etmez.

Herhangi bir web sayfasının html kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp “view source/kaynağı görüntüle” ya da “Görünüm” menüsünden “Kaynak”

seçeneğini seçeriz.

HTML dökümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir.Bunun için notepad, pico, wordpad gibi editörler yeterlidir.Bunların yanında bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.

Her html dökümanı <html> ile başlar ve </html> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. HTML etiketlerinin coğu için bir başlatıcı ve bir sonlandırıcı söz konusudur. Başlatıcı etiket, Web sayfasında istenen etiketin oluşturulmasını ve sonlandırısı etiket ise etiketin kaldırılmasını sağlar. Bazı etiketlerin sonlandırıcı etiketleri yoktur (<hr>, <br> gibi). Sonlandırıcı etiketlerin </etiket>

biçiminde kullanıldıklarına dikkat edelim. Bazı etiketlerin ise hem başlatıcı hem de sonlandırıcı etiketleri olduğu halde sonlandırıcı kullanılmasına gerek duyulmaz (<p> gibi).

HTML dili ile yazılan Web sayfaları iki ana kısımdan oluşmaktadır: <head>...</head> ve

<body>...</body>. “head”ın içine <title>...</title> etiketi yer alır. “title”, tarayıcımızın en üstünde yazan açıklamayı içerir. “title”dan sonra “head” kapatılır ve ana kısım olan “body”ye geçilir. Sayfamızda görüntülemek istediğimiz herşeyi “body” içine yazarız.

<body> etiketi yalın (basit) bir şekilde kullanılabileceği gibi, Web sayfasının arka plan (zemin) rengi ve deseni, bağlantı (link) renkleri ile ilgili tanımlamaları da kapsayabilecek şekilde aşağıda örneklenen biçimde de yazılabilir.

<body text=”blue” link=”#0000FF” vlink=”#FF00FF” alink=”#FF0000”

background=”zeminfon.jpg” bgcolor=”#800080”>

Burada;

o background:Web sayfasının arka planında görüntülenecek görüntü öğesine ait URL adrresini gösterir.

o Bgcolor: Web sayfalarının arka plan rengini tanımlar o Text: Yazı rengini tanımlar

o Link, vlink (ziyaret edilmiş bağlantılar), alink (vurgulanacak bağlantılar): Bağlantı reklerini tanımlar

Örnek:

(2)

Web tarayıcıları tarafından görüntülenmeyen fakat sadece sayfanın kaynak kodu izlendiğinde kod izleyene nerede ne yapıldığını belirten etiketlerde mevcuttur. Açıklama etiketleri denilen bu etiketler, <!—Açıklama --> şeklinde yapılandırılır.

Örnek:

<html>

<head>

</head>

...

</html>

1.1. Metin Biçimleme Etiketleri

Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.

Yazı Başlığı Etiketleri:

6 çeşit başlık vardır:<h1>,<h2>,...<h6>. Bunlardan en büyüğü <h1>,en küçüğü ise

<h6>'dır.

<h1>H1 ile yapılan başlık</h1>

Metin Vurgulama Etiketleri:

Web sayfasında belirli sözcüklerin ve/veya yazı öbeklerinin koyu ya da dolgun, sağ eğik, altı çizili gösterilmesi izleyen kişinin ilgisini doğrudan yazı üzerine çeker, yani yazı vurgulanmış olur. Vurgulama için yazı tipi, rengi ve büyüklüğü de değiştirilebilir.

Vurgulamada kullanabileceğiniz etiketler aşağıda sıralanmıştır.

<b>...</b> : koyu renk yazı (bold)

<i>...</i> : italik

<u>...</u> : alt çizgi (underline)

<font size=”3”>...</font> : yazı büyüklüğü etiketi (1'den 7'ye kadar bir sayı)

<font color=”red”>...</font> : yazı rengi etiketi

<font face=”arial”>...</font> : yazı tipi etiketi (arial, verdana, tahoma gibi)

(3)

<font> etiketlerini hepsini birlikte aşağıda gösterildiği şekilde aralarına birer boşluk koyarak kullanabilirsiniz.

Renkler:

HTML dökümanlarında renkler ya İngilizce isimleriyle,ya da "hexadecimal" değerleriyle belirtilir. En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk:

Renk Renk

adı: Renk Renk adı:

aqua black

blue fuchsia

gray green

lime maroon

navy olive

purple red

silver teal

white yellow

Renklerin hex-kodlarını pek çok ilgili siteden bulabilirsiniz (http://html-color-codes.com/ , http://www.computerhope.com/htmcolor.htm)

Örnek :

Bu örnekte artalan yeşile döner.

<body bgcolor="#008000"> aynı sonucu verir.

Örnek :

<font color="#4B0082"> =>Font rengi "indigo" oldu.

1.2. Metin Düzeni Etiketleri Paragraf Etiketleri:

Web sayfası paragrafları arasında boş bir satır bulunan ve sola dayalı olarak görüntülenen metin öbekleridir. Paragraf tanımları <p> etiketi ile başlatılı ve </p> etiketi ile sonlandırılır.

<p> Bu kısma paragrafın metni gelir </p>

Ön Biçimli Metin Etiketi:

Paragraf düzenindeki metinlerde yazım sırasında bırakılan boşluklar, sekmeler vb.

Yapılandırmalar dikkate alınmadan görüntülenir. Yani <p> etiketi, metin öbeğindeki tüm sözcükler arasında bir tek boşluk bırakarak görüntüleme yapar. <pre>....</pre>

etiketleri arasında bulunan yazılar oldukları gibi görüntülenir.

(4)

İçerden Başlama Etiketi:

Bir paragrafın diğerine göre daha içerden başlamasını istiyorsanız bu

<blockquote>....</blockquote> etiketleri kullanılır. Şiir dizeleri gibi.

Örnek Etiketi:

<b>,<i> gibi etiketlerinin kullanımını etkisiz hale getirmek için <xmp>...</xmp>

etiketleri kullanılır. Bu etiketler arasında girilen diğer etiketleri tarayıcı metin olarak kabul eder ve sadece yazı olarak görüntüler.

Satır Başı Etiketi:

Satır başı yapılması gereken yerlerde yani yeni bir satıra geçilmesi gereken yerlerde

<br> yeni satır etiketi kullanılır ve sonlandırıcı etiketi yoktur.

Yatay Çizgi Etiketi:

Web sayfalarına, belli bir grup metin veya listeyi diğer gruplardan ayırmak ve böylece daha kolay farkedilmelerini sağlamak için yatay çizgiler kullanılır. Yatay çizgiler, <hr>

etiketi ile oluşturulur ve bunun da sonlandırıcı etiketi yoktur. Yatay çizgi tanımında, çizgi kalınlığı, uzunluğu ve yerleşimi konusunda bir takım özellik atamaları da yapılabilir.

<hr align=”konum” width=”n%” size=”m”>

Burada;

o konum: center (ortala), right (sağa yanaşık), left (sola yanaşık) olabilir.

o n: bir sayı (25%, 50%, 75% gibi) o m: 1,2,3 gibi bir sayı.

1.3. Menüler ve Listeler:

Temel olarak üç çeşit liste vardır: Sıralı Liste, Sırasız Liste ve Tanımlama Listeleri. Bunları karma bir şekilde kullanarak iç içe listeler yapmak da mümkündür.

Sıralı Liste (Ordered List):

Numaralı liste oluşturmak için <ol>...</ol> etiketleri kullanılır. Liste elemanlarının gösterilmesi için ise <li>....</li> etiketleri kullanılır.

Örnek:

<ol type="1">Çerezler:

<li>Kavurga

<li>Çekirdek

<li>Mısır

<li>Cips

</ol>

Çerezler:

1. Kavurga 2. Çekirdek 3. Mısır 4. Cips

(5)

<ol type="a">İçecekler:

<li> Kola

<li> Portakal Suyu

<li> Nar Suyu

<li> Mandalina Suyu

<li>Gazoz

</ol>

İçeçekler:

a. Kola

b. Portakal Suyu c. Nar Suyu d. Mandalina Suyu e. Gazoz

Örnekte görüldüğü gibi type özniteliği sıralı listenin türünü belirler. Type yerine bunlardan biri yazılabilir: {1,a,A,I,i}

Aynı zamanda listeye bir değer vererek istediğimiz sayıdan da başlatabiliriz:

Örnek:

<ol start="199">Çerezler:

<li>Kavurga

<li>Çekirdek

<li>Mısır

<li>Cips

</ol>

Çerezler:

199. Kavurga 200. Çekirdek 201. Mısır 202. Cips

Sırasız Liste (Unordered List):

Numarasız liste oluşturmak için <ul>...</ul> etiketleri kullanılır. Liste elemanlarının gösterilmesi için ise <li>....</li> etiketleri kullanılır.

Örnek:

<ul type="circle">Çerezler:

<li>Kavurga

<li>Çekirdek

<li>Misir

</ul>

<ul type="disk">İçecekler:

<li> Kola

<li> Portakal Suyu

<li> Nar Suyu

<li> Mandalina Suyu

<li> Gazoz

</ul>

Çerezler:

o Kavurga o Çekirdek o Misir o Cips İçecekler:

 Kola

 Portakal Suyu

 Nar Suyu

 Mandalina Suyu

 Gazoz

Gene burda da type özniteliği sıralı listenin türünü belirler. “type” yerine bunlardan biri yazılabilir:{square,disc,circle}

Tanımlama Listeleri (Definition List):

Örnek:

<dl>

<dt>Karbonhidrat ve ben

<dd>En çok bol karbonhidratlı yemekleri

Karbonhidrat ve ben

En çok bol karbonhidratli yemekleri severim,özellikle de

(6)

severim,özellikle de makarna ve

türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım.

<dt>Sebze ve ben

<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir.

Onun dışında dolma, sarma da güzeldir.

<dt>Et ve ben

<dd>Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama.

</dl>

makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantiya da bayilirim.

Sebze ve ben

Sebzeyle aram pek iyi degildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun disinda dolma, sarma da güzeldir.

Et ve ben

Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kirmizi olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balik seçerim ama.

1.4. Görüntü, Ses, Film Eklemek Sayfa içi görüntüler;

Sayfa içi görüntüler web sayfaları içerisine gömülü görüntüler olup, <IMG> etiketi ile tanımlanır. En basit kullanım şekli:

<img src="url">

şeklinde olur. Dikkat etmemiz gerekenler kulanacağımız resimin ".jpg", ".gif" ya da

“bmp” gibi bir formatta olması ve dizin yapısıdır.

Örnek:

Reism ve html dosyası aynı dizinde ise;

Resim dosyası html dosyasından ayrı olarak, “Goruntuler” isminde başka bir dizinin içindeyse.

Öznitelikler:

<img src="url" align="konum" width="x" height="y" border="n" alt="metin"

vspace="p" hspace="q">

alt: Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde, alt özniteliğinde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür.

src: Resim dosyasının kaynağını belirtir.

height, width: Resmin yükseklik ve genişliğini belirtir.

border: Resmin kenarlığını belirtir. “n” yerine 0 ve daha büyük bir tamsayı girilir.

(7)

align: Görüntünün metne göre yerleşimini belirler. “Konum” yerine {top, bottom, middle} yazılabilir.

vspace: Görüntünün alt ve üst kısmında bulunan metinler ile kaç piksellik boşluk olacağını tanımlamak için kullanılır.

hspace: Görüntünün sağ ve sol kısmında bulunan metinler ile kaç piksellik boşluk olacağını tanımlamak için kullanılır.

Örnek:

Eğer artalanda bir imajın çıkması istenirse:

şeklinde yazılır.

Sayfa dışı görüntüler;

Sayfa dışı görüntüler Web sayfası HTML belgesi içinde bulunmayan ve normal bir bağlantı işlemi ile tanımlanarak alınan görüntü dosyalarına verilen ad olup ses ve film dosyaları için de aynı yöntem kullanılır.

Örnek:

<a href=”filmler/cu.mpg”> Ç. Ü. Tanıtım Filmi </a>

<a href=”istiklalmarsi.au”> İstiklal Marşı </a>

1.5. Bağlantılar:

Bağlantılar <a>...</a> etiketi içinde, href="" komutuyla belirtilir.

Örnek:

<a href="http://www.cu.edu.tr" target="_blank">Çukurova Üniversitesi </a>

Bu örnekte bir de target özniteliği verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir.Aynı pencerede açılmasını isterseniz de target="_top" yazmalı, ya da hiç belirtmemelisiniz.

Eğer hazırladığınız dökümanlar arasında bir bağlantı kurmak istiyorsanız,<a>

etiketini aşağıdaki gibi kullanmalısınız.

<a href="dosyaadi.html">Önceki sayfa</a>

<a href="dosyaadi3.html">Sonraki sayfa</a

(8)

Bir mail adresine link vermek istiyorsanız:

<a href="mailto:bbuam@cu.edu.tr">Mail atmak için tıklayın...</a>

Bu linke tıklandığında bilgisayarda kullanıcıya ait mail programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.

Aynı döküman içinde bağlantı kurmak yani sayfa içi referans vermek istersek de:

<a href="#giris">Giriş Bölümüne Git</a>

kalıbını kullanırız,ve bağlantı kurmak istediğimiz yere,mesela linkler başlığına:

<a name="giris">Giriş Bölümü</a>

şeklinde bir ekleme yaparız.

(9)

1.6. Tablolar

Tablolar <table>....</table> etiketleri arasında yapılır.<table> etiketinden sonra daima <tr> gelir.Her satır tanımlandığında <tr>,her hücre tanımlandığında da <td>

etiketi kullanılır.

Örnek :

<tr>

<td>1. hücre</td>

<td>2. hücre</td>

<td>3.hücre</td>

</tr>

<tr>

<td>4. hücre</td>

<td>5. hücre</td>

<td>6. hücre</td>

</tr>

</table>

1. hücre 2. hücre 3.hücre 4. hücre 5. hücre 6. hücre

Öznitelikler:

<table border="" bordercolor=”” cellpadding="" cellspacing="" width="" height=""

bgcolor="" background=”” align="">

border: Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.

bordercolor: Çerçevenin rengini belirlemek için kullanılır.

cellpadding, cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing özniteliği ile belirtilir.

bgcolor: <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor=

"red"> şeklinde sadece tek bir hücre renklendirilir.

background: tablonun yada hücrenin arka planında görüntülenecek görüntü öğesine ait URL adrresini gösterir (<table background=”resim.jpg”> gibi).

align: hücredeki elemanın yatay konumunu belirler ve "right,left,center,justify"

opsiyonları ile kullanılır.

valign: hücre elemanının düşey konumunu belirler ve opsiyonları

"top,bottom,middle"dır.

(10)

colspan, rowspan: Aynı satırdaki hücreleri birleştirmek için (yan yana hücreleri) colspan, aynı sütundaki hücreleri birleştirmek için de (alt alta olan hücreleri) rowspan özniteliği kullanılır. Birleştirilen hücreye ait <td>..</td> etiketi silinir.

height, width: Tablonun ya da hücrenin yükseklik ve genişliğini belirtir.

Örnek :

<tr>

<td>1. hücre</td>

<td>2. hücre</td>

<td>3. hücre</td>

</tr>

<tr>

<td rowspan="2">4. hücre</td>

<td colspan="2">5. hücre</td>

</tr>

<tr>

<td>6. hücre</td>

<td>7. hücre</td>

</tr>

</table>

1. hücre 2. hücre 3. hücre

4. hücre 5. hücre

6. hücre 7. hücre

Bu öznitelikleri <td> ve <tr> etiketlerine de uygulayabilirsiniz. Sadece bir satırın ya da sütunun yüksekliğini (height), genişliğini (width), hizalamasını (align, valign), rengini (bgcolor) değiştirebilirsiniz.

Örnek :

<td width=120 height=20 align=”right”>hücre1</td>

</tr>

<td width=120 height=40 align=”center”>hücre2</td>

</tr>

<td width=120 height=60 align=”left”>hücre3</td>

</tr>

<td width=120 height=80 align=”center”>hücre4</td>

</tr>

</table>

Bunlar dışında tabloları iç-içe de kullanabilirsiniz. <td>...</td> etiketlerinin arasına yeni bir <table> etiketi ile başlayarak başka bir tablo yerleştirebilirsiniz.

(11)

1.7. Marquee Etiketi

Marquee etiketi web sayfasına hareketli yazı ya da resim koymak için kullanılabilir.

Örn:

<marquee behavior="scroll" scrollamount="10" loop="2">Bu bir kayan metin örneğidir...</marquee>

Marquee etiketinin öznitelikleri;

 behavior = "scroll, slide, alternate" : Kayma türünün belirler.

 direction = "left, right" : Kayma yönünün belirler.

 width = "0-100%" : Kayma alanının genişliğini belirler.

 height = "0-100%" : Kayma alanının yüksekliğini belirler.

 scrollamount = "sayı" : Kayma hızını belirler.

 loop = "sayı" : Hareket etme sayısını verir.

 bgcolor = "renk" : Kayma alanının arka plan rengini belirler.

1.8. Sayfa İçi Çerçeve

Bir web sayfası içinde başka bir web sayfası açmak için bu etiket kullanılır.

Örn:

iframe etiketinin öznitelikleri;

 name = “isim” : Bu alana çerçevenin referans ismi yazılır

 src= “kaynak.html” : Bu öznitelik çerçevenin içinde açılacak sayfayı belirlemek için kullanılır.

 scrolling= “yes, no” : Çerçevenin yanında hareket çubuğunun yer alması için kullanılır

 align = “left,right,center” : Çerçevenin sayfa içindeki pozisyonunu belirlemede kullanılır.

(12)

1.9. Çerçeveler

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız.

Örnek:

<title>Cerceveler</title></head>

</frameset>

</html>

Örnek:

<title>Cerceveler</title></head>

</frameset>

</html>

Örnek Kod:

<html>

<head>

<title>Çerçeveler</title>

</head>

</frameset>

 * miktarı eşit miktarda kaç tane çerçeve olacağını gösterir.

(13)

 frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor . src pencerede görüntülenecek html dosyasının yerini gösteriyor. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz.

 cols="*,*" ya da rows=”*,*” ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile tarayıcı penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı tarayıcıya bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının tarayıcıya bırakıldığını gösteriyor.

 cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtirken, buraya rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

 Kullanılacak çerçeve miktarınca da ek HTML sayfası oluşturmak gerekmektedir.

 FRAMESET etiketini HTML dosyanızın </head>...<body> etiketleri arasında kullanmayı unutmayın !!!

 FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

o frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

o border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler.

 FRAME etiketi ile kullanabileceğimiz parametreler;

o marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

o scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler.

o noresize Pencere boyutlarının sabit olmasını sağlar.

1.10. Menü Yaratmak

Aşağıdaki kodu kullanarak bir menü yaratığınızda;

<table width="10%" style="border-collapse: collapse" bordercolor="#111111"

cellpadding="0" cellspacing="0" height="1">

<tr >

(14)

<td style="Cursor:hand" onmouseover="this.style.color='red'"

onmouseout="this.style.color='black'"> <b><font face="Verdana"

size="2">MENU1</font></b></td>

</a>

</tr>

<tr >

<td style="Cursor:hand" onmouseover="this.style.backgroundColor='red'"

onmouseout="this.style.backgroundColor='#FFFFFF'"> <b><font face="Verdana" size="2" > MENU2</font></b></td>

</a>

</tr>

</table>

MENU1 öğesinde yazının rengi üzerine gelindiğinde kırmızı olurken, MENU2 öğesinin üzerine gelindiğinde arkaplan rengi kırmızı olacaktır.