Merhaba arkadaşlar! Bilgisayar dünyasına hoş geldiniz. Bugün, HTML'nin büyülü dünyasına birlikte adım atacağız. Hazır mısınız? İşte 16 adımda HTML öğrenimine başlama zamanı!

HTML Nedir? HTML, "HyperText Markup Language"ın kısaltmasıdır. Web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. HTML, metinleri, resimleri, bağlantıları ve daha fazlasını düzenlememize olanak tanır.

 

1: Not Defteri'ni Aç Bilgisayarındaki "Not Defteri" uygulamasını aç.

Dosyayı "index.html" olarak masaüstüne kaydet. Ardından dosyaya çift tıklayarak aç ve harika sayfanı gör!

 

2: HTML Belgesi Oluşturma İlk adımımız, bir HTML belgesi oluşturmak! HTML belgesi, web sayfasının temel taşıdır. Belgemizi oluşturmak için aşağıdaki temel HTML yapısını kullanabiliriz:

 

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benim Harika Web Sayfam</title>
</head>
<body>
    <!--
"Web sitelerinde, sayfanın en önemli bölümü "body" kısmıdır. Bu bölüm, kullanıcıların gördüğü ana içeriği içerir. Başlıklar, paragraflar, resimler, linkler ve diğer şeyler de burada bulunur. Yani, bir web sitesini ziyaret ettiğinde gördüğün şeylerin çoğu burada yer alır." -->
</body>


</html>

 

 

3: Başlıkların Büyülü Dünyası ✨ Başlık eklemek için <h1> ile <h6> etiketlerini kullanabiliriz. Ayrıca metinleri paragraflara bölerek <p> etiketini kullanabiliriz.

<h1>Benim Muhteşem HTML Sayfam!</h1>
<h2>Benim Muhteşem HTML Sayfam!</h2>

 

 

 

4: Sihirli Bağlantılar Bağlantılar eklemek için <a> (anchor) etiketini kullanabiliriz. Örneğin:

<a href="#" target="_blank">Oyun Dünyası</a>

 

 

 

Bu bağlantıya tıkladığınızda, sizi oyun dünyasına götürecek.

 

5: Resimlerin Dünyası Sayfanıza semboller veya simgeler eklemek için <img> etiketini kullanabiliriz.

<img src="htmlresim.png" alt="HTML Resmi">

 

 

6: Sayfanızı Paragraflara Bölme Web sayfanızı düzenlemek ve metni daha okunabilir hale getirmek için paragraflar ekleyin.

<p>HTML öğrenmek bir macera!</p>

<p>Siz de bu maceraya katılmaya hazır mısınız?</p>

 

 

 

7: Özel Listelerle Düzen Katma ? HTML ile sırasız (<ul>) ve sıralı (<ol>) listeler oluşturabiliriz. Her liste elemanını <li> etiketi ile tanımlarız.

Sırasız Liste Örneği:
<ul>
    <li>Sırasız 1</li>

    <li>Sırasız 2</li>

    <li>Sırasız 3</li>
</ul>

Sıralı Liste Örneği:

<ol>
    <li>Sıralı 1</li>

    <li>Sıralı 2</li>

    <li>Sıralı 3</li>

</ol>

 

 

8: Renkli Yazılar Bu sihirli kod, metni renklendirir

<p style="color: red;">Bu metin kırmızı </p>

 

Yada sadece renk isimi yerine sadece renk kodları kullanın

<p style="color: #ffd700;">Bu metin altın rengidir</p>

İstediğiniz bir renk olabilir 

 

 

9: Sayfanıza Renk Katma Sayfanızın arka plan rengini değiştirmek için:

<style>
  body {
    background-color: #ffe6cc;
  }
</style>