Frontend Coding
13 subscribers
115 photos
3 videos
11 files
47 links
Frontend | UX/UI design

Creator - @im_zafarjon
Admin - @Jakhongirbek_Alijonov
Support bot - @programmers_support_bot
Download Telegram
▪️ <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
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
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
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!

Ushbu sodda misolni ko'rib chiqing!

📚 Manba
@webdasturchilar_html_css_js
Tartiblangan ro'yxat tegi bu ....
Anonymous Quiz
29%
<li></li>
21%
<ul></li>
50%
<ol></ol>
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
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
HTML standart kodirovkasi UTF-8 hisoblanadi.
<head> tegi orasiga yoziladi. Quyida misol keltirilgan.

<head>
<meta charset="UTF-8">
</head>
HTMLda kommentariya qanday ifodalanadi.
Anonymous Quiz
76%
<!-- Bu kommentariya -->
6%
<-- Bu kommentariya -->
18%
#Bu kommrntariya
Kanalimiz statistikasi.

Yaqinda kanalimiz bundanda yuqori natijalarga erishadi hamda sizlar uchun qimmatli ma'lumotlar bilan to'ldirib boriladi.

Biz bilan bo'ling...
@webdasturchilar_html_css_js
HTML - jadvallar.

HTMLda jadval quyidagi ko'rinishda bo'ladi.

<table>
<tr>
<td> Bir </td>
<td> Ikki </td>
<td> Uch </td>
</tr>
</table>

Endi bu teglarni o'rganib chiqamiz.

<table></table> - jadval yaratmoqchi bo'lsak, mana shu teglar ichiga <tr> va <td> teglari orqali jadval jaratamiz.

<table border="2px"> - bu yerda border jadval chegarasi qalinligini bildiradi. O'zingiz qiymatini o'zgartirib ko'rsangiz, tez tushunib olasiz.

<tr></tr> - jadval qatorini ifodalaydi.

<td></td> - jadval qatorini ustunlarga bo'laklab chiqadi. Ya'ni jadval ustunini ifodalaydi.

@webdasturchilar_html_css_js
Ushbu misol bilan tanishib chiqing.
O'zingiz boshqa ko'rinishda jadval tuzishga harakat qiling.

Tayyorlagan jadvalingizni ushbu botga yuborishingiz mumkin.

🤖 @programmers_support_bot

📚 Manba
@webdasturchilar_html_css_js
<em> Har kuni kitob o'qing! </em> - ushbu teg orasida yozilgan gapimiz qanday ko'rinishda bo'ladi?
Anonymous Quiz
67%
Kursiv
33%
Ustiga chizilgan
0%
Qalinlashtirilgan