HTML хэлний тухай

эх сурвалж: http://mongolgoo.blogspot.com/

Сүүлийн үед Интернэт хэрэглэгчдийн тоо харьцангуй өсч түүнийгээ дагаад хэрэглээ ч маш их өргөн болж олон ч сайхан вэб сайтууд бүтээгдэн гарч байна. Энэ тэндхийн вэбүүдээр аялаж, элдвийн форумаар зочилход вэб мэдээллийг үндэслэн бүтээгч HTML хэлний талаар асуусан, сурах юмсан гэсэн олон хэрэглэгчийг хараад өөрийн тус болох зүйлээ хэлээд өгөх юмсан гэж боддог ч төдийлөн цаг зав гаргахгүй юм даа.
Өнөөдөр хичнээн зав муутай суугаа ч гэсэн дүүгийнхээ HTML сурч юм хийх гэсэн хүсэлтийн дагуу хуучин хийж байсан материалаа энд сийрүүлэн орууллаа. Энэ хэсэгт вэб хуудас хэрхэн бүрээгддэг тухай суурь ойлголтыг өгөх, энгийн html хуудас хийх аргачлал, үндсэн зарчимыг ойлгуулахыг хичээсэн болно. Шинэ, шилдэг вэб технологууд, програмчлалийн талаар огт дурдаагүй билээ.


1. Үндсэн ойлголт

Вэб хуудас (Web Page)

Вэб хуудсыг HTML (Hyper Text MarkUp Language) хэлний тусламжтай хийдэг. Энэ нь ердийн текст (ASCII text) файл бөгөөд HTML хэлний команд болох "HTML TAG"-уудыг агуулдаг бөгөөд үүнийг эх файл буюу HTML source code гэж нэрлэдэг (цаашид эх файл гэж нэрлэе). Энэхүү эх файл нь .htm болон .html өргөтгөлтэй байдаг. Вэб хуудас хийхдээ DOS Editor, Norton Editor, Notepad, Write, MS Word г.м ердийн текст боловсруулах програмыг ашиглаж болно.
Вэб хуудас хийхэд зориулагдсан FrontPage, CuteHTML, Flash, Dreamweaver, Adobe Golife, Hotdog, Netscape Composer г.м програмууд байдаг.


Вэб сайт (Web site)

Вэб сайт гэдэг нь тодорхой сэдвийн дагуу, гол хуудас (Home Page) бүхий .htm(l) файлуудын цуглуулга юм. Өөрөөр хэлбэл, байгууллага, компани, хувь хүн өөрсдийн талаархи болон тодорхой зорилгоор зохион байгуулсан (хэлний сургалт, хүүхдүүдэд зориулсан, мэдээлэл солилцох г.м.) Вэб хуудсуудын багц бөгөөд түүнийг URL хаягийн тусламжтайгаар хүлээн авч үзнэ. Энэ нь тухайн сайтын хувьд гол хуудасны хаяг байдаг. Жишээлбэл, энэхүү блогтой танилцахын тулд http://mongolgoo.blogspot.com/ гэсэн URL хаягаар хандах бөгөөд гол хуудас нь http://mongolgoo.blogspot.com/index.html гэсэн хаягтай байна.

Гол хуудас (Home Page)

Гол хуудас нь Вэб сайтыг дуудахад эхэлж нээгддэг Вэб хуудас бөгөөд тухайн сайт дахь хуудсуудын гол зангилаа юм. Гол хуудсын файлын нэр нь ихэвчлэн index.html гэсэн нэртэй байх ба энэ нэрийг стандарт болгон хэрэглэдэг. Зураг 1.

Гол хуудасны бүтэц

Зураг 1. Гол хуудас.

Вэб браузер (Web browser)

Вэб хуудсыг үзэхэд зориулагдсан програмыг Вэб браузер програм хэмээн нэрлэдэг. Жишээлбэл, бидний түгээмэл хэрэглэдэг Netscape Navigator, Internet Explorer програмууд нь Вэб браузер програм юм. Браузер програм нь Вэб хуудасны HTML source кодыг хөрвүүлж, уг хуудсыг зохиогчынх нь гаргахын хүссэн өнгө, агуулга, загвараар дэлгэцэнд гаргадаг.

Вэб сервер (Web server)

Вэб сервер нь Интернэтэд Вэб сайтуудыг хадгалж байдаг өндөр хүчин чадал бүхий тусгай компьютер юм. Вэб серверийг асар олон лангуугаа бусдад түрээслүүлж байдаг үзэсгэлэн худалдааны байшинтай адилтгаж болно. Тэндээс нэг лангуу түрээслэн авч өөрийнхөө Вэб сайтыг байрлуулахын тулд hosting charge буюу түрээсийн төлбөрийг төлөх хэрэгтэй болно. Нэгэнт ингэж тавьсан хуудсыг дэлхийн аль ч булангаас Интернэтэээр дамжуулан үзэх боломжтой. Харин байшингийн эзнийг "host" гэж нэрлэнэ. Ингээд өдөр бүр сая сая ийм Вэб серверүүд хэдэн арван сая хэрэглэгчийн Вэб браузерын хүссэн Вэб хуудсыг дамжуулж байдаг асар том сүлжээг бид Интернэт хэмээн нэрлэдэг.

Вэб хэрхэн дамждаг вэ?

Вэб бол Client/Server зарчмаар ажилладаг (Зураг 2) хэрэглэгчийн хүсэлт (request), серверийн хариулт (response)-ын үндсэн систем юм.
Хэрэглэгч Вэб сайтын хаягийг браузер програмын хаягийн мөр (Location bar)-д бичиж гарыг Enter товчлуур дээр дарснаар браузер програм нь Вэб сервер рүү хүсэлтийг илгээдэг. Харин Вэб сервер нь хариу болгож, HTML хуудсыг буцаадаг.

Зураг 2. Client/Server зарчим

Энэхүү хуудас нь дороох төрөлтэй байж болно. Үүнд:
- Static HTML page (Статик хуудас)
- Dynamic HTML page (Динамик хуудас)
- Directory-listing page

Статик хуудас (Static HTML Page)

Статик хуудас нь хэрэглэгчийн хүсэлтэнд зориулж урьдчилан бэлтгэсэн HTML хуудас (Вэб хуудас) юм. Вэб сервер энэхүү хуудсыг ямар нэгэн тусгай үйлдэл хийлгүйгээр шууд хэрэглэгч рүү явуулдаг. Харин хуудсыг үзэх хэрэглэгчийн хүсэлт нь URL хаяг, эсвэл URL хаяг руу заасан холболт байж болно. Жишээлбэл, http://www.company.com/home.htm хаяг нь сервер рүү илгээгдэж сервер нь хариу (HTML хуудас) буцаана. Зураг 3.

Зураг 3. Хэрэглэгчийн хүсэлт болон серверын хариу.

Динамик хуудас (Dynamic HTML page)

Динамик хуудас нь хэрэглэгчийн хүсэлтийн дагуу үүсгэгддэг. Хэрэглэгч Вэб браузер дээр text box, menu, check box зэргийг бөглөж, сонголт хийгээд тухайн Form дээрх товчлуур дээр дарснаар мэдээлэл сервер рүү илгээгддэг. Уг мэдээллийг сервер хүлээн авч өгөгдлийн санд хадгалах буюу script, application зэргээр боловсруулалт хийгээд үр дүнг нь HTML хуудсаар хэрэглэгч рүү илгээдэг.

2. HTML хэлний тухай товчхон

Вэб хуудсыг HTML хэлний тусламжтай хийдэг тухай дээр дурдсан билээ. HTML хэл нь script хэл бөгөөд ямар нэг хөрвүүлэлт шаарддаггүй, дурын текст боловсруулах програм дээр бичиж болдог. Харин тухайн файлаа *.html юмуу *.htm форматтай хадгалах хэрэгтэй. Дараа нь уг файлаа Вэб браузер програм дээр нээж ажиллуулах хэрэгтэй.
HTML хэлний командуудыг TAG гэж нэрлэх (цаашид таг гэж нэрлэе) ба TAG нь эхлэл ба төгсгөлөөс тогтоно. Эхлэл нь <…> хашилтан дотор, төгсгөл нь хашилтан дотор тус тус байрладаг. Гүйцэтгэх үйлдлээ эхлэл ба төгсгөлийн хооронд бичнэ. Жишээлбэл, хуудсанд гарчиг оруулахын тулд TITLE тагийг ашиглах бөгөөд дараах байдлаар бичнэ.
MongolGoo’s Home Page

HTML тагуудыг хэдэн хэдэн ангилалд оруулан авч үзэж болно. Үүнд:
1. Html Basics–Вэб хуудасны үндсэн тагууд,
2. Html Text–Текстэн мэдээлэлтэй ажиллах тагууд,
3. Html Lists–Жагсаалт үүсгэх тагууд,
4. Html Images–Зурагтай ажиллах тагууд,
5. Html Links–Холбоос тагууд,
6. Html Backgrounds–Вэб хуудасны дэвсгэрийг тохируулах тагууд,
7. Html Tables–Хүснэгттэй ажиллах тагууд,
8. Html Frames–Frame-тэй ажиллах тагууд,
9. Html Forms–Form, анкеттай ажиллах тагууд,
10. Html Metatags–Хайлтын систем болон браузертай ажиллах тагууд,
11. Html Hexcolors-Өнгөтэй холбоотой тагууд.

Үндсэн HTML хэлний бүтэц нь толгойн хэсэг ба их биеийн хэсгээс тогтох ба HTML, HEAD, BODY гэсэн үндсэн 3 тагийг агуулах бөгөөд дараах хэлбэртэй байна. Үүнд:




. . .
. . . Толгойн хэсэг
. . .


. . .
. . . Их биеийн хэсэг
. . .




Энд:
- … таг нь Вэб хуудасны эхлэл, төгсгөлийг,
- … таг нь толгойн хэсэг буюу Вэб хуудасны гарчиг гэх мэт элементүүдийг,
- … таг нь их биеийн хэсэг буюу HTML хэл дээр бичигдэж байгаа ихэнх эх кодыг агуулна.
Тухайн тохиолдолд Вэб хуудсанд ашиглагдсан Javascript, ActiveX Script гэх мэт бусад Script хэлний код HEAD таг дотор тодорхойлогдож болно.
HTML тагууд нь мөн параметр (option)-ууд агуулж болох ба энэ нь хуудсыг нэмэлт боломжуудаар хангаж өгдөг.

HTML source код бичих

Жишээ болгож нэгэн HTML хуудас үүсгэе.

1. Start->Programs->Accessories->Notepad команд сонгож Notepad програмыг санах ойд ачаална.
2. Шинэ файл үүсгээд дараах HTML кодыг бичнэ. Зураг 4.



MongolGoo's Home Page



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

Зураг 4. NotePad програмын цонх.

3. File/Save команд сонгоно.
4. Нээгдэх Save харилцах цонхны Save in талбарт хадгалах замаа зааж өгнө. Жишээлбэл, C:My Documents г.м.
5. File name талбарт файлын нэр, өргөтгөлийг оруулна. Жишээлбэл, index.html г.м.
6. Save товчлуур дээр дарна.
7. Вэб браузер програмын цонхыг нээнэ. Жишээлбэл, Netscape Navigator.
8. File/Open Page (Open) команд сонгох буюу гарын Ctrl+O товчлуурууд дээр дарна.
9. Нээгдэх Open харилцах цонхны Look in талбарт хадгалсан файлынхаа замыг зааж өгнө. Манай тохиолдолд C:My Documents болно.
10. Файлынхаа нэрийг сонгон идэвхжүүлнэ. Манай тохиолдолд index.html болно.
11. Open товчлуур дээр дарна. Зураг 5.


Зураг 5. Вэб браузер програм дээр хуудсаа нээсэн байдал.

Жич: Цаашид үүсгэсэн хуудсаа баяжуулахдаа HTML хэлний таг болон уг тагийнхаа онцлог шинжүүдийг судалж BODY таг буюу эх биеийн хэсэгт нэмж оруулна. Өөрөөр хэлбэл БОЛОН -ийн дунд шинэ тагаа бүхлээр нь эхлэл, төгсгөлтэй нь бичнэ. Зарим сайтуудад санал хүсэлт, зочны дэвтэр гэх мэт хэсэгт тайлбар бичихэд "HTML таг зөвшөөрөгдсөн" гэсэн байдаг. Энэ хэсэг HTML-ийнхээ бүтэн кодыг бичихгүй зөвхөн BODY хэсэг дэх тагуудаа бичиж болно.

Вэб засварлагч (Web editor) програмуудын тухай

Вэб засварлагч програмыг гурван төрөл болгон ангилж болно. Үүнд:
1. Text Editor-HTML хэлний командуудыг мэддэг тохиолдолд энэ төрлийн засварлагч програмыг ашиглаж болно. Өөрөөр хэлбэл Вэб хуудасныхаа source (эх) кодыг текст файлтай ажиллаж байгаа мэтээр нэг бүрчлэн бичдэг. Жишээлбэл, хуудсанд зураг оруулахын тулд зураг оруулах таг болон уг зургийнхаа замыг заж өгнө. Энэ нь тухайн хуудсыг браузер програм дээр нээхэд зургийг заасан байрлалд дуудан үзүүлдэг. Командаа алдаатай бичсэн тохиолдолд зураг харагдахгүй, хуудсанд дуудагдахгүй байж болно. Текст засварлагч програмууд нь зураг оруулах, хүснэгт зурах гэх мэт зарим нэг командыг хуудсанд хялбархан оруулж болох хэрэгслээр хангасан байдаг.
2. Toolbar Editor-Энэ төрлийн засварлагч програм ашиглаж байгаа үед Вэб хуудсыг Word програмаар боловсруулсан зураг болон бусад объект бүхий баримттай ажиллаж байгаа мэтээр зохион байгуулах боломжтой учраас HTML хэлний командуудыг заавал мэддэг байх албагүй. Жишээлбэл, Вэб хуудас дээрээ командын хэрэглүүрийн тусламжтай зургийг оруулсан тохиолдолд засварлагч програм дээр тухайн зураг шууд харагдаж, HTML код дээр өөрчлөлт нь шууд бичигдсэн байдаг. Ийм төрлийн засварлагч програмуудын сул тал гэвэл эх кодоо засварлах шаардлагатай үед өөр ямар нэгэн текст засварлагч ашигладаг явдал юм.
3. Text & Toolbar Editor-Энэ төрлийн едитор програмууд нь Вэб хуудсаа командын хэрэглүүрийн тусламжтай зохион байгуулж шаардлагатай үед тухайн едитор програм дээрээ Вэб хуудсынхаа эх кодыг засварлаж болдог.

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


Холбоотой нийтлэл:
2007-6-17,04:24 | Ангилал: Веб мастеруудад
Илгээх | 14084 хүн уншсан | Бичсэн: Алмас

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

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

Бүртгэлтэй нэрээр бичих
 
  хариу
Зочин нэрээр бичих

:-)
оруулах
 
/.


Зочин хэзээ бичсэн: 17:11, 2017-3-31 | |
maaaash ih bayrlalaa,hund aygu tus boloh zuiluud zunduu ym bn
mishkaanaa хэзээ бичсэн: 16:51, 2013-5-30 | |
saihan medeelel oruulsan bna.AMJILT
iigaa (зочин) хэзээ бичсэн: 13:24, 2013-5-13 | |
миа миа миа :
Инээмсэглэлүүд








mia: миа puppy dog eyes - New waiting Tatajunah Embarassed Twisted Evil Tatajunah Tatajunah Tatajunah Tatajunah Tatajunah Surprised Surprised Surprised Surprised Cool Cool Cool Twisted Evil Twisted Evil Evil or Very Mad
Зочин хэзээ бичсэн: 08:17, 2013-4-15 | |
алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт
Зочин хэзээ бичсэн: 10:11, 2011-11-18 | |
хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах хэлээ гаргах зүрх өвдөх зүрх өвдөх зүрх өвдөх зүрх өвдөх зүрх өвдөх зүрх өвдөх зүрх өвдөх зүрх өвдөх эргэлзэх эргэлзэх эргэлзэх эргэлзэх эргэлзэх эргэлзэх эргэлзэх эргэлзэх эргэлзэх rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor rolling on the floor уйлах уйлах уйлах инээх инээх инээх алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт алга ташилт nerd rolling eyes rolling eyes loser rolling eyes sick sick not talking not talking
Зочин хэзээ бичсэн: 10:10, 2011-11-18 | |
зүрх өвдөх улайх зүрх өвдөх smug whew! ууртай уйлах тэврэлт тэврэлт тэврэлт тэврэлт тэврэлт инээх инээх инээх инээх инээх sick sick sick sick sick sick
Зочин хэзээ бичсэн: 10:09, 2011-11-18 | |
woow
surax zvil mash ix bna

Зочин хэзээ бичсэн: 21:07, 2011-8-30 | |
HARANHUI !!!! HARANHUI !!!! HARANHUI !!!!
end bichsen bvh zvilee video goor hiigeed tawichihaach pls oilgohgvi bna pls pls pls pls уйлах
haranhui хэзээ бичсэн: 18:28, 2011-8-28 | |
Баярлалаа. Хэрэгтэй юм байвал асуувал чадах зүйл байвал хариулаад, олоод нийтэлж байж болох байхыг хичээнэ ээ баярлах
Алмас хэзээ бичсэн: 13:38, 2011-1-5 | |
bayrallaa
iim saihan medeeleluudiig oruulj baigaad chini ih bayarlaj bna. tanai site-aas medej surah zuil ih baina aa. tsaashdiin ajild ni ondor amjilt husiy. гоё шүү
Зочин хэзээ бичсэн: 22:10, 2011-1-4 | |
chi ayj iim ih yumiig sursan yum be
barag bi chamd ataaarhaj bna axaax:D ярзайтал инээх гоё шүү
Snuuke (зочин) хэзээ бичсэн: 19:40, 2010-4-29 | |
J@G@@...
jagaa (зочин) хэзээ бичсэн: 12:37, 2010-4-29 | |
bolj bna shu ........... уйлах http://www.blogmn.net/images/smiles/0134.gif
гоё шүү алга ташилт
jagaa (зочин) хэзээ бичсэн: 12:35, 2010-4-29 | |
сайн л биз дээ
ярзайтал инээх ярзайтал инээх ярзайтал инээх
тааг (зочин) хэзээ бичсэн: 16:56, 2010-1-29 | |
idiomatic-dormant
idiomatic-dormant