Bu makalede, HTML ve CSS kullanılarak basit bir web sayfası nasıl tasarlanabileceğini adım adım ele alacağız. Web tasarımına yeni başlayanlar için anlaşılır bir örnek sunarken, HTML ve CSS’in temel kullanımını açıklayacağız.
1. HTML Nedir?
HTML (HyperText Markup Language), web sayfalarını oluşturmak için kullanılan temel bir işaretleme dilidir. Bir HTML belgesi, sayfanın yapısını tanımlar ve tarayıcılara içeriğin nasıl görüntüleneceğini belirtir.
HTML’in temel yapısı şu şekildedir:
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html> <head> <title>Sayfa Başlığı</title> </head> <body> <h1>Merhaba, Dünya!</h1> </body> </html> |
Bu kod:
<!doctype html>ile belgenin HTML5 formatında olduğunu belirtir.<head>kısmında başlık (title) gibi meta bilgiler yer alır.<body>kısmında sayfa içeriği tanımlanır.
2. CSS Nedir?
CSS (Cascading Style Sheets), HTML ile oluşturulan bir sayfanın görsel tasarımını kontrol etmek için kullanılan stil dilidir. Sayfa düzeni, renkler, yazı tipleri ve diğer tasarım öğelerini özelleştirmek için kullanılır.
CSS, üç farklı yöntemle HTML’e eklenebilir:
- Satır içi (Inline CSS): HTML etiketine doğrudan stil eklenir.
- Dahili (Internal CSS): HTML dosyasının
<style>etiketi içinde tanımlanır. - Harici (External CSS): Ayrı bir
.cssdosyasında yazılır ve HTML’e bağlanır.
3. Basit Bir Örnek Proje
Projenin Amacı
HTML ve CSS kullanarak görsel açıdan hoş bir web sayfası oluşturacağız. Bu sayfada:
- Bir ana başlık (
<h1>) ve alt başlık (<h2>) bulunacak. - İki farklı stilde paragraf tasarlanacak.
- Arka plan renkleri ve yazı tipleri özelleştirilecek.
HTML Yapısı
HTML ile sayfanın yapısını oluşturuyoruz. Aşağıdaki kod temel tasarım için kullanıldı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html> <html> <head> <title>Web Tasarımı Örneği</title> <meta charset="utf-8"> </head> <body> <h1>HTML ve CSS ile Web Tasarımı</h1> <h2>CSS'in Önemi</h2> <p id="important"> CSS, bir web sayfasının görsel estetiğini artırmak için kullanılan güçlü bir araçtır. Renk düzeni, yazı tipleri ve düzenleme gibi özelliklerle kullanıcı deneyimini iyileştirebilirsiniz. </p> <p id="secondary"> HTML ve CSS kombinasyonu, modern web tasarımının temel taşını oluşturur. Bu iki dil sayesinde, kullanıcı dostu ve estetik web siteleri geliştirebilirsiniz. </p> </body> </html> |
Yukarıdaki HTML kodları yazılarak tarayıcıda açıldığında aşağıdaki gibi görünecektir.
CSS ile Tasarım
Bu HTML yapısına stil eklemek için aşağıdaki CSS kodlarını kullandık. Bu kodlar, <style> etiketi ile dahili olarak eklenebilir veya harici bir CSS dosyasına yazılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | body { background-color: #f0f8ff; font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { background-color: navy; color: white; text-align: center; font-size: 2.5em; padding: 10px; border-radius: 10px; } h2 { background-color: #ff6347; color: white; text-align: center; font-size: 1.8em; padding: 5px; margin-top: 20px; border-radius: 5px; } p { margin: 20px; padding: 15px; line-height: 1.6; font-size: 18px; } #important { color: darkred; font-weight: bold; text-align: justify; background-color: #ffe4e1; border-left: 5px solid red; padding-left: 10px; } #secondary { color: darkblue; font-style: italic; text-align: justify; background-color: #f0f8ff; border-left: 5px solid blue; padding-left: 10px; } |
4. Çıktı
Yukarıdaki kodlar tarayıcıda çalıştırıldığında, kullanıcı dostu ve görsel olarak çekici bir web sayfası elde edilir. Bu sayfa:
- Hoş bir arka plan rengine sahiptir.
- Başlıklar ve paragraflar belirgin bir tasarımla ayrılmıştır.
- Renkler ve yazı tipleri uyumlu bir şekilde düzenlenmiştir.
Kodların tamamı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!doctype html> <html> <head> <title>www.programlamamakaleleri.com</title> <meta charset="utf-8"> <style> body { background-color: #f0f8ff; font-family: Arial, sans-serif; } h1 { background-color: navy; color: white; text-align: center; font-size: 2.5em; padding: 10px; border-radius: 10px; } h2 { background-color: #ff6347; color: #fff; text-align: center; font-size: 1.8em; padding: 5px; margin-top: 20px; border-radius: 5px; } p { margin: 20px; padding: 15px; line-height: 1.6; font-size: 18px; } #important { color: darkred; font-weight: bold; text-align: justify; background-color: #ffe4e1; border-left: 5px solid red; padding-left: 10px; } #secondary { color: darkblue; font-style: italic; text-align: justify; background-color: #f0f8ff; border-left: 5px solid blue; padding-left: 10px; } </style> </head> <body> <h1>HTML ve CSS ile Web Tasarımı</h1> <h2>CSS Kullanımı</h2> <p id="important"> CSS (Cascading Style Sheets), HTML sayfalarını daha estetik ve okunabilir hale getirmek için kullanılan bir stil dilidir. Renkler, yazı tipleri, düzen ve animasyon gibi birçok özelliği özelleştirmenizi sağlar. </p> <p id="secondary"> Örneğin, arka plan rengi değiştirilerek bir web sayfasının görünümü tamamen farklı bir hale getirilebilir. Ayrıca, CSS sayesinde mobil cihazlara uygun tasarımlar yaparak kullanıcı deneyimi artırılabilir. </p> </body> </html> |
5. Geliştirilebilecek Özellikler
- Responsive Tasarım: CSS
@mediasorguları eklenerek sayfa mobil cihazlara uygun hale getirilebilir. - Daha Fazla İçerik: Liste, tablo veya resim gibi yeni HTML öğeleri eklenebilir.
- Harici CSS: Harici bir stil dosyası kullanılarak kod düzeni iyileştirilebilir.
Sonuç
Bu makalede, HTML ve CSS kullanarak basit bir web sayfası tasarımı gerçekleştirdik. Web tasarımında bu iki teknolojiyi etkili bir şekilde kullanmak, kullanıcı deneyimini artırmak için temel bir gerekliliktir.
