HTML (Hyper Text Markup Language), Web sayfaları oluşturmak için kullanılan işaretleme dilidir.
Kullandığımız Chrome, Firefox , Opera İnternet Explorer gibi tarayıcılar HTML kodlarını işleyerek bu kodları web sayfasına dönüştürür.
Bir web sayfasında görüntülenen tablo, paragraf, başlık vb. tüm içerik HTML Etiketlerinden oluşur.
Bu derste HTML ile kendi Web Sayfanızı oluşturabileceksiniz. Çünkü HTML öğrenmek oldukça kolaydır.
Aşağıda en basit haliyle bir HTML belgesini görüyorsunuz.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<title>Ben tarayıcıda görünen başlık metniyim 🙂</title>
</head>
<body>
<h1>Bu bir Başlık</h1>
<p>Bu da benim ilk paragrafım. Merhaba HTML. Merhaba Dünya</p>
</body>
</html>
|
Yukarıdaki HTML kodlarını açıklamaya geçmeden önce bir soruya cevap verelim.
[the_ad id=”775″]
HTML Kodları Nereye Yazılır?
Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri gibi bir metin editörü ile Html sayfaları oluşturabilirsiniz.
Kod yazmayı daha kolay hale getirmek için dreamwear, Sublime Text, Brackets veya Notepad++ gibi programlar kullanılabilir. Yazılan html kodları kaydedilirken;
htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.
Biz örneklerimizde metin düzenleyicisi olarak Bracketsprogramını kullanacağız.
HTML Yazım Kuralları:
HTML Etiketleri (tag) “<” ve “>” işaretleri arasına yazılır.
Bir HTML öğesi genellikle içeriğin arasına yerleştirilen bir başlangıç etiketi ve bitiş etiketinden oluşur. Örnek: <p>…….</p>
Bitiş etiketi, başlangıç etiketi gibi yazılır, ancak etiket adından önce bir “/” eklenir. “<html> </html>” , “<p> </p>” vb.
HTML Belgesi:
Yukarıda en basit haliyle yazdığımız HTML kodlarını açıklayalım.
<!DOCTYPE html> bildirimi belgeyi HTML5 olarak tanımlar.
<html> </html> Tüm etiketleri saran, html kodu ile kodlama işleme yapılması gerektiğini belirten sayfanın başında açılarak sayfanın sonunda da kapatılan etiketin adıdır. <html> … </html> şeklinde açılmalı ve kapanmalıdır.
<head> </head> etiketi belge hakkında meta bilgileri içerir. Bu bölümdeki yazılan hiç bir şey sayfada görünmez. Meta öğeleri genellikle sayfa açıklaması, anahtar kelimeler, belgenin yazarı, son değiştirilen ve diğer meta verileri belirtmek için kullanılır.
<title> </title> bu etiketler arasına yazdıklarınız tarayıcınızda başlık olarak görüntülenecektir.
<body> </body> Sayfamızın içeriği ile ilgili tüm HTML kodları buraya yazılacaktır. Başlıklar, paragraflar, resimler, videolar, listeler vb..
Html belgesinin temel etiketlerini açıkladık. Artık içerik oluşturmak için kullanılan HTML Kodlarına (HTML Etiketleri) geçelim.
HTML Başlık Ekleme Kodları
HTML’ de başlıklar <h1> .. <h6> etiketleriyle oluşturulur.
Başlık boyutu <h1> den <h6> y< doğru küçülür. Önemli başlıklar için <h1> etiketi kullanılır. Aşağıdaki örnekte tüm başlıklara ait (<h1> den <h6> ya kadar) görünümleri inceleyebilirsiniz.
Html Kodları:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>yazilimkodlama.com</title>
</head>
<body>
<h1>BAŞLIK 1</h1>
<h2>BAŞLIK 2</h2>
<h3>BAŞLIK 3</h3>
<h4>BAŞLIK 4</h4>
<h5>BAŞLIK 5</h5>
<h6>BAŞLIK 6</h6>
</body>
</html>
|
HTML Paragraf Ekleme
HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.
HTML Paragraf Ekleme Kodları:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>yazilimkodlama.com</title>
</head>
<body>
<p>Bu bir paragraftır.</p>
<p>Bu ikinci paragraftır.</p>
</body>
</html>
|
HTML Alt Satıra Geçme
HTML dokümanında alt satır geçmek için klavyeden ENTER tuşuna basmanız bir işe yaramayacaktır.
<br> etiketi satır sonu olduğunu belirtir. Eğer paragraf kullanmadan bir alt satıra geçmek isterseniz <br> etiketi kullanmalısınız.
[the_ad id=”144″]
HTML Alt Satıra Geçme Kodları:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>yazilimkodlama.com</title>
</head>
<body>
<h1>İSTİKLAL MARŞI</h1>
<p>Korkma, sönmez bu şafaklarda yüzen al sancak;<br>
Sönmeden yurdumun üstünde tüten en son ocak.<br>
O benim milletimin yıldızıdır, parlayacak;<br>
O benimdir, o benim milletimindir ancak.<br>
</p>
</body>
</html>
|
HTML Biçimlendirme Etiketleri
HTML <abbr> Etiketi:
HTML <ABBR> etiketi, içerdiği kelimenin, bir kelime veya kelime grubunun kısaltılmış hali olduğunu belirtir. Bununla birlikte baş harflerinden oluşan kısaltma tanımlanmasını sağlayan <ACRONYM> etiketine HTML 5‘te hiç yer verilmediği için her türlü kısaltmada alışkanlık açısından <ABBR> etiketi ile kullanılmalıdır.
HTML Sözdizimi ve Özellikler
| <ABBR | |
|---|---|
| id= | Eşsiz kimliğini belirtir. |
| class= | Sınıf adını belirtir. |
| style= | CSS kuralları tanımlar. |
| title= | Kısaltılmış kelimeyi veya kısaltma hakkında kısa bilgi belirtir. |
| lang= | İçerdiği metnin lisanını belirtir. |
| dir= | İçerdiği metnin yönünü belirtir. |
| > | |
HTML <address> Kodu
HTML <address> etiketi, bir belgenin veya makalenin iletişim bilgilerini (yazar / sahibi) tanımlar.
elemanı genellikle italik olarak görüntülenir. Çoğu tarayıcı, öğeden önce ve sonra bir satır sonu ekler.
|
1
2
3
4
5
6
7
8
9
|
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
|
HTML mailto ve tel bağlantısı oluşturma
mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi. Bağlantıya tıklandığında mail programında gönderilecek kişi e-posta adresi verilen bağlantıya göre doldurulacaktır.
tel:telefon numarası verilecek kişinin numarası yazılır. Bu özellik mobil cihazlarda çalışacaktır. Bu bağlantı üzerine tıklandığında verilen telefon numarası çevrilecektir.
|
1
2
3
4
5
|
<a href=“mailto:ornek@hotmail.com”>Örnek Adlı kişinin mail adresi</a>
<a href=“+902121001010”>Benim Numaram Değil (+902121001010)</a>
|
HTML Yorum Etiketi:
Yorum etiketleri, HTML kaynak koduna yorum eklemek için kullanılır.
Aşağıdaki sözdizimini kullanarak HTML kaynağınıza yorum ekleyebilirsiniz:
|
1
2
3
|
<!– Yorumunuzu buraya yazın –>
|
HTML Link Kodu Kullanma
Linkler neredeyse tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya doğru yönlendirilmesi için kullanılır. Örneğin bu sitede tıkladığınız her menü link kullanılarak yönlendirilmektedir. Eğer bağlantının farklı pencerede açılması istenirse target=”_blank” özelliği eklenmelidir.
Örnek Kullanım:
|
1
2
3
|
<a href=“https://www.yazilimkodlama.com/” target=“blank”>Anasayfaya Gidin.</a>
|
Kodlar çalıştığında aşağıdaki gibi olacaktır.
HTML Image – Resim Ekleme Kodu
Bir web sayfasında bulunan resimle sayfanın göze daha hoş görünmesini sağlayacaktır. HTM sayfasına resim eklemek için örnek kod;
|
1
2
3
|
<img src=”tablo.jpg” alt=”HTML Tablo Örneği”>
|
HTML’de, görüntüler <img> etiketi ile tanımlanır.
<img> etiketi diğer etiketler gibi </img> şeklinde kapatılmaz. Yukarıdaki kullanımı inceleyin.
src niteliği, görüntünün URL’sini (web adresi) belirtir.
alt niteliği bir görüntü için alternatif bir metin sağlar, Bu çeşitli nedenlerle olabilmektedir. Örneğin kullanıcı bir nedenden dolayı görüntüleyemiyorsa (yavaş bağlantı nedeniyle veya src niteliğinde bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa gibi..
Bu sebele alt özelliğine verilecek değer resmi açıklayıcı, resimle alakalı olmalıdır.
HTML Tablo Oluşturma Kodu
Bir HTML tablosu <table> </table> etiketi ile tanımlanır.
Her tablo satırı <tr> </tr> etiketi ile tanımlanır.
Tablo başlığı <th> </th> etiketi ile tanımlanır. Varsayılan olarak tablo başlıkları kalın ve ortalanmış yazılacaktır.
Tablo hücreleri tanımlamak için <td> </td> etiketleri kullanılır.
Örnek:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>yazilimkodlama.com</title>
</head>
<body>
<h2>HTML Tablolar</h2>
<table>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ali</td>
<td>Ergül</td>
<td>50</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Türk</td>
<td>45</td>
</tr>
<tr>
<td>Fatma</td>
<td>Duru</td>
<td>30</td>
</tr>
</table>
</body>
</html>
|
HTML Liste oluşturma Kodları:
HTML sayfalarında listeler Sıralı Liste ve Sırasız Liste olarak iki çeşittir.
HTML Sırasız Liste Oluşturma
Sırasız listeler <ul> </ul> etiketiyle tanımlanır. Daha sonra her bir eleman <li> </li> etiketleri arasında belirtilir. Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.
Örnek:
|
1
2
3
4
5
6
7
|
<ul>
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
|
Ekran Çıktısı:
- Kahve
- Çay
- Süt
Sırasız listelerde liste işareti çeşitli şekiller alabilir.
