- Katılım
- 6 Kas 2021
- Mesajlar
- 2,685
- Tepkime puanı
- 4,058
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
HTML ve CSS ile Mobil Uyumlu Basit Web Sayfası Yapımı
Günümüzde web sayfalarının büyük çoğunluğu mobil cihazlardan ziyaret ediliyor. Bu nedenle, oluşturduğunuz her web sayfasının mobil cihazlarda düzgün görüntülenmesi kritik önem taşıyor. Bu makalede, sıfırdan mobil uyumlu (responsive) bir web sayfasının nasıl oluşturulacağını adım adım anlatacağım.Temel Yapı: HTML
Öncelikle temel HTML yapımızı oluşturalım:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobil Uyumlu Web Sayfası</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>Site Başlığı</h1>
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section class="hero">
<h2>Hoş Geldiniz</h2>
<p>Web sitemize hoş geldiniz. Mobil uyumlu tasarımımızı keşfedin.</p>
<a href="#" class="btn">Daha Fazla</a>
</section>
<section class="features">
<article>
<h3>Özellik 1</h3>
<p>Bu alan birinci özelliği açıklamaktadır.</p>
</article>
<article>
<h3>Özellik 2</h3>
<p>Bu alan ikinci özelliği açıklamaktadır.</p>
</article>
<article>
<h3>Özellik 3</h3>
<p>Bu alan üçüncü özelliği açıklamaktadır.</p>
</article>
</section>
</main>
<footer>
<div class="container">
<p>© 2023 Mobil Uyumlu Web Sayfası</p>
</div>
</footer>
</body>
</html>Önemli HTML Etiketleri Açıklaması
- Viewport meta etiketi: <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Bu etiket sayfanın mobil cihazlarda doğru şekilde ölçeklenmesini sağlar.
- Semantik HTML5 etiketleri: <header>, <nav>, <main>, <section>, <article>, <footer>
- Bu etiketler hem erişilebilirlik hem de SEO için önemlidir.
Stil Dosyası: CSS
Şimdi styles.css dosyamızı oluşturalım:
CSS:
/* Genel Stiller */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Stilleri */
header {
background-color: #2c3e50;
color: white;
padding: 20px 0;
}
header h1 {
margin-bottom: 10px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
nav a:hover {
color: #f39c12;
}
/* Hero Bölümü */
.hero {
text-align: center;
padding: 60px 0;
background-color: #f8f9fa;
margin: 20px 0;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #c0392b;
}
/* Özellikler Bölümü */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 40px 0;
}
.features article {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.features h3 {
color: #2c3e50;
margin-bottom: 10px;
}
/* Footer */
footer {
background-color: #34495e;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}
/* Mobil Uyumluluk için Medya Sorguları */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 10px;
}
.features {
grid-template-columns: 1fr;
}
.hero h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.hero {
padding: 40px 0;
}
.hero h2 {
font-size: 1.8rem;
}
.btn {
padding: 8px 16px;
}
}Mobil Uyumluluk için Kritik CSS Özellikleri
- Esnek Layout Sistemleri:
- flexbox ve grid gibi modern CSS layout sistemleri
- Örnek: display: flex;, display: grid;
- Esnek Birimler:
- Sabit piksel değerleri yerine %, vw, vh, rem gibi göreceli birimler
- Örnek: width: 100%; max-width: 1200px;
- Medya Sorguları (Media Queries):
- @media (max-width: 768px) { ... }
- Farklı ekran boyutlarına özel stiller
- Responsive Resimler:
- img { max-width: 100%; height: auto; }
Adım Adım Mobil Uyumlu Sayfa Geliştirme
1. Viewport Meta Etiketi Ekleme
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">2. Esnek Container Kullanma
CSS:
.container {
width: 100%;
max-width: 1200px; /* Maksimum genişlik */
margin: 0 auto; /* Ortalama */
padding: 0 20px; /* Kenar boşlukları */
}3. Flexbox ile Responsive Navigasyon
CSS:
/* Masaüstü */
nav ul {
display: flex;
gap: 20px;
}
/* Mobil */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}4. CSS Grid ile Responsive Kartlar
CSS:
/* Masaüstü - 3 sütun */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Tablet - 2 sütun */
@media (max-width: 992px) {
.features {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobil - 1 sütun */
@media (max-width: 768px) {
.features {
grid-template-columns: 1fr;
}
}5. Responsive Yazı Boyutları
CSS:
.hero h2 {
font-size: 2.5rem; /* Varsayılan boyut */
}
@media (max-width: 768px) {
.hero h2 {
font-size: 2rem; /* Tablet boyutu */
}
}
@media (max-width: 480px) {
.hero h2 {
font-size: 1.8rem; /* Mobil boyutu */
}
}6. Responsive Butonlar
CSS:
.btn {
padding: 10px 20px; /* Varsayılan boyut */
}
@media (max-width: 480px) {
.btn {
padding: 8px 16px; /* Mobil boyutu */
display: block; /* Tam genişlik */
margin: 10px auto; /* Ortalama */
}
}Test Etme ve Hata Ayıklama
- Tarayıcı Geliştirici Araçları:
- Chrome/Firefox/Safari'de responsive tasarım modu
- Farklı cihaz boyutlarını simüle etme
- Gerçek Cihazlarda Test:
- Farklı boyutlarda telefon ve tabletler
- Farklı tarayıcılar (Chrome, Safari, Firefox)
- Online Test Araçları:
- BrowserStack
- Responsinator
- Google Mobile-Friendly Test
Performans Optimizasyonları
- Resim Optimizasyonu:
- srcset özelliği ile responsive resimler
HTML:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="...">- CSS Minifikasyonu:
- Üretim ortamında CSS dosyalarını küçültme
- Gereksiz Kodlardan Kaçınma:
- Kullanılmayan CSS kurallarını temizleme
Sonuç
Bu makalede, sıfırdan mobil uyumlu bir web sayfasının nasıl oluşturulacağını adım adım öğrendik. Responsive tasarımın temel prensiplerini uygulayarak:- Viewport meta etiketi ekledik
- Esnek layout sistemleri (Flexbox ve Grid) kullandık
- Medya sorguları ile farklı ekran boyutlarına özel stiller yazdık
- Responsive yazı boyutları ve butonlar oluşturduk
- Test ve optimizasyon yöntemlerini öğrendik
- Tüm cihazlarda iyi görünmeli
- Kullanıcı deneyimini ön planda tutmalı
- Performans optimizasyonlarını içermeli
- Erişilebilir olmalı
