Web sitesi oluşturmak, günümüzde bireyler ve işletmeler için vazgeçilmez bir ihtiyaç haline geldi. İster kişisel bir blog, ister bir e-ticaret sitesi olsun, HTML ve CSS kullanarak etkileyici ve işlevsel web siteleri oluşturabilirsiniz. Bu kılavuzda, HTML ve CSS'in temellerini öğrenerek, adım adım nasıl web sitesi yapabileceğinizi anlatacağım. Hazırsanız, kod yazmaya başlayalım!

    HTML'in Temelleri

    HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturur. Sayfadaki metin, resim, bağlantı gibi içeriklerin nasıl yapılandırılacağını belirler. HTML etiketleri (tags) kullanılarak içerikler tanımlanır ve tarayıcılar bu etiketleri yorumlayarak sayfayı oluşturur. HTML, web geliştirmenin temel taşıdır ve her web geliştiricisinin mutlaka bilmesi gereken bir konudur. HTML'in ne olduğunu ve ne işe yaradığını anlamak, web geliştirme yolculuğunuzun ilk ve en önemli adımıdır.

    HTML Etiketleri

    HTML etiketleri, içeriği tanımlamak ve yapılandırmak için kullanılır. Etiketler, açılış ve kapanış etiketleri olmak üzere iki kısımdan oluşur. Örneğin, bir başlık oluşturmak için <h1> etiketi kullanılır. Açılış etiketi <h1> ve kapanış etiketi </h1> şeklindedir. İçerik bu iki etiket arasına yazılır. Temel HTML etiketlerinden bazıları şunlardır:

    • <html>: HTML belgesinin kök etiketidir.
    • <head>: Belge ile ilgili meta bilgileri içerir (başlık, stil dosyaları, vs.).
    • <title>: Tarayıcı sekmesinde görünen başlığı tanımlar.
    • <body>: Sayfanın içeriğinin bulunduğu kısımdır.
    • <h1> ile <h6>: Başlık etiketleridir (h1 en büyük, h6 en küçük başlık).
    • <p>: Paragraf etiketidir.
    • <a>: Bağlantı (link) etiketidir.
    • <img>: Resim etiketidir.
    • <ul>, <ol>, <li>: Sırasız liste, sıralı liste ve liste öğesi etiketleridir.

    Bu etiketler, HTML'in temel yapı taşlarını oluşturur. Bu etiketleri kullanarak basit bir web sayfası oluşturabilirsiniz. Örneğin, aşağıdaki HTML kodu basit bir başlık ve paragraf içeren bir sayfa oluşturur:

    <!DOCTYPE html>
<html>
<head>
    <title>HTML Temelleri</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

    Bu kodu bir metin editörüne kopyalayıp .html uzantılı bir dosya olarak kaydedin (örneğin, index.html). Ardından, dosyayı bir tarayıcıda açarak sonucu görebilirsiniz. HTML etiketlerini doğru ve anlamlı bir şekilde kullanmak, sayfanızın hem kullanıcılar hem de arama motorları tarafından daha iyi anlaşılmasını sağlar. Bu da SEO (Arama Motoru Optimizasyonu) açısından önemlidir.

    HTML5 ile Gelen Yenilikler

    HTML5, web geliştirme standartlarını önemli ölçüde değiştiren ve geliştiren bir sürümdür. Yeni semantik etiketler, multimedya desteği ve uygulama geliştirme yetenekleri sunar. HTML5 ile birlikte gelen bazı önemli yenilikler şunlardır:

    • <article>, <aside>, <nav>, <header>, <footer>, <section> gibi semantik etiketler: Bu etiketler, sayfa içeriğinin daha anlamlı ve düzenli bir şekilde yapılandırılmasını sağlar. Örneğin, <article> etiketi bir makale içeriğini, <nav> etiketi ise navigasyon menüsünü tanımlar.
    • <video> ve <audio> etiketleri: Bu etiketler, video ve ses dosyalarını doğrudan HTML içinde gömmeyi sağlar. Bu sayede, Flash gibi eklentilere ihtiyaç kalmadan multimedya içeriklerini web sitenizde kullanabilirsiniz.
    • <canvas> etiketi: Bu etiket, dinamik grafikler ve animasyonlar oluşturmak için kullanılır. JavaScript ile birlikte kullanılarak interaktif ve görsel olarak zengin web uygulamaları geliştirilebilir.
    • Web Storage API: Bu API, kullanıcı verilerini tarayıcıda saklamayı sağlar. Bu sayede, çevrimdışı uygulamalar geliştirmek ve kullanıcı deneyimini iyileştirmek mümkün olur.

    HTML5, modern web geliştirme için vazgeçilmez bir araçtır. Yeni etiketler ve API'ler sayesinde daha zengin, interaktif ve erişilebilir web siteleri oluşturabilirsiniz. HTML5'i öğrenmek ve kullanmak, web geliştirme becerilerinizi önemli ölçüde artıracaktır.

    CSS'in Temelleri

    CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stilini kontrol etmek için kullanılır. HTML ile oluşturulan içeriğin nasıl görüntüleneceğini belirler. Renkler, yazı tipleri, düzen, animasyonlar ve daha birçok görsel özellik CSS ile ayarlanır. CSS, web sitelerinin estetik açıdan çekici ve kullanıcı dostu olmasını sağlar. CSS'in ne olduğunu ve nasıl kullanıldığını anlamak, web sitenizin tasarımını istediğiniz gibi şekillendirmenize olanak tanır.

    CSS Sözdizimi

    CSS sözdizimi, seçiciler (selectors), özellikler (properties) ve değerlerden (values) oluşur. Seçiciler, stil uygulanacak HTML elementlerini belirler. Özellikler, stilin hangi özelliğinin değiştirileceğini belirtir (örneğin, renk, yazı tipi, boyut). Değerler ise özelliğin nasıl değiştirileceğini tanımlar. Temel CSS sözdizimi şu şekildedir:

    selector { 
    property: value; 
}

    Örneğin, tüm <p> etiketlerinin yazı rengini mavi yapmak için aşağıdaki CSS kodunu kullanabilirsiniz:

    p {
    color: blue;
}

    Bu kodda, p seçici, color özellik ve blue değerdir. CSS kuralları, bir veya birden fazla özellik-değer çiftinden oluşabilir. Birden fazla özellik tanımlamak için her birini noktalı virgülle ayırmak gerekir. Örneğin:

    p {
    color: blue;
    font-size: 16px;
    line-height: 1.5;
}

    Bu kod, tüm <p> etiketlerinin yazı rengini mavi yapar, yazı boyutunu 16 piksel yapar ve satır yüksekliğini 1.5 yapar. CSS sözdizimini anlamak, CSS kodunu doğru ve etkili bir şekilde yazmanızı sağlar. Bu da web sitenizin görünümünü istediğiniz gibi özelleştirmenize olanak tanır.

    CSS Seçicileri

    CSS seçicileri, stil uygulanacak HTML elementlerini hedeflemek için kullanılır. Farklı türde seçiciler vardır ve her biri farklı elementleri hedeflemek için kullanılır. İşte bazı temel CSS seçicileri:

    • Element Seçiciler: Belirli bir HTML elementini hedeflemek için kullanılır (örneğin, p, h1, a).
    • ID Seçiciler: Belirli bir ID'ye sahip olan elementi hedeflemek için kullanılır. ID seçiciler # sembolü ile başlar (örneğin, #baslik).
    • Sınıf (Class) Seçiciler: Belirli bir sınıfa sahip olan elementleri hedeflemek için kullanılır. Sınıf seçiciler . sembolü ile başlar (örneğin, .paragraf).
    • Evrensel Seçici: Tüm elementleri hedeflemek için kullanılır (*).
    • Nitelik Seçiciler: Belirli bir niteliğe sahip olan elementleri hedeflemek için kullanılır (örneğin, [type="text"]).

    Örneğin, aşağıdaki HTML kodunu düşünelim:

    <h1 id="baslik">Merhaba Dünya!</h1>
<p class="paragraf">Bu bir paragraf.</p>
<p class="paragraf">Bu başka bir paragraf.</p>

    Bu HTML koduna aşağıdaki CSS kodunu uygulayabiliriz:

    #baslik {
    color: red;
}

.paragraf {
    font-size: 18px;
}

    Bu CSS kodu, id'si baslik olan <h1> elementinin yazı rengini kırmızı yapar ve class'ı paragraf olan tüm <p> elementlerinin yazı boyutunu 18 piksel yapar. CSS seçicilerini etkili bir şekilde kullanarak, web sitenizdeki belirli elementlerin stilini kolayca değiştirebilirsiniz.

    CSS Entegrasyon Yöntemleri

    CSS'i HTML sayfasına entegre etmenin üç temel yöntemi vardır:

    • Inline CSS: CSS kodunu doğrudan HTML elementinin içinde style niteliği ile belirtmek. Bu yöntem genellikle tek bir elementin stilini değiştirmek için kullanılır. Örneğin:
    <p style="color: green;">Bu yeşil bir paragraf.</p>
    • Internal CSS: CSS kodunu <style> etiketi içinde <head> bölümünde belirtmek. Bu yöntem, belirli bir sayfanın stilini tanımlamak için kullanılır. Örneğin:
    <!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>Bu yeşil bir paragraf.</p>
</body>
</html>
    • External CSS: CSS kodunu ayrı bir .css dosyasında belirtmek ve bu dosyayı HTML sayfasına <link> etiketi ile bağlamak. Bu yöntem, web sitenizin genel stilini tanımlamak ve birden fazla sayfada aynı stilin kullanılmasını sağlamak için kullanılır. Örneğin, style.css adında bir dosya oluşturup aşağıdaki CSS kodunu içine yazabilirsiniz:
    p {
    color: green;
}

    Ardından, HTML sayfanızda bu dosyayı aşağıdaki gibi bağlayabilirsiniz:

    <!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Bu yeşil bir paragraf.</p>
</body>
</html>

    External CSS, en yaygın ve önerilen yöntemdir çünkü kodun daha düzenli ve yönetilebilir olmasını sağlar. Ayrıca, aynı CSS dosyasını birden fazla sayfada kullanarak tutarlı bir stil oluşturabilirsiniz.

    Basit Bir Web Sitesi Oluşturma

    Şimdiye kadar HTML ve CSS'in temellerini öğrendik. Şimdi, bu bilgileri kullanarak basit bir web sitesi oluşturalım. Bu web sitesi, bir başlık, bir paragraf, bir resim ve bir bağlantı içerecek. İşte adım adım nasıl yapılacağı:

    1. HTML Dosyasını Oluşturun: Bir metin editörü açın ve aşağıdaki HTML kodunu yazın:
    <!DOCTYPE html>
<html>
<head>
    <title>Basit Web Sitesi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Merhaba Dünya!</h1>
    </header>
    
    <section>
        <p>Bu benim ilk web sitem.</p>
        <img src="resim.jpg" alt="Manzara">
        <a href="https://www.google.com">Google'a Git</a>
    </section>
    
    <footer>
        <p>© 2024 Benim Web Sitem</p>
    </footer>
</body>
</html>

    Bu kodu index.html olarak kaydedin.

    1. CSS Dosyasını Oluşturun: Aynı metin editöründe aşağıdaki CSS kodunu yazın:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

section {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

    Bu kodu style.css olarak kaydedin.

    1. Resim Ekleyin: Web sitenizde görüntülemek istediğiniz bir resmi resim.jpg olarak kaydedin ve index.html dosyasıyla aynı klasöre koyun.

    2. Web Sitesini Görüntüleyin: index.html dosyasını bir tarayıcıda açın. Web siteniz başlık, paragraf, resim ve bağlantı ile birlikte görüntülenecektir.

    Bu basit web sitesi, HTML ve CSS kullanarak nasıl web sitesi oluşturabileceğinizin temel bir örneğidir. Bu adımları takip ederek daha karmaşık ve özelleştirilmiş web siteleri oluşturabilirsiniz.

    İpuçları ve Püf Noktaları

    Web sitesi geliştirme sürecini daha verimli ve keyifli hale getirmek için aşağıdaki ipuçlarını ve püf noktalarını göz önünde bulundurun:

    • Kodunuzu Düzenli Tutun: HTML ve CSS kodunuzu düzenli ve anlaşılır bir şekilde yazın. Etiketleri düzgün bir şekilde iç içe geçirin ve CSS kurallarını mantıklı bir şekilde gruplandırın. Bu, kodunuzun daha kolay okunmasını ve bakımının yapılmasını sağlar.
    • Yorumlar Ekleyin: Kodunuzun ne yaptığını açıklayan yorumlar ekleyin. Bu, hem sizin hem de diğer geliştiricilerin kodu daha iyi anlamasına yardımcı olur. Yorumlar, özellikle karmaşık veya alışılmadık kod parçaları için önemlidir.
    • Geliştirme Araçlarını Kullanın: Tarayıcıların geliştirme araçlarını (Developer Tools) kullanarak web sitenizi test edin ve hataları ayıklayın. Bu araçlar, HTML ve CSS kodunuzu incelemenize, hataları bulmanıza ve performansı analiz etmenize olanak tanır.
    • CSS Kütüphanelerini Kullanın: Bootstrap, Tailwind CSS gibi CSS kütüphaneleri, hazır stil ve bileşenler sunarak web geliştirme sürecini hızlandırır. Bu kütüphaneleri kullanarak daha hızlı ve tutarlı bir şekilde web siteleri oluşturabilirsiniz.
    • Responsive Tasarım İlkelerini İzleyin: Web sitenizin farklı cihazlarda (masaüstü, tablet, mobil) düzgün bir şekilde görüntülenmesini sağlamak için responsive tasarım ilkelerini izleyin. Medya sorgularını kullanarak farklı ekran boyutlarına göre stil uygulayabilirsiniz.
    • Kaynakları Kullanın: MDN Web Docs, CSS-Tricks gibi web geliştirme kaynaklarından yararlanın. Bu kaynaklar, HTML, CSS ve JavaScript hakkında kapsamlı bilgiler ve örnekler sunar.

    Sonuç

    HTML ve CSS kullanarak web sitesi yapımı, öğrenmesi kolay ve son derece keyifli bir süreçtir. Bu kılavuzda, HTML ve CSS'in temellerini, nasıl web sitesi oluşturabileceğinizi ve geliştirme sürecini iyileştirecek ipuçlarını öğrendiniz. Artık kendi web sitelerinizi oluşturmaya başlayabilir ve yaratıcılığınızı konuşturabilirsiniz. Unutmayın, pratik yaparak ve sürekli öğrenerek web geliştirme becerilerinizi geliştirebilirsiniz. Başarılar!

Lastest News