bilgi1453

html dersleri 2

Html Nedir ? Ne İşe Yarar ?

Html Hakkında Çok Yararlı Bir Döküman

HTML ( Hyper Text Markup Language )

Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer programlama dillerinden farklı yönü sadece görsel düzenleme için kullanılmasıdır. Html herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine web sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Bir html dokümanı hazırlandıktan sonra kaydedilirken dosya_adi.htm veya dosya_adi.html olarak kaydedilmelidir. Dosya isminizde turkce karakter kullanmamaya özen gösterin, çünkü bazı web tarayıcıları turkce karakterleri algilayamadiklari icin sayfalarinizi acamayacaklardir.

Yazım Kuralları

- Komutlar büyük yada küçük harfle yazılabilir.
- Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) karakterleri içermez.
- Komutlar < ve > işaretleri arasında yazılır ve tag adını alırlar.

Kullanılış biçimi :

<tag_adi>

Örnek : <HTML>,<BODY>,<TITLE>

- Bir tag <tag_adi> şeklinde başlar ve bazı taglar dışında </tag_adi> şeklinde biter.

- Taglar iç içe yer alırlar ve en içteki tagdan başlatılarak kapatılırlar. Kodların okunabilirliğini artırmak için bir tag bitmeden tekrar tag açılırsa içeride açılan tag biraz daha içeriden yazılmalıdır.

Kullanılış biçimi :

<tag_1>
<tag_2>
......
......
</tag_2>
</tag_1>

Örnek :

<HTML>
<BODY>
......
......
</BODY>
<FORM>
......
......
</FORM>
</HTML>

- Bir tag 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ılış biçimi :

<tag_adı parametre_adı ="değer">

Örnek:

<body bgcolor="blue">

HTML Dilinde Kullanılan Taglar

Her html dokümanının içermesi gereken bazı temel taglar vardır. Bunlar: html , body , head , title taglarıdır.

<html></html> : <html> tagı bir web sayfasında bulunan ilk tagdır. Amacı o dokümanın bir html dokumanı (web sayfası da denilebilir) olduğunu bildirmektir. Önceki anlatılanlardan anlaşılacağı üzere web sayfası içersindeki bütün taglar <html></html> tagının içerisinde yazılır.Bu tagın hiç parametresi yoktur.

<head> </head> : <head> tagı bir web sayfasının başını oluşturur. <head></head> tagları arasına yazılacak herhangi bir şey sayfada görünmez. Bu tagın içine style sheet kodlari girilir. Bu tagın hiç parametresi yoktur.

<title></title> : Bu tag içine yazacağınız yazı web sayfanızın başlığı olacaktır ve browser penceresinin başlık çubuğunda görünecektir.<title> tagı <head></head> tagının içerisinde yazılır.

Kullanılış biçimi :

<title> Sayfanın başlığı </title>

Örnek :

<html>

<head>

<title> HTML Dersleri Giriş Sayfası </title>

</head>

<html>

<body> </body> : Bu tag web sayfasının görünen bütün yazılarının ,resimlerinin, formlarının, ... içine yerleştirildiği tagdır. Bu tagın parametrelerine daha ilerki konularda değineceğiz.

Kullanılış biçimi:

<body>
.......
.......
</body>

Buraya kadar anlatılan konularla temel taglarını kullanarak aşağıda bir web sayfasının temel yapısı verilmiştir.

<html>
<head>
<title> Sayfa Başlığı </title>
</head>
<body>
.......
.......
</body>
</html>

Bu kodları Notepad de yazıp çalışma dizininize ornek1.html olarak kaydeder ve bir browser dan (Internet Explorer veya Netscape) açarsanız boş bir ekran görüntüsü elde edersiniz.

Bu örnekte <body> tagının içerisine hiç bir şey yazılmadığı için sayfanız boş bir sayfa olarak görünmektedir. Pencerenin başlığının Sayfa Başlığı olduğuna dikkat ediniz.

Genel Parametreler

color: Kullanıldığı tagın rengini belirler. Genel olarak renk değerleri iki şekilde verilebilir. İlk olarak kullanılmak istenen rengin İngilizce adı ve ikinci olarak o renge karşılık gelen Hexadecimal değer.

Örnek olarak şu renk adlarını verebiliriz : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal.

Hexadecimal (onaltılık taban sayı sistemi) renk yönteminde değer olarak 6 rakam ve başında # işareti bulunan kodlar yer almaktadır. Örneğin "#ff0000" kodu Kırmızı renge karşılık gelmektedir. Bu kodların hepsini öğrenmek mümkün olmayacağından bu yöntemi öğrenme zorunluluğu yoktur ve bu yöntem genellikle web sayfası hazırlama araçları tarafından kullanılmaktadır.

Kullanılış biçimi :

<tag_adi color=değer>

Örnek :

< tag_adı color=red>

</tag_adı>

bgcolor : Arka plan rengini belirler.

Kullanılış biçimi :

<tag_adi bgcolor=değer>

Örnek :

<body bgcolor=red>

</body>

Bu şekildeki bir kodlama web sayfasının zemin rengini kırmızı yapacaktır.

background : Arka plana yerleştirilecek resmin dosya konumunu belirler.

Kullanılış biçimi :

<tag_adi background=dosya_adi.(gif, bmp, jpeg)>

Örnek : Çalışma dizininize bir resim dosyası oluşturun ve adını resim.jpg olarak kaydedin.Daha sonra aşağıdaki kodları Notepad de yazın ve ornek2.html olarak kaydedin. Dosyanızı bir browser da görüntüleyin.

<html>
<head>
<title> HTML Tagları ve Parametreleri </title>
</head>
<body background="resim.jpg">
</body>
</html>

Resim dosyası web sayfasının içerisine arka plan resmi olarak yerleştirilmiştir.

Web sayfası hazırlarken dikkat edilmesi gerekli hususlardan bir taneside resim dosyalarının çalışma klasörünün içinde başka bir klasörde tutulmasıdır. Örneğin çalışma klasörünüz C:kurs ise bu klasör içerisinde image isimli bir klasör oluşturabilirsiniz. Bu klasör içerisindeki bir resme ulaşmak için background parametresindeki dosya yolunu background=image/resim.jpg olarak değiştirmelisiniz.

align : Kullanıldığı sayfadaki yatay yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: left, right ve center dir. Left sola, right sağa dayalı olarak gösterilmesini, center ise ortalanmasını sağlar.

Kullanılış biçimi :

<tag_adi align=değer>

Örnek :

<table align=center>

</table>

valign : Kullanıldığı sayfadaki dikey yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: bottom, middle ve top dır. Bottom aşağıya doğru , top yukarı middle ortaya konumlandırılacağını belirtir.

Kullanılış biçimi :

<tag_adi valign=değer>

Örnek :

<table valign=bottom>

</table>

border : Kullanıldığı nesnenin etrafında bordür oluşturulmasını sağlar. Bordür kalınlığı için sayısal değer verilir. Border parametresi kullanılmaz ise varsayılan olarak değeri 1 kabul edilir.

<tag_adi border=değer>

Örnek :

<html>
<head>
<title> Hizalama ve Borderlar </title>
</head>
<body>
<table align="center" border="2">
<tr>
<td>Satır1</td>
</tr>
</table>
</body>
</html>

Yukarıdaki kodları Notepad de yazın ve çalışma dizininize ornek3.html olarak kaydedin. Daha sonra dosyanızı bir browser da görüntüleyin.

Görüntülenen tablo nesnesinin ortalı ve kenarlıkların kalın olduğuna dikkat edin.

height : Nesnenin yüksekliğini belirler. Height parametresine sayı olarak değer verilir.

Kullanılış biçimi :

<tag_adi height=değer>

Örnek:

<tr height=30>
.......
.......
</tr>

<body> Tagının Parametreleri

bgcolor: Arka plan rengini belirler. Bu parametrenin değerleri yukarıda anlatılan şekilde verilir.

background:Bu parametreyi kullanarak sayfanın arka planında resim kullanabilir.

link: Sayfada ki text linklerin rengini belirler.

alink: Link'e tıklandığındaki rengi belirler.

vlink: Daha önce ziyaret edilmiş linklerin rengini belirler.

text: sayfadaki biçimlendirilmemiş yazıların rengini belirler.

Kullanılış biçimi :

<body bgcolor = değer link=değer vlink=değer alink=değer text=değer>

Örnek:

<body alink="aqua" link="blue" vlink="red" text="black" bgcolor= "white">

Yazı Biçimlendirme Tagları

<font> </font>: Yazı biçimlerinin verildiği tagdır. <font> tagının bir takım parametreleri vardır Bunlar:

color : Önceden anlatılan teknikler ve renk kodlarıyla yazının rengini belirlenebilir.

Örnek:

<font color="#ff0000">Kırmızı renkli yazı</font>

face : face parametresi yazının hangi yazı biçimini kullanacağını gösterir.(helvetica , arial ,verdana... gibi).Bu parametreye yazı değerleri isimleri verilir. Yazı biçiminin görünmesi için web sayfasını açan bilgisayarda o yazı tipinin bulunması gerekmektedir. Eğer yoksa bir kaç yazı tipini alternatif olarak ve virgülle ayırarak yazabilirsiniz.

Örnek:

<font face="arial,verdana,helvetica">Bu yazı tipi arial dir. Eğer arial bulunmuyorsa diğer tipler kullanılır </font>

size : Font büyüklüğünü belirler. Bu parametreye 1 - 7 arası rakamlar girilir (1 en küçük , 7 en büyük).

Eğer en son kullanılan yazı tipi boyutu artırılıp azaltmak istenirse +1,+5,-3,-4 gibi değerler kullanılır.

<b> : Bu tag kullanıldığında bundan sonraki yazılar koyu (bold) olacaktır.

<i> : Bu tag kullanıldığında bundan sonraki yazılar italik (italic) olacaktır.

Örnek:

<html>
<head>
<title> Fontlar </title>
</head>
<body>
<font size="3" color="blue">Mavi yazı</font>
<font size="5" color="blue">Mavi büyük yazı</font>
<font size="3" color="blue">
<b>Mavi kalın yazı</b>
</font>
<font size="3" color="blue">
<b><i>Mavi kalın ve italik yazı</i></b>
</font>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek4.html olarak kaydedin ve bir browser da görüntüleyin.

Başlıklar

Başlık tagları adındanda anlaşılacağı gibi başlık yazımında kullanılır. <h1> ,<h2> ,<h3> ,<h4> ,<h5> şeklindedir.

Örnek :

<html>
<head>
<title> Başlıklar </title>
</head>
<body>
<h1>Başlık1</h1>
<h2>Başlık2</h2>
<h3>Başlık3</h3>
<h4>Başlık4</h4>
<h5>Başlık5</h5>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek5.html olarak kaydedin ve bir browser da görüntüleyin.

Paragraflar

<p> : Yeni bir paragraf yapmak için kullanılır.</p> şeklinde kapatılmaz. Bu tagla birlikte sadece align parametresi kullanılabilir.

align : Önceki bölümlerde anlatıldığı gibi left, center, right değerlerini alabilir ve paragrafın sağa, sola veya ortaya dayalı olmasını sağlar. Align parametresi kullanılmadığı durumlarda paragraf sola dayalı olur.

Kullanılış biçimi :

<p> veya <p align=değer> şeklindedir.

Örnek :

<html>
<head>
<title> Paragraflar </title>
</head>
<body>
<p> İlk paragraf sola dayalı
<p align="center"> İkinci paragraf ortalı
<p align="right"> Üçüncü paragraf sağa dayalı
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek6.html olarak kaydedin ve bir browser da görüntüleyin.

<br> : Yeni bir satır eklemek için kullanılır. </br> şeklinde kapatılmaz.

Web Sayfalarında Resim Kullanılması

Bir web sayfasında genellikle jpeg, gif formatlı resim dosyaları kullanılmaktadır. Bunun nedeni bu formattaki dosyaların boyutlarının daha küçük olması ve sayfalar görüntülenirken hızlı açılabilmesidir.

<img> : Sayfa içerisine bir resim yerleştirmek istenildiğinde kullanılır. Bu tag belli parametrelerle kullanılır.

Kullanılış biçimi:

<img src=dosya.adi border=değer align=değer alt=değer weight=değer height=değer>

src : Resim dosyasının konumunu belirtir. Eğer resim dosyaları html dosyaları ile aynı klasörde ise sadece resim dosyasının adını yazmak yeterlidir. Fakat başka bir klasör veya URL altında ise o zaman resmin yolunu belirtmeniz gerekir.

Örnek 1: HTML dosyaları resim dosyaları ile aynı klasörde olsun. Bu durumda

src = resim.jpg şeklinde yazmalısınız.

Örnek 2: Resim dosyaları HTML dosyalarına göre image isimli bir alt klasörde olsun. Bu durumda

src = image/resim.jpg şeklinde yazmalısınız.

Örnek 3: Resim dosyaları benimsitem.com adlı bir URL de olsun. Bu durumda

src= ("http://benimsitem.com/resim.gif") şeklinde yazmalısınız.

Örnek 4:
<html>
<head>
<title> Resimlerle Çalışmak </title>
</head>
<body>
<img src="image/logo.jpg">
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek7.html olarak kaydedin ve bir browser da görüntüleyin.

border : Resmin etrafına yerleştirilecek kenarlığın kalınlığını vermek için kullanılır.

align : Resmin yatay konumunu belirler. Left, Center, Right değerlerini alabilir.

alt : Resmin üzerine fare ile gelindiğinde gösterilecek metni vermek için kullanılır.

weight : Resmin genişliği piksel cinsinden girilir.

height : Resmin yüksekliği piksel cinsinden girilir.

Örnek 5:

<html>
<head>
<title> Resimlerle Çalışmak </title>
</head>
<body>

<img src="image/logo.jpg" border="4" alt="Benim Sitem" align="right">

</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek8.html olarak kaydedin ve bir browser da görüntüleyin.

Resmin sola dayalı, kenarlıklı ve açıklamalı olduğuna dikkat ediniz.

Bağlantılar (Linkler)

Web sayfaları arasında gezinti yapılabilmesi için sayfaların içerisine linkler yerleştirilir. Başka bir sayfaya veya sayfa içerisindeki bir başka konuma linklerle ulaşılabilir.

<a> </a> : Link vermek için bu tag kullanılmaktadır. Bu tagda birtakım parametreler kullanılır. Bu parametrelerle hangi sayfaya link verildiği link verilen sayfanın nerede açılacağı bilgileri verilir.<a> tagı </a> ile kapatılır.

Kullanılış biçimi :

<a href=değer target=değer > Sayfada Görünecek Açıklama </a>

href : Hangi sayfaya link verileceğini belirler. Link verilecek dosya çalışma klasörünüzle aynı konumda ise dosyanın adını vermek yeterlidir. Fakat farklı bir konumda ise yolu belirtmelisiniz.

target : Bu parametre linke basıldığında sonucun nerede görüntüleneceğini belirler. Eğer kullanılmazsa linke basıldığında aynı sayfa üzerinde görüntüleme yapılır. Target parametresi en çok Framelerle birlikte kullanılır. Fakat bu konu daha ileride işleneceğinden şimdilik target parametresinin _blank değerinden bahsedilecektir.

_blank değeri linkin sonucunun yeni bir browser penceresinde açılmasını sağlar.

Eğer isterseniz sayfanızda kullandığınız bir linkin nereye bağlanacağına dair bir açıklamayı sayfanıza yerleştirebilirsiniz. Örneğin http://www.benimsitem.com adresine link verirseniz bu linke açıklama olarak Benim Sitem yazabilirsiniz.

Örnek :
<html>
<head>
<title> Linkler </title>
</head>
<body>
<a href="http://www.benimsitem.com.tr" target="_blank">Benim Sitem </a>
</body>
</html>

Yukarıdaki örneği çalışma dizininize "ornek9.html" olarak kaydedin ve bir browser da görüntüleyin.

Sayfanızdaki linke tıkladığınızda Benim Sayfam sayfası yeni bir pencerede görüntülenecektir.

Benim Sayfam açıklaması yerine <img> tagını kullanarak sayfanızdaki bir resmede link verebilirsiniz.

Örnek :

<a href= "http://www.benimsitem.com.tr"><img src= "image/benimsitem.gif"> </a>

"ornek9.html" adlı dosyanızda gerekli değişiklikleri yapın ve ornek10.html olarak kaydedin. Yaptığınız dosyayı bir browser da görüntüleyin. Bu örnekte resmin üzerine tıkladığınızda Benim Sitem sayfası aynı pencerede açılacaktır.

Listeler

Web sayfalarında Word de olduğu gibi metinler maddeler halinde listelenebilir. Bu listeleme üç şekilde yapılabilir.

Sıralanmamış Liste (Unordered List)

Bu tipteki listelerde liste elemanları başlarında bir daire görüntülenerek listelenir.

Kullanılış biçimi :

<ul>
<li> Liste elemanı 1
<li> Liste elemanı 2
<li> Liste elemanı 3
<li> Liste elemanı 4
</ul>

Örnek :

<html>
<head>
<title> Sırasız Listeler </title>
</head>
<body>
<ul>
<li> Kastamonu
<li> Adana
<li> Yozgat
<li> Kayseri
<li> Ankara
<ul>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek11.html olarak kaydedin ve bir browser da görüntüleyin.

Sıralanmış Liste (Ordered List)

Bu tipteki listelerde her liste elemanının başına sıra numarası gelir

Kullanılış biçimi :

<ol>
<li> Liste elemanı 1
<li> Liste elemanı 2
<li> Liste elemanı 3
<li> Liste elemanı 4
</ol>

Örnek :

<html>
<head>
<title> Sıralı Listeler </title>
</head>
<body>
<ol>
<li> Kastamonu
<li> Adana
<li> Yozgat
<li> Kayseri
<li> Ankara
</ol>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek12.html olarak kaydedin ve bir browser da görüntüleyin.

Formlar

Formlar normal programlama dillerinde varolan metin kutusu (Edit), Onay Kutusu (Check Box), Açılır Kutu (Combo Box), ... gibi nesnelerin HTML sayfalarında kullanılmalarını sağlar. Formların kullanılmasındaki amaç form üzerinden girilen bilgilerin bir veri tabanına, bir e-mail adresine veya bir ziyaretçi defterine (guest book) gönderilmesini sağlamaktır. Örneğin bir web sayfasından mail adresi aldığınızda doldurduğunuz formdaki bilgiler ilgili web sayfasının veri tabanına gönderilmektedir veya bazı sayfalarda rastladığınız anket sorularına cevap verirken kullandığınız nesneler formlara örnek verilebilir.

<form> </form> : Form içerisindeki nesnelerin kullanılabilmesi için <form></form> tagı kullanılmalıdır.

Kullanılış biçimi :

<form method=değer action=değer name=değer> </form>

method : Formun hangi yöntemle karşı tarafa gönderileceğini belirler. İki değeri vardır. Bunlar get ve post dur. Eğer Get yöntemini kullanırsanız formu karşı tarafa gönderirken, gönderilen bilgiler, adres satırında açıkça görüntülenecektir. Post yöntemini kullandığınızda formu karşı tarafa gönderirken, gönderilen bilgiler, adres satırında görüntülenmez. Bu iki yöntem arasındaki farkı şöyle düşünebilirsiniz. Kullanıcı adı ve şifre girdiğiniz bir web sayfasını karşı tarafa gönderirken girmiş olduğunuz bilgilerin adres satırında görünmesi durumunda (get yöntemi) şifreniz başkaları tarafından okunabilir. Fakat post yöntemini kullanırsanız girdiğiniz bilgiler karşı tarafa yine gönderilir. Fakat adres satırında sadece sayfanın URL adresi görünür.

action : Formun hangi adrese gönderileceğini belirler.

name : Formun adını belirler.

Form Nesneleri

<input> : Form nesnelerinin bir çoğu <form> tagının içersinde kullanılan <input> taglarıyla oluşturulur.

Kullanılış biçimi :

<input type=değer name=değer>

type : Type parametresi kullanılacak nesnenin tipini belirler. Bu tipler aşağıdaki gibidir.

name : Nesnenin adını belirler.

Düz Metin Girişi (Plain Text Entry) : Düz metin kutusudur.

Kullanılış biçimi :

<input type=text value=değer maxlength=değer size=değer>

value : Metin kutusu içerisine varsayılan olarak değer atanmasını sağlar.

maxlength : Metin kutusu içerisine yazılabilecek karakter sayısını belirler.

size : Metin kutusunun görüntüdeki uzunluğunu belirler.

Örnek :

<html>
<head>
<title> Plain Text Entry </title>
</head>
<body>
<form name="bilgiler" method="GET">
Adınız :<input type="text" name="Ad"> <br>
Soyadınız :<input type="text" name="Soyad">
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek14.html olarak kaydedin ve bir browser da görüntüleyin.

Şifre Girişi (Password Entry) : Metin kutusu görünümündedir fakat bu alan içerisine bilgi girişi yapılırken yazılan karakterler asteriks * karakterine dönüşür. Adındanda anlaşılacağı gibi şifre alanlı formlarda kullanılır.

Kullanılış biçimi :

<input type=password maxlength=değer size=değer>

Parametreleri metin kutusundaki işlevleri aynen yerine getirir.

Örnek :

<html>
<head>
<title> Password </title>
</head>
<body>
<form name="bilgiler" method="GET">
Şifre :<input type="password" name="sifre" maxlength="4">
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek15.html olarak kaydedin ve bir browser da görüntüleyin.

Yazı Alanı (Text Area) : Bir açıklama yada mail içeriği gibi uzun metinleri yazmak için kullanılır. Fakat diğerlerinde olduğu gibi <input> tagıyla yazılmaz, onun yerine, <textarea> tagı kullanılır.

Kullanılış biçimi :

<textarea rows=değer cols=değer> Metin </textarea>

rows: Görüntülenecek karakter yüksekliğini belirler.

cols : Görüntülenecek karakter genişliğini belirler.

Örnek :

<html>
<head>
<title> Text Area </title>
</head>
<body>
<form name="bilgiler" method="GET">
Açıklama :
<textarea weight=50 height=10>Açıklama yazınız
</textarea>
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek16.html olarak kaydedin ve bir browser da görüntüleyin.

Seçim Kutusu (Select Box) : Görsel programlama dillerindeki combo box (açılır kutu) nesnesine karşılık gelir. Kullanıcıya önceden belirlenmiş birkaç değerden bir tanesini seçtirmek için kullanılır.

<select> </select> : Seçim kutusu yaratmak için kullanılır. <select> tagı tek başına kullanılmaz. Bu tagın içerisinde <option> tagı kullanılmaktadır.

<option> : <select> tagının içerisinde kullanılır ve görevi menü elemanlarını belirlemektir. </option> şeklinde kapatılmaz.

Kullanılış biçimi :

<select>
<option> Menü elemanı 1
<option selected> Menü elemanı 2
</select>

selected : Eğer <option> tagında selected parametresi kullanılmışsa ,form ekrana görüntülendiğinde, bu menü elemanının seçili (varsayılan) olarak görüntülenmesi anlamına gelir.

Örnek :

<html>
<head>
<title> Select Box </title>
</head>
<body>
<form name="bilgiler">
<select name="liste">
<option> Adana
<option selected> Adıyaman
<option> Afyon
<option> Ağrı
</select>
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek17.html olarak kaydedin ve bir browser da görüntüleyin.

Çoklu Seçim Kutusu (Multiple Select Box) : Seçim kutusuyla aynı işe yarar fakat tek farkı birden fazla seçenek işaretlenebilir.

Kullanılış biçimi :

<select size=değer multiple>
<option> Seçenek 1
<option selected> Seçenek 2
</select>

size : Aynı anda kaç seçeneğin ekranda gösterileceğini belirler.

multiple : Seçim kutusunda birden fazla seçeneğin işaretlenebilmesini sağlar.

Örnek :

<html>
<head>
<title> Select Box </title>
</head>
<body>
<form name="bilgiler">
<select name="liste" multiple>
<option> Adana
<option selected> Adıyaman
<option> Afyon
<option> Ağrı
</select>
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek18.html olarak kaydedin ve bir browser da görüntüleyin.

Onay Kutusu (Check Box) : Kullanıcıdan herhangi bir soru için onay istemek için kullanılır. Ekranda onaylanabilecek tek kutucuk görüntülenir.

Kullanılış biçimi :

<input type=checkbox> veya

<input type=checkbox checked>

checked : Form ekrana geldiğinde onay kutusunun işaretli olarak gelmesini sağlar.

Örnek :

<html>
<head>
<title> Check Box </title>
</head>
<body>
<form name="bilgiler">
<input type="checkbox" name="onay" checked> HTML biliyorum
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek19.html olarak kaydedin ve bir browser da görüntüleyin.

Seçenek Düğmesi (Radio Button) : Seçenek düğmesi seçenekler arasından sadece bir tanesinin seçilmesini sağlar.

Kullanılış biçimi :

<input type=radio> veya

<input type=radio checked>

checked : Form ekrana geldiğinde o seçeneğin işaretli olarak gelmesini sağlar.

Örnek :

<html>
<head>
<title> Radio </title>
</head>
<body>
<form name="bilgiler">
<input type="radio" name="onay" checked> Evli
<input type="radio" name="onay" > Bekar
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek20.html olarak kaydedin ve bir browser da görüntüleyin.

Komut Düğmesi (Button) : Yapılan formları doldurulduktan sonra karşı tarafa gönderebilmek için veya da içi doldurulmuş bir formu temizlemek için komut düğmeleri kullanılır.

Kullanılış biçimi :

<input type=submit value=değer> veya

<input type=reset value=değer>

submit : Form bilgilerinin karşı tarafa yollanmasını sağlar.

reset : Form bilgilerinin karşı tarafa yollanmadan temizlenmesini sağlar.

value : Komut düğmesinin ekranda görüntülenecek etiketini belirler.

Örnek :

<html>
<head>
<title> Butonlar </title>
</head>
<body>
<form name="bilgiler">
Form Gönderilsin mi ? <br>
<input type="Submit" value="Gönder">
<input type="Reset" value="Temizle" >
</form>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek21.html olarak kaydedin ve bir browser da görüntüleyin.

Tablolar (Tables)

Web sayfaları içerisine yazılar yazarken veya resimler yerleştirirken tablolardan yararlanılır. Eğer tablolar kullanılmazsa istenilen yere istenilen nesneyi yerleştirmek çok zordur. Bu yüzden web sayfalarının birçoğu tablolardan yararlanılarak oluşturulmuştur.

Tablolar Excel de olduğu gibi satır, sütun ve hücre kavramlarından oluşmaktadır.

<table> </table> : Bir tablo oluşturulmak istendiğinde kullanılır. Bundan sonraki satır ve sütun tagları <table> tagının içerisinde yer alır.

Kullanılış biçimi :

<table background=değer align=değer valign=değer border= değer bordercolor=değer> veya

<table bgcolor=değer align=değer valign=değer border=değer bordercolor= değer>

background : Tablonun arka planına yerleştirilecek resmi belirler.

align : Tablonun yatay konumunu belirler (Left, Center, Right).

valign : Tablonun dikey konumunu belirler. (Top, Middle, Bottom)

border : Tablonun kenar çizgi kalınlığını belirler.

bordercolor : Kenarlık rengini belirler.

cellspacing : İki hücre arasındaki boşluğu belirler.

cellpadding : Tablo ile hücre arasındaki boşluğu belirler.

width : Tablonun genişliğini belirler.

height : Tablonun yüksekliğini belirler.

Satır ve Sütun Tagları

<th> </th> : Bir tabloya başlık satırı yapmak için kullanılır.

<tr> </tr> : Bir tablo için ilk önce satırlar yaratılmalıdır . <tr> tagı yeni bir satır anlamına gelmektedir.

<td> </td> : Yeni bir sütun oluşturmak için kullanılır.<tr> tagı kapatılmadan kullanılan her <td> tagı yeni bir sütun anlamına gelmektedir.

Kullanılış biçimi :

<table>
<tr>
<td align=değer background=değer bgcolor=değer width= değer height=değer > Değer </td>
. .
. .
. .
. .
</tr>
. .
. .
. .
</table>

align : Sütun içerisindeki tagların yatay konumunu belirler.

background : Hücre içerisine yerleştirilecek resmi belirler.

bgcolor : Eğer resim kullanılmazsa hücrenin arka plan rengini belirler.

width : Hücrenin genişliğini belirler.

height : Hücrenin yüksekliğini belirler.

bordercolor : Kenarlık rengini belirler.

colspan : İstenirse bir hücre tekrar sütunlara ayrılabilir. Hücrenin kaç sütun olacağını belirler.

rowspan : İstenirse bir hücre tekrar sütunlara ayrılabilir. Hücrenin kaç satır olacağını belirler.

Örnek :

<html>
<head>
<title> Tablolar </title>
</head>
<body>
<table border="2">
<th>Adı</th>
<th>Soyadı</th>
<tr>
<td>Ali</td>
<td>Akın</td>
</tr>
<tr>
<td>Mesut</td>
<td>Yeşil</td>
</tr>
<tr>
<td>Cenk</td>
<td>Demir</td>
</tr>
<tr>
<td>Fuat</td>
<td>Soyalp</td>
</tr>
<table>
</body>
</html>

Yukarıdaki örneği çalışma dizininize ornek22.html olarak kaydedin ve bir browser da görüntüleyin.

Çerçeveler (Frameler)

Frameler web sayfasını birden fazla parçaya ayırmak ve her bir parçanın içerisine ayrı sayfalar açmak için kullanılır. Bu işlem sayfayı ziyaret eden kişilerin ziyareti kolaylaştırmak için kullanılabilir. Şöyle ki; Sayfanızı üç kısma ayırdığınızda parçalardan bir tanesini başlık, bir tanesini menü, bir tanesini de içerik için kullanabilirsiniz.

<frameset> </frameset> : <frameset> tagı <body> tagının yerine kullanılır ve body tagı Frame li bir sayfada kullanılmaz.

Kullanılış biçimi :

<frameset cols=değer rows=değer border=değer bordercolor= değer framespacing=değer>

cols : Sayfada kaç dikey çerçeve olacağı ölçü verilerek belirlenir. Ölçü verme işlemi için iki yöntem vardır.

1.cols=100,200,* : Burada sayfa üç sütuna ayrılmıştır. İlk sütun 100 piksel ikinci sütun 200 piksel ve üçüncü sütun sayfanı geride kalan boyutu kadar anlamına gelir.

2.cols=%20,%80 : Burada sayfa iki sütuna ayrılmıştır ilk sütun sayfa boyutunun %20 si, ikinci sütun ise sayfa boyutunun %80 i kadardır.

rows : Sayfada kaç yatay çerçeve olacağı ölçü verilerek belirlenir. Ölçü verme işlemleri cols parametresindeki ile aynıdır.

Bu ayarlamalardan sonra sayfadaki Framelerin içine html sayfaları yerleştirilir.

<frame> : Bu tag ile ölçüsü verilen Frame i oluşturur. Cols ve Rows ile belirlenen her ölçü için bir <frame> tagı kullanılmalıdır.

Kullanılış biçimi:

<frame src=değer name=değer scrolling=değer border=değer frameborder=değer bordercolor= değer noresize>

src : frame içerisine yüklenecek sayfa adını belirler.

name : frame e verilecek ismi belirler. Bağlantılar (link vermek) kısmında anlatılan target parametresine değer olarak burada kullandığımız ismi vererek bir link yaratırsak linkin sonucu o frame içerisinde açılır.

scrolling : Frame in kenarında kaydırma çubuklarının olup olmayacağını belirler. Yes, No, Auto değerlerini alır.

border : Kenarlık çizgisinin kalınlığını belirler.

frameborder : Çerçevenin kenarlığının olup olmayacağını belirler. Yes, No, Auto değerlerini alır.

bordercolor : Kenarlık rengini belirler.

noresize : Çerçevelerin boyutlandırılamaz olduğunu belirler.

Örnek :

<html>
<head>
<title> Çerçeveler </title>
</head>
<frameset cols="150,*">
<frame src="sol.html" name="_left">
<frameset rows="100,*">
<frame src="ust.html" name="_top">
<frame src="sag.html" name="_main">
</frameset>
</frameset>
</html>

Yukarıdaki örneği çalışma dizininize ornek23.html olarak kaydedin ve bir browser da görüntüleyin.

HTML Kaynakları

Web sayfalarının temeli olan HTML dili hakkındaki bilgilere yine İnternetten ulaşabilirsiniz. Birçok web sitesinde (Türkçe,İngilizce...) HTML ile ilgili ayrıntılı bilgilere arama motorları (search engines) aracılığıyla ulaşmak mümkündür.

HTML dilini öğrendikten sonra web tasarımını kolaylaştırıcı araçlar kullanarak daha kaliteli ve kolay tasarımlar gerçekleştirebilmeniz için bazı programlar mevcuttur. Bunlardan sıkça kullanılanlar :

· Microsoft Front Page (http://www.microsoft.com)

· Netscape Composer (http://www.netscape.com)

· Macromedia Dreamweaver (http://www.macromedia.com)

ÖNEMLİ

Sitemizden izinsiz veya kaynak belirtmeksizin içerik çalan kişiler hakkında gerekli işlemler yapılacaktır.

html dersleri 2

Link Takas

Kategoriler

Siteniz İçin Bilgiler

Temel Eğitim

Üyelere Özel

En Sonlar

bilgi1453

ÖNEMLİ Sitemizden izinsiz veya kaynak belirtmeksizin içerik çalan kişiler hakkında gerekli işlemler yapılacaktır.

html dersleri 2

Link Takas

Kategoriler

Siteniz İçin Bilgiler

Temel Eğitim

Üyelere Özel

En Sonlar

ÖNEMLİ

Sitemizden izinsiz veya kaynak belirtmeksizin içerik çalan kişiler hakkında gerekli işlemler yapılacaktır.