---
- HTML (HyperText Markup Language) → Web sayfalarının iskeletidir.
- Tarayıcıya “şunu başlık yap, bunu paragraf yap, şu resmi göster” gibi talimatlar verir.
- CSS 🎨 tasarımı, JavaScript ⚡ etkileşimi ekler ama HTML olmadan ikisi de işe yaramaz.
Her HTML dosyası genelde bu iskeletle başlar:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>İlk HTML sayfamı yazıyorum 🚀</p>
</body>
</html>📌 Açıklama:
<!DOCTYPE html>→ HTML5 kullanıldığını belirtir.<html>→ Sayfanın kapsayıcısıdır.<head>→ Ayarlar, meta bilgiler ve başlık içerir.<body>→ Kullanıcıya görünen içeriktir.
<h1>En büyük başlık</h1>
<h2>İkinci seviye başlık</h2>
<h6>En küçük başlık</h6><p>Bu bir paragraf.</p><a href="https://github.com/">GitHub'a git</a><img src="resim.jpg" alt="Açıklama metni" width="300"><ul>
<li>Liste 1</li>
<li>Liste 2</li>
</ul>
<ol>
<li>Sıralı liste 1</li>
<li>Sıralı liste 2</li>
</ol>href→ link adresi 🔗src→ resim veya medya yolu 🖼️alt→ görme engelliler için açıklama ♿id→ eleman kimliği 🆔class→ gruplama 🏷️
Kullanıcıdan bilgi almak için:
<form action="/gonder" method="POST">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim">
<label for="sifre">Şifre:</label>
<input type="password" id="sifre" name="sifre">
<button type="submit">Gönder</button>
</form>Modern webde anlamlı etiketler kullanılır:
<header>Üst kısım (logo, menü)</header>
<nav>Gezinme menüsü</nav>
<main>Sayfanın ana içeriği</main>
<article>Makale ya da içerik</article>
<section>Kapsayıcı bölümler</section>
<footer>Alt kısım</footer>✨ SEO ve erişilebilirlik için çok önemlidir!
❌ Kapatılmamış etiketler (<p> açıp kapatmamak).
❌ alt yazısı koymadan resim kullanmak.
❌ Her şeyi <div> içine yazmak (semantik HTML’i yok saymak).
❌ <br> ile boşluk bırakmaya çalışmak (CSS kullan).
- Kod yazarken girintilere (indentation) dikkat et ➡️ düzen önemli.
- Kodlarını denemek için CodePen 🔥 veya JSFiddle kullan.
- Her yeni etiketi öğrenince küçük bir demo yap 👩💻.
- Unutma: HTML bir programlama dili değil, işaretleme dili.
Aşağıdaki kodu yaz, tarayıcıda aç:
<!DOCTYPE html>
<html>
<head>
<title>Kişisel Sayfam</title>
</head>
<body>
<h1>Benim Adım Ebrar 😎</h1>
<p>Bilgisayar programcılığı okuyorum ve HTML öğreniyorum.</p>
<img src="profil.jpg" alt="Profil Fotoğrafım" width="200">
<a href="https://github.com/">GitHub Profilim 🔗</a>
</body>
</html>HTML öğrenmek LEGO 🧱 oynamak gibidir.
Parçaları tanıyıp doğru yerlere koyarsan, istediğin web sayfasını inşa edebilirsin.
CSS 🎨 ve JavaScript ⚡ geldiğinde bu yapı çok daha güçlü hale gelecek.
Ama temeli sağlam atmak için HTML’i iyi kavramak şart. 🚀
- HTML (HyperText Markup Language) → It's the skeleton of web pages.
- It gives instructions to the browser, such as "make this a title, make this a paragraph, show this image."
- CSS 🎨 adds design, JavaScript ⚡ adds interactivity, but neither is useful without HTML.
Every HTML file generally begins with this structure:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>I'm writing my first HTML page 🚀</p>
</body>
</html>📌 Description:
<!DOCTYPE html>→ Indicates that HTML5 is used.<html>→ The page container.<head>→ Contains settings, meta information, and the title.<body>→ The content visible to the user.
<h1>Largest heading</h1>
<h2>Second-level heading</h2>
<h6>Smallest heading</h6><p>This is a paragraph.</p><a href="https://github.com/">Go to GitHub</a><img src="picture.jpg" alt="Description text" width="300"><ul>
<li>List 1</li>
<li>List 2</li>
</ul>
<ol>
<li>Ordered list 1</li>
<li>Ordered list 2</li>
</ol>href→ link address 🔗src→ image or media path 🖼️alt→ description for the visually impaired ♿id→ element ID 🆔class→ grouping 🏷️
To collect information from the user:
<form action="/gonder" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>The modern web uses meaningful tags:
<header>Header (logo, menu)</header>
<nav>Navigation menu</nav>
<main>Main content of the page</main>
<article>Article or content</article>
<section>Container sections</section>
<footer>Footer</footer>✨ Crucial for SEO and accessibility!
❌ Unclosed tags (not opening or closing <p>).
❌ Using images without alt text.
❌ Writing everything in <div> (ignoring semantic HTML).
❌ Trying to space with <br> (using CSS).
- Pay attention to indentation when writing code ➡️ layout is important.
- Use CodePen 🔥 or JSFiddle to test your code.
- Make a small demo 👩💻 after learning each new tag.
- Remember: HTML is not a programming language, it's a markup language.
Type the following code and open it in your browser:
<!DOCTYPE html>
<html>
<head>
<title>My Personal Page</title>
</head>
<body>
<h1>My Name is Ebrar 😎</h1>
<p>I'm studying computer programming and learning HTML.</p>
<img src="profil.jpg" alt="My Profile Photo" width="200">
<a href="https://github.com/">My GitHub Profile 🔗</a>
</body>
</html>Learning HTML is like playing LEGO 🧱. If you recognize the pieces and put them in the right places, you can build any web page you want. This structure will become much more powerful when CSS 🎨 and JavaScript ⚡ arrive. But to lay a solid foundation, a good grasp of HTML is essential. 🚀