Anasayfa
- Kod:
Web Siteniz İçin Sürekli Sorun yasadıgınız Html Kodunu arşivimden veriyorum.
--------------------------------------------------------------------------------------------------
HTML'ye Giriş
Basit HTML Etiketleri
Metinler
Linkler
Resim Ekleme
Listeler
Tablolar
Formlar
HTML'YE GİRİŞ
HTML,
HyperText Markup Language, tarayıcı (browser)'lardan görebileceğimiz
(Internet Explorer, Netscape gibi) internet dokümanlarını yaratmaya
yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların
kaynağı HTML'dir. Tarayıcı olmadan HTML kodları birşey ifade etmez.
HTML
dokü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 Frontpage, Dreamweaver,
Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran
programlar da vardır.
Her HTML dokümanı <HTML> ile
başlar ve </HTML> ile biter. <> şeklinde görülen komutlara
etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan
oluşmaktadır:<head> . . . </head> etiketi arasında yer alan
Başlık bölümü; <body> . . . </body> etiketleri arasında yer
alan Gövde Bölümü. Başlık bölümü içine <title>. . .
</title> etiketi konulur. title, tarayıcımızın en üstünde gözükür
ve oluşturulan sayfanın başlığıdır.
Örnek:
[img]http://www.bidb.odtu.edu.tr/filesTR/ig/img_html_hello.gif[/img]
Eğer
hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, ,
ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta
etiketi eklenir. Meta etiketleri için detaylı bilgiye buradan
ulaşabilirsiniz.
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
title
etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana
kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün
bilgileri Gövde kısmına koyarız.
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 seçeneğini seçeriz.
Bir etiketin
nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki
metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki
bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket
isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul
eder.
<body bgcolor="yellow">
Çift taraflı
etiketler içiçe geçebilirler ama dikkat edilmesi gereken nokta en son
açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru
uyguluma örneği verilmiştir.
<b><i>Bu bir yanlış örnektir. </b></i>
<b><i>Doğrusu budur. </i></b>
<br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.
--------------------------------------------------------------------------------------------------
BASİT HTML ETİKETLERİ
Başlıklar:
6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır.
HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<h1>H1 ile yapılan başlık</h1>
<h2>H2 ile yapılan başlık</h2>
<h3>H3 ile yapılan başlık</h3>
<h4>H4 ile yapılan başlık</h4>
<h5>H5 ile yapılan başlık</h5>
<h6>H6 ile yapılan başlık</h6>
H1 ile yapılan başlık
H2 ile yapılan başlık
H3 ile yapılan başlık
H4 ile yapılan başlık
H5 ile yapılan başlık
H6 ile yapılan başlık
Paragraflar, Satır boşlukları ve Yatay Çizgiler:
Paragraflar <p> etiketiyle oluşturulur. Paragraf metni <p> ile </p> arasında yer alır. Örneğin:
<p>Bu bir paragraftır. </p>
Paragraf başlatmadan bir satır boşluğu yaratmak için <br/> etiketi kullanılır. Örneğin:
<p>Paragrafın ilk satırı. <br />Paragrafın ikinci satırı. </p>
Sayfaya (aşağıdaki gibi) yatay çizgi eklemek için <hr> etiketini kullanırız.
--------------------------------------------------------------------------------
HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<p>Birinci paragraf</p>
<p>İkinci paragraf </p>
<p>Üçüncü paragraf
<br />Alt satır </p>
<hr />
Birinci paragraf
Ikinci paragraf
Üçüncü paragraf
Alt Satır
--------------------------------------------------------------------------------
METİNLER
<font color="red" face="arial" size="3">. . </font>
Color
yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma
gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam
1'den 7'ye kadardır.
<font> etiketi HTML 4. 0 'da
desteklenmemektedir ama yine de taracıyıcılar <font> etiketi ile
yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında
<font> etiketi kullanılmaktadır. Başlangıç seviyesi için
<font> etiketi kullanmak yeterliyken ilerki seviyeler için
stilleri kullanmanız tavsiye edilir.
Font etiketi ile birlikte aşağıdaki tabloda verilen etiketleri kullanarak sayfanızdaki metinleri biçimlendirebilirsiniz.
[img]http://site.mynet.com/fahri_can/sddsdsds.png[/img]
Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.
Renkler :
HTML dokümanlarında renkler ya İngilizce isimleriyle, ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir.
En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk aşağıdakilerdir:
[img]http://site.mynet.com/fahri_can/asddd.png[/img]
Örnek :
<body bgcolor="green">
Bu örnekte sayfanın arkaplan rengi yeşil olur.
<body bgcolor="#008000"> aynı sonucu verir.
Örnek :
<font color="#4B0082"> Font rengi "indigo" oldu. </font> Etiketi kapattığımız için tekrar normale döndü.
<<<Html Dersi<<<
AsiRuH- yönetici
mesaj sayısı : 9861
Yaş : 36
İş/meslek : xxxxx
Kayıt tarihi : 27/09/08
AsiRuH- yönetici
mesaj sayısı : 9861
Yaş : 36
İş/meslek : xxxxx
Kayıt tarihi : 27/09/08
- Kod:
LİNKLER:
Linkler <a>. . . </a> etiketi içinde, href="" komutuyla belirtilir.
Örnek:
<a href="http://www.torosaslanlari.benimforum.com" target="_blank">Toros Aslanları</a>
Bu
örnekte bir de target değişkeni 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 ilgili
değişkeni target="_top" şeklinde yazabilirsiniz. Hiç bir şey yazılmazsa
da sayfa aynı pencerede açılır.
title değişkenini kullanarak
da fare linkin üzerine geldiğinde gözükecek link açıklamasını
ekleyebilirsiniz. Aşağıdaki örnekte fareyle linkin üzerine gelip
beklerseniz Orta Doğu Teknik Üniversitesi yazısını göreceksiniz.
<a href="http://torosaslanlari.benimforum.org" target="_blank" title="web sitem için tıklayın" >Fahri Can</a>
Eğer hazırladığınız dokümanlar arasında bir bağlantı kurmak istiyorsanıiz, <a> etiketini aşağıdaki gibi kullanmalısınız.
<a href="dosyaadi.HTML">Önceki sayfa</a>
Bir e-posta adresine link vermek istiyorsanız:
<a href="mailto:mail@mail.com.tr">E-posta atmak için tıklayın. </a>
adres bölümünde etiket içinde belirtilen adres yazar.
Aynı
doküman içinde bağlantı kurmak istersek tutturucu noktaları (anchor
points) kullanırız. Tutturucu HTML sayfasında bir yer işaretidir. İsmi
ile bir bölgeyi belirler ve bu tutturucuya bir link verebilirsiniz. Bu
sayfadaki her konu başlığına bir tutturucu belirlenmiştir. Sayfa
başındaki listede herhangi bir başlığa tıkladığınızda sayfa içindeki
ilgili konu başlığına gider.
Linkler başlığına aşağıdaki gibi bir tutturucu belirleriz.
<a name="link">Linkler</a>
Sayfanın herhangi bir bölümünde yukarıda belirlediğimiz tutturucuya aşağıdaki gibi link veririz
<a href="#link">Linklere git</a>
Sağ tarafta bulunan Başa Dön linkleri de bu şekilde hazırlanmıştır.
---------------------------------------------------------------------------------------------------------------------
RESİM EKLEME
Resim ekleme:
<img src="resim.jpg" />
şeklinde olur. Dikkat etmemiz gereken kulanacağımız resmin dizin yapısıdır.
Bağımsız Değişkenler :
<img src="" width="" height="" border="" alt="" />
alt:
Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde,
alt değişkeninde 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.
** Eğer web sayfasının arka planında bir imajın çıkması istenirse:
<body background="resim.jpg"> şeklinde yazılır.
Resimleri linke dönüştürmek için <a> etiketi ile <img> etiketini içiçe kullanırız.
<a href="http://torosaslanlari.benimforum.org" target="_blank"><img src="fahcan.jpg" /></a>
Not: Resimlerin width ve height değişkenlerini belirtmeniz sayfanızın yüklenirken şeklinin bozulmasını önler.
-----------------------------------------------------------------------------------------------------------------
LİSTELER:
Üç çesit liste vardır:
i. Sıralı Liste(Ordered List):
[img]http://site.mynet.com/fahri_can/1.png[/img]
Örnekte
görüldüğü gibi type değişkeni sıralı listenin türünü belirler. Type
değişkeni için aşağıdaki değerlerden biri kullanılabilir:
type: {1, a, A, I, i}
Listeyi start değişkeni ile istediğimiz sayıdan baslatabiliriz:
[img]http://site.mynet.com/fahri_can/2.png[/img]
ii. Sırasız Liste(Unordered List):
[img]http://site.mynet.com/fahri_can/3.png[/img]
Benzer
şekilde burada da type değişkeni sırasız listenin işaretini belirler.
Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:
type:{square, disc, circle}
iii. Tanımlama Listeleri (Definition List):
AsiRuH- yönetici
mesaj sayısı : 9861
Yaş : 36
İş/meslek : xxxxx
Kayıt tarihi : 27/09/08
- Kod:
TABLOLAR
Tablolar <table>. . . . </table> etiketleri
arasında oluşturulur. <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 :
<table border="1">
<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>
[img]http://site.mynet.com/fahri_can/6.png[/img]
Bağımsız Değişkenler:
<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">
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.
cellpadding
, cellspacing : Hücre elemanlarının sınırlara olan uzaklığı
cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile
belirtilir.
bgcolor: <table bgcolor="red"> şeklinde
kullanarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece
tek bir hücre renklendirilir.
align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.
valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.
colspan
, rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı
sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır.
Birleştirilen hücreye ait <td>. . </td> etiketi silinir.
Örnek :
<table border="1">
<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>
[img]http://site.mynet.com/fahri_can/7.png[/img]
FORMLAR
Formlar
<form>. . . </form> etiketleri arasında oluşturulur. Form
bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak
gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları
hazırlayabilirsiniz.
Örnek:
<form name="kimlik" action="gonder.php" method="get">
Isim/soyad : <input type="text" size="20" name="isim"><br>
Doğum yeri : <input type="text" size="20" name="dogumyer" ><br>
Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br>
Cinsiyet
: <input type="radio" name="cins" value="erkek" > Erkek <input
type="radio" name="cins" value="kiz"> Kiz<br>
Hobiler:<br>
<input type="checkbox" name="muzik" >Müzik dinlemek<br>
<input type="checkbox" name="manti" >Manti açmak<br>
<input type="checkbox" name="bungee" > Bungee Jumping<br>
<input type="checkbox" name="aikido">Aikido<br>
<input type="checkbox" name="halay">Halay çekmek<br>
<input type="checkbox" name="diger">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SIL">
</form>
[img]http://site.mynet.com/fahri_can/8.png[/img]
action: Formun gönderileceği adresi belirtir.
method="get":Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post":Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text" : Tek satırlık bir metin alanı açar.
size="" :Bu metin alanının boyutunu belirler.
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür.
<textarea
rows="" cols=""> :type="text" gibi tek satırlı değil de çok satırlı
bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının
uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.
Listeleme:
Select
ve option etiketlerini kullanarak seçimlik liste (menü)
oluşturabiliriz. Option etiketi ile belirtilen her bir değer listenin
bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select
etiketinde belirtilen değişkenin değeri haline gelir.
Örnek:
<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>