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>

 

 

 

Renk olarak istediğinizi kullana bilirsiniz

10 :Sayfa Kenarlıkları Sayfanıza kenarlık eklemek için:

<body style="border: 5px solid #800080;">

    <!-- Sayfa içeriği buraya gelecek -->

</body>

 

 

11  :Sayfalar Arası Geçiş Sayfanın başına hızlıca dönmek için bir bağlantı ekleyin:

<a href="#header">Sayfanın Başına Git</a>

 

 

 

Bu sayede uzun sayfaları daha kolay gezilebilir hale getirebilirsiniz.

12: Video Eklemek ? Sayfaya başka içerik eklemek için <iframe> etiketini

kullanabiliriz. Örneğin, bir YouTube videosunu sayfaya ekleyelim:

<iframe width="560" height="315" src="https://www.youtube.com/embed/istediğiniz video" frameborder="0" allowfullscreen></iframe>

 

 

 

13 :Ses Eklemek ? Ses eklemek için:

<audio controls>
    <source src="İstediğinizmüzik.mp3" type="audio/mp3">
    </audio>

Ses ekleyerek sayfanıza farklı bir boyut kazandırabilirsiniz.

 

 

14: İkon Eklemek

Sayfanıza ikonlar ekleyerek ona daha fazla kişilik kazandırın. İşte bir örnek:

<link rel="icon" href="ikon.ico" type="image/x-icon">

ikon.ico kısmını değiştirerek kendi resmini ekleyebilirsin. Şimdi sayfan renkli ve özel bir simgeye sahip!

Ama unutma ikonunla web siten aynı yerde olmalı

15:Tablolar HTML ile tablolar oluşturabiliriz. Örneğin, basit bir tablo oluşturalım:

<table border="1">
    <tr>
        <th>Öğrenci Adı</th>
        <th>Notu</th>
    </tr>
    <tr>
        <td>Ahmet</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Mehmet</td>
        <td>85</td>
    </tr>
</table>
 

 
16: Yazı Macerası

Metinleri daha çekici hale getirmenin iki yolu vardır: kalın ve italik yazı.

Kalın Yazı (<strong>): Metni kalın yapmak için <strong> etiketini kullanırız. Örneğin, "HTML öğrenmek bir macera!" cümlesinde "macera" kelimesini kalın yapmak istersek şu şekilde kullanırız:

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

 

Bu etiket tarayıcıya "macera" kelimesini kalın olarak göstermesini söyler.

İtalik Yazı (<em>): Metni italik yapmak için <em> etiketini kullanırız. Örneğin, "HTML öğrenmek bir macera!" cümlesinde "HTML" kelimesini italik yapmak istersek şu şekilde kullanırız:

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

 

 

Peki bunları birleştirmeye ne dersin ? Öğrendiklerini birleştirerek farklı siteler yapabilirsin yeni bir maceraya başlayabilirsin...

 

 

Latest News

Most Read

Sidebar 1