Noldan veb-sayt yaratish
Barcha qurilmalarda — kompyuter, noutbuk, planshet va telefonda ishlaydigan moslashuvchan veb-sayt yaratishni o‘rganing.
Noldan veb-sayt yaratish
"Maket qoralamasi"
Veb-sayt yaratishdan oldin sahifa dizaynining maket qoralamasini chizib olish oqilona bo‘lishi mumkin:
Navigatsiya paneli
Yon kontent
Biror matn biror matn..
Asosiy kontent
Biror matn biror matn..
Biror matn biror matn..
Biror matn biror matn..
Pastki qism (footer)
Birinchi qadam — oddiy HTML sahifa
HTML — veb-saytlar yaratish uchun standart belgilash tili, CSS esa HTML hujjatining stilini tavsiflovchi til. Oddiy veb-sahifa yaratish uchun HTML va CSS’ni birgalikda ishlatamiz.
Eslatma: Agar HTML va CSS’ni bilmasangiz, HTML darsligimizni o‘qishdan boshlashingizni tavsiya qilamiz.
Misol
<!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>
O‘zingiz sinab ko‘ring »
Misol tahlili
<!DOCTYPE html>e’loni bu hujjatni HTML5 hujjati sifatida belgilaydi<html>elementi HTML sahifaning asosiy (root) elementi<head>elementi hujjat haqidagi meta-ma’lumotlarni o‘z ichiga oladi<title>elementi hujjat sarlavhasini belgilaydi<meta>elementi belgilar to‘plamini (character set) UTF-8 deb belgilashi kerak- name="viewport" atributli
<meta>elementi veb-sayt barcha qurilmalar va ekran o‘lchamlarida yaxshi ko‘rinishini ta’minlaydi <style>elementi veb-sayt uchun stillarni (maket/dizayn) o‘z ichiga oladi<body>elementi sahifaning ko‘rinadigan kontentini o‘z ichiga oladi<h1>elementi katta sarlavhani belgilaydi<p>elementi paragrafni belgilaydi
Sahifa kontentini yaratish
Veb-saytimizning <body> elementi ichida "Maket qoralamasi"dan foydalanib quyidagilarni yaratamiz:
- Sarlavha qismi (header)
- Navigatsiya paneli
- Asosiy kontent
- Yon kontent
- Pastki qism (footer)
Sarlavha qismi (header)
Sarlavha qismi (header) odatda veb-saytning yuqori qismida (yoki yuqori navigatsiya menyusining darhol ostida) joylashadi. U ko‘pincha logotip yoki veb-sayt nomini o‘z ichiga oladi:
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
So‘ng sarlavha qismini bezash uchun CSS’dan foydalanamiz:
.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;
}
Navigatsiya paneli
Navigatsiya paneli tashrif buyuruvchilarga veb-saytingiz bo‘ylab harakatlanishda yordam beradigan havolalar ro‘yxatini o‘z ichiga oladi:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Navigatsiya panelini bezash uchun CSS’dan foydalaning:
/* 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 */
}
Kontent
"Yon kontent" va "asosiy kontent"ga bo‘lingan 2 ustunli maket yarating.
<div class="row">
<div class="side">...</div>
<div class="main">...</div>
</div>
Maketni boshqarish uchun CSS Flexbox’dan foydalanamiz:
/* 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 */
}
So‘ng maketni moslashuvchan qilish uchun media so‘rovlar qo‘shing. Bu veb-saytingiz barcha qurilmalarda (kompyuterlar, noutbuklar, planshetlar va telefonlarda) yaxshi ko‘rinishini ta’minlaydi. Natijani ko‘rish uchun brauzer oynasi o‘lchamini o‘zgartiring.
/* 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%;
}
}
Maslahat: Boshqa turdagi maket yaratish uchun shunchaki flex kengligini o‘zgartiring (lekin yig‘indisi 100% bo‘lishiga ishonch hosil qiling).
Maslahat: @media qoidasi qanday ishlashi qiziqmi? Bu haqda CSS media so‘rovlari bobida batafsil o‘qing.
Maslahat: Moslashuvchan bloklar maketi moduli (Flexbox) haqida ko‘proq bilish uchun CSS Flexbox bo‘limimizni o‘qing.
box-sizing nima?
Yonma-yon joylashgan uchta float blokni osongina yaratishingiz mumkin. Biroq har bir blok kengligini oshiradigan biror narsa (masalan, padding yoki chegaralar) qo‘shsangiz, maket buziladi. box-sizing xususiyati padding va chegarani blokning umumiy kengligiga (va balandligiga) kiritish imkonini beradi, natijada padding blok ichida qoladi va maket buzilmaydi.
box-sizing xususiyati haqida CSS Box Sizing darsligimizda batafsil o‘qishingiz mumkin.
Pastki qism (footer)
Nihoyat, pastki qism (footer) qo‘shamiz.
<div class="footer">
<h2>Footer</h2>
</div>
Va uni bezaymiz:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
}
Tabriklaymiz! Siz noldan moslashuvchan veb-sayt yaratdingiz.
W3Schools Spaces
Agar o‘z veb-saytingizni yaratib, .html fayllaringizni joylashtirmoqchi bo‘lsangiz, W3schools Spaces deb nomlangan veb-sayt konstruktorimizni sinab ko‘ring:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!