Veb-sayt yaratish (W3.CSS)
Barcha qurilmalarda — kompyuter, noutbuk, planshet va telefonda ishlaydigan tezkor va ajoyib moslashuvchan veb-sayt yaratishni o‘rganing.
CSS freymvorki yordamida veb-sayt yaratish
W3Schools Spaces haqida eshitganmisiz? Bu yerda veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz mumkin.
Bepul boshlang ❯"Maket qoralamasi"
Veb-sayt yaratishdan oldin sahifa dizaynining maket qoralamasini chizib olish doimo oqilona.
"Maket qoralamasi"ga ega bo‘lish veb-sayt yaratishni ancha osonlashtiradi:
Navigatsiya paneli
Guruh
Guruh tavsifi
Guruh tavsifi
Guruh tavsifi
Maqola
Maqola
Maqola
Pastki qism (footer)
Doctype, meta teglar va CSS
doctype sahifani HTML5 hujjati sifatida belgilashi kerak:
<!DOCTYPE html>
Meta teg belgilar to‘plamini UTF-8 deb belgilashi kerak:
<meta charset="UTF-8">
Viewport meta tegi veb-sayt barcha qurilmalar va ekran o‘lchamlarida ishlashini ta’minlashi kerak:
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS barcha stil ehtiyojlarimizni hamda qurilmalar va brauzerlar o‘rtasidagi barcha farqlarni hal qilishi kerak:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
W3.CSS bilan bezash haqida ko‘proq bilish uchun W3.CSS darsligimizga tashrif buyuring.
Birinchi bo‘sh veb-sahifamiz taxminan shunday ko‘rinadi:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<!-- Content will go here -->
</body>
</html>
Eslatma: Agar CSS freymvorki yordamisiz, noldan veb-sayt yaratmoqchi bo‘lsangiz, Veb-sayt qanday yaratiladi darsligimizni o‘qing.
Sahifa kontentini yaratish
Veb-saytimizning <body> elementi ichida "Maket rasmi"dan foydalanib quyidagilarni yaratamiz:
- Navigatsiya paneli
- Slayd-shou
- Sarlavha qismi (header)
- Bir nechta bo‘lim va maqolalar
- Pastki qism (footer)
Semantik elementlar
HTML5 bir nechta yangi semantik elementlarni joriy etdi. Semantik elementlardan foydalanish muhim, chunki ular veb-sahifalar tuzilmasini belgilaydi hamda ekran o‘quvchi dasturlar va qidiruv tizimlariga sahifani to‘g‘ri o‘qishda yordam beradi.
Quyida eng keng tarqalgan semantik HTML elementlaridan ba’zilari keltirilgan:
<section> elementi veb-saytning o‘zaro bog‘liq kontentga ega qismini belgilash uchun ishlatilishi mumkin.
<article> elementi mustaqil kontent qismini belgilash uchun ishlatilishi mumkin.
<header> elementi sarlavha qismini (hujjat, bo‘lim yoki maqolada) belgilash uchun ishlatilishi mumkin.
<footer> elementi pastki qismni (hujjat, bo‘lim yoki maqolada) belgilash uchun ishlatilishi mumkin.
<nav> elementi navigatsiya havolalari konteynerini belgilash uchun ishlatilishi mumkin.
Ushbu darslikda semantik elementlardan foydalanamiz.
Biroq ularning o‘rniga <div> elementlaridan foydalanish-foydalanmaslik o‘zingizga bog‘liq.
Navigatsiya paneli
"Maket qoralamasi"mizda "Navigatsiya paneli" bor.
<!-- Navigation -->
<nav class="w3-bar w3-black">
<a href="#home" class="w3-button w3-bar-item">Home</a>
<a href="#band" class="w3-button w3-bar-item">Band</a>
<a href="#tour" class="w3-button w3-bar-item">Tour</a>
<a href="#contact" class="w3-button w3-bar-item">Contact</a>
</nav>
Navigatsiya havolalari uchun konteyner sifatida <nav> yoki <div> elementidan foydalanishimiz mumkin.
w3-bar sinfi navigatsiya havolalari uchun konteyner vazifasini bajaradi.
w3-black sinfi navigatsiya paneli rangini belgilaydi.
w3-bar-item va w3-button sinflari panel ichidagi navigatsiya havolalarini bezaydi.
Slayd-shou
"Maket qoralamasi"da "Slayd-shou" bor.
Slayd-shou uchun rasmlar konteyneri sifatida <section> yoki <div> elementidan foydalanishimiz mumkin:
<!-- Slide Show -->
<section>
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</section>
Rasmlarni har 3 soniyada almashtirish uchun biroz JavaScript qo‘shishimiz kerak:
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
Bo‘limlar va maqolalar
"Maket qoralamasi"ga qarab, keyingi qadam maqolalar yaratish ekanini ko‘rishimiz mumkin.
Avval guruh haqidagi ma’lumotlarni o‘z ichiga olgan <section> yoki <div> elementini yaratamiz:
<section class="w3-container w3-center" style="max-width:600px">
<h2 class="w3-wide">THE BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
</section>
w3-container sinfi standart padding’ni ta’minlaydi.
w3-center sinfi kontentni markazlaydi.
w3-wide sinfi kengroq sarlavhani ta’minlaydi.
w3-opacity sinfi matnga shaffoflik beradi.
max-width stili guruh tavsifi bo‘limining maksimal kengligini belgilaydi.
So‘ng guruhni tavsiflovchi paragraf qo‘shamiz:
<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
w3-justify sinfi matnni o‘ng va chap chetlar bo‘yicha tekislaydi.
So‘ng har bir guruh a’zosi haqida <article> yoki <div> elementiga ega <section> yoki <div> yarating:
<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
<article class="w3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
</article>
</section>
Pastki qism (footer)
Nihoyat, pastki qism (footer) yaratish uchun <footer> yoki <div> elementidan foydalanamiz:
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-black w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
Powered by <a href="/w3css" target="_blank">w3.css</a>
</p>
</footer>
fa fa sinflari — Font Awesome ikonka sinflari.
Bu sinflardan foydalanish uchun Font Awesome kutubxonasini ulashingiz kerak:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
Ikonkalardan foydalanish haqida ko‘proq bilish uchun Ikonkalar darsligimizga tashrif buyuring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!