Kirish A`zo bo`lish
ILM-FAN | Online darslar (Pullik) |
Mavzu: 0 dan boshlab bepul HTML darslari
Mavzu fayllari (0)
1. Brigand (M) (481) [off] | TXT | 53| 18 Apr 2019, 12:18
HTML Kirish

HTML O'zi Nima ?
HTML veb dokumentlar (web sahifalar) ni ta'svirlovchi formatlash dasturlash tili.
*.HTML (Hyper Text Markup Language) Giper Matn Formatlash Tili ning qisqartmasidan kelib chiqqan.
*.Formatlash tili bu formatlash teglari majmuidir.
*.HTML dokumentlari HTML teglari bilan tasvirlanadi.
*.Har bir HTML tegi turli turlardagi dokumentlarni tasvirlaydi.

<!DOCTYPE html><html><head><title>Sahifa sarlavhasi</title></head><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim</p></body></html>
Izohlar:
*. DOCTYPE ni kiritish orqali biz dokumentda HTML turini tanlaganimizni bildiradi
*. HTML dokumenti <html> va <html> ichida yoziladi.
*. Dokument haqidagi ma'lumot <head> va </head> ichida yoziladi.
*. Dokument sarlavhasi <title> va </title> ichida yoziladi.
*. Sahifaning ko'rinadigan qismi <body> va </body> ichida yoziladi.
*. <h1> va </h1> ichida sarlavha.
*. <p> va </p> ichida paragraf yoziladi.
Bu tasvirlardan foydalanib web brauzer dokumentni sarlavha va paragraf bilan ekranga chiqarib bera oladi
HTML Teglari
HTML teglari kalit so'zlar (teg nomlari) bo'lib burchak qavslar ichida yoziladi <>
<teg nomi> content </teg nomi>
*. HTML teglari asosan <p> va </p> kabi juftliklarda keladi.
*. Juftlikning birinchi tegi bosh teg, ikkinchi tegi yakun teg.
*. Yakun teg bosh tegdan teg nomidan oldin keluvchi slesh '/' ga farq qiladi.
... Bosh teg ko'pincha ochish tegi, yakun tegi yopish tegi deb ataladi.
Web Brauzerlar
Web brauzerlarning (Chrome, IE, Firefox, Safari) asosiy vazifasi HTML dokumentlarni o'qish va ularni ekranga chiqarish.
Web brauzerlar teglarni ekranga chiqarmaydi, lekin ular dokument qanday ko'rinishda ekranga chiqarilishini aniqlash uchun ishlatiladi.
HTML Sahifasi Strukturasi
Quyida HTML sahifasi strukturasi keltirilgan:
<html>
<head>
<title>Sahifa sarlavhasi</title></head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu birinchi paragraf.</p>
<p>Bu ikkinchi paragraf.</p></body></html>
... Brauzer faqat <body> qismini ekranga chiqaradi
<!DOCTYPE> bayonnomasi
<!DOCTYPE> brauzerga veb sahifani ekranga to'g'ri chiqarishga yordam beradi
Veb dokumentlarning har xil turlari bor
Dokumentni ekranga to'g'ri chiqarish uchun brauzer dokumentning turi va versiyasini bilishi shart.
doctype kichik yoki katta harflarda yozilishi mumkin, quyidagilarning barchasi to'g'ri:
<!DOCTYPE html><!DOCTYPE HTML><!doctype html><!Doctype Html>
Umumiy Bayonnomalar
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org /TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org /TR/xhtml1/DTD/xhtml1- transitional.dtd" Note All tutorials and examples at W3Schools use HTML5.>

HTML Versiyalari
Veb birinchi kunlaridan boshlab HTML ning ko'plab versiyalari bo'lgan.
Versiyasi-Yili
HTML-1991
HTML 2.0-1995
HTML 3.2-1997
HTML 4.01-1999
XHTML-2000
HTML5-2014
2130dan so'ng qo'shdi...
HTML Muharrirlari

HTML ni Notepad yoki TextEdit da yozing
HTML ni quyidagi professional muharrirlar orqali taxrirlash mumkin:
*.Microsoft WebMatrix
*.Sublime Text
KeepGoing.uz sayti HTML ni o'rganish uchun Sublime Text, Notepad (PC) va TextEdit (Mac) ni ishlatishni maslahat beradi
Biz oddiy matn muharrirlaridan foydalanish HTML o'rganishning yaxshi yo'li ekaniga ishonamiz
Notepad da birinchi web sahifangizni yaratish uchun quyidagi 4 ta bosqichga rioya qiling
1-bosqich: Notepad ni oching.
Windows 7 yoki eskiroq versiyasida ochish uchun:
Пуск ni bosing (ekraningizdagi chap paski tugma). Barcha pragrammalar -> aksesuarlar-> Notepad ni bosing
Windows 8 yoki yangiroq versiyasida ochish uchun:
Пуск menyunisini oching -> Notepad tering
2-bosqich: HTML kodini yozing.
Notepad da o'zingiz HTML kodini yozing yoki ko'chirib oling
<!DOCTYPE html><html><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim</p></body></html>
3-bosqich: HTML sahifasini saqlang
Faylni o'z kompyuteringizda saqlang.
Notepad da file dan сохранить как.. ni bosing.
Fayl nomini "vebsahifa.html" yoki .html kengaytmasi bilan tugovchi boshqa nom bilan nomlang
UTF-8 kodlash HTML dokumentlar uchun afzalroq hisoblanadi
ANSI kodlash tizimi faqat AQSH va G'arbiy Yevropa belgilarini o'z ichiga oladi.
Agarda rus alifbosi yoki Osiyo mamlakatlari alifbosidan foydalanmoqchi bo'lsangiz UTF-16 kodlash tizimini maslahat beramiz
...Dokumentlarni saqlash uchun .html yoki .htm kengaytmalarini ishlatish mumkin. Ularning farqi yo'q, qaysi birini ishlatish o'zingizga bog'liq
4-bosqich: HTML sahifani web brauzeringizda ochib ko'ring.
Saqlangan HTML sahifani o'zingizga yoqgan brauzerda oching. Natija quyidagiga o'xshashroq bo'ladi:
...Faylni ochish uchun faylga 2 martta bosing yoki sichqonchaning o'ng tarafini bosib "open with"ni bosing.
4248dan so'ng qo'shdi...
HTML Asoslari

Ushbu na'munalarda sizga notanish teglar uchrab qolsa, havotirlanmang.
Ularni keyingi sahifalarimizda o'rganib olasiz.
HTML dokumentlar
Barcha HTML dokumentlar<!DOCTYPE html>tegini kiritish bilan boshlanishi shart.
HTML dokumentining o'zi<html>bilan boshlanadii va</html>bilan tugaydi.
HTML dokumentninig ko'rinadigan qismi<body>va</body>orasida yoziladi
<html><body><h1>Mening birinchi sarlavham.</h1><p>Mening birinchi paragrafim.</p></body></html>
HTML Sarlavhalar
HTML sarlavhalar <h1> dan <h6> gacha bo'lgan teglar bilan bayon qilinadi.
<h1>Bu birinchi sarlavha.</h1><h2>Bu ikkinchi sarlavha.</h2><h3>Bu uchinchi sarlavha.</h3>
HTML paragraflar
HTML paragraflar <p> bilan ba'yon qilinadi
<p>Bu birinchi paragraf.</p><p>Bu ikkinchi paragraf.</p>
HTML Linklar (Havolalar)
HTML havolalar <a> tegi bilan bayon qilinadi
<ahref=" http://www.keepgoing.uz">Bu link </a>
Havolalarning manzili href atributi orqali beriladi.
Atributlar HTML elementlari haqida qo'shimcha ma'lumot berish uchun ishlatiladi.
HTML rasmlar
HTML rasmlar <img> tegi bilan ba'yon qilinadi
source(manba) fayl (src), alternativ tekst (alt), va o'lchamlar (widthvaheight) atributlar k'rinishida beriladi.
<img src="uzmasters.png"alt="UzMasterS.RU"width="200"height="50">
... Atributlar haqida ko'proq ma'lumotlarni keyingi maqolalarda o'rganib olasiz
19 soatdan so'ng qo'shdi...
HTML Elementlari

HTML dokumentlari HTML elementlaridan yasaladi.
HTML elementlari
HTML elementlariboshteg,yakunteg va ular orasidagi kontent bilan yoziladi
<tegnomi>kontent</tegnomi>
HTML elementiga bosh tegdan boshlab yakun tegigacha bo'lgan barcha narsa kiradi.
<p>Mening birinchi HTML paragrafim.</p>
Bosh tegKontentYakun teg
<h1>Mening birinchi sarlavham.</h1>
<p>Mening birinchi paragrafim.</p>
<br>
... Ba'zi HTML elementlari faqat bosh tegdan iborat
Ichki HTML elementlari
HTML elementlari ichki (element ichida element) bo'lishi mumkin
Barcha HTML dokumentlar ichki elementlardan tashkil topgan
Bu misol 4 ta HTML elementidan tashkil topgan:
<!DOCTYPE html><html><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body></html>
HTML tegining tushuntirilishi
<html> elementi butun dokumentni ba'yon qiladi.
U bosh teg <html> va yakun teg </html> ga ega.
Uning kontenti esa boshqa HTML elementi ( <body> elementi)
<html><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body></html>
<body> elementi dokumentning tana qismini ba'yon qiladi
U bosh teg <body> va yakun teg </body> ga ega.
<body> elementining kontenti esa boshqa ikkita elementdan iborat (<h1> and <p>).
<body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body>
<h1> elementi sarlavhani ba'yon qiladi
U bosh teg <h1> va yakun teg </h1> ga ega.
Elementning kontenti : Mening birinchi sarlavham
<h1>Mening birinchi sarlavham</h1>
<p> elementi paragrafni ba'yon qiladi.
U bosh teg <p> va yakun teg </p> ga ega.
Elementning kontenti: Mening birinchi paragrafim.
<p>Mening birinchi paragrafim.</p>
Yakun tegini esdan chiqarmang
Agar siz bundanda yaxshiroq va qattiyroq tekshiruvni hohlasangiz va sahifangiz XML orqali osonroq parse bolishini hohlasangiz doimiy ravishda teglarni yopishni unitmang. Bu albatta kelajakdagi muammolar oldini oladi. HTML elementlari yakun tegini esdan chiqarsangiz ham to'g'ri ishlaydi.
<html><body><p>Mening paragrafim
<p>Mening a paragrafim
</body></html>
Yuqoridagi misol barcha brauzerlarda ishlaydi, chunki yakun tegi ixtiyoriy hisoblanadi.
Hech qachon bunga tayanmang. Chunki yakun tegini esdan chiqarsangiz kutilmagan natijalar va hatolarga olib kelishi mumkin.
Bo'sh HTML elementlari
Kontentsiz HTML elementlari bo'sh elementla
Ijobiy (6): Ashurov, Mahmudjon_BEST, Gallaktika, QIROLUS, SHAHZODBEKK, real_fans,
Raxmat aytdi (2): Mahmudjon_BEST, Dima Muratov,
2. Mahmudjon_BEST (255) [off] | TXT | 43| 18 Apr 2019, 13:37
Lark.ru da bir savol bor edi: saytingizni sahifalari o'g'irlanmasligi uchun emailga bloklab qo'yadiku o'shani qanday qiladi?
3. Ashurov(2591) [off] | TXT | 41| 18 Apr 2019, 13:54
Mahmudjon_BEST (18 Apr 2019, 13:37):
Lark.ru da bir savol bor edi: saytingizni sahifalari o'g'irlanmasligi uchun emailga bloklab qo'yadiku o'shani qanday qiladi?
Mahmudjon_BEST, Baribir o'g'irlanadi, htmlda hech narsa qila olmaysiz, bazi bir css kodlarni, yoki manzil kodlarni yashirish mumkun, lekin oddiy php master ham o'g'irlay oladi....
Ijobiy (1): Brigand,
4. Dima Muratov (712) [off] | TXT | 41| 18 Apr 2019, 14:30
Brigand (18 Apr 2019, 12:18):
HTML Kirish

HTML O'zi Nima ?
HTML veb dokumentlar (web sahifalar) ni ta'svirlovchi formatlash dasturlash tili.
*.HTML (Hyper Tex• • •
Brigand, Shu yozganlarizni amalda sinab yozib kurishim u/n Android telda denwer yoki shunga uxshash biror narsa bormi.
5. Junior1993 (2) [off] | TXT | 41| 18 Apr 2019, 14:42
Dima Muratov, Urgatuvchi saytla bo uwatda biratula sinab kurish mumkun
6. Mahmudjon_BEST (255) [off] | TXT | 40| 18 Apr 2019, 15:09
Ashurov (18 Apr 2019, 13:54):
Mahmudjon_BEST, Baribir o'g'irlanadi, htmlda hech narsa qila olmaysiz, bazi bir css kodlarni, yoki manzil kodlarni yashirish mumkun,• • •
Ashurov, Ha bilaman baribir o'g'irlanadi.

Lekn man so'ravotgan narsa: masalan zormedia.lark.ru ni bironta sahifasini linkini olib, lark.ru dagi saytizi bazasiga kirib, yuklashga kirib, linkni kiritib yuklashga bossez emailga bloklangan deydi. Shuni qanday qiladi? [+] mendan :)
7. Gallaktika (67) [off] | TXT | 40| 18 Apr 2019, 15:30
Стоп!Мавзу бузилмасин!Ш/Хга!
Ijobiy (1): Brigand,
8. Brigand (M) (481) [off] | TXT | 40| 18 Apr 2019, 15:51
Dima Muratov (18 Apr 2019, 14:30):
Brigand, Shu yozganlarizni amalda sinab yozib kurishim u/n Android telda denwer yoki shunga uxshash biror narsa bormi.
Dima Muratov, Albatta bor! Qulayrog'i AndroPHP.apk: Forum: AndroPHP.Apk - Androidlar uchun danwer!
Yoki bu sahifada ham tekshirib körishingiz mumkin.
4297dan so'ng qo'shdi...
Mahmudjon_BEST, </body> dan oldin
<div class="footer">UzMasterS.Ru-MasteR_ForuM@mail.ru</div>
ni qöshib qöying böldi. Larkga import bölmaydigan böladi. Lekin boshqa konstruktor va hostinglarda import böladi.
42 sekunddan so'ng qo'shdi...
HTML Elementlari

HTML dokumentlari HTML elementlaridan yasaladi.
HTML elementlari
HTML elementlariboshteg,yakunteg va ular orasidagi kontent bilan yoziladi
<tegnomi>kontent</tegnomi>
HTML elementiga bosh tegdan boshlab yakun tegigacha bo'lgan barcha narsa kiradi.
<p>Mening birinchi HTML paragrafim.</p>
Bosh tegKontentYakun teg
<h1>Mening birinchi sarlavham.</h1>
<p>Mening birinchi paragrafim.</p>
<br>
... Ba'zi HTML elementlari faqat bosh tegdan iborat
Ichki HTML elementlari
HTML elementlari ichki (element ichida element) bo'lishi mumkin
Barcha HTML dokumentlar ichki elementlardan tashkil topgan
Bu misol 4 ta HTML elementidan tashkil topgan:
<!DOCTYPE html><html><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body></html>
HTML tegining tushuntirilishi
<html> elementi butun dokumentni ba'yon qiladi.
U bosh teg <html> va yakun teg </html> ga ega.
Uning kontenti esa boshqa HTML elementi ( <body> elementi)
<html><body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body></html>
<body> elementi dokumentning tana qismini ba'yon qiladi
U bosh teg <body> va yakun teg </body> ga ega.
<body> elementining kontenti esa boshqa ikkita elementdan iborat (<h1> and <p>).
<body><h1>Mening birinchi sarlavham</h1><p>Mening birinchi paragrafim.</p></body>
<h1> elementi sarlavhani ba'yon qiladi
U bosh teg <h1> va yakun teg </h1> ga ega.
Elementning kontenti : Mening birinchi sarlavham
<h1>Mening birinchi sarlavham</h1>
<p> elementi paragrafni ba'yon qiladi.
U bosh teg <p> va yakun teg </p> ga ega.
Elementning kontenti: Mening birinchi paragrafim.
<p>Mening birinchi paragrafim.</p>
Yakun tegini esdan chiqarmang
Agar siz bundanda yaxshiroq va qattiyroq tekshiruvni hohlasangiz va sahifangiz XML orqali osonroq parse bolishini hohlasangiz doimiy ravishda teglarni yopishni unitmang. Bu albatta kelajakdagi muammolar oldini oladi. HTML elementlari yakun tegini esdan chiqarsangiz ham to'g'ri ishlaydi.
<html><body><p>Mening paragrafim
<p>Mening a paragrafim
</body></html>
Yuqoridagi misol barcha brauzerlarda ishlaydi, chunki yakun tegi ixtiyoriy hisoblanadi.
Hech qachon bunga tayanmang. Chunki yakun tegini esdan chiqarsangiz kutilmagan natijalar va hatolarga olib kelishi mumkin.
Bo'sh HTML elementlari
Kontentsiz HTML elementlari bo'sh elementlar deyiladi.
<br> yakun tegsiz element ( <br> elementi qator tugaganini bildiradi)
Bo'sh elementlar quyidagi teg dek yopilishi mumkin : <br />
HTML5 elementlarning yopilishini talab qilmaydi. tAgar siz bundanda yaxshiroq va qattiyroq tekshiruvni hohlasangiz va sahifangiz XML orqali osonroq parse bolishini hohlasangiz doimiy ravishda teglarni yopishni unitmang. Bu albatta kelajakdagi muammolar oldini oladi. elements.
Kichik Harfdagi Teglarni Ishlating.
HTML teglari kichik va katta harflarni farqiga bormaydi: <P> va <p> bitta narsani bildiradi
HTML5 standartlari kichik harfdagi teglarni talab qilmaydi, lekin W3C HTML4 da kichik harfdagi teglarni maslahat beradi, XHTML kabi dokument turlarida talab qiladi.
2165dan so'ng qo'shdi...
Xudo hoxlasa HTML dan söng CSS, jаvаsсriрt, PHP, MySQL darslarini joylayman! :)
Ijobiy (2): real_fans, Mahmudjon_BEST,
Raxmat aytdi (2): Mahmudjon_BEST, real_fans,
9. Mahmudjon_BEST (255) [off] | TXT | 38| 18 Apr 2019, 17:01
Brigand (18 Apr 2019, 15:51):
Dima Muratov, Albatta bor! Qulayrog'i AndroPHP.apk: Forum: AndroPHP.Apk - Androidlar uchun danwer!
Yoki bu sahifada ha• • •
Brigand, <div class="footer"> sobirjonovmahmudjon@gmail.com</div> qilib qo'ydim, lekn o'xshamadi :( . http://vorzakon.lark.ru/index.html ni qarang , huddi aytganizdek qo'shdim lekn sahifada chiqib qoldiku.
10. Brigand (M) (481) [off] | TXT | 36| 18 Apr 2019, 18:09
Mahmudjon_BEST (18 Apr 2019, 17:01):
Brigand, <div class="footer"> sobirjonovmahmudjon@gmail.com</div> qilib qo'ydim, lekn o'xshamadi :( . http://vo• • •
Mahmudjon_BEST, @gmail .com emas @mail.ru qiling. Shunda öxshaydi.
10644dan so'ng qo'shdi...
HTML Atributlari

Atributlar HTML elementlari haqida qo'shimcha ma'lumot beradi.
HTML Atributlari
*.HTML elementlariatributlargaega bo'lishi mumkin
*.Atributlar HTML elementlari haqidaqo'shimcha ma'lumotberadi
*.Atributlar har doimbosh(body) tegi ichidakeladi.
*.Atributlar nom va qiymat juftligida ishlatiladi:nom="qiymat"
lang Atributi
Dokumentning tilini <html> tegi ichida ba'yon qilish mumkin
Til lang atributi ichida ba'yon qilinadi
Dokumentning tilini kiritib o'tish foydalanuvchi qurilma dasturlar va qidiruv tizimlari yaxshi ishlashini ta'minlaydi:
<!DOCTYPE html><htmllang="en-US"><body><h1>Mening birinchi sarlavham.</h1><p>Mening birinchi paragrafim.</p></body></html>
Birinchi ikkita harf tilni aniqlaydi (uz). Agar dialekt mavjud bo'lsa yana ikkita harf ishlatiladi (en-US yoki en-UK).
Title (sarlavha) atributi
HTML paragraflari <p> tegi blan ba'yon qilinadi
Quyidagi misolda<p>elementititleatributiga ega. Atributning qiymati"UzMasterS.Ru haqida":
<ptitle="UzMasterS.Ru haqida">UzMasterS.Ru veb developerlar sayti.
U HTML, CSS, jаvаsсriрt, XML, SQL, PHP, ASP va veb dasturlashning
boshqa jabhalarini qamrovchi qo'llanmalarni taqdim qiladi.
</p>
... Sichqonchani element ustiga olib kelsangiz title atributining qiymati "tooltip" ning ichida ekranga chiqadi.
href Atributi
HTML havolalari(link)<a>tegi bilan ba'yon qilinadi. Havolalarning manzillarihrefatributida beriladi
<ahref=" http://www.UzMasterS.Ru">Bu havola</a>
Havolalar(link) va <a> tegi haqida keyingi sahifalarimizda ko'proq narsalarni o'rganib olasiz
O'lcham atributlari
HTML rasmlar<img>tegi blan ba'yon qilinadi
Manbaning (src) fayl nomi, va rasmning o'lchamlari (widthvaheight) atributlar ko'rinishida beriladi
<imgsrc="UzMasterS.Ru.png"width="200"height="50">
Rasmning o'lchami piksellarda beriladi: width="104" rasmning eni 104 pikselga tengligini bildiradi.
Rasmlar va <img> tegi haqida to'liq ma'lumotni keyingi sahifalarimizda o'rganib olasiz
alt Atributi
Alt atributi HTML elementini ekranga chiqarish imkoni mavjud bo'lmaganda ekranga chiqaraladigan alternativ tekstni ba'yon qiladi.
Atribut qiymati screen readerla orqali o'qilishi mumkin. Bu esa o'z navbatida ko'r insonlar uchun element qiymatini eshitish imkonini beradi.
<imgsrc="UzMasterS.Ru.jpg"alt="UzMasterS.Ru"width="104"height="104">
Har doim kichik harfdagi atributlarni ishlatishni maslahat beramiz
HTML5 standartlari kichik harfdagi atribut nomlarini talab qilmaydi
title atributi Title yoki TITLE ko'rinishida ham yozilishi mumkin
Biz HTML4 da kichik harflarni ishlatishni maslahat beramiz, XHTML kabi talabchan dokument turlari esa kichik harflarni ishlatishni talab qiladi.
... Kichik harf eng keng tarqalgan hisoblanadi, unda yozish onsonroq. inLab jamoasi atributlar nomlari uchun kichik harflardan foydalanish maslahat beradi chunki bu keyinchalik qulayliklar yaratdi
Atributlarning qiymatlarini doim qo'shtirnoqlar ichida yozishni maslahat beramiz
HTML5 standartlari atributlarning qiymatlarini qo'shtirnoqqa olishni talab qilmaydi
Yuqorida ko'rsatilgan href atributi, quyidagidek yozilishi mumkin:
<ahref=http:// www.UzMasterS.Ru>Bu link</a>
inLab HTML4 da qo'shtirnoqlarni ishlatishni maslahat beradi, XHTML kabi talabchan dokument turlarida esa qo'shtirnoqlarni ishlatishni talab qiladi
Ba'zida qo'shtiqnoqlarni ishlatish zarur. Quyidagi namuna to'g'ri natijani chiqarmaydi, chunki atributning qiymatida bo'shliq (probel) bor
<ptitle=UzMasterS.Ruhaqida>
... Qo'shtirnoqlarni ishlatich juda keng tarqalgan. Ularni ishlatmaslik xatolarni kelitirib chiqarishi mumkin. UzMasterS.Ru da biz har doim qo'shtirnoqlardan foydalanamiz.
Yakka yoki juft qo'shtirnoqlar?
HTML da juft qo'shtirnoqlar ko'proq ishlatiladi, lekin yakka qo'shtirnoqlarni ishlatish mumkin.
Artibutning qiymatida juft qo'shtirnoq ishlatilgan bo'lsa yakka qo'shtirnoqni ishlatish zarur.
<ptitle='Brigand is "GooD" CodeR'>
va aksincha:
<ptitle="Brigand is 'GooD' CodeR">
Sahifa xulosalari:
*. Barcha HTML elementlari atributlarga ega bo'lishi mumkin
*. title atributi "tool-tip" da qo'shimcha ma'lumot beradi
*. href atributi havolalarning manzilini berish uchun ishlatiladi
*. width va height atributlari rasm o'lchamlari haqida ma'lumot beradi
*. alt attrbuti "screen reader" larga tekstni beradi
*. UzMasterS.Ruda HTML atributlari nomlarini kichik harflard yozamiz.
*. UzMasterS.Ruda atributlarning qiymatlarini juft qo'shtirnoqlar ichida yozamiz.
HTML atributlari
atributTavsifi
altRasm uchun alternativ mattni ba'yon qiladi
disabledKiritilgan element o'chiq bo'lishini ba'yon qiladi.
hrefHavolaning manzili (URL) ni ba'yon qiladi.
idElementga yagona id beradi.
srcRasmning manzili (URL) ni ba'yon qiladi.
11. Mahmudjon_BEST (255) [off] | TXT | 35| 18 Apr 2019, 18:10
Brigand, Baribir o'xshamadiku, bironta lark.ru dagi saytizda test qilib ko'rib anig'ini etolasmi do'stim?!
12. Brigand (M) (481) [off] | TXT | 35| 18 Apr 2019, 18:16
Mahmudjon_BEST (18 Apr 2019, 18:10):
Brigand, Baribir o'xshamadiku, bironta lark.ru dagi saytizda test qilib ko'rib anig'ini etolasmi do'stim?!
Mahmudjon_BEST, Buni köp test qilganman. @ va mail.ru orasidagi probelni olib tashlang. Yana öxshamasa: sh/x.
1110dan so'ng qo'shdi...
HTML Sarlavhalari

Sarlavhalar HTML dokumentlarining muhim qismi hisoblanadi.
HTML Sarlavhalar
Sarlavhalar <h1> dan <h6> gacha teglar bilan ba'yon qilinadi
<h1> eng muhim, <h6> unchalik muhim bo'lmagan sarlavhalarni ba'yon qilish uchun ishlatiladi
Namuna:
<h1>Bu birinchi sarlavha.</h1><h2>Bu ikkinchi sarlavha.</h2><h3>Bu uchinchi sarlavha.</h3>
Eslatma:Brauzerlar avtomatik ravishda har bir sarlavhadan oldin va keyin bo'sh joy qoldiradi.
Sarlavhalar juda muhim
HTML sarlavhalarini faqat sarlavhalar uchun ishlating. Matnni kattaroq yoki yirikroq qilish uchun ulardan foydalanmang.
Qidiruv tizimlari sarlavhalarni veb sahifaning strukturasi va kontentini indekslash uchun ishlatadi.
Foydalanuvchilar sizning sahifalaringizni sarlavhalar orqali tez ko'rib chiqishadi. Sarlavhalarni dokument strukturasini ko'rsatish uchun ishlatish juda muhim.
h1 asosiy sarlavha bo'lishi kerak, uning ketidan h2 dagi sarlavhalar keladi, ularning ketidan h3 dagi sarlavhalar va hokazo.
HTML da gorizontal chiziqlar
<hr> tegi HTML sahifada gorizontal chiziq yasaydi
hr elementi kontentni qismlarga ajratish uchun ishlatilishi mumkin.
Namuna:
<p>Bu birinchi paragaraf.</p><hr><p>Bu ikkinchi paragraf.</p><hr><p>Bu uchinchi paragraf.</p>
<head> elementi
<head> elementining HTML sarlavhalariga aloqasi yo'q
<head> elementi o'z ichida "meta dаtа" ni saqlaydi. Meta dаtа ekraga chiqarilmaydi
<head> elementi <html> va <body> teglari orasiga qoyiladi:
Namuna:
<html><head><title>Mening birinchi HTML faylim</title><metacharset="UTF-8"></head><body> ...
...
...
</body>
... Meta dаtа bu ma'lumot haqidagi ma'lumot. HTML meta dаtа si HTML documenti haqidagi ma'lumot.
<title> elementi
<title> elementi meta dаtа hisoblanadi. U HTML dokumentning title ni ba'yon qiladi
Title dokumentning ichida ekranga chiqmaydi, lekin brauzerning tab ida chiqarilishi mumkin.
Boshqa meta elementlar
HTML stillari haqidagi sahifamizda meta elementlar haqida ko'proq narsalarni bilib olasiz.
<style> elementi ichki CSS stil sahifalarini ba'yon qilish uchun ishlatiladi.
<link> elementi tashqi CSS stil sahifalarini ba'yon qilish uchun ishlatiladi.
HTML manbasini ko'rish
Juda chiroyli veb sahifani ko'rib o'zingizga "buni qanday qilishkan ekan ?" degan savolni berganmisiz ?
Buni bilish uchun veb sahifada sichqonchaning o'ng tugmasini bosing va "View page source"(Chrome) yoki "View Source"(IE) ni tanlang. Boshqa brauzerlarda ham shunga o'xshash . Veb sahifaning HTML kodi yangi oynada ochiladi.
HTML Teg Tavsiflari
inLab.uz teg ta'vsiflari va ularning attributlari haqida qo'shimcha ma'lumot beradi.
HTML teglari va ularning attributlari haqida keyingi sahifalarimizda ko'proq bilib olasiz.
TegTavsifi
<html>HTML dokumentni tasvirlaydi
<body>Dokumentning asosiy qismini tasvirlaydi
<head>Dokumentning bosh elementini tasvirlaydi
<h1> dan <h6> gachaHTML sarlavhalarini tasvirlaydi
<hr>Gorizontal chiziq chizadi
1117dan so'ng qo'shdi...
HTML Paragraflari

HTML dokumentlar paragraflarga bo'linadi.
HTML Paragraflar.
<p>elementi paragrafni ba'yon qiladi.
Namuna:
<p>Bu birinchi paragraf.</p><p>Bu ikkinchi paragraf.</p>
... Brauzerlar avtomatik ravishda paragrafdan oldin va keyin bo'sh qator qoldiradi
HTML ekran
Brauzer HTML kodni ekranga qanday chiqarishini oldindan bila olmaysiz.
Katta yoki kichik va o'lchami o'zgartirilgan oynalar har natijalarni ekranga chiqarishi mumkin.
HTML kodga qo'shimcha bo'sh joylar va qatorlar qo'shish orqali ekranga chiquvchi natijani o'zgartira olmaysiz
Sahifa ekranga chiqarilayotganda brauzer otriqcha bo'sh joylar va qatorlarni olib tashlaydi.
Bo'sh joy va qatorlar qancha bo'lishidan qatiy nazar ularbitta bo'sh joydeb hisoblanadi.
Namuna:
<p>Ushbu pragraf
ko'plab qatorlarni
va bo'sh joylarni
o'z ichiga oladi.
Lekin brauzer ularni
hisobga olmaydi.
</p><p>Ushbu pragraf ko'plab qatorlarni va bo'sh joylarni o'z ichiga oladi. Lekin brauzer ularni hisobga olmaydi.
</p>
Yakun tegni esdan chiqarmang
Brauzerlarning katta qismi yakun tegni ishdan chiqarsangiz ham HTML ekranga to'g'ri chiqaradi.
Namuna:
<p>Bu birinchi paragraf
<p> Bu ikkinchi paragraf
Yuqoridagi misol deyarli barcha brauzerlarda ishlaydi, lekin bunga ishonib qolmang.
Yakun tegni esdan chiqarish kutilmagan natija va xatolarga olib kelishi mumkin.
... HTML ning XHTML kabi versiyalari yakun tegni qoldirib ketishga ruxsat bermaydi.
Yangi qatorga o'tish.
<br> elementi qator tugaganini bildiradi.
<br> yangi paragraf boshlamasdan yangi qatorga o'tish imkonini beradi.
Namuna:
<p>Bu<br>qatorlarga<br>bo'lingan<br>paragraf</p>
<br> elementi bo'sh HTML elementi hisoblanadi. U faqat bosh tegdan iborat.
She'rlar muammosi
Namuna:
<p>Quyidagi she'r ekranga bitta qatorda chiqariladi.:</p><p>Quyosh chiqdi olamga ,
Yugurib bordim xolamga,
Xola, xola kulcha ber,
Xolam dedi o'tin ter.
</p>
<pre> elementi
<pre> elementi oldindan formatlangan tekstni bayon qiladi.
<pre> elementi ichidagi matn o'lchami belgilanga shriftda (odatda Courier) va bo'sh joylar va qatorlarni saqlagan holda ekranga chiqadi.
Namuna:
<pre>Quyosh chiqdi olamga ,
Yugurib bordim xolamga,
Xola, xola kulcha ber,
Xolam dedi o'tin ter.
</pre>
HTML Teg Tavsifi
HTML elementlari va ularning attributlari haqida qo'shimcha ma'lumot
TegTavsifi
<p>Paragrafni bayon qiladi.
<br>Qator tugaganligini bildiradi.
<pre>Oldindan formatlangan matnni ba'yon qiladi.
Ijobiy (1): real_fans,
13. RM_FANAT(1034) [off] | TXT | 31| 18 Apr 2019, 21:57
Brigand, Salom, siz 9-sinfda o'qiysizmi?
14. Brigand (M) (481) [off] | TXT | 29| 19 Apr 2019, 18:51
RM_FANAT (18 Apr 2019, 21:57):
Brigand, Salom, siz 9-sinfda o'qiysizmi?
RM_FANAT, Hayrli tong. Ha, shunday!
13 soatdan so'ng qo'shdi...
HTML Uslublari

HTMLda Uslub Atributlari
HTML elementlariga uslublar o'rnatish "style" atributi bilan amalga oshirish mumkin
HTML uslublar atributi quyidagi sintaksisga ega
style = "property:value;"
"property" CSS hususiyati, "value" esa CSS qiymati hisoblanadi
... CSS haqida ko'proq malumot keyingi sahifalarda
HTML Orqa Fon Rangi
background-colorxususiyati sahifani orqa foni rangini o'zgartirisha ishlatiladi. Namuna uchun quyidagi kod sahifani orqa fonini "lightgrey" yani och kulrang ga o'zgartiradi
Namuna:
<bodystyle = "background-color:lightgrey;"><h1> Bu sarlavha </ h1><p> Bu paragraf </p></body>
HTML Matn Rangi
Html da matn rangini o'zgartirish uchuncolorhususiyatidan foydalaniladi
Namuna:
<h1style = "color:blue;"> Bu sarlavha </h1><pstyle = "color:red;">. Bu paragraf </ p>
HTML Shriftlari
Html da matn/so'zlarning shrift/formatini o'zgartirish uchunfont-familyhususiyatidan foydalaniladi
Namuna:
<h1style = "font-family:verdana;"> Bu sarlavha </ h1><pstyle = "font-family:courier;">. Bu paragraf</ p>
HTML Matn O'lchami
html matn o'lchamini o'zgartirish uchunfont-sizehususiyatidan foydalaniladi
Namuna:
<h1style = "font-size:300%;"> Bu sarlavhali </ h1><pstyle = "font-size:160%;">. Bu band bo'ladi </p>
HTML Matn Joylashtirish
htmlda matnni sahifaga joylashtirishda(o'nga, chapga surishda)text-alignxususiyati ishlatiladi
Namuna:
<h1style = "text-align:center;"> Markaziy sarlavha</ h1><p> Bu paragraf bo'ladi. </ p>
Ushbu sahifada siz
*.styleatributidan foydalanishni
*.background-coloryordamida orqa fonni o'zgartirishni
*.coloryordamida matnni rangini o'zgartirishni
*.font-familyyordamida matn shrift/formatini o'zgartirishni
*.font-sizeyordamida matn o'lchamini o'zgartirish
*.text-alignyordamida matn ni sahifaga joylashtirishni
o'zlashtirdingiz!!!
15. RM_FANAT(1034) [off] | TXT | 25| 19 Apr 2019, 18:53
Brigand (19 Apr 2019, 18:51):
RM_FANAT, Hayrli tong. Ha, shunday!
13 soatdan so'ng qo'shdi...
HTML Uslublari

HTMLda Uslub Atributlari
HTML elementlariga usl• • •
Brigand, O'zi bilib shu savolni berdim. sizga.!. #1 dagi malumotlar Maktab darsligan olib yozgansiz yani 9-sinf "Informatika" fani "HTML HAQIDA TUSHUNCHA" mavzularidan va o'z bilimlaringizni ham yozgansiz. :)


p.s: Men ham 9-sinf da o'qiymanda :)
16. Brigand (M) (481) [off] | TXT | 25| 19 Apr 2019, 19:13
RM_FANAT (19 Apr 2019, 18:53):
Brigand, O'zi bilib shu savolni berdim. sizga.!. #1 dagi malumotlar Maktab darsligan olib yozgansiz yani 9-sinf "Informatika" fa• • •
RM_FANAT, Bu malumotlar kitobdan olinmagan. Kitobda faqat boshlang'ich oddiy narsalar bor. Htmldan söng CSS, jаvаsсriрt, MySQL, PHP maqolalarini qöshaman. Uzumini yengu bog'ini surishtirmang.
56 sekunddan so'ng qo'shdi...
HTML Formatlash

HTML da Formatlash elementlari
Formatlash elementlari matn, so'z ni turli xil uslublarda yozishga imkon beradi, ular quyidagi turlarga bo'linadi:
*.Qalin Matn
*.Muhim Matn
*.Kursiv Matn
*.Ta'kidlovchi Matn
*.Belgilangan Matn
*.Kichik Matn
*.O'chirilgan Matn
*.Joylashtirilgan Matn
*.Indeks Matn
*.Yuqori Indeks
HTML Bold va Strong formatlash
Umuman olganda ko'rinish jihatidan <strong> va <b>(bold) teglarini farqi yo'q, ikkisi ham matnni qalin yani to'q qora shaklga o'zgartiradi. Lekin "text to speech"(matn ni o'qish) xizmati ishlaganda <strong> tegi matn dan farqli tonda o'qiladi, biroq <b> tegi matn bilan bir xil tonda o'qiladi
Namuna:
<b>bu qalin matn va oddiy o'qiladi </b><strong>bu kuchli matn va farqli o'qiladi</strong>
HTML kursiv va ta'kidlovchi matn farqi:
Yuqoridagi <strong> va <b> ga o'xshab bu ikki <em> va <i> teglarini ham ko'rinishi jihatidan farqi yo'q, ikkisiham matn ni "italic" yani biroz o'ng tomonga bukilishini ta'minlaydi. Biroq "text to speech"(matn ni o'qish) xizmati ishlaganda <em> tegi matn dan farqli tonda o'qiladi, lekin <i> tegi matn bilan bir xil tonda oqiladi<p>
Namuna:
<p><i> Bu kursiv matn va matnda oddiy o'qiladi </i>.
<em>bu takidlovchi matn va matnda farqli o'qiladi </em>.
</p>
... Hozirgi kunda <strong> va <em> juda ko'p ishlatiladi <b> va <i> ga qaraganda chunki bu teglarni hamma brauzerlar qo'llab-quvatlaydi va "text to speech (tekstlarni audio holatida o'qib berish qobilyat)" xizmatida ham farqli o'qiladi
HTMLkichik matnFormatlash
HTML <small> tegi matn ni kichik ko'rinishda yozish uchun ishlatiladi
Namuna:
<h2> HTML <small>kichik </small> Formatlash</h2>
HTMLBelgilangan matnFormatlash
HTML <mark> tegi matnni belgilashga ishlatiladi , u matn/textni orqa fonini o'zgartiradi
Namuna:
<h2> HTML <mark> belgilangan matn </mark> Formatlash </h2>
HTMLO'chirilgan matnFormatlash
HTML <del> tegi o'chirilgan matn ni yozish uchun ishlatiladi, u mant ni ustidan chiziq tortib qoyadi
Namuna:
<p> Mening sevimli rangim <del>ko'k</del> qizil. </p>
HTMLkiritilgan matnlarniFormatlash
HTML <ins> tegi mant/text qo'shganda yoki yangi qo'shilgan matn/text ifodalash uchun ishlatiladi
Namuna:
<p> Mening sevimli <ins>rangim</ins> qizil </p>
HTMLindex matnyaratish
HTML <sub> tegi index matn yaratishda ishlatiladi
Namuna:
<p> Bu <sub> index </sub> matn. </p>
HTMLyuqori index(darajadagi) matnyaratish
HTML <sup> tegi daraja yoki yuqori index hosil qilishda ishlatiladi
Namuna:
<p> Bu <sup> yuqori indexdagi </sup> matn. </p>
4283dan so'ng qo'shdi...
HTML da Qo'shtirnoq(Tsitata) va Havola Elementlari

HTML <q> Elementi
HTML da <q> tegi qisqa qo'shtirnoqlar uchun ishlatiladi
Namuna:
<p>UzMasterS.Ru ning maqsadi bu : <q>o'zbek darsturchilarga yangi
darsturlash tillarini o'zbek tilida tushunarli va oson o'rganish imkoniyatini yaratib berish.</q></p>
HTML <blockquote> Elementi
html da <blockquote> elementi uzun qo'shtirnoqli matnlar uchun va "cite" atributi orqali boshqa saytlardan olingan manbalarga ishlatiladi
Namuna:
<p>Here is a quote from WWF's website:</p><blockquotecite=" http://www.wo rldwildlife.org /who/index.ht ml">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr> Elementi
html da <abbr> elementi qisqartmalar uchun ishlatiladi bu tegning "title" atributi yordamida siz qisqartirilgan so'zlarga maxsus izohlar berishingiz mumkin.
Namuna:
<p>The <abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> Elementi
HTML da <address> elementi bu kontakt ma'lumotlarini ya'ni bog'lanish uchun ma'lumotlarni yozishda ishlatiladi, <address> tegi elementlari odatda kursiv(bukilgan) tarzda ko'rinadi
Namuna:
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> tegi
HTML da <cite> tegi loyiha/ish/joy va narsalar nomlariga ishlatiladi va odatda brauzerlar uni kursiv shaklda ko'rsatadi
Namuna:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
HTML <bdo> Elementi
HTML da <bdo> tegi matn/text ni teskari yozishga yoki teskari yozilgan matn/text ni tog'ri yozishga ishlatiladi
Namuna:
<bdodir="rtl">This text will be written from right to left</bdo><bdodir="rtl">uoy evol I</bdo>
2125dan so'ng qo'shdi...
HTML Kompyuter Kodi Elementlari

Kompyuter kodi elementi
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
HTML <kdb> Elementi
HTML da <kdb> elementi klaviaturadan kitilgan ma'lumotlarni qabul qilishda ishlatiladi:
Namuna:
<kbd>File | Open...</kbd>
Natija:
File | Open…
HTML <samp> Elementi
HTML da <samp> elementi kompyuter chiqargan na'munalarni yozish uchun ishlatiladi
Namuna:
<samp> demo.example.c om login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
Natija:
demo.example.comlogin: Apr 12 09:10:17Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
HMTL <code> Elementi
HTML da <code> elementi dasturlash kodlarini yozishga ishlatiladi
Namuna:
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
Natija:
var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;
HTML <code> Elementi
Yodda tuting <code> elementi hech qanday bo'sh joylarni yoki yangi satrlarni saqlab qolmaydi. Yani barcha kodlarni bir qatorga siqib qo'yadi. Buni oldini olish uchun <pre> tegidan foydalanish kerak
Namuna:
<pre><code>var x = 5;
var y = 6;

document.getElementById("demo").innerHTML = x + y;
</code></pre>
Natija:
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
HTML <var> Elementi
<var> tegi HTML da o'zgaruvchilarni ifodalashda ishlatiladi. Bu o'zgaruvchilar matematik ifoda yoki darsurlash musobaqalaridagi o'zgaruvchi bo'lishi mumkin
Namuna:
Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Natija:
Einstein wrote: E = mc2.
17. Mahmudjon_BEST (255) [off] | TXT | 9| 21 May 2019, 17:26
Mana bu sahifadagi kodni bitta js faylni ichiga solsa bo'ladimi? http://yangiyol.lark.ru/test_uchun/1.html
18. RM_FANAT(1034) [off] | TXT | 9| 21 May 2019, 17:31
Mahmudjon_BEST (21 May 2019, 17:26):
Mana bu sahifadagi kodni bitta js faylni ichiga solsa bo'ladimi? http://yangiyol.lark.ru/test_uchun/1.html
Mahmudjon_BEST, Ha albatta
19. MasterOS(1297) [off] | TXT | 8| 21 May 2019, 17:32
Mana kimga kerak yuklanglar hozircha faqat html ochiq, js va css razrabotkada.
Qolgan DTlar premiumda.
http://masteros.tk/Mles.apk
20. Mahmudjon_BEST (255) [off] | TXT | 8| 21 May 2019, 17:38
RM_FANAT (21 May 2019, 17:31):
Mahmudjon_BEST, Ha albatta
RM_FANAT, Agar shu sahifadagi textareani ichidagi kodlarni bitta js faylga solib ishlatib bersangiz bersangiz hisobimdagi hamma uzm sizga!
1105dan so'ng qo'shdi...
Mana bu sahifadagi textarea ni ichidagi kodni http://yangiyol.lark.ru/test_uchun/1.html
12>>>
Ma'lumotlar
Mavzu id raqami: 3137
Mavzuga oid xabarlar soni: 24 ta
So'ngi faollik vaqti: 21 May 2019, 19:17
Mavzuni ko'rishgan: 54 kishi
» txt shaklida yuklab olish
» Mavzudagi yangi xabarlardan xabardor bo'lishni rad etish
uzmasters.ru Onlayn 29 (0/29)
uzmasters.ru Forumga a'zo bo'lish
uzmasters.ru Forumdan qidirish
uzmasters.ru Bosh sahifa
Reytingdagi saytimiz: UZFOR.UZ - Ilmiy munozaralar forumi! [+]
Яндекс.Метрика UzMasterS.Ru