HTMLni o'rganamiz

NÐ¾dirbek 01 Iyul 2010, 22:21:17

Assalamu alaykum.
Bu mavzuda HTMLni o'rganuvchilar uchun, sodda qilib tushuntirilgan darslarni joylab boramiz.
Ko'pchilik Web-Designerlar htmlni o'rganishni keragi yo'qligini ta'kidlashadi. Rostdan ham sayt tuzuvchilar uchun html unchalik kerak emasdir. Lekin Sayt uchun dizayn tayyorlaydiganlar ya'ni verstka qiladiganlarga html kerak bo'lishini hisobga olgan holda, shu mavzuni ochishga qaror qildik.

PS: Bu bo'limda boshqa shunga o'xshash mavzu ham bor ekan lekin bu mavzudagi darslar rasmlar bilan ko'rsatilganligi uchun joylashga qaror qildik. Darslar muallifi: Anvar Ulug'ov.

1-Dars

1. "œТекстовс‹й документ" ochib olamiz:

2. Ichiga quyidagilarni yozamiz:

<html>
<head>
<title>
Assalomu alaykum
</title>
</head>
<body>
men htmlni o’rganayapman
</body>
</html>

3. Va "Файл" menyusining "œСохранить как"¦" bandini bosamiz:

3. Ochilgan oynachani yuqoridagi rasmda ko’rsatilaganiday to’ldiramiz va "œOK"ni bosamiz;

4. Hosil bo’lgan faylni ochamiz, ko’rib turibsizki, index.html nii siz internetdagi saytlarni ochadigan dastur ya’ni brauzer ochayapti agar unday bo’lmasa, demak xotiraga olishda xatolikka yo’l qo’ygansiz;

5. Endi yuqorida yozgan teglarim haqida ozroq ma’lumot bersam:

Shuni yodda tutingki, "œ< >" bunaqa belgilarning orasida yozilgan kodlar "œTEG" ("TAG") deyiladi. teglar asosan ikki xil bo’ladi:

ochuvchi teg - <>

yopuvchi teg - </>

<HTML> - ushbu teg html kodining boshlanganligi haqida brauzerga ma’lumotberadi, to’grirog’i brauzer u kodni o’qib html boshlanganligini biladi;

</HTML> - bu esa html kodining ta’sizi shu yerda tugaganini bildiradi;

Shuni bilib olish kerakki, web-dizaynda sayt bir necha qismga bo’linadi: saytning "œheader" ("kallasi"), saytning "œbody"si ("tanasi") va "œfooter"i ("oyog’i", qisimlarni ziyrak kishi saytning o’zini ko’rishi bilanoq ajratib oladi). Demak,

<head> - saytning boshi hisoblanar ekan, kalla qismi;

<body> - esa tana qismi;

Xurmatli mushtariy agar inglizchadan xabardor bo’lsangiz xursand bo’lavering teglar siz uchun ancha-muncha tushunarli bo’lishi mumkin, agar inglizchadan xabardor bo’lmasangiz xafa bo’lishga shoshilmang qadamma-qadam teglarni sekinlik bilan yodlab boramiz"¦

Demak, saytning kallasiga sayning ismini ya’ni sarlavhasini yozib qo’yamiz. Bu ishni amalga oshirishda <title> - sarlavha tegidan foydalanamiz. Ko’rib turibsizki, kodlash qo’polroq qilib aytadigan bo’lsak xuddi unday bo’lasan, bunday bo’lasan deb xarakteristika berish ekan"¦.

Qayd etilgan

NÐ¾dirbek 03 Iyul 2010, 23:55:14

2-dars

Davom etamiz.

Yana shuni bilib qo’yishimiz kerakki, "tag" ikkiga bo’linadi: <tag>(ochuvchi)</tag>(yopuvchi) ochuvchisi tegning ta’sir doirasi boshlangnaini, yopuvchisi tegning ta’sir doirsi tugaganini bildiradi"¦.

Keyin doimo teglarning yozilish tartibi quyidagicha bo’ladi: <a><c></c>[/url] ko’rinishida, birinchi ochilgan teg oxirgi yopiladi, oxirgi ochilgan teg birinchi yopiladi.

Endi birinchi darsda tayyorlagan hujatimizni davom ettiramiz:

"œindex.html" - faylni IE (Internet Explorer) dasturida ochib olamiz "œВид" >"Лросмотр HTML кода"¦" bosamiz. Avvalda html kodini kiritgan dasturimiz - "œТекстовс‹й документ" ochiladi ichida o’shakodlar"¦

Ochilgan oynachadagi kodlarga quyidagilarni qo’shimcha qilamiz:

<html>
<head>
<title>
Assalomu alaykum
</title>
</head>
<body bgcolor="#608aec"œ>
<p>

<font face="arial, verdana, tahoma, helvetica, calibri, times new roman" color="#ffffff", size="3″>
men htmlni o’rganayapman
hozircha zerikmayapman"¦
</font>

<marquee direction="right" loop="2″ scrolldelay="100″ width="150″ height="30″><h1>Qalay chiqayapti?</h1></marquee>
</p>
</body>
</html>

yangi teglarni kiritib bo’lgach, "œФайл">"Сохранить"ni bosamiz. Keyin IE (Internet Explorer) "œОбновить" tugmasini bosamiz, o’zgarishlar ko’rinadi.

1. <"¦bgcolor="#608aec> (back ground color) - sahifa fon rangi; rang ha so’z bilan bo’lishi mumkin (red, blue, black, "¦), lekin "œ#adafs" ko’rinishida bo’lsa, rangni daqiq joyigacha aniq belgilash imkonini beradi.

2. <p> (paragraph) - paragraf ochib beradi;

3. (bold) - semiz yozuv;

4.1. <font> - bu yerda yozuv degani;

4.2. <font face="arial, verdana, tahoma, helvetica, calibri, times new roman"> - shrift turi (qo’shimcha);

4.3. <font color="#ffffff"> - yozuv rangi (qo’shimcha);

4.4 <font size="3″> - kattaligi (qo’shimcha);

5.
(brake) - yangi qator;

6.1. <marquee> - yozuvni harakatlantiradi;

6.2. <marquee direction="right"> - yozuv harakatining yo’nalishi (qo’shimcha);

6.3. <marquee loop="2″> - necha marta takrorlanishi (qo’shimcha);

6.4. <marquee scrolldelay="100″> - harakt tezligi (qo’shimcha);

6.4. <marquee width="150″> - harakat eni (qo’shimcha);

6.6. <marquee height="30″> - harakat eni (qo’shimcha);

Qoshimcha sifatida kiritilgan kodlarsiz ham ushbu teglar ishlayveradi.

Qayd etilgan

NÐ¾dirbek 05 Iyul 2010, 23:09:25

3-dars

3-darsni boshlashdan avval 2-darsda yozilgan ba’zi bir teglarga izoh bersam:

<marquee> tegining "œdirection" qo’shimchasiga "œleft"(chapga), "œright"(o’nga), "œup"(yuqoriga), "œdown"(pastga) kabi kodlar yordamida ushbu <marquee> tegi ta’siridagi yozuvni, umuman obyektniing harakatini to’t tomondan biriga yo’naltirish mumkin.

Mana bular esa yangi teglar:

1. Rasm qo’yishimiz uchun quyidagi tegdan foydalanamiz:

<img src="rasmning manzili/faylnomi.kengaytmasi" alt="matn" height="raqam" width="raqam" border="0″ />

alt - bu kod yordamida rasm ustiga sichqoncha olib borilganida chiqadigan yozuvni kiritish mumkin;

heght - rasmning bo’yini belgilash;

width - rasmning enini belgilash;

border - rasmning ramkasining qalinligini beslgilash.

2. Tugma qo’yish tegi:

1 - <button name="tugmacha" type="button">tugma</button> (oddiy tugma);

2 - <img src="rasmning manzili/faylnomi.kengaytmasi" alt="matn" height="raqam" width="raqam" border="0″ /><button name="tugmacha" type="button" tabindex="5″>tugma</button> (rasmli tugma).

3. So’zlarni link qilish tegi:

1 - <a href="ushbu linkga bosganda ochilishi kerak bo’lgan fayl manzili">link qilinishi kerak bo’lgan so’z yoki obyekt[/url] (oddiy link);

2 - <a title="sarlavha" href="ushbu linkga bosganda ochilishi kerak bo’lgan fayl manzili" target="new">link qilinishi kerak bo’lgan so’z yoki obyekt[/url] ("target="_blank" kodi yordamida faylni yangi oynada ochib beradigan link);

3- <a href="ushbu linkga bosganda ochilishi kerak bo’lgan fayl manzili"><img src="rasmning manzili/faylnomi.kengaytmasi" alt="matn" height="raqam" width="raqam" border="0″ />link qilinishi kerak bo’lgan so’z yoki obyekt[/url] (rasmli va matnli link (ulardan faqat bittasi bo’lsa ham bo’ladi, ikkalasi bo’lsa ham bo’ladi));

4. Buyog’i ozgina o’ylantiradiganroq, Xudo xohlasa, keyingi darsda alohida to’xtalamiz, ok?

Qayd etilgan

NÐ¾dirbek 06 Iyul 2010, 23:44:31

4-dars (table)

Bugun biz HTMLning eng ko’p ishlatiladigan va ko’p qulayliklar qilib beradigan tegi <table> (таблияа) haqida o’rganamiz:
Bu teg ham boshqa ko’pchilik teglar kabi ochuvchi <table> va yopuvchi </table> qismlaridan iborat. Biz bu teg yordamida html sahifaga tablitsa qo’yishimiz mumkin bo;ladi.

<table width="600″ border="0″ cellspacing="0″ cellpadding="0″>
<tr height="50″>
<td height="50″></td>
<td height="50″></td>
<td height="50″></td>
</tr>
</table>

1.1. <table width=""> - tablitsa eni;

1.2.<tabel border=""> - tablitsa chizig’i qalinligi;

1.3.<table ceellspacing=""> - tablitsa kataklarining oralaridagi bo’shliq kattaligi;

1.4.<table ceellpadding=""> - tablitsa katagi ichidagi bo’shliq kattaligi.

2.1. <tr> - tablitsa qatori;

3.1. <td> tablitsa ustuni;

Bu tegdan samarali foydalanilsa web-sahifaga juda ko’p, dizayn borasida ham generatsiya jarayonini tartibga solish borasida ham foyda keltirishi mumkin.

Endi bitta misol keltiramiz, Xudo xohlasa shu misol yordamida bu tegdan qanday foydalanishni yaxshi o’zlashtirib olasiz:

<html>

<head>

<title>O’zbekiston Respublikasi davlat bayrog’i</title>

</head>

<body>

<table width="500″ border="0″ cellspacing="0″ cellpadding="0″>
<tr height="50″>
<td bgcolor="#0051ff" height="50″></td>
</tr>
<tr height="5″>
<td bgcolor="red" height="5″></td>
</tr>
<tr height="50″>
<td height="50″></td>
</tr>
<tr height="5″>
<td bgcolor="red" height="5″></td>
</tr>
<tr height="50″>
<td bgcolor="#12d300″ height="50″></td>
</tr>
</table>

</body>

</html>

Men tayyorlab bo’ldim endi siz ham bir urinib ko’ringchi..

Qayd etilgan

NÐ¾dirbek 09 Iyul 2010, 17:25:45

5-dars (oddiy HTML sayt)

Xo’sh, HTML haqida uncha-muncha bilimga ega bo’lib oldik. endi shoshqaloqlik bo’lsa ham, qiziqishimiz so’nmasidan sayt tayyorlashga urinib ko’ramiz.

Demak, avvalo sayt uchun nom tanlaymiz, misol uchun "œbirinchi". www.birinchi.uz jarangdora?! Lekin bizga hali domain (sayt uchun internetda nom) olishga bor"¦

2. Sayt uchun nom tanlangach, shu nom bilan papka tashkil qilamiz. Tashkil qilingan ("birinchi") papka ichida yana bitta papka tashkil qilamiz va uning ismini "œimages" deb nomlaymi, bu o’zbekchada "œrasmlar" degani, ya’ni sayt sahifalaridagi rasmlar saqlanadigan papka. Endi yana bitta papka - "œtexts" papkasini tashkil qilamiz, bu sayt sahifalarida yoziladigan matnlar saqlanadigan papka bo’ladi.

3. Xo’sh"¦ endi, "œТекстовс‹й документ" ochib olamiz va quyidagi kodlarni kiritamiz:

<head>

<title>www.birinchi.uz</title>

</head>

<body leftmargin="0″ marginheight="0″ marginwidth="0″ topmargin="0″>

<table width="700″ border="0″ cellspacing="0″ cellpadding="0″ align="center">

<tr height="100″>

<td bgcolor="#00ccff" width="700″ height="100″><h1>www.birinchi.uz</h1></td>

</tr>

<tr>

<td bgcolor="#2bff00″ width="700″><a href="index.html">Bosh sahiga[/url] | <a href="yangiliklar.html">Ynaigliklar[/url] | <a href=haqimda.html">O’zim haqimda[/url] | <a href="manzil.html">Manzil[/url]</td>

</tr>

<tr height="500″>

<td valign="top" width="700″ height="500″>

<table width="100%" border="0″ cellspacing="0″ cellpadding="0″ height="100%">

<tr>

<td align="center" valign="middle" bgcolor="#cfcfcf" width="150″><img src="images/rasmnomi.kengaytmasi" alt="birornarsa" height="300″ width="100″ border="0″ /></td>

<td valign="top">Sahifa matnini kiritamiz"¦.</td>

<td valign="top" bgcolor="#cfcfcf" width="150″><img src="images/rasmnomi.kengaytmasi" alt="birornarsa" height="32″ width="32″ border="0″ /></td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="center" valign="top" bgcolor="#00ccff" width="700″>www.birinchi.uz

Menich birinchi saytim.</td>

</tr>

</table>

</body>

</html>

Bular yozilgach ushbu faylni index.html deb nomlab, "œbirinchi" papkasining ichiga saqlaymiz.

Sharh:

1. <body leftmargin="0″ marginheight="0″ marginwidth="0″ topmargin="0″> - web-sahifaning ekran chetiga tegib turishini bildiradi"¦ ya’ni ekran cheti va web-sahifa orasida "œ0″ piksel, agar tushunarsiz bo’lsa shu yerga biror sonni yozing o’zgarishni ko’rasiz;

2. <table "¦ align="center"> - tablitsa ekran o’rtasida turadi, degani"¦.;

3. <h1>www.birinchi.uz</h1> - bu teg o’z ta’siridagi yozuvching kattaligi va semizligini birdaniga boshqarish imkonini beradi;

4. <a href="index.html">Bosh sahiga[/url] | <a href="yangiliklar.html">Yangiliklar[/url] | <a href=haqimda.html">O’zim haqimda[/url] | <a href="manzil.html">Manzil[/url] - bular Xudo xohlasa sayt menyusi bo’ladi, yodingizda bo’lsin so’zlarni link qilayotganingizda ochilishi kkerak bo’lgan fayl nomini va yo’lini to’g'ri kiriting! E’tibor bergan bo’lsangiz bu yerda faqatgina fayt nomini yozish bilangina cheklandim, chunki bu html fayllar bitta papka ichida bo’ladi va joriy faylning o’zi ham shu papkaning ichida bo’lganligi uchun papka nomi yozilmaydi, lekin e’tibor bergan bo’lsangiz rasm qo’yich uchun yo’l ko’rsatganimizda (<img src="images/rasmnomi.kengaytmasi" alt="birornarsa" height="32″ width="32″ border="0″ />) papka nomini yozgan edik, chunki rasm boshqa bir papke ichida bo’lganligi uchun ham shunday qildik.

Endi boshqa web-sahifalarni ham shu - index.html faylini tayyorlaganday tayyorlab olamiz va hammasini "œbirinchi" papkasining ichiga joylaymiz.

Qayd etilgan