Folder Open Duotone Icon

Osman BAYRAK ile HTML Dersleri

Osman Bayrak avatarı
Osman Bayrak

·

·

18 dk.

HTML’e Giriş: Temel Bilgiler ve Yapı

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan bir işaretleme dilidir. Tarayıcılara bir sayfanın içeriğini nasıl görüntüleyeceğini anlatır. HTML ile yazılmış bir belge, tarayıcı tarafından kullanıcıya çeşitli metin, görsel, video gibi içerikleriyle sunulur. Her bir parçası “etiketler” ile ifade edilen yapısal bir dildir.

Örneğin, aşağıdaki temel HTML yapısı, bir HTML belgesinin başlangıcını oluşturur:


Copied!

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Başlık</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu, ilk HTML sayfamız.</p>
</body>
</html>

<!DOCTYPE html>: HTML5 sürümünü belirtir.

<html lang="tr">: Dil bilgisini belirtir, burada Türkçe (tr) kullanılmıştır.

<head> ve <body>: HTML belgesinin ana bölümleridir.

HTML Belgelerinin Yapısı

Bir HTML belgesi, genellikle üç ana bölümden oluşur:

  1. Doctype Beyanı (<!DOCTYPE html>): HTML5 standardını kullanmak için başa eklenen bir beyan.
  2. Başlık Bölümü (<head>): Sayfa başlığını, karakter kodlamasını, tarayıcıya özel bilgileri ve stil dosyalarını içerir.
  3. Gövde Bölümü (<body>): Kullanıcının ekranda göreceği tüm içeriklerin yer aldığı bölüm.

Başlık Etiketleri

HTML’de başlıklar <h1> ile <h6> arasındaki etiketlerle oluşturulur. En önemlisi <h1> iken, en az önemlisi <h6> etiketidir. Bu etiketler, içeriğin hiyerarşik yapısını belirtmekte kullanılır ve özellikle SEO açısından önemlidir.

Örneğin:


Copied!

<h1>Bu Ana Başlık</h1>
<h2>Bu İkinci Seviye Başlık</h2>
<h3>Bu Üçüncü Seviye Başlık</h3>

Paragraf ve Satır Etiketleri

Metinleri paragraflar halinde yazmak için <p> etiketi kullanılır. Yeni bir satıra geçmek için ise <br> etiketi tercih edilir. Bu etiketler, metni daha okunabilir hale getirir.

Örneğin:


Copied!

<p>Bu bir paragraftır.</p>
<p>Yeni bir paragrafa geçtik.</p>
<p>Bu satırdan sonra <br> yeni bir satıra geçiyoruz.</p>

Metin Biçimlendirme Etiketleri

HTML’de metni kalın, italik, altı çizili gibi çeşitli biçimlerde gösterebilmek için özel etiketler bulunur.

  • <b> ve <strong>: Metni kalın gösterir. <strong>, metnin daha önemli olduğunu belirtmek için kullanılır.
  • <i> ve <em>: Metni italik gösterir. <em>, vurgulamak için kullanılır.
  • <u>: Altı çizili metin oluşturur.
  • <mark>: Metni işaretlemek için kullanılır.

Örnek:


Copied!

<p><b>Bu metin kalın yazılmıştır.</b></p>
<p><strong>Bu önemli bir metindir.</strong></p>
<p><i>Bu metin italik yazılmıştır.</i></p>
<p><u>Bu metin altı çizili olarak gösterilmektedir.</u></p>
<p><mark>Bu metin işaretlenmiştir.</mark></p>

HTML’de Linkler ve Resimler

HTML’de bağlantılar (linkler) <a> etiketiyle oluşturulur. Bir kullanıcı bir bağlantıya tıkladığında, başka bir sayfaya veya aynı sayfa içinde başka bir bölüme yönlendirilir. Bu etiketin en yaygın kullanımı aşağıdaki gibidir:


Copied!

<a href="https://www.osmanbayrak.com.tr">Bu bir bağlantıdır</a>
  • href özelliği, bağlantının yönlendirileceği URL’yi belirler.
  • <a> etiketi içindeki metin, kullanıcı tarafından görülecek olan bağlantı metnidir.

Bağlantıyı yeni bir sekmede açmak için target="_blank" özelliği eklenir:


Copied!

<a href="https://www.osmanbayrak.com.tr" target="_blank">Yeni sekmede açılan bağlantı</a>

Görseller ve Multimedya

Görseller, web sayfalarının vazgeçilmez ögelerindendir ve HTML’de <img> etiketi ile eklenir. Bu etiketin temel kullanımı:


Copied!

<img src="resim.jpg" alt="Örnek Resim" width="500" height="300">
  • src: Görselin kaynağını belirler.
  • alt: Alternatif metin, görselin yüklenememesi durumunda gösterilir ve SEO açısından önemlidir.
  • width ve height: Görselin genişlik ve yüksekliğini belirler.

Bir videoyu <video> etiketi ile, sesi ise <audio> etiketi ile ekleyebiliriz:


Copied!

<video controls>
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız bu videoyu desteklemiyor.
</video>

<audio controls>
    <source src="ses.mp3" type="audio/mpeg">
    Tarayıcınız bu sesi desteklemiyor.
</audio>

Liste Yapıları

HTML, sıralı ve sırasız listeleri destekler. Bu listeler <ul> (sırasız liste) ve <ol> (sıralı liste) etiketleri ile yapılır.

Sırasız Liste

Sırasız liste <ul> etiketiyle yapılır ve her bir öğe <li> etiketi ile belirtilir:


Copied!

<ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

Sıralı Liste

Sıralı liste <ol> etiketiyle yapılır ve her bir öğe <li> etiketi ile belirtilir:


Copied!

<ol>
    <li>Birinci</li>
    <li>İkinci</li>
    <li>Üçüncü</li>
</ol>

Tanım Listesi

Tanım listesi, bir öğenin açıklamasını içeren özel bir listedir. <dl>, <dt> ve <dd> etiketleriyle yapılır:


Copied!

<dl>
    <dt>HTML</dt>
    <dd>Web sayfalarının yapısını belirleyen işaretleme dili.</dd>
    <dt>CSS</dt>
    <dd>Web sayfalarını biçimlendirme dili.</dd>
</dl>

Formlar ve Giriş Alanları

Kullanıcıdan bilgi almak için formlar kullanılır. Formlar, <form> etiketiyle oluşturulur ve <input>, <textarea>, <select> gibi alt etiketler içerir.

Form Etiketleri

Temel bir form yapısı şu şekildedir:


Copied!

<form action="/islem.php" method="post">
    <label for="isim">İsim:</label>
    <input type="text" id="isim" name="isim"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <input type="submit" value="Gönder">
</form>
  • action: Form verilerinin gönderileceği dosyayı belirler.
  • method: Verilerin gönderme yöntemini belirler (get veya post).

Form Giriş Tipleri

HTML’de farklı form giriş tipleri vardır. Örneğin, type="text" metin girişi, type="number" sayısal giriş sağlar:


Copied!

<input type="text" name="ad" placeholder="Adınızı giriniz">
<input type="number" name="yas" placeholder="Yaşınızı giriniz">
<input type="email" name="email" placeholder="Email adresinizi giriniz">
<input type="checkbox" name="sozlesme"> Kullanım şartlarını kabul ediyorum
<input type="radio" name="cinsiyet" value="erkek"> Erkek
<input type="radio" name="cinsiyet" value="kadın"> Kadın

Form Validasyonu

HTML5 ile gelen required, min, max, pattern gibi özellikler, form doğrulama işlemlerini daha kolay hale getirir. Bu sayede JavaScript kullanmadan kullanıcıdan alınan bilgileri kontrol edebiliriz.


Copied!

<input type="text" name="ad" required>
<input type="number" name="yas" min="18" max="100">
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Geçerli bir email adresi girin">

Tablolar

Tablolar, verileri satır ve sütun düzeninde göstermek için kullanılır; <table>, <tr>, <td>, <th> gibi etiketlerle yapılır.

Tablo Etiketleri

Basit bir tablo örneği:


Copied!

<table border="1">
    <tr>
        <th>İsim</th>
        <th>Yaş</th>
        <th>Şehir</th>
    </tr>
    <tr>
        <td>Ahmet</td>
        <td>25</td>
        <td>İstanbul</td>
    </tr>
    <tr>
        <td>Ayşe</td>
        <td>30</td>
        <td>Ankara</td>
    </tr>
</table>
  • <table>: Tabloyu tanımlar.
  • <tr>: Tablo satırını oluşturur.
  • <th>: Başlık hücrelerini belirtir.
  • <td>: Normal hücreleri belirtir.

Colspan ve Rowspan

Hücreleri birleştirmek için colspan ve rowspan kullanılır:


Copied!

<table border="1">
    <tr>
        <th colspan="2">Başlık 1</th>
        <th>Başlık 2</th>
    </tr>
    <tr>
        <td rowspan="2">Satırları Birleştir</td>
        <td>Veri 1</td>
        <td>Veri 2</td>
    </tr>
    <tr>
        <td>Veri 3</td>
        <td>Veri 4</td>
    </tr>
</table>

HTML5 Yenilikleri ve Semantik Etiketler

HTML5, içerik düzenini daha anlamlı hale getirmek için birçok yeni etiketle birlikte geldi. Bu etiketler, içerik bölümlerinin amacını daha net bir şekilde belirleyerek hem SEO uyumunu artırır hem de tarayıcıların içeriği daha iyi anlamasını sağlar.

Semantik Etiketler

<header> Etiketi

Bir web sayfasının veya bir bölümün üst kısmını belirtmek için kullanılır. Genellikle logo, başlık ve menüler içerir.


Copied!

<header>
    <h1>Web Sitesi Adı</h1>
    <nav>
        <a href="#ana_sayfa">Ana Sayfa</a>
        <a href="#hakkinda">Hakkında</a>
        <a href="#iletisim">İletişim</a>
    </nav>
</header>

<footer> Etiketi

Bir sayfanın veya bir bölümün alt kısmını belirtir. Genellikle telif hakkı bilgileri, iletişim bilgileri ve sosyal medya bağlantıları içerir.


Copied!

<footer>
    <p>&copy; 2024 Tüm Hakları Saklıdır.</p>
</footer>

<article> Etiketi

Bağımsız içerikleri belirtmek için kullanılır. Blog gönderileri, haber makaleleri veya forum gönderileri gibi bağımsız bölümler için idealdir.


Copied!

<article>
    <h2>Makale Başlığı</h2>
    <p>Bu, bağımsız bir makaledir ve içeriği kendi başına anlamlıdır.</p>
</article>

<section> Etiketi

Bir web sayfasının belirli bir bölümünü belirtir. Genellikle, anlamlı başlıklarla gruplanan içerikler için kullanılır.


Copied!

<section>
    <h2>Hizmetlerimiz</h2>
    <p>Çeşitli hizmetlerimiz hakkında bilgiler.</p>
</section>

<aside> Etiketi

Ana içeriğe ek olarak verilen bilgileri belirtir. Yan panel (sidebar) olarak kullanılabilir.


Copied!

<aside>
    <h3>İlgili İçerikler</h3>
    <p>Bu bölüm, ana içerikle ilgili ek bilgiler sağlar.</p>
</aside>

<nav> Etiketi

Sayfadaki gezinme bağlantılarını içerir. Bir menüyü veya bağlantı grubunu belirtmek için idealdir.


Copied!

<nav>
    <a href="#ana_sayfa">Ana Sayfa</a>
    <a href="#hizmetler">Hizmetlerimiz</a>
    <a href="#iletisim">İletişim</a>
</nav>

HTML5 API’leri

HTML5 ile gelen bazı yeni API’ler, web sayfalarını daha etkileşimli ve işlevsel hale getirmemizi sağlar. Bunlardan en popüler olanlarına göz atalım:

Canvas API

<canvas> etiketi, grafiksel çizimler yapmak için kullanılır. JavaScript ile birlikte çizimler, oyunlar, veri görselleştirmeleri yapılabilir.


Copied!

<canvas id="cizimAlani" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("cizimAlani");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 100, 100);
</script>

Geolocation API

Bu API, kullanıcının konum bilgilerini almayı sağlar. Genellikle harita uygulamalarında veya konuma dayalı hizmetlerde kullanılır.


Copied!

<button onclick="konumAl()">Konumumu Göster</button>
<p id="konum"></p>
<script>
    function konumAl() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById("konum").innerHTML = 
                    "Enlem: " + position.coords.latitude + 
                    "<br>Boylam: " + position.coords.longitude;
            });
        } else {
            document.getElementById("konum").innerHTML = "Konum bilgisi alınamıyor.";
        }
    }
</script>

Local Storage

Kullanıcıya ait verileri, tarayıcı üzerinde kalıcı olarak saklamak için kullanılır. Kullanıcı sayfayı kapatıp tekrar açtığında bile bu verilere ulaşılabilir.


Copied!

<script>
    // Veriyi kaydetme
    localStorage.setItem("kullaniciAdi", "Ahmet");

    // Veriyi okuma
    var isim = localStorage.getItem("kullaniciAdi");
    document.write("Kullanıcı Adı: " + isim);

    // Veriyi silme
    localStorage.removeItem("kullaniciAdi");
</script>

HTML ve CSS İlişkisi

HTML, web sayfasının yapısını sağlar; CSS (Cascading Style Sheets) ise bu yapıyı biçimlendirir. CSS, HTML elemanlarının nasıl görüneceğini belirlemek için kullanılır.

CSS Kullanım Yöntemleri

CSS, HTML ile üç farklı şekilde kullanılabilir:

  1. Satır İçi (Inline) CSS: HTML etiketinin style özelliği ile doğrudan uygulanır.

Copied!

<h1 style="color: blue; text-align: center;">Merhaba Dünya!</h1>

Dahili (Internal) CSS: HTML belgesinin <head> bölümünde <style> etiketi kullanılarak uygulanır.


Copied!

<head>
    <style>
        h1 {
            color: green;
            font-size: 24px;
        }
    </style>
</head>

Harici (External) CSS: Ayrı bir .css dosyası oluşturularak uygulanır. Bu yöntem, çok sayfalı web sitelerinde stil yönetimini kolaylaştırır.


Copied!

<link rel="stylesheet" href="stil.css">

Temel CSS Özellikleri

  1. Renkler: color ve background-color özellikleri ile metin ve arka plan renkleri ayarlanır.

Copied!

body {
    background-color: #f0f0f0;
}

p {
    color: #333;
}

Yazı Tipi (Font): font-family, font-size, font-weight gibi özelliklerle yazı tipi ve boyutu ayarlanır.


Copied!

h1 {
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
}

Aralıklar (Margin ve Padding): margin dış aralık, padding iç aralık ayarlamak için kullanılır.


Copied!

div {
    margin: 10px;
    padding: 20px;
}

CSS Seçiciler

CSS, HTML elemanlarını seçip biçimlendirmek için çeşitli seçiciler sağlar.

  1. Etiket Seçiciler: Belirli bir etiket türüne stil verir.

Copied!

p {
    color: red;
}

Sınıf Seçicileri (.): Bir sınıfa sahip elemanlara stil verir. class özelliği ile HTML elemanlarına uygulanır.


Copied!

<style>
    .ozel {
        color: blue;
        font-weight: bold;
    }
</style>

<p class="ozel">Bu, özel bir paragraf.</p>

ID Seçicileri (#): Belirli bir kimlik (ID) değerine sahip elemanlara stil verir. id özelliği ile HTML elemanlarına uygulanır.


Copied!

<style>
    #baslik {
        color: green;
        font-size: 24px;
    }
</style>

<h1 id="baslik">Bu başlık ID ile seçildi</h1>

JavaScript ile HTML Etkileşimi

JavaScript, HTML sayfalarını daha etkileşimli hale getirmek için kullanılan bir programlama dilidir. Kullanıcı etkileşimleri (tıklama, fare hareketleri vb.), form doğrulama, veri işleme gibi işlevleri gerçekleştirmek için JavaScript ve HTML bir arada kullanılır.

Temel JavaScript Kullanımı

JavaScript, <script> etiketi kullanılarak doğrudan HTML içine yazılabilir veya harici bir .js dosyasına bağlanabilir.

Dahili JavaScript

HTML içindeki <script> etiketiyle JavaScript doğrudan sayfa içinde yazılabilir:


Copied!

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
</head>
<body>
    <button onclick="merhaba()">Merhaba De!</button>

    <script>
        function merhaba() {
            alert("Merhaba Dünya!");
        }
    </script>
</body>
</html>

Harici JavaScript

Harici bir JavaScript dosyasını <script src="dosya.js"></script> ile bağlayabilirsiniz. Bu yöntemde, JavaScript kodları dosya.js adlı dosyada yer alır.


Copied!

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Harici JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="merhaba()">Merhaba De!</button>
</body>
</html>

script.js dosyasının içeriği ise şöyle olur:


Copied!

function merhaba() {
    alert("Harici dosyadan Merhaba Dünya!");
}

JavaScript ile DOM Manipülasyonu

JavaScript kullanarak HTML yapısını değiştirebilir, yeni elemanlar ekleyebilir veya mevcut elemanları güncelleyebiliriz. Bu işlem, DOM (Document Object Model) üzerinden yapılır.


Copied!

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>DOM Manipülasyonu</title>
</head>
<body>
    <p id="paragraf">Bu bir paragraftır.</p>
    <button onclick="paragrafDegistir()">Paragrafı Değiştir</button>

    <script>
        function paragrafDegistir() {
            document.getElementById("paragraf").innerHTML = "Paragraf değiştirildi!";
        }
    </script>
</body>
</html>

Bu örnekte, document.getElementById("paragraf").innerHTML komutuyla belirli bir paragrafın içeriğini değiştirmiş oluyoruz.

Duyarlı Tasarım (Responsive Design) ve Medya Sorguları (Media Queries)

Mobil cihazlarda ve farklı ekran boyutlarında iyi görünen sayfalar oluşturmak için duyarlı tasarım kullanılır. CSS medya sorguları, sayfanın farklı ekran boyutlarına uyum sağlamasını sağlar.

Medya Sorgularına Giriş

Medya sorguları, belirli ekran boyutları için özel CSS tanımlamaya olanak tanır. Örneğin, max-width özelliği, belirli bir genişliğe kadar geçerli olan CSS kurallarını uygular.


Copied!

/* Varsayılan stil */
body {
    background-color: lightblue;
}

/* Ekran genişliği 600 pikselden küçükse geçerli olacak stil */
@media (max-width: 600px) {
    body {
        background-color: pink;
    }
}

Duyarlı Grid Düzenleri

Grid veya flexbox yapısını medya sorgularıyla kullanarak, esnek ve duyarlı bir düzen oluşturabilirsiniz. Örneğin, iki sütunlu bir düzeni, küçük ekranlarda tek sütuna dönüştürmek için aşağıdaki yapıyı kullanabiliriz:


Copied!

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duyarlı Tasarım</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1 1 50%; /* Varsayılan olarak iki sütun */
            padding: 10px;
            background-color: lightgray;
            margin: 5px;
        }

        /* Küçük ekranlarda tek sütuna geçiş */
        @media (max-width: 600px) {
            .box {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Kutu 1</div>
        <div class="box">Kutu 2</div>
    </div>
</body>
</html>

Bu örnekte, ekran genişliği 600 pikselden küçük olduğunda, iki sütunlu yapı tek sütuna dönüşmektedir.

HTML Form Doğrulama ve Kullanıcı Girdisi Kontrolü

Kullanıcılardan alınan verilerin doğru formatta olmasını sağlamak için HTML form doğrulaması kullanılır. Bu doğrulamayı HTML5 özellikleriyle veya JavaScript ile yapabiliriz.

HTML5 Form Doğrulama Özellikleri

HTML5, form doğrulamasını kolaylaştırmak için bazı yeni özellikler eklemiştir:

  1. required: Boş geçilemeyen alanları belirtir.
  2. type: Giriş türünü belirtir (email, number, url gibi).
  3. min ve max: Sayısal veya tarih girişleri için minimum ve maksimum değerleri tanımlar.
  4. pattern: Regex kullanarak belirli bir formata uyan girişleri kabul eder.

Copied!

<form action="/gonder" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="yas">Yaş:</label>
    <input type="number" id="yas" name="yas" min="18" max="100" required><br>

    <label for="telefon">Telefon:</label>
    <input type="tel" id="telefon" name="telefon" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Format: 123-456-7890"><br>

    <input type="submit" value="Gönder">
</form>

Yukarıdaki örnekte, email formatı için type="email", yaş için minimum ve maksimum değerleri belirleyen min ve max, telefon numarası için ise pattern özelliği kullanılmıştır.

JavaScript ile Form Doğrulama

JavaScript ile daha özelleştirilmiş form doğrulaması yapılabilir.


Copied!

<form name="form" onsubmit="return dogrula()">
    <label for="ad">Adınız:</label>
    <input type="text" id="ad" name="ad" required><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <input type="submit" value="Gönder">
</form>

<script>
    function dogrula() {
        var ad = document.forms["form"]["ad"].value;
        var email = document.forms["form"]["email"].value;

        if (ad == "" || email == "") {
            alert("Tüm alanları doldurunuz.");
            return false; // Formun gönderilmesini engeller
        }
    }
</script>

Bu örnekte, form gönderilmeden önce dogrula fonksiyonu çağrılır ve eğer herhangi bir alan boşsa kullanıcıya uyarı verilir.

Gelişmiş HTML ve CSS Teknikleri

CSS Animasyonları

CSS animasyonları ile web sayfalarına hareketlilik katılabilir. Bu animasyonlar, kullanıcının dikkatini çekmek veya belirli ögelere vurgu yapmak için kullanılabilir.


Copied!

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animasyonlu {
    animation: fade 2s ease-in-out;
}

Copied!

<div class="animasyonlu">Bu öge yavaşça görünür hale gelir.</div>

Flexbox ile Duyarlı Düzenler

Flexbox, düzenlemeyi çok daha esnek hale getiren bir CSS yapısıdır. display: flex; ile aktif edilir.


Copied!

.container {
    display: flex;
    justify-content: space-around; /* Öğeleri yatayda dağıtır */
}

.kutu {
    background-color: #ddd;
    padding: 20px;
    margin: 10px;
    flex: 1; /* Her kutu eşit oranda yer kaplar */
}

Copied!

<div class="container">
    <div class="kutu">Kutu 1</div>
    <div class="kutu">Kutu 2</div>
    <div class="kutu">Kutu 3</div>
</div>

Bu ders, HTML ve CSS ile birlikte JavaScript, medya sorguları, form doğrulama ve flexbox gibi ileri konuları ele alarak daha dinamik ve duyarlı web sayfaları oluşturmanıza yardımcı olur. Son olarak, bu bilgileri farklı projelerde kullanarak deneyim kazanabilir ve daha karmaşık sayfalar oluşturabilirsiniz.

Bu HTML rehberiyle, web geliştirme dünyasına sağlam bir adım attınız. HTML’in temellerinden başlayarak, CSS ile biçimlendirme, JavaScript ile etkileşim ve HTML5’in sunduğu yeniliklerle sayfalarınıza profesyonel bir dokunuş kazandırabilirsiniz. Her yeni projeyle becerilerinizi daha da geliştirecek ve web tasarım dünyasında ileriye doğru emin adımlarla ilerleyeceksiniz. Unutmayın, her başarılı projenin temelinde sağlam bir altyapı ve tutarlı bir öğrenme süreci vardır.

Başarılar ve yaratıcı projeler sizinle olsun!

Görünüm: 28

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Web sitenizi üst seviyelere taşıyın

Performans ve dönüşüm için size özel tasarlanmış modern web sitesiyle işlerinizi geliştirin.

Başlayalım
Daha fazla bilgi edinin