HTML NEDİR?
İngilizce’si HyperText Markup Language olan Html web sitesi tasarlamak için kullanılan bir dildir. Asıl amacı sahip olunan bilgilerin bir dokümana yazılıp bu dokümanların başka kişilerce okunabilmesini, elde edilebilmesidir.Bu da HyperText (bağlantılı metinler) ile sağlanıyor.Yani sayfanın içindeki bir linkin olması ve bu link ile başka sayfalara erişebilmek anlamına geliyor.
TEMEL HTML TAGLARI VE PARAMETRELERİ
<HTML>
<HEAD>
<TITLE>SAYFA BASLIĞI</TITLE>
</HEAD>
<BODY>
Sayfa içeriği bu bölüme gelir
</BODY>
</HTML>
Bir html sayfasının en sade hali yukarıdaki gibidir.<Html> tagı ile başlar <html> ile biter.<head> </head> tagları arasına meta tagları cssler javascriptler konulur.<title> </title> tagları arasına sayfa başlığı yazılır.<bOdy> </bOdy> tagları arasına sayfada bulunmasını istediğimiz yazı resim vb içeriği yerleştiririz.
BODY Tagının parametleri
<bOdy bgcolor=& background=& text=& link=& alink=& vlink=& leftmargin=& topmargin=& >
* BGCOLOR Arka plan rengini belirler
* BACKGROUND Arka plana resim ekler
* TEXT Yazı rengini belirler
* LINK Sayfadaki linklerin(bağlantıların) rengini belirler
* ALINK Aktif link rengini belirler
* VLINK Ziyaret edilmiş linklerin rengini belirler
* LEFTMARGIN Sayfanın sol ve sağından ne kadar içeriye doğru kayacağını belirler.
* TOPMARGIN Sayfanın üst kısmından ne kadar içeriye doğru kayacağını belirler.
Örnekler
<bOdy bgcolor="red"> veya <bOdy bgcolor="#FF0000">
Arka plan rengini değiştirmek için rengin ingilizce adını (red gibi) yada hexadecimal kodunu (#FF0000 gibi) girmeliyiz. Dikkat ettiyseniz hexadecimal kodu girerken kodun başına # işareti ekliyoruz Eğer kod kullanacaksak bu işareti kullanmalıyız yoksa yanlış olur.
<bOdy background="banner.JPG">
Artalan resim eklemek için bu komutu kullanırız " " iki tırnak işareti arasına resmin bulundugu yeri ,resmin adını ve resmin uzantısını yazarız "banner.JPG" örneğinde banner resmin adı JPG ise resmin uzantısı (türü) resim eğer html belgemiz ile aynı klasörde ise yolu yazmıyoruz
Eğer banner adlı resmimiz resimler klasörü altında ise <bOdy background="resimler/banner.JPG"> şeklinde belirtiyoruz.
<bOdy text="yellow"> yazı rengini sarı yaptık
<bOdy link="blue" alink="red" vlink="#CC33FF"> linkler mavi aktif link kırmızı ziyaret edilmiş linkler mor oldu.
<bOdy leftmargin="50" topmargin="50"> sayfa içeriği kenara yapışık olmadı belirttiğimiz miktarda içeriye kaydı.
META (TANIMLAMA) TAGLARI
* <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> kodu ı,ğ,ş,ç gibi türkçe karakterlerin düzgün çıkması için browsera sayfanın türkçe oldugunu söyler
*
<META NAME="author" CONTENT="Ahmet ÖZDEMİR"> Kodu sayfanın tasarımcı kimliğini gösterir
*
<META NAME="copyright" CONTENT="© 2005 Ahmet ÖZDEMİR"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
*
<META NAME="keywords" CONTENT="html,htm,html komutları,html dersleri,html nedir"> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Bu kod arama motorlarında sitenizin adının geçmesi için çok önemlidir.
*
<META NAME="Description" CONTENT="Sayfanızın Kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır
*
<META name="GENERATOR" CONTENT="Microsoft FrontPage 5.0"> Kodu sayfanın hangi editörle yapıldığını gösterir
*
<META NAME="ROBOTS" CONTENT="ALL,FOLLOW,INDEX"> Kodu sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
*
<META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş oldu.
*
<META HTTP-equiv="Refresh" content="3RL=http://www.ahmetozdemir.com.tr.tc"> Sayfa açıldıktan 3 saniye sonra belirtilen url’ye gider url’yi aynı sayfa olarak belirtirsek sayfayı 3 saniyede bir yenilemiş oluruz.
YAZI YAZMAK VE BİÇİMLENDİRMEK
* <font face="Arial" size="4" color="green">yazacağımız yazı </font> bu iki tag arasında kalan yazı belirtilen özellikleri alır size büyüklük color yazı rengi face yazı tipini belirler.
* <h&> yazacağımız yazı </h&> iki tag arasında kalan yazının büyüklüğünü belirler size ile aynı görevdedir & işareti yerine 1 den 6 ya kadar olan rakamlar gelebilir rakam büyüdükçe yazı boyutu küçülür
* <center> yazacağımız yazı </center> yazıyı satırın ortasına taşır.
* <p align=left>yazacağımız yazı </p> yazıyı satırın soluna taşır.
* <p align=right>yazacağımız yazı </p> yazıyı satırın sağına taşır.
* <p align=center>yazacağımız yazı </p> yazıyı satırın ortasına taşır <center> </center> tagı ile aynı görevdedir
* <br> yazıyı bir alt satırdan devam ettirmek için <br> tagını kullanırız normal yazı yazar gibi enter ile alt satıra insek bile html belgemizdeki yazı aynı satırda olacaktır bunun için alt satıra geçmek istiyorsak bu etiketi kullanmalıyız
* <p> bu tag’a 2*br diyebiliriz 2 satır alttan devam etmek için bunu kullanırız ayrıca pragraf yapmak içinde bu tagı kullanırız
* NOT: <br> , <p> ve <hr> tagının bitiş tagı yoktur diğer tüm tagların başlangıç ve bitiş tagları bulunur.
* <u>yazacağımız yazı </u> iki tag arasındaki yazı altı çizgili olur
* <i>yazacağımız yazı </i> iki tag arasındaki yazı italik olur
* <b>yazacağımız yazı </b> iki tag arasındaki yazı kalın olur
* <nobr>yazağımız yazı </nobr> yazacağımız metnin tek satırda olmasını istersek bu tagı kullanırız eğer kullanmazsak uzun olan metnimiz sayfanın sonuna gelince otomatik olarak alt satırdan devam eder
* <pre>
YA Z A CAĞ I MI Z YAZ I
</pre> bu iki tag arasındaki yazı aynen çıkar yani enterla alt satıra geçersek ve bu tagı kullanırsak html belgemizdede alt satırda olur tıpkısının aynısı yani
* <blockquote>
yazağımız yazı
<blockquote> bu iki tag arasına yazılan yazı sayfanın hem sağından hemde solundan bir miktar içeri kayar
* <sup>yazacağımız yazı </sup> iki tag arasındaki yazı satırın birazcık üzeride görünür.
* <sub> yazacağımız yazı </sub> iki tag arasındaki yazı satırın birazcık altında görünür.
* <strike>yazacağımız yazı </strike> iki tag arasındaki yazı üstü çizili olur
* <em>yazacağımız yazı </em> vurguyu belirtmek için kullanılır dışarıya biraz eğik çıkar
* <strong>yazacağımız yazı </strong> güçlü vurguyu belirtir dışarıya biraz koyu çıkar
* <code> yazacağımız yazı </code> yasa kural belirten yazılar için kullanılır
* <samp> yazacağımız yazı </samp>
* <var> yazacağımız yazı </var> tam emin olmadığımız yazılar için kullanılır.
* <dfn> yazacağımız yazı </dfn> tanımlama belirten yazılar için kullanılır.
* <cite>yazcağımız yazı </cite> alıntı olan yazıyı belirtmek için kullanılır.
* <small> yazacağımız yazı </small> bu iki tag arasındaki yazı dışarıya çok küçük çıkar.
* <big>yazacağımız yazı </big> bu iki tag arasına yazılan yazı dışarıya çok büyük çıkar.
* <addres>yazağımız yazı </addres> bu iki tag adres belirtmek için kullanılır.
* <kbd> yazacağımız yazı </kbd> bu iki tag arasına yazacağımız yazı keyboard karakterleri gibi görünür.
* <tt>yazacağımız yazı </tt> bu iki tag arasına yazılan yazı daktilo yazısı gibi olur.
* <div align= center | left | right>yazacağımız yazı </div> yazının satırın neresinde görünmesini bu tag ile belirleriz <p align= left | center | right > </p> ile aynı görevdedir
* <hr size="2" width="20" color="yellow">bu tag çizgi çizdirmeye yarar width yatay uzunluğu color rengi size dikey uzunluğu belirler.
* <marquee bgcolor="blue" loop="170" direction= up | down | right | left scrolldelay="100" scrollamount="30" width="400" height="15" behavior="alternate" >
yazıcağımız yazı veya ekleyeceğimiz resim bölümü
</marquee> bgcolor kayan bölgenin arka plan rengini belirler , loop kaç kez kayacağını belirler bunu kullanmazsak sonsuza kadar kayar , direction kayma yönünü belirler up yukarı down aşağı left sola right sağa , scrolldelay kayma hızını belirler sayı arttıkça hız düşer scrollamount zıplayarak gitme hızını belirler sayı arttıkça hız artar ,width kayan bölgenin genişliğini height ise kayan bölgenin yüksekliğini belirler.
* <!-- Bu kısma yazılan yazı kod kısmında görünür sayfada görünmez --> bu tag kodların düzenli olabilmesi için kullanılır örneğin yazdıgımız kodlar ne işe yarar not düşeriz bu tag ile ve sayfada görünmez.
İngilizce’si HyperText Markup Language olan Html web sitesi tasarlamak için kullanılan bir dildir. Asıl amacı sahip olunan bilgilerin bir dokümana yazılıp bu dokümanların başka kişilerce okunabilmesini, elde edilebilmesidir.Bu da HyperText (bağlantılı metinler) ile sağlanıyor.Yani sayfanın içindeki bir linkin olması ve bu link ile başka sayfalara erişebilmek anlamına geliyor.
TEMEL HTML TAGLARI VE PARAMETRELERİ
<HTML>
<HEAD>
<TITLE>SAYFA BASLIĞI</TITLE>
</HEAD>
<BODY>
Sayfa içeriği bu bölüme gelir
</BODY>
</HTML>
Bir html sayfasının en sade hali yukarıdaki gibidir.<Html> tagı ile başlar <html> ile biter.<head> </head> tagları arasına meta tagları cssler javascriptler konulur.<title> </title> tagları arasına sayfa başlığı yazılır.<bOdy> </bOdy> tagları arasına sayfada bulunmasını istediğimiz yazı resim vb içeriği yerleştiririz.
BODY Tagının parametleri
<bOdy bgcolor=& background=& text=& link=& alink=& vlink=& leftmargin=& topmargin=& >
* BGCOLOR Arka plan rengini belirler
* BACKGROUND Arka plana resim ekler
* TEXT Yazı rengini belirler
* LINK Sayfadaki linklerin(bağlantıların) rengini belirler
* ALINK Aktif link rengini belirler
* VLINK Ziyaret edilmiş linklerin rengini belirler
* LEFTMARGIN Sayfanın sol ve sağından ne kadar içeriye doğru kayacağını belirler.
* TOPMARGIN Sayfanın üst kısmından ne kadar içeriye doğru kayacağını belirler.
Örnekler
<bOdy bgcolor="red"> veya <bOdy bgcolor="#FF0000">
Arka plan rengini değiştirmek için rengin ingilizce adını (red gibi) yada hexadecimal kodunu (#FF0000 gibi) girmeliyiz. Dikkat ettiyseniz hexadecimal kodu girerken kodun başına # işareti ekliyoruz Eğer kod kullanacaksak bu işareti kullanmalıyız yoksa yanlış olur.
<bOdy background="banner.JPG">
Artalan resim eklemek için bu komutu kullanırız " " iki tırnak işareti arasına resmin bulundugu yeri ,resmin adını ve resmin uzantısını yazarız "banner.JPG" örneğinde banner resmin adı JPG ise resmin uzantısı (türü) resim eğer html belgemiz ile aynı klasörde ise yolu yazmıyoruz
Eğer banner adlı resmimiz resimler klasörü altında ise <bOdy background="resimler/banner.JPG"> şeklinde belirtiyoruz.
<bOdy text="yellow"> yazı rengini sarı yaptık
<bOdy link="blue" alink="red" vlink="#CC33FF"> linkler mavi aktif link kırmızı ziyaret edilmiş linkler mor oldu.
<bOdy leftmargin="50" topmargin="50"> sayfa içeriği kenara yapışık olmadı belirttiğimiz miktarda içeriye kaydı.
META (TANIMLAMA) TAGLARI
* <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> kodu ı,ğ,ş,ç gibi türkçe karakterlerin düzgün çıkması için browsera sayfanın türkçe oldugunu söyler
*
<META NAME="author" CONTENT="Ahmet ÖZDEMİR"> Kodu sayfanın tasarımcı kimliğini gösterir
*
<META NAME="copyright" CONTENT="© 2005 Ahmet ÖZDEMİR"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
*
<META NAME="keywords" CONTENT="html,htm,html komutları,html dersleri,html nedir"> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Bu kod arama motorlarında sitenizin adının geçmesi için çok önemlidir.
*
<META NAME="Description" CONTENT="Sayfanızın Kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır
*
<META name="GENERATOR" CONTENT="Microsoft FrontPage 5.0"> Kodu sayfanın hangi editörle yapıldığını gösterir
*
<META NAME="ROBOTS" CONTENT="ALL,FOLLOW,INDEX"> Kodu sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
*
<META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş oldu.
*
<META HTTP-equiv="Refresh" content="3RL=http://www.ahmetozdemir.com.tr.tc"> Sayfa açıldıktan 3 saniye sonra belirtilen url’ye gider url’yi aynı sayfa olarak belirtirsek sayfayı 3 saniyede bir yenilemiş oluruz.
YAZI YAZMAK VE BİÇİMLENDİRMEK
* <font face="Arial" size="4" color="green">yazacağımız yazı </font> bu iki tag arasında kalan yazı belirtilen özellikleri alır size büyüklük color yazı rengi face yazı tipini belirler.
* <h&> yazacağımız yazı </h&> iki tag arasında kalan yazının büyüklüğünü belirler size ile aynı görevdedir & işareti yerine 1 den 6 ya kadar olan rakamlar gelebilir rakam büyüdükçe yazı boyutu küçülür
* <center> yazacağımız yazı </center> yazıyı satırın ortasına taşır.
* <p align=left>yazacağımız yazı </p> yazıyı satırın soluna taşır.
* <p align=right>yazacağımız yazı </p> yazıyı satırın sağına taşır.
* <p align=center>yazacağımız yazı </p> yazıyı satırın ortasına taşır <center> </center> tagı ile aynı görevdedir
* <br> yazıyı bir alt satırdan devam ettirmek için <br> tagını kullanırız normal yazı yazar gibi enter ile alt satıra insek bile html belgemizdeki yazı aynı satırda olacaktır bunun için alt satıra geçmek istiyorsak bu etiketi kullanmalıyız
* <p> bu tag’a 2*br diyebiliriz 2 satır alttan devam etmek için bunu kullanırız ayrıca pragraf yapmak içinde bu tagı kullanırız
* NOT: <br> , <p> ve <hr> tagının bitiş tagı yoktur diğer tüm tagların başlangıç ve bitiş tagları bulunur.
* <u>yazacağımız yazı </u> iki tag arasındaki yazı altı çizgili olur
* <i>yazacağımız yazı </i> iki tag arasındaki yazı italik olur
* <b>yazacağımız yazı </b> iki tag arasındaki yazı kalın olur
* <nobr>yazağımız yazı </nobr> yazacağımız metnin tek satırda olmasını istersek bu tagı kullanırız eğer kullanmazsak uzun olan metnimiz sayfanın sonuna gelince otomatik olarak alt satırdan devam eder
* <pre>
YA Z A CAĞ I MI Z YAZ I
</pre> bu iki tag arasındaki yazı aynen çıkar yani enterla alt satıra geçersek ve bu tagı kullanırsak html belgemizdede alt satırda olur tıpkısının aynısı yani
* <blockquote>
yazağımız yazı
<blockquote> bu iki tag arasına yazılan yazı sayfanın hem sağından hemde solundan bir miktar içeri kayar
* <sup>yazacağımız yazı </sup> iki tag arasındaki yazı satırın birazcık üzeride görünür.
* <sub> yazacağımız yazı </sub> iki tag arasındaki yazı satırın birazcık altında görünür.
* <strike>yazacağımız yazı </strike> iki tag arasındaki yazı üstü çizili olur
* <em>yazacağımız yazı </em> vurguyu belirtmek için kullanılır dışarıya biraz eğik çıkar
* <strong>yazacağımız yazı </strong> güçlü vurguyu belirtir dışarıya biraz koyu çıkar
* <code> yazacağımız yazı </code> yasa kural belirten yazılar için kullanılır
* <samp> yazacağımız yazı </samp>
* <var> yazacağımız yazı </var> tam emin olmadığımız yazılar için kullanılır.
* <dfn> yazacağımız yazı </dfn> tanımlama belirten yazılar için kullanılır.
* <cite>yazcağımız yazı </cite> alıntı olan yazıyı belirtmek için kullanılır.
* <small> yazacağımız yazı </small> bu iki tag arasındaki yazı dışarıya çok küçük çıkar.
* <big>yazacağımız yazı </big> bu iki tag arasına yazılan yazı dışarıya çok büyük çıkar.
* <addres>yazağımız yazı </addres> bu iki tag adres belirtmek için kullanılır.
* <kbd> yazacağımız yazı </kbd> bu iki tag arasına yazacağımız yazı keyboard karakterleri gibi görünür.
* <tt>yazacağımız yazı </tt> bu iki tag arasına yazılan yazı daktilo yazısı gibi olur.
* <div align= center | left | right>yazacağımız yazı </div> yazının satırın neresinde görünmesini bu tag ile belirleriz <p align= left | center | right > </p> ile aynı görevdedir
* <hr size="2" width="20" color="yellow">bu tag çizgi çizdirmeye yarar width yatay uzunluğu color rengi size dikey uzunluğu belirler.
* <marquee bgcolor="blue" loop="170" direction= up | down | right | left scrolldelay="100" scrollamount="30" width="400" height="15" behavior="alternate" >
yazıcağımız yazı veya ekleyeceğimiz resim bölümü
</marquee> bgcolor kayan bölgenin arka plan rengini belirler , loop kaç kez kayacağını belirler bunu kullanmazsak sonsuza kadar kayar , direction kayma yönünü belirler up yukarı down aşağı left sola right sağa , scrolldelay kayma hızını belirler sayı arttıkça hız düşer scrollamount zıplayarak gitme hızını belirler sayı arttıkça hız artar ,width kayan bölgenin genişliğini height ise kayan bölgenin yüksekliğini belirler.
* <!-- Bu kısma yazılan yazı kod kısmında görünür sayfada görünmez --> bu tag kodların düzenli olabilmesi için kullanılır örneğin yazdıgımız kodlar ne işe yarar not düşeriz bu tag ile ve sayfada görünmez.