HTML ve CSS ile Basit Web Sayfası Oluşturma
Merhaba! Bu makalede, HTML ve CSS kullanarak basit bir web sayfası nasıl oluşturulacağını adım adım öğreneceğiz. Öncelikle temel HTML yapısını kurarak başlayacağız, ardından CSS ile sayfamızı özelleştireceğiz. Bu rehber, yeni başlayanlar için bile kolayca anlaşılır şekilde tasarlanmıştır.
Temel HTML Yapısı
Her HTML belgesi, <html> etiketi ile başlar ve sonlanır. Bu etiket içerisinde, sayfamızın içeriğini düzenleyen diğer etiketler bulunur. Örneğin, <head> bölümü, başlık, meta verileri ve stil bilgileri gibi sayfanın görünüşüyle doğrudan ilgili olmayan bilgileri içerir. <body> bölümü ise, sayfanın görünür içeriğini yani metin, resim ve diğer unsurları barındırır.
<html>
<head>
<title>Basit Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam!</p>
</body>
</html>
Yukarıdaki kodda, <title> etiketi sayfamızın başlığını tanımlar. <h1> etiketi başlığı, <p> etiketi ise paragrafları oluşturur. Bu temel yapıyı anladıktan sonra, sayfamıza daha fazla içerik ekleyebiliriz. Örneğin, resimler eklemek için <img> etiketini, listeler oluşturmak için <ul> veya <ol> etiketlerini kullanabiliriz. Bunların hepsi HTML’in temel yapı taşlarını oluşturur.
CSS ile Sayfa Stili
HTML sayfamızın temel yapısını oluşturduktan sonra, CSS (Cascading Style Sheets) kullanarak görünümünü özelleştirebiliriz. CSS, HTML elementlerinin renk, font, boyut ve konum gibi özelliklerini kontrol etmemizi sağlar. CSS’i, <style> etiketi içinde <head> bölümüne ekleyebilir veya ayrı bir CSS dosyası oluşturabiliriz.
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
line-height: 1.6;
}
Bu CSS kodu, sayfamızın arka plan rengini, yazı tipini ve başlık ile paragrafların stilini belirler. Burada gördüğümüz gibi, CSS, HTML’in temel yapısıyla birlikte çalışarak web sayfalarımızın görsel çekiciliğini artırır. Daha detaylı CSS teknikleri için W3Schools CSS referansına bakabilirsiniz.
İleri Seviye Konular
Basit bir web sayfası oluşturmanın ötesinde, daha ileri seviye konulara da göz atabilirsiniz. Örneğin, JavaScript kullanarak sayfanıza interaktif özellikler ekleyebilirsiniz. Ayrıca, daha karmaşık web siteleri oluşturmak için framework’ler (örneğin, React, Angular, Vue.js) kullanabilirsiniz. Bu konular, web geliştirme yolculuğunuzda size yardımcı olacak daha gelişmiş beceriler gerektirir. Daha fazla bilgi edinmek için web geliştirmeyle ilgili kaynakları inceleyebilirsiniz. Web tasarım ve geliştirme alanında daha fazla bilgi edinmek istiyorsanız, kendi web sitemi olan fatihsoysal.com‘u ziyaret edebilirsiniz.
Sonuç olarak, HTML ve CSS kullanarak basit bir web sayfası oluşturmak oldukça kolaydır. Bu rehber, temel adımları ve kullanışlı ipuçlarını içermektedir. Pratik yaparak, kendi tasarımlarınızı oluşturmakta daha rahat hale geleceksiniz. Unutmayın, web geliştirme sürekli öğrenmeyi gerektiren bir alandır, bu yüzden yeni şeyler öğrenmekten vazgeçmeyin!
#Etiketler: HTML, CSS, web tasarımı, web geliştirme, web sayfası oluşturma, basit web sitesi, kodlama, programlama, Fatih Soysal