#3 – HTML. Veb-dasturlash kursi

TAG
(o’zb: Teg, рус: Тег)

Html

Veb-dasturingiz PHP tilida yoziladimi, Python-dami, yoki Java tilidami – brauzergacha faqat html tili yetib keladi. Brauzerga sizning saytingizni foydalanuvchiga ko’rsatish uchun, aynan HTML kodlari kerak bo’ladi. Shunday ekan, keling ushbu tilni ko’rib chiqamiz.

HTML tili teglardan iborat.

<

Teg yozish uchun avval kichik belgisini qo’yamiz.

<foo

Keyin tegning nomini yozamiz.

<foo>

Teg nomidan so’ng katta belgisi qo’yiladi. Teglar juda ko’p va ularning barchasi har hil vazifa uchun ishlatiladi.

tekst-1 tekst-2 <br> tekst-3

Misol uchun yozayotgan tekstimizni yangi qatordan boshlash uchu <br> tegi ishlatiladi.

tekst-1 tekst-2 tekst-3

Bir hil teglarni esa alohida yopish kerak bo’ladi.

tekst-1 <strong> tekst-2 tekst-3

Misol uchun tekst-2 so’zini qalinroq yozish uchun, ushbu so’z oldidan <strong> tegi qo’yiadi. tekst-2 so’zidan so’ng esa strong tegini yopishimiz kerak bo’ladi.

tekst-1 <strong> tekst-2 </strong> tekst-3

Buning uchun ushbu tegni yana bir bor qo’yib, teg nomi oldidan slesh belgisi qo’yiladi. Ko’rib turganingizdek ushbu tekstimiz boshqalaridan qalinroq yozilmoqda.

<strong> ... </strong>

<strong> tegi har doim yopilishi shart.

<br>

<br> esa yopilishi shart bo’lmagan teg edi. Shunga o’xshah teglarni o’zini o’zi yopishi maslahat beriladi.

<br />

Biror teg o’zini o’zi yopish uchun, uning nomidan so’ng bir dona probel qoldirib, so’ng slesh belgini qo’yamiz.

Eslab qolamiz, HTML da ikki hil teglar bor:

<foo> ... </foo>

Yopilishi shart bolgan

<bar />

va o’zini o’zi yopuvchi teglar.

<em>tekst-1</em> <strong>tekst-2</strong> tekst-3

<em> tegi tekstni qiyshiqroq qilib yozadi.

<strong>     
    <em>tekst</em> 
</strong>

Agar biror tekstni ham qiyshiqroq, ham qalinroq yozmoqchi bo’lsangiz – uni birdaniga ikki teg ichiga olishning ham iloji bor.

Esignizdan chiqmasin, birinchi ochilgan teg, ohirida yopiladi.

<strong>     
    <em>tekst</strong>
</em>

Manabu kod esa hato hisoblanadi.

Foydalanuvchidan biror ma’lumot so’rash uchun, formalardan foydalanishimiz mumkin.

<input />

Foydalanuvchidan biror kichik tekst so’rash uchun input tegidan foydalansa bo’ladi. Ushbu teg o’zini o’zi yopishi shart bo’lgan teg turiga kiradi. Ushbu tegdan to’g’ri foydalanish uchun attribut nimaligini tushunishimiz kerak bo’ladi.

ATTRIBUTE
(o’zb: Atribut, рус: Атрибут)

<foo />

Teglarni niyatimizga qarab moslashtitishimiz mumkin. Buning uchun teglarning atributlaridan foydalaniladi. Atributlar Funksiyalarning parametrlariga o’xshaydi.

<foo bar />

Atribut yozish uchun teg nomidan so’ng, kamida bitta probel qoldirib, atributning nomini yozamiz.

<foo bar="baz" />

Agar atribut biror qiymat qabul qilsa, artibut nomidan so’ng teng belgisini qo’yib, so’ng qo’shtirnoq ichida atribut qiymatini yozamiz.

<foo bar="baz" bar2="baz2" />

Atrributlar bir qancha bo’lishi mumkin.

<foo bar2="baz2" bar="baz" />

Ularning tartibi muhim emas.

Demak, foydalanuvchi kichik biror tekst kiritishi uchun, <input> tegdan foydalanamiz.

<input type="text" />

<input> tegining type nomli majburiy atributi bor. Majburiy degani, ushbu teg uchun type atributini ko’rsatishga majburmiz degani. Ya’ni, agar input tegini ishlatib uning type atributini ko’rsatmasangiz – siz hato HTML kod yozgan hisoblanasiz. type atributini text ga teng deb yozdik.

Ekranda ko’rib turgan formangiz ko’rinadi. Ushbu forma orqali odatda kichik tekst so’raladi. Masalan Ism, sharif, email va hokazo.

Ismingiz: <input type="text" />

Biz foydalanuvchidan uning ismini so’ramoqchimiz. Keling, forma yoznidan “Ismingiz” so’zini yozib qo’yamiz.

Ismingiz: <input type="text" />
Sharfingiz: <input type="text" />

Foydalanuvchidan uning sharfini ham so’raylik. E’tibor bering, barcha tekst va formalar bir qatorda paydo bo’ldi.

Ismingiz: <input type="text" /> <br />
Sharfingiz: <input type="text" />

“Sharfingiz” so’zi pastdan yozilishi uchun <br> tegidan foydalanamiz.

Ismingiz: <input type="text" /> <br />
Sharfingiz: <input type="text" /> <br />
Parol: <input type="password" /> <br />

Foydalanuvchi parol kirita olishi uchun yana bitta input yozamiz. Bu safar type atributimizning qilmati “password” ga teng bo’ladi. Ushbu turdagi formada yozilgan teks – ko’rinmaydi.

<input type="file" />

Agar input tegning type atributi “file”ga teng bo’lsa, ushbu forma foydalanuvchiga biror faylni tanlash imkonini beradi.

<input type="submit" />

Ushbu formalarda, foydalanuvchi kiritgan ma’lumotlarni serverga jo’natish uchun “submit” turiga ega bo’lgan input yaratamiz.

<input type="submit" value="Jo'natish" />

Tugmacha tekstini almashtirish uchun, value atributidan foydalanamiz. Video ostida ushbu darsning tekst variantiga ham yo’lanma qo’yaman, albatta kirib ko’ringlar. Chunki videodan kod o’rganish qiyinroq bo’lishi mumkin.

<form>
    Ismingiz: <input type="text" /> <br />
    Parol: <input type="password" /> <br />
    <input type="submit" value="Jo'natish"  />
</form>

E’tibor bering, foydalanuvchi kiritgan ma’lumotlarni serverga jo’natish uchun, ushbu tugmacha va boshqa formalar – <form> tegi orasida bo’lishi kerak. Hozir “Jo’natish” tugmachasini bossak, ism va parol formalarida kiritilgan ma’lumotlar serverga yuboriladi. Serverga yuborilganini hozir sezmaymiz, chunki uni qabul qiluvchi qismini yozmaganmiz. PHP tilini o’rganib boshlaganimizda, ushbu ma’lumotlarimizni qabul qilib, ma’lumotlar omborida saqlashni o’rganamiz.

<form>
    Ismingiz: <input type="text" /> <br />
    Parol: <input type="password" /> <br />
    <input type="submit" value="Jo'natish"  />
</form>

Bu yerda boshqa teglar...

<form>
    E-mail: <input type="text" /> <br />
    Fayl: <input type="file" /> <br />
    <input type="submit" value="Menga bos"  />
</form>

Bir sahifada bir nechta form teglari bo’lishi mumkin. Har bir tugmacha, o’zi joylashgan <form> tegi orasidagi formalarni – serverga yuboradi. Misol uchun “Jo’natish” tugmasiga bossak, serverga “Ismingiz” va “Parol” formalariga kiritilgan ma’lumotlar yuboriladi. “Menga bos” tugmachasi bosilganda esa, “E-mail” va “Fayl” formalaridagi ma’lumotlar serverga boradi.

Berilgan variantlardan faqatgina bittasini tanlashga imkon beradigan input turi “radio” deyiladi.

Jinsingizni tanlang <br />
<input type="radio" /> Erkak <br />
<input type="radio" /> Ayol <br />
<input type="radio" /> O'zga sayyoralik <br />

Buning uchun 3ta input yarataylik. Hozir agar variantlardan birini tanlamoqchi bo’lsak, radio tugmachalarimiz noto’g’ri ishlayotganini ko’ramiz. Ular faqat bitta varian tanlash imkonini berish o’rniga, barcha variantlarni baravariga tanlashga ruhsat bermoqda.

Jinsingizni tanlang <br />
<input type="radio" name="sex" /> Erkak <br />
<input type="radio" name="sex" /> Ayol <br />
<input type="radio" name="sex" /> O'zga sayyoralik <br />

Gap shundaki, ular bir guruh ekanligini bildirish uchun name atributi bo’lishi kerak. Name ingiliz tilida “nom”, “ism” degan ma’no beradi. Inputingizga istagan nom berishingiz mumkin. Lekin bir guruh radio tugmachalarning nomi ham bir bo’lishi kerak.

Uylanganmisiz? <br />
<input type="radio" name="married"  /> Ha <br />
<input type="radio" name="married"  /> Yo'q <br />

Yana bir guruh radio tugmachalar yaratamiz. E’tibor bering, ularning nomi boshqa bo’lgani uchun, yuqoridagi radio tugmachalardan alohida ishlaydi.

Eslab qoling!

Input turidan qat’iy nazar, har bir input da name attributi bo’lgani ma’qul. Sababi, submit tugmachasi bosilganda, form tegi ichidagi ma’lumotlar yuboriladi degan edik. Aslida barcha ma’lumotlar emas, faqatgina name atributiga ega bo’lgan form elementlari jo’natiladi.

<form>
    Ismingiz: <input type="text" name="ism" /> <br />
    Sharfingiz: <input type="text" /> <br />
    Fayl: <input type="file" /> <br />
    Uylanganmisiz? <br />
    <input type="radio" name="married"  /> Ha <br />
    <input type="radio" name="married"  /> Yo'q <br />
    <input type="submit" value="Jo'natish"  />
</form>

Misol uchun bu yerda, “Jo’natish” tugmachasi bosilganda faqatgina ism formasida yozilgan ma’lumot va “uylangamisiz” savoliga javob boradi.

?ism=Akmal&married=on

Tugmachani bosganimizdan so’ng brauzerning manzil qatoriga qarang. Bu yerda html faylimizdan so’ng so’roq belgisi bor. Undan so’ng esa har hil malumotlar. Dars boshidan “serverga yuborish” deyilganda, aynan manashu malumotlar nazarda tutilgan. Gap shundagi serverda ishlayotgan dastur ushbu ma’lumotlarni tushuna oladi. Ma’lumotlar bir biridan ampersand belgisi bilan ajralib turibdi. Har bir ma’lumot kalit va qiymatdan iborat. Kalit sifatida formalarning name atributi ishlatilsa, qiymat sifatida esa foydalanuvchi kiritgan ma’lumot yuboriladi. Keling tekshirib ko’rish uchun ismimni Akmal emas, Rustam deb kiritay.

?ism=Rustam&married=on

Ko’rib turganingizdek, bu safar Akmal emas, Rustam ismi serverga yuborildi. Lekin, “uylanganmisiz” degan savolga qanaqa javob bermayin, baribir “married” teng “on” degan ma’lumot yuborilmoqda.

Nega deysizmi? Serverga, foydalanuvchi kiritgan ma’lumotlar yuboriladi dedik. Ism fromasida shunaqa bo’ldi, lekin radio tugmachalarimizga ma’lumot kiritayotganimiz yo’q-ku. Ularning birini tanlayapmiz. Buni hal qilish uchun, value atributidan foydalansak bo’ladi.

Uylanganmisiz? <br />
<input type="radio" name="married"  value="ha" /> Ha <br />
<input type="radio" name="married"  value="yoq" /> Yo'q <br />

Endi qay bir variantni tanlaganimizga qarab, serverga “married=ha”, yoki “merried=yoq” ma’lumoti boradi.

Uylanganmisiz?
<input type="radio" name="married"  value="ha" /> Ha
<input type="radio" name="married"  value="yoq" checked /> Yo'q

Agar biror bir variant oldindan tanlangan bo’lib turishini istanasgiz, unga “checked” atributini joylang. Boshqa ko’rgan atributlarimizdan farqli, ushbu atributning qiymati yo’q. Shuning uchun ushbu atribut ortidan teng belgisi ham qo’yilmagan.

Qaysi sport turiga qiziqasiz? <br />
<input type="checkbox" name="box"  /> Boks <br />
<input type="checkbox" name="football" checked /> Futbol <br />
<input type="checkbox" name="voleyball"  /> Voleybol <br />

Agar bir necha variant tanlash imkoni kerak bo’lsa, checkbox formasini ishlatamiz.

?football=on

Jo’natish tugmachasini bosganimizda, serverga faqat tanlangan ma’lumotlar boradi.

<input type="reset" value="Qaytarish"  /> 

Yana bitta tugmacha yaratamiz. Reset tugmasining vazifasi: foydalanuvchi formaga o’zgarish kiritganda, uni asl holatiga qaytarish.

<input type="button" value="Tugmacha" /> 

Yana bir tugmacha turi – button. Bu oddiy tugmacha bo’lib, uni bosganimizda hech narsaa ro’y bermaydi. Lekin, JavaScript dasturlash tili orqali, ushbu tugmacha bosilgana nima sodir bo’lishi kerakli ekanligini ko’rsatishimiz mumkin. JavaScript haqidagi darsimizda buni amalda ko’ramiz.

<input type="submit" value="Jo'natish"  />
<input type="button" value="Tugmacha"  /> 
<input type="reset" value="Qaytarish"  /> 

<button>Jo'natish</button>
<button type="reset">Qaytarish</button>
<button type="button">Tugmacha</button>

Biz uch hil tugmacha ko’rdik. Ushbu tugmachalarning boshqacha, yopilishi shart bo’lgan teg variantlari ham bor.

Yana bir turdagi forma, bu ro’yhatdan biror variantni tanlash. Radio tugmalardan farqli, ushbu forma yopiq holda bo’lib, ko’p joy olmaydi. Ustiga bosganingizda ochilib, biror variantni tanlaganingizdan so’ng, yana yopiladi.

<select>
</select>

Ushbu turdagi formani yaratish uchun select tegini ochamiz. Ekranda bo’sh ro’yhat paydo bo’ladi.

<select>
    <option>1980</option>
    <option>1981</option>
    <option>1982</option>
</select>

Ro’yhatning har bir variantini option tegi orqali ko’rsatamiz.

<select name="year">
    <option>1980</option>
    <option>1981</option>
    <option>1982</option>
</select>

Ma’lumotlar serverga borishi uchun, select tegida name atributini joylaymiz.

?year=1981

Jo’natish tugmachasini bosganimizda serverga tanlangan option, year kalitiga qiymat sifatida jo’natiladi.

<select name="year">
    <option value="a">1980</option>
    <option value="b">1981</option>
    <option value="c">1982</option>
</select>

Option tegida ham value atributini ishlatsak bo’ladi.

?year=b

Shunda qiymat sifatida value atributining qiymati yuboriladi.

Agar bir necha variantni ko’rsatmoqchi bo’lsangiz,

<select name="year" size="3">
    <option value="a">1980</option>
    <option value="b">1981</option>
    <option value="c">1982</option>
</select>

size atributidan foydalansangiz bo’ladi

<select name="year" size="3" multiple>
    <option value="a">1980</option>
    <option value="b">1981</option>
    <option value="c">1982</option>
</select>

Bir necha variantni birdaniga tanlashga imkon bermoqchi bo’lsangiz, multiple (maltipl) atributidan foydalanasiz. Ushbu atributning qiymati yo’q. Agar select tegida multiple atributi bo’lsa, foydalanuchining CTRL (kontrol), yoki SHIFT tugmachalari orqali bir necha variantni tanlash imkoni boladi.

BLOCK VA INLINE

Teglarning ekranda qancha joy olishiga qarab ikki guruhga ajratsa bo’ladi.

inline

Biz ko’rgan <strong>, <em> va <input> teglari inline, ya’ni “qator ichida” hisoblanadi.

<em> Ismingiz: </em> <input type="text" /> Yana biror text

Bu degani ushbu teglarni bir qatorda yozishimiz mumkin. Ko’rib turgan tekstlarning barchasi ekranda bir qatordan joy oladi.

block

<form> tegi esa block elementi hisoblanadi. Ya’ni ushbu teg butun qatorni egallaydi.

<em> Ismingiz: </em> <form><input type="text" /></form> Yana biror text

Undan oldin yozilgan kod yuqorida, keyin yozilgan kodlar esa pastki qatordan joylashadi.

<em> Ismingiz: </em> 
<form>
    <input type="text" />
</form> 
Yana biror text

Biz ham keling, block elementlarni kodimizda yangi qatordan yozamiz. Brauzer uchun farqi yo’q, bir qatorda yozasizmi, yoki har bir tegni yangi qatorda yozasimi – tushunaveradi. Lekin yozayotgan kodimizdan chalkashib ketmaslik uchun, chiroyli yozishga harakat qilamiz.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Block elementiga yana bir misol bu <h1> dan <h6> gacha bo’lgan teglar. Ushbu teg sahifaning mavzusini yozish uchun ishlatiladi.

Bir sahifada bir qancha mavzu bo’lishi mumkin. Lekin faqat bitta asosiy mavzu bo’ladi. Uni biz h1 tegi orqali ko’rsatamiz. Undan tashqari bir necha boshqa mavzular bo’lishi mumkin. Ularni h2 dan h6 gacha teglar bilan belgilaymiz.

<h1> Asosiy mavzu </h1>

Eslab qolamiz: sahifada faqat bir marotaba <h1> tegi ishlatiladi.

<h2> Boshqa mavzu </h2>
<h2> Yana bir mavzu </h2>
<h6> Umuman boshqa mavzu </h6>

<h2> dan <h6> bo’lgan teglar istalgacha ishlatilishi mumkin.

<p>

<h#> teglari mavzu bo’lsa, sahifaning tekstini <p> teglari orasiga olamiz. Har bir abzats <p> tegi ichiga olinishi kerak.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec rutrum diam. Integer ac tincidunt nunc. Nullam vehicula congue dictum. 
</p>
<p>
Sed rutrum ac sapien vitae tempor. Aenean ligula elit, fringilla eu consequat in, posuere in orci. Donec eget nulla in sapien aliquet semper sit amet in odio. 
</p>
<p>
Aenean pellentesque nec lectus non posuere. Nam blandit rhoncus metus ut laoreet. Duis vitae nunc ut elit aliquet pellentesque. 
</p>

Eslatib o’tamiz, abzats bir, yoki bir necha gapdan iborat bo’lib, har doim yangi qatordan boshlanadi. Bir biridan ajralib turish uchun, ularning orasida bo’sh qator qoldiriladi. <p> tegida ham shunaqa.

Bazi hollarda bo’sh qator o’rniga, yangi abzatsning chap tomonidan kichik bo’sh joy qoldiriladi. Maktab davrida huddi shunday qilar edik…

<p> tegi ham block elementidir.

<ul> <li>

Html da har hil ro’yhatlar juda ko’p ishlatiladi.

<ul>

Ro’yhat yaratish uchun <ul> tegini ochamiz,

<ul>
    <li> Tekst 1 </li>
    <li> Tekst 2 </li>
    <li> Tekst 3 </li>
</ul>

Ro’yhatning har bir punktini esa – <li> tegi orqali ko’rsatamiz. Ohirida <ul> tegini yopamiz.

Ushbu ko’rinishda saytlarda kam uchrashi mumkin, chunki css orqali uning tashqi ko’rinishni shunchalik o’zgartirish mumkinki, ul va lini tanimay qolasiz. Umuman olganda, saytda bir hil, qaytariladigan elementlarni ko’rsangiz – demak buni ul va li orqali yasash mumkin. Ushbu teglar ham block elementlar turiga kiradi. CSS ni ham keyingi darslarda ko’ramiz. HTMLda sahifaning matni keltirilsa, uning bezagi CSS orqali beriladi.

<div>   ...  </div> 
        va 
<span>  ...  </span>

Yana juda ko’p ishlatiladigan ikki tegimiz bu dev va span teglari. Boshqa teglardan farqli, ushbu teglar hech bir aniq narsa bajarmaydilar. <div> – block elementi hisoblansa, <span> – inline element hisoblanadi. “Bu teglar hech narsa bajarishmasa, ularning nega keragi bor?” – deb o’ylayotgan bo’lsangiz, javobi oson: CSS orqali ushbu teglarni istaganingizdek o’zingizga moslab olishingiz mumkin

YO’L

<img />

Sahifaga rasm joylash uchun <img /> tegi ishlatiladi. Ushbu teg inline hisoblanadi va u o’zini o’zi yopishi shart.

Rasm hoylash uchun – rasmga to’g’ri yo’l ko’rsata olishimiz kerak. Agar yozayotgan html faylingiz va ko’rsatmoqchi bo’lgan rasmingiz bir papkada joylashgan bolishsa,

<img src="rasm.jpg" />

uni ko’rsatish uchun “src” atributi ichida ushbu rasmning nomini yozamiz. Bu rasmga yo’l deyiladi.

<img src="images/rasm.jpg" />

Agar html faylimizning yonida boshqa papka bo’lib, uning ichida rasm joylashgan bo’lsa, “src” atributi ichida avval papka nomini yozamiz, keyin slesh belgisini qo’yamiz, undan keyin esa faylining nomini yozishimiz mumkin. Bu yerda slesh belgisi – “papkani och” degan ma’noni beradi. Huddi biz brauzerga “images nomli papkani och, uning ichida rasm.jpg rasmi bor” deyayotgandekmiz.

<img src="../rasm.jpg" />

Agar papkadan “chiqish” kerak bo’lsa, buning uchun ikkita nuqta va slesh qo’yiladi. Bu safar brauzerga: “html faylimiz turgan papkadan chiq, rasm.jpg faylimiz bor” demoqdamiz.

Qiyinroq holatni ko’ramiz. html va images nomli papkalarimiz bor. html papkamiz ichida index.html faylimiz bor. images papkamiz ichida esa rasm.jpg faylimiz bor.

<img src="../" />

index.html faylimizdan rasmga yo’l qo’yish uchun, avval papkadan chiqish kerak bo’ladi, ya’ni ikkita nuqta va slesh qo’yamiz.

<img src="../images/" />

Keyin images papkasigi kirish kerak bo’ladi: demak “images” so’zi va “slesh” belgisini qo’yamiz.

<img src="../images/rasm.jpg" />

Ushbu papkada rasm.jpg fayli bor. Demak yo’limiz ohirida rasm.jpg so’zini yozamiz.

<img src="../images/rasm.jpg" alt="Bu oddiy rasm" />

img tegining ikki majburiy atributlari bor. Birinchisi src bo’lsa, ikkinchisi alt. Agar biror sababga ko’ra brauzer rasmingizni ocha olmasa, ushbu alt atributida yozilgan tekst, rasm o’rniga alternativ sifatida ko’rinadi. Usbu atributda bir-ikki so’z bilan rasm haqida ma’lumot berishingiz kerak.

<a> ... </a>

Oldingi dasrlarimizda yo’llanmalar haqida gapirgan edik. Bir sahifadan ikkinchisiga yo’llanma qo’yish uchun <a> tegi ishlatiladi. Ushbu teg inline bo’lib, u yopilishi shart hisoblanadi.

<a> Menga bos! </a>

Teg orasida yozilgan tekst, ekranda ko’rinib turadi. Odatda yo’llanmalar ko’k rangda bo’lib, tekst ostida chizig’i bo’ladi. Lekin buni css orqali o’zgartirishimiz mumkin.

<a href="../foo/bar.html"> Menga bos! </a>

Tegning href nomli majburiy atributi bor. Ushbu atributda boshqa html faylga yo’l qoyishimiz kerak. Ushbu atributni img atributining src atributiga oxshatish mumkin. Bu yerda biz “ushbu papkadan chiqsang, foo nomli papka bor, uning ichida esa bar.html fayli bor” demoqdamiz. Agar “Menga bos!” tekstiga bossak, bizga “bar.html” sahifasi ochiladi.

DIQQAT VAZIFA!

a nomli papka yarating. Uning ichida b, uning ichida esa c papkalarini yarating. Har birining ichida esa – html fayllarini yarating. Demak bizda 3 ta html fayl bor. Har bir html faylda, 2 ta boshqa faqyllarga yo’llanmalar qo’ying.

HTML TARKIBI

Har bir html fayl yaratganimizda, istagan html kodimizni yozib keta olmaymiz.

<!doctype html>

Birinchi qatorimizda <!doctype html> so’zini yozishimiz kerak. Bu teg emas, bu faylimiz turini brauzerga ko’rsatmoqdamiz.

<!doctype html>
<html>

</html>

Keyin html tegini yartamiz. Ushbu teg fayl o’zagidagi yagona teg hisoblanadi. Undan oldin, yoki keyin ham hech qanaqa teg bo’lishi mumkin emas.

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>

Uning ichida esa atigi ikki teg bo’lishi mumkin. head va body.

<!doctype html>
<html>
    <head>
        <title> Hello, world! </title>
    </head>
    <body></body>
</html>

Head tegining ichida sahifamiz haqida, brauzerga har hil ma’lumotlar qolidirishimiz mumkin. Misol uchun brauzer <title> tegi orasida yozilgan tekstni oyna nomi sifatida ko’rsatadi.

<!doctype html>
<html>
    <head>
        <title> Hello, world! </title>
    </head>
    <body>
        <ul>
            <li> Tekst 1 </li>
            <li> Tekst 2 </li>
            <li> Tekst 3 </li>
        </ul>
    </body>
</html>

Va eng asosiy teg bu “body”. Sahifada ko’rinib turadigan barcha ma’lumotlar aynan shu teg orasida yoziladi. Bugun biz ko’rgan barcha teglar ham ushbu teg orasizda yoziladi.

myblog.uz/author/kadirov

Ushbu kodlarni video orqali o’rganish ancha qiyin, shuning uchun video ostida darsning matnli versiyasiga yo’llanma qo’yaman, albatta kirib o’rganing.

http://htmlbook.ru

Umuman teglar juda ham ko’p. Biz ko’rganlarimiz eng kerakli va ko’p uchrayigan teglar edi. HtmlBook.ru nomli juda ham yaxshi sayt bor. Biror teg kerak bo’lsa ushbu saytga kirib, u haqda ma’lumotlar olishingiz mumkin. Lekin, bir narsani eslab qoling, barcha teglarni yodlash kerak emas. Tushunchaga ega bo’lish – yetarli.

XULOSA

<bar> </bar>
<foo />

Htmlda yopilishi jihatdan ikki turdagi teglar bor: yopilishi shart va o’zini o’zi yopuvchi teglar

<h1> </h1>
<strong> </strong>

Qancha joy olishiga qarab teglarni – block, ya’ni qatorni to’laligicha oluvchi va inline, ya’ni qator ichidagi teglarga bo’lishimiz mumkin