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...
----------------------------------------------------
eTAG (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: 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 ~
----------------------------------------------------
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 Ve Anlamları
----------------------------------------------------
Açıklama Eklenmesi
Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...
NOT: satır atlama isteğini belirtir. Orjinal kullanımı 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 Ve Anlamları
----------------------------------------------------
<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 Kodu
Kodun Anlamı
----------------------------------------------------
<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 (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...
----------------------------------------------------
eTAG (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: 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 ~
Kod:
<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 Ve Anlamları
Kod:
<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>Açıklama Eklenmesi
Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...
NOT: satır atlama isteğini belirtir. Orjinal kullanımı 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 Ve Anlamları
Kod:
<FONT face="Times New Roman">Times New Roman tarzında bir yazı...</FONT>
<FONT size="4">4 boyutunda yazı...</FONT>
<FONT size="3">3 boyutunda yazı...</FONT>
<FONT size="2">2 boyutunda yazı...</FONT>
<FONT size="1">1 boyutunda yazı...</FONT>
<FONT color="#FF0000">Bu yazı #FF0000 rengindedir.</FONT>
<FONT color="red">Bu yazı 'kırmızı' (red) rengindedir.</FONT>
<FONT size="2" color="#0000FF">Bu yazı 2 boyutunda ve mavi renklidir</FONT><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 Kodu
Kod:
<A NAME="1"></A>
<A HREF="#1">Belgemizdeki 1 numaralı noktaya gider.</A>
<A HREF="qbindex.htm">Sayfanın bulunduğu yerdeki qbindex.htm belgesine gider.</A>
<A HREF="http://muratelic.sitemynet.com/">Href'de belirtilen sayfaya gider.</A>
<A HREF="qbindex.htm" title="Ana Sayfa">Fare ile yazının üstüne tutulduğunda açıklama görülür.</A>
<A HREF="mailto:[email protected]" title="Mail Gönder">Bir E-Mail Bağlantısı Örneği...</A>
Kod:
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.
Son düzenleme yönetici tarafından yapıldı: