Assalomu aleykum kanalimiz a'zolari! π
Kanalimiz ko'p muddat aktiv bo'lmadi. Bu noqulayliklar uchun uzr so'raymiz!
Hozirni o'zidan CSS darslarimizni boshlaymiz! β
@webdasturchilar_html_css_js
Kanalimiz ko'p muddat aktiv bo'lmadi. Bu noqulayliklar uchun uzr so'raymiz!
Hozirni o'zidan CSS darslarimizni boshlaymiz! β
@webdasturchilar_html_css_js
Forwarded from Frontend Coding (γ
€γ
€γ
€γ
€)
βοΈ Mana bu quyidagi kodlar HTML 5 hozirdagi amalda bo'lgan versiya kodi.!!!
β¬οΈ β¬οΈ β¬οΈ β¬οΈ
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</body>
</html>
π Bizning kanal π
https://t.me/joinchat/AAAAAFP4IeGD0n-lltP7HQ
β¬οΈ β¬οΈ β¬οΈ β¬οΈ
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</body>
</html>
π Bizning kanal π
https://t.me/joinchat/AAAAAFP4IeGD0n-lltP7HQ
CSS ( Style Cascading Sheets ) - web sahifaga ajoyib dizayn yaratish uchun ishlatiladi! π¨
CSS ni sahifaga ulash uchun ikkita oddiy yo'l mavjud. π―
1β£ - Web sahifamizdagi
<head>
<style> ......... </style>
</head>
Teglari orasiga CSS kodlarini yozamiz. π»
2β£ - CSSda yozgan kodlarimizni (.css) ko'rinishida saqlab yo'llanma va import usuli orqali ham ulash mumkin! π
Bu quyidagicha! π½
πΉ <head>
<link rel="stylesheet" href="css/misol.css>
</head>
πΈYoki bunday!
<head>
@import url("misol.css");
</head>
Manba π
@webdasturchilar_html_css_js
CSS ni sahifaga ulash uchun ikkita oddiy yo'l mavjud. π―
1β£ - Web sahifamizdagi
<head>
<style> ......... </style>
</head>
Teglari orasiga CSS kodlarini yozamiz. π»
2β£ - CSSda yozgan kodlarimizni (.css) ko'rinishida saqlab yo'llanma va import usuli orqali ham ulash mumkin! π
Bu quyidagicha! π½
πΉ <head>
<link rel="stylesheet" href="css/misol.css>
</head>
πΈYoki bunday!
<head>
@import url("misol.css");
</head>
Manba π
@webdasturchilar_html_css_js
HTMLda sarlavhalar.
1) <h1> Bu sarlavha </h1>
2) <h2> Bu sarlavha </h2>
3) <h3> Bu sarlavha </h3>
4) <h4> Bu sarlavha </h4>
5) <h5> Bu sarlavha </h5>
6) <h6> Bu sarlavha </h6>
KANALIMIZ BUGUNDAN ISHGA TUSHDI!
@webdasturchilar_html_css_js
1) <h1> Bu sarlavha </h1>
2) <h2> Bu sarlavha </h2>
3) <h3> Bu sarlavha </h3>
4) <h4> Bu sarlavha </h4>
5) <h5> Bu sarlavha </h5>
6) <h6> Bu sarlavha </h6>
KANALIMIZ BUGUNDAN ISHGA TUSHDI!
@webdasturchilar_html_css_js
HTML ma'nosi nima?
Anonymous Quiz
90%
HyperText Markup Language
0%
HyperLink Markup Language
10%
HyperText Mark Language
HTML standart kodirovkasi UTF-8.
"head" - tegi orasiga yoziladi.
<head>
<meta charset="UTF-8">
</head>
"head" - tegi orasiga yoziladi.
<head>
<meta charset="UTF-8">
</head>
HTML da "Paragraf" - <p> </p> teglari yordamida yaratiladi.
<html>
<head>
<title> bu sarlavha</title>
</head>
<body>
<p>Birinchi paragraf</p>
<p>Ikkinchi paragraf</p>
</body>
</html>
=================================
<br /> - tegidan keyin yozilgan har qanday kod yoki ma'lumot yangi qatordan boshlanadi.
<html>
<head>
<title> bu sarlavha</title>
</head>
<body>
<p>Birinchi paragraf</p>
<p>Ikkinchi paragraf</p>
Hammaga salom! <br /> Bu mening birinchi sahifam.
</body>
</html>
@webdasturchilar_html_css_js
<html>
<head>
<title> bu sarlavha</title>
</head>
<body>
<p>Birinchi paragraf</p>
<p>Ikkinchi paragraf</p>
</body>
</html>
=================================
<br /> - tegidan keyin yozilgan har qanday kod yoki ma'lumot yangi qatordan boshlanadi.
<html>
<head>
<title> bu sarlavha</title>
</head>
<body>
<p>Birinchi paragraf</p>
<p>Ikkinchi paragraf</p>
Hammaga salom! <br /> Bu mening birinchi sahifam.
</body>
</html>
@webdasturchilar_html_css_js
Frontend Coding pinned Β«HTML da "Paragraf" - <p> </p> teglari yordamida yaratiladi. <html> <head> <title> bu sarlavha</title> </head> <body> <p>Birinchi paragraf</p> <p>Ikkinchi paragraf</p> </body> </html> ================================= <br /> - tegidan keyin yozilganβ¦Β»
βͺοΈ <u> Misol </u> - ushbu teg orasiga kiritilgan so'z, gap, ma'lumotlar tagiga chizilgan holatda bo'ladi.
βͺοΈ <del> Misol </del> - ushbu teg orasiga kiritilgan so'z, gap, ma'lumot ustiga chizilgan holatda bo'ladi.
βͺοΈ <i> Misol </i>, <em> Misol </em> - ushbu teglar orasiga kiritilgan ma'lumot kursiv holatda bo'ladi.
βͺοΈ <strong> Misol </strong>,
<b> Misol <b> - ushbu teglar orasiga kiritilgan ma'lumot qalin holatda bo'ladi.
@webdasturchilar_html_css_js
βͺοΈ <del> Misol </del> - ushbu teg orasiga kiritilgan so'z, gap, ma'lumot ustiga chizilgan holatda bo'ladi.
βͺοΈ <i> Misol </i>, <em> Misol </em> - ushbu teglar orasiga kiritilgan ma'lumot kursiv holatda bo'ladi.
βͺοΈ <strong> Misol </strong>,
<b> Misol <b> - ushbu teglar orasiga kiritilgan ma'lumot qalin holatda bo'ladi.
@webdasturchilar_html_css_js
HTML sahifaga CSS ni ulash quyidagicha.
1β£ <head>
@import url("misol.css")
</head>
2β£ <link rel="stylesheet" href="misol.css">
=================================
CSSni mana bunday ko'rinishda ham sahifaga ulashimiz mumkin.
<head>
<style>
p {
color: black;
}
</style>
</head>
Bu ichki css kodi hisoblanadi. Ya'ni css kodimiz <head> tegi orasidagi <style> tegi ichida yoziladi.
@webdasturchilar_html_css_js
1β£ <head>
@import url("misol.css")
</head>
2β£ <link rel="stylesheet" href="misol.css">
=================================
CSSni mana bunday ko'rinishda ham sahifaga ulashimiz mumkin.
<head>
<style>
p {
color: black;
}
</style>
</head>
Bu ichki css kodi hisoblanadi. Ya'ni css kodimiz <head> tegi orasidagi <style> tegi ichida yoziladi.
@webdasturchilar_html_css_js
Kommentariyalar.
HTMLda kommentariya quyidagicha.
<!-- Bu izoh -->
<html>
<head> <title>Kommentariyalar</title>
</head>
<body>
<p> <!-- bu birinchi paragraf -->
Bu paragraf
</p>
</body>
</html>
CSS kommentariya.
<style>
/*bu paragraf ko'k rangda aks etadi*/
p {
color: blue;
}
</style>
Kommentariyalar sahifa oynasida aks etmaydi. Kommentariya ma'lum bir kodlarimizni izohlash uchun ishlatiladi.
@webdasturchilar_html_css_js
HTMLda kommentariya quyidagicha.
<!-- Bu izoh -->
<html>
<head> <title>Kommentariyalar</title>
</head>
<body>
<p> <!-- bu birinchi paragraf -->
Bu paragraf
</p>
</body>
</html>
CSS kommentariya.
<style>
/*bu paragraf ko'k rangda aks etadi*/
p {
color: blue;
}
</style>
Kommentariyalar sahifa oynasida aks etmaydi. Kommentariya ma'lum bir kodlarimizni izohlash uchun ishlatiladi.
@webdasturchilar_html_css_js
Kursiv holatda yozish uchun ..... teglaridan foydalanamiz.
Anonymous Quiz
43%
<em></em>, <i></i>
10%
<i></i>, <b></b>
23%
<body></body>, <style></style>
23%
To'g'ri javob yo'q
HTMLda ro'yxatlar.
HTMLda ro'yxatlar ikki xil bo'ladi.
1β£- tartiblangan ro'yxatlar <ol></ol> teglari orasiga <li></li> teglari yordamida yaratiladi.
--- MISOL ---
<ol>
<li>Olma</li>
<li>Anor</li>
<li>Nok</li>
</ol>
2β£- tartiblanmagan ro'yxatlar
<ul> </ul> teglari orasiga <li></li> tegi yordamida yaratiladi.
--- MISOL ---
<ul>
<li>Olma</li>
<li>Anor</li>
<li>Nok</li>
</ul>
π Manba
@webdasturchilar_html_css_js
HTMLda ro'yxatlar ikki xil bo'ladi.
1β£- tartiblangan ro'yxatlar <ol></ol> teglari orasiga <li></li> teglari yordamida yaratiladi.
--- MISOL ---
<ol>
<li>Olma</li>
<li>Anor</li>
<li>Nok</li>
</ol>
2β£- tartiblanmagan ro'yxatlar
<ul> </ul> teglari orasiga <li></li> tegi yordamida yaratiladi.
--- MISOL ---
<ul>
<li>Olma</li>
<li>Anor</li>
<li>Nok</li>
</ul>
π Manba
@webdasturchilar_html_css_js
HTMLda ro'yxatlar. <2-qism>
π Tartiblangan ro'yxat uchun atributlar.
<ol type="a">
<li> Noutbuk </li>
<li> Smartfon </li>
<li> Planshet </li>
</ol>
Bu yerda <ol> tegiga tartiblash turi uchun type="a" dan foydalandik. Buning natijasida ro'yxat kichik "a" harfidan boshlab ingliz alifbosi tartibida ro'yxatni belgilab boradi.
Bundan tashqari "type" ga "A" yoki "1" qiymatlarini ham berish mumkin.
π Tartiblanmagan ro'yxat uchun atributlar.
<ul type="circle">
<li> Noutbuk </li>
<li> Smartfon </li>
<li> Planshet </li>
</ul>
Tartiblanmagan ro'yxatda "type"
- disc
- circle
- square qiymatlarini qabul qiladi.
Yuqoridagilarni o'zingiz ham yozib ko'rishingizni maslahat beraman. Kelgusida CSS haqida ham darslar qilishga harakat qilamiz. Buning uchun HTML haqida tushincha bo'lishi kerak.
π Manba
@webdasturchilar_html_css_js
π Tartiblangan ro'yxat uchun atributlar.
<ol type="a">
<li> Noutbuk </li>
<li> Smartfon </li>
<li> Planshet </li>
</ol>
Bu yerda <ol> tegiga tartiblash turi uchun type="a" dan foydalandik. Buning natijasida ro'yxat kichik "a" harfidan boshlab ingliz alifbosi tartibida ro'yxatni belgilab boradi.
Bundan tashqari "type" ga "A" yoki "1" qiymatlarini ham berish mumkin.
π Tartiblanmagan ro'yxat uchun atributlar.
<ul type="circle">
<li> Noutbuk </li>
<li> Smartfon </li>
<li> Planshet </li>
</ul>
Tartiblanmagan ro'yxatda "type"
- disc
- circle
- square qiymatlarini qabul qiladi.
Yuqoridagilarni o'zingiz ham yozib ko'rishingizni maslahat beraman. Kelgusida CSS haqida ham darslar qilishga harakat qilamiz. Buning uchun HTML haqida tushincha bo'lishi kerak.
π Manba
@webdasturchilar_html_css_js
HTML kodlarimizni smartfonimiz orqali ham yozishimiz mumkin. Buning uchun anWriter dasturi kerak bo'ladi. Play Market orqali yuklab olishingiz mumkin. Tavsiya qilaman.
π² YUKLAB OLISH
@webdasturchilar_html_css_js
π² YUKLAB OLISH
@webdasturchilar_html_css_js
Qaysi biri to'gri yozilgan?
Anonymous Quiz
24%
<p> Web dasturlash </p>
6%
<h2> Bu sarlavha </h2>
6%
<u> Bu gapimiz tagiga chizilgan holatda. </u>
65%
Barcha javob to'g'ri.