Nasıl Yapılır - Bir Web Sitesi Yapın
Tüm cihazlarda, PC'de, dizüstü bilgisayarda, tablette ve telefonda çalışacak duyarlı bir web sitesi oluşturmayı öğrenin.
Sıfırdan Web Sitesi Oluşturun
Bir "Düzen Taslağı"
Bir web sitesi oluşturmadan önce sayfa tasarımının bir mizanpaj taslağını çizmek akıllıca olabilir:
Gezinti çubuğu
Yan İçerik
Biraz yazı biraz yazı..
Ana içerik
Biraz yazı biraz yazı..
Biraz yazı biraz yazı..
Biraz yazı biraz yazı..
altbilgi
İlk Adım - Temel HTML Sayfası
HTML, web siteleri oluşturmak için standart biçimlendirme dilidir ve CSS, bir HTML belgesinin stilini tanımlayan dildir. Temel bir web sayfası oluşturmak için HTML ve CSS'yi birleştireceğiz.
Not: HTML ve CSS bilmiyorsanız, HTML Eğitimimizi okuyarak başlamanızı öneririz .
Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Örnek Açıklama
<!DOCTYPE html>Beyanname, bu belgeyi HTML5 olarak tanımlar .- Öğe ,
<html>bir HTML sayfasının kök öğesidir - Öğe ,
<head>belge hakkında meta bilgiler içeriyor - Öğe ,
<title>belge için bir başlık belirtir <meta>Öğe, karakter kümesini UTF-8 olarak tanımlamalıdır .- name="viewport "
<meta>öğesi, web sitesinin tüm cihazlarda ve ekran çözünürlüklerinde iyi görünmesini sağlar - Öğe ,
<style>web sitesi için stilleri içerir (düzen/tasarım) - Öğe ,
<body>görünen sayfa içeriğini içeriyor - Öğe büyük bir başlığı
<h1>tanımlar - Öğe
<p>bir paragraf tanımlar
Sayfa İçeriği Oluşturma
<body>Web sitemizin öğesinin içinde "Yerleşim Taslağımızı" kullanacağız ve şunları oluşturacağız :
- bir başlık
- Bir gezinme çubuğu
- Ana içerik
- yan içerik
- bir altbilgi
başlık
Bir başlık genellikle web sitesinin en üstünde (veya bir üst gezinme menüsünün hemen altında) bulunur. Genellikle bir logo veya web sitesi adı içerir:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Sonra başlığı biçimlendirmek için CSS kullanırız:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Gezinti çubuğu
Bir gezinme çubuğu, ziyaretçilerin web sitenizde gezinmesine yardımcı olacak bir bağlantı listesi içerir:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Gezinme çubuğuna stil vermek için CSS kullanın:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
İçerik
"Yan içerik" ve "ana içerik" olmak üzere 2 sütunlu bir düzen oluşturun.
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Düzeni işlemek için CSS Flexbox kullanıyoruz:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Ardından, düzeni duyarlı hale getirmek için medya sorguları ekleyin. Bu, web sitenizin tüm cihazlarda (masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve telefonlar) iyi görünmesini sağlayacaktır. Sonucu görmek için tarayıcı penceresini yeniden boyutlandırın.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
İpucu: Farklı türde bir düzen oluşturmak için, esnek genişliği değiştirmeniz yeterlidir (ancak %100'e kadar eklendiğinden emin olun).
İpucu: @media kuralının nasıl çalıştığını merak ediyor musunuz? Bununla ilgili daha fazla bilgiyi CSS Medya Sorguları bölümümüzde okuyun .
İpucu: Esnek Kutu Düzeni Modülü hakkında daha fazla bilgi edinmek için CSS Flexbox bölümümüzü okuyun .
kutu boyutlandırma nedir?
Kolayca yan yana üç yüzer kutu oluşturabilirsiniz. Ancak, her bir kutunun genişliğini büyüten bir şey eklediğinizde (örneğin dolgu veya kenarlıklar), kutu kırılacaktır. Bu box-sizingözellik, dolgunun kutunun içinde kaldığından ve kırılmadığından emin olarak, dolguyu ve kenarlığı kutunun toplam genişliğine (ve yüksekliğine) dahil etmemize olanak tanır.
Kutu boyutlandırma özelliği hakkında daha fazla bilgiyi CSS Kutu Boyutlandırma Eğitimimizde okuyabilirsiniz .
altbilgi
Son olarak bir altbilgi ekleyeceğiz.
<div class="footer">
<h2>Footer</h2>
</div>
Ve stil verin:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Tebrikler! Sıfırdan duyarlı bir web sitesi oluşturdunuz.
W3Schools Alanları
Kendi web sitenizi oluşturmak ve .html dosyalarınızı barındırmak istiyorsanız , W3schools Spaces adlı ücretsiz web sitesi oluşturucumuzu deneyin :
