10

Html хэлний хичээл

Embed Size (px)

Citation preview

Page 1: Html хэлний хичээл
Page 2: Html хэлний хичээл

Веб гэж юу вэ? Веб гэж юу вэ? HTMLHTML-ийн үндэс-ийн үндэсВеб бол Интернэтийн сүлжээнд холбогдсон компьютер

дээр байрлах нэгэн төрлийн файл, файлууд юм. Интернэт гэдэг нь олон компьютерийн хоорондын сүлжээ гэж ойлгож болох юм. Эдгээр хоорондоо ихэвчлэн HTTP гэсэн протокол ашиглан хоорондоо мэдээллээ солилцдог. Мэдээлэл гэдэг нь бидний мэдэх Веб хуудас юм. Веб хуудсыг байрлуулах компьютерийг Веб сервер гэх ба харин тэр мэдээллийг уншиж хөрвүүлэн харуулж байгаа компьютерийг Client гэдэг.

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

Page 3: Html хэлний хичээл

HTML HTML кодчлол гэж юу вэ?кодчлол гэж юу вэ?

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

Page 4: Html хэлний хичээл

HTML кодчлол тухай Веб хуудсыг бүтээж байгаа үндсэн хэлийг HTML гэж

нэрэлдэгийг бид мэдэх билээ. HTML-ыг сайн сурахын тулд түүний бүтэц, бичиглэлийг сурах шаардлагатай. HTML-ын үндсэн бүтэц нь тусгай тодорхойлогчийг ашигладаг. Үүнд:“<” – командыг нээх тодорхойлогч“>” – командыг хаах тодорхойлогч

Энэ хоёр хаалтаар HTML командууд тодорхойлогддог байна. Үүнийг HTML хэлний таг "tag" гэдэг.

Энэ нь нэг таг ямар хүрээнд үйлчлэх вэ? гэдгийг тогтоох шаардлага гардагт оршино. Хаах тагны өмнөх “<” тодорхойлогчийн ард "/" зураас тавьж ашигладаг. Жишээ нь: <html>…</html>

Page 5: Html хэлний хичээл

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

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

Page 6: Html хэлний хичээл

HTML баримтыг үүсгэх

HTML баримтыг үүсгэхдээ түүний ерөнхий бүтэц түүнийг үүсгэдэг тагуудын талаар судлах ёстой юм. Энэ тагууд нь дараах байдлаар бичигддэг. HTML баримт нь үндсэн бие, толгой хэсэг, гарчиг зэрэг хасгүүдээс бүрддэг байна.Эдгээрийг илэрхийлэх тагууд нь:•<html> ба </html> тагууд энэ нь тухайн HTML файл буюу веб хуудасны эхлэл ба төгсгөлийг зааж байх үүрэгтэй таг юм. •<head> ба </head> таг энэ тагууд нь тухайн баримтын хувьд толгой мэдээллийг тодорхойлж өгдөг байна. Мөн веб программчлал буюу скрипт программын функцыг энэ хэсэгт бичиж өгдөг байна. •<title> ба </title> таг энэ тагууд нь тухайн баримтын цонхонд гаргах гарчгийн хэсгийг тодорхойлж өгдөг байна. •<body> ба </body> таг энэ таг нь тухайн баримтын үндсэн биеийг тодорхойлдог байна. Ө.х тухайн веб хуудсанд байгаа бүх л элементүүүдийг энэ хэсэгт тодорхойлж өгдөг байна. Дэлгэцэнд харагдаж байгаа бүх элементийг энэ хэсэгт тодорхойлж өгдөг.•<!--> ба <--> таг энэ тагууд нь тухайн веб хуудсанд тодорхой тайлбарыг бичихэд хэрэглэгддэг байна.

Page 7: Html хэлний хичээл

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

1. Start->Programs->Accessories->Notepad команд сонгож Notepad программыг санах ойд ачаална.

2. Шинэ файл үүсгэх HTML кодыг бичнэ.

<html><head><title> www.olonlog.edu.mn </title></head><body>Тавтай морилно уу !</body></html>

Page 8: Html хэлний хичээл

жишээ 2: хүснэгт үүсгэх<table><tr><td>1 мөрийн эхний нүд</td><td>1 мөрийн хоёрдохь нүд</td><td>1 мөрийн гуравдахь нүд</td></tr><tr><td>2 мөрийн эхний нүд</td><td>2 мөрийн хоёрдохь нүд</td><td>2 мөрийн гуравдахь нүд</td></tr></table>

Page 9: Html хэлний хичээл

Эдгээр tag-уудыг туршиж үзээд тайлбарлана уу

<a href="http://www.w3schools.com">Visit W3Schools.com!</a> <tt>Teletype text</tt>

<i>Italic text</i><b>Bold text</b><big>Big text</big><small>Small text</small>

<button type="button">Click Me!</button>

<font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text!</font>

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>

Page 10: Html хэлний хичээл