HTML ve CSS Başlangıç Rehberi
1. HTML Nedir?
HTML (Hypertext Markup Language), web sayfalarını oluşturmak için kullanılan temel işaretleme dilidir. Metin, resim, bağlantı ve diğer öğeleri organize etmek için HTML kullanılır.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML Başlangıç</title> </head> <body><h1>Merhaba Dünya!</h1><p>HTML ve CSS öğreniyorum.</p><a href="https://www.example.com">Örnek Bağlantı</a> </body> </html>
2. CSS Nedir?
CSS (Cascading Style Sheets), #HTML öğelerini stilize etmek için kullanılan bir stil dilidir. Renkler, fontlar, boyutlar ve düzenlemeler #CSS ile kontrol edilir.
css
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
a {
text-decoration: none;
color: #007bff;
}
3. Temel HTML ve CSS Öğeleri
3.1. Metin Öğeleri:
html <h1>Başlık 1</h1> <p>Paragraf</p> <a href="#">Bağlantı</a>
3.2. Form Öğeleri:
html <form action="/submit" method="post"><label for="username">Kullanıcı Adı:</label><input type="text" id="username" name="username"><input type="submit" value="Gönder"> </form>
3.3. Liste Öğeleri:
html <ul> <li>Madde 1</li> <li>Madde 2</li> <li>Madde 3</li> </ul>
3.4. CSS Box Model:
css
.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border: 1px solid #333;
}
Bu temel rehberle, HTML ve CSS kullanarak web sayfaları oluşturabilir ve stilize edebilirsiniz. İlerledikçe, daha karmaşık yapılar ve teknikler öğrenmeye devam edebilirsiniz.
Şimdi isterseniz css ve html kullanarak 3 adet farklı örnek hazırlayalım.
Örnek Uygulama 1: Basit Bir Blog Sayfası
HTML:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blog Sayfası</title><link rel="stylesheet" href="styles.css"> </head> <body><header><h1>My Blog</h1></header><main><article><h2>Blog Başlığı</h2><p>Yazının kısa açıklaması...</p><a href="#">Devamını Oku</a></article><!-- Diğer yazılar buraya eklenebilir --></main><footer><p>© 2023 My Blog. Tüm hakları saklıdır.</p></footer> </body> </html>
CSS (styles.css):
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
article {
margin-bottom: 2rem;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
Örnek Uygulama 2: Anket Formu
HTML:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Anket Formu</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><h1>Anket Formu</h1><form><label for="name">Adınız:</label><input type="text" id="name" name="name" required>
<label for="email">E-posta:</label><input type="email" id="email" name="email" required>
<label for="age">Yaşınız:</label><input type="number" id="age" name="age" required>
<label>Cinsiyetiniz:</label><input type="radio" id="male" name="gender" value="male" checked><label for="male">Erkek</label><input type="radio" id="female" name="gender" value="female"><label for="female">Kadın</label>
<button type="submit">Gönder</button></form></div>
</body>
</html>
CSS (styles.css):
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 1rem;
}
input, button {
margin-top: 0.5rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
Örnek Uygulama 3: Ürün Kartları Galerisi
HTML:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ürün Kartları Galerisi</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="gallery"><div class="card"><img src="product1.jpg" alt="Ürün 1"><h3>Ürün 1</h3><p>Fiyat: $19.99</p><button>Sepete Ekle</button></div>
<div class="card"><img src="product2.jpg" alt="Ürün 2"><h3>Ürün 2</h3><p>Fiyat: $24.99</p><button>Sepete Ekle</button></div>
<!-- Diğer ürün kartları buraya eklenebilir --></div>
</body>
</html>
CSS (styles.css):
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.gallery {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 1rem;
padding: 1rem;
text-align: center;
}
img {
max-width: 100%;
border-radius: 4px;
margin-bottom: 1rem;
}
button {
background-color: #007bff;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
Her bir örnek uygulama, temel HTML ve CSS bilgilerini kullanarak farklı tipte web sayfalarını oluşturmanın birer örneğidir. İhtiyacınıza göre bu temelleri daha da geliştirerek farklı projeler oluşturabilirsiniz.
Diğer Yazılarım:
HTML ve CSS Başlangıç Rehberi
Node.js ve Puppeteer Kullanımı: Başlangıç Rehberi
React Native Animasyonları: Pratik Örneklerle Başlangıç Rehberi
Node.js ile Twitter / X.com API Kullanımı: Temel Adımlar
Chrome Eklentisi Geliştirme Kılavuzu
React.js ile Modern Web Geliştirme: Bileşen Tabanlı Güç
JavaScript: Web Geliştirmenin Temel Taşı
Blockchain Teknolojisi Nedir?
Celestia Coin: Geleceğin Kripto Parası
Step-by-Step Guide to Creating a Smart Contract with Ether.js
Guide to Building a RESTful API with Node.js
Nodejs ve 10 Özelliği
