HTML Hakkında
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.
İLK HTML SAYFAMIZ…
Aşağıdaki kodları yeni bir metin belgesi açarak yazın ve deneme.html adında kaydedin
___________________________________________________
.
<HTML>
<HEAD>
<TITLE>Başlık</TITLE>
</HEAD>
<BODY>
<!-- Buraya İçerik Gelecek -->
buraya içerik gelece...
</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.
NOT: <P> paragraf başlangıcı demektir. </P> ile kapatılır.
Aşağıdaki kodları yaptığımız deneme.html belgemizin “ buraya içerik gelecek .” kısmına yazınız ve deneme2.html olarak farklı kaydedin
_______________________________________________________
<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ü böyle olacak "
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.
Aşağıdaki kodları yaptığımız deneme.html belgemizin “ buraya içerik gelecek .” kısmına yazınız ve deneme3.html olarak farklı kaydedin
_______________________________________________________
<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ü böyle olacak "
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.
______________________________________________________
Aşağıdaki kodları yaptığımız deneme.html belgemizin “ buraya içerik gelecek .” kısmına yazınız ve deneme4.html olarak farklı kaydedin
<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>
______________________________________________________
_____________________________________________________
<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.
Aşağıdaki kodları yaptığımız deneme.htm belgemizin “ buraya içerik gelecek .” kısmına yazınız ve deneme5.htm olarak farklı kaydedin
_____________________________________________________
<img src="../images/css_bg_on.giff" width="50" height="50" /></p>
<img src="../images/css_bg_on.giff" width="50" height="50" /></p>
<img src="../images/css_bg_on.giff" width="50" height="50" /></p>
<img src="../images/css_bg_on.giff" width="50" height="50" /></p>
Genelde en çok html kodları webmaster kişileri bilir yani web site yapımında kişiler kullanır...Web sitesi olmayanlar nasıl bilsinki xD
