Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleriİçindekiler
HTML, web geliştiricilerin olmazsa olmazı diyebiliriz. Web sitelerinin iskeletini oluşturan bu dil, neredeyse her geliştiricinin yolunun kesiştiği bir teknoloji. Hele ki yeni başlıyorsan, HTML etiketlerini bilmeden ilerlemek imkansız gibi bir şey. Bu yazıda, en çok kullanılan HTML etiketlerini detaylı bir şekilde inceleyeceğiz. Araya bol bol örnek de serpiştireceğim ki kafandaki soruları çözelim. Haydi başlayalım!
İşe En Temelden Başlayalım: <!DOCTYPE html>
Şimdi, HTML dosyasına başlarken yaptığın ilk şey nedir? Tabii ki <!DOCTYPE html> yazmak! Bu etiket, tarayıcıya “Hey! Bu dosya HTML5 standardında yazıldı” diyor. Yani, aslında tarayıcının şaşırmasını engelliyor. Dosyanın en tepesine koyduğun bu satır olmazsa, bazı eski tarayıcılar kodlarını garip yorumlayabilir.
<!DOCTYPE html>
HTML Kodlarını Sarıp Sarmalayan: <html>
HTML dosyasının bütün içeriğini sarıp sarmalayan ana etikettir. Düşün ki bu etiket olmadan, kodlarını kime teslim edeceksin? Tarayıcının, “Ben bu dosyayı ne yapacağım?” diye kafası karışır. Ayrıca bu etiketi kullanırken, içeriğin hangi dilde olduğunu belirtmek iyi bir alışkanlıktır.
<html lang="tr">
<!-- Kodlar buraya gelir -->
</html>
Başlıklar, Meta Bilgiler: <head> ve <meta>
Web sayfasının arka plan işlerini yürüten <head> bölümü, bir nevi sahnenin arkası gibi. Burada sayfanın karakter setini, başlığını (örneğin, tarayıcı sekmesinde görünür), stil dosyalarını ve meta bilgileri tanımlarsın. Meta etiketleri arama motoru optimizasyonunda (SEO) çok önemlidir.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="En çok kullanılan HTML etiketleri hakkında detaylı bilgi">
<meta name="author" content="HTML Geliştirici">
<meta name="keywords" content="HTML, etiketler, web geliştirme">
<title>En Çok Kullanılan HTML Etiketleri</title>
</head>
Görünür İçerik: <body>
Sayfanın gözle görülen tüm içeriği bu etikette barınır. Metinler, görseller, bağlantılar ve her şey burada yer alır. Yani, <head> bölümü sahnenin arkası ise, <body> sahnenin kendisi diyebiliriz.
<body>
<h1>Hoş Geldiniz!</h1>
<p>Bu sayfa en çok kullanılan HTML etiketlerini anlatıyor.</p>
<img src="gorsel.jpg" alt="HTML örneği">
</body>
Hiyerarşik Düzen: <h1> – <h6>
Web sayfasında başlıklar oluşturmak için kullanılan bu etiketler, içeriğe anlam kazandırır. Arama motorları da bu başlıklara bayılır; doğru kullanımı SEO’ya olumlu yansır.
<h1>Sayfa Başlığı</h1>
<h2>Alt Başlık</h2>
<h3>Daha Alt Başlık</h3>
<h4>Küçük Alt Başlık</h4>
<h5>Daha Küçük Alt Başlık</h5>
<h6>En Küçük Alt Başlık</h6>
- Not: Bir sayfada sadece bir tane
<h1>olmalı.
Paragraflar İçin: <p>
Metin bloklarının olmazsa olmazı. Bir yazı yazıyorsan ve bunu düzenli bir şekilde görüntülemek istiyorsan, paragrafları kesinlikle kullanırsın. Paragrafları okumayı kolaylaştırır ve içerik akışını düzenler.
<p>Bu bir paragraf örneğidir.</p>
<p>İkinci bir paragraf yazısı buraya gelir.</p>
Kalın ve İtalik Yazılar: <b> ve <i>
Vurgulamak istediğin kısımları kalın ya da italik yapmak için bu etiketleri kullanırsın. Ancak unutma, günümüzde stil verme işlemleri genelde CSS ile yapılır.
<p><b>Bu metin kalındır.</b></p>
<p><i>Bu metin italiktir.</i></p>
<p><b><i>Bu metin hem kalın hem italiktir.</i></b></p>
Satır Sonlandırma: <br> ve Çizgi: <hr>
- Satır sonlandırmak için
<br>kullanılır. Ancak gereksiz kullanımdan kaçın, zira bazen kodların karmaşık görünmesine neden olabilir. - Sayfa içerisinde bir çizgiyle ayrım yapmak istersen
<hr>etiketi devreye girer.
<p>Birinci satır<br>
İkinci satır</p>
<hr>
<p>Bu paragraf bir yatay çizginin altındadır.</p>
Boş Alan ve Stil: <div> ve <span>
<div>: Blok seviyesinde bir kapsayıcıdır. Genelde bir grup öğeyi düzenlemek için kullanılır.<span>: Satır içerisinde bir metni veya küçük bir bölümü vurgulamak için kullanılır.
<div style="background-color: lightblue; padding: 10px;">
<p>Bu bir div içindeki paragraftır.</p>
</div>
<p>Bu bir <span style="color: red;">span</span> örneğidir.</p>
Script ve Stil Tanımlamaları: <script> ve <style>
<script>: JavaScript kodlarını eklemek için kullanılır.<style>: Sayfa içerisinde CSS tanımlamak için kullanılır (ancak genelde harici dosyalar tercih edilir).
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
h1 {
color: blue;
}
</style>
<script>
console.log('Merhaba Dünya!');
</script>
Tablolar: <table> ve Arkadaşları
Tablo içeriği görünür ve düzenli bir şekilde sunmanın en etkili yollarından biridir. Tablo başlıkları için <th>, veri hücreleri için <td> ve satırları gruplamak için <tr> etiketleri kullanılır.
<table border="1">
<tr>
<th>Ad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
<tr>
<td>Ayşe</td>
<td>30</td>
</tr>
</table>
Bağlantılar: <a>
Web sayfasından başka bir sayfaya veya aynı sayfa içinde başka bir bölüme yönlendirme yapmak için kullanılır.
<a href="https://www.google.com" target="_blank">Google'a Git</a>
<a href="#altBolum">Alt Bölüme Git</a>
Görseller: <img>
Web sayfasına görseller eklemek için bu etiket kullanılır. alt özelliği, görsel yüklenemezse yerine alternatif bir metin gösterir.
<img src="resim.jpg" alt="Güzel bir manzara" width="500">
Liste Öğeleri: <ul>, <ol> ve <li>
Sıralı veya sırasız liste yapmak için bu etiketler kullanılır.
- Sırasız liste için
<ul>kullanılır. - Sıralı liste için
<ol>kullanılır.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Adım 1</li>
<li>Adım 2</li>
<li>Adım 3</li>
</ol>
Bu yazıda en çok kullanılan HTML etiketlerini detaylı bir şekilde ele aldık. Her bir etiketin kullanımını ve örneklerini görerek daha net bir anlayış kazandığını düşünüyorum. Eğer HTML öğrenmeye yeni başladıysan, bu etiketleri sık sık pratiğe dökerek öğrenmeni öneririm. Ayrıca w3schools sayfasınada bakabilirsin. Unutma, HTML web geliştirme dünyasının temel taşlarından biridir!
Hangi HTML etiketleri SEO için daha önemlidir?
Başlık etiketleri (
<h1>,<h2>, vb.),<meta>etiketleri (özellikledescriptionvekeywords),<a>etiketleri (doğru kullanılmış bağlantılar) ve doğru şekilde tanımlanmış resimlerinaltözellikleri SEO açısından oldukça önemlidir.<div>ve<span>arasındaki fark nedir?<div>blok seviyesinde bir kapsayıcıdır ve genelde büyük yapıları organize etmek için kullanılır.<span>ise satır içi bir elemandır ve küçük metin parçalarını vurgulamak veya stillendirmek için tercih edilir.CSS varken neden
<style>etiketi kullanılıyor?Genelde CSS harici dosyalarda tanımlanır, ancak
<style>etiketi, küçük projelerde veya bir dosya için hızlıca stil tanımlamak gerektiğinde kullanılabilir.Hangi etiketlerden kaçınmalıyım?
<font>gibi eski ve HTML5 standartlarına uygun olmayan etiketlerden kaçınmalısınız. Bunun yerine CSS kullanarak stil vermelisiniz.Resim eklerken
altözelliği neden önemli?altözelliği, görsel yüklenemediğinde alternatif bir metin gösterir ve ekran okuyuculara yardımcı olur. Ayrıca SEO’ya katkı sağlar.<script>etiketi neden en alta yerleştirilir?JavaScript kodları
<script>etiketiyle sayfaya eklenir. Bu etiket en üste yerleştirilirse, tarayıcı kodu yüklemeyi tamamlamadan çalıştırmaya başlar ve sayfanın yavaş açılmasına neden olabilir. Bu yüzden genelde sayfanın en altına eklenir.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!