HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı rehber niteliğinde olacaktır.
HTML etiketler, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketler genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.
Eğer web tasarımıyla ilgileniyor ya da web geliştirme konusunda kendinizi geliştirmek istiyorsanız, bu rehber tam size göre!
İçindekiler
Temel HTML İskeleti
Bir HTML sayfasının temel yapısı şu şekildedir:
1 2 3 4 5 6 7 8 | <html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Bu bir örnek HTML iskeletidir.</p> </body> </html> |
<html>: Tüm HTML kodlarını kapsar.<head>: Meta bilgileri, başlık, stil ve script dosyalarını içerir.<body>: Görünen içeriğin bulunduğu alan.
Başlık Etiketleri
Başlık etiketleri, web sayfasının içeriğini hiyerarşik bir yapıda düzenler. Arama motorları, başlık etiketlerini içerik sıralamasında önemli bir sinyal olarak kabul eder.:
1 2 3 | <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> |
<h1>: En büyük başlık.<h6>: En küçük başlık.
Metin Etiketleri
Metinleri farklı şekillerde biçimlendirmek için kullanılan etiketler:
Biçimlendirme
1 2 3 | <b>Kalın Yazı</b> <i>İtalik Yazı</i> <u>Altı Çizili Yazı</u> |
Paragraf
Metinlerinizi paragraflar halinde düzenlemek için kullanılır:
1 | <p>HTML etiketleri, web tasarımında önemli bir rol oynar.</p> |
Link Ekleme
Bir metni veya alanı tıklanabilir yapmak için:
1 | <a href="https://www.google.com" target="_blank">Google'a Git</a> |
href: Bağlantının adresini belirler.target="_blank": Linkin yeni bir sekmede açılmasını sağlar.
Resim Ekleme
Bir görseli sayfaya eklemek için:
1 | <img src="resim.jpg" alt="Açıklama" width="300" height="200"> |
src: Resmin dosya yolunu belirtir.alt: Resim yüklenemezse gösterilecek açıklama.widthveheight: Resmin boyutları.
Listeler
Belirli öğeleri listelemek için kullanılır:
Sırasız Liste
1 2 3 4 | <ul> <li>Madde 1</li> <li>Madde 2</li> </ul> |
Sıralı Liste
1 2 3 4 | <ol> <li>Madde 1</li> <li>Madde 2</li> </ol> |
Tablolar
Tablo oluşturmak için kullanılan temel etiketler:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table border="1"> <tr> <th>İsim</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>25</td> </tr> <tr> <td>Ayşe</td> <td>22</td> </tr> </table> |
<table>: Tabloyu oluşturur.<tr>: Satır ekler.<td>: Hücre oluşturur.<th>: Başlık hücresi.
Form Etiketleri
Kullanıcıdan veri almak için:
1 2 3 4 5 | <form action="/gonder" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"> <button type="submit">Gönder</button> </form> |
<form>: Form başlangıcı.<input>: Veri giriş alanı.<button>: Form gönderme düğmesi.
Kod Gösterimi
Bir metin içerisinde kod göstermek için:
1 | <code>System.out.println("Merhaba Dünya!");</code> |
Medya Etiketleri
Video Ekleme
1 2 3 | <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video> |
Ses Ekleme
1 2 3 | <audio controls> <source src="ses.mp3" type="audio/mpeg"> </audio> |
