HTML ve CSS Temelleri
HTML web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir
### HTML (Hypertext Markup Language)
HTML, web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir. HTML, içerik yapısını tanımlar ve tarayıcıya web sayfasının nasıl görüntüleneceği konusunda yönergeler verir.
#### Temel HTML Yapısı:
“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Web Sayfası Başlığı</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<p>Bu bir paragraf örneğidir.</p>
</body>
</html>
“`
– `<!DOCTYPE html>`: HTML5 belirtildiğini belirten bir tanımlama.
– `<html>`: HTML belgesinin başlangıcı.
– `<head>`: Sayfa başlığı, meta bilgileri ve stil dosyaları gibi meta bilgileri içeren bölüm.
– `<meta charset=”UTF-8″>`: Sayfanın karakter setini belirler.
– `<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>`: Mobil cihazlarda doğru bir görüntüleme için viewport ayarı.
– `<title>`: Sayfa başlığı.
– `<body>`: Sayfa içeriğini içeren bölüm.
– `<h1>`, `<p>`: Başlık ve paragraf örnekleri.
### CSS (Cascading Style Sheets)
CSS, HTML veya XML belgelerinin görsel sunumunu kontrol etmek için kullanılan bir stil dilidir.
#### Temel CSS Yapısı:
“`css
/* Temel Stil Dosyası */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #0066cc;
}
p {
font-size: 16px;
line-height: 1.5;
}
“`
– `body`, `h1`, `p`: HTML öğelerine uygulanan stil kuralları.
– `font-family`: Metin fontu.
– `background-color`: Arka plan rengi.
– `color`: Metin rengi.
– `font-size`: Metin boyutu.
– `line-height`: Satır yüksekliği.
#### HTML ve CSS Bağlantısı:
HTML dosyanızın `<head>` bölümünde CSS dosyasını bağlamak için:
“`html
<head>
<!– Diğer meta etiketleri –>
<link rel=”stylesheet” href=”stil.css”>
</head>
“`
Bu, “stil.css” adlı dosyanın HTML belgenizle ilişkilendirilmesini sağlar.
Bu temel bilgilerle başlayabilir ve web geliştirme becerilerinizi geliştirmek için daha fazla öğrenme kaynağına yönelebilirsiniz.
