CSS ile yukarıdaki gibi sayfa içi link bağlantılı basit bir tek sayfa tasarım yapmaya çalışalım. Öncelikle, karşımıza gelen tüm uygulamalarda olduğu gibi , tasarımı analiz etmeliyiz..
SAYFA ANALİZİ
Sayfayı incelediğimizde tasarımın 7 bölümden oluştuğunu görebiliriz..
- HEADER Bölümü
- GIRIS (Landing) Bölümü
- HTML Bölümü
- CSS Bölümü
- JAVASCRIPT Bölümü
- PHP Bölümü
- FOOTER Bölümü
Header için <header> , Footer için <footer> semantik etiketlerini , diğerleri için bölüm etiketi olan <section> etiketini kullanabiliriz..
Ayrıca sayfada;
- Her bölüm farlı arka plan renkleri almış.
- Giriş hariç tüm bölümler için eşit yükseklik ayarlanmış.. Giriş bölümüne yükseklik verirken diğer bölümleri padding ile ayarlayabiliriz.
- Sayfa içi linkler için yer işaretleri eklenmiş..
- Her bölümün içeriği yatay ve dikeyde ortalanmış. Bölümler içerisine flex yapı ile ortalanmış .container oluşturabiliriz.
- Bölümler içerisinde bir başlık , bir resim ve bir paragraf kullanılmış.
- Sayfada "calibri" yazı tipi kullanılmış. Body için font-family ile ayarlayabiliriz.
- Body için kenar boşlukları kapatılmış. Margin ve Padding'i sıfırlayabiliriz..
- Sayfada 7 tane aynı özellikte buton kullanılmış. .btn class'ı hazırlayarak kullanabiliriz.
- Sayfa içi link geçişleri yumuşatılmış. scroll-behaviour ile sağlayabiliriz..
- Arama ve butonlarda ikonlar kullanılmış.. Fontawesome ikonlarını kulllanabiliriz..
- Logo hariç , tüm resimlere padding ve kenarlık verilmiş..
SAYFANIN GENEL CSS ÖZELLİKLERİ
Sayfanın kenar boşlukları , yazı tipi , link geçişi özellikleri ile , tüm bölümlerde aynı şekilde kullanacağımız butonların CSS özelliklerini ekleyelim..
html {scroll-behavior: smooth; } /* linkler için yumuşak geçiş */
body {
padding:0; /* sayfa boşlukları */
margin:0;
font-family: calibri; /* sayfa yazı tipi */
}
/* Sayfada kullanılacak butonlar */
.btn {
padding: .5rem 1rem;
background-color:skyblue;
color: #000;
font-weight: bold;
border-radius: 1rem;
transition: .5s;
text-decoration: none;
font-size:.8rem;
cursor:pointer;
}
.btn:hover { background-color:#fff; } /* buton üzerine gelince.. */
HEADER BÖLÜMÜ
Header bölümü için <header> etiketini kullancağız. Bölüm içerisinde LOGO , MENÜ (NAV) ve BUTONLAR olmak üzere 3 alan var. Alanları HEADER içindeki yerleşimlerini header'a flex yapısı vererek yatayda space-around , dikeyde ise ortalanmaları için alim-items : center vererek ayarlayabiliriz..
Bölümün diğer özellikeri :
- Header arka planı siyah yapılmış ve biraz padding değeri eklenmiş.
- Header içinde genel yazı rengi beyaz olmuş.
- Yerleşimlerini header'a flex ile yatayda space-around vererek ayarlayabiliriz..
- Giriş butonlarının sayfayı başa geri döndürebilmesi için header'ın hemen üzerine yer işareti ekleyebliriz.
HTML
<a name="giris"></a> <!-- giriş'e dönmek için yer işareti -->
<header>
<!-- LOGO-->
<span class="logo"> </span>
<!-- MENÜ -->
<nav> </nav>
<!-- BUTONLAR-->
<div class="butons"> </div>
</header>
CSS
header {
background: #000; padding: .5rem; color:#fff ;
display: flex; justify-content: space-around; align-items: center;
}
HEADER LOGO
LOGO alanı için .logo class'lı bir span oluşturalım. Bu alanda bir resim , WEB TASARIM yazısı (P) ve küçük bir açıklama yazısı (small) var. Yazıları tek bir div içerisinde düşünebiliriz. Resim ve DIV yerleşimi için "logo" class'ına flex verelim ve gap ile aralarındaki boşluğu ayarlayalım.
HTML
<!-- LOGO-->
<span class="logo">
<img src="resim/logocss.png" alt="">
<div>
<p>WEB TASARIM</p>
<small> HTML CSS JS PHP </small>
</div>
</span>
CSS
header .logo {
display: flex;
align-items: center;
gap:.3rem;
}/* Logo resmi ve WEB TASARIM yazı özellikleri */
header .logo img { width:70px; }
header .logo p { margin:0; font-size: 1.8rem; font-weight:bold; color: skyblue; }
HEADER MENÜ
Menü alanı için NAV etiketini kullanıyoruz.. Linkler beyaz ve üzerine gelindiğinde mavi oluyor. Ayrıca linklerin href'lerine sayfa içinde gitmesi gereken yer işaretlerini ekliyoruz. Aşağıda, bölümleri hazırlarken bu yer işaretlerini ekleyeceğiz..
HTML
<!-- MENÜ -->
<nav>
<ul>
<li><a href="#giris">GİRİŞ</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JAVASCRIPT</a></li>
<li><a href="#php">PHP</a></li>
</ul>
</nav>
CSS
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap:2rem;
}
header nav ul li a { /* menü linkleri */
color:#fff;
font-weight: bold;
text-decoration: none;
font-size: 1.3rem;
transition: .5s;
}
header nav ul li a:hover { /* linklerin üzerine gelince */
color:#379ad6;
}
HEADER BUTONLAR
Butonar alanını .butons class'lı div ile hazırlıyoruz. Alan içinde 1 arama ikonu ve 2 butonumuz var. Butonlar içerisinde de ikon kullanılmış. Yukarıda, Genel Özelliklerde butonlar için kullanacağımız .btn class'ını biçimlendirmiştik. İkonlar için Fontawesome bağlantısını head içerisinde ekleyip , alan için HTML ve CSS kodlarını ekleyelim. Yine flex kullanarak butonların aralrını gap ile ayarlayabilriiz. Ancak arama ikonu'nu margin-right ile biraz daha sola almamız gerekiyor..
FONTAWESOME BAĞLANTISI
<head>
<!-- fontawesome bağlantısı -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
HTML
<!-- BUTONLAR-->
<div class="butons">
<span class="search"> <i class="fa fa-search fa-2x"> </i> </span>
<button class="btn"><i class="fa fa-plus"></i> <span> KAYIT </span></button>
<button class="btn"><i class="fa fa-sign-in"></i><span> GİRİŞ</span> </button>
</div>
CSS
header .butons { display: flex; gap:.5rem; }
header .butons .search {
cursor: pointer;
margin-right:2rem;
transition: .5s;
}
header .butons span:hover { <!-- arama ikonunu üzerine gelince -->
color:aqua;
}
SECTION ve .CONTAINER
Giriş , HTML , CS, JS ve PHP bölümlerini oluşturmak için SECTION etiketi kullanacağız... Bölümlerdeki içerikler belirli bir genişlikte yatay ve dikeyde ortalanmış. Bunu SECTION içerisinde bir div ile .CONTAINER (aşağıdaki gri div) sağlayabiliriz. Tüm bölümlerde CONTAINER içinde resim , yazı ve buton var. Başlıklar (H2) ise giriş bölümü dışında section içerisinde container'ın üzerinde duruyor.. (içinde değil)
Ayrıca HTML ve JS bölümlerinde resim solda iken , CSS ve PHP bölümlerinde sağa alınmış. Aşağıda bölümlerin HTML kodlarını yazarken dikkat edeceğiz..
Bölüm içeriğinin yerleşimini daha iyi anlamak için taslaklarına bakalım..
GİRİŞ BÖLÜMÜ TASLAĞI
HTML, CSS, JS, PHP BÖLÜMLERİ TASLAĞI
GENEL BÖLÜM HTML YAPISI
<section>
<div class="container">
.
.
</div>
</section>
SECTION ORTAK OZELLİKLERİ
- Yazı rengi beyaz;
- Alt kenarlık siyah düz ve 5px genişliğinde;
- Padding : 7rem
- Arka plan renkleri her bölüm çin farklı
.CONTAINER ORTAK OZELLİKLERİ
- Genişlik 70% ve section içinde ortalanmış (margin : 0 auto)
- flex yapı
- Padding : 2rem
- container içeriğ yatay ve dkeyde ortalanmış
- içerikler arası 3 rem boşluk (gap)
IMG ORTAK ÖZELLİKLERİ
- Genişlik 50%
- Kenarlık beyazdüz ve 1px genişliğinde;
- Kenarlık köşe ovalleştirme 5px
- Padding : 1rem
P ORTAK ÖZELLİKLERİ
- Alt ve üstten 2rem uzaklıkta (margin)
- Yazı rengi #ddd
- Yazı boyutu 1.3rem
CSS
section { /* bölüm ortak özellikler */
color:#fff;
padding: 7rem;
border-bottom: 5px solid #000;
}
section h1 { /* bölüm içindeki P'ler */
margin: 0;
font-size:2.5rem;
text-align: center;
font-family: verdana;
margin-bottom: 3rem;
}
section .container { /* container ortak özellikler */
margin: 0rem auto; /* ortalama */
padding: 2rem;
width:70%;
display: flex;
justify-content: center;
align-items: center;
gap:3rem;
}
section .container img { /* bölüm içindeki resimler */
border-radius : 1rem;
width:50%;
border:1px solid #fff;
padding: 1rem;
}
section .container p { /* bölüm içindeki yazılar */
margin:2rem 0;
font-size: 1.3rem;
color:#ddd;
}
h1 , img ve P etiketleri .container div içinde olduğu için , CSS özellklerini yazarken seçicilerin başına section ve .container class'ını ekledik...
GİRİŞ BÖLÜMÜ
Giriş bölümü için Section etiketine ".giris" class'ı ekliyoruz. Dİğer bölümlerden farklı olarak , bu bölümde H2 yerine, container içindeki yazının (P) üzerinde H3 başlığı kullandık. Dolayısıyla bunu CSS'te ayrıca belirtmeliyiz... Ayrıca giriş bölümüne yükseklik uygulanmış. İçeriğin dikeyde ortalanabilmesi için sadece bu bölüme FLEX yapı uygulayacağız..
- yükseklik 70%;
- arka plan rengi : #4682b4
- Flex yerleşim
- Bölüm içeriği yatay ve dikeyde ortalanmış
HTML
<section class="giris">
<div class="container">
<img src="resim/web.jfif" alt="">
<div>
<h3> WEB TABANLI UYGULAMA GELİŞTİRME </h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#html" class="btn"> HTML </a>
</div>
</div>
</section>
CSS
section.giris {
height:70%;
background-color: #4682b4 ;
display: flex;
justify-content: center;
align-items: center;
}
section.giris h3 {
text-align: left;
font-size:2rem;
margin:0;
}
Giriş bölümündeki HTML butonunun linkine "#html" yer işaretini yazarak tıklandığında HTML bölümüne gitmesini sağlıyoruz..
HTML BÖLÜMÜ
HTML bölümü için Section etiketine ".html" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
HTML section etiketi başlamadan hemen önce "html" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
HTML
<!-- HTML -->
<a name="html"></a> <!-- html bölümü için yer işareti -->
<section class="html">
<h1> HTML </h1>
<div class="container">
<img src="resim/html.jpg" alt="">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
</div>
</section>
CSS
section.html { background-color: #151515; }
CSS BÖLÜMÜ
CSS bölümü için Section etiketine ".css" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
CSS section etiketi başlamadan hemen önce "css" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
HTML
<!-- CSS -->
<a name="css"></a> <!-- css bölümü için yer işareti -->
<section class="css">
<h1> CSS (CASCADING STYLE SHEETS) </h1>
<div class="container">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
<img src="resim/css.jpg" alt="">
</div>
</section>
CSS
section.css { background-color: #111; }
JS BÖLÜMÜ
JAVASCRIPT bölümü için Section etiketine ".js" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
JS section etiketi başlamadan hemen önce "js" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
HTML
<!-- JS -->
<a name="js"></a> <!-- js bölümü için yer işareti -->
<section class="js">
<h1> JAVASCRIPT </h1>
<div class="container">
<img src="resim/js.jpeg" alt="">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
</div>
</section>
CSS
section.js { background-color: #151515; }
PHP BÖLÜMÜ
PHP bölümü için Section etiketine ".php" class'ı ekliyoruz. Bu bölümde H1 başlığı ve onun altında container div'i var.. Her iksiinin ortak CSS özellklerini yukarıda belirtmiştik.. Yükseklik uygulamadığımız için flex yapı kullanmadan CONTAINER div'i margin:0 auto ile ortalıyoruz..
JS section etiketi başlamadan hemen önce "php" isminde yer işareti ekliyoruz. GİRİŞ butonunun linkine ise "#giris" yer işaretini yazarak tıklandığında GİRİŞ bölümüne gitmesini sağlıyoruz..
Bölümlerinin ortak özelliklerinden farklı olarak sadece arka plan için CSS eklemeliyiz...
HTML
<!-- PHP -->
<a name="php"></a> <!-- php bölümü için yer işareti -->
<section class="php">
<h1> PHP (PERSONAL HOME PAGE) </h1>
<div class="container">
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit harum officiis similique voluptas unde quas fugiat nobis ullam commodi quasi consectetur doloribus dolore placeat sequi, esse voluptatum rerum et, dignissimos.</p>
<a href="#giris" class="btn"><i class="fa fa-chevron-up"></i> GİRİŞ </a>
</div>
<img src="resim/php.jpg" alt="">
</div>
</section>
CSS
section.php { background-color: #111;}
FOOTER BÖLÜMÜ
Footer bölümünde sadece ortalanmış linkler mevcut. Section etiketi kullanamdan doğrudan <footer> etiketi içerisinde linkleri yazıp biçimlendirebilriz.
HTML
<footer>
<a href="#giris">GİRİŞ</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JAVASCRIPT</a>
<a href="#php">PHP</a>
</footer>
CSS
footer {
background: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
gap:2rem;
}
footer a { color:#ddd; text-decoration:none; }
footer a:hover{ color:aqua; }
Görüşmek üzere..
.jpg)