2. HTML ( Hyper Text Markup
Language )
0 Html web sayfalarının yapımında kullanılan bir dildir.
Diğer programlama dillerinden farklı yönü sadece
görsel düzenleme için kullanılmasıdır.
2
3. HTML
0 Html herhangi bir text editörle (Notepad, Word,...)
hazırlanabilir. Fakat bunun yerine web sayfası
tasarımı için Dreamweaver, FrontPage, Netscape
Composer gibi gelişmiş araçlar da kullanılabilir
3
4. HTML
0 Bir html dokümanı hazırlandıktan sonra kaydedilirken
dosya_adi.htm veya dosya_adi.html olarak
kaydedilmelidir.
0 Dosya isminizde Türkçe karakter kullanmamaya özen
gösterin, çünkü bazı web tarayıcıları Türkçe
karakterleri algılayamadıkları için sayfalarınızı
açamayacaklardır.
4
5. HTML
0 Web’ deki öncelikli amaç, herkesin yayıncılık
yapmasını sağlayacak standart ve geliştirilmesi
basit bir sistem kurmaktı.
0 HTML’in özellikleri ilk günlerinden bu yana oldukça
uzun bir yol aldı. Bugün, HTML için üç ayrı standart
tanımlanmıştır.
Bunlar:
0 HTML 1.0
0 HTML 2.0
0 HTML 3.0
5
6. HTML
0 Bugün artık genel olarak HTML 2.0 ve HTML 3.0
kullanılmaktadır. HTML 3.0 da eklenen özellikler ise
şunlardır:
0 Sayfa düzeni üzerinde ileri derecede kontrol
0 Manşetler
0 Görüntülerdeki popüler noktaların istemci tarafından
işlenmesi
0 Özelleştirilmiş listeler
0 Matematik denklemler
0 Stil yaprakları
0 Form içi tablolar
6
7. HTML
0 HTML dokümanımızda hangi standartları
kullanacağımızı dokümanımızın başında
belirtmemiz gerekir . Bu sayede, dokümanı
görüntüleyen bilgisayar neye göre işlemler
yapacağını bilir.
7
8. YAZIM KURALLARI
- Komutlar büyük yada küçük harfle yazılabilir.
- Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) karakterleri
içermez.
- Komutlar < ve > işaretleri arasında yazılır ve
tagadını alırlar.
8
10. KULLANILIŞ BİÇİMİ
- Taglar iç içe yer alırlar ve en içteki tag'dan
başlatılarak kapatılırlar. Kodların okunabilirliğini
artırmak için bir tag bitmeden tekrar tag açılırsa içeride
açılan tag biraz daha içeriden yazılmalıdır.
Kullanılış biçimi :
<tag_1>
<tag_2>
......
</tag_2>
</tag_1>
10
12. HTML KOMUT YAPISI
1. <HTML>
<html> etiketi, html kodlarının
yazımına başladığımızı
gösteren etikettir. Tüm html
kodları <html>…</html>
arasında yer alır. </html> ile
html kodlarının yazımının bittiği
anlaşılır. Bu etiketin hiçbir
parametresi yoktur.
12
13. HTML KOMUT YAPISI
2. <HEAD>
Kodlardan da anlaşılabileceği
gibi bu iki kod normal olarak
sayfada görüntülenmez ancak
bütün sayfayı etkileyen içeriği
barındırır. Bir anlamda kod
sayfanızın beynidir diyebiliriz.
İçeriğinde stil sayfası
bağlantısı, yazı karakteri, meta
taglar ve title (başlık) öğeleri
bulunur.
13
14. HTML KOMUT YAPISI
3. <BODY>
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.
14
15. BODY ETİKETİ PARAMETRELERİ
0 Body etiketi ile birlikte
kullanılabilecek parametreler ve
görevleri aşağıda gösterilmiştir.
Bgcolor: Hazırlamış olduğunuz
web sayfasının arka plân rengini
belirlemek için kullanılır.
Kullanımı;
<body bgcolor=”blue”>…</body>
15
16. BODY ETİKETİ PARAMETRELERİ
Background: Hazırlamış olduğunuz web sayfasının
zemininin bir resimden oluşmasını isteyebilirsiniz. Bu
parametre arka plânda kullanılmak istenilen resmi
belirlemek için kullanılır.
Kullanımı;
<body background=”resim.jpg”>….</body>
16
17. BODY ETİKETİ PARAMETRELERİ
Link: Web sayfanızda kullanacağınız
linklerin rengini belirlemek için kullanılır.
Alink: Web sayfanızdaki herhangi bir
Linke tıklandığı zaman oluşacak rengin
ne olacağını belirlemek için kullanılır.
Vlink: Web sayfanızdaki önceden ziyaret
edilmiş linklerin renginin hangi renk
olacağını belirlemek için kullanılır.
17
18. Girilecek Kod Görevi
text = “renk” Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.
link = “renk” Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.
vlink = “renk” Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir.
alink = “renk” Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir.
bgcolor = “renk” Sayfanızın arka plan rengine renk ile tanımlı değeri verir.
background =
“resim_dosyası”
Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız,
resim_dosyası kullanacağınız resmin adını temsil eder.
topmargin =
“değer”
Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan
uzaklığını belirler.
leftmargin =
“değer”
Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan
uzaklığını belirler.
rightmargin =
“değer”
Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan
uzaklığını belirler.
onload = “betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload =
“betik”
Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan
uzaklığını belirler. 18
19. HTML KOMUT YAPISI
4. <TITLE>
Sayfa başlığımızı (sayfamızın
durum çubuğunda görünecek
adını) atamamızı sağlayan
koddur. Bu yazıyı değiştirmek için
bu kodların arasına istediğiniz
metni yazmanı yeterlidir.
Kullanımı;
<title> görüntülenmesini
istediğiniz başlık</title>
19
