Scribd
Upload
6 views44 pages

Web HTML

Meü web tasarım

Uploaded by

canahmetanil
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views44 pages

Web HTML

Meü web tasarım

Uploaded by

canahmetanil
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

İçindekiler

[Link]’E GİRİŞ 1
1.1 İnternet Nedir? 1
1.2 HTML'in Çalışma Mantığı 2
1.3 HTML İle Ne Yapılabilir, Ne Yapılamaz 2
2- NE GEREKİR? 3
3- TEMEL KAVRAMLAR 4
3.1 Bazı Temel Kavramlar 4
3.2 Temel Etiketler 4
4- HTML BELGESİNİN YAPISI 5
4.1 İlk Sayfamız 5
4.2 Html Belgelerinin Genel Yapısı 5
5- METİN BİÇİMLENDİRME TAGLARI 6
5.1 Başlık Etiketleri 6
5.2 Diğerleri 6
6- <FONT> ETİKETİ 8
6.1 Renkler 8
6.2 <Font> Etiketi Ve Parametreleri 8
7- ARKAPLAN 10
7.1 Arkaplan ve <body> Etiketi 10
7.2 Yatay Çizgi 10
8- BAĞLANTILAR VE RESİMLER 12
8.1 Bağlantılar (link) 12
8.2 Resimler 12
9- LİSTELER 14
9.1 Sıralanmış Liste (Ordered Lıst) 14
9.2 Sıralanmamış Liste (Unordered Lıst) 14
9.3 Açıklama Listesi (Definition List) 15
10- TABLOLAR (TABLE) 16
10.1 <table> Etiketi Ve Parametreleri 16
10.2 <tr> ve <td> Etiketleri 17
10.3 Tablo Uygulamaları 18
11- ÇERÇEVELER (FRAME) 21
11.1 Çerçeve Tekniğinin Genel Mantığı 21
11.2 <frameset> ve <frame> Etiketleri 23
11.3 Frame Uygulamaları 24
12- FORMLAR 26
12.1 Form Türleri 26
12.2 <Form> Etiketi 28
12.3 Form Uygulaması 29
12.4 Örnek Uygulamalar 30
1- HTML'e GİRİŞ

HTML açılımı Hyper Text Markup Language olan, kullanıcılarına browserlar tarafından
görüntülenebilen web sayfaları tasarlama imkanını sunan bir programlama dilidir (Belki metin
biçimlendirme dili desek daha uygun olur). Fakat C/C++, Basic, Java gibi yüksek dereceli
programlama dillerine kıyasla öğrenmesi çok kolaydır, tabi yapabilecekleri de bir o kadar
kısıtlıdır. Tabi bu 'kısıtlı' lafına bakmayalım, iyi bir HTML temeli üzerine biraz JavaScript ve
tabi yaratıcılığımızı ekleyerek, internette görüp de kıskandığımız birçok sayfayı yapabilecek
hale gelebiliriz! Amacımız HTML öğrenmek olduğuna göre, ilk olarak HTML ile yapılan web
sayfalarının çalışma mantığına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacağımızı
öğrenelim:

1.1 İNTERNET NEDİR?

Internet, birçok bilgisayarın birbirine bağlanması sonucu oluşturulmuş bir bilgisayar ağıdır.
Evlerimizden internete bağlandığımız zaman bizim bağlantı kurduğumuz bilgisayar da internet
adlı büyük bilgisayar ağının bir parçası olur. Internetteki bilgiler Server(Sunucu) adı verilen
bilgisayarların harddiskinde saklanır.

İnternette tüm bilgisayarlar sunucu adı verilen bilgisayarlara bağlıdır. Sunucu bilgisayarlar da
birbirine bağlıdır, bu sayede sunucu makineler arasında bilgi transferi gerçekleştirilebilir. Bu
bilgi transferinin gerçekleşebilmesi için her bilgisayarın bir IP (Internet Protocol) numarası
olması gereklidir. Bu IP numarası sayesinde bilgisayarlar bilgiyi alacakları ve gönderecekleri
adresleri belirlerler. Bir IP numarası [Link] gibi birbirleriyle nokta ile ayrılmış dört adet
sayıdan oluşur. Internet üzerinde bulunan adresleri belirlemek için kullandığımız
[Link] gibi adresler bu IP numaralarının DNS sunucuları tarafından kullanıcıların
daha kolay akıllarında tutabilecekleri bir şeklinden başka bir şey değildir. Bilgisayarımız
internete bağlandığı zaman internet servis sağlayıcımız (ISS) bizim bilgisayarımıza geçici bir
IP numarası verir ve biz bağlantımızı kesip tekrar bağlandığımız zaman IP numaramız değişmiş
olur. İnternet üzerindeki bilgisayarların işletim sistemlerinin (Linux, MS-Windows, MacOS...)
ne olduğu önemli değildir.

Tüm bilgisayarlar internet üzerinde kendi aralarında TCP/IP adı verilen bir iletişim protokolü
ile bilgi transferini gerçekleştirirler. Adres olarak [Link] yazıldığı zaman, tr
(Türkiye) altındaki edu (eğitim kurumları ) altındaki mersin (Mersin Üniversitesi) altındaki
www (Internet sunucu) bilgisayarı içindeki giriş sayfası görüntülenir.

Bir ağ ortamında bilgisayar grubundan sadece bir makine(server) internete bağlı olmasına
rağmen ağdaki tüm bilgisayarlar internete bağlanabilmektedir. Birbirine bağlı bilgisayarlar,
internete bağlı ana bilgisayar sayesinde bilgi transferinde bulunabilir. Internet kafelerde
kullanılan bilgisayar ağları bu şekildedir.

Internetteki web sayfalarını görüntülemek için kullanılan yazılımlara Browser adı verilir.
Windows ortamında en çok kullanılan browser MS-Internet Explorer, Opera veya Netscape
Communicator’dur.
1.2 HTML'in ÇALIŞMA MANTIĞI

HTML dilinde yazdığınız kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın
sunucusuna (server) yüklersek (upload); Bu sunucu web sayfamızı internette yayınlar; Sitemize
gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayı görüntülemiş
olur. Kendi yazdığımız kodları kendi browserımızla açarak da sayfamızın nasıl göründüğünü
test edebiliriz. Bu mantığı konular ilerleyince daha iyi kavrayacağız.

1.3 HTML İLE NE YAPILABİLİR, NE YAPILAMAZ

HTML ile bir web sayfasında


Yapılabilecekler:
Metin Biçimlendirme (Renk,font,vs), listeler, bağlantılar(link), resim kullanımı, tablolar,
çerçeveler, formlar

Yapılamayacaklar:
Etkileşimli, olaylara duyarlı sayfalar; formları işleyip değerlendiren programlar.

Yapılamayacaklardan ilkini Javascript, ikincisini ASP, veya PHP kullanarak yapabiliriz.


Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web
tasarımı konusunda ilerlemek istiyorsak, HTML bilgimizin sağlam olması gereklidir!
2- NE GEREKİR?

Bir web sayfası yapmak için ne gerekir? Bu noktada iki seçeneğimiz var. Eğer web sayfamızı
hiçbir kod kullanmadan yazmak istiyorsak, Frontpage veya Dreamweaver gibi, bizi bu işten
kurtaracak yazılımlar kullanabiliriz. Kendi içlerinde başarılı sayılabilecek bu yazılımların
dezavantajı ise, yapabileceklerimizin programın bize sunduklarıyla sınırlı olmasıdır. Veya
oturup kendimiz kod yazmak/üretmek isteyebiliriz. O zaman ihtiyacımız olan şey sadece bir
düzyazı programı, mesela (Windows için) Notepad . Tabi yazdıklarımızı test etmek için bir
browser da fena olmaz, ama onu zaten her yerde bulabiliriz.

Opsiyonel olarak kod yazma işini kolaylaştıran, bize zaman kazandıran text tabanlı bazı
yazılımlar kullanabiliriz, mesela 'PHP Designer'. Bu tip programlar sadece kod yazma işlemini
kolaylaştırır, ancak yazma işlemini yine biz yaparız, dolayısıyla yapabileceklerimizi sınırlayan
tek şey [Link] de işlerin nasıl yürüdüğünü öğrenmek için önce Notepad ile
başlamamız faydalı olacaktır.

Notepad kullanırken, konulara ilişkin verilen örnekleri ve/veya kendi yazdığımız kodları '.htm'
veya '.html' uzantılı kaydedelim. Aksi takdirde browser'ımız bu dosyaları görüntülemez. PHP
Designer yazdıklarımızı zaten standart olarak bu uzantılarla kaydeder.

Üzücü bir durum,iki yaygın browser olan 'Microsoft Internet Explorer' ve 'Netscape
Navigator''ün html kodlarını yorumlamada farklılık göstermesidir. Piyasanın bu iki browser
arasında neredeyse eşit olarak bölünmüş olmasından dolayı, yazdığımız kodları her iki
browser'ın da aynı/benzer şekilde yorumlayacağı şekilde yazmaya özen göstermeliyiz. Sayfayı
tasarlarken belli aralıklarla Explorer ve Netscape ile görüntüleyip sonucu karşılaştırmak, bu
sorunu çözmek için iyi bir yöntemdir.

Son olarak; Browser'ımızın 4. veya daha ileriki bir sürüm olması tavsiye edilir, çünkü eski
sürüm browser'lar bazı özellikleri desteklememektedir.
3- TEMEL KAVRAMLAR

3.1 BAZI TEMEL KAVRAMLAR

Tag(Etiket): HTML belgelerine bir şey yerleştirmek ve/veya bir biçim belirtmek için
'Etiket' denen ifadeler kullanırız. Etiketler '<Etiketin Adı>' şeklinde yazılırlar. Bazı istisnalar
hariç açılan etiketlerin yeri gelince kapatılması gerekir; bu da '</Etiketin adı>' ifadesiyle
yapılır.

<center> : Metnin ortalanmasını sağlar ; <textarea> : Metin alanı oluşturur.

Parameter(Parametre): Parametreler etiketlerin değiştirilebilen özelliklerinin isimleridir.


<textarea rows="50">
Burada 'rows' ifadesi metin alanının yükseklik özelliğinin adıdır, bu özelliğin değeri
değiştirilebilir.

Value(Değer): Parametre tanımından da kolayca anlayabileceğimiz gibi, parametreler ile


değiştirdiğimiz sayılara(veya bazen keywordlere)değer adı verilir.
<textarea rows="50">
Burada '50' ifadesi metin alanının yüksekliğinin değeridir.

3.2 TEMEL ETİKETLER

Bu etiket browser'a HTML belgesinin başladığı ve bittiği yeri bildirir.


<html>...</html>
Bütün HTML kodları bu etiketin içinde yer almalıdır.
HTML belgesinin ilk bölümüdü[Link] bölümü ile ileride göreceğimiz
<head>...</head> CSS ve JavaScript kodları buraya yazılı[Link] bölüme yazılanlar metin
olarak ekranda görünmez.
Head bölümü içine yazılan Title bölümüne sayfanın başlığı yazılır,bu
<title>...</title>
başlık browser'ın sol üst bölümünde görüntülenir.
HTML belgesinin bütün içeriği burada yer alı[Link]
<body>...</body>
metinler,resimler,listeler... vb. her türlü HTML nesnesi yerleştirilebilir.

NOT: [Link]
4- HTML BELGESİNİN YAPISI

4.1 İLK SAYFAMIZ

İlk web sayfamızı yapacak kadar HTML öğrendik. İşte Merhaba dünya...
<html>
<head>
<title>Merhaba!</title>

<META content="text/html;" CHARSET="iso-8859-9 http-equiv=Content-Type">

</head>
<body>
Merhaba Dünya!
</body>
</html>

Yukarıda gördüğümüz kodu düzyazı programınızda yazıp [Link] adıyla kaydedip


çalıştırırsak ilk HTML sayfanızı yapmış oluruz. Burada 4. satırda gördüğümüz meta etiketi,
sayfamızda Türkçe karakterlerin görüntülenmesini sağlar. Diğerlerini zaten biliyoruz...

4.2 HTML BELGELERİNİN GENEL YAPISI

HTML belgeleri, ilk sayfamızdan da anlaşılabileceği gibi aşağıdaki şablon üzerine yazılır:

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

Eğer istersek bu şablonu istediğimiz bir adla .txt uzantılı olarak kaydedip, bundan sonra
yazacağımız örnekleri kaydettiğimiz bu dosyanın üzerine yazabiliriz; böylelikle her seferinde
fazladan birkaç kod yazmaktan kurtulmuş oluruz. Eğer sitemizde Türkçe karakter
kullanacaksak lütfen bu şablonun head bölümüne, 'Merhaba Dünya' örneğinin kodlarında 4.
satırda yer alan

<META content="text/html;" CHARSET="iso-8859-9 http-equiv=Content-Type">

satırını da ekleyelim...
HTML 5 de kullanım

<!DOCTYPE html>

<html lang="tr">
<meta charset="UTF-8">

Html 5 de sayfa yapısı

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Title here!</title>
</head>
<body>
Merhaba dünya
</body>
</html>

5- METİN BİÇİMLENDİRME TAGLARI

HTML'in temel unsurlarını öğrendikten sonra, artık işin inceliklerine geçebiliriz. İlk olarak yazdığımız
metinleri şekillendirmeyi öğreneceğiz. Aşağıdaki tablodaki etiketler, bize bu konuda geniş olanaklar
sağlayacak. Önce Başlık etiketleri:

5.1 BAŞLIK ETİKETLERİ

<h1>...</h1>
Başlık
<h2>...</h2> Başlık
<h3>...</h3>
Başlık
<h4>...</h4> Başlık
<h5>...</h5> Başlık

<h6>...</h6> Başlık
5.2 DİĞERLERİ

Örnek
<b>...</b> Yazılarınızı 'bold' yapar.
Yazı

Örnek
<i>...</i> Yazınızı italik karakterlerle yazar
Yazı

Örnek
<u>...</u> Altı çizgili yazar
Yazı

...
Paragraf etiketi,paragrafınızın altına ve
<p>...</p> Paragraf
üstüne boşluk koyar
...

satırbaşı yapar,bu etiketi kapatmak ...


<br>
gerekmez Satırbaşı

Şimdi bir örnek ile öğrendiklerimizi uygulayalım:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>MetinBiçimlendirmeörneği</title>
</head>
<body>

HTML size metin biçimlendirme konusunda geniş olanaklar sağlar; Metinlerinizi


ister <h1>kocaman</h1>,
ister <h6>küçücük</h6>,isterseniz <b>koyu</b>,<u>altyazılı</u>,veya
<i>eğik</i> yazabilirsiniz.
Yada satırbaşı yapabilir,<br>Veya<p>Paragraf oluşturabilirsiniz</p>

</body>
</head>
</html>
Metin biçimlendirmek için yukarıda gördüğümüz etiketlerin dışında <font>...</font> etiketi de kullanılır.

6- <FONT> ETİKETİ

Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,yazı tipi, boyut gibi
özelliklerini değiştirmemize olanak sağ[Link] etikete geçmeden önce HTML'de renklerden
kısaca bahsetmek yerinde olur.

6.1 RENKLER

HTML'de renkler hexadesimal formunda ifade [Link] renk 16'lık sayı düzeninde 6 rakamdan
oluşur ve Bu düzende 9'dan sonraki say1ıarı göstermek için 'A'dan 'F'ye kadar olan harfler
kullanılır. Bununla birlikte HTML bazı renklerin ingilizce isimlerini anlar; aşağıdaki örnekte
bu renkleri görmekteyiz.

AQUA BLACK BLUE FUCHSIA GRAY GREEN LIME


MAROON NAVY OLIVE PURPLE RED SILVER WHITE YELLOW

Burada görülen renkler hexadecimal cinsinden de ifade edilebilir: Örneğin #FFFFFF beyaz,
#000000 siyah , #C0C0C0 gri (tabloda 'silver') renklerini verir.

Renk Adı Kodu Renk Adı Kodu

Black (siyah) #000000 Fuchsia (mor) #FF00FF


Silver (gümüş) #c0c0c0 Green ([Link]şil) #008000
Gray (gri) #808080 Lime (yeşil) #00FF00
White (beyaz) #FFFFFF Oliver (Kahverengi) #808000
Maroon (K.Kırmızı) #800000 Yellow (sarı) #FFFF00
Red (kırmızı) #FF0000 Navy ([Link]) #000080
Purple ([Link]) #800080 Blue (mavi) #0000FF
Teal (K.Türkuaz) #008080 Aqua (türkuaz) #00FFFF

Dikkat edersek her renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan
oluşan bir bölüm geliyor. Bu altı basamak içinde “F” yada “f” bulunduğu basamaktaki rengin
tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak
için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı
yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani bayazı temsil eder.

6.2 <FONT> ETİKETİ VE PARAMETRELERİ

Renkleri kısaca tanıdıktan sonra artık asıl konumuza geçebiliriz. HTML belgesinin body
bölümüne yazdığımız metni <font></font> etiketleri arasına alarak bu metne etiketin aşağıdada
listelenen parametreleri doğrultusunda bazı özellikler kazandırabiliriz:

color hexadecimal veya 'rengin ingilizce ismi' değerini alır #000000,black


face Yazı türünün ismi değerini alır Times new roman,Arial
size 1 ile 7 arasında istenilen değeri alır +1,+5
Şimdi bu parametreleri bir örnekte kullanalım:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Fontkullanımı.</title>
</head>

<body>
Font etiketinin color parametresini kullanarak <font color="#FF0000">renkli</font>
<font color="Blue">yazılar</font> <font color="#00FF00">yazabilir</font>;<p>
değişik yazı karakterleri kullanabilirsiniz:<font face="Verdana">Mesela böyle!</font><p>
Hatta yazılarınızı <font size="+6"> büyütüp</font><font size="-1">
Küçültebilirsiniz</font>

</body>
</html>

Font etiketinin face parametresinin yazı tipi belirttiğini biliyoruz. Bu parametre ile
belirlediğimiz yazı tipi, ancak ziyaretçinin bilgisayarında da yüklü olması halinde
görüntülenebilir. Bu nedenle bu parametreye birkaç değer atamak, son değer olarak da
windows'un standart font'larından birini atamak, sayfalarımızın hiç istemediğimiz bir font'la
görüntülenmesini büyük ölçüde engeller.

<font face="impact,verdana,arial">...</font>

Bu kod browser'a önce impact, yoksa verdana, o da yoksa arial fontunu kullanmasını
bildirir.
7- ARKAPLAN

Artık metinler üzerinde biçim anlamında her türlü değişikliği yapabiliriz. Sayfa tasarımında en
az metinler kadar önemli bir unsur olan arkaplan üzerinde ne gibi değişiklikler
yapabileceğimizi bu bölümde öğreneceğiz. Ayrıca <body> etiketinin parametrelerini göreceğiz.

7.1 ARKAPLAN VE <body> ETİKETİ

HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün başladığını browser'a
<body> etiketiyle bildirdiğimizi biliyoruz. Bir etiketin herhangi bir parametresine atadığımız
değer, o etiketin oluşturduğu alan içerisinde geç[Link]:

<font color="blue">...</font>

ifadesi, sadece '...' ile gösterilen alan içerisine yazılanları 'mavi' yapar. Bu durumda tahmin
edebileceğimiz gibi <body> etiketinin parametrelerine verilen değerler, bütün sayfa için
geçerlidir. Aşağıda bu parametreleri ve kullanılışlarını görüyoruz.

Sayfanımın arkaplanının rengini


bgcolor <body bgcolor="blue">
belirler
<body
Arkaplana .gif,.jpg gibi HTML'in
background="c:\sayfam\[Link]">
background yorumlayabildiği bir resim dosyası
koymanızı sağlar
background="resimler\[Link]">
Sayfanızdaki metinlerin rengini
text <body text="#2354FF">
belirler
Sayfanızdaki bağlantıların
link tıklanmamış durumdaki rengini <body link="yellow">
belirler.
Sayfanızdaki bağlantıların tıklama
alink <body alink="red">>
işlemi süresince alacağı rengi belirler
Sayfanızdaki bağlantıların tıklama
vlink işleminden sonra alacağı rengi <body vlink="blue">>
belirler

Burada tabloda bütünlüğü bozmamak amacıyla verilen son üç parametre, ileride deyineceğimiz
link (bağlantı)larla ilgilidir, bu yüzden şimdilik bunları unutabiliriz.

NOT: 'Background' parametresini kullanırken, resmimizin yerini tam olarak yazmayı ve


sonuna uzantısını(.gif; .jpg vs.) koymayı unutmayalım!

7.2 YATAY ÇİZGİ

Başlığın hemen üzerinde bir örneğini gördüğümüz yatay çizgileri kullanarak sayfalarımızın
okunmasını kolaylaştırabiliriz.İşte buna olanak sağlayan <hr> etiketive parametreleri:
align Konum belirler;left,center,right değerlerini alabilir. <hr align="right">

size Çizginin piksel cinsinden kalınlığı <hr size="20" >

width Piksel cinsinden uzunluk <hr width="400">

color Çizginin rengini belirler <hr color="blue">

Üç bölümün sonunda artık metinlere ve arkaplanlara iyice hakim olduk.Aşağıdaki örnek ile
bilgilerimizi tekrar edelim:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Metin ve arkaplan uygulalaması</title>
</head>
<body bgcolor="green" link="red" vlink="yellow" alink="black">
<h1>Modern Futbol</h1><br><hr>
<p><font face="Verdana,hevletica" color="#FFFFFF">Günümüz modern futbolunun gereği
olan <b>3-5-2</b> sistemi, oynanması bir hayli zor bir sistemdir. Bu sistemde <i>orta alanın
iki ucundaki</i> oyunculara büyük iş düşer.</p>
<p>Modern futbolun başka bir gereği de alan savunması yapmaktır. Ancak tehlikeli
santraforlar için
önlem alma gereği, savunmaları bazen güç duruma düşürebilir.</p>
<a href="[Link] size faydalı bir link!</a>
</font>
</body>
</html>
8- BAĞLANTILAR VE RESİMLER

8.1 BAĞLANTILAR (LINK)

Web sayfalarında en çok kullanılan unsurlardan biri bağlantılardı[Link]ğlantılar ziyaretçinin bir


tıklama ile, sitenizin içinde veya dışında, belirlediğiniz herhangi bir adrese gitmesini sağlar.
Bağlantılar browser'a <a> etiketi ile bildirilir. İşte bu etiketin parametreleri:

href Bağlantının adresi bu parametreyle bildirilir Sayfa Adı

<a href="[Link] Adı</a>

Sayfanın açılacağı yeri [Link] parametresi,açılacak


sayfa yeni bir sayfa olarak açılacaksa'_blank',aynı pencere
içinde açılacaksa '_self',aynı pencerere içerisinde üstten
target Sayfa Adı
itibaren açılacaksa '_top' değerini alır. '_parent' ve
'ÇerçeveAdi' değerlerine çerçeveler konusunda
değineceğiz

<a href=[Link] target=”-blank">Sayfa adı></a>

'Href' parametresinin değeri [Link] gibi bir adres olabileceği gibi, örneğin [Link]
gibi bir dosya adı da olabilir. Böyle bir bağlantıya tıklandığın
da browser kullanıcıya bu dosyayı indirmek isteyip istemediğini sorar. Bu özelliği kullanarak
ziyaretçilerin sayfamızdan dosya indirmelerini sağlayabiliriz.

<a href="[Link] tıklayıp indirin!</a>

Burarya tıklayıp indirin!


8.2 RESİMLER

Resimler doğru ve yerinde kullanıldığında HTML belgelerine estetik açıdan çok şeyler
katabilirler; fakat büyük boyutları nedeniyle yavaş yüklenirler. Bu da ziyaretçinin sıkılmasına,
hatta sayfayı terk etmesine neden [Link] nedenle, en azından internet bağlantıları daha hızlı
oluncaya kadar, resimleri 'az ve öz' kullanmamız doğru olacaktır. Resimler <img> etiketi
aracılığıyla kullanılırlar. Aşağıda bu etiketin parametrelerini görüyoruz.

src Resmin bulunduğu dizini bu parametre ile bildiririz

<img src="[Link]">

width Resmin genişliğini piksel cinsinden bildirir

<img src="[Link]" width="100">

height Aynı şekilde resmin yüksekliğini bildirir.

<img src="[Link]" height="100">

border Resmin etrafındaki çizginin kalınlığını belirtir.

<img src="[Link]" border="6">

align Yatay konum belirler;left,right,center değerlerini alır.

<img src="[Link]" align="center">

alt Mouse resmin üzerindeyken yazacağınız meni gösterir

<img src="[Link] alt="Buraya açıklama yazın!">


Resim eklerken resmin bulunduğu yeri dikkatli bir şekilde belirtmeliyiz. Eğer “C:\........”
şeklinde belirtirsek sadece sizin bilgisayarınızda sayfa düzgün görüntülenir. Başka bir
bilgisayarda resim görüntülenmez. Çünkü belirttiğiniz dizn diğer bilgisayarda yoktur. Sadece
resim dosyasının adını yazarsak, html sayfa ve resim aynı yerde olmak zorundadır. Resim alt
dizinde olursa da adresi “/altdizin/[Link]” şeklinde olmalıdır.

Eğer html sayfa ve resim aynı dizinde olursa (c:\deneme\ ) gibi:

<img src="[Link]">

Eğer resim alt dizinde olursa (c:\deneme\img ) gibi:

<img src= img/[Link]">


9- LİSTELER

Buraya kadar metinler ile ilgili öğrendiklerimiz biçimlendirme üzerineydi. Fakat HTML'in
olanakları bununla sınırlı değil: İstenildiği takdirde HTML listeler ve tablolar aracılığıyla
metinleri 'düzenlemenize' de olanak verir. Bu araçlardan ilki olan listelerin sıralanmış liste,
sıralanmamış liste ve açıklama listesi olarak üç türü bulunur. Bu listelerin kullanılışını ve
farklarını aşağıdaki örneklere bakarak kolayca anlayabiliriz.

9.1 SIRALANMIŞ LİSTE (ORDERED LIST)

Sıralanmış listeler <ol>...</ol> etiketleri arasına yazılır, HTML bu etiketlerin arasına


yazdıklarımızı isteğimize bağlı olarak rakam veya harfler kullanarak sıralar. Bu isteğimizi <ol>
etiketinin type parametresiyle belirleriz. Bu prametre sıralanmış listelerde 'a', 'A', 'i', '1'
değerlerini alabilir. <ol> etiketi ile oluşturduğumuz listenin her elemanının başına <li> etiketini
koyarız. Bu etiket ingilizce 'liste elemanı' anlamına gelen 'list item' kelimesinin kısaltılmışıdır.

<ol>
<li>CD ROM
1. CD ROM
<ol type="i">
i. 30X
<li>30X
ii. 40X
<li>40X
iii. 50X
<li>50X
2. DVD
</ol>
<li> DVD
a. 4X
<ol type="a">
<li>4X
b. 8X
<li>8X
<li>12X
c. 12X
</ol>
</ol>

9.2 SIRALANMAMIŞ LİSTE (UNORDERED LIST)

Sıralanmamış listeler <ul>...</ul> etiketleri arasına yerleştirilir. Liste elemanları çember


(circle), daire (disc) veya kare (square)'ler ile sıralanır.

<ul>
 CD ROM <li>CD ROM
 Read only <ul type="square">
o 30X <li>Read only
o 40X <ul type="circle">
o 50X <li>30X
 Writer <li>40X
o 8X <li>50X</li>
o 10x </ul>
o 12X <li>Writer
<ul type="circle">
<li>8X
<li>10x
<li>12X</li>
</ul>
</li>
</ul>
</li>
</ul>

9.3 AÇIKLAMA LİSTESİ (DEFINITION LIST)

Açıklama listeleri <dl>...</dl> etiketleri içinde yer alır. Bu çeşit listelerde <li> etiketinin yerini
<dd> ve <dt> etiketleri alır. Aşağıdaki örneğe bakarak bu etiketlerin kullanımını kolaylıkla
anlayabiliriz.

CD ROM

Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok kişi
tarafından kullanılıyor.

DVD ROM

Bu yeni teknoloji CD'lere göre çok daha fazla boş alan sunuyor.

<dl>
<dt>CD ROM
<dd>Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok
kişi tarafından kullanılıyor.
<dt>DVD ROM
<dd>Bu yeni teknoloji CD'lere göre çok daha fazla
boş alan sunuyor.</dd>
</dl>
10- TABLOLAR(TABLE)

Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız


sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için
tablolara hakim olmak gereklidir.

Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu
yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür. Aşağıdaki örneğe bakarak tablo
mantığını anlayabilirsiniz.

<table border="1">

<tr>

<td >Hücre1</td>
<td >Hücre2</td>
<td >Hücre3</td>
Hücre1 Hücre2 Hücre3
Hücre4 Hücre5 Hücre6 </tr>
<tr>
<td>Hücre4</td>
<td>Hücre5</td>
<td>Hücre6</td>
</tr>

</table>

10.1 <TABLE> ETİKETİ VE PARAMETRELERİ

Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...

<table
bgcolor=”green”>
Hücre
Tablonun içinin <tr>
bgcolor
rengini belirler. <td>Hücre</td>
</tr>
</table>
<table
background="[Link]">
Hücre
Tablo içine <tr>
background
resim koyar. <td>Hücre</td>
</tr>
</table>
Tablo etrafına <table border="5">
yerleştireceğiniz <tr> Hücre
border çerçevenin <td>Hücre</td>
kalınlığını </tr>
belirler </table>
<table border="5"
bordercolor="teal">
Hücre
Çerçeve rengini <tr>
bordercolor
belirler <td>Hücre</td>
</tr>
</table>
<table border="5"
Çerçevenin sol bordercolorlight="aqua">
Hücre
ve üst <tr>
bordercolorlight
kenarlarının <td>Hücre</td>
rengini belirler </tr>
</table>
<table border="5"
Çerçevenin sağ bordercolordark="blue">
Hücre
ve alt <tr>
bordercolordark
kenarlarının <td>Hücre</td>
rengini belirler. </tr>
</table>
<table align="right">
<tr> Hücre
Tablonun yatay
align <td>Hücre</td>
konumu belirler
</tr>
</table>
Tablo <table border="1"
etrafındaki cellspacing="10">
Hücre
çerçevenin <tr>
cellspacing
tablodan <td>Hücre</td>
uzaklığını </tr>
belirler. </table>
Tablo içindeki <table border="1"
elemanların cellpadding="10">
Hücre
(metin, resim, <tr>
cellpadding
vs.) çerçeveden <td>Hücre</td>
uzaklığını </tr>
belirler. </table>
10.2 <TR> ve <TD> ETİKETLERİ

<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform
oluş[Link]ısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki
bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.

<table>
<tr>
Hücre
<td bgcolor="teal">
bgcolor
Hücre</td>
</tr>
</table>
<table>
<tr>
Hücre
<td background="[Link]">
background
Hücre</td>
</tr>
</table>
<table border="1" width="100" height= "100">
<tr>
Hücre
<td align="right">
align
Hücre</td>
</tr>
</table>
<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
valign Hücre
Hücre</td>
</tr>
</table>
<table border="1">
<tr>
Hücre
<td bordercolor="blue">
bordercolor
Hücre</td>
</tr>
</table>

<table border="1"> 1 2 3
<tr>
<td>1</td><td>2</td><td>3</td> 4 5
</tr>
colspan <tr><td colspan="2">4</td><td>5</td> 6 7 8
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>
<table border= "1">
<tr> 1 2 3
<td>1</td><td>2</td><td>3</td>
</tr> 4 5 6
rowspan <tr><td >4</td><td rowspan="2">5</td><td>6</td>
</tr> 7 8
<tr><td>7</td><td>8</td>
</tr>
</table>

Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için
kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey
eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler
üzerinde gördük.
10.3 TABLO UYGULAMALARI

Bu uygulamaları önce kendimiz yapmaya çalışalım, eğer takılırsak kodlarından faydalanalım.

Uygulama
Tablo uygulaması

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo Kullanımı.</title>
</head>

<body>

<table>
<tr>
<td>Uygulama</td>
</tr>
<tr>
<td>tablo uygulaması</td>
</tr>
</table>

</body>

</html>
Şimdi de bunu deneyelim.

Uygulama

Tablo uygulaması

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo Kullanımı.</title>
</head>

<body>

<table>
<tr>
<td width="300" bgcolor="green" align="center">Uygulama</td>
</tr>
<tr>
<td height="200" bgcolor="silver" align="center">tablo uygulaması</td>
</tr>
</table>

</body>

</html>
Hosting

[Link]çenek 20 Mb 100$/yıl

[Link]çenek 50 Mb 150$/yıl

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo Kullanımı.</title>
</head>

<body>

<table cellpadding="10" border=1>


<tr>
<td colspan="3" align="middle" bgcolor="red" >Hosting</td>

</tr>
<tr>
<td bgcolor="teal">[Link]çenek</td>
<td align="middle">20 Mb</td>
<td align="middle">100$/yıl </td>
</tr>
<tr>
<td bgcolor="teal">[Link]çenek</td>
<td align="middle">50 Mb</td>
<td align="middle"> 150$/yıl</td>
</tr>
</table>

</body>

</html>
SÜRÜCÜ CİNSİ HIZ
CD-ROM 30X 40X 50X 60X Cd-Dvd rom'lar
DVD 10X 12X

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo Kullanımı.</title>
</head>

<body>

<table BORDER="1" bgcolor="silver" bordercolor="black">


<tr>
<td bgcolor="red">SÜRÜCÜ CİNSİ</td>
<td bgcolor="red" colspan="4" align="center">HIZ</td>
<td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
<td>CD-ROM</td>
<td>30X</td>
<td>40X</td>
<td>50X</td>
<td>60X</td>
</tr>
<tr>
<td>DVD</td>

<td colspan="2">10X</td>
<td colspan="2">12X</td>

</tr>
</table>

</body>

</html>
11- ÇERÇEVELER (FRAME)

Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa
birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst
kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer
büyük alana ise sayfanın asıl içeriğini yerleştirmektir.

Fakat şunu da belirtmekte fayda var, birçok tasarımcı estetik açısından çerçevelere pek sıcak bakmaz;
genelde üst üste tablolar kullanmayı tercih eder.

Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı browser'lar, çerçeveleri tanımazlar!

11.1 ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI

Çerçeve tekniğinde, ilk önce parent(ana) frame denilen bir sayfa oluşturmak gerekir. <Frameset>...
</frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı dikey ve yatay olarak ne
oranda bölmek istediğimizi browser'a bildiririz. Src parametresi ile ana çerçevenin bölümlerinde
görüntülenecek sayfaların adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdiğimiz
sayfaları uygun bir şekilde hazırlamak kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha
iyi anlayalım, sonra da <frameset> etiketini inceleyelim.

Önce ana pencereyi hazırlayalım:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Çerçeveörneği</title>
</head>
<frameset cols="150,*">
<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Burada yaptığımız şey ana sayfayı soldan 150 piksel genişliğinde bölüp iki sayfa elde etmekten
ibaret. Ayrıca browser'a soldan ilk bölüme (150 px olan bölüm) '[Link]', ikinci bölüme ise
'[Link]' sayfalarını yerleştirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset>
etiketinin </head> ile <body> etiketleri arasına yerleştirilmesidir. <Noframes>...</noframes>
etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. Şimdi
aşağıdaki kodlardan ilkini '[Link]', ikincisini ise '[Link]' adıyla ana pencereyi kaydettiğimiz
dizine kaydedelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>menu</title>
</head>
<body bgcolor="teal">
</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>

<body bgcolor="Red"></body>

</body>
</html>

Son olarak tekrar ana sayfayı açtığımızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde
bulunsun!) sonuç böyle olacaktır:

Artık çerçevelerin mantığını anladığımıza göre bu tekniğin detaylarını inceleyelim...


11.2 <FRAMESET> ve <FRAME> ETİKETLERİ

Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :

rows Safayı enine bölmenizi sağlar

<frameset rows="150,*">
<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>

Sayfayı boyuna bölmenizi


cols
sağlar

<frameset cols="150,*">
<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>

cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler,
örneğin:
<frameset cols="%20,%80">

Daha önce kullandığımız '*' ifadesi ile bölünecek alanın genişliğini browser'a bırakabiliriz:
<frameset cols="%20,*">

Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:


<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz.

Ana sayfanın bölümleri


arasında sınır çizgisi olup
frameborder olmamasısını belirler.('yes',
'no'; veya '1', '0' değerlerini
alır)
<frameset cols="150,*" frameborder="1">
<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>

Çerçeveler arasındaki sınırın


border kalınlığını piksel cinsinden
belirler.

<frameset cols="150,*" border="10">


<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>

Şimdi de <frame>; etiketinin parametrelerini görelim:

src Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri

marginwidth Sayfanın solundaki kenar boşluğunu belirtir

marginheight Sayfanın üstündeki kenar boşluğunu belirtir

noresize '1' veya '0' değerlerini alır, '1' verilirse pencere boyutları sabitlenir.

scrolling 'yes', 'no', 'auto' değerlerini alır, kaydırma çubuklarının durumunu belirler.
11.3 FRAME UYGULAMALARI

Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir:

<frameset rows="150,*" cols="150,*" >


<frame name="kirmizi" src="[Link]">
<frame name="yesil" src="[Link]">
<frame name="sari" src="[Link]">
<frame name="siyah" src="[Link]">
</frameset>

<frameset rows="150,*">
<frame name="kirmizi" src="[Link]">
<frameset cols="30%,*">
<frame name="yesil" src="[Link]">
<frame name="sari" src="[Link]">
</frameset>

<frameset rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="[Link]">
<frame name="yesil" src="[Link]">
</frameset>
<frame name="sari" src="[Link]">
</frameset>

<frameset cols="150,*">
<frameset rows="*,*,*">
<frame name="yesil" src="[Link]">
<frame name="kirmizi" src="[Link]">
<frame name="sari" src="[Link]">
</frameset>
<frame name="siyah" src="[Link]">
</frameset>

Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:


<a> etiketinin target isimli bir parametresi vardır ve bu parametre 'Çerçeveadı' değerini alabilir. Bu
parametre bize bağlantının belirttiği adresteki sayfanın adını verdiğimiz çerçeve içinde açılmasını
sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:

'İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak
sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin.

İşte aşağıdaki kod bunu sağlar:

<a href=”[Link]” target="sari">Bu link sari bölümde görüntülenecek!</a>


Çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar.

Şimdi bir örnek yapalım:

Ana sayfamız:

<!DOCTYPE html>
<html lang="tr">
<head>

<meta charset="UTF-8">
<title>Çerçeveörneği</title>
</head>
<frameset cols="150,*">
<frame name="menu" src="[Link]">
<frame name="esas" src="[Link]">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Menu safamız:

<!DOCTYPE html>
<html lang="tr">
<head>

<meta charset="UTF-8">
<title>menu</title>
</head>
<body>

<a href="[Link]" target="esas"> sayfa1 </a>

<br>

<a href="[Link]" target="esas"> sayfa1 </a>


</body>
</html>
F1 sayfası:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>

<body bgcolor="Red"></body>

</body>
</html>

F2 sayfası:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>

<body bgcolor="blue"></body>

</body>
</html>

Bu sayfaları kaydettiğimizde soldaki menüdeki linklere tıkladığımızda f1 ve f2 sayfaları


sağdaki çerçevede görünecektir.
12- FORMLAR

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır,
HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla
ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla
ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına
yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir bakalım.

12.1 FORM TÜRLERİ

Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

maxlength: Yazılabilecek maksimum text uzunluğu


text value: varsayılan değer Isminiz?
size: Px cinsinden alanın uzunluğu

<form>
<input type="text" maxlength="10" size="12" value="İsminiz?"
</form>

<input type="text">
Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.

Lütfen şifre girin:


password Tüm parametrleri text ile aynıdır.

<form>
Lütfen şifre girin:<br>
<input type="password" maxlength="10" size="12">
</form

<input type="password">
Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir
rows : Alanın karakter cinsinden yüksekliği Burasi bir tex
textaraea
cols : Alanın genişliği

<form>
<textarea cols="12" rows="4">Burası bir textarea!</textarea>
</form>

<textarea >...</textarea>
Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini
almak için kullanılır.

checked: sayfa açıldığında 'checked' ibaresi bulunan seçenek1


checkbox
kutu işaretli olur.
seçenek2

<form>
<input type="checkbox" checked>seçenek 1
<input type="checkbox">seçenek 2
</form>

<input type="checkbox>
Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.

seçenek1
checked: sayfa açıldığında 'checked' ibaresi
radio seçenek2
bulunan daire seçilmiş olur.
seçenek2

<form>
<input type="radio" name=sec">seçenek1<br>
<input type="radio" name= "sec"checked>seçenek2<br>
<input type="radio" name="sec">seçenek2
</form>

<input type="radio">
Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.
size: Select etiketinin karakter cinsinden boyutu
selected: Görevi checked ifadesinin aynıdır.
select
multiple: Ziyaretçinin birden çok seçim yapmasına
olanak verir

<form>
<select size= "1">
<option selected>seçenek1
<option>seçenek2
<option>seçenek3
</select>

<select><option>...<option>...</select>
Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.

<select name=”os_type” size=”1”>


<option value=”win”>Windows 9x</option>
<option value=”winnt”>Windows NT</option>
<option value=”linux”>Linux</option>
<option value=”unix”>UNIX</option>
<option value=”os2”>OS/2</option>
<option value=”macos”>MacOS</option>

</select>

submit value: Butonun üzerine yazılacak metin buraya yazılır Gönder

<form>
<input type="submit" value="Gönder">
</form>

<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir

reset value: Butonun üzerindeki metin Sil

<form>
<input type="reset" value="Sil">
</form>

<input type="reset" >


Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.
button value: Butonun üzerine yazılacak metin Gönder

<form>
<input type="button" value="Düğme">
</form>

<input type="button>
Düğmelere JavaScript ile bazı işlevler kazandırılabilir.

Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de
kullanılabilir.

12.2 <FORM> ETİKETİ

İşte <form> etiketinin parametreleri ve bunların işlevleri:

'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu


göndereceğimiz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı
method bilmiyorsak, birçok servis sağlayıcı size form'larımızın sonuçlarını e-mail'inize
gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksak 'post' metodunu
seçmeliyiz.

<form method= "post">

action Formu göndereceğimiz program dosyasının adını action parametresiyle bildiririz.

<form method="post" action= "[Link]">


12.3 FORM UYGULAMASI

Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceğiz. Bu örneği önce parça parça
yapmaya çalışalım, gerektiğinde aşağıda verilen kodlardan yararlanabiliriz...

Bu siteye not verin!


Buraya yazin!
Kullanıcı ismi
Parola
Cinsiyet E K
Bildiğiniz Uygulamalar

Sitenin içeriği

5, Çok zengin!
4, Fazlasıyla yeterli
3, Yeterli
2, Yetersiz
1, Çok kısıtlı
Sitenin tasarımı

gönder sil

<form name="anket">
<p><h3>Bu siteye not verin!</h3></p>

<p><b>Kullanıcı ismi</b> <input value="Buraya yazın!"></p>


<p><b>Parola</b> <input type="password" maxlength="10"></p>
<p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">

<p>Bildiğiniz Uygulamalar</p>
<p><select size="4" multiple>
<option>HTML
<option>JavaScript
<option>Css
<option>Asp
</select></p><br><br>

<p><b>Sitenin içeriği</b></p>
<p><input type="radio" name="not" value="5">5, Çok zengin!<br>
<input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
<input type="radio" name="not" value="3" checked>3, Yeterli<br>
<input type="radio" name="not" value="2">2, Yetersiz<br>
<input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>

<p><b>Sitenin tasarımı</b></p>
<p><select>
<option selected>Harika!
<option>Oldukça iyi
<option>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>

<p><input type="submit" value="gönder"><input type="reset" value="sil"


</form>

HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi
sayfalar yapabilmek için yeterli olmaz. Artık internet'te yer alan sayfaların hemen hepsinde
JavaScript kullanılmaktadır.
12.4 ÖRNEK UYGULAMALAR

Bu form herhangi bir PHP yada benzeri bir dosyaya bilgi göndermediği için “ Kayıt “ tuşuna
basılınca hata ile karşılaşılacaktır. Bu formu hazırlamaktaki amacım, sadece form oluşturma
konusunda bir örnek vermektir. HTML kodlarını nerede ve nasıl kullanıldığına dikkat edin.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Formum</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<center>
<br><br>

<fieldset>
<legend>Üyelik Formu</legend>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="400">
<tr><td colspan="2"><br></td></tr>
<tr><td size="70">

<form method="post" action="[Link]" >

<b>Adınız</b></td><td><input type="text" name="ad" size="24"></td></tr>


<tr><td size="70"><b>Soyadınız</b></td><td><input type="text" name="soyad"
size="24"></td></tr>
<tr><td size="70"><b>e-posta Adresiniz</b></td><td><input type="text" name="email"
size="24"></td></tr>
<tr><td size="70"><b>Doğum Tarihiniz</b></td>
<td><select name="d_gun" size="1">
<option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
<option value="7">7</option><option value="8">8</option><option value="9">9</option>
<option value="10">10</option><option value="11">11</option><option
value="12">12</option>
<option value="13">13</option><option value="14">14</option><option
value="15">15</option>
<option value="16">16</option><option value="17">17</option><option
value="18">18</option>
<option value="19">19</option><option value="20">20</option><option
value="21">21</option>
<option value="22">22</option><option value="23">23</option><option
value="24">24</option>
<option value="25">25</option><option value="26">26</option><option
value="27">27</option>
<option value="28">28</option><option value="29">29</option><option
value="30">30</option>

<option value="31">31</option></select>
<select name="d_ay" size="1">
<option value="ocak">Ocak</option><option value="subat">Şubat</option>
<option value="mart">Mart</option><option value="nisan">Nisan</option>
<option value="mayıs">Mayıs</option><option value="haziran">Haziran</option>
<option value="temmuz">Temmuz</option><option value="agustos">Agustos</option>
<option value="eylul">Eylül</option><option value="ekim">Ekim</option>
<option value="kasım">Kasım</option><option value="aralık">Aralık</option></select>

<input type="text" name="d_yil" size="1"></td>


<tr><td colspan="2"><br></td></tr>
<tr><td size="70"><b>Kullanıcı Adınız</b></td><td><input type="text" name="uid"
size="24"></td></tr>
<tr><td size="70"><b>Şifreniz</b></td><td><input type="password" name="pass1"
size="24"></td></tr>
<tr><td size="70"><b>Şifreniz</b></td><td><input type="password" name="pass2"
size="24"></td></tr>
<tr><td colspan="2"><br></td></tr>
<tr><td colspan="2"><li>Daha önce PHP kullandınız mı?</td></tr>
<tr><td colspan="2"><input type="radio" name="php" value="e">Evet &nbsp &nbsp

<input type="radio" name="php" value="h"> Hayır</td></tr>


<tr><td colspan="2"><li>Daha önce MySQL kullandınız mı?</td></tr>
<tr><td colspan="2"><input type="radio" name="sql" value="e">Evet &nbsp &nbsp
<input type="radio" name="sql" value="h"> Hayır</td></tr>
<tr><td colspan="2">
<center><br>

<input type=submit value=" Kayıt "> &nbsp &nbsp &nbsp <input type="reset" value="
Vazgeç ">

</form>
</td></tr></table>
</body>
</html>

Sürekli aynı kodun kullanıldığı durumlarda (option tagında olduğu gibi) kopyala yapıştır işlemi
işinizi bayağı kolaylaştıracaktır.
Bazı Yeni Form Elemanları (HTML5)

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>

<p>Bazı yeni form elemaları </p>

<form>
<input type="date" name="date"> Tarih Seçimi
<br><br>
<input type="number" min="0" max="100" step="5" name="number"> Numara Seçimi
<br><br>
<input type="month" name="month"> Ay Seçimi
<br><br>
<input type="range" min="0" max="100" step="1" value="15" name="range"> Değer seçimi
</form>

</body>
</html>
Sayfaya Ses ve Video Eklemek için Örnek Kodlar

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>müzik</title>
</head>
<body>

<p>Ela Gözlüm </p>


<audio controls>
<source src="elagozlum.mp3" type="audio/mp3">
</audio>

</body>
</html>

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>film</title>
</head>
<body>

<p>Video adı </p>


<video width="640" height="480" controls="controls">
<source src="dene.mp4" type="video/mp4" />
</video>

</body>
</html>
Örnek Frame Sayfası – Butonlu Menü

Frame kullanarak bir sayfa oluşturmak için elimizde en az üç tane HTML dosyası olmalıdır. Bu
örnekte altı tane HTML dosyası kullanılmıştır. Kullanılacak sayfaların içerikleri boş olacak, sadece
sayfa görüntülendiğinde sayfa için tanımlayıcı bir bilgi içerecek.

<! --- Bu dosyayı [Link] diye kaydedin --- >


<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>
<body bgcolor="Red"></body>
</body>
</html>

<! --- Bu dosyayı [Link] diye kaydedin --- >


<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>
<body bgcolor="green"></body>
</body>
</html>

<! --- Bu dosyayı [Link] diye kaydedin --- >


<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>esas</title>
</head>
<body bgcolor="blue"></body>
</body>
</html>

Yukarıdaki üç HTML dosyası bizim sitemizin içeriğini oluşturacak sayfalar olacak.

Şimdi sıra [Link] ve framelerin asıl bileşenlerini oluşturacak sayfaları yapmada.


<! --- Bu dosyayı [Link] diye kaydedin --- >
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>menu</title>
</head>
<body >
<form>
<br><br><br><br>
<input type="submit" value="MENÜ1" formaction="[Link]" formtarget="esas"><br><br>
<input type="submit" value="MENÜ2" formaction="[Link]" formtarget="esas" ><br><br>
<input type='submit' value='MENÜ3' formaction='[Link]' formtarget='esas'>
</form>
</body>
</html>

<! --- Bu dosyayı [Link] diye kaydedin --- >


<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Çerçeve örneği</title>
</head>
<frameset cols="150,*" >
<frame name="menu" src="[Link]">
<frame name="esas" src="">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

<noframes> tagı bize, kullanılan browserın frame desteği olmadığı zaman görüntülenecek sayfayı
belirtmemizi sağlar. <frame> tagı sayfada kullanılacak frameleri belirlemede kullanılır.

Son olarak cols=”150,*” gibi bir ifade dikkatinizi çekmiştir. Bu kod bize <frame> tagı ile tanımlı
sayfalardan ilkinin [Link] sayfasında yatayda (cols) 150 piksellik bir alan kaplayacağını ve geri
kalan kısmının da (*) tümünün belirtilen diğer sayfaya ait olduğunu belirtir. Eğer sayfalarımızı yan
yana değil de alt alta yerleştirmek isteseydik rows=”değer,değer” gibi bir ifade kullanmamız
gerekecekti.

You might also like