Herkese merhaba; bu yazıda sizlere basit bir web sayfası oluşturmayı göstereceğim. Bu web sayfasını oluştururken HTML5 ile gelen şematik etiketleri kullanarak, modern ve düzenli bir yapı oluşturacağız. Ayrıca CSS Flexbox özelliğiyle sayfa düzenini kolayca nasıl şekillendirebileceğinizi öğreneceksiniz. Bu rehber sayesinde, hem temel web tasarım prensiplerini kavrayacak hem de modern bir web sayfası oluşturmanın keyfini çıkaracaksınız.
Aşağıdaki gibi bir wireframe tasarımı oluşturduk. İlk olarak, bu tasarımı inceleyelim ve yapısına genel bir bakış atalım. Bu, oluşturacağımız web sayfasının genel düzeni ve bölümleri hakkında bize bir fikir verecek.

Tasarımda gördüğünüz gibi, sayfamız yatay olarak üç ana bölümden oluşmaktadır. Bu bölümler sırasıyla:
- Header (Üst): Sayfanın başlık kısmı, genellikle logo, menü ve navigasyon gibi öğeleri içerir.
- Main (Orta ya da Ana): İçeriğin bulunduğu ana alan, makale, görseller ve diğer ana bilgiler bu bölümde yer alır.
- Footer (Alt): Sayfanın en alt kısmı, genellikle telif hakkı bilgileri ve ek bağlantılar burada bulunur.
Bu bölümler, HTML5’in sunduğu şematik etiketlerle adlandırılmıştır ve daha düzenli bir yapı sunar.
Web Sayfasını Kodlama
Ana yapıyı doğru şekilde açıkladığımıza göre, şimdi body içindeki iskelet yapısını oluşturabiliriz. Bu yapıyı oluştururken, HTML5’in sunduğu header, main ve footer etiketlerini kullanarak tasarımımızı daha şematik ve anlamlı hale getiriyoruz. Ayrıca, tasarımı diğer sayfalarda da kullanabilmek için link etiketi ile tasarim.css
adında bir stil dosyasını bağladık.
Aşağıda oluşturduğum temel HTML iskeletini görebilirsiniz:
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 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama Web Çalışması</title> <link rel="stylesheet" href="tasarim.css"> </head> <body> <!-- header bölümü--> <header> <!-- Üst alan içeriği burada yer alacak --> </header> <!-- main bölümü--> <main> <!-- Ana içerik burada olacak --> </main> <!-- footer bölümü--> <footer> <!-- Alt bilgi burada olacak --> </footer> </body> </html> |
Header Bölümü
Header bölümü, sitenin başlık bilgisini ve navigasyon menüsünü barındıran üst alandır. Bu bölüm, ziyaretçilerin siteyi kolayca gezmesine olanak tanır. Aşağıdaki örnekte, sitenin adı olan “Kişisel Blog” bir <h1>
etiketi ile belirtilmiş ve navigasyon menüsü bir <nav>
etiketi ile oluşturulmuştur. Menü öğeleri ise bir <ul>
(liste) yapısı kullanılarak düzenlenmiştir.
Kod şu şekildedir:
1 2 3 4 5 6 7 8 9 10 11 12 | <header> <h1>Kişisel Blog</h1> <nav> <ul id="main-menu"> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="about.html">Hakkımızda</a></li> <li><a href="contact.html">İletişim</a></li> </ul> </nav> </header> |
Main Bölümü
Web sayfalarının en önemli bölümlerinden biri, içeriğin ve yardımcı öğelerin bir arada sunulduğu main bölümüdür. Bu bölüm genellikle iki ana parçadan oluşur:
- Ana İçerik (article): Kullanıcının sayfadan en çok fayda sağlayacağı bilgilerin yer aldığı kısım.
- Yan Menü (aside): Ek bilgiler, hızlı erişim bağlantıları ya da reklam alanları gibi destekleyici öğelerin bulunduğu kısım.
Bu iki bölümü bir araya getirerek aşağıdaki yapıyı oluşturuyoruz:
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 | <main> <article> <section> <h2>Web Tasarım</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae ex reprehenderit eligendi. Culpa obcaecati rem ipsum molestiae magnam facere sed, ab, recusandae qui nostrum incidunt? Debitis delectus autem eaque voluptatum.</p> </section> <section> <h2>Responsive Tasarım</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae ex reprehenderit eligendi. Culpa obcaecati rem ipsum molestiae magnam facere sed, ab, recusandae qui nostrum incidunt? Debitis delectus autem eaque voluptatum.</p> </section> </article> <aside> <section> <h2>Yan Menu</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> </aside> </main> |
1. Ana İçerik (article):
Bu kısımda, web sayfasının ana içeriğini temsil eden article
etiketi kullanılmıştır. İçeriği daha düzenli bir şekilde organize etmek için:
<section>
: Her bir konu veya içerik bölümü için kullanılmıştır.<h2>
: Bölüm başlıkları için kullanılmıştır.<p>
: Bölüm içeriğini açıklayan paragrafları tanımlamak için eklenmiştir.
2. Yan Menü (aside):
Yan menü, sayfanın destekleyici içeriklerini barındırır. Bu bölümde:
<aside>
: Ana içerikten bağımsız, ek bilgi veya bağlantılar sunmak için kullanılmıştır.<ul>
: Liste yapısını düzenlemek için kullanılmıştır.<li>
ve<a>
: Liste öğeleri ve her bir bağlantıyı temsil eder.
Bu şekilde, main bölümü hem ana içeriği hem de yan menüyü bir araya getirerek kullanıcı dostu bir yapı sunar. İlerleyen adımlarda, bu yapıyı CSS kullanarak görsel olarak düzenleyeceğiz. 😊
Footer Bölümü
Web sayfasının en alt kısmı olan footer bölümü, genellikle telif hakları, iletişim bilgileri ve sayfanın diğer ek bilgilerinin yer aldığı alandır. Bu bölüm, sayfanın tamamlayıcı kısmını oluşturur ve genellikle her sayfanın alt kısmında sabit olarak bulunur.
Footer, sayfanın kapanışını yapmak ve kullanıcıya yasal bilgiler veya siteye dair genel bilgiler sunmak için kullanılır. Aşağıda, basit bir footer örneği yer almaktadır:
1 2 3 4 5 | <footer> <p>© Tüm Hakları Saklıdır. İzinsiz Kopyalanamaz.</p> </footer> |
Footer Etiketi:
<footer>
: Sayfanın en alt kısmında yer alacak olan, genellikle telif hakkı bilgileri, iletişim bağlantıları ve diğer genel bilgiler için kullanılan etikettir.
2. Telif Hakkı Bilgisi:
<p>
: Bu etiket, paragraf oluşturmak için kullanılır ve burada telif hakkı bilgilerini içeriyor.©
: HTML’de telif hakkı simgesini temsil eden karakter kodudur ve “©” simgesini sayfada göstermek için kullanılır.
HTML Kodu
Aşağıdaki HTML kodları, bir web sayfasının temel yapısını ve her bir bölümün nasıl oluşturulacağını göstermektedir. Bu yapıyı kullanarak kendi web sayfanızı oluşturabilirsiniz.
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 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama Web Çalışması</title> <link rel="stylesheet" href="tasarim.css"> </head> <body> <!-- Header Bölümü --> <header> <h1>Kişisel Blog</h1> <nav> <ul id="main-menu"> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> </header> <!-- Main Bölümü --> <main> <article> <section> <h2>Web Tasarım</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae ex reprehenderit eligendi. Culpa obcaecati rem ipsum molestiae magnam facere sed, ab, recusandae qui nostrum incidunt? Debitis delectus autem eaque voluptatum.</p> </section> <section> <h2>Responsive Tasarım</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae ex reprehenderit eligendi. Culpa obcaecati rem ipsum molestiae magnam facere sed, ab, recusandae qui nostrum incidunt? Debitis delectus autem eaque voluptatum.</p> </section> </article> <aside> <section> <h2>Yan Menü</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> </aside> </main> <!-- Footer Bölümü --> <footer> <p>© Tüm Hakları Saklıdır. İzinsiz Kopyalanamaz.</p> </footer> </body> </html> |
HTML Kodlarının Açıklaması
1. Header Bölümü:
<header>
: Sayfanın başlık kısmını tanımlar.<h1>
: Sayfanın ana başlığını içerir ve ziyaretçiye sayfa hakkında bilgi verir.<nav>
: Navigasyon menüsünü tanımlar. Menüde sayfa içi bağlantılar yer alır.<ul>
: Menü öğelerini listelemek için kullanılır.<li>
: Menü öğelerini belirtir.<a>
: Bağlantı etiketidir. Bu etiket ile kullanıcılar, menüdeki öğelere tıklayarak diğer sayfalara geçiş yapabilirler.
2. Main Bölümü:
<main>
: Sayfanın ana içeriğini barındırır.<article>
: Sayfanın ana içeriği, yazılar ve makaleler burada yer alır.<section>
: İçeriği bölümlere ayırarak daha düzenli ve okunabilir hale getirir.<aside>
: Yan bilgiler, ek içerikler ve bağlantılar için kullanılır.
3. Footer Bölümü:
<footer>
: Sayfanın alt kısmını tanımlar ve genellikle telif hakları, iletişim bilgileri gibi içerikler yer alır.<p>
: Paragraf etiketi, metin içeriklerini tanımlar.
CSS Düzenlemesi: Tasarım Dosyasına Geçiş
HTML kodlarımızı tamamladıktan sonra, sayfanın görsel düzenini sağlamak için CSS (Cascading Style Sheets) kullanacağız. CSS, web sayfasının stilini belirler ve HTML içeriğine renk, boyut, boşluk gibi özellikler ekler.
Bir adımda tasarim.css dosyasını kullanarak sayfanın stilini düzenleyeceğiz. CSS ile her bir HTML etiketine özel stil kuralları ekleyerek sayfanın daha estetik görünmesini sağlayabiliriz.
CSS Kodları: Genel Ayarlar
İlk olarak, genel stil düzenlemelerini yapacağız. Bu düzenlemeler sayfanın tüm elemanlarına uygulanan temel stil kurallarını içerir. Böylece sayfanın her bölümünde tutarlı bir görünüm elde edilir.
1 2 3 4 5 6 7 8 9 | /* Genel CSS Düzenlemesi */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } |
1. *
Seçici (Universal Selector):
*
: Bu CSS seçici, sayfada kullanılan tüm HTML elemanlarına uygulanır. Bu şekilde, sayfadaki her bir öğe üzerinde aynı temel stil kuralları geçerli olur.margin: 0;
: Tüm elemanların dış margin (kenar boşluğu) değerini sıfırlayarak, öğeler arasındaki gereksiz boşlukları kaldırıyoruz.padding: 0;
: Tüm elemanların iç padding (iç boşluk) değerini sıfırlayarak, öğelerin iç kısımlarındaki boşlukları ortadan kaldırıyoruz.box-sizing: border-box;
: Bu kural, öğelerin genişlik ve yükseklik hesaplamalarını daha kontrollü yapmamızı sağlar. Bu sayede margin ve padding değerleri dahil edildikten sonra öğelerin gerçek boyutları daha doğru bir şekilde hesaplanır.font-family: sans-serif;
: Sayfadaki tüm yazı tiplerini sans-serif (kesiksiz) font olarak ayarlıyoruz. Bu, modern ve okunabilir bir yazı tipi sağlar.
Body Etiketi İçin Düzenlemeler
1 2 3 4 5 6 7 8 | body { line-height: 125%; min-height: 100vh; /*vh*/ display: flex; flex-direction: column; } |
2. body
Etiketi:
line-height: 125%;
: Bu özellik, metin satırları arasındaki boşluğu artırarak daha rahat okunabilirlik sağlar. Yüzde değeri, yazı tipinin boyutuna göre ayarlanır. Bu ayar, metinler arasındaki sıkışıklığı önler.min-height: 100vh;
: Bu özellik, sayfanın minimum yüksekliğini ayarlayarak sayfanın tamamının ekranın en az 100% kadar yer kaplamasını sağlar. Bu sayede sayfa içeriği az olsa bile, sayfa her zaman tam ekran yüksekliğine sahip olur.display: flex;
: Sayfa içeriğini düzenlemek için Flexbox modeli kullanılacaktır. Flexbox, sayfa düzenini daha esnek ve dinamik hale getiren güçlü bir CSS düzenleme aracıdır.flex-direction: column;
: Flexbox düzeninde öğelerin dikey (vertical) yönde sıralanmasını sağlar. Yani sayfa içeriği, üstten alta doğru sıralanacaktır.
Bu adımla birlikte sayfamızın temel yapısı düzenlenmiş olur. Şimdi, sayfa içeriğinin her bir parçasına stil vermek için header, main ve footer bölümleri için ayrı düzenlemelere geçeceğiz. Bu temel stil ayarları sayesinde sayfamız, estetik açıdan daha düzenli ve okunabilir bir hale gelecektir.
Bir sonraki adımda header, main ve footer bölümlerinin stilini ekleyeceğiz.
CSS Kodları: Header Düzenlemeleri
Web sayfasının header kısmı, genellikle sitenin başlık bilgisi ve navigasyon (menü) bağlantılarını içerir. Bu bölümün görünümü, sayfanın genel estetiğini belirleyen en önemli unsurlardan biridir. Şimdi, header kısmının stil düzenlemelerini yapacağız. Bu düzenlemeler sayesinde header bölümü, sayfanın üst kısmında dikkat çekici bir yer tutacak ve kullanıcı dostu bir tasarıma sahip olacaktır.
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 | /* Header ve Footer Kısımları */ header, footer { background-color: #a51890; color: #fff; padding: 20px 0; text-align: center; } /* Ana Menü Düzenlemeleri */ #main-menu { display: flex; justify-content: center; list-style: none; margin-top: 10px; } #main-menu a { display: block; color: #34002d; text-decoration: none; padding: 10px; } #main-menu a:hover { text-decoration: underline; color: #fff; } |
1. header
ve footer
Düzenlemeleri:
header, footer
: Bu iki bölüm, sayfanın üst ve alt kısımlarını oluşturur. Hem header hem de footer için aynı stil kurallarını uygulayacağız.
background-color: #a51890;
: Hem header hem de footer için koyu mor renginde bir arka plan rengi belirliyoruz. Bu renk, sayfanın temel renk temasını oluşturur ve dikkat çekici bir görünüm sağlar.color: #fff;
: Hem header hem de footer’daki metinler beyaz renkte olacak. Bu renk, koyu mor arka planla kontrast oluşturarak metinlerin daha kolay okunmasını sağlar.padding: 20px 0;
: Header ve footer’a 20px’lik bir dikey (yukarı ve aşağı) iç boşluk ekliyoruz. Bu, içerik ile kenar arasındaki mesafeyi arttırarak daha düzenli bir görünüm sağlar.text-align: center;
: Header ve footer içeriğini yatayda ortalayarak, başlık ve metinlerin görsel olarak dengeli ve estetik olmasını sağlıyoruz.
2. #main-menu
(Ana Menü) Düzenlemeleri:
#main-menu
: Bu, sayfanın ana menüsünü temsil eden ul
etiketine verilen kimliktir (ID). Ana menüdeki bağlantılar, yatay bir şekilde sıralanacaktır.
display: flex;
: Menü öğelerini esnek bir düzende sıralamak için Flexbox modelini kullanıyoruz. Bu sayede menü öğeleri düzenli ve esnek şekilde yerleştirilebilir.justify-content: center;
: Menü öğelerini yatayda ortalayarak, menüyü sayfanın ortasında konumlandırıyoruz. Bu, sayfanın düzeninin daha dengeli görünmesini sağlar.list-style: none;
: Menüdeki liste işaretlerini (bullets) kaldırıyoruz. Bu, daha temiz bir görünüm elde etmemizi sağlar.margin-top: 10px;
: Menü öğelerinin üst kısmına 10px’lik bir boşluk ekliyoruz. Bu, başlık ile menü arasındaki mesafeyi ayarlamak için kullanılır.
3. #main-menu a
(Bağlantılar) Düzenlemeleri:
#main-menu a
: Ana menüdeki bağlantılara stil uygulayacağız.
display: block;
: Menüdeki her bağlantıyı blok seviyesinde bir öğe haline getiriyoruz. Bu, her bağlantının kendi satırında yer almasını sağlar.color: #34002d;
: Bağlantıların renklerini koyu mor yapıyoruz. Bu renk, menüdeki bağlantıların görünürlüğünü arttırır.text-decoration: none;
: Bağlantıların altını çizme stilini kaldırıyoruz. Bu, menü öğelerinin daha şık ve sade görünmesini sağlar.padding: 10px;
: Bağlantıların iç kısmına 10px’lik bir boşluk ekliyoruz. Bu, her bağlantının etrafında yeterli boşluk olmasını sağlar.
4. #main-menu a:hover
(Fare ile Üzerine Gelme Durumu) Düzenlemeleri:
#main-menu a:hover
: Kullanıcı fareyi menü öğelerinin üzerine getirdiğinde uygulanacak stil.
text-decoration: underline;
: Fare ile üzerine gelindiğinde bağlantıların altı çizilir. Bu, kullanıcılara etkileşimde bulunabileceklerini görsel olarak bildirir.color: #fff;
: Fare ile üzerine gelindiğinde bağlantıların rengi beyaz olur. Bu, fareyle etkileşimde bulunan öğelerin görünümünü değiştirerek dikkat çekicilik sağlar.
Bu stil düzenlemeleri, sayfanın header bölümünü şık ve işlevsel hale getirecek. Ayrıca, ana menü bağlantılarını görünür ve kullanıcı dostu yapacaktır. Şimdi, bu düzenlemeler ile sayfamızın üst kısmı kullanıcıya temiz, düzenli ve kolay gezilebilir bir deneyim sunacak.
Bir sonraki aşamada main ve footer bölümleri için stil ayarlarını yapacağız.
CSS Kodları: Main Bölümü Düzenlemeleri
Sayfanın main bölümü, içeriğin ana kısmını ve yan menüyü içerir. Bu bölümü doğru şekilde stilize ederek, içerik ve yan menüyü estetik ve fonksiyonel bir şekilde düzenleyeceğiz. Flexbox düzeni kullanarak esnek ve düzenli bir yapıya sahip olmalarını sağlayacağız. Şimdi, main kısmındaki düzenlemelere bakalım.
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 | /* Main Bölümü Düzenlemeleri */ main { display: flex; gap: 10px; padding: 10px; flex: auto; } /* Article Bölümü (Ana İçerik) */ main article { background-color: #f3f4f7; flex: 9; padding: 10px 10px 0 10px; } /* Aside Bölümü (Yan Menü) */ main aside { background-color: #f3f4f7; flex: 3; padding: 10px 10px 0 10px; } /* Yan Menü Liste Düzenlemeleri */ main aside ul { list-style: none; } /* Yan Menü Bağlantıları */ main aside ul a { color: #000; } /* Section Bölümleri */ main section { padding-bottom: 10px; } |
1. main
Düzenlemeleri:
main
: Bu, sayfanın ana içeriği ile yan menüyü kapsayan bölümün genel düzenidir. Flexbox düzeni kullanarak bu iki bölümün yan yana düzgün bir şekilde yerleşmesini sağlıyoruz.
display: flex;
: Flexbox modelini kullanarak içerikleri esnek bir düzende sıralıyoruz. Bu sayede her bir bölüm (article ve aside) düzenli ve esnek bir şekilde yerleşir.gap: 10px;
: Flexbox düzeninde her öğe arasına 10px’lik boşluk ekliyoruz. Bu, her iki bölüm arasındaki mesafeyi belirler ve sayfanın daha dengeli görünmesini sağlar.padding: 10px;
: Main bölümünün etrafına 10px’lik bir iç boşluk ekliyoruz. Bu, ana içerik ile sayfa kenarları arasında düzgün bir mesafe sağlar.flex: auto;
: Main bölümü içinde yer alan öğelerin esnek şekilde yerleşmesini sağlar.
2. main article
(Ana İçerik) Düzenlemeleri:
main article
: Bu, sayfanın ana içeriğini temsil eden bölümüdür. Flexbox kullanarak bu bölümün daha fazla alan kaplamasını sağlıyoruz.
background-color: #f3f4f7;
: Ana içeriğin arka plan rengini açık gri tonlarında belirliyoruz. Bu renk, sayfanın geri kalan kısımlarıyla uyumlu ve dikkat dağıtmayan bir görünüme sahip olur.flex: 9;
: Bu, main bölümündeki içerik alanının esnek olarak daha fazla yer kaplamasını sağlar. Diğer bölümlere kıyasla daha geniş olacak şekilde tasarlanır.padding: 10px 10px 0 10px;
: İçeriğe 10px’lik iç boşluk ekliyoruz. Üst kısmına 10px’lik boşluk, alt kısmına ise sıfır boşluk ekliyoruz. Bu düzen, içerik ile üstteki bölüm arasındaki mesafeyi arttırırken alt kısımda daha derli toplu bir görünüm sağlar.
3. main aside
(Yan Menü) Düzenlemeleri:
main aside
: Bu bölüm, sayfanın yan menüsünü kapsar ve içeriğin yanında yer alır. Bu bölüm de esnek düzenlemede yer alacak, ancak daha dar bir alan kaplayacak.
background-color: #f3f4f7;
: Yan menünün arka planını ana içerik ile uyumlu şekilde açık gri yapıyoruz.flex: 3;
: Yan menüye, ana içeriğe göre daha küçük bir alan veriyoruz. Bu, esnek düzenlemede aside bölümünün sadece üçte bir kadar yer kaplamasını sağlar.padding: 10px 10px 0 10px;
: Yan menünün iç kısmına da 10px’lik iç boşluk ekliyoruz. Bu, menüdeki öğelerle kenar arasındaki mesafeyi ayarlamamıza yardımcı olur.
4. main aside ul
(Yan Menü Liste Düzenlemeleri):
main aside ul
: Yan menüdeki bağlantıları düzenlemek için liste öğelerine stil uyguluyoruz.
list-style: none;
: Yan menüdeki liste öğelerinin başındaki madde işaretlerini (bullets) kaldırıyoruz. Bu, menü öğelerinin daha şık ve temiz görünmesini sağlar.
5. main aside ul a
(Yan Menü Bağlantıları):
main aside ul a
: Yan menüdeki bağlantılara stil uygulayacağız.
color: #000;
: Bağlantıların rengini siyah yapıyoruz. Bu, bağlantıların görünür ve okunabilir olmasını sağlar.
6. main section
Düzenlemeleri:
main section
: Ana içerik alanındaki her bir bölüm (section) için stil uygulayacağız.
padding-bottom: 10px;
: Her bir bölümün alt kısmına 10px’lik boşluk ekliyoruz. Bu, bölümler arasında yeterli mesafe bırakarak sayfanın daha düzenli görünmesini sağlar.
Bu stil düzenlemeleri ile main bölümü, sayfanın ana içeriği ve yan menüyü düzgün bir şekilde konumlandıracaktır. Flexbox düzeni sayesinde her iki bölüm de esnek bir şekilde yerleşir ve sayfa uyumlu bir şekilde görüntülenir. Bu sayede içerik ile yan menü arasındaki dengeyi koruyarak kullanıcılara şık ve fonksiyonel bir deneyim sunmuş olacağız.
Bir sonraki adımda footer bölümünün stil düzenlemelerini yapacağız.
CSS Kodu: Footer Bölümü Düzenlemeleri
Çok bir şey yok ama işte footer bölümü için basit bir CSS kodu ve açıklaması ile bitireceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Footer Bölümü */ footer { background-color: #a51890; /* Arka plan rengi */ color: #fff; /* Yazı rengi */ text-align: center; /* Yazıyı ortalar */ padding: 20px 0; /* Üst ve alt boşluk */ font-size: 14px; /* Yazı boyutu */ } footer p { margin: 0; /* Paragraf içindeki varsayılan boşluğu kaldırır */ } |
1. footer
Bölümü Düzenlemeleri:
footer
: Sayfanın alt kısmını temsil eden bölümü stilize ediyoruz.
background-color: #a51890;
: footer bölümünün arka plan rengini mor tonlarından birine ayarlıyoruz. Bu renk, sayfa tasarımında dikkat çekici bir şekilde alt kısma yerleşir.color: #fff;
: Yazı rengini beyaz olarak belirliyoruz. Arka plan mor olduğunda beyaz yazı, görünürlüğü artırır ve kontrast sağlar.text-align: center;
: footer içindeki metni yatay olarak ortalıyoruz. Bu, genellikle alt bilgi kısmında metni düzgün ve simetrik yerleştirmek için kullanılır.padding: 20px 0;
: footer kısmına üst ve alt kısımlara 20px’lik iç boşluk ekliyoruz. Bu, metnin kenarlardan çok yakın olmasını engeller ve daha dengeli bir görünüm sağlar.font-size: 14px;
: Yazı boyutunu 14px olarak ayarlıyoruz. footer bölümündeki metin genellikle daha küçük olur, böylece sayfanın ana içeriğinden ayrılır.
2. footer p
(Paragraf Stili) Düzenlemeleri:
footer p
: footer içindeki paragrafları stilize ediyoruz.
margin: 0;
: Paragraf etiketinin varsayılan üst ve alt margin (boşluk) değerlerini sıfırlıyoruz. Bu, paragraflar arasında istenmeyen fazlalık boşlukların önüne geçer ve metnin daha derli toplu görünmesini sağlar.
Bu basit stil düzenlemeleri ile footer bölümü, sayfanın alt kısmında düzgün bir şekilde yer alacak ve içerik, kullanıcının sayfanın sonunda gezinmesini kolaylaştıracak şekilde şık görünecektir.

Sonuç
Bu makalede, basit bir web sayfası tasarımı oluştururken HTML ve CSS kullanarak temel yapıyı nasıl inşa edebileceğimizi adım adım öğrendik. HTML ile sayfamızın ana iskeletini oluşturduktan sonra, CSS ile bu yapıyı stilize ederek görsel açıdan daha şık ve düzenli hale getirdik.
Başlangıçta header, main ve footer gibi temel bölümleri oluşturduktan sonra, her bir bölümün içeriğini ve tasarımını detaylandırdık. CSS ile her bir bölüme özgü renk, yazı tipi, boşluklar ve hizalamalar gibi düzenlemeler yaparak, sayfanın hem fonksiyonel hem de estetik açıdan iyi bir kullanıcı deneyimi sunmasını sağladık.
Bu tür basit düzenlemeler, web tasarımına yeni başlayanlar için oldukça faydalıdır. Temel yapı ve stil bilgilerini öğrendikten sonra, daha karmaşık projelere geçiş yapmak çok daha kolay olacaktır.
HTML ve CSS bilgilerinizi geliştirdikçe, sayfanızın işlevselliğini ve görünümünü daha da ileriye taşıyabilirsiniz. Unutmayın, web tasarımı ve geliştirme süreci, pratik yaparak daha iyi hale gelinen bir alandır.
Yorum Yap