Konular

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

HTML nedir? ve HTML tag'leriHızlandırılmış HTML Kursu Notları

Giriş

HTML nedir?

Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar. Örneğin herhangi bir tag olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına <I> ve </I> işaretleri gelince bu şekilde italik görülür

HTML tag'leri

HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:

  1. Bir açma bir de kapama tag'inden oluşan container tag'leri,
  2. Tek başına bulunan tag'ler.

Örnek olarak, ilk gruptan

<B>Kalın yazı</B>
<FONT COLOR="Maroon" SIZE="+1>Büyükçe, gri metin parçası</FONT>

ikinci gruptansa

<HR>
<META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://www.ulakbim.gov.tr/">

verilebilir.

HTML Dökümanlarının Yapısı:

Bir HTML dökümanı genel olarak (istisnaları vardır) aşağıdaki şekildedir:

<HTML>
<HEAD>
<!-- Head elemanlary -->
Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları, başlık, JavaScript tanımlamaları vb elemanlar bulunur...
</HEAD>
<BODY>
<!-- Body elemanları -->
Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb içerebilir...
<BODY>
</HTML>

Kuraldışı durum olarak da frameset'ler verilebilir, framesetler <BODY></BODY> tag'lerini içermeyebilirler. Frameset'lere ileride gelinecektir.


İlk HTML Dökümanı:

Örnek olarak aşağıdaki HTML kodunu ele alalım:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 02, 1998 12:26 AM -->
<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-9">
<META NAME="GENERATOR" Content="Visual Page 1.1 for Windows">
<META NAME="Author" Content="Cüneyt YILMAZ">
<META NAME="Keywords" Content="deneme, learning HTML, dummy document">
<TITLE>İlk HTML Dökümanı</TITLE>
</HEAD>

<BODY TEXT="#333333" BGCOLOR="White" LINK="Navy" VLINK="#006600" ALINK="#009999" BACKGROUND="resim.jpg">
<H1> Güzelinden bir başlık atalım <H1>
Bu Ulakbim'deki birlikte inceleyeceğimiz ilk HTML dökümanı.<BR>
İçeriği şimdilik önemli olmasa da ona da sıra gelir :)<BR>
Bu satırın 2 altında bazı sayılar olmalı, acaba öyle mi?

298 93 00
<HR>
Hemen üstümde şirin bir çizgi var.
<BODY>
<HTML>

Yukarıdaki kodun ilk satırı SGML (HTML'in atası) sözdizimine göre aşağıdaki satırların bir HTML 3.2 dökümanı olduğunu belirtmektedir, genelde ihmal edilebilir, ancak Internet üzerinde bazı HTML validator (sözdizimini kontrol eden programlar) tarafından
kullanılır ve eğer kullanılmazsa dökümanın HTML 2.0'a uygun olduğu varsayılır.

2. satırda bir HTML comment'i (açıklaması) vardır. HTML commentleri <!-- ile başlar ve --> ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir (JavaScript hariç, ileride bu konuya geri dönülecektir).

3. satırda dökümanımız resmi olarak açılmış bulunmakta.

4. satırda browser'ın dökümanı gösterirken işine yarayabilecek bazı bilgiler vb elemanların bulunduğu HEAD kısmı açılmaktadır.

5. satırda dökümanın render edilirken (mizanpajının yapılıp ekrana dökülürken) kullanılacak karakter seti verilmektedir. Sık kullanacağımız setler ISO-8859-1 (Latin1) ve ISO 8859-9 (Türkçe)'dur. Bazı Windows programlarının (isimleri lazım değil) kullandığı bir set ise standart olmayan Windows-1254 (Unix'te görüntülenemeyen bir Türkçe)'dür.

6. satırda döküman hazırlanırken hangi HTML editörünün kullanıldığı yazmaktadır.

7. satırda dökümanı hazırlayan kişinin ismi vardır.

8. satırda daha çok AltaVista, HotBot gibi bazı arama makinelerinin kullandığı bir bilgi bulunmaktadır. Sözgelimi AltaVista'da arama yapan birinin sizin dökümanınıza ulaşmasını istiyorsanız, verebileceği anahtar kelimeleri burada tanımlarsınız.

9. satırda döküman gösterilirken browser'da pencerenin başlığı olarak ne görüleceği bilgisi vardır. Bu bilgi ayrıca sayfanızı bookmark'ına (Navigator) ya da favorites'ine (Explorer) ekleyen kişilerde görülecek olan isimdir.

10. satırda HEAD kısmı kapanmaktadır.

11. satırdan itibaren dökümanın içeriği hemen hemen başlamaktadır. Burada sayfanın görüntülenirken ana görünümün nasıl olacağı belirlenir. BODY'den sonra gelen 5 eleman sırasıyla şunları ifade eder:

  • Düz metin rengi
  • Arka fon rengi
  • Ziyaret edilmemiş linklerin rengi
  • Ziyaret edilmiş linklerin rengi
  • Fareyle link'e tıklandığı andaki (düğme halen basılıken) link'in rengi
  • Arka fonda kullanılacak olan resim

Burada renkleri verirken 2 tip gösterim kullandık, #RRGGBB ve Renk_İsmi. #RRGGBB, hexedecimal olarak 2şer bayttan Kırmızı, Yeşil ve Mavi bileşenleri verir. Örneğin saf kırmızı #FF0000, camgöbeği #00FFFF'dir. Diğer gösterim daha kolaydır ve HTML standardında bulunan 16 (Navigator için yüze yakın) renkten birini verir. White, Blue, Gold gibi bir çok renk bulunmaktadır.

Arka fonda resmin kullanıldığı ve tabii ki kullanıcıda gösterilebilen bir resmin olduğu dökümanda arka fon renginin işi ne? Internet'e bağlı kullanıcıların bir kısmı hatları yavaş olduğu için resimleri otomatik yüklemezler. Böyle bir durumda dökümanınızın istediğinize en yakın görülebilmesi ve, bazen olduğu gibi siyah üstüne siyah yazan, yani boş gibi görünen bir sayfayla karşılaşmamaları için verilmesi tavsiye edilir.

Renkleri verdikten sonra artık sıra geldi içeriğe. Önce <H1>ve </H1> arasına kocaman bir başlık koyduk. Burada H1 ve H6 arasında istediğiniz birini başlık veya altbaşlık atmak için kullanabilirsiniz. H1 en önemli başlıklar içindir ve en büyüğüdür. H6 ise en önemsiz başlıklar içindir ve en küçüktür. Bu başlıkların kullanıcı tarafında nasıl görüleceğini bilemezsiniz, ancak elinizle yapacağınız bir düzenlemeden (puntoyu 2 arttır vs gibi) daha kolay ve garantilidir, çünkü browser uygun bir büyüklük seçecektir.

Başlığı attıktan sonra biraz metin yazılmış ve satır sonunda browser'ın bir alt satırdan devam etmesini söyleyen <BR> tag'i var. Devam edelim, alt satıra geçilmiş ve tekrar <BR> verilmiş. Onun altındaki satırda yazdığına göre iki alt satırda bir telefon numarası olması gerekiyormuş. Ancak browser'da bakıldığı zaman böyle olmadığı görülecektir, çünkü HTML <BR>, <P>, <H3> gibi tagler dışında döküman içindeki bütün satır sonu karakterlerini, tab'lerini ve birden fazla boşluğu, üçüne birden whitespace de denir, ihmal eder ve tek bir boşluk karakteriyle değiştirir.

Sonraki satırda, <HR> yatay bir çizgi çektik (maalesef <VR> diye bir tag'imiz yok).

Sonra biraz daha metin ve sırasıyla BODY'yi ve HTML dökümanımızı kapattık.

HTML 4.0 ve StyleSheet'lerin kullanıma girmesiyle değişen yukarıdaki BODY tanımı artık desteklenmemektedir.

<BODY TEXT="#333333" BGCOLOR="White" LINK="Navy" VLINK="#006600" ALINK="#009999" BACKGROUND="resim.jpg">

yerine

<STYLE type="text/css">
BODY { background: white; color: #333333; background-image:URL("resim.jpg");}
A:link { color: navy }
A:visited { color: #006600 }
A:active { color: #009999 }
</STYLE>

kullanılması önerilmektedir.

Temel HTML Tag'leri:

<HTML></HTML>, <HEAD></HEAD> ve <BODY></BODY>: HTML'in en temel blok tag'leridir. Bir HTML dökümanı genelde <HTML> ile başlar ve </HTML> ile biter, ancak verilmese bile, browser dökümanı sorunsuz olarak görüntüleyebilir. Aynı şey <BODY> için de gereklidir. Ancak, <HEAD>'in verilmesi ve döküman içinde HEAD bloğu varsa, <BODY>'nin de verilmesi zorunludur. Parametre olarak bir çok blok elemanı gibi LANG=Dil alır. Örneğin <BODY LANG=tr>.

<TITLE></TITLE>: İlk öğrenilmesi gereken tag'lerden biridir. Kullanımı basittir ve HEAD bloğunda kullanılı.

<P></P>: Paragraf açma kapama tag'leri. Yeni bir paragraf açarken/kapatırken kullanılır. Browser <P> tag'iyle karşılaştığı yerde yukarıdan ve aşağıdan biraz boşluk bırakır. Çoğu browser kapama tag'inin olmasına ihtiyaç duymaz.
Yararlı bir parametre olarak ALIGN=LEFT|CENTER|RIGHT alabilir. <P ALIGN="CENTER">Metin....<P> dediğiniz zaman aradaki bütün metin sol tarafa yaslı değil ortalanmış görülür. RIGHT ise yazıyı sağa dayar.

<BR>: Satır sonu tag'i. Kapama tag'i yoktur. <P> gibi altta, üstte boşluk bırakmadan yeni bir satır açar.

<HR>: Yatay çizgi tag'i. Parametre olarak ALIGN=LEFT|CENTER|RIGHT, WIDTH=xx%, SIZE=x ve NOSHADE alabilir. WIDTH ile yüzde olarak genişliğini verebilirsiniz. SIZE'ın varsayılan değeri 2'dir. NOSHADE ileyse, 3 boyut etkisini istemediğinizi belirtebilirsiniz.

<B></B>: Kalın yazı tag'i. İçeride kalan bütün metin kalın harflerle görüntülenir. Ancak yeni HTML standartlarını hazırlayan organizasyon <B></B> yerine ileriki günlerde <STRONG></STRONG> kullanılmasını önermektedir.

<I></I>: İtalik yazı tag'i. İçeride kalan bütün metin italik harflerle görüntülenir. Yine <STRONG></STRONG> gibi, <I></I> yerine <EM></EM> (emphasis) kullanılması önerilmektedir.

<H1></H1>...<H6></H6>: Başlık tag'leri. Dökümanı çeşitli bölümlere ayırmak ve bunları belirtmek için kullanabilirsiniz. ALIGN=LEFT|CENTER|RIGHT parametresi alabilir.

<OL></OL> ve <LI>: Numaralandırılmış liste (ordered list) tag'leri. <OL> ve </OL> listeyi açma ve kapama için, <LI> ise yeni bir eleman tanımlamak için kullanılır. Numaralar otomatik olarak verilir.

<UL></UL> ve <LI>: Numaralandırılmamış liste (unordered list) tag'leri. <UL> ve </UL> listeyi açma ve kapama için, <LI> ise yeni bir eleman tanımlamak için kullanılır. Numara yerine bullet konur.

<FONT></FONT>: Karakter tipini, puntosunu, rengini vermek için kullanılır. Çok kullanılan tag'lerden biridir. Parametre olarak FACE=Font_İsmi (Arial, Helvetica vs gibi), SIZE=x|+/- x (SIZE="3", SIZE="-1" vs gibi), COLOR=#RRGGBB|Renk_İsmi (COLOR="#808080" vs gibi) alabilir. HTML 4.0'da iptal edilmiştir.

<BASEFONT>: Dökümanın genel yazı tipini belirtmek için kullanılır. Parametreleri <FONT> tag'ininkilerle aynıdır. HTML 4.0'da iptal edilmiştir.

<A></A>: Anchor tag'i. HTML'in HTML olmasını sağlayan tag'dir. Metin içinde bir başka yere, Internet üzerinde herhangi bir dökümana, resme ya da herhangi bir servise ulaşılabilmesini sağlar. En gerekli parametre olarak HREF=Kaynak_İsmi alır. Kaynak kısmında kullanılabilecek isimlere örnek olarak:

  • HREF=table_of_contents.html
  • HREF="../"
  • HREF=../MySubDir2/TarDosyası.tar
  • HREF="http://www.ulakbim.gov.tr" /
  • HREF="ftp://cu:cork@efe.ulakbim.gov.tr/" (ftp client'ını açar, efe'ye bağlanır ve kullanıcı ismi olarak cu, password olarak cork verir (şifrem tabii ki cork değil :)
  • HREF=telnet://efe.ulakbim.gov.tr/"
  • HREF=mailto:cu@ulakbim.gov.tr?subject=HTML%20hakkında+cc=cu%40reborn.com (e-mail client'ıny açar, cu@ulakbim.gov.tr adresine, subject'i HTML hakkında olan ve bir kopyası da cu@reborn.com'a gönderilecek bir e-mail taslağı çıkartır. Dikkat edilirse, boşluk yerine %20, @ işareti yerine %40 kullanılmıştır. %Karakter_Hex_Kodu olarak istediğiniz karakteri kullanabilirsiniz. İlk parametreden önce ?, sonrakilerden önce de + kullanılır.)
  • HREF="javascript:alert('Gidebilir miyim')" (bir JavaScript kodu çalıştırır, ve ekrana üstünde Gidebilir miyim? yazan ve OK tuşu olan bir diyalog kutusu çıkartır.)

Ayrıca bir diğer parametresi NAME=Anchor_İsmi'dir. Bu şekilde bir anchor tanımladığınız zaman döküman içinde istediğiniz bir yerden tam bu noktaya zıplamanız mümkündür. Örneğin sayfa en tepesine <A NAME=docTop><A> dediğiniz zaman sayfanın en altına koyduğunuz bir <A HREF=#docTop>Click here to go to top.</A> link'iyle dökümanın en üstüne geri dönülebilmesini sağlarsınız. # işareti önemlidir ve link'in hedefinin bir anchor olduğunu gösterir. Ayrıca <A HREF=../abuk%20subuk/other.html#enalt">bla bla..</A> gibi bir link'le başka bir döküman içindeki bir anchor'a da link koyabilirsiniz.
Tabii ki Anchor tanımlarken hem NAME hem de HREF parametrelerini verebilirsiniz. Böylece aynı anda hem dışarıya link vermiş, hem de dışarıdan link verilebilecek bir blok tanımlamış olursunuz. Örneğin, <A NAME=#giris HREF=gelisme.html>.

<BASE>: Döküman içinde bütün URL'leri uzun uzadıya vermemek için bir ön-ek URL tanımlamak için kullanılır. Parametre olarak HREF=Ön-ek_URL'i alır. Örneğin <BASE HREF=http://www.ulakbim.gov.tr/> verildiği zaman <A HREF=index.html>İçindekiler</A> bulunulan directory'deki değil http://www.ulakbim.gov.tr'e yönlenir. Yine de bu şekilde bir kullanım pek tavsiye edilmemektedir. HEAD bloğunda kullanılmaktadır.

<IMG>: Döküman içine bir resim yerleştirmek için kullanılır. Parametre olarak SRC=Resim_URL'i, WIDTH=Genişlik, HEIGHT=Yükseklik, ALT=Alternatif_Text, LOWSRC=Düşük_Çözünürlükteki_Resim_URL'i alabilir BORDER=Çerçeve_Kalınlığı, HSPACE=x, VSPACE=x (Yatay ve dikey marjinler) alabilir. Çok sık olarak bir <A HREF=....></A> bloğu içine yerleştirilir ve görsel bir link yaratılmış olur.

<SUP></SUP> ve <SUB></SUB>:Sırasıyla superscript ve subscript yazı için kullanılır. Superscript yaptığınız yazı yukarıda, suscript yaptığınız yazı aşağıda görüntülenir. Örneğin x2 (superscripted) ve M1,2 (subscripted).

<BLOCKQUOTE></BLOCKQUOTE>: Alıntı yapmak için kullanılır. Genelde ise bir bloğu toptan içeri indent etmek için kullanılır. Bu dökümandaki kod örnekleri bu tag'le içeri doğru alınmıştır. Indent etmek için kullanılması yüzünden, alıntı yaptığınızda tırnak (") işareti koymanız tavsiye edilmez.

<TT></TT>: Teletype (monospaced, sabit genişlikte) karakter kullanmak için kullanılır. Courier tipik bir teletype karakter tipidir. Bu sayfalardaki bütün kod örnekleri de Teletype stilindedir.

<PRE></PRE>: Önceden düzenlenmiş (preformatted) metin blokları için kullanılır. Normalde, HTML birden çok whitespace'i tek bir boşluk karakteriyle değiştirdiği için, görüntülenmesi başka türlü mümkün olmayan metin blokları bu tag yardımıyla görüntülenebilir. Örneğin:

Welcome to my little corner of tutorial
Here are some formatting that is otherwise impossible

            May   1998
Mon  Tue  Wed  Thu  Fri  Sat  Sun
---------------------------------
 1    2    3    4    5    6    7
 8    9   10   11   12   13   14
15   16   17   18   19   20   21
22   23   24   25   26   27   28
29   30   31

<STRIKE></STRIKE>: Strike-Through (üstü çizili yazı) için kullanılır. Vurgu vermek ya da bir şeyin iptal edildiğini göstermek için kullanılabilir ancak pek rastlanmamaktadır. HTML 4.0'da iptal edilmiştir.

<UL></UL>: Altçizgi çekmek için kullanılır. Kullanılması pek tavsiye edilmeyen bir tag'dir, çünkü link'lerin altında da genellikle altçizgi olduğu için altı çizili düz metinle link'lerin birbirine karışma ihtimali vardır. HTML 4.0'da iptal edilmiştir.

<BIG></BIG> ve <SMALL></SMALL>: Yazıyı yeni bir paragraf açmadan geçici olarak büyütmek ve küçültmek için kullanılır.

<BLINK></BLINK>: Netscape Navigator'ın meşhur yanıp sönen tag'i. Bir çok HTML yazarı işin suyunu kaçırsa da, efektif bir kullanım hala mümkündür.

<CITE></CITE>: Atıf (citation) yapıldığı zaman kullanılır. Genelde italik olarak render edilir.

<CODE></CODE>: Örnek kod (C, Pascal vs gibi) verildiği zaman kullanılır. Genelde Teletype olarak render edilir.

<ADDRESS></ADDRESS>: Adres bölümleri için kullanılır. Genelde italik olarak render edilir.

<SAMP></SAMP>: Örnek çıktı (program, script vs) için kullanılır. Genelde Teletype olarak render edilir.

<ACRONYM></ACRONYM>: Kısaltmalar için kullanılır. Parametre olarak TITLE=Kısaltmanın_Açık_Hali alır. Örneğin, <ACRONYM title="World Wide Web">WWW</ACRONYM>.

NOT: Yukarıdaki son 5 tag çifti genelde pek sık kullanılmasa da kullanılması tavsiye edilmektedir. Dökümanlar içinde arama yapılırken ve bir arama makinesi tarafından endekslenirken yardımcı olabilmektedir. Ayrıca başka benzer tag'ler de mevcuttur.

<APPLET></APPLET>: Döküman içine Java applet'i gömmek için kullanılır. Parametre olarak CODE=Java_Class_Dosyası_URL'i, CODEBASE=Class_Dosyasının_Bulunduğu_Dizin, ARCHIVE=JAR_Dosyası_URL'i, ALT=Alternatif_Metin, ALIGN=LEFT|CENTER|RIGHT, HEIGHT=Yükseklik, WIDTH=Genişlik, MAYSCRIPT (JavaScript'lerle haberleşebileceği) ve NAME=İsim_Bilgisi alabilir. Ayrıca applet'in kullanabileceği parametreleri de, istenildiği kadar PARAM NAME=Applet_Parametresi_İsmi VALUE=Applet_Parametresi_Değeri kullanarak verebilirsiniz. HTML 4.0'da iptal edilmiştir.
HTML 4.0'da şöyle bir kıllanım mevcuttur:

<OBJECT codetype="application/octet-stream"
classid="java:Bubbles.class"
codebase="http://www.ulakbim.gov.tr/~cu/java/"
width="500" height="500">
Ekrana bir sürü baloncuk çizen şirin bir applet
</OBJECT>

<SCRIPT>: Döküman içine JavaScript, VBScript gibi dillerle yazılmış programcıklar gömmek için kullanılır. Parametre olarak LANGUAGE=Script_Dili_İsmi alabilir. Ancak HTML 4.0'da LANGUAGE yerine TYPE parametresi getirilmiştir. Örneğin <SCRIPT LANGUAGE="JavaScript 1.1"> yerine <SCRIPT TYPE=text/javascript> kullanılmalıdır.

<META>: HTML'in en kural tanımayan elemanıdır denilebilir. Parametre olarak bir çok şey alabilir, ancak en çok kullanılan iki tanesi HTTP-EQUIV ve NAME'dir. Genel olarak bir de VALUE ya da CONTENT parametresi takip eder. Örnek olarak:

<META HTTP-EQUIV="Expires" CONTENT="Tue, 10 Jun 1998 12:30:00 GMT">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-9">
<META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://www.ulakbim.gov.tr/">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META NAME="Generator" CONTENT="Visual Page 1.1 for Windows">
<META NAME="Author" CONTENT="Cüneyt YILMAZ">
<META NAME="Keywords" LANG=tr CONTENT="deneme, learning HTML, dummy document">

Yukarıdan da anlaşılabileceği gibi HTTP-EQUIV, HTTP protokolü tarafından desteklenen bazı parametreleri vermek için kullanılır. Örnek olarak, 1. satırdaki tanımlama, dökümanın geçerlilik tarihinin 10 Haziran 1998'de dolacağını belirtir. Bu tarihten sonra kullanıcının bu dökümanı cache'den yüklemesi engellenir ve tekrar orijinal dökümana gitmesi zorlanır.

<EMBED></EMBED>: Döküman içine genelde sık kullanılan plug-in'lerin desteklediği ses, video, animasyon gibi nesnelerin gömülmesi için kullanılır. Parametreler nesnenin tipine göre değişir. Ancak ortak olan bir parametre SRC=Nesne_URL'idir. HTML 4.0'da iptal edilmiştir. Örneğin bir QuickTime 3.0 movie dosyasını şu şekilde gömebilirsiniz:

<EMBED SRC="myMovie.mov" CONTROLLER="FALSE" AUTOPLAY="TRUE" CACHE="FALSE" WIDTH="240" HEIGHT="180">Plug-in'iniz yok mu? Ne kötü!</EMBED>

HTML 4.0 kurallarına göre yeni gösterim şu şekildedir:

<OBJECT DATA="myMovie.mov" TYPE="application/mov">
<PARAM NAME="width" VALUE="240" VALUETYPE="data">
<PARAM NAME="height" VALUE="180" VALUETYPE="data">
<PARAM NAME="controller" VALUE="false" VALUETYPE="data">
<PARAM NAME="autoplay" VALUE="true" VALUETYPE="data">
<PARAM NAME="cache" VALUE="false" VALUETYPE="data">
Plug-in'iniz yok mu? Ne kötü!
</OBJECT>

Ayrıca HTML 4.0'da gelen yeniliklerden bir tanesi de DIR (direction, yön) parametresidir. LTR (left to right) veya RTL (right to left) değerini alabilir. Bir çok blok elemanı içinde kullanılabilir. Örneğin <HTML DIR="RTL"> veya <P DIR=LTR> gibi. Ancak hala bir çok browser tarafından desteklenmemektedir.

Tablolar:

Tablolar, HTML'in sayfa mizampajı açısından en çok kullanılan kısımlarındandır. Her ne kadar büyük bir tabloya elle müdahele etmek bir işkence olabilse de, yine de bilgi açısından ele alınacaktır.

Bir tablo genel olarak şuna benzer.

<TABLE BORDER="2" CELLPADDING="3" CELLSPACING="1" HEIGHT="200" WIDTH="90%" BGCOLOR="#A0A0A0">
<TR>
<TD>1. sütun 1. satır</TD>
<TD>2. sütun 1. satır</TD>
</TR>
<TR>
<TD>1. sütun 2. satır</TD>
<TD>2. sütun 2. satır</TD>
</TR>
<TR>
<TD>1. sütun 3. satır</TD>
<TD>2. sütun 3. satır</TD>
</TR>
</TABLE>

<TABLE> tag'ini açarken BORDER="2" ile çerçevenin kalınlığının 2 pixel, CELLPADDING="3" ile hücre içindeki yazı ile çerçevesi arasında 3 pixel, CELLSPACING="1" ile hücreler arasında 1'er pixel olacağını, HEIGHT="200" ile yüksekliğinin 200 pixel olacağını, WIDTH="90%" ile genişliğinin browser penceresinin %90'ı olacağını ve en son olarak da BGCOLOR="A0A0A0" ile arka fon renginin gri olacağını vermiş olduk. Bunlardan hiçbirini vermemiş olsaydık, browser genişlik, yükseklik ayarlarını hücre içlerindeki dataya göre otomatik yapardı ve kalınlık ve arka fon rengini de varsayılanlardan atardı. Burada dikkat edilmesi gereken bir şey, verdiğiniz yükseklik veya genişlik değerleri, hücre içindeki elemanlardan küçükse, verdiğiniz değerler ihmal edilir ve hücre içindeki elemanları tamı tamına alabilecek en küçük değerler kullanılır.

Tablo tanımlamaları her zaman için satır satır yapılır. Yukarıda görüldüğü gibi <TR> (table row) ile yeni bir satır açıyoruz, ve altına da <TD> (table data) ile elemanlarımızı sıralıyoruz. Sütunla işimiz bittiğinde </TD> ile, satırla işimiz bittiğinde </TR> ile kapatıyoruz. Tabii ki tablomuzla işimiz bittiğinde de </TABLE> ile tablomuzu kapatıyoruz.

Peki burada birinci satırda 2 yerine 1 tane geniş sütun vermek isteseydik ne yapacaktık? İlk satır bilgisini şu şekilde değiştirecektik:

<TR>
<TD COLSPAN="2">1. satır, başlık satırı olabilir</TD>
</TR>

Aynı şekilde 1. sütunda 3 satır yerine tek bir satır kullanmak için şunu yapacaktık:

<TR>
<TD ROWSPAN="2">1. sütun, başlık sütunu olabilir</TD>
</TR>

Aşağıdaki gibi bir tablonun kaynak kodu şu şekildedir.

 

EN UST

EN SOL

SOL IC UST

SAG IC UST

EN SAG EN UST

SOL IC SOL ORTA

SOL IC SAG ORTA

EN SAG ORTA UST

SOL IC ORTA

SAG IC ALT

EN SAG ORTA ALT

SOL IC SOL ALT

SOL IC SAG ALT

EN SAG EN ALT

 

<TABLE BORDER="2" CELLPADDING="2" WIDTH="500" HEIGHT="300">
<TR>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="5"><P ALIGN="CENTER">EN UST</TD>
</TR>
<TR>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="4"><P ALIGN="CENTER">EN SOL</TD>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="2"><P ALIGN="CENTER">SOL IC UST</TD>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="2"><P ALIGN="CENTER">SAG IC UST</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG EN UST</TD>
</TR>
<TR>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SOL ORTA</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SAG ORTA</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG ORTA UST</TD>
</TR>
<TR>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="2"><P ALIGN="CENTER">SOL IC ORTA</TD>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="2"><P ALIGN="CENTER">SAG IC ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG ORTA ALT</TD>
</TR>
<TR>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SOL ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SAG ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG EN ALT</TD>
</TR>
</TABLE>

Yukarıda yeni bir parametre olarak VALIGN (vertical alignment) kullanıldı. VALIGN ile hücre elemanlarının hücrenin yukarısı mı ortası mı yoksa altına mı yaslanacağını belirtebilirsiniz. Sola, sağa yaslamak veya ortalamak için de <P ALIGN=LEFT|CENTER|RIGHT>'ı kullanabilirsiniz.

Tablolarla ilgili iki önemli not:

  1. Hücre içinde hiç bir data yoksa, browser o hücrenin çerçevesini göstermez. Örneğin

     

       
       

    <TABLE BORDER="1" WIDTH="100" BGCOLOR="#C0C0C0">
    <TR>
    <TD WIDTH="50"></TD>
    <TD WIDTH="50">&nbsp;</TD>
    </TR>
    <TR>
    <TD WIDTH="50">&nbsp;</TD>
    <TD WIDTH="50"></TD>
    </TR>
    </TABLE>
  2. Eğer döküman içinde varsayılan bir font kullanıyorsanız bile tablonun her hücresi içinde bunu tekrar tanımlamanız gerekir, çünkü tablolar içinde dökümanın tanımlanan karakter tipinin üstüne varsayılan karakter tipi konur. Örneğin, döküman font'unuzu Helvetica tanımladıysanız ve browser'ın varsayılan font'u Times New Roman ise tablo içinde bütün yazılar Times New Roman olarak görünür.

Veri Giriş FORMları:

Veri giriş formları genelde bir sunucuya bilgi göndermek veya almak için kullanılır. Çok yaygın olarak sunucu tarafında CGI (Common Gateway Interface) kullanılarak gönderilen bilgi işlenir. CGI programları en çok Perl dilinde yazılmakta, ancak C, C++, Java, Unix shell'leri, Phyton, Dos batch file'ları, ya da Windows exe'leri de olabilmektedir. Ayrıca CGI'a alternatif olarak Servlet (Sun'ın tanımladığı Server-Side Java applet'leri), ASP (Microsoft'un tanımladığı Active Server Page'leri) ya da LiveWire (Netscape'in tanımladığı Server-Side JavaScript) de bulunmaktadır. Bu konular şimdilik bu dökümanın konusu dışındadır.

Internet'te çok sık olarak isminizi, yaşınızı, mesleğinizi vs istedikleri formlar görmüşsünüzdür. Örneğin aşağıdaki formu ele alalım:

 

Adınız:
E-mail adresiniz
Şifreniz:
Kullanım tipi: Ticari Kişisel
Mesleğiniz:
Kullandığınız işletim sistemleri:
Düşünceleriniz:
Yorumunuzu Ekleyin

Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

48,413 Okunma Henüz yorum yapılmamış 04/07/2007 20:15:59 29/05/2014 20:16:20

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

46,712 Okunma Henüz yorum yapılmamış 04/07/2007 14:45:54 07/03/2015 14:56:36

HTML5 Form Yapısı ve Form Elemanları

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 .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

42,890 Okunma Henüz yorum yapılmamış 06/07/2007 00:41:58 31/12/2015 00:52:19

Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

41,544 Okunma 2 Yorum 02/01/2014 19:28:21 08/03/2015 16:25:03

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

40,345 Okunma Henüz yorum yapılmamış 04/07/2007 15:22:49 02/07/2019 15:19:14

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

40,091 Okunma Henüz yorum yapılmamış 17/11/2007 01:33:29 22/12/2015 23:06:42

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Ç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

34,378 Okunma 1 Yorum 05/07/2007 15:10:58 19/09/2014 15:14:22

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

31,733 Okunma 2 Yorum 10/07/2007 21:07:41 27/03/2019 00:51:00

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

31,087 Okunma 1 Yorum 02/07/2007 14:43:07 12/05/2014 14:43:16

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

30,623 Okunma Henüz yorum yapılmamış 05/07/2007 14:56:13 12/05/2014 14:56:12

HEAD Tagı Nasıl Kullanılır?

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketlerinin bulunduğu bölümdür.

28,114 Okunma Henüz yorum yapılmamış 26/11/2012 19:54:51 20/12/2015 15:45:41

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

25,115 Okunma Henüz yorum yapılmamış 05/07/2007 11:06:46 17/10/2012 11:52:03

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

24,860 Okunma 1 Yorum 05/07/2007 14:46:47 10/03/2015 10:45:13

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

21,907 Okunma Henüz yorum yapılmamış 04/07/2007 11:53:30 06/03/2015 17:21:28

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

21,817 Okunma Henüz yorum yapılmamış 05/07/2007 02:54:09

FORM Tagı

Form tagı parametreleri

21,385 Okunma Henüz yorum yapılmamış 06/07/2007 02:04:13 16/05/2015 20:06:41

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

21,057 Okunma Henüz yorum yapılmamış 26/11/2012 14:54:25 12/05/2014 14:54:43

HTML nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.

20,603 Okunma Henüz yorum yapılmamış 10/10/2012 20:26:08 29/05/2014 21:38:56

Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir. Arama motorlarına site ve içeriği hakkında bilgi sunar. Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar. Arama motorlarının özellikleri için buraya bakabilirsiniz. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

20,561 Okunma Henüz yorum yapılmamış 05/09/2007 03:38:58

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

20,381 Okunma Henüz yorum yapılmamış 08/10/2012 09:21:06 08/10/2012 09:35:05

xml xhtml html hakkında

Xml Html arasındaki fark

19,922 Okunma Henüz yorum yapılmamış 15/11/2007 02:02:18 15/05/2014 02:02:30

HR Tag

etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

19,508 Okunma Henüz yorum yapılmamış 03/12/2012 11:13:48 03/12/2012 11:17:37

DIV Tagı Nedir?

Web sitelerinin iskeletleri DIV tagı kullanarak oluşturulur. Ayrıca web sitesindeki nesnelerin yerleri DIV tagı ile belirlenir.

17,424 Okunma Henüz yorum yapılmamış 16/12/2013 19:55:52 08/03/2015 15:32:04

BR Tag

Bir alt satıra geçmek için kullanılır.

17,253 Okunma Henüz yorum yapılmamış 03/12/2012 09:35:47 03/12/2012 09:35:55

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

17,107 Okunma Henüz yorum yapılmamış 03/12/2012 10:34:56 05/12/2012 01:50:50

U Tag

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

16,398 Okunma Henüz yorum yapılmamış 03/12/2012 09:37:57 03/12/2012 09:38:20

Yükleniyor...