JavaScript Canvas Example


Download 72.51 Kb.
bet2/2
Sana20.06.2023
Hajmi72.51 Kb.
#1635229
1   2
Bog'liq
Web Texnologiyalar Yakuniy

Salom dunyo!

Mening veb-saytim.



: Bu teglar hujjatning bosh va tana qismlarini belgilaydi. bo'limi sahifaning sarlavhasi, metama'lumotlari va uslublar jadvallari kabi boshqa elementlarni o'z ichiga oladi, bo'limi esa sahifaning ko'rsatilgan mazmunini o'z ichiga oladi.
Shuningdek, tegi sahifaning sarlavhasini belgilaydi va <h2> va <br />kabi boshqa teglar sahifaning haqiqiy mazmunini tavsiflaydi. <br />Ushbu asosiy struktura HTML hujjatining eng oddiy shakli hisoblanadi. Biroq, sahifaning dizayni va funksionalligini yaxshilash uchun ko'plab boshqa teglar va xususiyatlardan foydalanish mumkin. Misol uchun, CSS-dan foydalanib, sahifa ko'rinishini sozlashingiz mumkin. JavaScript-dan foydalanib sahifaga interaktiv xususiyatlarni qo'shishingiz mumkin. <br /> <br /> <br /><table width="755" cellpadding="7" cellspacing="0"> <col width="739"> <tr> <td width="739" valign="top"> <br /><span>53.</span><span> </span>HTML da konteyner teglar <br /></td> </tr> <tr> <td width="739" valign="top"> <br />HTMLda konteyner teglari veb-sahifadagi tarkibni guruhlash va tartibga solish uchun ishlatiladi. Bu teglarga quyidagilar kiradi: <br />1. <div> yorlig'i: Bu umumiy konteyner tegi bo'lib, u bilan bog'liq kontentni guruhlash uchun ishlatiladi. Bu sukut bo'yicha hech qanday maxsus ma'no yoki uslubga ega emas. <br />2. tegi: Bu teg kichik hajmdagi matn yoki satr tarkibini birga guruhlash uchun ishlatiladi. U ko'pincha jumla yoki paragrafning muayyan qismlariga uslub yoki formatlashni qo'llash uchun ishlatiladi. <br />3. <bo'lim> tegi: Bu teg bir-biriga bog'liq bo'lgan tarkibni guruhlash va mazmunga semantik ma'no berish uchun ishlatiladi. Ko'pincha veb-sahifani turli bo'limlarga bo'lish uchun ishlatiladi. <br />4. <article> yorlig'i: Bu teg blog posti yoki yangiliklar maqolasi kabi o'z-o'zidan tarkib topgan bo'lakni guruhlash uchun ishlatiladi. <br />5. <header> tegi: <a href="/bu-teg-html-da-jadvallar-yaratish-va-ularga-malumotlar-kiritis.html">Bu teg odatda logotip</a>, navigatsiya menyusi va boshqa kirish mazmunini o'z ichiga olgan veb-sahifa yoki bo'limning sarlavha qismini aniqlash uchun ishlatiladi. <br />6. <footer> yorlig'i: Bu teg odatda mualliflik huquqi ma'lumotlari, aloqa ma'lumotlari va boshqa yakunlovchi tarkibni o'z ichiga olgan veb-sahifa yoki bo'limning altbilgi qismini aniqlash uchun ishlatiladi. <br />7. <nav> tegi: Bu teg veb-sahifadagi navigatsiya menyusini aniqlash uchun ishlatiladi. <br />Ushbu teglar HTML-da mavjud bo'lgan konteyner teglarining bir nechta misolidir. Ular veb-sahifadagi tarkibni tuzish va tartibga solishda yordam berish uchun ishlatiladi, bu ham foydalanuvchilar, ham qidiruv tizimlari uchun o'qish va tushunishni osonlashtiradi. <br /></td> </tr> </table> <br /> <br /><table width="755" cellpadding="7" cellspacing="0"> <col width="739"> <tr> <td width="739" valign="top"> <br /><span><span>54.</span><span> </span>HTMLning asosiy teglari <br /></td> </tr> <tr> <td width="739" valign="top"> <br />HTML, yoki HyperText Markup Language, veb sahifalarini yaratish uchun ishlatiladigan standart belgidir. HTML fayllarida matn, rasmlar, <a href="/7-laboratoriya-ishi-v18.html">videolar</a>, audio va boshqa media turlari uchun belgilar yoziladi va ular brauzerlar tomonidan o'qiladi va veb sahifalarni tuzishda foydalaniladi. <br />HTML asosiy teglari quyidagilardir: <br />- : HTML faylida birinchi qator bo'ladi va faylning HTML5 versiyasini aniqlaydi. <br />- <html></html>: HTML dokumentining boshqa qismlarini o'z ichiga oladi. <br />- <head></head>: HTML sahifasining sarlavhasini va uning meta ma'lumotlarini o'z ichiga oladi. <br />- <title>: HTML sahifasining sarlavhasini belgilaydi.
- tegining atributlari

HTMLda tegi veb-sahifaning asosiy mazmunini belgilaydi. Bu tegning boshlanish va tugash nuqtalari bor va teg ichidagi barcha boshqa HTML teglar sahifaning asosiy mazmuni sifatida ko'rsatiladi.
tegidan ba'zi atributlarni (atributlarni) aniqlash uchun foydalanish mumkin. Ba'zi xususiyatlar:
- bgcolor : Sahifaning fon rangini o'rnatadi. Masalan, tegi oq fon rangini belgilaydi.
- text : Sahifadagi matn rangini o'rnatadi. Masalan, tegi qora matn rangini belgilaydi.
- link : Sahifadagi havolalar rangini o'rnatadi. Masalan, tegi ko'k havola rangini bildiradi.
- vlink : Sahifada tashrif buyurilgan havolalar rangini o'rnatadi. Masalan, tegi tashrif buyurilgan havolaning binafsha rangini o'rnatadi.
- background : Sahifaning fon tasvirini o'rnatadi.
Masalan, tegi sahifaning fon tasviri sifatida "background.jpg" nomli rasm faylini belgilaydi.
Bu atributlardan tegidagi boshqa HTML teglar bilan foydalanish mumkin. Masalan, tegi oq fon rangini va qora matn rangini belgilaydi.



57. Web-sahifada sarlavhalarni aks ettirish

Veb-sahifada sarlavha yorlig'i sahifaning sarlavhasini belgilaydi va brauzer yorlig'i nomi va qidiruv natijalarida ko'rsatiladi. Sarlavha yorlig'i tegi ichida joylashgan va eng muhim SEO (qidiruv tizimini optimallashtirish) elementlaridan biridir.
Sahifaning asosiy mavzusini eng yaxshi aks ettiruvchi kalit so'zlar sarlavha tegi ichiga joylashtirilishi kerak. Shuningdek, foydalanuvchilarning e'tiborini jalb qilish uchun sarlavha tegidan foydalanish mumkin.
Masalan, siz sarlavhani tegi ichidagi tegidan foydalanib belgilashingiz mumkin: <br /><head> <br /><title>Veb-sahifa nomi

Bu brauzer yorlig'i nomida "Veb-sahifa sarlavhasi" sifatida ko'rsatiladi. U qidiruv natijalarida ham ko'rsatiladi.
Sarlavha yorlig'i SEO uchun juda muhim, shuning uchun kalit so'zlaringizni kiritish va 70 belgidan oshmasligi tavsiya etiladi. Sarlavhangizni qisqa, ixcham va original saqlash foydalanuvchilarni jalb qilish va qidiruv tizimlarida yuqori o'rinlarni egallash uchun muhimdir.



57. Web-sahifada ro’yxatlarni aks ettirish

Web-sahifada ro'yxatlarni aks ettirish uchun bir nechta usullar mavjud.
1. **HTML listalar**: HTML-da ul (unordered list) va ol (ordered list) taglari orqali ro'yxatlar yaratish mumkin. Ularning har biri li (list item) taglari orqali boshqariladi. Misol uchun:

  • Element 1

  • Element 2

  • Element 3


2. **CSS grid**: CSS grid orqali ham ro'yxatlar yaratish mumkin. Misol uchun:

Element 1

Element 2

Element 3


CSS-da esa:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
3. **Flexbox**: Flexbox orqali ham ro'yxatlar yaratish mumkin. Misol uchun:

Element 1

Element 2

Element 3


CSS-da esa:
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
Bu usullar orqali ro'yxatlar yaratishingiz mumkin. Shuningdek, JavaScript yordamida ham ro'yxatlar yaratish mumkin.



59. Web sahifada nomerlangan ro'yxatlarni aks ettirish

Web-sahifada nomerlangan ro'yxatlarni aks ettirish uchun HTML-da ul (unordered list) tagini ishlatish kerak. ol (ordered list) tagi esa raqamlangan ro'yxatlarni aks ettirish uchun ishlatiladi. Har bir ro'yxat elementi li (list item) tagi orqali yaratiladi. Misol uchun:

  • Birinchi element

  • Ikkinchi element

  • Uchinchi element



  1. Birinchi element

  2. Ikkinchi element

  3. Uchinchi element


Bu kodlar birinchi misolda nomerlangan ro'yxatni, ikkinchida esa raqamlangan ro'yxatni aks ettiradi. Siz kerakli stilni CSS yordamida qo'shishingiz mumkin. Misol uchun, quyidagi CSS kodlari ro'yxatlarning ustiga qizil rangli raqamlar qo'shadi:
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) ".";
counter-increment: item;
width: 2em;
em;
font-weight: bold;
color: red;
}
Bu CSS kodlari nomerlangan ro'yxatga qizil rangli raqamlar qo'shadi. Raqamlar joylarini o'zgartirish uchun CSS kodlarini o'zgartirishingiz mumkin.



60. Teglаr deb nimаgа аytilаdi

HTML TEG: Bu HTML hujjatdagi turli elementlarni (matn, tasvir va boshqalar) web sahifada qanday ko'rinishda aks etirish lozimligini brauserga ko'rsatuvchi komandalar. Teglar malum o'lcham va vasifani bajaruvchi komandalardir. Teg quyidagi ko'rinishda bo'ladi: hujjat elementi Ko'rib turgasningizdek teglar '<>' uchburchaksimon qo'shtirnoq ichiga olib yoziladi. Uchbur-chaksimon qo'shtirnoq ichiga Teg nomi va uning o'lchamlari yoziladi.



61. Sаrlаvха vа аbzаtslаrni fоrmаtlаshtirish qаndаy bаjаrilаdi

HTML tilida matnni tasvirlashning bir qancha usullari mavjud. Brauzer ekranida matn satrini tasvirlash uchun hech qanday teg ishlatishga hojat yo’q. Matnni yozish kifoya. Lekin uni hattoki abzatsga bo’lish ham teglarsiz amalga oshmaydi. Har xil kompyuter tizimlarida matnlarni abzatsga bo’lish uchun har xil simvollar ishlatiladi, lekin HTML hujjati kompyuter tizimi qanday bo’lishidan qa'tiy nazar bir xil tasvirlanishi lozim va shuning uchun abzatsni ifodalovchi teg kiritilishiga to’g’ri kelgan. Har bir abzats boshida
tegi qo’yiladi, oxirida esa yopiluvchi
tegi qo’yiladi. Bu teg o’z parametrlariga ega. Bu parametrlar qatoriga identifikatsiya parametrlari class va id, shaklli bezash parametri style va tekislash (tenglash) parmetri align kiradi.
Abzatsni brauzer oynasining o’ng yoki chap tomoniga tekislash, markazlashtirish yoki to’la eniga yoyib yozish uchun ularga mos ravishda left, right, center va justify qiymatlari ishlatiladi. Bularning qo’llanilishini quyidagi misolda ko’ramiz:


Abzatslarni gorizontal tanlash

chap tomonga tekislagan abzats


o’ng tomonga tekislangan abzats


markazlashtirilgan abzats


eni bo’yicha yoyib yozilgan abzats




- Ba‘zi murojaatlar matnining rangi ba‘zan qolganlarnikidan ozgina bo‘lsada farq qiladi. Bu mazkur murojaatning foydalanuvchi tomondan aktivlashtirilganligini anglatadi. Tashrif buyuruvchi boxabar bo‘lgan (visited Link) ссылкпн rangini VLINK kalit so‘zi bilan o‘zgartirish mumkin. SHu usul bilan ссылкн rangini ochiq kul rang qilish mumkin.

-Siz yana o‘zgartiraoladigan rang - bu sichqonchani chiqillatilgach paydo bo‘ladigan ссылкн matni rangidir. Aktiv ссылкн rangi (Active Link) ALINK kalit so‘zi orqali beriladi. Agar sizning sahifangizda kimdir ishtirok etgan bo‘lsa, u holda ссылкн matni LINK so‘zi bilan beriladigan ranga aylanadi. Agar unda sichqoncha chiqillasa, u holda qisqa vaqt ichida ALINK so‘zi bilan beriladigan ranga ega bo‘ladi. Shu usulda ishimizni davom ettirib aktiv ссылкн matni rangini och sariqqa aylantiramiz:
ALINK = YELLOW>



64. Gipermurojaatning qanday turlarini bilasiz

Gipermatn xujjat - bu boshqa xujjatlarga o‘tish uchun aloqa bog‘lovchi murojaatni o‘zida saqlaydigan xujjat[12,14]. U sichqoncha tugmasini bosish orqali bir xujjatdan ikkinchi xujjatga tezlik bilan o‘tishni ta‘minlaydi. Bunday aloqalarni zamonaviy maxsulotlar dasturlari fayllarida ko‘plab uchratish mumkin.
Gipermatnga asos qilib ko‘p maqolalarida boshqasiga murojaat qiladigan entsiklopedik slovarlarni tashkil etish printsipi olingan. Web - sahifalarga joylashtirish mumkin bo‘lgan ko‘plab multimedia ob‘ektlari mavjud. Zamonaviy gipermatn xujjatlarda matnning o‘ziga qo‘shimcha qilib ko‘pincha xar xil grafika, video va audio ob‘ektlardan foydalaniladi. Aloqa sifatida esa tasvir ishlatiladi.
Gipermurojaat ushbu HTML - hujjatning biror elementi bilan boshqa web - sahifa yoki biror mustaqil ob‘ekt o‘rtasida aloqa o‘rnatish uchun ishlatiladi. Gipermurojaat sifatida matn yoki grafik elementlardan foydalanish mumkin. Umumiy qoidaga asosan matnli gipermurojaat sahifada tagiga chizilgan rangli yozuvli qator
ko‘rinishida bo‘ladi.
Matnli gipermurojaatlarni to‘rtta kategoriyaga bo‘lish mumkin:
- Boshqa sayt - hujjatlariga murojaat;
- sahifa bo‘limlariga murojaat;
- elektron pochta manziliga(adresiga) murojaat;
- fayl - ob ‘ ektlarga muroj aat;
Boshqa web - sahifani chaqiruvchi oddiy gipermurojaatni HTML - hujjatda tegi yordamida amalga oshirish mumkin, uning sintaksisi quyidagi ko‘rinishga:
Gipermurojaat matni.




65. Web-sahifada jadvallarni aks ettirish

Jadvallar HTML da keng miqyosda qo‘llaniladigan va eng kuchli vositalardan biri hisoblanadi. Jadvallar ma‘lumotlarni ifodalash bilan birga web-sahifani rasmiylashtirish elementi sifatida ham ishlatilmoqda. Jadvallar tufayli matn fragmentlari va grafiklarning pozitsion o‘rnini aniq almashtirishni, bezash elementlarini xuddi bosma nashrdagidek bajarish mumkin.
HTML dasturiy tilida jadvallarni tuzish uchun tegidan foydalaniladi. Uning yozilish sintaksisi quyidagicha:
CELLSPACING="butun son" CELLPADDING=''butun son"
BORDERCOLOR=”ramka rangi” BACKGROUND= “{fonli rasm adresi}”
FRAME= “none/above/belon/hsides/lhs/rhs/vsides/vsides/bat”
RULES= —none/roms/cols/ale” >

ROWSPAN="butun son" NEIGNT="butun son" NOWRAP>Yacheyka ichidagi ifoda

Bu yerda ALIGN atributi jadvalni gorizont bo‘yicha joylashgan pozitsiyasini ko‘rsatadi va LEFT (chap tomon bo‘yicha), RIGHT (o‘ng tomon bo‘yicha) yoki CENTER (markaz bo‘yicha) qiymatlariga ega bo‘lishi mumkin. WIDTH atributi jadvalning umumiy kengligini ko‘rsatadi. Agar jadvalning kengligi pikselda ifodalansa, qiymat sifatida butun son qabul qiladi.



66. Elementlari bir necha qator yoki ustunni egallaydiganjadvallarni websahifada aks ettirish

Elementlari bir necha qator yoki ustunni egallaydigan jadvallarga yana bir misol to be fe‘lining turlanishi :

Bir necha qator yoki ustunni egallaydiganjadvallar













to be fe‘lining turlanishi :
 
to be: fe‘lining qiymati
I am
You are
We
They
He is
She
It


Ism:

Email:






JavaScript Example





Bu HTML - hujjat.


VA yana HTML - hujjat.

Download 72.51 Kb.

Do'stlaringiz bilan baham:
1   2



Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling