Web, bilgiye erişim ve iletişim aracı olarak gün geçtikçe daha da önem kazanıyor. Bu nedenle, web geliştirme becerileri edinmek, kişisel veya profesyonel hedeflerinize ulaşmanızı destekleyebilir. Web sayfaları oluşturmanın temelini HTML ve CSS oluşturur. HTML (Hypertext Markup Language), web sayfalarının yapısal bileşenlerini tanımlayan bir işaretleme dilidir. CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stilini düzenler. Bu iki teknolojiyi kullanarak, herhangi bir içerikten etkileyici web sayfaları oluşturabilirsiniz.
Bu makale, hiçbir önceki deneyimi olmayanlar için tasarlanmıştır ve her adımı açıklayıcı örneklerle sunar. İlk adım, temel bir HTML belgesi oluşturmakla başlar ve ardından sayfa içeriğini eklemek, başlıklar, paragraflar ve görseller eklemek gibi adımlarla devam eder. Daha sonra, web sayfanızın görünümünü özelleştirmek için CSS kullanmayı öğrenirsiniz.
Eğer kodlamaya yeni başlıyorsanız endişelenmeyin, bu makale size adım adım rehberlik edecek ve web geliştirme dünyasına adım atmanıza yardımcı olacaktır. Hazırsanız, ilk adım olan temel bir HTML belgesi oluşturma sürecine başlayalım!
HTML (Hypertext Markup Language), web sayfalarının temel yapısını tanımlar. İşte temel bir HTML belgesi yapısı:
html<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Örnek Web Sayfası</title>
</head>
<body>
<!-- Sayfa içeriği buraya eklenecek -->
</body>
</html>
<html>: HTML belgesinin başlangıcını ve bitişini işaretler. lang özelliği sayfanın dilini belirtir.
<head>: Sayfanın başlık, karakter seti ve meta bilgilerini içeren bölümdür.
<meta charset="UTF-8">: Sayfanın karakter kodlamasını UTF-8 olarak ayarlar.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mobil cihazlarda düzgün görüntülenmesini sağlayan bir meta etiketi.
<title>: Sayfa başlığını belirtir.
<body>: Sayfa içeriğini içeren bölümdür.
Adım 2: Sayfa Başlığını ve Başlık Etiketini Eklemek
Sayfa başlığı, tarayıcı sekmesinde görünen metni tanımlar. Başlık etiketini <head> bölümü içine ekleyelim:
html<title>Örnek Web Sayfası</title>
Adım 3: Sayfa İçeriğini Eklemek
Web sayfasının içeriğini <body> etiketi içine ekleyebilirsiniz. Örnek bir başlık (<h1>), bir paragraf (<p>) ve bir resim (<img>) ekleyelim:
html<body>
<h1>Hoş Geldiniz!</h1>
<p>Merhaba, bu örnek web sayfasıdır.</p>
<img src="resim.jpg" alt="Örnek Resim">
</body>
Adım 4: CSS Eklemek
CSS (Cascading Style Sheets), sayfanın görünümünü düzenlemenize yardımcı olan bir stil dilidir. CSS kodlarını <head> bölümünde <style> etiketi içinde veya harici bir CSS dosyasında tanımlayabilirsiniz.
Örnek bir harici CSS dosyası oluşturalım. İlk olarak, stil.css adında bir dosya oluşturun ve aşağıdaki kodu içine ekleyin:
css/* stil.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
p {
color: #666;
}
img {
max-width: 100%;
height: auto;
}html<head>
<!-- Diğer başlık etiketleri -->
<link rel="stylesheet" href="stil.css">
</head>
Bu şekilde, CSS dosyasındaki kurallar sayfanızın görünümünü düzenler.
Adım 5: Web Sayfasını Tarayıcıda Göstermek
HTML ve CSS kodlarını yazdıktan sonra, dosyalarınızı bir klasörde saklayın ve bir tarayıcıda açın. Web sayfanızı görüntülemelisiniz.
Bu adımları izleyerek, temel bir web sayfası oluşturabilir ve HTML ile CSS kullanarak sayfanızın görünümünü özelleştirebilirsiniz. Başlangıç için bu adımlar yeterli olacaktır ve daha fazla karmaşıklık ekleyerek sayfanızı geliştirebilirsiniz.
0 Yorumlar
Buraya gelerek zahmet ettin biraz ama memnun oldum şimdiden .