2-dars.
Web sayt yaratishni o'rganishni hohlovchilar uchun HTML darslarini qo'yib borishni niyat qilgan edik.
Html yordamida siz web sayt yaratishingiz mumkin.
Ushbu darslarda siz HTML da sayt yaratishni oson o'rganishingiz mumkin
HTML — bu juda oson, Siz albatta o'rganasiz!
Darsni boshlaymiz.
Internetning WWW hizmati asosan web-sahifalarga bogliq ekan, ular qanday yaratiladi? degan savol tugulishi tabiiy. HTML (ing.Hypertext Markup Language — gipermatnli belgilash tili) — bu SGMLga (Standard Generalized Markup Language — standart umumlashtirilgan belgilash tili) asoslangan va xalqaro ISO 8879 standartiga mos keluvchi til. Web-sahifalar HTML tilida yoziladi. HTML tilining soddaligi (SGMLga nisbatan) va yuqori formatlash imkoniyatlarining mavjudligi uni foydalanuvchilar orasida tez tarqalishiga sabab bo'ldi. Bundan tashqari unda gipermatnlardan foydalanish mumkin edi. Tilning rivojlanishi bilan unga qo'shimcha multimedia (rasm,tovush, animatsiya va boshqalar) imkoniyatlari qo'shildi. HTML dasturlash tili hisoblanmaydi. Bu tilda hujjat (web-sahifa) tayyorlash uchun Windowsning Bloknot kabi oddiy matn muharriri yetarli. HTML tilining buyruqlari "<" va ">" belgilari orasiga yoziladi va deskriptor yoki teg deb ataladi. Masalan, yozuvi HTML tilidagi hujjatning boshlanishini anglatadi.
Demak, HTML — oddiy matn muharririda deskriptorlardan foydalanib yoziladigan til. HTML-hujjat deskriptorlar qollanilgan HTML matnli fayl bolib, u web-sahifani tashkil etadi. HTML-hujjat fayli nomining kengaytmasi «html» boladi, ayrim hollarda «htm» korinishida ham saqlanishi mumkin. HTML-hujjatni web-brouzerlar yordamida hotiraga yuklansa, u ekranga web-sahifa korinishida chiqadi.
HTML tili (muntazam) muttasil rivojlanib bormoqda. Oz navbatida web-brouzerlar ham yangilanib turilibdi. Hozirgi kunda web-sahifa tayyorlash uchun asosan HTML.4 tilidan foydalaniladi. Uning ba`zi buyruqlarini eski web-brouzerlar (Internet Explorer-3, Internet Explorer-4) bajara olmaydi. Bundan tashqari turli web-brouzerlar, masalan, Internet Explorer va Netscape ham bir biridan bir oz farq qiladi. Shu sababli bitta HTML-hujjat turli web-brouzerlarda bir oz farq bilan aks etishi mumkin.
Keling oddiygina misol ko'ramiz:
<html>
<body>
<h1>Salom Dunyo! </h1>
<h1>Mening birinchi web sahifam. </h1>
<p>Mening birinchi paragrafim.</p>
</body>
</html>
Ushbu sayt orqali o'zingiz ham yozib natijani ko'rishingiz mumkin: htmledit.squarefree.com/
HTML da asosan teg lardan foydalaniladi.
<html></html> — asosiy teg bo'lib qolgan teglar ushbu teg ning ichida yoziladi.
<body></body> — bu sahifamizning tana qismi
<p></p> — paragraf yozish uchun
Ko'rib turganingizdek har bir teg <> yordamida ochilib, </> bilan yopiladi.
HTML ni o'rganish uchun Bloknot dasturidan foydalansangiz ham bo'ladi. Yoki NotePad++, va shunga o'xshash redaktorlarni ham ishlatsangiz bo'ladi
Yuqoridagi kodni bloknot ochib ichiga tashlab biror papkaga o'zingiz hohlagan nom bilan saqlaymiz, masalan index.html
Web sayt yaratishni o'rganishni hohlovchilar uchun HTML darslarini qo'yib borishni niyat qilgan edik.
Html yordamida siz web sayt yaratishingiz mumkin.
Ushbu darslarda siz HTML da sayt yaratishni oson o'rganishingiz mumkin
HTML — bu juda oson, Siz albatta o'rganasiz!
Darsni boshlaymiz.
Internetning WWW hizmati asosan web-sahifalarga bogliq ekan, ular qanday yaratiladi? degan savol tugulishi tabiiy. HTML (ing.Hypertext Markup Language — gipermatnli belgilash tili) — bu SGMLga (Standard Generalized Markup Language — standart umumlashtirilgan belgilash tili) asoslangan va xalqaro ISO 8879 standartiga mos keluvchi til. Web-sahifalar HTML tilida yoziladi. HTML tilining soddaligi (SGMLga nisbatan) va yuqori formatlash imkoniyatlarining mavjudligi uni foydalanuvchilar orasida tez tarqalishiga sabab bo'ldi. Bundan tashqari unda gipermatnlardan foydalanish mumkin edi. Tilning rivojlanishi bilan unga qo'shimcha multimedia (rasm,tovush, animatsiya va boshqalar) imkoniyatlari qo'shildi. HTML dasturlash tili hisoblanmaydi. Bu tilda hujjat (web-sahifa) tayyorlash uchun Windowsning Bloknot kabi oddiy matn muharriri yetarli. HTML tilining buyruqlari "<" va ">" belgilari orasiga yoziladi va deskriptor yoki teg deb ataladi. Masalan, yozuvi HTML tilidagi hujjatning boshlanishini anglatadi.
Demak, HTML — oddiy matn muharririda deskriptorlardan foydalanib yoziladigan til. HTML-hujjat deskriptorlar qollanilgan HTML matnli fayl bolib, u web-sahifani tashkil etadi. HTML-hujjat fayli nomining kengaytmasi «html» boladi, ayrim hollarda «htm» korinishida ham saqlanishi mumkin. HTML-hujjatni web-brouzerlar yordamida hotiraga yuklansa, u ekranga web-sahifa korinishida chiqadi.
HTML tili (muntazam) muttasil rivojlanib bormoqda. Oz navbatida web-brouzerlar ham yangilanib turilibdi. Hozirgi kunda web-sahifa tayyorlash uchun asosan HTML.4 tilidan foydalaniladi. Uning ba`zi buyruqlarini eski web-brouzerlar (Internet Explorer-3, Internet Explorer-4) bajara olmaydi. Bundan tashqari turli web-brouzerlar, masalan, Internet Explorer va Netscape ham bir biridan bir oz farq qiladi. Shu sababli bitta HTML-hujjat turli web-brouzerlarda bir oz farq bilan aks etishi mumkin.
Keling oddiygina misol ko'ramiz:
<html>
<body>
<h1>Salom Dunyo! </h1>
<h1>Mening birinchi web sahifam. </h1>
<p>Mening birinchi paragrafim.</p>
</body>
</html>
Ushbu sayt orqali o'zingiz ham yozib natijani ko'rishingiz mumkin: htmledit.squarefree.com/
HTML da asosan teg lardan foydalaniladi.
<html></html> — asosiy teg bo'lib qolgan teglar ushbu teg ning ichida yoziladi.
<body></body> — bu sahifamizning tana qismi
<p></p> — paragraf yozish uchun
Ko'rib turganingizdek har bir teg <> yordamida ochilib, </> bilan yopiladi.
HTML ni o'rganish uchun Bloknot dasturidan foydalansangiz ham bo'ladi. Yoki NotePad++, va shunga o'xshash redaktorlarni ham ishlatsangiz bo'ladi
Yuqoridagi kodni bloknot ochib ichiga tashlab biror papkaga o'zingiz hohlagan nom bilan saqlaymiz, masalan index.html
2-Dars
HTML DARSLARI 2-DARS. TEGLAR BILAN ISHLASH
HTML bilan web sahifa yaratishni o'rganishni davomm ettiramiz. Oldingi darsimizda HTML haqida qisqacha tushuncha bergan edik.
Ushbu darsimizda HTML teglarni o'rganib chiqamiz.
HTML da sarlavhalar.
6 turdagi sarlavha yaratishimiz mumkin.Sarlavhalar yaratish uchun biz:
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
teglaridan foydalanamiz.
Misol:
<html>
<body>
<h1>Bu sarlavha 1</h1>
<h2>Bu sarlavha 2</h2>
<h3>Bu sarlavha 3</h3>
<h4>Bu sarlavha 4</h4>
<h5>Bu sarlavha 5</h5>
<h6>Bu sarlavha 6</h6>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
HTML da paragraflar.
Bu juda ham oson.
<p>bu yerga biror matn yoziladi</p>
HTML da Linklar
HTML da linklarni
<a></a>
teglari bilan yaratishimiz mumkin.
Misol:
<a href="http://bilimdon.blogspot.com">Bu link</a>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
HTML da rasmlar bilan ishlash
Siz yaratayotgan web sahifangizga rasm qo'yishni hohlasangiz
<img>
tegidan foydalanib bu ishni amalga oshirishingiz mumkin
Misol:
<html>
<body>
<img src="http://shahzodbek.Ga/images/c.jpg" alt="Antihack" >
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
Qolgan teglarni keyingi darslarimizda o'rganishni davom ettiramiz.
HTML DARSLARI 2-DARS. TEGLAR BILAN ISHLASH
HTML bilan web sahifa yaratishni o'rganishni davomm ettiramiz. Oldingi darsimizda HTML haqida qisqacha tushuncha bergan edik.
Ushbu darsimizda HTML teglarni o'rganib chiqamiz.
HTML da sarlavhalar.
6 turdagi sarlavha yaratishimiz mumkin.Sarlavhalar yaratish uchun biz:
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
teglaridan foydalanamiz.
Misol:
<html>
<body>
<h1>Bu sarlavha 1</h1>
<h2>Bu sarlavha 2</h2>
<h3>Bu sarlavha 3</h3>
<h4>Bu sarlavha 4</h4>
<h5>Bu sarlavha 5</h5>
<h6>Bu sarlavha 6</h6>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
HTML da paragraflar.
Bu juda ham oson.
<p>bu yerga biror matn yoziladi</p>
HTML da Linklar
HTML da linklarni
<a></a>
teglari bilan yaratishimiz mumkin.
Misol:
<a href="http://bilimdon.blogspot.com">Bu link</a>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
HTML da rasmlar bilan ishlash
Siz yaratayotgan web sahifangizga rasm qo'yishni hohlasangiz
<img>
tegidan foydalanib bu ishni amalga oshirishingiz mumkin
Misol:
<html>
<body>
<img src="http://shahzodbek.Ga/images/c.jpg" alt="Antihack" >
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com/
Qolgan teglarni keyingi darslarimizda o'rganishni davom ettiramiz.
Blogspot
Bilmaganni so'rab o'rgangan olim!
Kompyuter Dasturlari va Kompyuterda Dasturlashga oid Habar va Yangiliklar
HTML darslari 4-dars. HEAD tegi.
HTML ni o'rganishni davom ettiramiz. Ushbu darsimizda
<HEAD>
tegi bilan ishlashni o'rganib chiqamiz.
Ho'sh bu teg nima uchun kerak va nima uchun ishlatiladi? Degan savolga javob olasiz degan umiddamiz.
Bilamizki barcha teglar
<HTML></HTML>
teglarini ichida yoziladi.
Keling sodda qilib tushuntirishga harakat qilaman:
Odam — bu
<html></html>
tegi deb tasavvur qilamiz.
<head></head>
— bu odamning bosh qismi( ya'ni kallasi).
<body></body>
— nomidan ham ma'lumki, bu odamni badani.
<head></head>
teglari teglarini ichida yoziladi va
<body></body>
tegining yuqori qismida yoziladi.
Esda tuting,
<head></head>
teglari
<body>
teglarini orasida yozilmaydi.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ya'ni yuqoridagi strukturada yoziladi.
HEAD — teglarini ichiga biz css kodlar, javascript kodlar, va web sahifa uchun kerakli elementlarni, teglarni yozishimiz mumkin.
Quyidagi teglarni yozishimiz mumkin:
<title>
<style>
<meta>
<link>
<script>
<noscript>
<base>
<title>
— tegi.
Nomidan ham am'lumki, web sahifa nomini ko'rsatish uchun ishlatiladi.
Misol:
<html>
<head>
<title>Mening birinchi web sahifam</title>
</head>
<body>
Web sahifaning tana qismi...
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Ushbu kodni ishlatib browserda ochib, browseringizni tep qismiga qarang, va siz «Mening birinchi web sahifam» yozuvini ko'rasiz.
<link>
— tegi.
Bu tegni web sahifani boshqa fayllar bilan boglash uchun ishlatamiz, misol uchun css fayl bilan boglash uchun.
Misol:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Mening birinchi web sahifam</title>
</head>
<body>
Web sahifaning tana qismi...
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Yani ushbu misolda mystyle.css nomli css faylga bog'lash uchun ishlatilyapti.
<style>
— tegi.
Ushbu teg web sahifaga stil berish uchun ishlatiladi.
Misol:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:red;
}
</style>
</head>
<title>Mening birinchi web sahifam</title>
</head>
<body>
<p>Web sahifaning tana qismi...</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
CSS haqida keyingi darslarimizni kuzatib boring, CSS darslarini ham albatta qo'yib borishga harakat qilamiz.
<script>
— tegi.
Ushbu teg ichiga
JavaScript
kodlarini yozishimiz mumkin.
Bu darsimizda qo'ldan kelgancha teglarni tushuntirishga harakat qildim. Qolgan teglarni ham asta sekinlik bilan o'ranib boramiz.
Keyingi darslarimizni kuzatib boring.
HTML ni o'rganishni davom ettiramiz. Ushbu darsimizda
<HEAD>
tegi bilan ishlashni o'rganib chiqamiz.
Ho'sh bu teg nima uchun kerak va nima uchun ishlatiladi? Degan savolga javob olasiz degan umiddamiz.
Bilamizki barcha teglar
<HTML></HTML>
teglarini ichida yoziladi.
Keling sodda qilib tushuntirishga harakat qilaman:
Odam — bu
<html></html>
tegi deb tasavvur qilamiz.
<head></head>
— bu odamning bosh qismi( ya'ni kallasi).
<body></body>
— nomidan ham ma'lumki, bu odamni badani.
<head></head>
teglari teglarini ichida yoziladi va
<body></body>
tegining yuqori qismida yoziladi.
Esda tuting,
<head></head>
teglari
<body>
teglarini orasida yozilmaydi.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ya'ni yuqoridagi strukturada yoziladi.
HEAD — teglarini ichiga biz css kodlar, javascript kodlar, va web sahifa uchun kerakli elementlarni, teglarni yozishimiz mumkin.
Quyidagi teglarni yozishimiz mumkin:
<title>
<style>
<meta>
<link>
<script>
<noscript>
<base>
<title>
— tegi.
Nomidan ham am'lumki, web sahifa nomini ko'rsatish uchun ishlatiladi.
Misol:
<html>
<head>
<title>Mening birinchi web sahifam</title>
</head>
<body>
Web sahifaning tana qismi...
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Ushbu kodni ishlatib browserda ochib, browseringizni tep qismiga qarang, va siz «Mening birinchi web sahifam» yozuvini ko'rasiz.
<link>
— tegi.
Bu tegni web sahifani boshqa fayllar bilan boglash uchun ishlatamiz, misol uchun css fayl bilan boglash uchun.
Misol:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Mening birinchi web sahifam</title>
</head>
<body>
Web sahifaning tana qismi...
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Yani ushbu misolda mystyle.css nomli css faylga bog'lash uchun ishlatilyapti.
<style>
— tegi.
Ushbu teg web sahifaga stil berish uchun ishlatiladi.
Misol:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:red;
}
</style>
</head>
<title>Mening birinchi web sahifam</title>
</head>
<body>
<p>Web sahifaning tana qismi...</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
CSS haqida keyingi darslarimizni kuzatib boring, CSS darslarini ham albatta qo'yib borishga harakat qilamiz.
<script>
— tegi.
Ushbu teg ichiga
JavaScript
kodlarini yozishimiz mumkin.
Bu darsimizda qo'ldan kelgancha teglarni tushuntirishga harakat qildim. Qolgan teglarni ham asta sekinlik bilan o'ranib boramiz.
Keyingi darslarimizni kuzatib boring.
HTML ni o'rganishni davom ettiramiz. Ushbu darsimizda
CSS
bilan ishlashni o'rganib chiqamiz.
Siz web sahifangizni chiroyli dizayn va chiroyli ranglar bilan, o'ziz hohlagandek qilishni istasangiz CSS sizga juda katta yordam beradi.
CSS ni biz 3 xil usulda web sahifamizga boglashimiz mumkin.
HTML teglarining atributi sifatida ishlatishimiz mumkin
<style>
tegi bilan ishlatishimiz mumkin. Ya'ni
<head>
qismida.
Fayl orqali bog'lashimiz mumkin, ya'ni css fayl yaratib
<head>
qismida yaratilgan css faylni bog'lashimiz mumkin.
Keling end yuqoridagilarni birma bir o'rganib chiqamiz.
HTML teglarining atributi sifatida ishlatish.
Biz hali teglarning attributlarini o'rganib chiqmaganmiz, asta sekinlik bilan ularni ham o'rganib ketamiz.
HTML da har bir teg ga
style
attributini berishimiz mumkin. Ushbu style attributining qiymatiga biz css ni yozishimiz mumkin.
Misol:
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Bu sarlavha</h2>
<p style="background-color:green;">Bu paragraf.</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
background-color
— Bu CSS element hisoblanib, orqa fonga rang berish uchun ishlatiladi.
Ushbu element quyidagi qiymatlarni olishi mumkin:
rang nomi(ingliz tilida)
rang kodi(misol uchun oq rangning kodi #FFFFFF)
CSS elementlari haqida CSS darslarimizda batafsil o'rganamiz.
Natija:
Ko'rib turganingizdek, sahifaning umumiy tanasiga sariq rang berildi, sarlavhaning orqa foniga qizil, paragrafning orqa foniga esa yashil rang berildi.
<style>
tegi bilan ishlatish.
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
HEAD qismida style tegini ichiga yozishimiz mumkin
Misol:
<html>
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body >
<h2 >Bu sarlavha</h2>
<p >Bu paragraf.</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Ushbu misolda body tegi uchun orqa fon berildi,
background-color:yellow
;.
body{csslar yoziladi..}
p{csslar yoziladi..}
h1{csslar yoziladi..}
pre{csslar yoziladi..}
h3{csslar yoziladi..}
... qolgan teglar
Yuqoridagi ko'rinishda teglarga stil berishimiz mumkin.
HTML ga CSS faylni boglash.
HEAD qismida link tegi yordamida boglashimiz mumkin.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
href atributiga faylni nomi(agar css fayl va html fayl yonma yon turgan bo'lsa,agar yonma yon turmagan bo'lsa faylning turgan yo'li bilan yoziladi
CSS
bilan ishlashni o'rganib chiqamiz.
Siz web sahifangizni chiroyli dizayn va chiroyli ranglar bilan, o'ziz hohlagandek qilishni istasangiz CSS sizga juda katta yordam beradi.
CSS ni biz 3 xil usulda web sahifamizga boglashimiz mumkin.
HTML teglarining atributi sifatida ishlatishimiz mumkin
<style>
tegi bilan ishlatishimiz mumkin. Ya'ni
<head>
qismida.
Fayl orqali bog'lashimiz mumkin, ya'ni css fayl yaratib
<head>
qismida yaratilgan css faylni bog'lashimiz mumkin.
Keling end yuqoridagilarni birma bir o'rganib chiqamiz.
HTML teglarining atributi sifatida ishlatish.
Biz hali teglarning attributlarini o'rganib chiqmaganmiz, asta sekinlik bilan ularni ham o'rganib ketamiz.
HTML da har bir teg ga
style
attributini berishimiz mumkin. Ushbu style attributining qiymatiga biz css ni yozishimiz mumkin.
Misol:
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Bu sarlavha</h2>
<p style="background-color:green;">Bu paragraf.</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
background-color
— Bu CSS element hisoblanib, orqa fonga rang berish uchun ishlatiladi.
Ushbu element quyidagi qiymatlarni olishi mumkin:
rang nomi(ingliz tilida)
rang kodi(misol uchun oq rangning kodi #FFFFFF)
CSS elementlari haqida CSS darslarimizda batafsil o'rganamiz.
Natija:
Ko'rib turganingizdek, sahifaning umumiy tanasiga sariq rang berildi, sarlavhaning orqa foniga qizil, paragrafning orqa foniga esa yashil rang berildi.
<style>
tegi bilan ishlatish.
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
HEAD qismida style tegini ichiga yozishimiz mumkin
Misol:
<html>
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body >
<h2 >Bu sarlavha</h2>
<p >Bu paragraf.</p>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Ushbu misolda body tegi uchun orqa fon berildi,
background-color:yellow
;.
body{csslar yoziladi..}
p{csslar yoziladi..}
h1{csslar yoziladi..}
pre{csslar yoziladi..}
h3{csslar yoziladi..}
... qolgan teglar
Yuqoridagi ko'rinishda teglarga stil berishimiz mumkin.
HTML ga CSS faylni boglash.
HEAD qismida link tegi yordamida boglashimiz mumkin.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
href atributiga faylni nomi(agar css fayl va html fayl yonma yon turgan bo'lsa,agar yonma yon turmagan bo'lsa faylning turgan yo'li bilan yoziladi
HTML DARSLARI 6-DARS. JADVALLAR
Ushbu darsimizda jadvallar bilan ishlashni o’rganib chiqamiz.
Jadvallar bilan ishlashimiz uchun biz
<table>
tegidan foydalanamiz.
Ya’ni:
<table>
<tr>
<td><td>
<td><td>
<td><td>
<tr>
<tr>
<td><td>
<td><td>
<td><td>
<tr>
<table>
Ko’rib turganingizdek
<table>
teglari bilan jadval yaratiladi va uni ichida
<tr>
va
<td>
teglarini ishlatyapti.
<tr>
— ushbu teg qatorga ajratish uchun ishlatiladi
<td>
— jadval qiymatlarini kiritish uchun va ajratilgan qatorlarni ustunlarga taqsimlash uchun ishlatiladi.
Bulardan tashqari
<th>
tegi ham ishlatiladi, bu tegning vazifasi jadval ustunlarining sarlavhasi uchun ishlatiladi.
Misol:
<table style="width:300px">
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>programmist</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Quyidagicha natijani ko’rishingiz mumkin:
Sardor Dushamov programmist
Eshmat Toshmatov dangasa
Hayron bo’lgandirsiz jadvalga unchalik o’xshamadi deb, tegining border atributu mavjud bo’lib, jadvalga chegara chizigini chizib beradi.
Misol:
<table style="width:300px" border="1">
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>programmist</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Endi natijani ko’radigan bo’lsak:
Sardor Dushamov programmist
Eshmat Toshmatov dangasa
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
border=”1” — 1 bu yerda chegara qalinligi, unga sanoqda ishlatiladigan sonlarni berishimiz mumkin.
Border ni css style da ham berishimiz mumkin, html da bergandan ko’ra css da style berib ketgan yaxshi.
<head>
<style>table,th,td{border:1px solid black;}</style>
</head>
Agar yuqorida ko’rsatilgandek beradigan bo’lsak, jadvalga va uning ichidagi yacheykalarga ham alohida border(chegara) beradi.Siz chegarani umumiy qilib berishni hohlasangiz quyidagicha yozishingiz kerak, yani jadvalni ichidagi borderlarni olib tashlaydi va faqat jadvalni o’zini borderini oladi:
<style>table,th,td{ border:1px solid black; border-collapse:collapse;}</style>
Misol:
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Ushbu misoldagi
border-collapse:collapse;
Qismini olib tashlab ishlatib ko’ring va farqini bilib olasiz.Jadval sarlavhalariJadvalga sarlavha berishimiz uchun yuqorida aytib o’tganimizdek tegidan foydalanamiz.
Misol:
<table style="width:300px" border="1">
<tr>
<th>Ism</th>
<th>Familya</th>
<th>Kasbi</th>
</tr>
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>dasturchi</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Ism Familya Kasbi
Sardor Dushamov dasturchi
Eshmat Toshmatov dangasa
td tegining colspan attributi.
colspan — ikkita ustunni birlashtirish uchun ishlatiladi.
Misol:
<html>
<body>
<table border="1">
<tr>
<th>Oylar</th>
<th>Harajatlar</th>
</tr>
<tr>
<td>Yanvar</td>
<td>400000 so'm</td>
</tr>
<tr>
<td>Fevral</td>
<td>600000 so'm</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Oylar Harajatlar
Yanvar 400000 so'm
Fevral 600000 so'm
Jami: 1000000 so'm
td tegining rowspan attributi.
rowspan — ikkita qatorni birlashtirish uchun ishlatiladi.
Misol:
<html>
<body>
<table border="1">
<tr>
<th>Oylar</th>
<th>Kirim</th>
<th>Chiqim</th>
</tr>
<tr>
<td>Yanvar</td>
<td>50000 so'm</td>
<td rowspan="2">100000 so'm</td>
</tr>
<tr>
<td>Fevral</td>
<td>80000 so'm</td>
</tr>
Ushbu darsimizda jadvallar bilan ishlashni o’rganib chiqamiz.
Jadvallar bilan ishlashimiz uchun biz
<table>
tegidan foydalanamiz.
Ya’ni:
<table>
<tr>
<td><td>
<td><td>
<td><td>
<tr>
<tr>
<td><td>
<td><td>
<td><td>
<tr>
<table>
Ko’rib turganingizdek
<table>
teglari bilan jadval yaratiladi va uni ichida
<tr>
va
<td>
teglarini ishlatyapti.
<tr>
— ushbu teg qatorga ajratish uchun ishlatiladi
<td>
— jadval qiymatlarini kiritish uchun va ajratilgan qatorlarni ustunlarga taqsimlash uchun ishlatiladi.
Bulardan tashqari
<th>
tegi ham ishlatiladi, bu tegning vazifasi jadval ustunlarining sarlavhasi uchun ishlatiladi.
Misol:
<table style="width:300px">
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>programmist</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Quyidagicha natijani ko’rishingiz mumkin:
Sardor Dushamov programmist
Eshmat Toshmatov dangasa
Hayron bo’lgandirsiz jadvalga unchalik o’xshamadi deb, tegining border atributu mavjud bo’lib, jadvalga chegara chizigini chizib beradi.
Misol:
<table style="width:300px" border="1">
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>programmist</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Endi natijani ko’radigan bo’lsak:
Sardor Dushamov programmist
Eshmat Toshmatov dangasa
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
border=”1” — 1 bu yerda chegara qalinligi, unga sanoqda ishlatiladigan sonlarni berishimiz mumkin.
Border ni css style da ham berishimiz mumkin, html da bergandan ko’ra css da style berib ketgan yaxshi.
<head>
<style>table,th,td{border:1px solid black;}</style>
</head>
Agar yuqorida ko’rsatilgandek beradigan bo’lsak, jadvalga va uning ichidagi yacheykalarga ham alohida border(chegara) beradi.Siz chegarani umumiy qilib berishni hohlasangiz quyidagicha yozishingiz kerak, yani jadvalni ichidagi borderlarni olib tashlaydi va faqat jadvalni o’zini borderini oladi:
<style>table,th,td{ border:1px solid black; border-collapse:collapse;}</style>
Misol:
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Ushbu misoldagi
border-collapse:collapse;
Qismini olib tashlab ishlatib ko’ring va farqini bilib olasiz.Jadval sarlavhalariJadvalga sarlavha berishimiz uchun yuqorida aytib o’tganimizdek tegidan foydalanamiz.
Misol:
<table style="width:300px" border="1">
<tr>
<th>Ism</th>
<th>Familya</th>
<th>Kasbi</th>
</tr>
<tr>
<td>Sardor</td>
<td>Dushamov</td>
<td>dasturchi</td>
</tr>
<tr>
<td>Eshmat</td>
<td>Toshmatov</td>
<td>dangasa</td>
</tr>
</table>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Ism Familya Kasbi
Sardor Dushamov dasturchi
Eshmat Toshmatov dangasa
td tegining colspan attributi.
colspan — ikkita ustunni birlashtirish uchun ishlatiladi.
Misol:
<html>
<body>
<table border="1">
<tr>
<th>Oylar</th>
<th>Harajatlar</th>
</tr>
<tr>
<td>Yanvar</td>
<td>400000 so'm</td>
</tr>
<tr>
<td>Fevral</td>
<td>600000 so'm</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Oylar Harajatlar
Yanvar 400000 so'm
Fevral 600000 so'm
Jami: 1000000 so'm
td tegining rowspan attributi.
rowspan — ikkita qatorni birlashtirish uchun ishlatiladi.
Misol:
<html>
<body>
<table border="1">
<tr>
<th>Oylar</th>
<th>Kirim</th>
<th>Chiqim</th>
</tr>
<tr>
<td>Yanvar</td>
<td>50000 so'm</td>
<td rowspan="2">100000 so'm</td>
</tr>
<tr>
<td>Fevral</td>
<td>80000 so'm</td>
</tr>
HTMLni o’rganishda davom etamiz.
Ushbu darsimizda sizlar bilan list, blocklar bilan ishlashni o’rganib chiqamiz.
Listlar (ro’yhat) HTML da juda ko’p ishlatiladi.
Listlarni biz 2 xil usulda ko’rsatishimiz mumkin.
1. Tartiblangan
2. Tartiblanmagan
Keling yuqoridagilarni o’rganib chiqamiz.
Tartiblangan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
Ol — ordered list so’zlarining bosh harfi olingan.
Misol:
<ol>
<li>Olma</li>
<li>Nok</li>
<li>Shaftoli</li>
</ol>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Olma
Nok
Shaftoli
Ko’rib turganingizdek ro’yhat tartiblangan, ya’ni 1,2,3,… Sonlar bilan tariblangan.
Demak biz tartiblangan ya’ni oddiy tilda aytadigan bo’lsak 1,2,3,4 shunga o’xshash raqamlar ketma ketligi bilan chiqarishni hohlasak ushbu teglardan foydalanamiz.
Tartiblanmagan ro’yhat.
Tartiblanmagan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
ul — “unordered list” so’zlarining bosh harfi olingan.
Misol:
<ul>
<li>Olma</li>
<li>Nok</li>
<li>Shaftoli</li>
</ul>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Olma
Nok
Shaftoli
Ko’rib turganingizdek, tartiblanmagan yani tartiblangandan farq qiladi.
Farqi shundaki 1,2,3… Ni o’rniga nuqtalar yoki shunga o’xshagan belgilarda chiqarish mumkin.
Blocklar bilan ishlash
Block nomidan ham ma’lumki web sahifaning qandaydir qismi, bloki, bo’lagi hisoblanadi.
Block elementlari ochish tegi va yopish teglari bilan ifodalanadi.
Misol uchun , ,
, , ushbu teglarni block ga misol qilish mumkin, chunki bular ochiladi va yopiladi, asosiysi qandaydir bo’laki hisoblanadi.
HTML element
Ushbu div qolgan elementlarni o’z ichiga olishi mumkin, va uni web sahifamizni bo’laklarga ajratishda foydalanamiz. Ho’sh bo’laklarga ajratish nima uchun kerak degan savol paydo bo’lishi mumkin,javob shuki, biz web sahifamizning istalgan bo’lagiga o’zimiz hohlaganchalik stil berish imkonini yaratib beradi.
Div tegi table tegiga sal o’xshaydi lekin ikkalasa bir narsa emas shuni esizda saqlang.
Keling yaxshisi bir misol ko’ramiz:
<html>
<body>
<div style="width:500px">
<div style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Web sahifa nomi</h1></div>
<div style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b>
HTML
CSS
JavaScript</div>
<div style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Web sahifa contenti</div>
<div style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © shahzodbek.ga</div>
</div>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Sardor Dushamov
Ko'rib turganingizdek, web sahifamizni har hil bo'laklarga bo'ldik div tegi yordamida.
Endi table yordamida web sahifani bo'laklarga bo'lamiz.
Misol:
Web sahifa nomi
Menu
HTML
CSS
JavaScript
Web sahifa contenti
Copyright © shahzodbek
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.comNatija:Sardor DushamovFarqini o'zingiz ko'rib turibsiz.Demak biz web sahifamizni o'zimiz hohlagandek bo'laklarga ajratmoqchi bo'lsak div tegidan foydalanamiz, table tegi bo'laklarga bo'lish uchun ishlatilmaydi, table tegi faqat jadval ko'rinishdagi ma'lumotlarni ko'rsatib berish uchun ishlatiladi.span tegi haqida ham gapirib ketishni joiz bildim.span nima uchun kerak? Oddiy qilib tushuntiradigan bo'lsam, tasavvur qiling biror matn bor, unda qaysidir so'zlar yoki gaplarni rangini yoki background rangini qolganlaridan ajralib turadigan qilmoqchisiz, ana shunaqa paytlarda span tegi ishlatiladi, yani biror textga stil berish uchun.Misol:
<html>
<body>
<p>shahzodbek.ga<span style="color:blue;font-weight:bold">satyiga</span> hush kelibsiz<span style="color:red;font-weight:bold"> Sardor Dushamov</span> eyes.</p>
</body>
</html>
Ushbu darsimizda sizlar bilan list, blocklar bilan ishlashni o’rganib chiqamiz.
Listlar (ro’yhat) HTML da juda ko’p ishlatiladi.
Listlarni biz 2 xil usulda ko’rsatishimiz mumkin.
1. Tartiblangan
2. Tartiblanmagan
Keling yuqoridagilarni o’rganib chiqamiz.
Tartiblangan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
Ol — ordered list so’zlarining bosh harfi olingan.
Misol:
<ol>
<li>Olma</li>
<li>Nok</li>
<li>Shaftoli</li>
</ol>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Olma
Nok
Shaftoli
Ko’rib turganingizdek ro’yhat tartiblangan, ya’ni 1,2,3,… Sonlar bilan tariblangan.
Demak biz tartiblangan ya’ni oddiy tilda aytadigan bo’lsak 1,2,3,4 shunga o’xshash raqamlar ketma ketligi bilan chiqarishni hohlasak ushbu teglardan foydalanamiz.
Tartiblanmagan ro’yhat.
Tartiblanmagan ro’yhat yaratishimiz uchun bizga va teglari kerak bo’ladi.
ul — “unordered list” so’zlarining bosh harfi olingan.
Misol:
<ul>
<li>Olma</li>
<li>Nok</li>
<li>Shaftoli</li>
</ul>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Olma
Nok
Shaftoli
Ko’rib turganingizdek, tartiblanmagan yani tartiblangandan farq qiladi.
Farqi shundaki 1,2,3… Ni o’rniga nuqtalar yoki shunga o’xshagan belgilarda chiqarish mumkin.
Blocklar bilan ishlash
Block nomidan ham ma’lumki web sahifaning qandaydir qismi, bloki, bo’lagi hisoblanadi.
Block elementlari ochish tegi va yopish teglari bilan ifodalanadi.
Misol uchun , ,
, , ushbu teglarni block ga misol qilish mumkin, chunki bular ochiladi va yopiladi, asosiysi qandaydir bo’laki hisoblanadi.
HTML element
Ushbu div qolgan elementlarni o’z ichiga olishi mumkin, va uni web sahifamizni bo’laklarga ajratishda foydalanamiz. Ho’sh bo’laklarga ajratish nima uchun kerak degan savol paydo bo’lishi mumkin,javob shuki, biz web sahifamizning istalgan bo’lagiga o’zimiz hohlaganchalik stil berish imkonini yaratib beradi.
Div tegi table tegiga sal o’xshaydi lekin ikkalasa bir narsa emas shuni esizda saqlang.
Keling yaxshisi bir misol ko’ramiz:
<html>
<body>
<div style="width:500px">
<div style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Web sahifa nomi</h1></div>
<div style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b>
HTML
CSS
JavaScript</div>
<div style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Web sahifa contenti</div>
<div style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © shahzodbek.ga</div>
</div>
</body>
</html>
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:
Sardor Dushamov
Ko'rib turganingizdek, web sahifamizni har hil bo'laklarga bo'ldik div tegi yordamida.
Endi table yordamida web sahifani bo'laklarga bo'lamiz.
Misol:
Web sahifa nomi
Menu
HTML
CSS
JavaScript
Web sahifa contenti
Copyright © shahzodbek
Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.comNatija:Sardor DushamovFarqini o'zingiz ko'rib turibsiz.Demak biz web sahifamizni o'zimiz hohlagandek bo'laklarga ajratmoqchi bo'lsak div tegidan foydalanamiz, table tegi bo'laklarga bo'lish uchun ishlatilmaydi, table tegi faqat jadval ko'rinishdagi ma'lumotlarni ko'rsatib berish uchun ishlatiladi.span tegi haqida ham gapirib ketishni joiz bildim.span nima uchun kerak? Oddiy qilib tushuntiradigan bo'lsam, tasavvur qiling biror matn bor, unda qaysidir so'zlar yoki gaplarni rangini yoki background rangini qolganlaridan ajralib turadigan qilmoqchisiz, ana shunaqa paytlarda span tegi ishlatiladi, yani biror textga stil berish uchun.Misol:
<html>
<body>
<p>shahzodbek.ga<span style="color:blue;font-weight:bold">satyiga</span> hush kelibsiz<span style="color:red;font-weight:bold"> Sardor Dushamov</span> eyes.</p>
</body>
</html>