Veb-kitob (WebBook) yaratish
Barcha qurilmalarda — kompyuter, noutbuk, planshet va telefonda ishlaydigan HTML kitob yaratishni o‘rganing.
Avval oddiy HTML sahifa yarating
HTML — veb-saytlar yaratish uchun standart belgilash tili, CSS esa HTML hujjatining uslubini tavsiflovchi til.
Oddiy HTML kitob yaratish uchun HTML va CSS’ni birgalikda qo‘llaymiz.
Avval HTML skeletidan boshlang:
Misol
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol tahlili
<!DOCTYPE html>Hujjat turi — HTML<html> </html>Hujjatning boshi va oxiri<head> </head>Hujjat haqidagi ma’lumotning boshi va oxiri<title>Kitob nomi ("My Book")<meta charset="UTF-8">Ishlatiladigan belgilar to‘plami (UTF-8)<body> </body>Ko‘rinadigan kontentning boshi va oxiri<h1> </h1>Sarlavhaning boshi va oxiri<p> </p>Paragrafning boshi va oxiri
Yuqorida tushuntirilgan kodlar HTML teglaridir.
HTML teglari HTML hujjatining kontentini belgilash uchun ishlatiladi.
Teglar < (kichik belgisi) bilan boshlanadi va > (katta belgisi) bilan tugaydi.
Shu tarzda <p> va </p> paragrafning boshi va oxirini belgilash uchun ishlatiladi.
Eslatma: Agar HTML’ni batafsil o‘rganmoqchi bo‘lsangiz, HTML darsligimizni o‘qing.
To‘liq to‘g‘ri bo‘lishi uchun kitobda ishlatilgan tilni belgilash maqsadida <html> tegiga til atributi qo‘shilishi kerak:
<html lang="en">
Quyidagi meta ma’lumotni qo‘shish kitobingizning barcha qurilmalarda — kompyuter, noutbuk, planshet va telefonda to‘g‘ri ko‘rsatilishini ta’minlaydi:
<meta name="viewport" content="width=device-width, initial-scale=1">
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Mundarija yarating
<body> </body> elementlari ichiga mundarija qo‘shing:
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
O‘zingiz sinab ko‘ring »
Biroz uslub qo‘shing
Kitobingizga uslublar jadvalini (stylesheet) qo‘shing:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
O‘zingiz sinab ko‘ring »
Eslatma: Agar CSS’ni batafsil o‘rganmoqchi bo‘lsangiz, CSS darsligimizni o‘qing.
1-bob uchun HTML sahifa yarating
Fayl: philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. Metaphysics</h1>
<h3>The nature of reality.</h3>
<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>
<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>
<p>Is this Virtual Reality real?</p>
<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>
</body>
O‘zingiz sinab ko‘ring »
1-bobga havola qo‘shing
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda kitobning birinchi bobini shunday nomladik:
"philosophy_chapter1.htm".
Qanday nom berish o‘zingizga bog‘liq. Balki uni "Metafizika" deb atash kerakdir.
Qanday bo‘lmasin, yuqoridagidek davom eting va boshqa boblarni yarating:
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
Har bir bobga havola qo‘shing
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>
</body>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!