7. HTML
▸HTML web sayfalarını oluşturmak için
kullanılan standart metin işaretleme dilidir.
Dilin son sürümü HTML5'tir.
HTML, bir programlama dili olarak
tanımlanamaz. Çünkü HTML kodlarıyla kendi
başına çalışan bir program yazılamaz. Ancak
bu dili yorumlayabilen programlar aracılığıyla
çalışabilen programlar yazılabilir.
8. HTML
▸ H= Hyper / bir sayfadan diğerine
ulaşmayı anlatır.
T= Text / Basit bir metni ifade eder.
M= Markup / İşaretleme: Başlık verme,
kalın (bold) yapma gibi basit bazı
biçimlendirmeleri anlatır.
L= Language / İngilizce'yi anlatır.
9. HTML
▸ Bir html elementi
‘tag’ler içinde yazılır.
<p> Bilge Narin </p>
▸ Head içerisine
yazılan ‘title’
dışındaki hiçbir öğe
ekranda
gözükmez.
11. HTML-UYGULAMA
HTML TAGLERİ
▸Temel Tagler
▸ <header>Başlık</header>
<h1>En büyük başlık</h1>
<h2>Daha küçük bir başlık</h2>
<h3>Daha da küçük bir başlık</h3>
<h4>….</h4> <h5>….</h5>
<h6>….</h6>
13. HTML-UYGULAMA
HTML TAGLERİ
▸<p>Bu bir paragraftır</p>(Browserlar p’den önce
ve sonra biraz boşluk ekler)
Lorem İpsum: Dizgi ve baskı endüstrisinde
kullanılan mıgır metinlerdir. Her seferinde ‘buraya
metin gelecek’ yazmak yerine bu anlamsız
metinler yapıştırılır. Böylece dikkat içerikten çok
tasarıma odaklanır.
14. HTML-UYGULAMA
HTML TAGLERİ
▸ <hr> Sayfanın içine çizgi ekleme (kapamaya
gerek olmayan tag / no closing tag)
▸ <br> Yazıyı bir alt satıra geçirme (kapamaya
gerek olmayan tag / no closing tag)
22. HTML-UYGULAMA
HTML TAGLERİ
▸ Alıntı eklemek
<q> Bu bir dipnottur </q>
▸ Link eklemek
<a href= ‘‘http://www.gmail.com’’> Gmail </a>
<a href=#> İletişim Bilgileri</a>
23. HTML-UYGULAMA
HTML TAGLERİ
▸ İmge (resim/grafik) ekleme:
Unutmayalım: Özellikler eşittir ve çift tırnak!
<img src=‘‘hayvanlar.jpeg’’ alt= ‘‘Minik Kuş’’
height=‘‘100’’ width= ‘‘100’’ style="float:right"> </img>
(src=source, default olarak px alır değerleri)
Eğer başka bir klasörde ise:
<img src=‘‘resimler/hayvanlar.jpeg’’>
25. HTML-UYGULAMA
HTML TAGLERİ
▸ <marquee>This text will scroll from right to
left</marquee>
▸ <marquee direction="up">This text will scroll
from bottom to top</marquee>
▸ <marquee direction="down" width="250"
height="200" behavior="alternate"
style="border:solid">
