img
Html Ve Css İle Basit Bir Web Sayfası Tasarımı

Html Ve Css İle Basit Bir Web Sayfası Tasarımı

Web tasarımı, internet üzerinde var olan her şeyin temelidir ve öğrenmesi oldukça eğlencelidir. Yeni başlayanlar için HTML ve CSS, basit ve etkili bir başlangıç noktasıdır. Bu makalede, 'HTML temel kodlar', 'CSS başlangıç', 'web sayfası oluşturma' ve 'basit web tasarımı' konularına odaklanarak, adım adım basit bir web sayfası oluşturmayı öğreneceksiniz.

HTML ile Temel Yapıyı Oluşturma

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturur. HTML kodları ile sayfanızın içeriğini yapılandırabilirsiniz. Temel HTML etiketlerini kullanarak bir sayfa oluşturma sürecine bakalım.

Temel HTML Yapısı

Bir web sayfasının temel HTML yapısı aşağıdaki gibi olur:

<!DOCTYPE html>
<html>
<head>
    <title>Basit Web Sayfası</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Açıklama:

  • <!DOCTYPE html>:HTML5 belgesi olduğunu belirtir.
  • <html>:HTML belgesinin kök öğesidir.
  • <head>:Sayfa başlığı ve meta bilgilerini içerir.
  • <title>:Tarayıcı sekmesinde görünen sayfa başlığıdır.
  • <body>:Sayfanın ana içeriğini barındırır.
  • <h1>:Başlık etiketidir, en büyük başlığı belirtir.
  • <p>:Paragraf etiketidir, metinleri belirtir.

CSS ile Stil Verme

CSS (Cascading Style Sheets), HTML ile oluşturulan yapıya stil ve düzen kazandırır. CSS ile renk, yazı tipi, yerleşim gibi görsel özellikleri ayarlayabilirsiniz.

Temel CSS Yapısı

Bir CSS dosyası oluşturarak veya HTML dosyasının içinde stil ekleyerek sayfanıza stil verebilirsiniz. İşte temel bir CSS örneği:

/* style.css dosyası */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: blue;
}

p {
    color: green;
}

HTML dosyanızda bu CSS dosyasını şöyle dahil edebilirsiniz:

<!DOCTYPE html>
<html>
<head>
    <title>Basit Web Sayfası</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Açıklama:

  • <link rel="stylesheet" type="text/css" href="style.css">:Dış stil dosyasını dahil eder.
  • body, h1, p:HTML elemanlarını seçerek stil verir.
  • font-family, color, margin:CSS özellikleridir, yazı tipi, renk ve boşluk ayarlarını yapar.

Basit Bir Web Sayfası Örneği

Şimdi HTML ve CSS bilgilerini kullanarak daha gelişmiş bir web sayfası oluşturalım.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Kişisel Web Sayfam</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Hoşgeldiniz</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#hakkimda">Hakkımda</a></li>
            <li><a href="#projeler">Projeler</a></li>
            <li><a href="#iletisim">İletişim</a></li>
        </ul>
    </nav>
    <section id="hakkimda">
        <h2>Hakkımda</h2>
        <p>Ben bir web geliştiricisiyim ve HTML & CSS öğreniyorum.</p>
    </section>
    <section id="projeler">
        <h2>Projeler</h2>
        <p>Burada projelerimi bulabilirsiniz.</p>
    </section>
    <section id="iletisim">
        <h2>İletişim</h2>
        <p>Benimle iletişime geçmek için <a href="mailto:email@example.com">e-posta gönderin</a>.</p>
    </section>
</body>
</html>
/* style.css dosyası */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

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

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

section {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

h2 {
    color: #333;
}

Açıklama:

  • header:Sayfa başlığını içerir ve stil verir.
  • nav:Navigasyon menüsünü düzenler.
  • section:İçerik bölümlerini belirtir.
  • CSS ile renk, düzen ve diğer stil özellikleri ayarlanır.

İpuçları ve Püf Noktaları

1. Kod Düzenleme: Kodlarınızı düzenli ve okunabilir tutun. HTML ve CSS dosyalarını ayrı tutmak, kod yönetimini kolaylaştırır.

2. Tarayıcı Uyumluluğu: Web sayfanızın farklı tarayıcılarda uyumlu çalıştığından emin olun. Tüm modern tarayıcılarda test yaparak tasarımın düzgün göründüğünü kontrol edin.

3. Responsive Tasarım: Mobil uyumluluk için responsive tasarım tekniklerini öğrenin. CSS media query'leri kullanarak, web sayfanızın farklı cihazlarda iyi görünmesini sağlayabilirsiniz.

4. Öğrenmeye Devam Edin: HTML ve CSS temel bilgileri öğrendikten sonra JavaScript, framework'ler (Bootstrap, React gibi) ve daha gelişmiş konulara yönelin. Web tasarım dünyası sürekli gelişiyor, bu yüzden kendinizi güncel tutun.

HTML ve CSS kullanarak basit bir web sayfası oluşturmak, web tasarımına giriş için harika bir adımdır. 'HTML temel kodlar', 'CSS başlangıç', 'web sayfası oluşturma' ve 'basit web tasarımı' konularında edindiğiniz bilgilerle, kendi projelerinizi oluşturabilir ve geliştirebilirsiniz. Bu adımları takip ederek, web tasarımının temellerini öğrenebilir ve daha ileri seviyelere geçiş yapabilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    20.6K
    1000.00₺
  • Canlı Radyo Dark Scripti

    13.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.9K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.1K
    0.00₺
  • Radyo Minimal

    3.9K
    1000.00₺
  • Ekitap Scripti

    6K
    3000.00₺
  • Aşk Sevgililer GünüEvlilik

    7.5K
    1000.00₺
  • Sohbet Scripti

    7.6K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.6K
    0.00₺
  • Firebase Chat

    3.7K
    0.00₺
  • Web Ajans Scripti

    23.9K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.9K
    1000.00₺
  • Ajans Scripti V2

    3K
    1000.00₺
  • Ajans Scripti V3

    3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.6K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    39.3K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    5.2K
    1000.00₺
  • İlan Web Tasarımı

    2.2K
    1000.00₺
  • İlan Web Tasarımı V2

    2.2K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.9K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.5K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.3K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.4K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.6K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.3K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.3K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.1K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.9K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.2K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.7K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.6K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.7K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.1K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.6K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.8K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.9K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.6K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.4K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.7K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.6K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.7K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.7K
    1000.00₺
  • Ajans Web Tasarımı V5

    3K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.2K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.1K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.4K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    5.3K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.5K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.5K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.4K
    1000.00₺
  • Psikolog Web Tasarımı

    1.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.7K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.7K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.6K
    900.00₺
  • Google Indexing Api

    319
    500.00₺
  • Milando Radyo Wordpress Teması

    246
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img