HTM

1

Бүлэг1 Зорилго:

HTML баримтын бүрэлдэхүүнүүдтэй танилцах

WWW –ийн вэб хуудас бичихийн тулд HTML-ийн үндсэн tag-г хэрхэн хэрэглэх вэ?

Текстийг форматлахын тулд HTML-ийг хэрэглэх

Өөрийн вэб хуудсанд имидж нэмэх

Вэб хуудсуудын хооронд шилжих хипер холбоог үүсгэх ба хэрэглэх Сэдэвүүд 1. Танилцуулга 2. MARKUP хэл 3. HTML-ийг засварлах 4. Ерөнхий tag 5. Гарчигууд 6. Текстийн загварууд 7. Холболтууд 8. Имиджүүд 9. <FONT>ашиглан текстийг форматлах 10. Тусгай тэмдэгтүүд 11. Интернэт ба WWW дэх боломжууд

1.1 Танилцуулага WWW-ийг үүсгэдэг боломжуудтай энд танилцах болно. Интернет нь 30-аад настай боловч тэрээр эдгээр боломжуудыг 1990-ээд оны үед одоогийн энэ бүх боломжуудыг өгсөн www-ийг гарч ирэхээс өмнө тийм ч түгээмэл биш байлаа. HTML-ийн тусламжтайгаар вэбийн хүч чадлын оньсыг нээх болно. HTML нь COBOL , FORTRAN , C болон PASCAL хэлтэй адил шаталсан программчлалын хэл юм.

1.2 MARKUP ХЭЛ БУЮУ ЗАГВАРЧЛАЛЫН ХЭЛ HTML бол загварчлалын хэл юм. Мэдээлэл болон техстийг форматалахад ашиглана. Энэхүү мэдээлэлийн загварчлал нь уламжлалт программчлалын хэлнүүдээс ялгаатай.

www.zaluu.comwww.zaluu.com

2

HTML -д текстийг хос хаалтан дахь түлхүүр үгээр дүрслэгдсэн tag-аар элементийг нь загварчилна. Жишээ нь HTML нь өөрөө нэг элемент нь болох ба браузерт вэб бичиж байгааг тодорхойлж <HTML>-ээр эхэлж </HTML>-ээр дуусгавар болно. Tag-ийг хаахгүй бол өгүүлбэр зүйн алдаа зааж вэб хуудсан дээр гарч ирдэг

1.3 HTML-ИЙГ ЗАСВАРЛАХ Анхдагч код хэлбэрээр HTML-ийг бичих талаар товчхон сонирхоѐ. HTML файл буюу НТМЛ баримт үүсгэе . Энэ нь маш амархан бөгөөд зөвхөн ямар нэгэн текст засварлагч программ ашиглахад л болно. Ихэнх HTML файл нь нтмл эсвэл нтм өргөтгөлтэй байдаг. Анхны HTML гарах үед бүх компьютерууд файлыг 3 тэмдэгт бүхий өргөтгөлийг зөвшөөрдөг байсан. C ба C++, Java хэлнүүдийг ашиглах явцад хийсэн алдаа нь нилээд ноцтой зайлшгүй эхнээс нь шалгахад хүргэдэг бол HTML-ийнх тийм биш.

1.4 ЕРӨНХИЙ TAG Жишээ 1.1 <HTML> <!—Зураг 1.1:main.html--> <!—Бидний анхны Вэб хуудас--> <HEAD> <TITLE> main </TITLE> </HEAD> <BODY> <P> Бидний Вэб хуудасанд тавтай морилно уу!</P> </BODY> </HTML> Браузерээр харвал:


3

<HTML> ба </HTML>-ийн хооронд агуулагдаж байгаа бүх зүйлсийг браузер харуулах юм. гэсэн tag-ийн дунд тайлбар үгээ бичиж болдог Энэхүү тайлбар нь үндсэн программ бичих явцтай хамаагүй юм. <TITLE> БА </TITLE> гэсэн tag-ийн хооронд цонхны гарчгийг өгдөг. Тэрээр таны хувийн хуудасны нэрийг илэрхийлж байна гэсэн үг <BODY>нь гол элементийг нээнэ. Гол элементэд браузераар харах гэсэн бүх агуулагаа байршуулдаг. Текст, имидж, холбоос, холбоосын өнгө, загвар, дэвсгэр ба үсгийн фонт зэргийг багтаана. <P> Бидний Вэб хуудсанд тавтай морилно уу! </P> гэдэг нь параграф эхэлж байгааг илэрхийлнэ.

1.5 ГАРЧИГУУД Гарчиг нь текстийн хэлбэр хэмжээг солигдсон хамгийн энгийн хэлбэр юм. Гарчигийн Н1-Н6 хүртэлх 6 лемент нь хуудасан дээрх шинэ эсвэл дэд хэсэг эхэлж байгааг дүрсэлэхэд ашиглагддаг. Зураг1.2-с тэдгээрийн хэрэглэсэн байдлыг харна уу ЖИШЭЭ1.2 <HTML> <!—HTML Гарчигууд --> <HEAD> <TITLE>header</TITLE> </HEAD> <!—CENTER дотор бүх голлуулах зүйлийг хийнэ.--> <CENTER> <H1>1-р зэргийн гарчиг</H1> <H2>2-р зэргийн гарчиг</H2> <H3>3-р зэргийн гарчиг</H3> <H4>4-р зэргийн гарчиг</H4> <H5>5-рзэргийн гарчиг</H5> <H6>6-р зэргийн гарчиг</H6> </CENTER> </BODY> </HTML>


4

Зураг1.5

<CENTER></CENTER>гэсэн tag-ийн хооронд голлуулах бүх зүйлийг хийнэ.

1.6 ТЕКСТИЙН ЗАГВАРУУД HTML-д текстийг бүдүүн доогуураа зураастай эсвэл налуу завгараар тодруулж чадна. 11 мөрөнд байх <H1 ALIGN=‖center‖><U>Бидний Вэб хуудсанд тавтай морилно уу! </U></H1>- <H1> tag доторх ALIGN=‖center‖ гэдэг нь хуудасны нэг элементийг байршуулах арга юм. Энэхүү атрибут нь <P> tag-т хэрэглэгдэж болно. ALIGN=‖right‖, ALIGN=‖left‖ гэх мэтчилэн бичнэ. <U>…</U> гэсэн tag доогуураа зураастай гэсэн утгатай. <EM>…</EM>- г (emphasis) онцолсон буюу чухалчилсан хэлбэрийг заана. <I></I>Italic буюу налуу хэлбэртэй адил юм. <B>…</B>гарчигийн тод хэсгийг үүсгэхдээ ашиглана. Тэр болгон доогуураа зураастай , налуу бичихгүй байхыг анхаарах хэрэгтэй . Учир нь ихэнх браузерууд тэдгээрийг хипер холбоос буюу дан холбоос байна гэж таньдаг. Жишээ 1.3 <HTML <!—Зураг 1.3:main.html--> <HEAD> <TITLE>Internet and WWW HOW to Program-Welcome</TITLE> </HEAD> <BODY>


5

<H1 ALIGN=‖center‖><U>Бидний Вэб хуудсанд тавтай морилно уу! </U></H1<P>Бид энэхүү вэб хуудсыг <EM>HTML</EM>-ийн гайхамшигийг үзэхийн тулд хийлээ. Бид <EM>HTML</EM>-ийн <STRONG> <U>4.0-р хувилбарын </STRONG </U>талаар ашиглах болно. </P> <H2 ALIGN=‖center‖>Вэб хийх нь зугаатай!</H2> </BODY> </HTML>

Зураг1.3

1.7 ХОЛБОЛТУУД HTML-ийн хамгийн чухал чанар бол серверийн хаана ч байгаа баримт руу хипер холбоос үүсгэн орох , мөн WWW-ийн ялгаатай серверүүд рүү буюу тэдгээр дээрх баримт болон мэдээлэл рүү холбогдох боломжыг олгодогт байгаа юм HTML-д текст ба имиджийн аль нь ч вэб дээрх бусад хуудас руу холбогдох зангуу болж чадна. Гипер холболтын загвар : <A HREF= ‖Интернетийн хаягийг бич‖> Хамгийн анхны холбоос нь <P>Yahoo:<A HREF=‖http://www.yahoo.com‖>http://www.yahoo.com‖</A></P> болно. Жишээ1.4


6

<HTML> <!—Зураг 1.4:links.html—> <HEAD> <TITLE>Internet and WWW How to Program –Links</TITLE> </HEAD> <BODY> <CENTER> <H2>Энд бидний хамгийн дуртай Интернэтийн хайлтын программуудын хаяг байна. </H2> <P><STRONG>Хайгч программын хуудсууд руу орохын тулд хаягийг товш.</STRONG></P> <P>Yahoo:<A HREF=‖http//www.yahoo.com‖>http//www.yahoo.com</A></P> <P>AltaVista:<A HREF=‖http//www.altavista.com‖>http//www.altavista.com</A></P> <P>AskJeeves:<AHREF=‖http//www.askjeeves.com‖>http//www.askjeeves.com </A></P> <CENTER> </BODY> </HTML> Браузерээр харвал:

Зураг1.4 <A HREF=‖хаяг‖> гэсэн хэлбэрээр холбоос үүснэ өөрөөр хэлбэл дурын холбоотой хуудас файл ба и-мэйлийн хаягаар бичигдэнэ.


7

1.8 ИМИДЖҮҮД Зураг болон дүрсүүдтэй хэрхэн ажиллахыг сонирхоѐ. ЖИШЭЭ1.5 <HTML> <!—Зураг2.6:picture.html--> <HEAD> <TITLE>Internet and WWWto Program-Welcome</TITLE> </HEAD> <BODY BACKGROUND =‖c:\Windows\backgrnd.gif‖> <CENTER> <!—Зураг оруулах хэлбэр:<IMG SRC=‖NAME‖>--> <IMG SRC=‖c:\windows\setup.bmp‖BORDER=‖1‖HEIGHT=‖144‖WIDTH=‖200‖ ALT=‖Windows-ийн таних тэмдэг‖> </CENTER> </BODY> </HTML>

Зураг1.6 Жишээн дээр зургийн арын фоныг оруулсан мөр нь дараах болно. <BODY BACKGROUND=‖c:\windows\ backgrnd.gif‖> Харин дүрсээ юм уу зургаа оруулахдаа <IMG SRC=‖c:\widows\ setup.bmp‖ BORDER=‖1‖ HEIGHT=‖144‖ WIDTH=‖200‖ ALT=‖Windows-ийн таних тэмдэг ‖> tag- ийг ашигласан байна. Үндсэн tag нь <IMG> </IMG> болно.


8

<SRC> нь байршил заасан аттрибут юм. Tag дундах Height, Width нь дүрсийн (зургийн) оруулж ирэх урт ба өргөнийг заасан командууд (pixel-ээр хэмжигдэнэ) Та дүрсийнхээ гадуур хүрээ шугам татаж болно Үүний тулд BORDER гэсэн аттрибут ашигладаг. BORDER=x өргөнийг хэмжиж байсан нэгжтэй адилаар тооцно. Мөн ALT гэсэн аттрибутыг ашиглаж болно. ALT = ―Windows- ийн таних тэмдэг ‖ Энэхүү аттрибутыг хэргэлэснээр таны зургыг дурын суурьт браузерээр харж болно. Түүгээр зогсохгүй ямар нэгэн зураг руу заагчаар дөхөхөд танд ойлгомжтой мэдээллийг өгнө. Манай жишээн дээр ―Windows- ийн таних тэмдэг ‖ гэсэн мэдээллийг Windows-ийн зураг руу заагчийг ойртуулахад гарна. Одоо бид вэбдээ зураг , дүрс оруулаад тэдгээрийг хэрхэн холбоос болгох талаар авч үзье. Жишээ 1.7 <HTML> <!—Зургуудыг холбох зангуу шиг хэрэглэх нь--> <HEAD> <TITLE>Internet and WWW How to Program –Nav Bar </TITLE> </HEAD> <BODY BGCOLOR=’#CDCDCD ‖> <CENTER><A HREF=‖links.html‖> <IMG SRC=‖buttons/links.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Links Page‖></A><BR> <A HREF=‖list.html‖> <IMG SRC=‖buttons/list.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖List Example Page‖></A><BR> <A HREF=‖contact.html‖> <IMG SRC=‖buttons/contact.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Contact Page‖></A><BR>


9

<A HREF=‖header.html‖> <IMG SRC=‖buttons/header.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Header Page‖></A><BR> <A HREF=‖table.html‖> <IMG SRC=‖buttons/table.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Table Page‖></A><BR> <A HREF=‖form.html‖> <IMG SRC=‖buttons/form.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Feedback Form‖></A><BR> </CENTER> </BODY> </HTML>

<BODY BGCOLOR=‖#CDCDCD‖> энд өнгөний кодыг ашигласан байна Өнгөний код 100 хол давсан байдаг ба хүсвэл Color гэсэн программаар дурын өнгөний код ашиглаж болно. 00 нь сулруулах ,FF нь цэвэр өнгөний кодыг тус тус илэрхийлнэ <IMG SRC=‖buttons\table.jpg‖ WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Table Page‖></A><BR> Дээрх мөрөнд мөр дуусаж байгааг тодорхойлсон <BR> tag-ийг хэрэглэсэн байна. SRC=‖buttons/table.j pg ‖WIDTH=‖65‖ HEIGTH=‖50‖ BORDER=‖0‖ ALT=‖Table Page‖></A></BR> Дээрх мөрөнд мөр дуусаж байгааг тодорхойлсон <BR> tag-ийг хэрэглэсэн байна.


10

SRC=‖BUTTONS/TABLE..JPG гэсэн IMG элэментийн SRC аттрибут нь өмнө тааралдаагүй хэлбэр. Buttons гэдэг нь table.jpg файлын орших каталгогийн нэр болно.

1.9 <FONT> АШИГЛАН ТЕКСТИЙГ ФОРМАТЛАХ Текстэнд хэрхэн фон болон дүрс оруулж амилуулах вэ? Жишээ1.8 ийг анхаарвал : Жишээ1.8 <HTML> <!—Зураг1.8 :main.html --> <HEAD> <TITLE> Internet and WWW How to Program –Welcome</TITLE> </HEAD> <BODY> <H1 ALIGN=‖center‖><U>Бидний Вэб хуудсанд тавтай морилно уу!</U></H1> <P><FONT COLOR=‖red ‖ SIZE=‖+1‖ FACE=‖ARIAL‖Бид энэхүү вэб хуудасыг <EM>HTML</EM></FONT>-ийн гайхамшигийг заахын тулд бэлтгэлээ, <FONT COLOR=‖purple ― SIZE=‖+2‖ FACE=‖Verdana‖Бид <EM>HTML</EM>-иийн<U><STRONG>4.0 –р хувилбарыг ашиглаж байна.</STRONG ></U> </FONT></P> </H2 ALIGN=‖center‖>Вэб хуудас хийх нь зугаатай ! </H2> </P> </BODY> </HTML>


11

Зураг1.8 <P><FONT COLOR=‖red‖ SIZE=‖+1 FACE=‖Arial‖ > Бид энэхүү вэб хуудсыг <EM>HTML</EM></FONT>Энэхүү жишээнд FONT гэсэн элементийн хэд хэдэн аттрибутыг үзүүллээ . COLOR гэсэн аттрибут нь текстийн өнгийг заадаг аттрибут юм Өнгөний нэр ба кодийг хашилтанд хийж өгнө. Хэрэв BODY элементэд ашиглах бол TEXT аттрибутыг өнгөний зорилгоор ашиглана. SIZE гэоэн аттрибут нь текстийн өнгийг өөрчилнө. SIZE=‖+X‖ нь текстийг томруулахын тулд харин SIZE=‖-X‖ нь текстийг жижигрүүлэхэд хэрэглэнэ. FACE аттрибут нь текст үзүүлэх үсгийн фондын нэрийг заана. Хашилтанд фондын нэрийг бичдэг

10.ТУСГАЙ ТЭМДЭГТҮҮД HTML-д QWERTY гэсэн текст бичигчийн хангалттай боломжуудтай . Тэрээр үсэг болон тэмдэгт оруулах нөөцтэй . Зарим онцгой тэмдэгтүүдийг хэрхэн оруулсныг сонирхвол : <P> Энэ хуудасан дээрх бүх мэдээлэл нь <STRONG>©</STRONG> СЭЗДС <STRONG >& amp;</STRONG> НББ, 2000.</P> Бүх тэмдэгтүүд нь кодоороо орсон байна . Код нь ихэвчлэн &code; хэлбэртэй байна. Мөн өөр аргаар &#38 гэж гаргаж болно. &copy гэвэл зохиогчийн эрхийн тэмдгийг төлөөлдөг. Текстийг <DEL>…</DEL> - ийн тусламжтайгаар дундуураа зураастай хэлбэрээр гаргаж болно. <SUB>…</SUB> Энэхүү хаалтаар зэрэг хэлбэрийн бичиглэлийг гаргана. Харин <SUP >…</SUP> гэсэн хаалтаар индекс хэлбэрийн бичиглэлийг үүсгэдэг . Текстийн мөрийг таслах болон хөндлөн чиглэлийн дагуу шугам татах бол дараах жишээг харъя Жишээ1.10 <HTML> <!—Мөр таслах ба хэвтээ шугам--> <HEAD > </HEAD> <BODY> <HR WIDTH=‖25%‖ SIZE=‖1‖> <HR WIDTH=‖25%‖ SIZE=‖2‖> <HR WIDTH=‖25%‖ SIZE=‖3‖>


12

<P ALIGN=‖left‖><STRONG>Хэмжээ:</STRONG>4 <STRONG>Өргөн: </STRONG>75% <HR WIDTH=‖75%‖ SIZE=‖4‖ ALIGN=‖left‖> <P ALIGN=‖right‖><STRONG>Хэмжээ:</STRONG>12 <STRONG>Өргөн: </STRONG>25% <HR WIDTH=‖25%‖ SIZE=‖12‖ ALIGN=‖right‖> <P ALIGN=‖center‖><STRONG>Хэмжээ:</STRONG>8 <STRONG>Өргөн: </STRONG>50% <STRONG><EM>Сүүдэргүй…</EM></STRONG> <HR NOSHADE WIDTH=‖50%‖ SIZE=‖8‖ ALIGN=‖CENTER‖> </BODY> </HTML> Энэ дасгалыг хийсэний дараа MS-Internet Explorer-оор харвал :

Зураг1.10

<HR WIDTH=‖25%‖ SIZE=1>нь хөндлөн шугам оруулж ирж байна. 50% -гэдэг нь дэлгэцийн нягтралаас хамаарна.


13

NOSHADE шулуун шугамыг сүүдэртүүлэх эсэхийг заана. БҮЛЭГ 2 Энэ бүлгийн зорилго нь :

Мэдээллийн жагсаалт үүсгэх

Мэдээллийн сангийн мөр баганатай хүснэгт байгуулах

Хүснэгтийг форматлах

Загвар буюу маягт байгуулах

Хипер холбоос үүсгэхийн тулд дүрс зураг

үүсгэж ашиглах

Хайлтын программд орохоор Вэб хуудас хийх

Вэб хуудас илүү сонирхолтойгоор байгуулахын тулд <FRAMESET> TAG хэрэглэх

СЭДВҮҮД: 1. Дэс дараалалгүй жагсаалт 2. Үүрэн болон дэс дараалсан жагсаалт 3. Үндсэн HTML-ийн хүснэгт 4. HTML-ийн хүснэгт ба түүнийг форматлах 5. Үндсэн HTML-ийн маягтын загвар 6. HTML-ийн илүү төгс загвар 7. Дотоод холбоос 8. Image Map-ийг үүсгэх ба хэрэглэх 9. <META >TAG 10. <FRAMESET>TAG 11. Үүрэн <FRAMESET> TAG 12. Интернэт ба WWW дэх боломжууд

2.1 ДЭС ДАРААЛАЛГҮЙ ЖАГСААЛТ Дараах жишээнд дэс дараалалгүй хэрхэн хийх талаар үзүүлье Жишээ2.1 <HTML> <! –Эмх цэгцгүй жагсаалт--> <HEAD> </HEAD> <BODY>


14

<CENTER> <H2>Энд миний хамгийн дуртай хайлтын программууд байна.</H 2> <P> <STRONG>Тэдгээрийн хуудас руу орохын тулд хаягийг товш. </STRONG></P>  <!—харин <LI>нь жагсаалтын 1 мөрийг оруулна.--> <UL> <LI>Yahoo:<A HREF=‖http://www.yahoo.com‖>http://www .yahoo.com </A> </LI> <LI>Yahoo:<A HREF=‖http://www.altavista.com‖>http://altavista.com </A></LI> <LI>Ask Jeeves.<A HREF=‖http://www.askjeeves.com.‖> </UL> </CENTER> </BODY> </HTML> Кодыг ажиллуулахад дараах цонхон дах хэлбэр гарч ирнэ.

Зураг2.1


15

Зургаас өмнөх жишээнд дэс дараалалгүй дүрс хэлбэрийн тоочсон бичиглэлийг дугуй цэгээр үүсгэсэн болно. Дэс дараалалгүй жагсаалтын элемент бүр нь дүрс тэмдгээр эхэлсэн жагсаалтыг үүсгэдэг. Дэс дараалалгүй жагсаалтын бичиглэл бүр нь түүнийг эхлүүлэж мөн төгсгөдөг <UL>…</UL> гэоэн tag-ийн хооронд байна. Жагсаалтын эхний мөрийг эхлэхдээ <LI> гэсэн tag-аар зааж өгнө . Жишээн нь <LI>Yahoo><A HREF=‖http‖://www.yahoo.com</A> </LI> <LI> tag-ийг мөр бүрийн эхэнд тавих хэрэгтэй.

2.2 ҮҮРЭН БОЛОН ДЭС ДАРААЛСАН ЖАГСААЛТ ҮҮСГЭХ Үүрэн жагсаалт гэдэг нь жагсаалтын доторх давхар буюу дэд жагсаалт юм . Үүрэн жагсаалтын талаар зураг2.2-с харж болно. Жишээ2.2 <HTML> <HEAD> <TITLE> Internet and WWW How to Program –List </TILE> </HEAD> <BODY> <CENTER> <H2><U>Интернэтийн хамгийн өвөрмөц шинжүүд</U></H2> </CENTER> <UL> <LI>Дэлхийн улс орнуудын шинэ хүмүүстэй уулзана.</LI> <LI>Мэдээллийн түгээмэл хэрэгсэл рүү орно:</LI> <UL> <LI>Шинэ тоглоомууд </LI> <LI>Шинэ хэрэглээний програмууд</LI> <UL> <LI>Бизнесийн хувьд </LI> <LI>Зугаа цэнгэлийн хувьд</LI> </UL> <LI>Цагийн мэдээнүүдийн эргэн тойронд</LI> <LI>Хайлтын программууд</LI> <LI>Худалдаа хийх</LI> <LI>Программчлал</LI> <UL> <LI>HTML<//LI> <LI>DynamicHTML</LI> <LI>Шинэ хэллэгүүд</LI> </UL>


16

</UL> <!—Энэ нь эхний түвшингийн үүрэн жагсаалтаар хаагдана.--> <LI>Холболтууд</LI> <LI>Хуучныхаа найзуудтай холбоотой байх</LI> <LI>Ирээдүйн шинэ технологи !</LI> </UL> <!—Энэ нь эхний дэс дугаарлаагүй жагсаалтаар хаагдана.--> <BR><CENTER><H2> Комьпютерийн хамгийн том компанийн <EM> -ерөнхийлөгчид </EM></H2></CENTER> <OL> <LI>Bill gates</LI> <LI>Steve Jobs</LI> <LI>Michael Dell</LI> </OL> </BODY> </HTML> Программын кодыг HTML танихдаа

Зураг2.2


17

Гэсэн хэлбэрээр үзүүлэх ,юм. 10-28-р мөр 3 үүрэн түвшингийн жагсаалтыг харүүлж байна. Дэд жагсаалт үүсгэх бол </U> tag-ийг заавал хаана. 36-38-р мөр дэс дараалсан жагсаалт юм . <OL> <LI>Bill Gates</li> <LI>Steve Jobs</LI> <LI>Michael Dell</LI> </OL> дэс дараалсан жагсаалтын мөр бүр дугаарлагдсан тоогоор эхэлнэ. Ө.х дэс дараалсан бүхэл тоонууд байна. Харин дараагийн жишээ 2.3-т хаяглах схемийн бас нэгэн өөр хувилбарыг үзүүллээ . Жишээ 2.3 <HTML> <! – Дэс дараалсан жагсаалтын ялгаатай хэлбэрүүд--> <HEAD> <TITLE>Internet and WWW How to Program- List</TITLE> </HEAD> <CENTER> <H2>Вэб хуудасны ангилал</H2> </CENTER> <OL> <LI>Хувийн хуудас</LI> <LI>Хуудасны холболтууд</LI> <OL TYPE=‖I‖> <LI>Хайлтын программуудын холболтууд</LI> <LI>Мэдээллийн хуудасны холболтууд</LI> <OL TYPE=‖ A‖> < LI > Мэдээний хуудаснууд </LI> <OL> <LI TYPE=‖i‖>TV</LI> <OL TYPE =‖a‖> <LI>CNN</LI> <LI>Мэдээний гол тойм</LI> </OL> <LI TYPE=‖i‖>Текст</LI> <OL TYPE=‖a‖> <LI>New York Times</LI> <LI>Washington Post</LI> </OL> </OL> <LI>Хувьцааны хуудсууд</LI>


18

</OL> <LI>Зугаатай хуудасны холболтууд </LI> </OL> <LI>Буцах холбоо бүхий </LI> <LI>Холбоо барих хуудас </LI> <LI>HTML-ийн жишээний хуудаснууд </LI> </OL> </BODY> </HTML>

зураг2.3

Жагсаалт гаргах 4-н төрөл байна. <OL TYPE=‖I‖> 1-р төрөл <LI>Хайлтын программуудын холболтууд</LI> <OL TYPE=‖A‖> 2-р төрөл <LI>Мэдээний хуудасууд</LI> <LI TYPE=‖i‖>TV </LI> 3-р төрөл <OL TYPE=‖a‖> 4-р төрөл


19

<LI>CNN </LI> Дарааллын төрлийг өөрчлөхдөө TYPE гэсэн аттрибутыг <OL> tag дотор хэрэглэж болно. Гэхдээ энэ нь дүрийг нь өөрчилөхөд хэрэглэнэ Жишээ нь : TYPE=‖1‖ гэвэл 1,2,3,,,, гэх мэт TYPE=‖I‖ гэвэл I,II,III,,,,,гэх мэт TYPE=‖i‖ гэвэл i,ii,iii,,,,,гэх мэт TYPE=‖A‖ гэвэл A,B,C,,,гэх мэт

2.4 ҮНДСЭН HTML-ИЙН ХҮСНЭГТ

Мэдээллийг форматлах өөр нэг зам бол хүснэгт хэрэглэх явдал юм. Жишээ 2.4 <HTML> <HEAD> <TITLE>Internet and WWW How to Program-Tables</TITLE> </HEAD> <BODY> <H2>Энгийн хүснэгтийн хуудас</H2> <TABLE BORDER=‖1‖ ALIGN=‖center‖ WIDTH=‖40%‖> <THEAD> <TR><TH>Энэ бол гарчиг . </TH></TR> </THEAD> <TBODY> <TR><TD> ALIGN=‖cnter‖>Энэ бол гарчиг. </TD></TR> </TBODY> </TABLE> </BODY> </HTML> Хүснэгтэнд оруулах текстийг <TABLE>…</TABLE> tag дотор хийнэ <TABLE> гэсэн tag нь шинэ хүснэгт оруулах болон загварын сонголт болон бүтцийг тодорхойлно. Шугамыг харагдуулахгүй болгоѐ гэвэл BORDER=‖0‖ гэж бичнэ .<CAPTION>гэсэн хаалт нь агуулгыг багцална.


20

<CAPTION>нь хүснэгтэн дотор тайлбар элемент орууна. Энэ tag доторх текст шууд хүнэгтийн толгой байдлаар харагдана.

Зураг2.4

<CAPTION>Энд хүснэгтийн жишээ өгөгдлөө.</CAPTION> Хүснэгт нь салангид хэсгүүдэд хөндлөн ба босоо чиглэлийн дагуу хуваагдаж болно. Энэ бол гарчиг. гэж бичигдсэн толгойн текст ийг <THEAD> гэсэн tag-т бичнэ. Өөрөөр хэлбэл талбар буюу багана бүрийн толгойн текстийг <THEAD> tag-ийг ашигладаг. Хүснэгтийн гарчигийн талбайг өөрчлөх үед мөн ашиглана . <TR> буюу хүснэгтийн мөрийн элементийг биеэ даасан мөр үүсгэхэд ашигладаг. Мөрийн нүдэн дэх текстийг энэхүү tag-ийн дунд бичнэ. Мэдээлэл оруулахдаа <TD> tag –ийг хэрэглэнэ. <TD> нь нүдэнд ердийн текст бүхий өгөгдөл оруулна. <TH> гэсэн хаалт нь гарчигийн нүдийг оруулах ба текстийг тодруулж харуулна. Бүх чухал ойлголт нь <TBODY> хаалтыг ашиглахад гарна. Бүтэн нэг хэсгийн хэлбэрийг өөрчлөхийн тулд дээрх хаалтыг ашиглаж болно. Зөвхөн нэг нүдний өгөгдлийг оруулахад ашиглаж болно.<TD>

2.5 HTML-ИЙН ХҮСНЭГТИЙГ ФОРМАТЛАХ


21

Өмнө үзсэн хүснэгтийг нилээд өөрчилсөн байдлаар авч үзье Жишээ 2.5 <HTML> <HEAD> </HEAD> <BODY> <H2 ALIGN=‖center‖>Хүснэгтийн жишээний хуудас </H2> <TABLE BORDER=‖1‖ ALIGN=‖center‖ WIDTH=‖40%‖> <CAPTION>Энд энгийн жижг хүснэгт өгөгдлөө.</CAPTION> <THEAD> <TR> <TH>Энэ бол толгой</TH> </TR> </THEAD> <TBODY> <TR> <TD ALIGN=‖center‖>Энэ нь гол хэсэг.</TD> </TR> </TBODY> </TABLE> <BR> <TABLE BORDER=‖1‖ ALIGN=‖center‖> <CAPTION> Одоо илүү ниилмэл хүснэгтийн жишээ авъя.</CAPTION> <COL ALIGN=‖right‖> <COL SPAN=‖4‖ align=‖center‖> </COLGROUP> <THEAD> <TR BGCOLOR=‖#8888FF‖> < TH ROWSPAN=‖2‖> <IMG SRC=‖deitel.gif‖ WIDTH=‖200‖HEIGHT=‖144‖ ALT=‖Harvey and Paul Deitel‖> </TH> <TH COLSPAN=‖4‖ VALIGN=‖top‖> <H1>Camelid comparison </H1><BR> <P>Approximate as of 8/99</P> </TH> </TR> <TR BGCOLOR=‖khaki VALIGN=‖ bottom‖> <TH># of Humps </TH> <TH> Indigenous region</TH> <TH>Spits ?</TH> <TH> Produces Wool ? </TH> </TR>


22

</THEAD> <TBODY> <TR> <TH>Camels (bactrian)</TH> <TD>2</TD> <TD>Africa/Asia</TD> <TD ROWSPAN=‖2‖>Liama</TD> <TD ROWSPAN=‖2‖>Liama</TD> </TR> <TR> <TH>Liamas</TH> <TD>1</TD> <TD>Andes Mountains </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

Зураг2.5


23

COLGROUP элемент нь баганын группыг форматлахад ашиглана. <TH COLPAN=‖4‖ VALIGN=‖TOP‖> нүдийг 4 хуваана .гэхдээ босоо чиглэлийн дагуу дээд, дунд, доод суурь түвшинд ялгаж бичихэд зориулан зай гаргаж өгнө.

2.6 МАЯГТЫН ЗАГВАР ҮҮСГЭХ Жишээ2.6 <HTML> <!—Маягтын загвар үүсгэх--> <HEAD> </HEAD> <BODY> <H2>Санал хүсэлтийн маягт</H2> <P>Манай хуудсыг сайжруулахад туслах зорилогоор дараах маягтыг бөглөөрэй !</P> <FORM METHOD=‖POST‖ ACTION=‖/cgi-bin/formmail‖> <INPUT TYPE =‖hidden‖ NAME=‖recipient‖ VALUE=‖http://www.mongolcom.com/ife‖ > <INPUT TYPE =‖hidden‖ НЭР=‖гол шалтгаан‖ VALUE=‖Санал хүсэлтийн маягт‖> <INPUT TYPE =‖hidden‖ NAME=‖redirect‖ VALUE=‖main.html‖ > <!INPUT type=‖текст‖>нь текстийн хайрцагийг үүсгэнэ.-- > <P><STRONG> НЭР:</STRONG> <INPUT NAME =‖нэр‖ TYPE=‖текст‖ SIZE=‖25‖></P> <INPUT TYPE =‖submit ‖ VALUE=‖Өгөгдлөө баталгаажуул‖>


24

< INPUT TYPE =‖reset ‖ VALUE=‖Өгөгдлийг шинээр оруулах‖ > </FORM> </BODY> </HTML>

Зураг2.6 <FORM METHOD=‖POST ACTION=‖/cgi-bin/formmail‖> гэсэн мөр <FORM> гэсэн tag-аар эхэлсэн байна. METHOD гэсэн аттрибут нь Вэб сервер маягтыг илгээх болон зохицуулах аргыг үзүүлнэ. INPUT гэсэн элемент нь маягтанд түгээмэл хэрэглэгддэг ба TYPE гэдэг аттрибутыг ямагт шаарддаг.

2.7 HTML-ИЙН ИЛҮҮ ТӨГС МАЯГТЫН ЗАГВАР Жишээ2.7 МАЯГТЫН ЗАГВАРЫГ ӨӨРЧИЛЖ БОЛОВСРОНГУЙ БОЛГОХ


25

<HTML> <HEAD> </HEAD> <BODY> <H2>Санал хүсэлтийн маягт</H2> <P>Манай хуудсыг сайжруулахад туслах зорилогоор дараах маягтыг бөглөөрэй !</P> <FORM METHOD=‖POST‖ ACTION=‖/cgi-bin/formmail‖> <INPUT TYPE =‖hidden‖ NAME=‖recipient‖ VALUE=‖http://www.mongolcom.com/ife‖ > <INPUT TYPE =‖hidden‖ NAME=‖subject‖ VALUE=‖Feedback FORM‖> <INPUT TYPE =‖hidden‖ NAME=‖redirect‖ VALUE=‖main.html‖ > <P><STRONG> НЭР:</STRONG> <INPUT NAME =‖name‖ TYPE=‖text‖ SIZE=‖25‖></P> <P><STRONG>Тайлбар:</STRONG> <TEXTAREA NAME=‖comments‖ ROWS=‖4‖ COLS=‖36‖ > </TEXTAREA></P> <P><STRONG> И-мэйлийн хаяг:</STRONG> <INPUT NAME=‖e-mail ‖ TYPE=‖password‖ SIZE=‖25‖></P> <P><STRONG> Танд таалагдсан зүйл:</STRONG><BR> Вэб хуудасны дизайн <INPUT NAME=‖things TYPE=‖checkbox‖ VALUE=‖ Вэб хуудасны дизайн‖> Холболтууд <INPUT NAME=‖things TYPE=‖checkbox‖ VALUE=‖ Холболтууд‖> Ашиглахад хялбар байдал <INPUT NAME=‖things TYPE=‖checkbox‖ VALUE=‖ Ашиглахад хялбар байдал‖ Ерөнхий төрх <INPUT NAME=‖things TYPE=‖checkbox‖ VALUE=‖ Ерөнхий төрх Эх код <INPUT NAME=‖things TYPE=‖checkbox‖ VALUE=‖ Эх код‖ </P> <P><STRONG>Та манай вэб хуудсыг хаанаас олсон бэ?: </STRONG></P> Хайлтын программаас <INPUT NAME=‖how get to site ‖ TYPE=‖radio‖ VALUE=‖search engine‖ CHEKED> Өөр хуудасны холболтоос <INPUT NAME=‖how get to site ‖ TYPE=‖radio‖ VALUE=‖link‖>. Lycos.com Web site < INPUT NAME=‖how get to site ‖ TYPE=‖radio‖ VALUE=‖deitel.com‖> Номны тодорхойлолтоос < INPUT NAME=‖how get to site ‖ TYPE=‖radio‖ VALUE=‖book‖> Бусад < INPUT NAME=‖how get to site ‖ TYPE=‖radio‖ VALUE=‖other‖> </P> <P><STRONG>Манай хуудсны үнэлгээ (1-10):</STRONG></P> <SELECT NAME=‖rating‖> <OPTION SELECTED>Гайхалтай:-)


26

<OPTION>10 <OPTION>9 <OPTION>8 <OPTION>7 <OPTION>6 <OPTION>5 <OPTION>4 <OPTION>3 <OPTION>2 < OPTION>1 <OPTION>The Pits:-( </SELECT></P> < INPUT TYPE =‖submit‖ VALUE=‖Өгөгдлөө баталгаажуул‖ > < INPUT TYPE =‖reset ‖ VALUE=‖Өгөгдлийг шинээр оруулах‖ > </FORM> </BODY> </HTML>

Зураг2.7

<TEXTAREA>нь өгөгдсөн хэмжээгээр текстийн хайрцгийг үүсгэнэ. Энэ маягтын төрөл нь өөрийн гэсэн элементийн нэртэй бөгөөд маягтанд хайрцаг оруулдаг .Tag дотроо хайрцагныхаа хэмжээг ROWS гэсэн аттрибутаар зааж өгнө. COLS гэсэн аттрибут нь текст бичих талбай хир өргөн байхыг тохируулна.


27

<INPUT TYPE=‖password ‖> нь уншихыг хүссэн хүн болгонд бус нууц үг бүхий хүнд ашиглагдана. < INPUT TYPE =‖checkbox ‖> шалгах хайрцгийг үүсгэнэ. Шалгах хайрцаг нь биеэ даасан буюу бүлэглэгдсэн хэлбэртэй байж болно Харин нэр нь бүгд ижил байна. Гэхдээ шалгах хайрцгууд ижил нэртэй байхад тэдгээрийн VALUE-ийн утгыг өөрчлөх хэрэгтэй Мөн энэхүү жишээнд радио т овчлуур гэсэн шинэ сонголтыг хийсэн юм. INPUT элементийг TYPE=‖radio‖ гэсэн аттрибуттай хэргэлсэн байгаа бөгөөд радио товчлуур нь сонголтонд хэрэглэгддэг хамгийн энгийн функц юм. NAME аттрибутын бүх зүйл адилхан байдаг бол VALUE аттрибутын бүх зүйл ялгаатай. CHEKED ат трибутыг хэрэглэвэл хамгийн эхэнд сонгохыг хүссэн радио товчлуурыг үзүүлнэ. <SELECT> гэсэн tag нь <OPTION > tag-аар тодорхойлогсон сонголтыг бий болгоход ашиглагдана. <SELECT NAME=‖rating‖> <OPTION SELECTED>Гайхалтай:-) <OPTION>10 <OPTION>9 <OPTION>8 <OPTION>7 <OPTION>6 <OPTION>5 <OPTION>4 <OPTION>3 <OPTION>2 < OPTION>1 <OPTION>The Pits:-( </SELECT> INPUT гэсэн tag-ийн оронд SELECT tag-ийг хэрэглэсэн байна. Энэ tag-ийн дотор SIZE=‖x‖ аттрибутаар сонголтын тоог өөрчилж болно.

2.8 ДОТООД ХОЛБООС Вэб хуудсыг текст эсвэл дүрс зураг ашиглан өөр вэб хуудастай холбох талаар бид өмнө нь үзэж байсан. Харин энэ удаа HTML файл дахь биеэ даасан нэгж рүү шилжүүлэхийг зөвшөөрдөг дотоод холбоос хэрхэн үүсгэх талаар судлая. Энэ байршлын нэр нь вэб хуудасны URL (Universal Resource Locator ) буюу хаягийн мөрөн дээр гардаг Өөрөө хэлбэл энэ нь хуудасан дотор шилжих үйл ажиллагаа


28

Жишээ 2.8 Дотоод холбоос үүсгэх <HTML> <!—Д отоод холбоос--> <HEAD> <TITLE>Internet and WWW How to Program – List</TITLE> </HEAD> <BODY> <CENTETR> <A NAME=‖Онцлогууд‖></A> <H2><U>Интернэтийн хамгийн сайн онцлогууд </U></H2> <H3><A HREF=‖# ерөнхийлөгчид‖>Компьютерийн <EM>Хамгийн том </EM>компанийн захирлууд </A></H3> <CENTER> <UL> <LI>Дэлхийн улс орнуудын шинэ хүмүүстэй уулзан. <LI>Мэдээллийн түгээмэл хэрэгсэл рүү орно: <UL> <LI>Шинэ тоглоомууд <LI>Шинэ хэрэглээний программууд <UL> <LI>Бизнесийн хувьд <LI>Зугаа цэнгэлийн хувьд </UL> <LI>Цагийн мэдээнүүдийн эргэн тойронд <LI>Худалдаа хийх <LI>Программчлал <UL> <LI>HTML</LI> <LI>Java</LI> <LI>Dynamic HTML </LI> <LI>Scripts</LI> <LI>Шинэ хэлнүүд</LI> </UL><BR><BR <A NAME=‖Ерөнхийлөгчид‖></A> <CENTER><H2>Компьютерийн хамгийн том компанийн <EM> ерөнхийлөгчид </EM></H2> <H3><A HREF=‖# Онцлогууд‖><EM> Дуртай </EM>онцлогууд руу шилж </A> </H3></CENTER> <OL> <LI>Bill Gates</LI> <LI>Steve Jobs</LI> <LI>Micheal Dell</LI> </OL>


29

</BODY> </HTML>

<A NAME =‖…‖></A> нь дотоод холбоосыг хийдэг. Дотоод холбоосын хаяг нь ―xx.html# холбоосын нэр‖ Бидний жишээн дээр ―Онцлогууд‖ гэдэг нь холбоосын нэр юм.

2.9 Image Map –ийг үүсгэх ба хэрэглэх Одоо зургийн тодорхой хэсгийг тодорхойлохыг зөвшөөрдөг Image Map хэрхэн үүсгэх талаар сонирхоѐ Дараа нь тэдгээрийг холбоосонд хэрхэн ашиглахыг үзнэ. ЖИШЭЭ2.9 Image Map үүсгэх ба хэрэглэх <HTML> <!—Image Map үүсгэх ба хэрэглэх > <HTML> <HEAD> <TITLE>Internet and WWW How to Program – List</TITLE> </HEAD>


30

<BODY BACKGROUND=‖bckgrnd.gif‖‖> <CENTER> <MAP NAME=‖picture‖> <AREA HREF=‖form.html‖ SHAPE=‖red‖ COORDS=‖3,122,73,143‖ ALT=‖Go to the form‖> <AREA HREF=‖contact.html‖ SHAPE=‖rect‖ COORDS=‖109,123,199,142‖ ALT=‖Go to the contact page‖> <AREA HREF=‖main.html‖ SHAPE=‖rect‖ COORDS=‖1,2,72,17‖ ALT=‖Go to home page‖> <AREA HREF=‖links.html‖ SHAPE=‖rect‖ COORDS=‖155,0,199,18‖ ALT=‖Go to the links page‖> <AREA HREF=‖mailto:[email protected]‖ SHAPE=‖poly‖ COORDS=‖146,66,42‖ ALT=‖Email the Deitel‖> <AREA HREF=‖mailto:[email protected]‖ SHAPE=‖circle‖ COORDS=‖146,66,42‖ ALT=‖Email the Deitel‖> </MAP> <IMG SRC=‖deitel.gif‖ WIDTH=‖200‖ HEIGHT=‖144‖ BORDER=‖1‖ ALT=‖Harvey and Paul Deitel‖ usemap=‖# picture‖‖> </CENTER> </BODY> </HTML>


31

Image Map –ийн бүх элемент нь <MAP>…</MAP> tag дотор оршино. NAME гэсэн аттрибут шаарддаг. Жишээ нь : <MAP NAME=’picture‖> <MAP> tag нь форматлах талбайд дүрс зургийг дараа нь тодорхойлохын тулд нээх болон нэрлэдэг. Дүрс зураган дээр гарч буй зүсэлт хэлбэрийн зураглалыг AREA элемент тодорхойлдог. HREF аттрибутыг мөн авдаг tag юм. Shape=‖rect‖ нь тэгш өнцөгт талбайг зүүн дээд болон баруун доод координаттай нь үзүүлдэг. Shape=‖polygon ‖ (олон талт) хэсэгчилсэн дүрстэй талбайг жагсаагдсан оройн хамт үзүүлнэ. Shape=‖circle‖ дугуй талбайг төв болон радиусын хамт гаргадаг. Координатын хосод X ба Y тэнхлэгийг заасан 2 тоо шаардлагатай.

2.10 <META >TAG Хүмүүс хайлтын программыг сонирхолтой вэб хуудас үзэхийн тулд хэрэглэдэг. Хайлтын программ нь зочилж орсон хуудас


32

бүрийн хувьд хадгалагдсан мэдээллийн ангилал ба тодорхойлолтуудыг ашиглахаас гадна ихэвчлэн каталоги хэлбэрийн холбоосуудыг ашигладаг. Хайлтын программуудтай харилцан ажилладаг HTML-ийн гол элемент бол META tag юм. ЖИШЭЭ2.10 < ! DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.0 Transitional//EN‖> <HTML>  <HEAD> <META NAME=‖keywords‖ CONTENT=‖Webpage, design, HTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel ‖> <META NAME=‖description CONTENT=‖This Web site will help you learn the basics of HTML and Webpage design through the use of interactive examples and instruction .‖> </HEAD> <BODY> <H1 ALIGN=‖center‖><U>Бидний вэб хуудасанд тавтай моорилно уу! </U></H1> <P><FONT COLOR=‖red‖ SIZE=‖+1‖ FACE=‖Arial‖>Бид энэ вэбийг <EM>HTML</EM>-ийн гайхамшигийг үзүүлэхийн тулд бэлтгэлээ.</FONT> <FONT COLOR=‖ purple‖ SIZE=‖+2‖ FACE=‖Verdana‖>Бид энэ вэбийг <EM>HTML</EM>-ийн 4.0 <U>хувилбарыг сурч байгаадаа баяртай байна.</FONT> <FONT COLOR=‖blue‖ SIZE=‖+1‖ FACE=‖Helvetica‖ >Энэ нь анхны <EM>HTML</EM>-ийг бодвол богино цаг зарцуулах юм. </FONT> <FONT COLOR=‖green‖ SIZE=‖+2‖ FACE=‖Times‖>удахгүй бид HTML 4.0-ийн маш олон онцлогуудтай танилцах болно.</FONT></P> <H2 ALIGN=‖center‖ >Вэб хуудас хийх нь зугаатай! </h2></P> </BODY> </HTML> <META> tag нь хайлтын программд хэрэгцээтэй мэдээллийг нь өгнө. 2-аттрибуттай. NAME нь <META> tag юу агуулаж буйг, CONTENT нь таны вэб хуудасны тухай мэдээллийг хайлтын программынхаа каталогид орууна


33

META NAME=‖keywords‖ CONTENT=‖We.page, desin, HTML, tutorial, personal, help, index,form, contact, feedback , list, links, frame, deitel‖>

Зураг2.10

<! DOCTYPE HTML PUBLIC ―-// W3C// DTD HTML 4.0 Transitional // EN‖> Энэ нь HTML-ийг үзэгч браузер нь HTML 4.0– ийн уламжлалт (Transitional) хэлбэрийг дагаж мөрдөнө гэснийг харуулж байна. Ихэнх вэб хуудасууд нь нэг хуудаснаас цааш үргэлжлүүлэн холбогдохоор тохируулагдсан байдаг .Үүний тулд жааз нэрлэгдэх элементийн тухай авч үзве. Жишээ 2.11 <! DOCTYPE HTML PUBLIC ‖-//W3C//DTD HTML 4.0 Frameset//EN‖> <HTML> <!—HTML Жааз!--> <HEAD> <META NAME=‖ keywords‖ CONTENT=‖Webpage, design, HTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel ‖> <META NAME=‖description CONTENT=‖This Web site will help you learn the basics of HTML and Webpage design through the use of interactive examples and instruction .‖> </HEAD> <FRAMESET COLS=‖110,*‖>


34

<FRAME NAME=‖nav‖ SRC=‖nav.html‖> <FRAME NAME=‖main‖ SRC=‖main.html‖> <NOFRAMES> <P>This page uses frames , but your browser does not support them .</P> <P>Get Internet Explorer 5 at the <A HREF =‖http://www.microsoft.com//‖> Microsoft web Site</A></P> <NOFRAMES> <FRAMESET> </HTML>

Зураг 2.11 <FRAMESET> tag нь жаазанд хэмжээ өгнө. Салангид FRAME нь өгөгдсөн жаазанд аль хуудас гарч ирэхийг тодорхойлно. COLS tag нь жааз бүрийн өргөнийг заана . COLS=‖110‖ нь 2 жаазтай гэдгийг харуулж байна. 110 нь дэлгэцийн хүрээнээс алслагдах зай бол * нь үлдсэн зайг хэлж байна. Жааз бүрд SRC элемент нь хуудасны URL-ийг зааж өгнө.

2.11 ҮҮРЭН <FRAMESET> TAG <! DOCTYPE HTML PUBLIC ‖-//W3C//DTD HTML 4.0 Frameset//EN‖>


35

<HTML> <!—HTML ЖаазII--> <HEAD> <META NAME=‖ keywords‖ CONTENT=‖Webpage, design, HTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel ‖> <META NAME=‖description CONTENT=‖This Web site will help you learn the basics of HTML and Webpage design through the use of interactive examples and instruction .‖> </HEAD> <FRAMESET COLS=‖110,*‖> <FRAME NAME=‖nav‖ SCROLLING=‖no‖ SRC=‖nav.html‖> <FRAMESET ROWS=‖175,*‖> <FRAME NAME=‖picture‖ SRC=‖picture.html‖ NORESIZE> <FRAME NAME=‖main‖ SRC=‖main.html‖> <NOFRAMES> <P>This page uses frames , but your browser does not support them .</P> <P>Get Internet Explorer 5 at the <A HREF =‖http://www.microsoft.com//‖> Microsoft web Site</A></P> </NOFRAMES> </FRAMESET> </HTML>


36

Зураг 2.12 Үүрэн жааз хийх нь хэлбэр өөрчилөхөөс гадна жаазны хэмжээг тодорхойлдог. Интернэтийн хэцүү болоод илүү нарийвчилсан онцлогуудыг харуулсан маш олон вэб сайтууд байдаг ба тэдгээрээс зарим түгээмэл ашиглагддаг хаягууд: http://www.geocites.com/SiliconVallery/Orchard/5212/ http://www.markradcliffe.co.uk./html/advancehhml.htm http://www.webdeveloper.com

Documents

HTM