THEORETICAL ASPECTS IN THE FORMATION OF
PEDAGOGICAL SCIENCES
International scientific-online conference
12
HTML VA CSS YORDAMIDA WEB-SAHIFA ISHLAB CHIQISH
Nizomov Jahongir
O’zMU JF 4-kurs talabasi
Aliqulov Samariddin
O’zMU JF 4-kurs talabasi
Ğaniyev Otabek
O’zMU JF 4-kurs talabasi
https://doi.org/10.5281/zenodo.14292406
Annotatsiya:
Ushbu maqola HTML (HyperText Markup Language) va CSS
(Cascading Style Sheets) yordamida web-sahifa yaratish jarayonini batafsil
tushuntiradi. Maqolada ushbu tillarning asosiy tushunchalari, sintaksisi,
ularning web-dizayndagi roli va oddiy web-sahifa yaratish jarayoni ko'rib
chiqiladi. Bu, yangi boshlovchilar uchun foydali manba bo'lib, web-dasturlash va
dizayn sohasida dastlabki qadamlarni qo'yishda yordam beradi.
Kalit so'zlar:
HTML, CSS, web-sahifa, web-dizayn, markup tili, stil,
responsiv dizayn, interfeys, veb-texnologiyalar.
Web-sahifalar internetda ma'lumot taqdim etish va foydalanuvchilar bilan
aloqani o'rnatish uchun muhim vositalardir. Ushbu sahifalar HTML va CSS tillari
yordamida yaratiladi. HTML web-sahifaning tuzilishini belgilovchi markup
tilidir, CSS esa uning ko'rinishini va dizaynini boshqaradi.
HTML (HyperText Markup Language)
HTML — bu web-sahifalarni yaratishda ishlatiladigan asosiy markup tili. HTML
yordamida sahifaning tuzilishi, matn, rasmlar, havolalar va boshqa elementlar
joylashuvi belgilanadi.
HTML Strukturasi
HTML hujjati quyidagi tuzilishga ega:
<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-sahifa sarlavhasi</title>
</head>
<div>
<header>
<h1>Salom, Dunyo!</h1>
</header>
<main>
THEORETICAL ASPECTS IN THE FORMATION OF
PEDAGOGICAL SCIENCES
International scientific-online conference
13
<p>Bu HTML va CSS yordamida yaratilgan oddiy web-sahifa misoli.</p>
<a href="https://www.example.com">Qo'shimcha ma'lumot</a>
</main>
<footer>
<p>© 2024 Mening Sahifam</p>
</footer>
</div>
</html>
Natija:
HTML Elementlari
<h1> - <h6>: Sarlavhalar, <h1> eng muhim, <h6> esa eng kam muhim.
<p>: Paragraf, matn kiritish uchun ishlatiladi.
<a>: Havola, boshqa sahifalarga o'tish uchun.
<img>: Rasm, sahifadagi rasmlarni joylashtirish uchun.
CSS (Cascading Style Sheets)
CSS
— bu web-sahifalarning dizaynini va ko'rinishini boshqaruvchi stil tili. CSS
yordamida ranglar, shriftlar, joylashuvlar va boshqa ko'rinish parametrlarini
o'zgartirish mumkin.
CSS Sintaksisi
CSS qoida tuzish sintaksisi quyidagicha:
selector {
property: value;
}
CSS Misoli
HTML hujjatiga CSS qo'shishning bir necha usuli mavjud:
1.
Ichki
CSS
(inline
CSS):
HTML elementining ichida <style> tegida.
<style>
div {
THEORETICAL ASPECTS IN THE FORMATION OF
PEDAGOGICAL SCIENCES
International scientific-online conference
14
background-color: lightblue;
}
</style>
2.
Tashqi
CSS
:
Alohida .css fayl yaratish va HTML hujjatiga ulash.
<h1 style="color: blue;">Salom, Dunyo!</h1>
CSS Xususiyatlari
Rang: color, background-color.
Shriftlar: font-family, font-size.
Joylashuv: margin, padding, position.
Hajmi: width, height.
Web-sahifa Yaratish Jarayoni
Web-sahifa yaratish jarayoni quyidagicha:
Rejalashtirish:
Sahifaning maqsadini aniqlash.
Kontent va dizaynni rejalashtirish.
HTML Yozish:
Sahifaning tuzilishini HTML yordamida yozish.
Kerakli elementlarni joylashtirish.
CSS Qo'llash:
Sahifaning ko'rinishini yaxshilash uchun CSS qo'llash.
Turli dizaynlarni yaratish.
Sinov va Qo'llash:
Sahifani turli brauzerlarda va qurilmalarda sinab ko'rish.
Foydalanuvchi tajribasini yaxshilash uchun kerakli o'zgarishlarni kiritish.
Xulosa qilib shuni aytamizki
HTML va CSS yordamida web-sahifa yaratish
jarayoni oddiy va qiziqarli bo'lishi mumkin. HTML sahifaning tuzilishini
THEORETICAL ASPECTS IN THE FORMATION OF
PEDAGOGICAL SCIENCES
International scientific-online conference
15
belgilasa, CSS uning ko'rinishini boshqaradi. Ushbu tillarni o'rganish, web-
dizayn va dasturlash sohasida ilk qadamlarni qo'yish uchun muhimdir.
O'zingizning web-sahifangizni yaratish orqali, siz internetda o'z fikringizni va
kreativligingizni namoyon etishingiz mumkin.
Foydalanilgan adabiyotlar:
1.
https://www.texnoman.uz/post/cssni-htmlga-qanday-qilib-togri-ulash-
mumkin.html
2.
https://self-study.uz/html/html_editor
3.
https://divmagic.com/uz/blog/tailwind-css
