HTML Hakkında Herşey

guclusat

Tanınmış Üye
Süper Moderatör
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="&copy; 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.
 
Tablodaki hücreleri yatay ve dikey birleştirmek

* Yanyana iki hücreyi birleştirmek

yanyana iki hücreyi birleştirmek için colspan komutunu kullanırız birleştireceğimiz hücrenin içerisine bu komutu ekleriz.

<table border=1 bordercolor=red>
<tr>
<td>bir
<td>iki
<td>üç
</tr>
<tr>
<td colspan=2>dört
<td>beş
</tr>
<tr>
<td>altı
<td>yedi
<td>sekiz
</tr>
</table>

Ekran çıktısı şu şekilde olur

bir


iki


üç

dört


beş

altı


yedi


sekiz

* Altalta iki hücreyi birleştirmek

Altalta iki hücreyi birleştirmek için rowspan komutunu kullanırız birleştirmek istediğimiz hücrenin içerisine bu komutu yerleştiririz.

<table border=1 bordercolor=red>
<tr>
<td>bir
<td>iki
<td>üç
</tr>
<tr>
<td>dört
<td rowspan=2>beş
<td>altı
</tr>
<tr>
<td>yedi
<td>sekiz
</tr>
</table>

Ekran çıktısı şu şekilde olur

bir


iki


üç

dört


beş


altı

yedi


sekiz





FRAMELER (ÇERCEVELER)

* Frame özelliğini birden fazla sayfayı belirli oranlarda tek sayfada birleştirmek için kullanacağız.
* Sonuç olarak ortaya yeni bir sayfa çıkacağı için frame kodlarını temel html tagları olan (bOdy tagı hariç) bir sayfaya yerleştireceğiz.
* <frameset> </frameset> tagları arasına oluşturacağımız sayfaların parçaları girilir
* <frame name="1" src= "cerceve1">frame ile sayfa ekleriz name adını belirler cerceveye link vermek için önemlidir linkler bölümünde görmüştük src ise sayfanın bulundugu yeri sayfanın adını uzantısını belirtir">cols yatay birleştirme oranını rows ise dikey birleştirme oranını belirler
* frameborder kenar kalınlığının olup olmayacağını belirler frameborder="yes| no" yes olursa kenar kalınlığı olur , no olursa kenar kalınlığı olmaz.
* border="3" kenar kalınlığını belirler
* bordercolor="red" kenar kalınlığının rengini belirler
* scrolling kaydırma çubuğunun olup olmayacağını belirler scrolling="yes" kaydırma çubuğu olur , scrolling="no" kaydırma çubuğu olmaz ,scrolling="auto" gerekirse kaydırma çubuğu olur
* marginwidth yatay kenar boşluğunu marginheight üstteki kenar boşluğunu belirler.
* <noframes> </noframes> frame özelliği htmlye sonradan eklendiği için eski browserlar bu teknolojiyi desteklemez ziyaretçinize bu tag ile bilgi verirsiniz.
* Frame konusu biraz karışık gelebilir bu konuda fazlaca deneme yapınız

<html>
<head>
<title>Çerçeveli sayfa</title>
</head>
<frameset cols="50%,50%" rows="50%,50%" frameborder="yes" border="2" bordercolor="green">
<frame name="1" src= "><frame name="2" src= "><frame name="3" src= "><frame name="4" src= "><noframes>Üzgünüm Web tarayıcınız çerçeve teknolojisini desteklemiyor Başka bir tarayıcı ile tekrar giriniz</noframes>

FRAME ÖRNEKLERİNİ İNCELEMEK İÇİN TIKLAYINIZ.



FORMLAR

* <form><textarea rows="5" cols="20" style="backgroundrange" style="font-familyomic sans ms" style="color:green" style="borderstyle:solid;">Yazınızı buraya yazın!</textarea></form> <FORM><TEXTAREA style="BACKGROUND: orange; COLOR: green; FONT-FAMILY: Comic sans ms; borderstyle: solid" rows=5>Yazınızı buraya yazın!
* FORMlar ziyaretçilerimiz ile iletişim kurmak için kullandığımız html’nin güzel özelliklerinden birisidir
* textarea mein alanı oluşturmak için kullanılır rows cols seçenekleri ile dikey ve yatay boyutu belirlenir.
* style="backgroundrange" metin alanımızın arka planını belirler.
* style="font-family:comic sans ms" metin alanındaki yazı tipini belirler.
* style="color:green" metin alanındaki yazı rengini belirler.
* style="borderstyle:solid;" kenar kalınlığı stilini belirler.

* <form><input type="text" size="20" maxlength="21" value="Yazıyı buraya yazınız"></form>
* type=text yatay metin alanı oluşturmak için kullanılır.
* size yatay metin alanının boyutunu belirtir.
* maxlength yatay metin alanına en fazla kaç karakterlik yazı yazılacağını belirler.
* value metin alanına açıklama eklemek için kullanılır.

* <form><input type="password" size="10"></form>
* şifre girilecek yatay metin alanı oluşturmak için kullanılır girilen karakter yıldız şeklinde görünür.

* <form><input type="checkbox" name="isaret"></form>




* type="checkbox" işaret kutucuğu yapmak için kullanılır , name kutucuğun adını belirtir.

* <form><input type="radio" name="isaret"></form>




* type="radio" seçenek kutusu yapmak için kullanılır , name kutucuğun adını belirtir.
* radio ile checkbox arasındaki fark radio ile tek seçim yapılır checkbox ile istediğimiz kadar kutucuğu seçebiliriz.

* <select name=günler size="1">
<option selected >GÜNLER
<option value="Pazartesi">Pazartesi
<option value="Salı">Salı
<option value="Çarşamba">Çarşamba
<option value="Perşembe">Perşembe
<option value="Cuma">Cuma
<option value="Cumartesi">Cumartesi
<option value="Pazar">Pazar
</select>



* Aşağıya doğru açılan seçim kutucuğu oluşturmak için select etiketini kullanırız
* option selected açılan kutunun başlık yazısını belirtir.
* option value seçenek eklemek için kullanılır.
* NOT: input etiketinde olduğu gibi option etiketininde bitiş tagı yoktur , select ve form taglarının bitiş tagı vardır.

* <input type="submit" name="gönder" value="gönder">

* Formun içeriğinin gönderilmesi için gönder butonu ekler.

* <input type="reset" name="sil" value="sil">

* Form üzerinde yapılan işlemleri geri almak yazıan yazıları silmek için sil butonunu ekler.

* <button type="submit" name="gönder" value="gönder"><img src= "grafikler/gonder.jpg">



* Gönder için özel butonunuz varsa bu kodu kullanabilirsiniz.

* <button type="reset" name="sil" value="sil"><img src= "grafikler/sil.jpg">



* Sil için özel butonunuz varsa bu kodu kullanabilirsiniz.

FORMU GÖNDERMEK

* <FORM ACTION="[linkleri Gormek İcin Uye Olmalısınız. Uye Olmak icin Tıklayınız...]
* Formun içerine eklenen bu kod ile form e posta yoluyla iletilir



SAYFAYA SES VE VİDEO EKLEMEK

* <bgsound src= "">loop kac defa çalınacağını belirtir , volume ses ayarını belirler -10000 ile +10000 arasında değerler alır .
* balance hoparlörün sağ sol dengesini ayarlar -10000 ile +10000 arasında değerler alır.

* <embed src= "gitar">embed komutu sayfaya müzik eklemek için kullanılır autostart değeri false olursa müzik otomatik başlamaz true olursa otomatik başlar
* loop ise kaç defa çalınacağını belirler.
* hidden değeri true olursa ekranda hiçbirşet görünmez sadece ses olur bgsound komutundan farkı kalmaz.

* <embed src= "gitar">embed komutu aynı zamanda sayfaya video eklemek için kullanılır
* videonun buyotunu kendimiz ayarlamak istersek embed etiketi içerisine width ve height değerlerini girebiliriz.



ÖZEL KARAKTERLER

* &lt; <
* &gt; >
* &amp; &
* &reg; ®
* &quot; "
* &nbsp; bu kod boşluk 1 karakterlik boşluk bırakır.
 
Geri
Yukarı