HTML ve CSS: Web Geliştirmenin Temel Taşları
HTML (HyperText Markup Language) ve CSS (Cascading Style Sheets), web sayfalarının yapısını ve görünümünü belirlemek için kullanılan iki temel teknolojidir. HTML, web sayfalarının içeriğini tanımlar, CSS ise bu içeriğin nasıl görüneceğini belirler.
HTML Nedir?
HTML, web sayfalarının temel yapı taşını oluşturur. HTML, metin, resim, video ve diğer medya türlerini içeren web sayfalarını oluşturmak için etiketler kullanır. İşte basit bir HTML belgesi örneği:
<h1>Merhaba Dünya</h1>
Bu, bir HTML belgesidir.
HTML Etiketleri
HTML, çeşitli etiketler içerir. İşte bazı temel HTML etiketleri:
- <h1> – <h6>: Başlık etiketleri
- <p>: Paragraf etiketi
- <a>: Bağlantı etiketi
- <img />: Resim etiketi
- <ul>, <ol>, <li>: Liste etiketleri
CSS Nedir?
CSS, HTML ile oluşturulan web sayfalarının görsel stilini belirlemek için kullanılır. CSS, renkler, yazı tipleri, düzen ve diğer stil özelliklerini tanımlar. İşte basit bir CSS örneği:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
CSS Nasıl Kullanılır?
CSS, üç farklı şekilde kullanılabilir:
- Inline CSS: HTML etiketlerinin içine yazılır.
- Internal CSS: HTML belgesinin <head> bölümünde yazılır.
- External CSS: Ayrı bir CSS dosyasında yazılır ve HTML belgesine <link> ile bağlanır.
HTML ve CSS ile İlk Web Sayfanızı Oluşturun
İlk web sayfanızı oluşturmak için HTML ve CSS’i birlikte kullanabilirsiniz. İşte bir örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<title>İlk Web Sayfam</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>Merhaba Dünya</h1>
Bu, bir HTML ve CSS belgesidir.
</body>
</html>
CSS Seçicileri
CSS seçicileri, stil kurallarının hangi HTML elemanlarına uygulanacağını belirler. İşte bazı temel CSS seçicileri:
- Element Seçici: Belirli bir HTML etiketini seçer. Örneğin,
petiketi. - Class Seçici: Belirli bir sınıfa sahip elemanları seçer.
.ile tanımlanır. Örneğin,.sınıfAdı. - ID Seçici: Belirli bir ID’ye sahip elemanları seçer.
#ile tanımlanır. Örneğin,#idAdı.
CSS ile Düzen ve Yerleşim
CSS, web sayfalarının düzenini ve yerleşimini belirlemek için kullanılır. İşte bazı düzen ve yerleşim teknikleri:
- Box Model: HTML elemanlarının kenar boşlukları, sınırları ve dolgu alanlarını tanımlar.
- Flexbox: Esnek düzenler oluşturmak için kullanılır.
- Grid: İki boyutlu düzenler oluşturmak için kullanılır.
HTML Formları ve CSS ile Stil Verme
HTML formları, kullanıcıların veri girişi yapmasını sağlar. CSS ile bu formların görünümünü özelleştirebilirsiniz. İşte bir örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<title>İletişim Formu</title>
<style>
form {
background-color: lightgrey;
padding: 20px;
border-radius: 10px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: navy;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>İletişim Formu</h1>
<form>
<label for="isim">İsim:</label>
<input id="isim" name="isim" type="text" placeholder="İsminizi girin" />
<label for="email">Email:</label>
<input id="email" name="email" type="text" placeholder="Email adresinizi girin" />
<input type="submit" value="Gönder" />
</form>
</body>
</html>
Sonuç
HTML ve CSS, web geliştirme için temel teknolojilerdir. HTML, web sayfalarının içeriğini tanımlar, CSS ise bu içeriğin görsel stilini belirler. Bu rehberde, HTML ve CSS’in temel kavramlarını öğrendiniz. Şimdi, projeler üzerinde çalışarak ve daha ileri konuları öğrenerek HTML ve CSS becerilerinizi geliştirin.
