10-Amaliy mashg’ulot
Web-hujjatlarni yaratishning on-line va off-line vositalari bilan ishlash
Ishning maqsadi: Web-hujjatlarni yaratishning on-line va off-line vositalari bilan ishlash
bo’yicha bilim va ko’nikmaga ega bo’lish.
Nazariy ma’lumotlar: HTML - Hyper Text Markup Language – Gipermatnni Belgilash Tili.
Belgilash tili bu programmalashtirish tili emas. Biz HTML tilini rangli qalamlar to'plamiga
o'xshatishimiz mumkin. Ushbu qalamlar yordamida biz qog'ozdagi oddiy matnni belgilab
chiqishimiz mumkin. HTML tili yordamida biz xuddi shunday matnli bloklardan, rasmlardan,
tovushlardan va boshqalardan tashkil topkan gipermatnni belgilashimiz mumkin. Belgilash
tilining programmalashtirish farqi nimada? Noto'g'ri yozilgan programmadan farqli o'laroq, siz
biror-bir satrda xato qilsangiz sizning sahifangiz baribir “ishlaydi”. Siz qilgan xatolarning aksi
Web-sahifangizning tashqi ko'rinishida namoyon bo'ladi. HTMLda siz programma (yoki skript)
yoza olmaysiz, shuning uchun ko'p kishilar bu tilni to'liq emas deb hisoblaydi. HTMLda mavjud
to'siqlar va kamchiliklarni engish maqsadidi mutaxassislar tomonidan bir necha yordamchi tillar
yaratildi, jumladan, Javascript, Visual Basic Script. Oxirgi paytlarda talab gipermatnni dinamik
belgilash tiliga ya'ni DHTML (Dynamic HTML)ga oshib bormoqda.
Web –sahifalarni yaratish uchun qanday dasturlar ishlatiladi?
Har qanday matnli tahrir, hattoki Bloknot (NOTEPAD) dasturi to'g'ri keladi. Albatta, agar
maxsus Web -sahifalarni yaratadigan dasturlar bo'lsa, ishlash ancha qo'lay bo'ladi. Bunday
dasturlarga Macromedia Dreamweaver, Microsoft FrontPage, Namo Web Editor, oddiy Microsoft
Word va boshqalarni kiritishimiz mumkin. Bizning kursimizda biz oddiy Notepad dasturini
ishlatgan holda effektiv Web -sahifalarni yaratishni ko'ramiz. Bu sizga Web -sahifa yaratish
asoslarini o'rganishga imkon beradi.
Samarali Web -sahifa tuzish uchun quyidagi uch savollarga javob berish lozim:
Web -sahifangiz orqali siz nimani izhor qilmoqchisiz?
Nima uchun sizning ma'lumotingiz zarur?
Xabaringizning natijasida odamlar nima qilishini xoxlaysiz?
Endi esa bevosita “Bloknot” (NOTEPAD)dan foydalangan holda veb-sahifalarni
yaratishga o'tamiz.
<html> </html>
<head> </head>
<title> </title>
<body> </body>
Izoh: “/” belgisi programmaning u yoki bu qismini yopadi.
Shunday qilib, veb-sahifani yaratish uchun kamida quyidagilarni yozish kerak:
<html>
<head>
<title> Sahifaning nomi </title>
</head>
<body>
Bu mening birinchi Web sahifam !!!
</body>
</html>
Programmani yozib bo'lganingizdan so'ng faylni ‘html’ yoki ‘htm’ kengaytmasida saqlashingiz
lozim (Masalan: index.html yoki index.htm).
Siz matnli ma'lumotga ega bo'lgan HTML sahifalarini yaratishni bilar ekansiz, endi siz
qanday qilib barcha ma'lumotni tartibga keltirishni o'rganishingiz kerak. Birinchidan, siz
ko'rganingizdek, Web -sahifangizdagi matn paragraflarga bo'lingan bo'lsa, brauzerda u tekis
matndan iborat bo'ladi va qancha bo'sh joy yoki satrlar qoldirmang ular hech qanday natijaga ega
bo'lmaydi. Buning ustiga matnningiz chap tomonda tekislangan bo'ladi. Ushbu muammolar
osonlikcha echilishi mumkin.
Matnni formatlash uchun quyidagi buyruqlardan foydalanish mumkin:
<center> … </center> ushbu teglar orasida yozilgan matn o'rtaga tushadi.
<p> teg yangi jumla yaratadi. Ushbu paragrafda siz har qanday ma'lumotni
joylashtira olasiz (matn, rasm va boshqalar).
<br> ushbu teg yangi sahifaga o'tish uchun ishlatiladi. E'tibor qiling, ushbu tegga
yopadigan teg kerak emas.
<hr> gorizontal chiziq chizadi.
<b>…</b> matnni qalinlashtiradi.
<i>…</i> matnni burchak ostiga oladi.
<u>…</u> matnning tagiga chiziq chizadi.
<blockquote> chap tomondan interval qoldiradi. </blockquote>
<font> … </font> ushbu teglar orasida joylashgan atributlar matnning tashqi
ko'rinishini o'zgartiradi.
Masalan:
<font size=7 face=Arial color=red> sizning matn </font>
SIZE atributi shrift kattaligini o'zgartirish uchun qo'llaniladi. Matn kattaligi 1dan 7gacha
qiymatlarni qabul qilishi mumkin. FACE atributi shrift turini o'zgartirish uchun qo'llaniladi.
COLOR atributi matnning rangini o'zgartirish uchun qo'llaniladi.
<marquee direction=right(left) scrollamount=‘??’ scrolldelay=‘??’ loop=“infinite”>
yuguradigan satr yaratadi </marquee>
‘?’ belgisi bitta simvolni bildiradi.
Web -sahifaning orqa foni. BGCOLOR va BACKGROUND
BGCOLOR – ushbu atribut Web -sahifangizning orqa fonini o'zgartiradi. Ushbu
atribut 16-richli kod yoki rang nomi ko'rsatkichiga ega bo'lishi kerak.
Keng ishlatiladigan ranglar: BLACK, WHITE, GREEN, YELLOW, BLUE, RED,
ORANGE, GRAY, SILVER, LIME, AQUA, FUCHSIA, PURPLE, MAROON, OLIVE, NAVY
va TEAL.
BACKGROUND – ushbu atribut yordamida siz orqa fonga rasm quyishingiz
mumkin.
Masalan:
<body bgcolor=yellow> yoki <body background=image1.jpg>
BACKGROUND atributini ishlatishda orqa fonga quyilishi kerak bo'lgan rasm web-sahifangiz
papkasida joylashgan bo'lishi kerak. Agar siz rasmni o'tkazishni yoki nusxa olishni istamasangiz,
unda rasm joylashgan manzilining to'liq nomini ko'rsatishingiz lozim. Agar rasmingiz bir necha
pog'ona yuqorida joylashgan bo'lsa, unda “../” belgisini ishlatgan holda (har bir belgi bir pog'onani
bildiradi) fayl manzilini ko'rsatish mumkin. Masalan, mening rasmim (rasm.jpg) asosiy websahifam papkasidan 2 pog'ona yuqorida joylashgan. Rasmga yo'lni quyidagicha ko'rsatish
mumkin: <body background=../../rasm.jpg>
Rasm va animatsiyalarni qo'yish
Siz o'zingizning web-sahifalaringizga har qanday *.gif yoki *.jpg formatidagi rasm yoki
animatsiyalarini qo'yishingiz mumkin. Rasmingiz hajmi jihatidan qanchalik kichik bo'lsa,
shunchalik yaxshi, chunki foydalanuvchilar rasmning uzoq vaqt paydo bo'lishini yoqtirishmaydi.
web-sahifangizga rasm qo'yish uchun quyidagi tegni ishlating:
<IMG SRC = ‘???????.???’>.
Masalan, <img src = ‘rasm.jpg’>.
WIDTH va HEIGHT atributlari orqali siz rasmingizni vertial yoki gorizontal
cho'zishingiz mumkin. Rasm chegarasining (ramkasining) qalinligini o'zgartirish uchun
BORDER atributidan foydalanishingiz mumkin. ALT atributi esa rasmga izoh chiqaradi.
Masalan: ALT="Oliy majlis binosi". Izoh paydo bo'lishi uchun foydalanuvchi kursorni
rasm ustiga olib borishi kerak. Agar rasmda izoh mavjud bo'lsa, unda foydalanuvchi
rasmning ekranga chiqishini qarab o'tirishi shart emas. Ushbu atribut grafikli menyu
yaratishda juda yordam berishi mumkin.
Yuqorida ko'rsatilgan barcha teglar <body> … </body> orasida yoziladi.
HTMLda jadvallar (tablisalar) nafaqat ma'lumotlarni tartib bilan chiqarish uchun, balki websahifaning mavjud ma'lumotlarini tartib bilan joylashtirish uchun xizmat qiladi. Ma'lumotlarni
jadvallar ko'rinishida taqdim qilish juda qulay. Ushbu bobda siz HTMLda qanday qilib jadval
yaratishni ko'rib chiqasiz. Sizga ma'lumki, har qanday jadval USTUN va SATRlardan iborat
bo'ladi. Jadval yaratishning asosi sifatida <TABLE> tegi xizmat qiladi. Bu teg <HTML> tegiga
o'xshab ketadi. <HTML> tegi dokumentni ochsa, <TABLE> tegi o'sha dokumentda jadvalni
ochadi. <TABLE> tegidan tashqari FRAME (ramkalar) tegi ishlatilishi mumkin, lekin FRAME
uslubi biroz eskirgan va noqulay.
Sizga ma'lumki, <TABLE> tegi <body> … </body> orasida qo'llaniladi va
quyidagi ko'rinishga ega:
<table>
.
.
.
</table>
Joriy dokumentda jadvalni ochadi va yopadi.
<TABLE> va </TABLE> orasida joylashgan barsha narsa jadval bo'lib hisoblanadi va shuning
uchun satr va ustunlarga bo'linishi kerak.
<TR> va </TR> yangi satrni yaratadi. Qancha <TR> va </TR> qo'llansa, shuncha satr
yaratiladi.
<TR> - yangi satrni ochadigan teg.
</TR> - satrni yopadigan teg.
Har bir satr yacheykalarga bo'linishi kerak va natijada ular ustunlarni hosil qiladi. Ustunlarning
soni har bir qatorda mos bo'lishi kerak.
<TD> va </TD> joriy satrda yangi yacheyka yaratadi.
<TD> - joriy satrda yangi yacheyka ochadigan teg.
</TD> - yacheykani yopadigan teg.
Энди, жадвалларнинг яратилишига ҳам ўтсак бўлади. Қуйида кўрсатилган натижага
еришиш учун камида қуйидаги кодни ёзиш лозим:
<table border=1>
<tr>
<td>Т/Р</td>
<td>Исми</td>
<td>Туғилган йили</td>
</tr>
<tr>
<td>1<br>2<br>3<br></td>
<td>Aзиз<br>Фаррух<br>Жасур</td>
<td>1987<br>1982<br>1981</td>
</tr>
</table>
Ушбу кодни саҳифангизга жойлаштирсангиз биз қуйидаги жадвалга ега бўламиз:
Т/Р Исми
1
2
3
Тугилган
йили
Aзиз
1987
Фаррух 1982
Жасур 1981
<TABLE> теги, бошқа баъзи теглар сингари, ўзининг атрибутларига ега. Қуйидаги
атрибутлар <body ….> ичида қўлланилади:
LEFTMARGIN – Aгар web-саҳифангизда жадвал қўлланилган бўлса, унда ушбу
функсия жадвалнинг чап томонида бўш жой қолдириш ёки қолдирмасликни белгилайди.
RIGHTMARGIN – Ушбу функсия, юқоридаги сингари, жадвалнинг ўнг томонда
бўш жой қолдириш ёки қолдирмасликни белгилайди.
BOTTOMMARGIN – Ушбу функсия жадвалнинг пастки қисмида бўш жой
қолдириш ёки қолдирмасликни белгилайди.
TOPMARGIN – Ушбу функсия жадвалнинг юқори қисмида бўш жой қолдириш ёки
қолдирмасликни белгилайди.
Масалан:
<body leftmargin = 0 rightmargin = 0 bottommargin = 0 topmargin = 0>
Қуйидаги атрибутлар <table … > ичида қўлланилади:
BORDER – ушбу атрибут жадвал чегарасининг қалинлигини ўзгартириш учун
қўлланилади. Унинг қиймати бутун сон бўлиши керак.
BORDERCOLOR – жадвал рамкасининг рангини ўзгартириш учун қўлланилади.
Сизга маълум бўлган ранглардан ташқари ҳар ҳил комбинациялар ишлатиш мумкин.
Ранглар комбинатсияларини ишлатиш учун “#” белгиси ва 00, 33, 66, 99, CC, FF лардан
ташкил топган 6та символли комбинатсиялари қўлланилиши мумкин. Масалан: “#FF3300”,
“#CC87F3” ва ҳоказо.
CELLSPACING – ячейкалар орасида бушлиқ кенглигини аниқлайди (пикселларда).
Унинг қиймати асл ҳолида 2 пикселга тенг.
CELLPADDING – ячейкаларда мавжуд маълумот ва унинг чегараси орасидаги бўшлиқ
кенглигини аниқлайди (пикселларда). Ушбу тегни ишлатган ҳолда жадвалнинг ички
майдонларини яратиш мумкин.
Масалан:
border = 1 ёки border = 1 px
Cellspacing = 5 ёки 5 px
Cellpadding = 5 ёки 5 px
0 қийматини ишлатиб бўшлиқни олиб ташлаш мумкин.
Қуйидаги атрибутлар <td … > ишида қўлланилади:
ROWSPAN – жадвалнинг горизонтал чизиқларини олиб ташлаш учун қўлланилади
(қуйи ячейка билан бирлашади).
COLSPAN – жадвалнинг вертикал чизиқларини олиб ташлаш учун қўлланилади
(олдидаги ячейка билан бирлашади).
ALIGN – жадвалдаги / сатрдаги / ячейкадаги мавжуд маълумотнинг жойланишини
ўзгартиради.
VALIGN – жадвалдаги / сатрдаги / ячейкадаги мавжуд маълумотнинг жойланишини
вертикал бўйича ўзгартиради.
Масалан:
<td rowspan=3> 2та вертикал чизиқ учирилади ва 3та горизонтал ячейкалар
бирлашади.
<td colspan=2> 1та горизонтал чизиқ учирилади ва 2та вертикал ячейка бирлашади.
<td valign=‘top’ align=‘left’>
Қуйидаги атрибутлар <td>, <table> ва <tr> ичида қўлланилади:
WIDTH – жадвал сатрининг кенглигини ўзгартириш учун қўлланилади.
HEIGHT – жадвал сатрининг баландлигини ўзгартириш учун қўлланилади.
WIDTH ва HEIGHTнинг қийматларини 2 кўринишда кўрсатиш мумкин: пикселларда
(масалан: width=500 ёки width=500 px) ёки фоизларда екран кенглигига нисбатан (масалан:
width=90%).
FRAME ва RULES ишлатилиши.
Жадвалнинг ички рамкаларини ўзгартиришда қўшимча равишда FRAME ва
RULESдан фойдаланишимиз мумкин. Масалан: <table frame = “void” rules = “rows” border
= “2”>
ФУНКЦИЯ
VOID
ABOVE
BELOW
LHS
НAТИЖAСИ
Рамкасиз жадвал
Жадвалнинг юқоридаги чизиғи олиб ташланади
Жадвалнинг пастдаги чизиғи олиб ташланади
Жадвалнинг чап томондаги чизиғи олиб ташланади
RHS
Жадвалнинг ўнг томондаги чизиғи олиб ташланади
HSIDES
Жадвалнинг юқоридаги ва пастдаги чириқлари олиб
ташланади
VSIDES
Жадвалнинг ўнг ва чап томондаги чизиқлари олиб ташланади
BOX
Жадвал атрофидаги чизиқлари кўринади
Қуйида кўрсатилган саҳифага ўхшаш веб-саҳифа тузинг. Ўтган мавзулар
бўйича тўплаган билимларингизни қўлланг.
990000
Кул ранг
кук
table
border
Яшил
Зайтун ранг(Olive)
Рўйхатлар билан ишлаш. LIST тушунчаси.
HTMLда рўйхатлар контейнердан ва рўйхат елементининг стандарт тегидан иборат.
(HTMLда ҳар қандай рўйхатнинг ҳамма елементлари <LI> теги орқали белгиланади).
Рўйхатга тегишли маълумот контейнернинг очадиган ва ёпадиган теглари орасида
жойлаштирилади.
Маркирланган рўйхат учун хизмат қиладиган контейнер теглари <UL>...</UL>
бўлиб ҳисобланади. Номерланган (тартиб билан рақамланган), рўйхат учун хизмат
қиладиган контейнер еса <OL>...</OL> бўлиб ҳисобланади. Рўйхатнинг ҳар бир елементи
олдидан <LI> (инглиз тилидан List Item – рўйхат елементи) теги туриши керак. Эътибор
қилинг, <LI> тегини ёпиш шарт емас. Бундан ташқари ҳар бир рўйхат елементидан сўнг
браузер автоматик равишда рўйхатнинг янги қаторига кўчади. Шунинг учун ҳар бир рўйхат
елементи охирига <BR> деб ёзиш керак емас. Рўйхатнинг сарлавҳасини <LH> (инглиз
тилида List Head – Рўйхат боши) теги ишлатиб кўрсатиш мумкин. Қуйидаги схемада
рўйхатни яратишда кодлар тузилиши кўрсатилган:
<UL>
<LH>
<LI>
<LI>
<LI>
…
Маркерланган
ро`йхат
<LH>
<LI>
<LI>
<LI>
…
Номерланган ро`йхат
</UL>
<OL>
</OL>
Бундан ташқари маркер типи ва тартиб рақамини ўзгартириш учун <UL> ва <OL>
ичида TYPE кодини ишлатиш мумкин.
<UL> тегида қуйидаги атрибутларни ишлатиш мумкин:
<ul type = “disc”>
<ul type = “square”>
o <ul type = “circle”>
<ol> теги ичида қуйидаги атрибутларни қўллаш мумкин:
Изоҳ: <ol> теги билан START функсиясини қўллаш мумкин:
5
<ol start = “5”>
A
<ol type = “A”>
a
<ol type = “a”>
I
<ol type = “I”>
i
<ol type = “i”>
1
<ol type = “1”>
VII<ol type = “I” start = “7”>
5, 6, 7, …
A, B, C, …
a, b, c, …
I, II, III, …
i, ii, iii, …
1, 2, 3, …
VII, VIII, IX, …
Масалан:
<ul type = “circle”>
<lh> TEKSTI
<li> tekst1
<li> tekst2
<li> tekst3
</ul>
Натижаси қуйидагича
булади:
TEKSTI
o tekst1
o tekst2
o tekst3
Натижаси қуйидагича
булади:
Масалан:
<ol type = “a” start = “ 4”>
<li> tekst1
<li> tekst2
<li> tekst3
</ol>
d. tekst1
e. tekst2
f. tekst3
Вазифа-3
VAZIFA № 3
Қуйида кўрсатилган саҳифага ўхшаш web-саҳифа тузинг.
Кўк
Қизил
Яшил
Оқ
Оқ
Оч-қизил
(pink)
HTMLда формалар -саҳифанинг энг динамик қисми бўлиб ҳисобланади (албатта DHTML,
JavaScript ва шу кабиларни ҳисобга олмаганда). Формалар кўпинча маълумотларни
скриптга юбориш учун ишлатилади. Скрипт еса, ўз навбатида, бу маълумотларни қайта
ишлаб, натижаларни чиқариб беради.
TUGMA
Формалар рўйхатларга ухшаб, таркибига ега бўлган контейнердан иборат бўлади.
Бироқ бу ерда контейнер ролини <FORM> ... </FORM> уйнайди, яъни <FORM> тегидан
форма бошланади ва </FORM> тегида форма тугайди.
HTMLда FORM объектлари қуйидаги йўл билан киритилади:
<form method = post/get action = ‘???????.php’>
<input type = ??????? value= “????”>
</form>
Маълумотларни юборишнинг 2 усули мавжуд. Булар POST ва GET. Улар ўртасидаги
асосий фарқи шундан иборатки, GET орқали жўнатиладиган маълумот адрес сатрида
кўринади (шу жумладан пароллар ҳам). POST усулида эса ҳэч қандай маълумотлар
кўрсатилмайди.
Формаларни юқорида қайд қилинган усулларсиз қўллаш мумкин. Ушбу курсда биз
жўнатиш усулларини ишлатмаган ҳолда формаларни кўриб чиқамиз, яъни <form> …
</form>
Формаларнинг қуйидаги кўринишлари мавжуд:
TEXTFIELD – оддий матн майдони
Кўриниши:
Формати: <input type = text name = ‘ҳар қандай қиймат’>
TEXTAREA – катта матн майдони
большое текстовое п
<TEXTAREA>
Кўриниши:
Формати: <textarea rows = 10 cols = 20> ... </textarea> бунда ROWS
= ҳар қандай сон – майдоннинг баландлигини белгилайди.
COLS = ҳар қандай сон – майдоннинг кенглигини белгилайди.
PASSWORD – парол киргизиладиган майдон
**********
Кўриниши:
Формати: <input type = password name = ‘ҳар қандай қиймат’>
FILE – файлни кўриш майдони
Кўриниши:
Формати: <input type = file>
LISTBOX – рўйхат
Пункт
Пункт
Пункт
Пункт
1
2
3
4
Кўриниши:
Формати: <select size="X">
<option> қиймат 1
<option> қиймат 2
<option> қиймат 3
<option> қиймат 4
</select>
Бунда X – бу сон ва бу сонга екранга чиқадиган рўйхат сатрлари сони боғлиқ
бўлади.
COMBOBOX – тушадиган меню – рўйхат
Кўриниши:
Формати: <select name = ‘ҳар қандай қиймат’>
<option> қиймат 1
<option> қиймат 2
<option> қиймат 3
<option> қиймат 4
</select>
CHECKBOX – бир неча вариант танланишига имконият берадиган меню
Кўриниши:
Формати: <input type = checkbox name = "ИСМ"> қиймат 1
<input type = checkbox name = "ИСМ"> qiymat 2
<input type = checkbox name = "ИСМ"> қиймат 3
….
RADIO – белгилаш менюси
Кўриниши:
Формати: <input type = radio name = "ИСМ"> qiymat 1
<input type = radio name = "ИСМ"> qiymat 2
<input type = radio name = "ИСМ"> қиймат 3
Изоҳ: ИСМдаги қийматлар бир хил бўлиши керак. Бу қийматлар лотин ҳарфлари ёки
сонлардан иборат бўлиши керак.
SUBMIT – “submit” тугмаси формани жўнатиш учун ишлатилади
Кўриниши:
Формати: <input type = submit value = “тугманинг ёзуви”>
RESET – формадаги мавжуд майдонлар қийматини учириш учун ишлатилади
Кўриниши:
Формати: <input type = reset value = “ тугманинг ёзув”>
BUTTON – тугма (бу тугмага бошқа тиллар ёрдамида ҳар ҳил вазифалар
юклатиш мумкин)
Кўриниши:
Формати: <input type = button value = “тугманинг ёзуви“>
Изоҳ: стандарт тугмалардан ташқари бошқа расмлар (IMAGE) ишлатиш мумкин.
Масалан:
<input type = image src = “tugma.gif” alt = “Submit”>
Қуйида баъзи қисқартирилган формалар, функсиялар ва символлар келтирилган:
&#34; yoki &quot ; – ‘ “ ‘ белгиси (қўш тирноқ)
&#38; yoki &amp; - “&” белгиси (ва)
&#64; - “@” белгиси (кучукча)
&#35; - “#” белгиси (рақам)
&#36; - “$” (доллар)
&#37; - “%” белгиси (фоиз)
&#39; - “ ‘ ” (апостроф)
&#169; ёки &copy; - mualliflik huquqlari
&#174; ёки &reg; - лицензияланган
&#160; ёки &nbsp; - объектлар орасида бўшлиқ
Масалан:
<font color = blue size = 5 >&copy; All Right Reserved </font>
Натижаси:
© All Right Reserved
Вазифа№4 ZIFA № 4
Қуйида кўрсатилган саҳифага ўхшаш web-саҳифа тузинг.
Кумуш ранг
Кул ранг
G’LIQLIK. IPEAR.
Маълумки, ҳамма web -саҳифалар қайсидир маънода бир-бири билан боғланган бўлади.
web-саҳифалар ўртасида боғлиқликни ўрнатиш учун гиперлинклар ишлатилади.
Гиперлинклар матннинг бир қисми ёки расм бўлиши мумкин. Матнли линкни яратиш учун
<A> теги ишлатилади. <A> теги линк ёки маркер яратилишида ишлатилиши мумкин.
Гиперлинкнинг расм ёки матнда мавжудлигини курсорни объект устига олиб бориб билиш
мумкин. Ўша ҳолатда курсорнинг расми қўл панжаси расмига ўзгаради. Сичқоннинг чап
томондаги тугмаси босилганда боғланган саҳифа очилиши лозим.
Линкни яратиш учун қуйидаги кодлар ишлатилади:
<A HREF="Sahifa_manzili">Линкнинг матни</A>
Масалан:
<A HREF="http://mail.yahoo.com"> Почтангизни текширасизми? </A>
Бундан ташқари линкларни ўша веб-саҳифанинг бошқа қисмларига боғлаш мумкин.
Маркерлар шу мақсадда қўлланилади. Фараз қилайлик, сизнинг веб-саҳифангиз бир неча
қисмлардан иборат бўлган ҳужжат бўлсин. Маркерларни ишлатган ҳолда сиз “мундарижа”
яратишингиз мумкин. Маркерларни яратиш учун қуйидаги кодлар ишлатилади:
<A NAME="маркер_номи">Ҳар қандай матн (боб номи)</A>
Маркерга линкни яратиш учун қуйидагини киритиш керак:
<A HREF=“#маркер_номи”> Линк матни (боб номи) </A>
Эътибор қилинг, маркер номи олдига “#” белгиси қуйилаяпти. Бу унинг бошқа webсаҳифага емас, балки шу веб-саҳифанинг бошқа қисмига боғланганини билдиради.
Масалан:
<A HREF=“#4”> Боб №4 </A>
Юқоридаги 2 хил линклардан ташқари електрон почтага ёъналтириладиган линк яратиш
мумкин. Унинг структураси қуйидагича бўлади:
<A HREF="mailto:СИЗНИНГ@E-MAIL?Subject=Хатнинг_мавзуси"> линк матни</A>
Масалан:
<A HREF="mailto:samceic@yahoo.com?Subject=Web-сахифа курслари"> Бизга хат юборинг
</A>
Линклар нафақат матнларда, балки расм ва аниматсияларда яратиш мумкин. Линкларни
расм ёки аниматсияларга яратиш учун матн линкининг ўрнига расмнинг тўлиқ номини
кўрсатишингиз лозим.
Масалан:
<A HREF=“index.html”> <IMG SRC=‘photo.jpg’> </A>
Линкларнинг ранги
Кўриб турганингиздек, сиз яратган барча линкли матнлар кўк рангдадир, сиз ишлатиб
кўрган линклар еса жигар рангда бўлади. Бу ранглар линкларнинг стандарт ранглари бўлиб
ҳисобланади. Лекин линкларнинг рангини ўз хохишингизга қараб ўзгартиришингиз
мумкин.
Демак, ҳар бир линкнинг 3 холати мавжуд:
1. Оддий – стандарт линк – къок.
2. Aктив – фойдаланувчи ишлатаётган линк – қизил.
3. Ташриф қилинган – фойдаланувчи олдин ташриф қилган (ишлатган) линк – жигар
ранг.
Линкли матннинг рангини ўзгартириш учун юқоридаги 3 ҳолат учун ранглар
белгиланиши керак. Бунинг учун яна <BODY> тегига қайтамиз. Бу ерда биз 2 атрибутни
жойлаштирган едик. Булар TEXT ва BGCOLOR (ёки BACKGROUND).
Энди биз бу ерга яна 3та атрибутни жойлаштирамиз. Уларнинг ҳар бир линкли
матннинг маълум ҳолати учун жавоб беради:
link – оддий ҳолат.
alink – актив ҳолат.
vlink – ташриф қилинган линк ҳолати.
Қуйидаги ранглар енг кенг тарқалган бўлиб, уларни ишлатишингизни маслаҳат берамиз
(мисол билан):
<BODY BGCOLOR=“#FFFFFF” TEXT=“#000000” LINK=“#0000FF” ALINK=“#FF00FF”
VLINK=“#800080”>
Линк орқали боғланган ойналар хусусиятлари.
TARGET тушунчаси.
HTMLда линк ишлатилганда очиладиган кейинги ойнанинг ҳолатини кўрсатиш мумкин.
Демак, линк ишлатилганда очиладиган ойнанинг ҳолатини аниқлаш учун TARGET
тушунчаси ишлатилади. TARGET атрибутлари у ёки бу линк босилганда янги ойнанинг
қандай очилишини белгилайди. Ушбу атрибутларга қуйидагилар киради:
_blank - саҳифа янги ойнада очилади.
_self - саҳифа ўша ойнанинг ўзида очилади.
_parent - ушбу атрибут фраме типидаги жадвалларда (бир ойнада бир неча кичик ойналар)
қўлланилади. Унда саҳифа линк жойлашган ойнада очилади.
_top
- саҳифа янги ойнада очилиб, қолган ойналарни ёпади.
Масалан:
<A HREF=“www.google.com” TARGET=“_blank”> GOOGLE </A>
ALT ишлатилиши.
ALT бу графикли объектлар устида пайдо бўладиган изоҳ. Aгар фойдаланувчи
сичқонни расм устида ушлаб турса, унда шу атрибутда кўрсатилган изоҳ пайдо бўлади.
Изоҳ ишлатилганда фойдаланувчи расмнинг пайдо бўлишини кутиб ўтириши шарт
бўлмайди. Бу функсия графикли меню ясаганингизда жуда фойдалидир. Ҳар бир расм учун
уни қайси бўлимга боғлиқлигини ёзсангиз кифоя. Бундай изоҳлар кўп ҳолларда линкга ега
бўлган расмларга қўлланилади.
Масалан:
<A HREF=“index.html”>
<IMG SRC=“home.gif” BORDER=“0” ALT=“Bosh veb-sahifa”>
</A>
IMAGEMAPING тушунчаси.
Сизга маълумки, линкларни ҳар хил расмларда жойлаштириш мумкин. Бундай
линклар курсорни расм устига олиб бориб сичқон тугмаси босилганда ишга тушади.
Бундан ташқари линкка ега бўлган расмни бевосита бир неча қисмга бўлиб, ҳар бир
қисмга линк яратиш мумкин. Битта расмга бир неча линклар жойлаштириш учун
USEMAP функсияси ишлатилади. Бу функсия веб-саҳифангизда жойни тежаб, самарали
ишлатишга имкон беради. Ушбу функсияни қўллаш учун қуйидаги кодлар структураси
қўлланилади:
<img src=“rainbow.gif” usemap=#мисол border=“0”>
<map name=мисол>
<area shape=Rect coords=0, 0, 29, 29
href=“http://www.yahoo.com”>
<area shape=circle coords=30, 30, 59, 59
href=“http://www.rambler.ru”>
</map>
Web-саҳифанинг стиллари.
Стиллар мураккаб веб-саҳифаларни безаш учун тез-тез ишлатилади. Стиллар орқали web
-саҳифа линклар кўриниши жиҳатидан жуда чиройли тус олиши мумкин. Кўрсатилган
стил параметрлари бутун web -саҳифангизга қўлланилади. web -саҳифанинг стиллари
<body> теги олдида қуйидагича қўлланилади:
</head>
<style>
.
.
</style>
<body>
STYLE қўлланилганда линкли матнларнинг қандай ўзини тутиши аниқланади.
Маълум стилга ега бўлган линк катталиги, ранги ва бошқа томонлари жиҳатидан
ўзгаради. STYLE қуйидаги атрибутларга ега:
HOVER – курсор ёзувнинг устида бўлгандаги линк стилини белгилайди.
VISITED – ташриф қилинган (ишлатилган) линкнинг стилини белгилайди.
ACTIVE – актив линкнинг стилини белгилайди.
Ушбу атрибутлар қуйидаги тартибда қўлланилади:
<style>
a{color: СТИЛ_РAНГИ; size: СТИЛ_КAТТAЛИГИ; text – decoration: STIL_DIZAYNI
font – family: ‘SHRIFT NOMI’}
a:hover( ёки VISITED/ ACTIVE){ color:RANG; size:KATTALIGI; text – decoration:
DIZAYN font – family: ‘SHRIFT’ background:ORQA_FON;}
</style>
Масалан:
<style>
a{color: red; size: 4; font – family: arial}
a: hover{color: green; size: 6; font – family: ‘comic sans ms’ text – decoration: underlined;}
</style>
Таъкидланиб ўтилганидек, кўрсатилган стил параметрлари бутун web- саҳифага
қўлланилади. Aгар сиз оддий стандарт стилни маълум бир линкка қўлламоқчи бўлсангиз,
унда қуйидагини ёзишингиз лозим:
<A HREF = “http://www.yahoo.com” style = “text – decoration: none”> YAHOO!ga o’tish </A>
5-вазифа
Қуйида кўрсатилган саҳифага ўхшаш web-саҳифа тузинг.
Оч қизил
Расм
Линклар
Жадвал,
bordercolor
yellow
Маркерлар
Яшил
Бордер, maroon
Бинафша ранг
(Purple)
6-вазифа
Ўзингизнинг шахсий web-саҳифангизни яратинг. Сизнинг web-саҳифангиз 3 критерий
бўйича баҳоланади:
Web-саҳифангизнинг ташқи кўриниши (интерфейс). Web-саҳифангизни яратишингизда сизга
маълум бўлган web-сайтлардан келиб-чиқиб, профессионал нуқтаи назардан қаранг.
Web -саҳифангизнинг дизайни. Web -саҳифангизни ёқимли ва ишлатишда қулай қилинг.
Ўргатилган элементларни қанчалик тўғри ва эффектив ишлатасиз.
Topshiriqlar:
--------------------------------------------------------------------------------------------------------------------------Quyidagi namunalarga asoslanib o’zingizning web-sahifangizni yarating:
--------------------------------------------------------------------------------------------------------------------------<html>
<head><title>Web-sahifam</title></head>
<body bgcolor="silver">
<center><h3>Sahifaning <A href="#bottom">oxiriga</a> o'tish</h3></center>
<A href="http://www.kun.uz">O’zbekiston yangiliklari</a>
<p><A href="http://www.qarshidu.uz">Qarshi DU yangiliklari</a><p>
<font color="red"><h2>Web-sahifa yaratish</h2></font>
<font color="brown"><P align="justify">
Web-sayt yaratish Internetda soat sayin ko‘payib borayotgan bir paytda, undagi Web-sahifalar
o‘zining turli xil dizayn va briflariga egadirlar. Internet hakida gapirar ekanmiz bu miliard
resurslarga ega bo‘lgan bitta tushunchadir. … Axborot-kommunikatsiya texnologiyalari negizida
axborotlashgan jamiyat barpo etish O‘zbekiston Respublikasi qonunlari, Prezident farmonlari,
hukumat qarorlari mazmunidan ham ishonch hosil qilish mumkin. Axborotlashgan jamiyat
tushunchasi ham hali qomuslardan o‘z-o‘rnini topmaganligi, yana bir bor hayot ko‘pincha nazariya
va qomuslardan ildamroq olg‘a bosishda turtki va darak beradi.
</font>
<hr color="olive">
<A name="bottom"></a><P>
<center><h3>Sahifaning <A href="#top">boshiga</a> o'tish</h3></center>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------Harakatli matnga ega sahifa yarating:
--------------------------------------------------------------------------------------------------------------------------<hr color="blue"> Bu matn teskariga chiqadi:
<BDO dir="RTL">Matn yo'nalishini o'zgartirish mumkin ... DAMAS, KIYIK, SAMAD,
AKA</BDO>
<p><marquee bgcolor=#0000FF height=50 behavior="alternate">
<font color="yellow"><h2>Osmonimiz hamisha musaffo bo'lsin !!!</h2></font></marquee>
<hr color="red"><marquee bgcolor="white" height=25 >
<b>*** Qarshi DU "Informatika o'qitish metodikasi" kafedrasi o'qituvchisi: Razzoqov Ilhom
Davronovich * E-mail: razzoqov@umail.uz * Tel: (91) 959-35-88 ***</b></marquee>
<hr color="red"><marquee bgcolor=#00FF00 height=50 direction="right"><font
color="red">
<h2>O'zbekiston - kelajagi buyuk davlat !!!</h2></font> </marquee>
<hr color="blue">
-------------------------------------------------------------------------------------------------------HTML5 elementlari
<hr color="blue">
<CENTER><h1>HTML5 elementlari</h1></center>
<h2> Video </h2><p>
<video src = "video_dars1.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
<hr color="olive">
<h3> Audio </h3><p>
<audio src="madhiya.mp3" controls autoplay loop>
Your browser does not support the <audio> element.
</audio>
<hr color="olive">
--------------------------------------------------------------------------------------------------------------------------Kamalak tasvirli sahifa yarating:
--------------------------------------------------------------------------------------------------------------------------<center><font size=5 color="green"><b>Kompyuterdagi kamalak tasviri:</b></font></center>
<table border=0 width=100%>
<tr><td bgcolor=#FF0000>K
<tr><td bgcolor=#FF7800>A
<tr><td bgcolor=#FFFF00>M
<tr><td bgcolor=#00FF00>A
<tr><td bgcolor=#43D8FB>L
<tr><td bgcolor=#0000FF>A
<tr><td bgcolor=#8000C0>K
</table>
--------------------------------------------------------------------------------------------------------------------------Fraymli sahifa yarating:
--------------------------------------------------------------------------------------------------------------------------<html>
<head><title> Freymlar</title></head>
<frameset rows="20%, 60%, 20%">
<frame src="page1.htm" noresize>
<frameset cols="25%, 75%">
<frame src="page2.htm">
<frame src="page3.htm" scrolling="yes" marginwidth="10" marginheight="75">
</frameset>
<frame src="page4.htm">
</frameset>
</html>
--------------------------------------------------------------------------------------------------------------------------Menyuli sahifa yarating:
--------------------------------------------------------------------------------------------------------------------------<body bgcolor="yellow">
<table border="1" cellpadding="5" width="100%">
<!-- Yuqori menyu -->
<tr bgcolor="aqua">
<td colspan="2" align="center"> <b>
<a href="page.html">| Bosh sahifa | </a>
<a href="tugma.htm"> Products | </a>
<a href="soat.htm"> Birinchi | </a>
<a href="qushish va kupaytirish.htm"> Ikkinchi | </a>
<a href="1.jpg"> Images | </a>
<a href="saytframe.htm"> Table | </a> </b>
</td>
</tr>
<!--Asosiy qism-->
<tr bgcolor="pink">
<td rowspan="2" valign="top">
<h1 align="center"> CEFR tizimi</h1>
<p align="justify"> <font color="blue">
CEFR (Common European Framework of Reference for Languages – Umumiy Yevropa Til
Ko’nikmasi Qolipi) tizimi butun Yevropa bo’ylab ishlatiladigan tillarni o’rganish, o’rgatish va
baholashga doir masalalarni o’z ichiga oladi. Bugungi kundagi globallashuv va zamonaviy
texnologik vositalar yordamida odamlarning bir-birlari bilan oson aloqa o’rnatishlari natijasida
CEFR tizimi nafaqat Yevropada, balki Kolumbiya va Filippin kabi davlatlarda ham keng tadbiq
etilayapti. O’zbekistonda ham Prezidentning 2012-yildagi Qaroridan so’ng ingliz tilini o’rganish
va o’rgatishga bo’lgan talab sezilarli darajada ko’tarildi hamda buning natijasi o’laroq yangi,
milliy NSFLA tizimi CEFR asosida tashkil etildi.
Tizimning tashkil etilish tarixi Yevropaga ish izlab keluvchilar sonining ortishi bilan bog’liq. XX
asrning o’rtalarida Yevropada ishlab chiqarish taraqqiy eta boshlagan va yangi ish o’rinlari
yaratilib, ko’proq ishchi kuchiga talab orta borgan sari, Yevropaga ish izlab keluvchi va bu yerda
butunlay yashab qolish niyatida tashrif buyurayotganlar soni ortib bordi. O’sha vaqtda
Yevropada Ispan, Nemis, Fransuz va Italiyan tillaridan tashqari Ingliz tili ham keng miqyosda
ishlatilardi. Yevropaga yashab qolish uchun kelayotganlar Yevropaning mahalliy aholisi bilan
bemalol, muammosiz gaplasha olishlari kerak edi. Shuning uchun Yevropaga ishlash uchun
kelayotganlar mahsus imtihonlar topshirishlari kerak bo’lgan. CEFR tizimiga asoslangan
imtihonlar dastlab Yevropada amal qiladigan barcha tillar bo’yicha olingan bo’lsa-da, bugungi
kunda CEFR tizimidan eng ko’p hollarda ingliz tilini o’qitish, o’rganish va baholashda
foydalanilayapti. Chunki butun dunyo ingliz tilida gaplashayapti va bu til birinchi raqamli jahon
tiliga aylanib ulgurgan. CEFR tizimi Yevropa Konsulligi tomonidan 1989-1996 yillarda amal
qilgan «Language Learning for European Citizenship» («Yevropa Fuqaroligi uchun Til
O’rganish») dasturining tarkibiy qismi sifatida to’liq mukammallashtirilgan. 2001-yilning noyabr
oyidan boshlab esa CEFR Yevropa tilllarini bilish darajasini baholashda asosiy me’zon sifatida
qabul qilingan.
CEFR tizimi tillarni bilish darajasini uchta: A, B va C guruhlarga ajratgan holda baholaydi.
CEFR darajalari sifatida berilgan baho quyidagilarni anglatadi:
A1 va A2 darajalar – tilni endi o’rganayotgan, boshlang’ich bosqichdagi foydalanuvchi,
B1 va B2 darajalar – tildan erkin foydalana oladigan, o’rtachadan yuqori darajadagi
foydalanuvchi;
C1 va C2 darajalar – tilni mukammal darajada biladigan foydalanuvchilar. Bugungi kundagi
IELTS va hatto O’zbekistonda endigina tashkil etilib, rivojlanayotgan NSFLA tizimlari ham
Ingliz tilini Yevropa standarti, CEFR bo’yicha bilish darajasini baholash va aniqlashga
asoslangan. Demak, bu turdagi ingliz tilini bilish va egallash darajasini aniqlash, baholash,
o’rgatish va o’rganish tizimlari asosan Yevropada tildan foydalanish hamda Yevropa sharoitida
muammosiz muloqotga kirisha olish darajasiga asoslangan.
CEFR asosidagi tilni bilish darajasini aniqlash imtihonlari asosan foydalanuvchilarni to’rt
yo’nalish: gapirish, o’qish, tinglab tushunish va yozish ko’nikmalarining qay darajada
rivojlanganligiga qarab baholaydi. Tizimda bu turdagi imtihonlarning har bir yo’nalishi uchun
mahsus yo’riqnomalar, qoidalar va talablar mavjud. Shu bilan bir qatorda ushbu turdagi
imtihonlarga tayyorgarlik ko’rish uchun ham alohida yo’nalish va ko’rsatmalar nazarda tutilgan.
Xulosa qilib aytganda, CEFR – Yevropadagi barcha gaplashiladigan, amalda bo’lgan tillarni
bilish darajasini aniqlash, o’rganish va o’rgatish usullarini targ’ib qiluvchi til ko’nikmasi qolipi.
</td>
<td><img src="doppix.jpg"><marquee>Milliy operatsion tizimimizni o'z kompyuteringizga
o'rnating !!! </marquee></td>
</tr>
<tr bgcolor="white">
<td><center><img src="nexia3.jpg" width="350"
height="200"></center><marquee>Avtokreditga zamonaviy mashina sohibi bo'ling !!!
</marquee></td>
</tr>
</table>
<marquee><h2>Happy New Year !!!</h2> </marquee>
</body>
-------------------------------------------------------------------------------------------------------------------------