Web intro
- 1. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 1 Веб хийх анхдагч технологи • Интернет • WWW буюу Веб • Веб хуудас хийх • HTML-эдиторын тухай • HTML-хэлний команд • HTML-файлын ерөнхий бүтэц • Монголоор бичих • Дасгал • Мэдээллийг шинэ мөрнөөс эхлүүлэх • Гипер холбоос тавих • Дасгал • Зураг оруулах • Зургаар гипер холбоос үүсгэх • Image Map буюу Зураг Хэсэглэх • Хүснэгт үүсгэх • Тексттэй ажиллах зарим таагууд • Тексттэй ажиллах зарим таагууд - 2 • Жагсаалт үүсгэх • Фрейм ашиглах Интернет Интернет бол Дэлхий дахиныг үл харагдах аалзны тор мэт бүрхэн ертөнцийн өнцөг бүрийн компьютерүүдийг хооронд нь холбосон асар том сүлжээ юм. Интернетийн ачаар хүн төрөлхтөн мэдээллийн шинэ эрин үед орсон билээ. Интернетийн түүх 1960-аад оны сүүл үеэс эхтэй. 1968 онд АНУ-д цэрэг, батлан хамгаалахын зориулалтаар компьютеруудыг өөр хооронд нь холбож сүлжээний зохион байгуулалтанд оруулах ARPANET төсөл хэрэгжиж эхлэсэн нь бидний мэдэх интернетийн үүсэл гэж үздэг байна.
- 2. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 2 WWW буюу Веб Интернетийн сүлжээнд холбогдсон үй олон компьютерууд дээр агуулагдах, мөн өөр хоорондоо холбогдсон асар их мэдээллийн сүлжээг WWW (World Wide Web) буюу Веб гэдэг. Веб нь өнөөдөр хамгийн өргөн хэрэглэгддэг мэдээллийн сүлжээ бөгөөд түүний ачаар хүмүүс хүссэн мэдээллээ дэлхийн өнцөг булангаас хүлээн авах, түүнчлэн түгээх боломжийг олж авсан. Интернетэд холбогдож буй хүн бүр энэхүү мэдээллийн сүлжээний нэг хэсэг болох учраас тохирох програм хангамжийн тусламжтайгаар мэдээллийг зөвхөн хүлээн авагч биш мөн түгээгч нь болж чадна. Энэ утгаар нь WWW-г бид интернетийн тусламжтайгаар хэрэгждэг нэгэн төрлийн үйлчилгээ гэж ойлгож болно. Вебийн түүх 1980-аад оны сүүл үеэс эхлэлтэй. 1989 онд Европийн Цөмийн Физикийн Судалгааны Төвд (CERN) дэлхийгээр нэг тархсан судлаач эрдэмтдийг компьютерын сүлжээний тусламжтайгаар өөр хооронд нь холбож, санаа оноогоо солилцож байх боломжийг олгох “WWW” төсөл хэрэгжиж эхлэсэн нь бидний мэдэх вебийн үүсэл юм. WWW-г интернетэд байрлах асар том “номын сан”-тай зүйрлэж болно. “Номын сан” нь үй олон “ном”-оос тогтоно. Ийм “ном”-ыг веб сайт (web site) гэнэ. Веб сайт нь өөрөө хуудсуудаас тогтоно. Ийм хуудсыг веб хуудас (web page) гэнэ. Веб хуудсууд өөр хоорондоо холбоотой байна. Ийм холбоог гипер холбоос (hyperlink) гэдэг. Гипер холбоос нь веб хуудасны аль нэг хэсэгт байрлана. Гипер холбоос гэдэг нь үнэн хэрэгтээ өөр нэг веб хуудсын (сайтын) хаягийг заасан бичиглэл юм. Энэ хаягийг URL-хаяг (Uniform Resource Locator) гэнэ. URL-хаяг нь WWW-д орших веб хуудсын (сайтын) байрлалыг тодорхойлдог. Мэдээж хаяг гэсэн утгаараа энэ нь дахин давтагдахгүй, цорын ганц байна. Хэрэв веб хуудасны гипер холбоос агуулсан тэр хэсэг нь текст байвал түүнийг гипертекст (hypertext) гэнэ. Харин дуу, зураг, хөдөлгөөнт дүрс г.м. байвал гипермедиа (hypermedia) хэмээн нэрийднэ. Хэрэглэгч гипертекстэн (гипермедиа) дээр хулганы курсорыг аваачиж дарахад харгалзах гипер холбоос идэвхжиж, өгөгдсөн URL-хаяг бүхий веб хуудас дуудагдан гарч ирдэг. Ингэж хэрэглэгч WWW-гээр (нэг веб хуудсаас нөгөө хуудас руу, нэг веб сайтаас нөгөө сайт руу) аялах боломжтой болдог байна. Схемчилж үзүүлвээс: Веб хуудас 1 Веб хуудас 2 Веб хуудас 3 Веб хуудас 4 Хэрэглэгч эхлээд 1-р хуудсыг үзэж байна. Дараа нь гипер холбоосоор 2-р хуудас руу, эсвэл 3-р хуудас руу, эсвэл 4-лүү шилжиж болно. Ө.х. нэг веб хуудсанд нэгээс олон гипер холбоос байж болно. WWW-д байрлах веб хуудасны URL-хаягийн жишээ:
- 3. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 3 http://www.baikhguisite.com/index.html Энэ хаяг хэд хэдэн хэсгээс бүтэж байгаа: 1. index.html – веб хуудасны нэр 2. www.baikhguisite.com – веб хуудсыг агуулах веб сайтын домен нэр 3. http – протокол Веб хуудас хийх Вэб хуудсыг HTML хэлний тусламжтайгаар хийдэг. HTML гэдэг нь Hyper Text Markup Language (Гипер Текстийн Хэл) гэсэн англи үгний товчилсон хэлбэр юм. HTML-ийг Basic, Pascal, С г.м. програмчлалын хэлтэй адилтгаж бодож болохгүй. HTML нь компьютерийн хэл биш, энэ нь хялбар энгийн бичиглэлийн нэг хэлбэр юм. Веб хуудас гэдэг нь HTML хэлээр бичсэн текст бүхий файл юм. Ийм файлыг HTML- файл гэдэг. Дотор нь агуулагдах текстийг HTML-код гэдэг. Веб хуудас хийх, ө.х. HTML-код бичихийн тулд танд 2 төрлийн програм хангамж хэрэгтэй болно. 1. Юуны өмнө HTML-код бичиж, HTML-файлыг үүсгэх програм хэрэгтэй. Ийм програмыг HTML-эдитор гэдэг. 2. HTML-файлыг веб хуудас хэлбэрээр нь харуулдаг програм хэрэгтэй. Ийм програмыг веб браузер (web browser) буюу веб үзүүлэгч гэдэг. Windows үйлдлийн системд Internet Explorer хэмээх стандарт браузер байдаг. Түүнчлэн Mozilla FireFox, Netscape Navigator, Opera зэрэг веб браузерууд бий. HTML-эдиторын тухай HTML-эдитор буюу веб хуудас хийдэг програм хангамжийг 3 ангилж болно. 1. Текст эдитор ашиглан HTML-кодыг гараараа бичих HTML-файл нь .htm буюу .html гэсэн өргөтөлтэй ердийн текст (ascii юмуу unicode форматын) файл байдаг. Тиймээс Notepad, Wordpad г.м. стандарт програмуудаар HTML- файлыг нээхэд HTML-код нь харагдах болно. Таагээд та засвараа хийж болно. Мөн HTML-код бичиж, засварладаг HotDog, PageMill, CuteHTML зэрэг тусгай програмууд байдаг. Текст эдитор ашиглаж буй тохиолдолд танд тавигдах гол шаардлага бол та HTML хэлний командуудыг мэддэг байх ёстой. Учир нь та веб хуудасныхаа бүх элементийг нэг бүрчлэн бичиж өгөх хэрэгтэй болно. Ж.нь вэб хуудас руу зураг оруулъя гэвэл тохирох команд ба уг зургийн байрлаж байгаа замыг (location) бичиж өгнө. Алдаагүй бичсэн бол, дараа нь та вэб браузераар HTML-файлаа нээхэд зураг тань харагдаж байх болно. 2. Веб дизайны програм хангамж ашиглах Ийм төрлийн програм нь боловсронгуй ажлын орчныг хэрэглэгчид бүрдүүлж өгдөг. Веб хуудас хийхэд шаардагдах бүх үйлдэл програмын цэсэнд, мөн цэсний доор байрлах хэрэгслийн самбаруудад дүрст товч хэлбэрээр байрласан байдаг. Тиймээс хэрэглэгч бол ердөө хулгана ашиглаад л тэдгээртэй ажиллаж, зураг, текст, хүснэгт, бусад материалыг оруулах г.м.-ээр вэб хуудсаа хийж болдог байна. Харин хэрэглэгчийн хийсэн үйлдэлд харгалзах HTML-код нь цаанаа файлд автоматаар бичигдэж байдаг. Ө.х. хэрэглэгч HTML хэлний бүх командуудыг заавал мэддэг байх шаардлагагүй болж байгаа юм. Цаг хэмнэх, бас хөдөлмөрөө хөнгөвчлөхийн үүднээс ихэнх веб дизайнерууд өнөөдөр ийм эдиторыг ашигладаг. Ийм төрлийн эдиторын жишээ бол Macromedia Dreamweaver, MS Frontpage зэрэг програмууд юм.
- 4. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 4 Өөрийн зүгээс зөвлөхөд, хэрэв та нэгэнт вэб хуудас хийхийг сурч байгаа бол түүний үндэс суурь болсон HTML хэлийг тодорхой хэмжээнд мэддэг байх нь зүйтэй болов уу. HTML хэлний команд HTML хэл нь өөрийн гэсэн командуудтай. Ийм командыг тааг (tag) гэнэ. Эдгээр таагүүдийг ашиглан HTML-кодыг бичдэг. Таагийг томоор, жижгээр бичих нь ялгаагүй. Ихэнх тааг: <тааг атрибут=”утга”> ... </тааг> гэсэн загвараар бичигддэг. Ийм таагийг битүү тааг гэнэ. Энд <тааг> - таагийн эхлэл, </тааг> - таагийн төгсгөл. Энэ эхлэл, төгсгөлийнхөө хооронд тааг үйлчилнэ. Харин зарим тааг дангаараа бичигддэг: <тааг атрибут=”утга” > эсвэл: <тааг атрибут=”утга”/> Ийм таагийг задгай тааг гэнэ. Таагийн үйлчлэл түүний араас дараагийн тааг хүртэл байна. Атрибут (attribute) гэдэг нь таагийг удирдах тохируулга юм. Ийм удирдах тохируулгын тусламжтайгаар тухайн таагийн төлөөлж буй үйлдлийг удирдана, ө.х. ямар шинж чанартай байхыг нь тодорхойлно. Ихэнх тааг өөрийн гэсэн атрибутуудтай байдаг. Бас атрибутгүй тааг ч бий. HTML-файлын ерөнхий бүтэц Аливаа html-файл <html> гэсэн таагээр эхлэж, </html> гэсэн таагээр төгссөн байх ёстой байдаг: <html> ... </html> Энэ битүү таагийн дотор веб хуудасны бүх html-кодыг бичнэ. Веб хуудасны html-кодыг: • толгой хэсэг • их бие гэж хоёр салган авч үзнэ. Толгой хэсэг нь <head> гэсэн битүү таагээр илэрхийлэгдэнэ: <head> ... </head> Энд, веб хуудасны талаарх мэдээлэл тухайлбал хуудасны гарчиг, ашиглаж буй тэмдэгтийн хүснэгт (charset) г.м.-ийг зааж өгдөг. Ж.нь хуудсандаа гарчиг өгье гэвэл <title> гэсэн битүү таагийг ашиглан: <head> <title> Хуудасны гарчиг </title> </head> гэж бичнэ. Толгой хэсэг заавал байх албагүй байдаг. Харин их бие заавал байх ёстой. Их бие нь <body> битүү таагаар тодорхойлогдоно: <body>
- 5. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 5 ... </body> Дараа нь веб хуудсыг браузераар үзэхэд гарч ирэх бүх мэдээллийг энд байрлуулах ёстой. Хэрэв энд хоосон байвал браузер дээр хоосон веб хуудас гарч ирэх болно. Веб хуудасны дэвсгэр өнгийг онцгойлон зааж өгөөгүй бол цагаан өнгөтэй байдаг. Харин текстийн өнгө хар байдаг. Хуудасны дэвсгэр өнгийг өөрчилье гэвэл <body> таагийн bgcolor гэсэн аттрибутад хүссэн өнгөнийхөө утгыг зааж өгөх хэрэгтэй: <body bgcolor=”#өнгө”> Веб хуудасны текстийн өнгийг өөрчилье гэвэл <body> таагийн text гэсэн аттрибутад хүссэн өнгөнийхөө утгыг зааж өгөх хэрэгтэй: <body bgcolor=”#өнгө” text=”#өнгө”> HTML хэлэнд өнгөний утга RGB (Red-Green-Blue) гэсэн үндсэн гурван өнгийн комбинацаар тодорхойлогддог. Үндсэн өнгө бүр 00-FF хүртэлх 16-тын тоогоор илэрхийлэгдэнэ. Тухайлбал #000000 бол хар өнгө. Эсрэгээр #FFFFFF бол цагаан өнгө. Бусад өнгө энэ хоёр өнгийн завсарт байрлана. Ж.нь <body bgcolor=”#A0B0CC”>. Хэрэв 16- тын тоотой ажиллахад хүндрэлтэй байгаа бол өөрийн хүссэн өнгөний кодыг гарган авахын тулд Windows системийн стандарт зургийн програм Paint-ыг ашиглан өнгөний 16-тын кодыг тодорхойлж болно. Монголоор бичих Веб хуудасны текст мэдээллийг монголоор бичих тохиолдолд зарим нэг зүйлийг анхаарах хэрэгтэй болдог. Монголоор бичихэд 2 боломжит сонголт бий: Monkey гарын драйвер ашиглан ASCII-форматаар бичих Windows XP-ийн өөрийнх нь гарын драйверыг ашиглан UNICODE-форматаар бичих Эдгээрийн хооронд ямар ялгаа байдаг вэ? Аливаа компьютерт текст мэдээллийг дүрслэхэд зориулагдсан тэмдэгтийн хүснэгт (charset) гэж байдаг. Ихэнх компьютерын хувьд энэ нь ASCII (American Standard Code for Information Interchange) хэмээх 256 нүдтэй хүснэгт байдаг. ASCII-хүснэгтийн эхний 128 нүд (0-127 хүртэлх) үл өөрчлөгдөх байнгын “эзэн”-тэй болон стандартчилагдаж, харин үлдсэн 128 нүд (128-255 хүртэлх) стандартчилагдаагүй байна. Үүнээс улбаалан, эхний 128 тэмдэгт нь адил боловч, сүүлийн 128 тэмдэгт нь янз бүр байх өөр өөр ASCII-хүснэгтүүд гарч ирдэг. Тухайлбал том, жижиг латин үсгүүд, араб цифрүүд ба бусад тэмдэгтүүд стандарт хэсэгт орсон учраас латин үсгээр бичсэн текст дурын компьютер дээр ямар ч асуудалгүй гарна. Гэтэл кирилл монгол үсгүүд ингэж стандартчилагдаагүй учраас зарим ASCII-хүснэгтийн 128-255 хэсэгт огт ороогүй байж болно, заримд нь орсон байж болно. Хэрэв орсон байлаа гэхэд өөр өөр хүснэгтэд өөр өөр байрлалай байж болно. Ж.нь Windows ба MSDOS үйлдлийн системийн ASCII-хүснэгтүүдийн кирилл үсгийн код адилхан биш. Тиймээс аль нэг дээр нь монголоор бичсэн текст нөгөө дээр зөв гарахгүй. Хэрэв та өөрийн веб хуудасны монгол текстийг ASCII-форматаар бичвэл таны компьютер дээр магадгүй зүгээр гарах боловч өөр нэг хэрэглэгчийн компьютер дээр зөв гарахгүй байж болзошгүй юм. Учир нь тэр хэрэглэгчийн компьютерын ASCII-хүснэгтэнд кирилл монгол үсгүүд ороогүй байж болно. Монголоор бичихэд өргөн ашиглагддаг Arial Mon, Times New Roman Mon, Courier New Mon г.м. фонтууд бол ASCII-хүснэгтэд харгалзах фонтууд юм. Харин UNICODE хэмээх 65536 нүдтэй тэмдэгтийн хүснэгтэнд кирилл монгол үсгүүд стандарт болон багтсан байдаг ажээ. Тиймээс энэ форматаар монголоор бичвэл Windows XP-тэй компьютер дээр зүгээр гарна. XP-ээс өмнөх хувилбарын Windows-той компьютерын
- 6. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 6 хувьд “ө”, “ү” үсгүүд дээр жаахан асуудал гараад бусад үсгийн хувьд проблем байдаггүй. Arial, Courier New, Times New Roman г.м. фонтууд UNICODE-хүснэгтэл харгалзана. Windows дээр ажилладаг веб браузерууд нь монголоор бичих боломжтой ASCII- хүснэгтүүдийг windows-1251, windows-1252 гэсэн кодоор, харин UNICODE-хүснэгтийг utf-8 гэсэн кодоор тэмдэглэдэг байна. Веб хуудсандаа эдгээрийн ашиглах вэ гэдгээ зааж өгөхийг тэмдэгтийн кодчилол (character encoding) гэдэг. Дээр дурдсанчлан тэмдэгтийн кодчилолыг веб хуудасны толгой хэсэгт, <head> гэсэн битүү тааг дотор бичнэ. Ингэхдээ <meta> гэсэн нээлттэй таагийг ашигладаг. Ж.нь Unicode-форматаар монголоор бичнэ гэвэл: <head> <meta content='charset=utf-8'> </head> гэж бичнэ. Дасгал Сая үзсэн зүйлстэйгээ холбоотой дасгал хийж үзье. Дараах зурагт үзүүлсэн веб хуудсыг яаж хийх вэ? Ашиглаж буй компьютер Windows XP үйлдлийн системтэй, ашиглаж буй веб браузер Internet Explorer. 3. Notepad програмыг ачаалж шинэ текст файл үүсгэе: 4. Өмнөх сэдэвт үзсэн html-кодыг нэгтгэн бичье:
- 7. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 7 5. Windows XP-ийн гарын драйверыг монгол болгож байгаад: веб хуудасныхаа монгол гарчгийг бичье: 6. Веб хуудасны их бие дотор монгол текстийг бичнэ: 7. Текст файлаа html-файл болгож хадгалъя. File/Save as гээд дараах цонхыг гаргаж ирээд:
- 8. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 8 Filename талбарт html-файлынхаа нэрийг өргөтгөлийн хамт ж.нь mypage.html гэж бичээд: Save as type талбараас All Files гэснийг сонгоод: Encoding талбараас UTF-8 гэснийг сонгоод Save товчийг дарна: Ингэхэд mypage.html гэсэн файл үүсэх болно.
- 9. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 9 Энэ файлаа сонгоод Enter дарахад Internet Explorer ажиллаж, файлын html-кодыг веб хуудас хэлбэрээр харуулах болно: Хэрэв бүтэлтэй болсон бол баяр хүргэе. Та анхны веб хуудсаа хийсэн байна. 8. Үүсгэсэн хуудасныхаа дэвсгэр өнгө болон текстийн өнгийг янз бүрээр өөрчилж үз. Мэдээллийг шинэ мөрнөөс эхлүүлэх Веб хуудасны мэдээллийг, тухайлбал текстийг шинэ мөрнөөс эхлүүлье гэвэл <br> гэсэн задгай таагийг ашиглах хэрэгтэй. Шинэ мөрнөөс эхлүүлэх текстийнхээ өмнө, ө.х. сая дээд талынх нь текстийн ард энэ таагийг байрлуулна. Ж.нь: <body> Энэ миний анхны веб хуудас. <br> Миний веб хуудсанд тавтай морил. </body>
- 10. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 10 Гипер холбоос тавих HTML хэлэнд гипер холбоосыг <a> гэсэн битүү тааг ашиглаж оруулдаг. Гипер холбоосоор холбогдож буй веб хуудас нь нэг бол гипер холбоосыг оруулж буй веб хуудастай хамт нэг компьютер дээр байж болно. Эсвэл интенетэд тодорхой URL-хаягаар байрласан байж болно. Ж.нь: <body> <a href=”index.html”> Энд дар </a> </body> эсвэл: <body> <a href=”files/index.html”> Энд дар </a> </body> эсвэл: <body> <a href=”http://www.baixguisite.com/index.html”> Энд дар </a> </body> г.м. Энд буй href нь <a> таагийн атрибут бөгөөд гипер холбоосын хаягийг тодорхойлдог нь харагдаж байна. Дасгал mypage.html веб хуудсандаа хоёр гипер холбоос нэм. Эхнийх нь mypage1.html гэсэн веб хуудсыг заасан байх ёстой. Хоёрдох нь mypage2.html гэсэн веб хуудсыг заасан байх ёстой:
- 11. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 11 Notepad програм дээрээ mypage1.html веб хуудсыг үүсгэ. Энэ веб хуудас нь дотроо mypage.html-ийг заасан гипер холбоос агуулсан байх ёстой: Notepad програм дээрээ mypage2.html веб хуудсыг үүсгэ. Энэ веб хуудас нь дотроо mypage.html-ийг заасан гипер холбоос агуулсан байх ёстой: Эхний веб хуудсаас Веб хуудас 1-ийг дарахад, Веб хуудас 1 гарч ирэх ёстой. Буцах гэдгийг дарж эхний хуудас руу шилжих ёстой. Дараа нь Веб хуудас 2-ыг дарахад, Веб
- 12. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 12 хуудас 2 гарч ирэх ёстой. Буцах гэдгийг дарж эхний хуудас руу шилжих ёстой. Хэрэв бүтэлтэй болсон бол баяр хүргэе. Та анхны веб сайтаа хийсэн байна. Зураг оруулах Зураг бол веб хуудсыг хүн үзэхэд сонирхолтой болгодог, түүний мэдээллийн агуулгыг баяжуулж, өнгө үзэмжийг сайжруулдаг гол элементийн нэг юм. Ямар ч зураггүй, зөвхөн текст агуулсан веб хуудас нэг л “амьгүй”, “уйтгартай” байдаг. Зургийг ямагт файл хэлбэрээр оруулна. Веб технологит GIF (Graphics Interchange Format), JPG/JPEG (Joint Photographic Experts Group), PNG (Portable network Graphics) төрлийн зургийн файлууд ихэвчлэн ашиглагддаг. Веб хуудсанд зураг оруулахдаа <img> гэсэн задгай тааг ашиглана. Энэ таагийн src аттрибут нь тухайн зургийн файлын зам, эсвэл интернет дэхь URL-хаягийг зааж өгөх ёстой. Ж.нь тухайн веб хуудастай нэг фолдер дотор байгаа images гэсэн фолдер доторх picture.jpg гэсэн файлыг оруулъя гэвэл: <img src=”picture.jpg”> Харин интернетэд тодорхой URL-хаягаар байрлаж буй picture.gif файлыг оруулъя гэвэл: <img src=”http://www.baikhguisite.com/images/picture.jpg”> Зургийн таагийн бусад аттрибуттай танилцъя. alt аттрибут нь тухайн зураг ачаалагдаж байх үед эсвэл курсорыг зургийн дээр аваачихад эсвэл зураг ямар нэг шалтгаанаар үзэгдэхгүй болсон үзэгдэх текстийг тодорхойлно. Ж.нь: <img src=”picture.jpg” alt=”Зураг ачаалагдаж байх үед эсвэл курсорыг зургийн дээр аваачихад эсвэл зураг ямар нэг шалтгаанаар үзэгдэхгүй болсон үед энэ текст харагдана!!!”> height, width аттрибутууд нь зургийн харагдах хэмжээг пикселээр тодорхойлно. Харин align аттрибут нь зураг хуудасны тухайн төвшиндөө ямар байрлалд гарахыг тодорхойлно. Боломжит утгууд: bottom|left|middle|right|top. Ж.нь: <body> Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. <img src="picture.jpg" height="216" width="216" align="right"> </body>
- 13. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 13 hspace, vspace аттрибутууд нь зургийг хүрээлсэн сул зайг үүсгэнэ. Ж.нь: <img src="picture.jpg" height="216" width="216" hspace="10" vspace=”10”> гэвэл зургийн дээр доор 10, зүүн баруунд 10 пикселийн өргөнтэй сул зай авагдана. Зургаар гипер холбоос үүсгэх Зургийн <img> задгай таагийг гипер холбоосын <a> битүү тааг дотор байрлуулвал бид гипер холбоос бүхий зурагтай болно. Ө.х. тухайн зураг дээр курсорыг байрлуулж дарахад гипер холбоос ажиллана. Ж.нь: <body> <a href=”delkhii.html”> <img src="picture.jpg” height="216" width="216" align="right""> </a> </body> Зураг дээр дарахад дараах веб хуудас гарч ирэх болно:
- 14. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 14 Image Map буюу Зураг Хэсэглэх Одоо нэн сонирхолтой нэг боломжийн талаар дурдъя. <map> хэмээх битүү таагийн тусламжтайгаар нэг зургийн янз бүрийн хэсэгт өөр гипер холбоос харгалзуулж болдог байна. Үүнийг Image Map буюу Зураг мужлах хэмээн нэрийднэ. Ж.нь бид дэлхийн газрын зураг дээр image map хийгээд, австрали дээр дарахад австралийн тухай веб хуудас, Мадагаскар арал дээр дарахад Мадагаскарын тухай веб хуудас гарч ирдэг г.м. гипер холбоос үүсгэж болно. Үүнийг хийж үзье. Эхлээд бид зургаа оруулна. Оруулж буй зургаа Image map-тай болгохын тулд зургийн таагийн usemap гэсэн аттрибутыг ашиглана. Энэ аттрибут нь тухайн зураг дээр “тавигдах” image map-ын нэрийг тодорхойлдог байна. Тухайлбал: <body> <img src="world_atlas.jpg” height="256" width="512" usemap="#myimagemap"> </body> Энд бид world_atlas.jpg гэсэн зургаа myimagemap гэсэн нэр бүхий Image map-тай холбож өгч байгаа юм. Одоо энэхүү myimagemap хэмээх image map-аа үүсгэх ёстой. <body> <img src="world_atlas.jpg” height="256" width="512" usemap="#myimagemap"> <map name=”myimagemap”> … </map> </body> Таагээд энэ тааг дотор, зургийн дэвсгэрийн хаанаас ямар хэлбэртэй мужийг сонгож авахаа бичнэ. Ингэхдээ <area> гэсэн задгай тааг ашиглана. Манай зураг 512x256 пикселийн хэмжээтэй байна. Зургийн өргөн ба өндөр нь зүүн дээд булангаасаа (0,0) гэсэн координатаас тоологдож байгаа. Хэрэв австрали тивийг багтаасан зүүн дээд булан нь (417, 143), баруун доод булан нь (476, 186) гэсэн координаттай таагш өнцөгт хэлбэрийн муж сонгоно гэвэл: <map name=”myimagemap”> <area shape=”rect” coords=”417,143, 476,186” href=”austalia.html”>
- 15. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 15 </map> shape аттрибут мужийн хэлбэрийг зааж байна. coords аттрибут координатын цэгүүдийг зааж байна. href аттрибут нь гипер холбоосын цаад үзүүр дэхь веб хуудсыг зааж байна. Өөр муж нэмэхийн тулд дахиад нэг <area> ашиглана: <map name=”myimagemap”> <area shape=”rect” coords=”417,143, 476,186” href=”austalia.html”> <area shape=”rect” coords=”319,147, 324,164” href=”madagaskar.html”> </map> shape аттрибут нь “rect”-ээс гадна “circle” (энэ тохиолдолд координат нь “x,y,radius”), “polygon” (энэ тохиолдолд координат нь “x1,y1, x2,y2, x3, y3, x4, y4, ...”) гэсэн утгууд авах боломжтой. Одоо дэлхийн газрын зураг дээр Австралийг дарвал:
- 16. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 16 Харин Мадагаскарыг дарвал: Хүснэгт үүсгэх Веб хуудас дээр зураг болон текстийг янз бүрийн байршилтайгаар гаргахдаа хүснэгт ашигладаг. Ингэж хүснэгт ашигласнаар веб хуудас эмх цэгцтэй, тодорхой загвар дизайнтай мэт харагддаг. Хүснэгтийг <table> гэсэн битүү таагийн тусламжтай үүсгэдэг: <table> … </table>
- 17. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 17 Энэ тааг дотроо хүснэгтийнхээ хэдэн мөр, хэдэн баганатай байхыг зааж өгнө. Мөрийг <tr> гэсэн битүү таагээр, баганыг <td> гэсэн битүү таагээр үүсгэнэ. Ингэхдээ эхлээд мөрөө үүсгээд, мөр дотроо хэдэн баганатай байхыг зааж өгнө. Ж.нь: <body> <table> <tr> <td> Энэ бол 1-р мөрийн 1-р багана </td> <td> Энэ бол 1-р мөрийн 2-р багана </td> <td> Энэ бол 1-р мөрийн 3-р багана </td> </tr> <tr> <td> Энэ бол 2-р мөрийн 1-р багана </td> <td> Энэ бол 2-р мөрийн 2-р багана </td> <td> Энэ бол 2-р мөрийн 3-р багана </td> </tr> </table> </body> Дээрх жишээнд 2 мөртэй, 3 баганатай хүснэгт үүсгэж байна. Зураг нь энэ байна: Дээрх зурагт, хүснэгтийн гадна хүрээ болон нүднүүдийн хүрээ харагдахгүй байна. Хүрээнүүдийг үзэгддэг болгохын тулд <table> таагийн border гэсэн аттрибутыг бичиж өгөх хэрэгтэй. Хэрэв энэ аттрибутын утгыг 0-ээс ялгаатай байхаар бичиж өгвөл хүснэгтийн хүрээнүүд харагдана. Тухайлбал өмнөх жишээнд: <table border=”2”> гэж бичвэл:
- 18. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 18 Одоо хүснэгтийн хүрээнүүд харагдаж байна. Хэрэв border=”0” гэж өгвөл дахиад хүрээгүй болчихно. <table> таагийн бусад зарим аттрибутыг дурдвал: • <table width=”тоо”> эсвэл <table width=”хувь%”> - хүснэгтийн өргөнийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь <table width=”100%”> гэвэл хүснэгтийн өргөн цонхны өргөнтэй адил байна. • <table height=”тоо”> эсвэл <table height=”хувь%”> - хүснэгтийн өндрийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь <table height=”50%”> гэвэл хүснэгтийн өндөр цонхны өндрийн 50 % байна. • <table align=”утга”> - хүснэгтийг цонхны аль нэг тал руу шахаж, эсвэл голлуулж байрлуулна. Боломжит утгууд нь: left|right|center. Ж.нь <table align=”center”> гэвэл хүснэгт цонхны голд байрлана. • <table bgcolor=”#өнгө”> - хүснэгтийн дэвсгэр өнгийг зааж өгнө. Ж.нь <table bgcolor=”#AABBCC”> гэхэд: • <table background=”зургийн_файл”> - хүснэгтэнд дэвсгэр зураг тавьж өгнө. Тухайлбал <table background =”picture.jpg”> гэвэл picture.jpg файлыг хүснэгтийн арын фон болгож тавьна. Дээр дурдсан width, heigth, bgcolor, background, align аттрибутуудыг <tr> болон <td> таагуудад бас бичиж болно. Түүнээс гадна мөр болон баганы хувьд valign гэсэн аттрибут бас бий. Энэ нь тесктийг тухайн мөр буюу багана дотор дээшээ юм уу доошоо шахаж эсвэл голлуулж байрлуулна. Боломжит утгууд нь: : top|bottom|middle. Дараах жишээг харцгаая:
- 19. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 19 <body> <table border="2" bgcolor="#BBCCAA" width="60%" align="center"> <tr> <td valign="top"> Энэ бол Адагчуулганы мананцар. Манай галактикийн ойрын хөршүүдийн нэг. Дэлхийгээс 2 сая орчим гэрлийн жилийн зайд оршдог. Эрдэмтэд манай галактикийг яг энэ Адагчуулганы мананцар галактиктэй маш төстэй хэлбэр дүрстэй гэж үздэг. Тэнд юу байгаа бол? </td> <td> <img src="Andromeda_galaxy.jpg" width="256" height="192" > </td> </tr> <tr> <td valign="top"> Ах дүү Вачовскийн зохиосон Матриц киног үзсэн хэн бүхэн өөрөөсөө асуулт асуудаг. Биднийг хүрээлэн буй ертөнц, бидний мэдэрч буй бүхэн үнэн хэрэгтээ ямар нэг компьютерын програмын үр дүн байж болох уу? Өөрөөр хэлбэл бид компьютерын програм дотор амьдарч байвал яах вэ? </td> <td> <img src="Matrix_film.jpg" width="256" height="192"> </td> </tr> <tr> <td valign="top"> Хүн үүсэхээс бүүүүүүр өмнө, олон арван сая жилийн өмнө манай гариг өөр эзэдтэй байжээ. Тэд бол үлэг гүрвэлүүд юм. Аварга том, өчүүхэн жижиг, гүйдэг, харайдаг, үсэрдэг, дэвхцдэг, өвсөн тэжээлтэй, махан идэштэй гээд үй түмэн зүйлийн үлэг гүрвэл хуурай газрыг эзэгнэж байжээ. </td> <td> <img src="Dinosaurs.jpg" width="256" height="192" > </td> </tr> </table> </body> Хүснэгт ингэж харагдах нь ээ:
- 20. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 20 Тексттэй ажиллах зарим таагууд Том хэмжээний текст ихэвчлэн дэд хэсгүүдэд (параграфуудад) хуваагдсан байдаг. HTML хэлэнд үүнийг <p> гэсэн битүү таагаар гүйцэтгэнэ. Өнгөц бодоход энэ тааг нь өмнө үзсэн текстийг шинэ мөрнөөс эхлүүлдэг <br> задгай таагтай төстэй. Гэхдээ текстийг шинэ мөрнөөс эхлүүлэхдээ шинэ параграф үүсгэж эхлүүлдгээрээ ялгаатай. Бидний уншиж дадсан ном сурах бичигт параграфууд догол мөрөөр эхлэсэн байдаг бол веб браузерт нэг сул мөрөөр эхлэдэг. Текстийг гарчиг хэлбэрээр харуулахын тулд <h1>, <h2>, <h3>, <h4>, <h5>, <h6> гэсэн битүү таагуудыг ашиглана. <h1> нь хамгийн том, <h6> нь хамгийн жижиг хэмжээ юм. Хуудасны аль ч хэсэгт текстийг хуудасны зүүн юм уу баруун захад шахаж, эсвэл голлуулж гаргахын тулд харгалзан <left>, <right>, <center> гэсэн битүү таагуудыг ашиглана. Текстийг бүдүүн шрифтээр (bold), эсвэл доогуур зураастай шрифтээр (underline), эсвэл налуу шрифтээр (italic) гаргахын тулд харгалзан <b>, <u>, <i> гэсэн битүү таагуудыг ашиглана. Мэдээж бүдүүн мөртлөө налуу тэгээд доогуур зураастай текст байж болно. Дээр дурдсан бүгдийг нэгтгэсэн жишээ: <body> <h1><center>Вебийн тухай</center></h1> <h3><i>Интернет гэж юу вэ?</i></h3> <p>
- 21. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 21 <b>Интернет</b> бол Дэлхий дахиныг үл харагдах аалзны тор мэт бүрхэн ертөнцийн өнцөг бүрийн компьютерүүдийг хооронд нь холбосон асар том сүлжээ юм. Интернетийн ачаар хүн төрөлхтөн мэдээллийн шинэ эрин үед орсон билээ. </p> <p> Интернетийн түүх 1960-аад оны сүүл үеэс эхтэй. 1968 онд АНУ-д цэрэг, батлан хамгаалахын зориулалтаар компьютеруудыг өөр хооронд нь холбож сүлжээний зохион байгуулалтанд оруулах ARPANET төсөл хэрэгжиж эхлэсэн нь бидний мэдэх интернетийн үүсэл гэж үздэг байна. </p> <center><img src="Internet.jpg" width="132" height="122"></center> <h3><i>WWW буюу Веб</i></h3> <p> Интернетийн сүлжээнд холбогдсон үй олон компьютерууд дээр агуулагдах, мөн өөр хоорондоо холбогдсон асар их мэдээллийн сүлжээг <b>WWW</b> (<b>World Wide Web</b>) буюу <b>Веб</b> гэдэг. Веб нь өнөөдөр хамгийн өргөн хэрэглэгддэг мэдээллийн сүлжээ бөгөөд түүний ачаар хүмүүс хүссэн мэдээллээ дэлхийн өнцөг булангаас хүлээн авах, түүнчлэн түгээх боломжийг олж авсан. </p> <p> Вебийн түүх 1980-аад оны сүүл үеэс эхлэлтэй. 1989 онд Европийн Цөмийн Физикийн Судалгааны Төвд (CERN) дэлхийгээр нэг тархсан судлаач эрдэмтдийг компьютерын сүлжээний тусламжтайгаар өөр хооронд нь холбож, санаа оноогоо солилцож байх боломжийг олгох “WWW” төсөл хэрэгжиж эхлэсэн нь бидний мэдэх вебийн үүсэл юм. </p> <p> WWW-г интернетэд байрлах асар том “номын сан”-тай зүйрлэж болно. “Номын сан” нь үй олон “ном”-оос тогтоно. Ийм “ном”-ыг <b>веб сайт</b> (<b>web site</b>) гэнэ. Веб сайт нь өөрөө хуудсуудаас тогтоно. Ийм хуудсыг <b>веб хуудас</b> (<b>web page</b>) гэнэ. </p> </body> Веб браузерт ингэж харагдах болно:
- 22. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 22 Тексттэй ажиллах зарим таагууд - 2 Бид текстийг шинэ мөрөөс эхлүүлдэг <br> болон <p> таагуудыг мэддэг болсон. Тэгвэл текстийг шинэ мөрөөс эхлүүлдэг бас нэг тааг байна. Энэ нь <hr> гэсэн задгай тааг юм. Энэ тааг нь текстийг шинэ мөрөөс эхлүүлэхдээ эхлээд хэвтээ шугам зураад, доороос нь тесктээ гаргадаг. Ж.нь: <body> Энэ миний анхны веб хуудас. <hr> Миний веб хуудсанд тавтай морил. </body>
- 23. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 23 Хэвтээ шугамын зузааныг (бүдүүнийг) size аттрибут тодорхойлно. Хэвтээ шугамын цонхны өргөнтэй харьцангуй өргөнийг width аттрибут тодорхойлно. Шугамын өргөнийг цонхны өргөнөөс багаар өгсөн тохиолдолд align аттрибут шугамыг цонхны зүүн, баруун тал руу шахаж эсвэл голлуулж байрлуулахыг зааж өгнө. Боломжит утгууд: left|right|center. <body> Энэ миний анхны веб хуудас. <hr size=”10” width=”50%”> Миний веб хуудсанд тавтай морил. </body> Тоог индекс хэлбэрээ бичихдээ <sub> битүү тааг дотор бичнэ. Тоог зэрэг хэлбэрээр бичихдээ <sup> битүү тааг дотор бичнэ. Ж.нь: <body> Масс, энергийн харилцан хамаарал E=mc<sup>2</sup> томъёогоор илэрхийлэгдэнэ... <br> M<sub>i,j</sub> бол M матрицын i-р мөр, j-р баганын элемент юм... </body> Текстийн үсгийн фонтыг тодорхойлохдоо <font> битүү таагийг ашиглана. Фонтын үсгийн өнгийг заахдаа color аттрибут, үсгийн хэмжээг заахдаа size гэсэн аттрибутыг бичиж өгнө. Ж.нь: <body> <font color="#008080"> Масс, энергийн харилцан хамаарал <font color="#FF0000">E=mc<sup>2</sup></font> томъёогоор илэрхийлэгдэнэ...
- 24. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 24 </font> <br> <font color="#2200FF" size="6"> <font color="#FF0000">M<sub>i,j</sub></font> бол M матрицын i-р мөр, j-р баганын элемент юм... </font> </body> Жагсаалт үүсгэх Заримдаа мэдээллийг жагсаалт хэлбэрээр гаргах шаардлага тулгардаг. Жагсаалт тоогоор дугаарлагдан эрэмбэлэгдсэн байж болно. Эсвэл дугаарлагдаагүй байж болно. Тоогоор дугаарлагдсан жагсаалт үүсгэхийн тулд эхлээд <ol> гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо <li> гэсэн задгай таагийг оруулж, ардаас нь эрэмбэлэх элементээ бичиж өгнө. Хэрэв N тооны элементийг эрэмбэлэх бол N удаа <li> таагийг оруулна. Ж.нь: <body> Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино: <ol> <li>Титаник (Titanic) <li>Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King) <li>Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest) <li>Харанхуйн хөлөг баатар (The Dark Knight) <li>Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone) <li>Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End) <li>Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix) <li>Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers) <li>Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace) <li>Шрек 2 (Shrek 2) </ol> </body>
- 25. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 25 Дугааргүй жагсаалт үүсгэхийн тулд эхлээд <ul> гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо <li> гэсэн задгай таагийг оруулж, ардаас нь жагсаалтын элементээ бичиж өгнө. Хэрэв N тооны элементийг жагсаах бол N удаа <li> таагийг оруулна. Ж.нь: <body> Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино: <ul> <li>Титаник (Titanic) <li>Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King) <li>Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest) <li>Харанхуйн хөлөг баатар (The Dark Knight) <li>Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone) <li>Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End) <li>Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix) <li>Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers) <li>Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace) <li>Шрек 2 (Shrek 2) </ul> </body>
- 26. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 26 Нэг жагсаалт дотор өөр нэг жагсаалт орсон байж болно. Тухайлбал: <body> <ol> <li>Монгол: <ul> <li>Улаанбаатар <li>Хөвсгөл <li>Говь <li>Үлэг гүрвэл <li>Наадам </ul> <li>Хятад: <ul> <li>Бээжин <li>Цагаан хэрэм <li>Хайнань <li>Зуны олимп 2008 </ul> <li>Орос: <ul> <li>Москва <li>Санкт-Петербург <li>Байгаль нуур <li>Сибирь <li>Путин </ul> </ol> </body>
- 27. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 27 Фрейм ашиглах HTML хэлэнд фрейм (frame - жааз) гэж нэг элемент байдаг. Энэ элементийг ашиглан веб хуудас дотор веб хуудас байрлуулж болдог. Шууд жишээ авч тайлбарлая. Бидэнд undsen.html, aguulga.html, page1.html, page2.html, page3.html гэсэн веб хуудсууд байг. undsen.html нь өөртөө 2 фрейм агуулна. Зүүн талын фреймд aguulga.html-ыг байрлуулна. aguulga.html хуудсанд page1.html, page2.html, page3.html хуудсуудыг дуудсан гипер холбоосууд байна. Гипер холбоосуудын аль нэг дээр дарахад харгалзах веб хуудас (page1.html, page2.html, page3.html-ын аль нэг) нь баруун талын фрейм дотор нээгдэн гарч ирнэ. undsen.html-ыг хамгийн анх удаа браузерт нээхэд баруун талын фреймд page1.html нээгдэнэ. За, ерөнхий санаа нь ойлгогдов уу? Нэг иймэрхүү байдалтай харагдах ёстой: Aguulga.html Page1.html Page2.html Page3.html page1.html Энэ бол page1. Эхлээд undsen.html дотор фреймийн кодыг бичье. Фрейм үүсгэхийн тулд <frameset> гэсэн битүү тааг ашиглана: <frameset> … </frameset> Хамгийн чухал зүйлээ хэлье. <frameset> таагийг <body> таагийн оронд бичдэг. Ө.х. <frameset> тааг орж ирсэн html-файлд <body> тааг байх ёсгүй! Дээрх зурагт үзүүлсэн шиг хэвтээгээр цуварсан хоёр фрейм үүсгэхийн тулд cols гэсэн аттрибутад утга оноох хэрэгтэй. Манай тохиолдолд энэ нь: <frameset cols=”30%, 70%”>
- 28. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 28 … </frameset> Энэ нь эхний фрейм цонхны өргөний 30%-ийг, хоёр дахь фрейм үлдсэн 70%-ийг эзэлнэ гэсэн үг юм. Нэг асуулт асууя. Босоо гурван фрейм үүсгэе гэвэл яах вэ? Фрейм гэдэг бол өөртөө зураг хадгалдаг жаазтай төстэй гэж дээр дурдсан. Жааз бол хүрээтэй байдаг. Харин хүрээ нь тодорхой өргөнтэй байдаг. Хэрэв хүрээний өргөн 0-тэй тэнцүү бол жаазны хэмжээ зургийн хэмжээтэй давхацна. Тэгэхээр хүрээний өргөнийг 0-ээс ялгаатай өгвөл зохимжтой. Фреймийн хүрээний өргөнийг border гэсэн аттрибутаар тодорхойлно. Манай тохиолдолд 10 гэсэн утга зааж өгье: <frameset cols=”30%, 70%” border=”10”> … </frameset> Дараагийн алхамд <frameset> дотроо <frame> гэсэн задгай таагийг бичнэ. Хэдэн фрейм үүсгэх шаардлагатай байна, тэрний тоогоор энэ таагийг бичнэ. Манай тохиолдолд хоёр удаа <frame> таагийг бичнэ: <frameset cols=”30%, 70%” border=”10”> <frame> <frame> </frameset> Иймэрхүү байдалтай харагдана: Юуны өмнө үүсгэсэн фреймүүдээ нэрлэж өгөх шаардлагатай. Үүний тулд <frame> таагийн name гэсэн аттрибутыг ашиглана: <frameset cols=”30%, 70%” border=”10”> <frame name=”zuun_frame”> <frame name=”baruun_frame”> </frameset> Фрейм дотроо веб хуудас байрлуулахын тулд frame таагийн src гэсэн аттрибутад веб хуудсынхаа html-файлыг зааж өгөх хэрэгтэй: <frameset cols=”30%, 70%” border=”10”> <frame name=”zuun_frame” src=”aguulga.html”> <frame name=”baruun_frame” src=”page1.html”> </frameset> Фреймүүд агуулсан веб хуудасны код ингээд гүйцээ. Одоо фреймүүдэд тавигдах веб хуудаснуудыг үүсгэх хэрэгтэй.
- 29. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 29 aguulga.html дотор гипер холбоосуудыг бичихдээ <a> таагийн target гэсэн аттрибутыг тодорхойлох хэрэгтэй. Энэ аттрибутын авах утга нь фреймийн нэр байна. Ө.х. гипер холбоосоор дуудагдах веб хуудсыг байрлуулах тэр фреймийн нэр байна. Манай тохиолдолд энэ нь baruun_frame гэсэн утга байх ёстой: <body> <a href="page1.html" target="baruun_frame"> Хуудас 1 </a><br> <a href="page2.html" target="baruun_frame"> Хуудас 1 </a><br> <a href="page3.html" target="baruun_frame"> Хуудас 1 </a> </body> Эцэст нь page1.html, page2.html, page3.html файлуудыг үүсгэх хэрэгтэй. Ингээд бүх шаардлагатай үйлдлийг хийсний дараа undsen.html файлыг браузерт нээхэд ингэж харагдана: Хуудас 2 дээр дарахад: Дээрх жишээнд бид хэвтээгээр цуварсан фреймүүд үүсгэлээ. Хэрэв босоогоор цуварсан фреймүүд үүсгэе гэвэл <frameset> таагийн rows гэсэн аттрибутыг тодорхойлох хэрэгтэй. Түүнчлэн фрейм дотор фрейм үүсгэж болдог. Тухайлбал:
- 30. “МТМС” хичээлийн семинар Веб хийх анхдагч технологи 30 хэлбэрийн фреймүүдийг үүсгэхийн тулд фрейм дотор фрейм байрлуулна. Ө.х. <frameset> дотор дахин <frameset> бичнэ гэсэн үг: <frameset> <frame rows=”100, *”> <frameset cols=”40%, 60%”> <frame> <frame> </frameset> </frameset>