rankend
Administrator
 Uyarı Sev. : 
 Mesaj Sayısı : 2210
 Paylasım Gücü : 5979
 Rep Point : 131
 Kayıt tarihi : 20/10/09
 Yaşım : 32
 Nerden : Bodrum
 Ruh : 
 Grafik Düzey : Profesyonel
 Tarayıcın : Chrome
 | | Konu: HTML Giriş C.tesi Kas. 28, 2009 12:09 am | |
| 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: içerik
Ş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: icerik
* * *
Elementi
Bu HTML belgemizin ilk ekleyeceğimiz ve son kapatacağımız TAG'ıdır.
* * *
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.
* * *
* * *
Yazıların Şekillendirilmesi
Yazı Şekillendirirken , , , , , , , , ... gibi TAG'ları kullanmaktayız... Aşağıdaki Örneği ve Sonuçlarını inceleyin...
NOT:
paragraf başlangıcı demektir.
ile kapatılır.
~ HTML Belgemiz ~
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
~ 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
* * *
Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri 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 Belgemiz ~
HTML-Kodu:
"Times New Roman">Times New Roman tarzında bir yazı...
"4">4 boyutunda yazı...
"3">3 boyutunda yazı...
"2">2 boyutunda yazı...
"1">1 boyutunda yazı...
"#FF0000">Bu yazı #FF0000 rengindedir.
"red">Bu yazı 'kırmızı' (red) rengindedir.
"2" color="#0000FF">Bu yazı 2 boyutunda ve mavi renklidir
~ 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
* * *
(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 [Linkleri görebilmek için üye olun veya giriş yapın.] ş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:
"1">
"#1">Belgemizdeki 1 numaralı noktaya gider.
"qbindex.htm">Sayfanın bulunduğu yerdeki qbindex.htm belgesine gider.
"http://muratelic.sitemynet.com/">Href'de belirtilen sayfaya gider.
"qbindex.htm" title="Ana Sayfa">Fare ile yazının üstüne tutulduğunda açıklama görülür.
"mailto:muratelic@mynet.com" title="Mail Gönder">Bir E-Mail Bağlantısı Örneği...
~ 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...
* * *
(Resim Eklemek)
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:
"http://www.venus.gen.tr/programlama/resim.gif">
"http://www.venus.gen.tr/programlama/resim.gif" alt="Açıklama">
"qbindex.htm">"http://www.venus.gen.tr/programlama/resim.gif">
"qbindex.htm">"http://www.venus.gen.tr/programlama/resim.gif" border="0">
"http://www.venus.gen.tr/programlama/resim.gif" width="100" height="50">
"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.
~ Tarayıcıdaki Görüntüsü ~
HTML-Kodu:
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.
Kaynak : [Linkleri görebilmek için üye olun veya giriş yapın.] | |
|
