Тавтай морилно уу!

2013-10-23, 12:57

hicheel

 HTML-ийн тухайТааг гэж юу вэ?Таагуудын үндсэн шинж, бичигдэх дүрэм HTML, түүний онцлогҮндсэн таагуудТекст хэвжүүлэх таагуудГарчиг тодорхойлохтаагТайлбар бичих

                       
    HTML-ийн тухай27Вэб хуудас бүр мэдээллээ хэрхэн харуулах зааврыг агуулдаг ба вэб           броузер хэрэгсэл эдгээр зааврыг уншиж харуулна. Хуудас харуулах зааврыг HTML гэж           нэрлэгдэх кодчлолоор бичдэг. HTML гэдэг нь вэб бүтээхэд зориулагдсан, мэдээллийн харагдах байдлыг тохируулахад хэрэглэгддэг хэлюм.HTML – Hyper Text Markup LanguageHTML файл нь html юмуу htmөргөтгөлтэй байна.

HTML тааг28HTML нь таагуудаас бүрддэг. Тааг гэдэг нь текст болоод бусад агуулгуудыг броузерт хэрхэн харагдуулахыг хэлдэг заавар юм.Тааг нь их, багын(< >) тэмдгийн хооронд бичигддэг.Вэб хуудасны HTML кодыг харахдаа хулганы баруун товчийг дарж View Page Source гэсэн сонголтыг хийнэ.Нээх, хаах таагууд гэж байна. - Нээх тааг - Хаах таагТаагт мөн агуулга гэсэн ойлголт байдаг. Таагийн агуулга нь нээх, хаах таaгийн хооронд бичигддэг.Агуулга

Вэб хуудас үүсгэх29Дурын текст засварлагч програмыг нээнэ.Энэ текст тодоор харагдана - гэжфайл дотроо бичнэ.Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална. Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.

Вэб хуудас нэрлэх30ЗөвлөмжҮүсгэсэн вэб хуудсуудаа нэрлэхдээ аль болох ойлгомжтой нэрээр нэрлэх хэрэгтэй.Олон үгнээс бүрдсэн нэрээр нэрлэх бол үгнүүд хооронд хоосон зай авч болохгүй.Бүх үгнүүдийг жижгээр нэрлэ.Олон үгнээс бүрдсэн нэрээр нэрлэх хэрэгтэй бол үгнүүдийг дундуур зураасаар холбох хэрэгтэй.web-design-lecture.htmlИхэнх вэб дизайнерууд, вэб програмистууд вэб хуудсаа нэрлэхдээ үгнүүдийг доогуур зураас ашиглан холбодог. Хайлтын систем хуудасны нэрлэлтийг тухайн хуудасны талаар мэдээлэл олж авахдаа ашигладаг бөгөөд доогуур зураасаар холбосон нэрийг нэг үг хэмээн үздэг.web_design_lecture.html= webdesignlecture.html

Таагийн атрибут31Таагт атрибут нь тухайн таaг ямар шинж чанартай байхыг хэлж өгдөг. Атрибутнь нээх таaг дотроо(<> тэмдгийн хооронд) байрладаг ба нэр ба утгаар тодорхойлогдоно. Бичигдэх хэлбэр:Аттрибутын нэр = “утга”Жишээ:Вэб дизайн title – Тухайн элемент дээгүүр хулгана өнгөрөхөд харагдах текстийг тохируулдаг атрибут.

HTML хувилбарууд32Уг хичээлийн туршид HTML –ийн нэг хувилбар болох XHTML-ийг ашиглана. Яагаад XHTML хувилбар гэж?Ихэнх вэб броузерууд буруу, алдаатай бичигдсэн HTML кодуудыг зөв дүрсэлж харуулах чадвартай байдаг. Гэвч сүүлийн үед хүмүүс зөвхөн компьютер дээрээс вэб үзэхээс гадна гар утас ашиглан вэб үзэх хандлага ихэссэн. Гар утас зэрэг хязгаарлагдмал нөөц бүхий төхөөрөмж дээр ажиллаж байгаа вэб броузерууд алдаатай бичигдсэн HTML кодыг зөв болгон хөрвүүлж, дүрсэлж чаддаггүй. XHTML бичигдсэн кодыг алдаагүй байхыг шаарддаг нэмэлт шаардлагуудтай байдаг.XHTML - EXtensibleHyperText Markup Language

XHTML 33XHTML файл нь үндсэн гурван хэсгээс бүрдэнэ.DOCTYPE зарлагаа хэсэг хэсэг

зарлагаа34 зарлагааТааг бишХуудасны хамгийн эхэнд бичигдэнэ.DTD буюу Document Type DefinitionХуудас HTML-ийн ямар хувилбар ашиглаж бичсэнийг броузерт хэлж өгдөг.XHTML-ийн DTD хувилбаруудXHTML 1.0 StrictЭнэ DTD нь HTML бүх элементүүд, тэдгээрийн атрибутуудыг агуулах боловч ашиглагдахаа больж байгаа зарим таагуудыг агуулдаггүй. Мөн frameset-ийг хориглодог. XHTML-ийн дүрмүүдийн дагуу бичигдсэн байх ёстой.XHTML 1.0 TransitionalXHTML 1.0 FramesetXHTML 1.1 хэсэг35Head хэсэг буюу тааг дотор тухайн вэб хуудасны талаарх мэдээллүүдийг бичдэг. Эдгээр мэдээлэл нь хэрэглэгчид харагдахгүй.

тааг дотор бичигддэг таагууд36 - Броузерийн дээд хэсэгт харагдах текст<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title> HTML element – Wikipedia, the free encyclopedia Зөвлөмж: Хайлтын системүүдэд хуудасны гарчиг ашиглагддаг. Иймээс сайтын үйл ажиллагаатай холбоотой оновчтой үгийг сонгож гарчиг хэсэгт оруулах хэрэгтэй.Байгууллагын нэрҮндсэн үйл ажиллагааны чиглэлХуудасны гарчиг нь хэрэглэгчдэд тухайн хуудсыг bookmark хийх, вэбээр зочилсон түүх(Browser history) харахзэрэгт ашиглагддаг тул вэбийн хуудас бүрийг тухайн хуудастай нь холбоотой мэдээлэл бүхий өөр өөр гарчгаар нэрлэх хэрэгтэй.

Гарчигтай вэб хуудас үүсгэх37Дурын текст засварлагч програмыг нээнэ.Вэб дизайн – Онлайн Хичээлгэж бичнэ.Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална. Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.

тааг дотор бичигддэг таагууд38 Хэд хэдэн зорилгоор ашиглагддаг.faviconбуюу броузерийн address bar хэсэгт байрладаг жижиг хэмжээний icon зураг. таагийн rel, href гэсэн атрибутуудыг ашиглана.rel – оруулж ирж буй файл уг хуудсанд ямар зорилгоор хэрэглэгдэхийг заана.href – оруулж ирж буй файлын байрлал, нэр, төрөлfaviconболгон ашиглах гэж байгаа зураг pngэсвэл icon төрөлтэй байна.Бичигдэх хэлбэр:Зураг, вэб хуудас нэг хавтаст байрлах ёстой. Файлын замтай ажиллах талаар бид дараа, дараагийн хичээлүүдээр дэлгэрэнгүйүзэх болно.

тааг дотор бичигддэг таагууд39 таагВэбдоторчухамюуюуагуулагдсаныгмөнхэнүүнийгхийсэн,хаанахадгалагдажбайгаа,хуулиархамгаалагдсанэсэх, ямар хэл дээр бичигдсэнгэхмэтмэдээллийг энэ таагийг ашиглан тодорхойлдог. тааг нь дотроо агуулгагүй учир хаагдах тааг тусдаа байхгүй. Иймээс гэж хаана.Ихэнх хайлтын системүүд тухайн хуудасны мэдээллийг авахдаа таагт бичигдсэн өгөгдлүүдийг ашигладаг.

таг40< metaname = “description”> тааг дотор хуудасны тайлбарыг бичнэ. таагдотор хуудсыг хайх түлхүүр үгийг бичнэ.< meta > таагдотор ямар тэмдэгт ашиглан бичихээ тодорхойлно.Вэб хуудсанд кирилл текст агуулагдах бол charset=utf-8 гэж заавал бичих хэрэгтэй.

тааг41 тааг дотор хуудсанд харагдах агуулгуудыг бичнэ. Өөрөөр хэлбэр вэб хэрэглэгчид харагдах хэсэг энд бичигдэнэ. таагийн атрибутууд:bgcolor – Вэб хуудасны арын дэвсгэр ямар өнгөтэй байхыг зааж өгнө.Жишээ: bgcolor = “red”background – Хуудасны арын дэвсгэрт зураг оруулж өгч болно. Зураг байрлаж буй замыг зургийн нэр, өргөтгөлийн хамт бичнэ. Жишээ: background = “c://flower.jpg”text – body дотор бичигдсэн бүх текст ямар өнгөтэй байхыг зааж өгнө. Жишээ: text = “yellow”

XHTML42HTML болон XHTML-ийн хоорондох ялгаа бага боловч XHTML хувилбар нь илүү нэмэлт зарчмын дагуу таагуудаа бичихийг шаарддаг.Бүх таг, түүний атрибутыг жижиг үсгээр бичих Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой.Таагуудыг нээж, хаасан дараалал зөв байх ёстой.Таагийн атрибутуудын утгыг заавал хашилтанд хийж бичнэ.Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой.XHTML бичих дүрэм№143Бүх таг, түүний атрибутыг жижиг үсгээр бичих Хэдийгээр HTML таагуудын том, жижиг үсгээр бичсэнийг броузер ялгаагүй үзүүлж чаддаг боловч XHTML ашиглаж байгаа бол заавал жижиг үсгээр бичихийг шаарддаг.Буруу хувилбарЗөв хувилбар

XHTML бичих дүрэм№244Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой.HTML –д нээсэн таагийг хаахгүй орхиж бичсэн ч броузер түүний өөрөө зөв харуулах боломжтой байдаг.Мөн HTML-д зарим агуулга бичих шаардлагагүй таагуудад хаах тааг бичихгүй байх боломжтойбайдаг. - Зураг харуулах тааг
- Шинэ мөр шилжүүлэх таагБуруу хувилбар Tекст - body таагийг хаалгүй орхисон байна.
- brтаагийг хаагаагүй байна.Зөв хувилбарTekcт




:-)
 
xaax

XHTML бичих дүрэм№345Таагуудыг нээж хаасан дараалал зөв байх ёстой.Хамгийн эхэлж нээгдсэн таг доторх тагуудаасаа сүүлд хаагдах ёстой.Буруу хувилбар

Ингэж бичих нь буруу

Зөв хувилбар

Ингэж бичих нь зөв

XHTML бичих дүрэм№446Тагийн атрибутуудын утгыг заавал хашилтан(“ ”) дотор бичнэ.HTML-д таагийн зарим атрибутад утга өгөхгүй байхыг зөвшөөрдөг.HTML-д таагийн атрибутын утгыг хашилтанд хийхгүй байж болдог.Буруу хувилбар -nowrapатрибутад утга олгоогүй байна. - colspanатрибутын утгыг хашилтанд хийгээүй байна.Зөв хувилбар

XHTML бичих дүрэм№547Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой.Бүх элементүүд элементийн дотор байрлана. - Үндэс элемент - Хамгийн түрүүнд нээгдэж, хамгийн сүүлд хаагдана.Жишээ:………

Зөв XHTML хуудас бичиж эхлэхийн тулд бидний бичих хуудас бүрт доорх код заавал байх ёстой.

Текст хэвжүүлэх тагууд - Текстийг тод болгоно. - Текстийг налуу болгоно.
- Курсорыг дараагийн мөрлүү шилжүүлнэ.

- Шинэ paragraph эхлүүлнэ.Автоматаар таагийн агуулгын эхлэл, төгсгөлд хоосон мөр оруулна. - Текстийг дундуур зураастай болгоно. - Текстийн бичигдэх чиглэлийг тодорхойлно.bdoтаагийн атрибут: dir = “rtl” – Баруунаас зүүн тийш буюу зөв бичиглэл dir = “ltr” – Зүүнээс баруун тийш буюу урвуу бичиглэл

- Догол мөр шилжүүлнэ.
 - Таганд бичигдсэн байгаа агуулга нь яг бичигдсэн байгаа хэлбэрээрээ броузерт гарна.49

. Гарчиг тодорхойлох тагh таг нь 6 янз байна. h1, h2, h3, h4, h5, h6 h1 таг нь хамгийн томоор гаргах ба h6 таг нь хамгийн жижгээр гаргана.50Гарчиг тодорхойлох таагууд

Тайлбар бичих51Бичсэн кодыг ойлгомжтой болгох үүднээс тайлбар бичдэг.Тайлбар нь хэрэглэгчийн дэлгэцэнд гарахгүй бөгөөд зөвхөн вэбийг бүтээгчид кодыг ойлгомжтой болгодог.Бичигдэх хэлбэр Хуудасны гарчиг

Хуудасны агуулга




:-)
 
xaax

Вэбийн харагдах байдлыг төлөвлөх52Вэб сайтын дизайныг эхлээд компьютер дээр биш цаасан дээр гаргаж үз.Богино хугацаанд хэд хэдэн хувилбар гаргаж үзэн харьцуулж болно.Хэт нарийн төлөвлөх гэсний хэрэггүй. Аль болох богино хугацаанд олон хувилбар гаргах гээд үз.Дээрх алхмын дараа хувилбар бүрээс тохиромжтой, боломжийн гэж үзсэн хэсгүүдээ нийлүүлэн, компьютер дээр дизайныг гаргаж эхэл.

Танилцуулга сайт хийх хэсэг53

Танилцуулга сайт хийх хэсэг54Хичээлийн явцад үзсэн онолын мэдлэгүүдийг ашиглан бид хичээл бүрийн төгсгөл танилцуулга вэб сайтыг хөгжүүлж явах юм.Хийх сайт: Дээд Сургуулийн Танилцуулга Сайт

Вэбийн агуулгыг гаргах55Сургалтын байгууллага бидний хийх вэбээр зочлогсод нь Сургуулийн ажилтнууд, Оюутан, Эцэг эхчүүд, Сургуульд элсэхээр сонирхсон хүмүүс, Сургуулийн тухай мэдээлэл авах гэж буй хүмүүс байх юм.Иймээс сайт эдгээр хэрэглэгчид зориулсан мэдээллүүдийг агуулах хэрэгтэй.Сургуулийн ажилтнууд – Дүрэм журам, МэдээОюутан – Дүрэм журам, Мэдээ, Оюутанд зориулсан үйлчилгээнүүдЭцэг эхчүүд – Мэдээ, ТанилцуулгаЭлсэхээр сонирхсон хүмүүс – Сургуулийн танилцуулга, Элсэлтийн талаарх мэдээлэл, элсэлтийн маягт , ТэнхимүүдМэдээлэл авах гэж буй хүмүүс – Танилцуулга, ТэнхимүүдБүгд хэрэглэгч – Холбоо барих

Вэбийн дизайныг төлөвлөх56

Вэбийн дизайныг төлөвлөх57

Вэбийн дизайныг төлөвлөх58

Веб бол Интернэтийн сүлжээнд холбогдсонкомпьютер дээр байрлах нэгэн төрлийн файл, файлуудюм. Интернэт гэдэг нь олон компьютерийн хоорондынсүлжээ гэж ойлгож болох юм. Эдгээр хоорондоо ихэвчлэнHTTP гэсэн протокол ашиглан хоорондоо мэдээллээсолилцдог. Мэдээлэл гэдэг нь бидний мэдэх Вебхуудас юм. Веб хуудсыг байрлуулах компьютерийг Вебсервер гэх ба харин тэр мэдээллийг уншиж хөрвүүлэнхаруулж байгаа компьютерийг Client гэдэг. Хөрвүүлэгчийн жишээ гэвэл бидний сайн мэдэхInternet Explorer, Mozilla Firefox, Opera, Chrome, Rockmeltгэх мэт маш олон байдаг. Веб хуудас болгон өөрийн хаяг буюу Domainнэртэй байдаг. Эдгээр хаягыг ашиглан хүмүүс хэрэгцээтхаягруугаа хандан мэдээлэл авах боломжтой. Domain хаягнь цорын ганц байдаг бөгөөд ижил хаягтай байхболомжгүй юм.

HTML гэдэг нь Hyper Text MarkupLanguage гэсэн үгийн товчлол юм. HTMLкодчлолыг энгийн Text Editor текстболовсруулагч программуудыг ашиглан бичижболох бөгөөд одоо веб байгуулах өргөн боломжбүхий программууд ихээр гарч ирж байгааболхоор веб бүтээхэд маш хялбар болж өгчбайна.

Веб хуудсыг бүтээж байгаа үндсэн хэлийгHTML гэж нэрэлдэгийг бид мэдэх билээ. HTML-ыгсайн сурахын тулд түүний бүтэц, бичиглэлийг сурахшаардлагатай. HTML-ын үндсэн бүтэц нь тусгайтодорхойлогчийг ашигладаг.Үүнд:“<” – командыг нээх тодорхойлогч“>” – командыг хаах тодорхойлогч Энэ хоёр хаалтаар HTML командуудтодорхойлогддог байна. Үүнийг HTML хэлний таг"tag" гэдэг. Энэ нь нэг таг ямар хүрээнд үйлчлэх вэ?гэдгийг тогтоох шаардлага гардагт оршино. Хаахтагны өмнөх “<” тодорхойлогчийн ард "/" зурааставьж ашигладаг. Жишээ нь: …

Аливаа html файл гэсэн tag-аар эхэлж гэсэн tag-аар төгссөн байх ёстойбайдаг.

HTML баримтыг үүсгэхдээ түүний ерөнхий бүтэц түүнийгүүсгэдэг тагуудын талаар судлах ёстой юм. Энэ тагууд нь дараахбайдлаар бичигддэг. HTML баримт нь үндсэн бие, толгой хэсэг, гарчигзэрэг хасгүүдээс бүрддэг байна.Эдгээрийг илэрхийлэх тагууд нь:• ба тагууд энэ нь тухайн HTML файл буюу вебхуудасны эхлэл ба төгсгөлийг зааж байх үүрэгтэй таг юм.• ба таг энэ тагууд нь тухайн баримтын хувьд толгоймэдээллийг тодорхойлж өгдөг байна. Мөн веб программчлал буюускрипт программын функцыг энэ хэсэгт бичиж өгдөг байна.• ба таг энэ тагууд нь тухайн баримтын цонхонд гаргахгарчгийн хэсгийг тодорхойлж өгдөг байна.• ба




:-)
 
xaax
таг энэ таг нь тухайн баримтын үндсэн биеийгтодорхойлдог байна. Ө.х тухайн веб хуудсанд байгаа бүх лэлементүүүдийг энэ хэсэгт тодорхойлж өгдөг байна. Дэлгэцэндхарагдаж байгаа бүх элементийг энэ хэсэгт тодорхойлж өгдөг.• ба <--> таг энэ тагууд нь тухайн веб хуудсанд тодорхойтайлбарыг бичихэд хэрэглэгддэг байна.

Start->Programs->Accessories->Notepad команд сонгож Notepad программыг санах ойд ачаална.2. Шинэ файл үүсгэх HTML кодыг бичнэ. <a href="http://www.olonlog.edu.mn" target="_blank">www.olonlog.edu.mn</a> Тавтай морилно уу !




:-)
 
xaax

1 мөрийн эхний нүд1 мөрийн хоёрдохь нүд1 мөрийн гуравдахь нүд
2 мөрийн эхний нүд2 мөрийн хоёрдохь нүд2 мөрийн гуравдахь нүд

Visit W3Schools.com! ž Teletype text Italic text Bold text Big text Small textž ž This is some text! This is some text! This is some text!ž 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Интернет бол Дэлхий дахиныг үл харагдах аалзны тор мэт бүрхэн ертөнцийн өнцөг бүрийн компьютерүүдийг хооронд нь холбосон асар том сүлжээ юм. Интернетийн ачаар хүн төрөлхтөн мэдээллийн шинэ эрин үед орсон билээ.

Интернетийн түүх 1960-аад оны сүүл үеэс эхтэй. 1968 онд АНУ-д цэрэг, батлан хамгаалахын зориулалтаар компьютеруудыг өөр хооронд нь холбож сүлжээний зохион байгуулалтанд оруулах ARPANET төсөл хэрэгжиж эхлэсэн нь бидний мэдэх интернетийн үүсэл гэж үздэг байна.

·

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-лүү шилжиж болно. Ө.х. нэг веб хуудсанд нэгээс олон гипер холбоос байж болно.

WWW-д байрлах веб хуудасны URL-хаягийн жишээ:

· 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 NavigatorOpera зэрэг веб браузерууд бий.

HTML-эдиторын тухай

HTML-эдитор буюу веб хуудас хийдэг програм хангамжийг 3 ангилж болно.

1. Текст эдитор ашиглан HTML-кодыг гараараа бичих

HTML-файл нь .htm буюу .html гэсэн өргөтөлтэй ердийн текст (ascii юмуу unicode форматын) файл байдаг. ТиймээсNotepadWordpad г.м. стандарт програмуудаар HTML-файлыг нээхэд HTML-код нь харагдах болно. Таагээд та засвараа хийж болно.

Мөн HTML-код бичиж, засварладаг HotDogPageMillCuteHTML зэрэг тусгай програмууд байдаг.

Текст эдитор ашиглаж буй тохиолдолд танд тавигдах гол шаардлага бол та HTML хэлний командуудыг мэддэг байх ёстой. Учир нь та веб хуудасныхаа бүх элементийг нэг бүрчлэн бичиж өгөх хэрэгтэй болно. Ж.нь вэб хуудас руу зураг оруулъя гэвэл тохирох команд ба уг зургийн байрлаж байгаа замыг (location) бичиж өгнө. Алдаагүй бичсэн бол, дараа нь та вэб браузераар HTML-файлаа нээхэд зураг тань харагдаж байх болно.

2. Веб дизайны програм хангамж ашиглах

Ийм төрлийн програм нь боловсронгуй ажлын орчныг хэрэглэгчид бүрдүүлж өгдөг. Веб хуудас хийхэд шаардагдах бүх үйлдэл програмын цэсэнд, мөн цэсний доор байрлах хэрэгслийн самбаруудад дүрст товч хэлбэрээр байрласан байдаг. Тиймээс хэрэглэгч бол ердөө хулгана ашиглаад л тэдгээртэй ажиллаж, зураг, текст, хүснэгт, бусад материалыг оруулах г.м.-ээр вэб хуудсаа хийж болдог байна. Харин хэрэглэгчийн хийсэн үйлдэлд харгалзах HTML-код нь цаанаа файлд автоматаар бичигдэж байдаг. Ө.х. хэрэглэгч HTML хэлний бүх командуудыг заавал мэддэг байх шаардлагагүй болж байгаа юм.

Цаг хэмнэх, бас хөдөлмөрөө хөнгөвчлөхийн үүднээс ихэнх веб дизайнерууд өнөөдөр ийм эдиторыг ашигладаг. Ийм төрлийн эдиторын жишээ бол Macromedia DreamweaverMS Frontpage зэрэг програмууд юм.

Өөрийн зүгээс зөвлөхөд, хэрэв та нэгэнт вэб хуудас хийхийг сурч байгаа бол түүний үндэс суурь болсон HTML хэлийг тодорхой хэмжээнд мэддэг байх нь зүйтэй болов уу.

HTML хэлний команд

HTML хэл нь өөрийн гэсэн командуудтай. Ийм командыг тааг (tag) гэнэ. Эдгээр таагүүдийг ашиглан HTML-кодыг бичдэг. Таагийг томоор, жижгээр бичих нь ялгаагүй.

Ихэнх тааг:

<тааг   атрибут=”утга”>

       ...

гэсэн загвараар бичигддэг. Ийм таагийг битүү тааг гэнэ. Энд <тааг> - таагийн эхлэл,  - таагийн төгсгөл. Энэ эхлэл, төгсгөлийнхөө хооронд тааг үйлчилнэ.

Харин зарим тааг дангаараа бичигддэг:

<тааг   атрибут=”утга” >

эсвэл:

<тааг   атрибут=”утга”/>

Ийм таагийг задгай тааг гэнэ. Таагийн үйлчлэл түүний араас дараагийн тааг хүртэл байна.

Атрибут (attribute) гэдэг нь таагийг удирдах тохируулга юм. Ийм удирдах тохируулгын тусламжтайгаар тухайн таагийн төлөөлж буй үйлдлийг удирдана, ө.х. ямар шинж чанартай байхыг нь тодорхойлно. Ихэнх тааг өөрийн гэсэн атрибутуудтай байдаг. Бас атрибутгүй тааг ч бий.

HTML-файлын ерөнхий бүтэц

Аливаа html-файл  гэсэн таагээр эхлэж,  гэсэн таагээр төгссөн байх ёстой байдаг:

       ...

Энэ битүү таагийн дотор веб хуудасны бүх html-кодыг бичнэ.

Веб хуудасны html-кодыг:

толгой хэсэг

их бие

гэж хоёр салган авч үзнэ.

Толгой хэсэг нь  гэсэн битүү таагээр илэрхийлэгдэнэ:

       ...

Энд, веб хуудасны талаарх мэдээлэл тухайлбал хуудасны гарчиг, ашиглаж буй тэмдэгтийн хүснэгт (charset) г.м.-ийг зааж өгдөг. Ж.нь хуудсандаа гарчиг өгье гэвэл </span><span style="font-family: Tahoma, sans-serif;"> гэсэн битүү таагийг </span><span lang="MN" style="font-family: Tahoma, sans-serif;">ашиглан:</span><span style="font-family: Tahoma, sans-serif;"></span></p><p class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 0.0001pt 18pt;"><span style="font-family: 'Times New Roman', serif; color: blue;"><head></span></p><p class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 0.0001pt 18pt;"><span style="font-family: 'Times New Roman', serif; color: blue;"><title></span></p><p class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 0.0001pt 18pt;"><span style="font-family: 'Times New Roman', serif; color: blue;">       Хуудасны гарчиг</span></p><p class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 0.0001pt 18pt;"><span style="font-family: 'Times New Roman', serif; color: blue;">

гэж бичнэ. Толгой хэсэг заавал байх албагүй байдаг.

Харин их бие заавал байх ёстой. Их бие нь <body> битүү таагаартодорхойлогдоно:

<body>

       ...

body>

Дараа нь веб хуудсыг браузераар үзэхэд гарч ирэх бүх мэдээллийг энд байрлуулах ёстой. Хэрэв энд хоосон байвал браузер дээр хоосон веб хуудас гарч ирэх болно.

Веб хуудасны дэвсгэр өнгийг онцгойлон зааж өгөөгүй бол цагаан өнгөтэй байдаг. Харин текстийн өнгө хар байдаг. Хуудасны дэвсгэр өнгийг өөрчилье гэвэл  таагийн bgcolor гэсэн аттрибутад хүссэн өнгөнийхөө утгыг зааж өгөх хэрэгтэй:

<body bgcolor=”#өнгө>

Веб хуудасны текстийн өнгийг өөрчилье гэвэл  таагийн text гэсэн аттрибутад хүссэн өнгөнийхөө утгыг зааж өгөх хэрэгтэй:

<body bgcolor=”#өнгө” text=”#өнгө>

HTML хэлэнд өнгөний утга RGB (Red-Green-Blue) гэсэн үндсэн гурван өнгийн комбинацаар тодорхойлогддог. Үндсэн өнгө бүр 00-FF хүртэлх 16-тын тоогоор илэрхийлэгдэнэ. Тухайлбал #000000 бол хар өнгө. Эсрэгээр #FFFFFF бол цагаан өнгө. Бусад өнгө энэ хоёр өнгийн завсарт байрлана. Ж.нь . Хэрэв 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-той компьютерын хувьд “ө”, “ү” үсгүүд дээр жаахан асуудал гараад бусад үсгийн хувьд проблем байдаггүй. Arial, Courier New, Times New Roman г.м. фонтууд UNICODE-хүснэгтэл харгалзана.

Windows дээр ажилладаг веб браузерууд нь монголоор бичих боломжтой ASCII- хүснэгтүүдийг windows-1251windows-1252 гэсэн кодоор, харин UNICODE-хүснэгтийг utf-8 гэсэн кодоор тэмдэглэдэг байна. Веб хуудсандаа эдгээрийн ашиглах вэ гэдгээ зааж өгөхийг тэмдэгтийн кодчилол (character encoding) гэдэг. Дээр дурдсанчлан тэмдэгтийн кодчилолыг веб хуудасны толгой хэсэгт,  гэсэн битүү тааг дотор бичнэ. Ингэхдээ  гэсэн нээлттэй таагийг ашигладаг. Ж.нь Unicode-форматаар монголоор бичнэ гэвэл:

гэж бичнэ.

Дасгал

Сая үзсэн зүйлстэйгээ холбоотой дасгал хийж үзье. Дараах зурагт үзүүлсэн веб хуудсыг яаж хийх вэ? Ашиглаж буй компьютер Windows XP үйлдлийн системтэй, ашиглаж буй веб браузер Internet Explorer.

·

· 3. Notepad програмыг ачаалж шинэ текст файл үүсгэе:

Өмнөх сэдэвт үзсэн html-кодыг нэгтгэн бичье:

·

5. Windows XP-ийн гарын драйверыг монгол болгож байгаад:

·

веб хуудасныхаа монгол гарчгийг бичье:

·

· 6. Веб хуудасны их бие дотор монгол текстийг бичнэ:

·

7. Текст файлаа html-файл болгож хадгалъя. File/Save as гээд дараах цонхыг гаргаж ирээд:

·

Filename талбарт html-файлынхаа нэрийг өргөтгөлийн хамт ж.нь mypage.html гэж бичээд:

·

Save as type талбараас All Files гэснийг сонгоод:

·

Encoding талбараас UTF-8 гэснийг сонгоод Save товчийг дарна:

·

Ингэхэд mypage.html гэсэн файл үүсэх болно.

·

Энэ файлаа сонгоод Enter дарахад Internet Explorer ажиллаж, файлын html-кодыг веб хуудас хэлбэрээр харуулах болно:

·

Хэрэв бүтэлтэй болсон бол баяр хүргэе. Та анхны веб хуудсаа хийсэн

байна.

8. Үүсгэсэн хуудасныхаа дэвсгэр өнгө болон текстийн өнгийг янз бүрээр өөрчилж үз.

Мэдээллийг шинэ мөрнөөс эхлүүлэх

Веб хуудасны мэдээллийг, тухайлбал текстийг шинэ мөрнөөс эхлүүлье гэвэл 
 гэсэн задгай таагийг ашиглах хэрэгтэй. Шинэ мөрнөөс эхлүүлэх текстийнхээ өмнө, ө.х. сая дээд талынх нь текстийн ард энэ таагийг байрлуулна. Ж.нь:

Энэ миний анхны веб хуудас. 

Миний веб хуудсанд тавтай морил.




:-)
 
xaax

·

Гипер холбоос тавих

HTML хэлэнд гипер холбоосыг  гэсэн битүү тааг ашиглаж оруулдаг. Гипер холбоосоор холбогдож буй веб хуудас нь нэг бол гипер холбоосыг оруулж буй веб хуудастай хамт нэг компьютер дээр байж болно. Эсвэл интенетэд тодорхой URL-хаягаар байрласан байж болно. Ж.нь:

       Энд дар




:-)
 
xaax

эсвэл:

       Энд дар




:-)
 
xaax

эсвэл:

       Энд дар




:-)
 
xaax

г.м. Энд буй href нь  таагийн атрибут бөгөөд гипер холбоосын хаягийг

тодорхойлдог нь харагдаж байна.

Дасгал

mypage.html веб хуудсандаа хоёр гипер холбоос нэм. Эхнийх нь

mypage1.html гэсэн веб хуудсыг заасан байх ёстой. Хоёрдох нь mypage2.html гэсэн веб хуудсыг заасан байх ёстой:

·

Notepad програм дээрээ mypage1.html веб хуудсыг үүсгэ. Энэ веб хуудас нь дотроо mypage.html-ийг заасан гипер холбоос агуулсан байх ёстой:

·

Notepad програм дээрээ mypage2.html веб хуудсыг үүсгэ. Энэ веб хуудас нь дотроо mypage.html-ийг заасан гипер холбоос агуулсан байх ёстой:

·

Эхний веб хуудсаас Веб хуудас 1-ийг дарахад, Веб хуудас 1 гарч ирэх ёстой. Буцах гэдгийг дарж эхний хуудас руу шилжих ёстой. Дараа нь Веб хуудас 2-ыг дарахад, Веб хуудас 2 гарч ирэх ёстой. Буцах гэдгийг дарж эхний хуудас руу шилжих ёстой. Хэрэв бүтэлтэй болсон бол баяр хүргэе. Та анхны веб сайтаа хийсэн байна.

· Зураг оруулах

· Зураг бол веб хуудсыг хүн үзэхэд сонирхолтой болгодог, түүний мэдээллийн агуулгыг баяжуулж, өнгө үзэмжийг сайжруулдаг гол элементийн нэг юм. Ямар ч зураггүй, зөвхөн текст агуулсан веб хуудас нэг л “амьгүй”, “уйтгартай” байдаг. Зургийг ямагт файл хэлбэрээр оруулна. Веб технологит GIF (Graphics Interchange Format), JPG/JPEG (Joint Photographic Experts Group), PNG (Portable network Graphics) төрлийн зургийн файлууд ихэвчлэн ашиглагддаг.

· Веб хуудсанд зураг оруулахдаа  гэсэн задгай тааг ашиглана. Энэ таагийн src аттрибут нь тухайн зургийн файлын зам, эсвэл интернет дэхь URL-хаягийг зааж өгөх ёстой. Ж.нь тухайн веб хуудастай нэг фолдер дотор байгаа images гэсэн фолдер доторх picture.jpg гэсэн файлыг оруулъя гэвэл:

· 

· Харин интернетэд тодорхой URL-хаягаар байрлаж буй picture.gif файлыг оруулъя гэвэл:

· http://www.baikhguisite.com/images/picture.jpg”>

· Зургийн таагийн бусад аттрибуттай танилцъя. alt аттрибут нь тухайн зураг ачаалагдаж байх үед эсвэл курсорыг зургийн дээр аваачихад эсвэл зураг ямар нэг шалтгаанаар үзэгдэхгүй болсон үзэгдэх текстийг тодорхойлно. Ж.нь:

· ”Зураг

· heightwidth аттрибутууд нь зургийн харагдах хэмжээг пикселээр тодорхойлно. Харин align аттрибут нь зураг хуудасны тухайн төвшиндөө ямар байрлалд гарахыг тодорхойлно. Боломжит утгууд: bottom|left|middle|right|top. Ж.нь:

· 

· Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий. Энэ бол Дэлхий.

· 

· 




:-)
 
xaax

·

· hspacevspace аттрибутууд нь зургийг хүрээлсэн сул зайг үүсгэнэ. Ж.нь:

· 

· гэвэл зургийн дээр доор 10, зүүн баруунд 10 пикселийн өргөнтэй сул зай авагдана.

· Зургаар гипер холбоос үүсгэх

· Зургийн  задгай таагийг гипер холбоосын  битүү тааг дотор байрлуулвал бид гипер холбоос бүхий зурагтай болно. Ө.х. тухайн зураг дээр курсорыг байрлуулж дарахад гипер холбоос ажиллана. Ж.нь:

· 

· 

· 

· 

· 




:-)
 
xaax

·

· Зураг дээр дарахад дараах веб хуудас гарч ирэх болно:

·

· Image Map буюу Зураг Хэсэглэх

· Одоо нэн сонирхолтой нэг боломжийн талаар дурдъя.  хэмээх битүү таагийн тусламжтайгаар нэг зургийн янз бүрийн хэсэгт өөр гипер холбоос харгалзуулж болдог байна. Үүнийг Image Map буюу Зураг мужлах хэмээн нэрийднэ. Ж.нь бид дэлхийн газрын зураг дээр image map хийгээд, австрали дээр дарахад австралийн тухай веб хуудас, Мадагаскар арал дээр дарахад Мадагаскарын тухай веб хуудас гарч ирдэг г.м. гипер холбоос үүсгэж болно. Үүнийг хийж үзье.

· Эхлээд бид зургаа оруулна. Оруулж буй зургаа Image map-тай болгохын тулд зургийн таагийн usemap гэсэн аттрибутыг ашиглана. Энэ аттрибут нь тухайн зураг дээр “тавигдах” image map-ын нэрийг тодорхойлдог байна. Тухайлбал:

· 

· myimagemap">

· 




:-)
 
xaax

· Энд бид world_atlas.jpg гэсэн зургаа myimagemap гэсэн нэр бүхий Image map-тай холбож өгч байгаа юм.

· Одоо энэхүү myimagemap хэмээх image map-аа үүсгэх ёстой.

· 

· myimagemap">

· 

·        …

· 

· 




:-)
 
xaax

· Таагээд энэ тааг дотор, зургийн дэвсгэрийн хаанаас ямар хэлбэртэй мужийг сонгож авахаа бичнэ. Ингэхдээ  гэсэн задгай тааг ашиглана. Манай зураг 512x256 пикселийн хэмжээтэй байна. Зургийн өргөн ба өндөр нь зүүн дээд булангаасаа (0,0) гэсэн координатаас тоологдож байгаа. Хэрэв австрали тивийг багтаасан зүүн дээд булан нь (417, 143), баруун доод булан нь (476, 186) гэсэн координаттай таагш өнцөгт хэлбэрийн муж сонгоно гэвэл:

· 

·        417,143, 476,186” href=”austalia.html”>

· 

· shape аттрибут мужийн хэлбэрийг зааж байна. coords аттрибут координатын цэгүүдийг зааж байна. href аттрибут нь гипер холбоосын цаад үзүүр дэхь веб хуудсыг зааж байна. Өөр муж нэмэхийн тулд дахиад нэг  ашиглана:

· 

·        417,143, 476,186” href=”austalia.html”>

· 319,147, 324,164” href=”madagaskar.html”>

· 

· shape аттрибут нь “rect”-ээс гадна “circle” (энэ тохиолдолд координат нь “x,y,radius”), “polygon” (энэ тохиолдолд координат нь“x1,y1, x2,y2, x3, y3, x4, y4, ...”) гэсэн утгууд авах боломжтой.

· Одоо дэлхийн газрын зураг дээр Австралийг дарвал:

·

· к

·


· Харин Мадагаскарыг дарвал:

·

· к

·

· Хүснэгт үүсгэх

· Веб хуудас дээр зураг болон текстийг янз бүрийн байршилтайгаар гаргахдаа хүснэгт ашигладаг. Ингэж хүснэгт ашигласнаар веб хуудас эмх цэгцтэй, тодорхой загвар дизайнтай мэт харагддаг.

· Хүснэгтийг 

 гэсэн битүү таагийн тусламжтай үүсгэдэг:

· 

·        …

· 

· Энэ тааг дотроо хүснэгтийнхээ хэдэн мөр, хэдэн баганатай байхыг зааж өгнө. Мөрийг  гэсэн битүү таагээр, баганыг гэсэн битүү таагээр үүсгэнэ. Ингэхдээ эхлээд мөрөө үүсгээд, мөр дотроо хэдэн баганатай байхыг зааж өгнө. Ж.нь:

· 

· 

·       

·                   

· 

·       

· 

·                   

· 

· 

·       

· 

·                                Энэ бол 1-р мөрийн 1-р багана

· 

·                                Энэ бол 1-р мөрийн 2-р багана

· td>

· 

· Энэ бол 1-р мөрийн 3-р багана

· 

·                                Энэ бол 2-р мөрийн 1-р багана

· 

·                                Энэ бол 2-р мөрийн 2-р багана

· 

·                                Энэ бол 2-р мөрийн 3-р багана

· 

· 




:-)
 
xaax

· Дээрх жишээнд 2 мөртэй, 3 баганатай хүснэгт үүсгэж байна. Зураг нь энэ байна:

·

· Дээрх зурагт, хүснэгтийн гадна хүрээ болон нүднүүдийн хүрээ харагдахгүй байна. Хүрээнүүдийг үзэгддэг болгохын тулд

 таагийн border гэсэн аттрибутыг бичиж өгөх хэрэгтэй. Хэрэв энэ аттрибутын утгыг 0-ээс ялгаатай байхаар бичиж өгвөл хүснэгтийн хүрээнүүд харагдана. Тухайлбал өмнөх жишээнд:

· 

· гэж бичвэл:

·

· Одоо хүснэгтийн хүрээнүүд харагдаж байна. Хэрэв border=”0” гэж өгвөл дахиад хүрээгүй болчихно.

· 

 таагийн бусад зарим аттрибутыг дурдвал:

· · <table width=”тоо> эсвэл width=”хувь%”> - хүснэгтийн өргөнийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь гэвэл хүснэгтийн өргөн цонхны өргөнтэй адил байна.

· ·  эсвэл  - хүснэгтийн өндрийг хуудасны цонхтой харьцангуй тодорхойлно. Ж.нь гэвэл хүснэгтийн өндөр цонхны өндрийн 50 % байна.

· ·  - хүснэгтийг цонхны аль нэг тал руу шахаж, эсвэл голлуулж байрлуулна. Боломжит утгууд нь:left|right|center. Ж.нь  гэвэл хүснэгт цонхны голд байрлана.

· ·  - хүснэгтийн дэвсгэр өнгийг зааж өгнө. Ж.нь bgcolor=”#AABBCC> гэхэд:

·

· · background=”зургийн_файл”> - хүснэгтэнд дэвсгэр зураг тавьж өгнө. Тухайлбал гэвэл picture.jpg файлыг хүснэгтийн арын фон болгож тавьна.

·

· Дээр дурдсан width, heigth, bgcolor, background, align аттрибутуудыг 

 болон 
 таагуудад бас бичиж болно. Түүнээс гадна мөр болон баганы хувьд valign гэсэн аттрибут бас бий. Энэ нь тесктийг тухайн мөр буюу багана дотор дээшээ юм уу доошоо шахаж эсвэл голлуулж байрлуулна. Боломжит утгууд нь: : top|bottom|middle.

· Дараах жишээг харцгаая:

· 

· 

· 

·       

·       

  

· 

· 

·       

·       

  

· 

· 

·       

·       

  

· 

· 

· Энэ бол Адагчуулганы мананцар. Манай галактикийн ойрын хөршүүдийн нэг. Дэлхийгээс 2 сая орчим гэрлийн жилийн зайд оршдог. Эрдэмтэд манай галактикийг яг энэ Адагчуулганы мананцар галактиктэй маш төстэй хэлбэр дүрстэй гэж үздэг. Тэнд юу байгаа бол?

·       

·                   

·       

· Ах дүү Вачовскийн зохиосон Матриц киног үзсэн хэн бүхэн өөрөөсөө асуулт асуудаг. Биднийг хүрээлэн буй ертөнц, бидний мэдэрч буй бүхэн үнэн хэрэгтээ ямар нэг компьютерын програмын үр дүн байж болох уу? Өөрөөр хэлбэл бид компьютерын програм дотор амьдарч байвал яах вэ?

·       

·                   

·       

· Хүн үүсэхээс бүүүүүүр өмнө, олон арван сая жилийн өмнө манай гариг өөр эзэдтэй байжээ. Тэд бол үлэг гүрвэлүүд юм. Аварга том, өчүүхэн жижиг, гүйдэг, харайдаг, үсэрдэг, дэвхцдэг, өвсөн тэжээлтэй, махан идэштэй гээд үй түмэн зүйлийн үлэг гүрвэл хуурай газрыг эзэгнэж байжээ.

·       

·                   

·       

· 




:-)
 
xaax

· Хүснэгт ингэж харагдах нь ээ:

·

· Тексттэй ажиллах зарим таагууд

· Том хэмжээний текст ихэвчлэн дэд хэсгүүдэд (параграфуудад) хуваагдсан байдаг. HTML хэлэнд үүнийг 

 гэсэн битүү таагаар гүйцэтгэнэ. Өнгөц бодоход энэ тааг нь өмнө үзсэн текстийг шинэ мөрнөөс эхлүүлдэг 
 задгай таагтай төстэй. Гэхдээ текстийг шинэ мөрнөөс эхлүүлэхдээ шинэ параграф үүсгэж эхлүүлдгээрээ ялгаатай. Бидний уншиж дадсан ном сурах бичигт параграфууд догол мөрөөр эхлэсэн байдаг бол веб браузерт нэг сул мөрөөр эхлэдэг.

· Текстийг гарчиг хэлбэрээр харуулахын тулд 

 гэсэн битүү таагуудыг ашиглана. 

нь хамгийн том, 
 нь хамгийн жижиг хэмжээ юм.

· Хуудасны аль ч хэсэгт текстийг хуудасны зүүн юм уу баруун захад шахаж, эсвэл голлуулж гаргахын тулд харгалзан ,

 гэсэн битүү таагуудыг ашиглана.

· Текстийг бүдүүн шрифтээр (bold), эсвэл доогуур зураастай шрифтээр (underline), эсвэл налуу шрифтээр (italic) гаргахын тулд харгалзан  гэсэн битүү таагуудыг ашиглана. Мэдээж бүдүүн мөртлөө налуу тэгээд доогуур зураастай текст байж болно.

· Дээр дурдсан бүгдийг нэгтгэсэн жишээ:

· 

· 

Вебийн тухай

· 

Интернет гэж юу вэ?

· 

· Интернет бол Дэлхий дахиныг үл харагдах аалзны тор мэт бүрхэн ертөнцийн өнцөг бүрийн компьютерүүдийг хооронд нь холбосон асар том сүлжээ юм. Интернетийн ачаар хүн төрөлхтөн мэдээллийн шинэ эрин үед орсон билээ.

· 

· 

· Интернетийн түүх 1960-аад оны сүүл үеэс эхтэй. 1968 онд АНУ-д цэрэг, батлан хамгаалахын зориулалтаар компьютеруудыг өөр хооронд нь холбож сүлжээний зохион байгуулалтанд оруулах ARPANET төсөл хэрэгжиж эхлэсэн нь бидний мэдэх интернетийн үүсэл гэж үздэг байна.

· 

· 

· 

WWW буюу Веб

· 

· Интернетийн сүлжээнд холбогдсон үй олон компьютерууд дээр агуулагдах, мөн өөр хоорондоо холбогдсон асар их мэдээллийн сүлжээг WWW (World Wide Web) буюу Веб гэдэг. Веб нь өнөөдөр хамгийн өргөн хэрэглэгддэг мэдээллийн сүлжээ бөгөөд түүний ачаар хүмүүс хүссэн мэдээллээ дэлхийн өнцөг булангаас хүлээн авах, түүнчлэн түгээх боломжийг олж авсан.

· 

· 

· Вебийн түүх 1980-аад оны сүүл үеэс эхлэлтэй. 1989 онд Европийн Цөмийн Физикийн Судалгааны Төвд (CERN) дэлхийгээр нэг тархсан судлаач эрдэмтдийг компьютерын сүлжээний тусламжтайгаар өөр хооронд нь холбож, санаа оноогоо солилцож байх боломжийг олгох “WWW” төсөл хэрэгжиж эхлэсэн нь бидний мэдэх вебийн үүсэл юм.

· 

· 

· WWW-г интернетэд байрлах асар том “номын сан”-тай зүйрлэж болно.  “Номын сан” нь үй олон “ном”-оос тогтоно. Ийм “ном”-ыг веб сайт (web site) гэнэ. Веб сайт нь өөрөө хуудсуудаас тогтоно. Ийм хуудсыг веб хуудас (web page) гэнэ.

· 

· 




:-)
 
xaax

· Веб браузерт ингэж харагдах болно:

·

· Тексттэй ажиллах зарим таагууд - 2

· Бид текстийг шинэ мөрөөс эхлүүлдэг 
 болон 

 таагуудыг мэддэг болсон. Тэгвэл текстийг шинэ мөрөөс эхлүүлдэг бас нэг тааг байна. Энэ нь 


 гэсэн задгай тааг юм. Энэ тааг нь текстийг шинэ мөрөөс эхлүүлэхдээ эхлээд хэвтээ шугам зураад, доороос нь тесктээ гаргадаг. Ж.нь:

· 

· Энэ миний анхны веб хуудас. <hr>

· Миний веб хуудсанд тавтай морил.

· 




:-)
 
xaax

·

· Хэвтээ шугамын зузааныг (бүдүүнийг) size аттрибут тодорхойлно. Хэвтээ шугамын цонхны өргөнтэй харьцангуй өргөнийг widthаттрибут тодорхойлно. Шугамын өргөнийг цонхны өргөнөөс багаар өгсөн тохиолдолд align аттрибут шугамыг цонхны зүүн, баруун тал руу шахаж эсвэл голлуулж байрлуулахыг зааж өгнө. Боломжит утгууд: left|right|center.

· 

· Энэ миний анхны веб хуудас. <hr size=”10” width=”50%”>

· Миний веб хуудсанд тавтай морил.

· 




:-)
 
xaax

·

· Тоог индекс хэлбэрээ бичихдээ  битүү тааг дотор бичнэ. Тоог зэрэг хэлбэрээр бичихдээ  битүү тааг дотор бичнэ. Ж.нь:

· 

· Масс, энергийн харилцан хамаарал E=mc2 томъёогоор илэрхийлэгдэнэ...

· 

· Mi,j бол M матрицын i-р мөр, j-р баганын элемент юм...

· 




:-)
 
xaax

·

· Текстийн үсгийн фонтыг тодорхойлохдоо  битүү таагийг ашиглана. Фонтын үсгийн өнгийг заахдаа color аттрибут, үсгийн хэмжээг заахдаа size гэсэн аттрибутыг бичиж өгнө. Ж.нь:

· 

· 

· Масс, энергийн харилцан хамаарал E=mc2 томъёогоор илэрхийлэгдэнэ...

· 

· 

· 

· Mi,j бол M матрицын i-р мөр, j-р баганын элемент юм...

· 

· 




:-)
 
xaax

·

· Жагсаалт үүсгэх

· Заримдаа мэдээллийг жагсаалт хэлбэрээр гаргах шаардлага тулгардаг. Жагсаалт тоогоор дугаарлагдан эрэмбэлэгдсэн байж болно. Эсвэл дугаарлагдаагүй байж болно.

· Тоогоор дугаарлагдсан жагсаалт үүсгэхийн тулд эхлээд 

     гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо
  1.  гэсэн задгай таагийг оруулж, ардаас нь эрэмбэлэх элементээ бичиж өгнө. Хэрэв N тооны элементийг эрэмбэлэх бол N удаа
  2.  таагийг оруулна. Ж.нь:

    · 

    · Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино:

    · 

      · 

    1. Титаник (Titanic)

      · 

    2. Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King)

      · 

    3. Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest)

      · 

    4. Харанхуйн хөлөг баатар (The Dark Knight)

      · 

    5. Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone)

      · 

    6. Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End)

      · 

    7. Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix)

      · 

    8. Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers)

      · 

    9. Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace)

      · 

    10. Шрек 2 (Shrek 2)

      · 

    · 




    :-)
     
    xaax

    ·

    · Дугааргүй жагсаалт үүсгэхийн тулд эхлээд 

       гэсэн битүү таагийг бичих хэрэгтэй. Дараа нь энэ тааг дотроо 
    •  гэсэн задгай таагийг оруулж, ардаас нь жагсаалтын элементээ бичиж өгнө. Хэрэв N тооны элементийг жагсаах бол N удаа 
    •  таагийг оруулна. Ж.нь:

      · 

      · Хамгийн их ашиг олсон бүх цаг үеийн 10 шилдэг кино:

      · 

        · 

      • Титаник (Titanic)

        · 

      • Бөгжний эзэн: Хаан эргэн ирсэн нь (The Lord of the Rings: The Return of the King)

        · 

      • Карибын тэнгисийн дээрэмчид: Өөд болоочийн авдар (Pirates of the Caribbean: Dead Man's Chest)

        · 

      • Харанхуйн хөлөг баатар (The Dark Knight)

        · 

      • Харри Поттэр ба шидэт чулуу (Harry Potter and the Sorcerer's Stone)

        · 

      • Карибын тэнгисийн дээрэмчид: Ертөнцийн хязгаарт ((Pirates of the Caribbean: At World's' End)

        · 

      • Харри Поттэр ба Феникс шувуу (Harry Potter and the Order of the Phoenix)

        · 

      • Бөгжний эзэн: Хос цамхаг (The Lord of the Rings: The Two Towers)

        · 

      • Оддын дайн - 1: Далд заналхийлэл (Star Wars: Episode I - The Phantom Menace)

        · 

      • Шрек 2 (Shrek 2)

        · 

      · 




      :-)
       
      xaax

      ·

      · Нэг жагсаалт дотор өөр нэг жагсаалт орсон байж болно. Тухайлбал:

      · 

      · 

        · 

      1. Монгол:

        ·      

          ·                   

        • Улаанбаатар

          ·                   

        • Хөвсгөл

          ·                   

        • Говь

          ·                   

        • Үлэг гүрвэл

          ·                   

        • Наадам

          ·     

        · 

      2. Хятад:

        ·      

          ·                   

        • Бээжин

          ·                   

        • Цагаан хэрэм

          ·                   

        • Хайнань

          ·                   

        • Зуны олимп 2008

          ·     

        · 

      3. Орос:

        ·      

          ·                   

        • Москва

          · 

        • Санкт-Петербург

          ·                   

        • Байгаль нуур

          ·                   

        • Сибирь

          ·                   

        • Путин

          ·     

        · 

      · 




      :-)
       
      xaax

      ·

      · Фрейм ашиглах

      · 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 дотор фреймийн кодыг бичье. Фрейм үүсгэхийн тулд  гэсэн битүү тааг ашиглана:

      · 

      · 

      · 

      · Хамгийн чухал зүйлээ хэлье.  таагийг  таагийн оронд бичдэг. Ө.х.  тааг орж ирсэн html-файлд тааг байх ёсгүй!

      · Дээрх зурагт үзүүлсэн шиг хэвтээгээр цуварсан хоёр фрейм үүсгэхийн тулд cols гэсэн аттрибутад утга оноох хэрэгтэй. Манай тохиолдолд энэ нь:

      · 

      · 

      · 

      · Энэ нь эхний фрейм цонхны өргөний 30%-ийг, хоёр дахь фрейм үлдсэн 70%-ийг эзэлнэ гэсэн үг юм. Нэг асуулт асууя. Босоо гурван фрейм үүсгэе гэвэл яах вэ?

      · Фрейм гэдэг бол өөртөө зураг хадгалдаг жаазтай төстэй гэж дээр дурдсан. Жааз бол хүрээтэй байдаг. Харин хүрээ нь тодорхой өргөнтэй байдаг. Хэрэв хүрээний өргөн 0-тэй тэнцүү бол жаазны хэмжээ зургийн хэмжээтэй давхацна. Тэгэхээр хүрээний өргөнийг 0-ээс ялгаатай өгвөл зохимжтой. Фреймийн хүрээний өргөнийг border гэсэн аттрибутаар тодорхойлно. Манай тохиолдолд 10 гэсэн утга зааж өгье:

      · 

      · 

      · 

      · Дараагийн алхамд <frameset> дотроо <frame> гэсэн задгай таагийг бичнэ. Хэдэн фрейм үүсгэх шаардлагатай байна, тэрний тоогоор энэ таагийг бичнэ. Манай тохиолдолд хоёр удаа <frame> таагийг бичнэ:

      · 

      · 

      · 

      · 

      · Иймэрхүү байдалтай харагдана:

      ·

      · Юуны өмнө үүсгэсэн фреймүүдээ нэрлэж өгөх шаардлагатай. Үүний тулд  таагийн name гэсэн аттрибутыг ашиглана:

      · 

      · ”zuun_frame”>

      · 

      · 

      · Фрейм дотроо веб хуудас байрлуулахын тулд frame таагийн src гэсэн аттрибутад веб хуудсынхаа html-файлыг зааж өгөх хэрэгтэй:

      · 

      · name=”zuun_frame”  src=”aguulga.html”>

      · 

      · 

      · Фреймүүд агуулсан веб хуудасны код ингээд гүйцээ. Одоо фреймүүдэд тавигдах веб хуудаснуудыг үүсгэх хэрэгтэй.

      · aguulga.html дотор гипер холбоосуудыг бичихдээ <a> таагийн target гэсэн аттрибутыг тодорхойлох хэрэгтэй. Энэ аттрибутын авах утга нь фреймийн нэр байна. Ө.х. гипер холбоосоор дуудагдах веб хуудсыг байрлуулах тэр фреймийн нэр байна. Манай тохиолдолд энэ нь baruun_frame гэсэн утга байх ёстой:

      · 

      ·  Хуудас 1

      ·  Хуудас 1

      ·  Хуудас 1

      · 




      :-)
       
      xaax

      · Эцэст нь page1.html, page2.html, page3.html файлуудыг үүсгэх хэрэгтэй. Ингээд бүх шаардлагатай үйлдлийг хийсний дараа undsen.html файлыг браузерт нээхэд ингэж харагдана:

      ·

      · Хуудас 2 дээр дарахад:

      ·

      · Дээрх жишээнд бид хэвтээгээр цуварсан фреймүүд үүсгэлээ. Хэрэв босоогоор цуварсан фреймүүд үүсгэе гэвэл таагийн rows гэсэн аттрибутыг тодорхойлох хэрэгтэй.

      · Түүнчлэн фрейм дотор фрейм үүсгэж болдог. Тухайлбал:

      ·

      · хэлбэрийн фреймүүдийг үүсгэхийн тулд фрейм дотор фрейм байрлуулна. Ө.х.  дотор дахин <frameset> бичнэ гэсэн үг:

      · 

      ·       

      ·       

      ·                   

      ·                   

      ·       

      · 



      Илгээх | 616 хүн уншсан | Бичсэн: эрдэнэ бат

      Сэтгэгдэл бичих
      Сэтгэгдэл (0) | :

      Шинэ нийтлэлүүд

      hicheel

       HTML-ийн тухайТааг гэж юу вэ?Таагуудын үндсэн шинж, бичигдэх дүрэм HTML, түүний онцлогҮндсэн т...

    Шинэ сэтгэгдлүүд

    Тоолуур

    Та миний 7702 дахь зочин боллоо. Баярлалаа :-)



    :-)
     
    xaax