HTML Dersleri
HTML
(Hyper Text Markup Language) sizlere internet sitesi hazırlamanızda yardımcı olur. Bu dil anlaşılması oldukça kolay, fazla karışık olmayan bir dildir. Günümüzde site yapmak için Frontpage, Dream Weaver gibi programlar kullanılıyorda olsa, profesyonel bir web sitesine imza atmak için bu dili bilmek gereklidir. HTML belgesini not defterinde hazırlayıp sonunu .htm ya da .html olarak kaydetmeniz yeterlidir. Sonra kodların tarayıcı tarafından okunması ve size o şekliyle ulaşmasına tanık olacaksınız. Kısaca bahsedelim...
* * *
TAG (Element)'larla ilgili Genel Bilgi
Bu HTML belgemizin ana dilidir. Açılan ve Kapanan Anahtarlar yardımıyla belgemiz tamamlanır.
Örneğin:
<ELEMENT>içerik</ELEMENT> Şeklinde açarız bilgiyi gireriz ve mutlaka kapatırız. Eğer Elementin kendi özelliğinde kapatılması yoksa tek olarak elemente yer veririz. Bunun gibi durumlarda element sonuna / işareti ekleriz.
Örneğin:
<BR /> gibi...
* * *
Element Özelliklerini Belirtmek
Elementlere ait özellikleri ilk açtığımız element içinde ozellik="deger" şeklinde tarayıcıya bildiririz.
Örneğin:
<ELEMENT ozellik="deger">icerik</ELEMENT>
* * *
<HTML> Elementi
Bu HTML belgemizin ilk ekleyeceğimiz ve son kapatacağımız TAG'ıdır.
* * *
<HEAD> Elementi
HTML TAG'ından sonra gelir ve içerikten önce kapatılır. Bu element sitemiz ile ilgili dil, tanıtım, stil vb. konularda bilgilerin tutulacağı bölüm olacaktır.
* * *
<TITLE> Elementi
HEAD TAG'ından sonra getirilmelidir. Sayfamızın başlığını yazarız. Bu başlık tarayıcının en üst sağ köşesinde görünecektir.
* * *
<BODY> Elementi
HEAD TAG'ının bitişi ile açılır ve
HTML TAG'ının kapanmasından önce kapatılır.
BODY TAG'ı belge içeriğini sunduğumuz kısımdır. Sayfamızın arkaplanı, yazıtipi rengi, link renkleri, kenarlıkları vb. konularda bilgi vermemiz içindir.
* * *
Açıklama Eklenmesi
Açıklama hem işimizi kolaylaştırmak hemde kaynağı inceleyen birine yardım vermek için kullanılması gereken kodlardan biridir. Bu açıklamayı yazmak için
<!-- ve --> elementlerini kullanmalıyız. Açıklama bu iki elementin ortasına gelir. Unutmayın bu açıklama tarayıcıda görünmez ama kaynakta görünecektir.
~ HTML Belgemiz ~
<HTML>
<HEAD>
<TITLE>Başlık</TITLE>
</HEAD>
<BODY>
<!-- Buraya İçerik Gelecek -->
</BODY>
</HTML>
* * *
Yazıların Şekillendirilmesi
Yazı Şekillendirirken <B>, <EM>, <STRONG>, <I>, <SUP>, <SUB>, <DEL>, <CODE>, <U>... gibi TAG'ları kullanmaktayız... Aşağıdaki Örneği ve Sonuçlarını inceleyin...
NOT: <P> paragraf başlangıcı demektir. </P> ile kapatılır.
~ HTML Belgemiz ~
HTML-Kodu:
<p>Bir örnek <b>Kalın Yazıya</b> </p>
<p>Bir örnek <em>Vurgulu Yazıya</em> </p>
<p>Bir örnek <strong>Güçlü Yazıya</strong> </p>
<p>Bir örnek <i>Sağa Yatık Yazıya</i> </p>
<p>Bir örnek <sup>Normalden Yukarıda Yazıya</sup> </p>
<p>Bir örnek <sub>Normalden Aşağıda Yazıya</sub> </p>
<p>Bir örnek <del>Üzeri Çizilmiş Yazıya</del> </p>
<p>Bir örnek <code>Kod Yazısına</code> </p>
<p>Bir örnek <u>Altı Çizili Yazıya</u> </p>
~ Tarayıcıdaki Görüntüsü ~
HTML-Kodu:
Bir örnek Kalın Yazıya
Bir örnek Vurgulu Yazıya
Bir örnek Güçlü Yazıya
Bir örnek Sağa Yatık Yazıya
Bir örnek Normalden Yukarıda Yazıya
Bir örnek Normalden Aşağıda Yazıya
Bir örnek Üzeri Çizilmiş Yazıya
Bir örnek Kod Yazısına
Bir örnek Altı Çizili Yazıya
* * *
<FONT>
Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...
NOT: <BR /> satır atlama isteğini belirtir. Orjinal kullanımı <BR /> olup kapatılmaz.
Özellikleri:
size="deger" Yazının boyutudur. 0 ile başlar ve yükselir.
color="deger" Yazının rengidir. Hex Renk Kodu ya da ingilizce rengin adı olabilir.
face="deger" Yazıtipidir. Arial, Tahoma, Verdana vs. bunlar birer yazıtipidir.
~ HTML Belgemiz ~
HTML-Kodu:
<FONT face="Times New Roman">Times New Roman tarzında bir yazı...</FONT><BR /><BR />
<FONT size="4">4 boyutunda yazı...</FONT><BR />
<FONT size="3">3 boyutunda yazı...</FONT><BR />
<FONT size="2">2 boyutunda yazı...</FONT><BR />
<FONT size="1">1 boyutunda yazı...</FONT><BR /><BR />
<FONT color="#FF0000">Bu yazı #FF0000 rengindedir.</FONT><BR />
<FONT color="red">Bu yazı 'kırmızı' (red) rengindedir.</FONT><BR /><BR />
<FONT size="2" color="#0000FF">Bu yazı 2 boyutunda ve mavi renklidir</FONT><BR /><BR />
~ Tarayıcıdaki Görüntüsü ~
HTML-Kodu:
Times New Roman tarzında bir yazı...
4 boyutunda yazı...
3 boyutunda yazı...
2 boyutunda yazı...
1 boyutunda yazı...
Bu yazı #FF0000 rengindedir.
Bu yazı 'kırmızı' (red) rengindedir.
Bu yazı 2 boyutunda ve mavi renklidir
* * *
<A HREF=""> (Bağlantı-Link Oluşturmak)
Bu element, bir bağlantı oluşturmamızda bize yardımcı olmaktadır. Href="deger" linkimizin nereye varacağıdır. Tırnak işaretleri arasına 3 şekilde gideceği yeri yazarız. Eğer gideceği yer belgemizin içinde ise #gidecegiyer, yerel bir dizinde ise gidecegisayfa.htm ya da web sayfaları arasında ise http://www.siteniz.com şeklinde yazılabilir. Aşağıda örneklerle anlatılanları daha iyi anlayacaksınız.
Özellikleri:
name="deger" vereceğimiz iç link (# ile başlayan) için bir ad belirlemektir.
title="deger" fare ile yazının üstüne geldiğinizde görülecek başlıktır.
target="deger" sayfanın hangi sayfada açılacağını söylememize yarar. Eğer yeni bir sayfada açacaksak burayı farklı isimlerle anlatırız. Hiç kullanmazsak aynı pencerede açılır. Özellikle frame (çerçeve) kullanıyorsak çok işimize yarar.
~ HTML Belgemiz ~
HTML-Kodu:
<A NAME="1"></A><BR /><BR />
<A HREF="#1">Belgemizdeki 1 numaralı noktaya gider.</A><BR />
<A HREF="qbindex.htm">Sayfanın bulunduğu yerdeki qbindex.htm belgesine gider.</A><BR />
<A HREF="http://muratelic.sitemynet.com/">Href'de belirtilen sayfaya gider.</A><BR /><BR />
<A HREF="qbindex.htm" title="Ana Sayfa">Fare ile yazının üstüne tutulduğunda açıklama görülür.</A><BR /><BR />
<A HREF="mailto:muratelic@mynet.com" title="Mail Gönder">Bir E-Mail Bağlantısı Örneği...</A>
~ Tarayıcıdaki Görüntüsü ~
HTML-Kodu:
Belgemizdeki 1 numaralı noktaya gider.
Sayfanın bulunduğu yerdeki qbindex.htm belgesine gider.
Href'de belirtilen sayfaya gider.
Fare ile yazının üstüne tutulduğunda açıklama görülür.
Bir E-Mail Bağlantısı Örneği...
* * *
<IMG SRC=""> (Resim Eklemek)
<IMG> elementi sayfamıza resim eklememiz için gereklidir. Ekleyeceğimiz resmin adresini SRC="" özelliğindeki tırnak işaretleri arasına yazacağız.
Özellikleri:
alt="deger" resmimizin üzerine geldiklerinde görünecek açıklama.
width="deger" pixel olarak resmin genişliğin sayısal değeri.
height="deger" pixel olarak resmin yüksekliğinin sayısal değeri.
border="deger" resmin çerçeve kalınlığı. Kullanılmazsa link durumu hariç görülmez.
~ HTML Belgemiz ~
HTML-Kodu:
<IMG SRC="http://www.venus.gen.tr/programlama/resim.gif"><BR />
<IMG SRC="http://www.venus.gen.tr/programlama/resim.gif" alt="Açıklama"><BR /><BR />
<A HREF="qbindex.htm"><IMG SRC="http://www.venus.gen.tr/programlama/resim.gif"></A><BR />
<A HREF="qbindex.htm"><IMG SRC="http://www.venus.gen.tr/programlama/resim.gif" border="0"></A><BR /><BR />
<IMG SRC="http://www.venus.gen.tr/programlama/resim.gif" width="100" height="50">
<p>
<img src="http://www.venus.gen.tr/programlama/resim.gif" align="right">
Yandaki resim sağ tarafa hizalanmış bir resim. Kullandığımız align özelliğine bakarsanız right yazdığını göreceksiniz. Alternatif şekilleri center (orta) ve left (sola) dir.
</p>
~ Tarayıcıdaki Görüntüsü ~
HTML-Kodu:
[code:1]
Yandaki resim sağ tarafa hizalanmış bir resim. Kullandığımız align özelliğine bakarsanız right yazdığını göreceksiniz. Alternatif şekilleri center (orta) ve left (sola) dir.[/code:1]
Kaynak : http://www.venus.gen.tr/programlama/...-ye-giris.html
