Yazar: suat 16 Eylül 2024

HTML ve CSS ile Web Tasarımın Temelleri: Kodlama Bilgileri ve İpuçları

HTML ve CSS ile Web Tasarım: Temel Kodlama Bilgileri

Giriş

Web tasarım dünyasına adım atmak, kendi web sitenizi oluşturma hayaliniz varsa, HTML ve CSS öğrenmek ilk adımınız olmalıdır. Bu rehberde, HTML ve CSS kullanarak temel bir web tasarımı oluşturmanın temel bilgilerini paylaşacağız.

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının yapı taşıdır. HTML, bir web sayfasının içeriğini ve yapısını tanımlar. Bir web sayfasını HTML kullanarak oluşturduğunuzda, metin, resim, bağlantı ve diğer içerik türlerini belirli öğeler kullanarak tanımlarsınız.

Temel HTML Yapısı

HTML dökümanı dört ana bölümden oluşur:

<!DOCTYPE html>
<html>
<head>
    <title>Başlık</title>
</head>
<body>
    <h1>Merhaba, Dünya!</h1>
    <p>Bu, ilk HTML sayfamızdır.</p>
</body>
</html>

Açıklamalar

<!DOCTYPE html>: HTML5 belgesi olduğunu belirtir.
<html>: HTML kodunun başladığı ve bittiği yeri belirtir.
<head>: Sayfanın meta bilgilerini içerir (titre, karakter seti vb.).
<title>: Tarayıcı sekmesinde görünen başlığı belirler.
<body>: Sayfanın görünen içeriği burada yer alır.

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturulan içeriklerin stil ve düzenlemelerini belirler. Kısaca, web sitenizin görünümünü CSS ile ayarlarsınız.

Temel CSS Kullanımı

CSS stillerini üç şekilde uygulayabiliriz: İç içe (inline), dahili (internal) ve harici (external).

Inline CSS

HTML elemanının style özelliği içerisine yazılır:

<p style="color: blue;">Bu, mavi renkte bir paragraftır.</p>

Dahili CSS

HTML dökümanının <head> bölümünde style etiketi içerisine yazılır:

<head>
    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: red;
        }
    </style>
</head>

Harici CSS

Bağımsız bir .css dosyası oluşturularak HTML’de bağlanır:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css dosyasında:

body {
    background-color: lightgray;
}
p {
    color: red;
}

HTML ve CSS ile Basit Bir Sayfa Oluşturma

Dilimizin pratiğine yönelik, basit bir web sayfası oluşturmak için aşağıdaki örneği inceleyelim:

HTML Kodu

<!DOCTYPE html>
<html>
<head>
    <title>Benim İlk Web Sayfam</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>Web Tasarıma Giriş</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkında</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </nav>
    <section>
        <h2>Hoşgeldiniz!</h2>
        <p>Bu, HTML ve CSS öğrenmeye başladığımız ilk sayfamız.</p>
    </section>
    <footer>
        <p>© 2023 - Web Tasarım Rehberi</p>
    </footer>
</body>
</html>

CSS Kodu

styles.css dosyasındaki kodlar:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
}

nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #111;
}

section {
    margin: 15px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

HTML ve CSS ile temel bir web tasarımı oluşturmanız işte bu kadar basit! Bu kılavuzda sadece başlangıç seviyesinde bilgileri ele aldık. HTML5 ve CSS3’ün sunduğu daha ileri seviye özellikleri ve teknikleri öğrenmek için daha derinlemesine araştırmalar yapmanız gerekecek. Başarılar dileriz!