HTML (Hypertext Markup Language)
• HTML, metin yapılandırma dilidir.
– SGML döküman formatının sadeleştirilmiş hali
– 1989 Tim Berners-Lee tarafından geliştirilmiş
– HTML dökümanlarının uzantısı .html’dir.
• HTML dökümanların network ortamında sunumu ve bunların birbirlerine bağlantısının
sağlanması için kullanılır.
• Internet tarayıcısı (Internet browser) html sayfalarını görmek için gerekli bir programdır.
– İlk internet gezgini (Mosaic) 1993’te geliştirildi.
– Mosaic’i geliştirenler sonradan Netscape’e geçti.
World Wide Web (WWW) konsorsiyumu 1994 kuruldu, görevi standartlar oluşturmak ve farklı
platformlarda aynı performansın gösterileceğinden emin olmak. ([Link]
Tarihsel Gelişim
W3C (Wolrd Wide Web Consortium)
[Link] ziyaret edelim…
Can I use ….?
[Link] ziyaret edelim…
Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
içerik..
</body>
</html>
Kısaca açıklayalım…
Web Sayfasını Tanımlama (DOCTYPE)
Etiket Yapısı
Açılış ve kapanış etiketleri olduğu gibi, kapanış etiketi bulunmayan etiketlerde mevcuttur. Örneğin
<br>.
<etiket> .. </etiket>
Kapanış etiketi bulunmayanlarda:
<etiket />
Örnek:
<p>Bu bir paragraf örneğidir.</p>
<hr>
<p>Bu bir paragraf örneğidir.</p>
Nitelik veya öznitelik
<img src="[Link]">
Yorum Eklemek
<!-- yorum -->
<!--
çok satırlı
yorum örneği
-->
Not: Şimdi sayfa kaynağına bakalım…
Metinlerle Çalışalım
Başlıklar
<h1>Başlık Örneği</h1>
<h2>Başlık Örneği</h2>
<h3>Başlık Örneği</h3>
<h4>Başlık Örneği</h4>
<h5>Başlık Örneği</h5>
<h6>Başlık Örneği</h6>
Paragraf
<p>Bu bir paragraf örneğidir.</p>
Not: Ekstra Boşluk Bırakalım…
Satır Sonu <br>
<p>Bu bir paragraf örneğidir.</p>
<br>
<p>Bu bir paragraf örneğidir.</p>
Önceden belirlenen biçimde metinler (<pre>)
<pre>
Bu bir paragraf örneğidir.
Bu bir paragraf örneğidir.
</pre>
Not: Şimdi boşluk bırakalım.
Metinlerde Biçimlendirme
HTML, CSS’ten eskidir ve daha halen bazı biçimlendirme etiketleri kullanılmaktadır. Bunları CSS ile
yapmanız tavsiye edilir.
<b> <strong> : Kalın yazı
<i> <em> : Eğik yazı
<mark> - Bakalım… (önemli olduğunu gösteren sarı ile boyanmış metin)
<small> - Küçük yazı
<del> - Üzerine çizgi
<ins> - Eklenmiş yazı
<sub> - Alt simge yazı
<sup> - Üst simge yazı
Link (Bağlantı)
<a href="[Link] Feyzi SATICI’nın Web Sayfasına
Bağlantı</a>
Üç çeşit bağlantı vardır:
1. Gerçek adrese bağlantı vermek
2. Sanal adrese bağlantı vermek
3. Sayfa içi bağlantı vermek
Örnek 1: Yukarıdaki örnek veya aşağıdaki örnek
<a href="[Link] Feyzi SATICI’nın
Web Sayfasına Bağlantı</a>
Örnek 2:
<a href="[Link]">Hakkımda</a>
Örnek 3:
<p>
<a href="#sayfabasi">Sayfa Başı</a> <br>
<a href="#sayfasonu">Sayfa Sonu</a>
</p>
<div id="sayfabasi">
..
<div id="sayfasonu">
Bağlantıların TARGET Özniteliği
_self – mevcut sekmede
_blank – yeni sekmede
Örnek 4:
<a href="[Link] target="_blank"> Google (Yeni sekmede açılır)</a>
Hadi deneyelim….
Resimler
<img src="[Link]" alt="Resim yoksa görünür, engelliler için faydalıdır"
title="Bu başlık üzerine gelince görünür" width="300" height="200">
Resimlere Bağlantı Verelim
<a href="[Link]
<img src="[Link]">
</a>
Listeler
İki çeşidi mevcuttur. ol (ordered list) ve ul (unordered list)
<ul>
<li>Elma</li>
<ol>
<li>Amasya</li>
<li>Golden</li>
<li>Fuji</li>
</ol>
<li>Armut</li>
<li>Kiraz</li>
</ul>
Tablolar
Örnek 1
<table border="1" width="100%">
<tbody>
<tr>
<td>Elma</td>
<td>Armut</td>
</tr>
<tr>
<td>Amasya</td>
<td>Deveci</td>
</tr>
</tbody>
</table>
Örnek 2
<table border="1" width="100%">
<thead>
<tr>
<th>Ay</th>
<th>Sıra</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ocak</td>
<td>1</td>
</tr>
<tr>
<td>Şubat</td>
<td>2</td>
</tr>
</tbody>
</table>
Not: span özelliğine bakalım… colspan ve rowspan
Özel Karakterler
Boşluk Karakteri (Kullanmayın)
<p> Örnek metin </p>
<p> Örnek
metin </p>
Diğer Birkaç Karakter
Kaynak: [Link]
HTML’de Klasor ve Yol Özellikleri
<img src="[Link]">
<img src="img/[Link]">
<img src="/img/[Link]">
<img src="../[Link]">
<img src="[Link]
Meta Etiketler
Meta – charset: Head etiketleri arasında bulunurlar. Tarayıcıya ve arama motorlarına yönelik bazı
bilgiler içerirler. En çok kullanılanlarından birisi charset özniteliği ile birlikte kullanılanıdır.
<meta charset="utf-8">
Title: Head etiketleri arasında bulunur ve favori olarak kaydedilirken etiketini belirler.
<title>İlk Sayfam </title>