лабораторийн ажил 1
- 1. Лабораторийн ажил 1<br />Зорилго: <br />HTML кодчиллын үндсэн tag-уудтай танилцаж, тэдгээрийг ашиглаж сурах<br />Бэлтгэл: <br />Ямар нэг текст боловсруулах програм нээх. (Notepad, UltraEdit32 г.м) <br />Гүйцэтгэх даалгавар 1. Html файл үүсгэж браузер дээр харах<br />Ерөнхийдөө вэб хуудас гэдэг нь tag гэж нэрлэгдэх html кодууд болон шинж чанаруудыг агуулсан текст файл юм. Tag гэдэг нь вэб браузерт вэб хуудас хэрхэн харагдахыг тодорхойлж өгдөг командууд юм. <br />Тag нь эхлүүлэх tag(<...>) ба хаах tag(</...>) гэсэн 2 хэлбэртэй байдаг ба ийм tag-ийг container tag гэж нэрлэдэг. ( Гэхдээ зарим tag-ууд хаах tag-гүй байдаг!)<br />Tag-ийн бичигдэх хэлбэр:<br /><tag-ийн нэр[шинж чанар]> ... </tag-ийн нэр><br />Жишээ,<br /><p> Параграф текст </p><br /><p> tag нь шинээр параграф эхлүүлэхийг тодорхойлдог. Харин дээрх текстийг тодорхой өнгөтэй эсвэл тодорхой фонтоор бичих бол tag-ийн шинж чанар(attribute)-ыг ашиглана.<br />Дараах html tag-уудыг section tag гэх ба эдгээр нь өөр өөрийн гэсэн зорилгоор ашиглагдана. <br /><html> </html> - Дээрх бичиглэлийн <HTML>...</HTML> tag нь HTML кодчилол хаанаас эхэлж, хаана дуусч байгааг браузер(Internet Explorer)-т зааж өгнө. <br /><head> </head> - Вэб хуудсын толгой хэсгийг тодорхойлно. Энд зохиогчийн нэр, хуудсыг үүсгэсэн огноо гэх мэдээллүүд байж болно. Мөн өөрийн вэб хуудсыг тодорхойлохуйц мэдээллүүдийг энэ хэсэгт нэмснээр Хайлтын системүүд уг хуудсын тодорхойлолтыг хайлтын индексдээ нэмэх боломжтой болдог. Мөн энэ хэсэгт хуудсын гарчгийн хэсгийг бичдэг. Гарчиг бичихэд <title>...</title> tag-ийг ашиглана. <br /><body> </body> - Вэб хуудсын body хэсэг нь вэб браузер дээр хуудас хэрхэн харагдахыг тодорхойлох tag-уудыг агуулна. Өөрөөр хэлбэл, энэ tag дотор бичигдсэн зүйлүүд л вэб браузераар харагддаг.<br />Алхам 1. Нээсэн байгаа текст боловсруулах програм дээрээ доорх жишээг бич.<br /><HTML> <HEAD> <!-Хуудасны толгой хэсгийн мэдээлэл. Энэ хэсэгт бичигдсэн текст браузераар харагдахгүй-> <TITLE>ГАРЧИГ</TITLE> <!-Цонхны гарчгийн хэсэгт харагдах текст энэ хэсэгт бичигдэнэ-><br /> </HEAD> <BODY> Hello! </BODY></HTML> <br />Алхам 2. Дээрх жишээгээ хэрхэн ажиллахыг харахын тулд эхлээд файлаа html өргөтгөлтэйгээр хадгалах хэрэгтэй. File -> Save as… Файлдаа lab1.html нэр өгч шинээр хавтас үүсгэн дотор нь хадгална.<br />Алхам 3. Хадгалсан файлаа нээхэд Internet Explorer цонхон дээр нээгдэх болно. Вэб хуудсын эх код(html кодчилол)-ыг харах бол вэб хуудсын дурын газар хулганы баруун товчоо дарж View Source командыг эсвэл Internet Explorer цонхны View цэсийн Source командыг ашиглана. <br />Гүйцэтгэх даалгавар 2<br />Доорх tag-уудын тайлбарыг уншиж танилцаад, бүгдийг нэг дор ашигласан жишээ бичиж үзүүл.<br />HTML кодчилол нь тодорхой шинж чанарыг агуулсан байж болно. Жишээ нь, <body> кодчилолд дэвсгэр өнгө гэсэн шинжийг нэмж болно.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99CC/slideshow/1-5163441/5163441/quot;
> <!-Ягаан дэвсгэр өнгө-> Something really cool</BODY><br />Дэвсгэрийг өнгөөр тодорхойлж өгөхөөс гадна мөн зураг тавьж болно. Гэхдээ ашиглах зургийн файл нь уг html файлтайгаа нэг хавтаст байрлаж байх ёстой. <br /><BODY BACKGROUND=/slideshow/1-5163441/5163441/quot;
bluebar.gif/slideshow/1-5163441/5163441/quot;
> Something really cool</BODY><br />Өргөн ашиглагддаг зарим tag-ийн тайлбар:<br />1. Текст хэвжүүлэх tag <br /> <B>...</B> тодоор бичих<br /> <I>...</I> налуу бичих <br /> <U>...</U> доогуураа зураастай текст бичих<br /> <br /> Мөн дээрх tag-уудыг давхраар нь хэрэглэж болно. <br /> <BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Something really <I><B>cool</B></I> </BODY> <br />2. Фонттой ажиллах <Font > </Font> tag-ийн шинж чанарууд<br /> - SIZE шинж чанар нь -7-оос 7 хүртэл утга авна. <br /><FONT SIZE=6>cool</FONT><br /> - FACE шинж чанар нь фонтыг тодорхойлно. <br /> <FONT FACE=/slideshow/1-5163441/5163441/quot;
ARIAL/slideshow/1-5163441/5163441/quot;
>cool</FONT> <br /> - COLOR шинж чанар фонтны өнгийг тодорхойлно. Өнгийг нэрээр нь өгч болно.<br /> <FONT COLOR=/slideshow/1-5163441/5163441/quot;
#FF0000/slideshow/1-5163441/5163441/quot;
>cool</FONT> <br /> Дээрх tag-уудыг мөн давхар хэрэглэж болно.<br />3. <BR> шинэ мөр эхлүүлэх<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Hey! <BR>What's <BR>going <BR>on? </BODY><br />4. <P> шинэ параграф эхлүүлэх<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Hey! <P>What's <P>going <P>on? </BODY><br />5. <H> гарчиг тодорхойлох<br /> - h1, … , h6 утга авна. <br /> <BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <h1> Гарчиг 1 </h1><br /> <h3> Гарчиг 3 </h3></BODY> <br /> - Гарчгийг голлуулахын тулд align шинж чанарыг ашиглана.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <h1 align=”center”> Гарчиг 1 </h1><br /></BODY> <br />6. Браузер нэгээс дээш хоосон зайг таньдаггүй тул нэгээс илүү хоосон зай авахын тулд кодыг ашиглана. <br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <br /> Something really cool</BODY><br />7. CENTER tag - текстийг голлуулах <br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <CENTER>Something really cool</CENTER></BODY><br />8. IMG tag – вэбд зураг оруулах<br />SRC – Зургийн файлын замыг зааж өгнө. Уг зургийг дуудаж байгаа html файл нь зурагтай нэг хавтасд байгаа бол SRC=/slideshow/1-5163441/5163441/quot;
chef.gif/slideshow/1-5163441/5163441/quot;
, хэрэв зураг нь image дэд хавтаст байрлаж байгаа гэвэл SRC=/slideshow/1-5163441/5163441/quot;
images/chef.gif/slideshow/1-5163441/5163441/quot;
г.м зургийн замыг нь зааж өгнө.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99CC/slideshow/1-5163441/5163441/quot;
> <IMG SRC=/slideshow/1-5163441/5163441/quot;
chef.gif/slideshow/1-5163441/5163441/quot;
WIDTH=130 HEIGHT=101></BODY> <br />9. <hr> хэвтээ шугам зурах<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99FF/slideshow/1-5163441/5163441/quot;
> <P>Something really cool</P> <hr></BODY><br /><hr> кодчиллын шинж чанарууд:<br />size – зураасны өргөн<br />width – зураасны урт <br />color - өнгө<br />align – зэрэгцүүлэлт. (Авах утгууд: left, center, right)<br />Жишээ, <hr color= red align = left><br />
![Лабораторийн ажил 1<br />Зорилго: <br />HTML кодчиллын үндсэн tag-уудтай танилцаж, тэдгээрийг ашиглаж сурах<br />Бэлтгэл: <br />Ямар нэг текст боловсруулах програм нээх. (Notepad, UltraEdit32 г.м) <br />Гүйцэтгэх даалгавар 1. Html файл үүсгэж браузер дээр харах<br />Ерөнхийдөө вэб хуудас гэдэг нь tag гэж нэрлэгдэх html кодууд болон шинж чанаруудыг агуулсан текст файл юм. Tag гэдэг нь вэб браузерт вэб хуудас хэрхэн харагдахыг тодорхойлж өгдөг командууд юм. <br />Тag нь эхлүүлэх tag(<...>) ба хаах tag(</...>) гэсэн 2 хэлбэртэй байдаг ба ийм tag-ийг container tag гэж нэрлэдэг. ( Гэхдээ зарим tag-ууд хаах tag-гүй байдаг!)<br />Tag-ийн бичигдэх хэлбэр:<br /><tag-ийн нэр[шинж чанар]> ... </tag-ийн нэр><br />Жишээ,<br /><p> Параграф текст </p><br /><p> tag нь шинээр параграф эхлүүлэхийг тодорхойлдог. Харин дээрх текстийг тодорхой өнгөтэй эсвэл тодорхой фонтоор бичих бол tag-ийн шинж чанар(attribute)-ыг ашиглана.<br />Дараах html tag-уудыг section tag гэх ба эдгээр нь өөр өөрийн гэсэн зорилгоор ашиглагдана. <br /><html> </html> - Дээрх бичиглэлийн <HTML>...</HTML> tag нь HTML кодчилол хаанаас эхэлж, хаана дуусч байгааг браузер(Internet Explorer)-т зааж өгнө. <br /><head> </head> - Вэб хуудсын толгой хэсгийг тодорхойлно. Энд зохиогчийн нэр, хуудсыг үүсгэсэн огноо гэх мэдээллүүд байж болно. Мөн өөрийн вэб хуудсыг тодорхойлохуйц мэдээллүүдийг энэ хэсэгт нэмснээр Хайлтын системүүд уг хуудсын тодорхойлолтыг хайлтын индексдээ нэмэх боломжтой болдог. Мөн энэ хэсэгт хуудсын гарчгийн хэсгийг бичдэг. Гарчиг бичихэд <title>...</title> tag-ийг ашиглана. <br /><body> </body> - Вэб хуудсын body хэсэг нь вэб браузер дээр хуудас хэрхэн харагдахыг тодорхойлох tag-уудыг агуулна. Өөрөөр хэлбэл, энэ tag дотор бичигдсэн зүйлүүд л вэб браузераар харагддаг.<br />Алхам 1. Нээсэн байгаа текст боловсруулах програм дээрээ доорх жишээг бич.<br /><HTML> <HEAD> <!-Хуудасны толгой хэсгийн мэдээлэл. Энэ хэсэгт бичигдсэн текст браузераар харагдахгүй-> <TITLE>ГАРЧИГ</TITLE> <!-Цонхны гарчгийн хэсэгт харагдах текст энэ хэсэгт бичигдэнэ-><br /> </HEAD> <BODY> Hello! </BODY></HTML> <br />Алхам 2. Дээрх жишээгээ хэрхэн ажиллахыг харахын тулд эхлээд файлаа html өргөтгөлтэйгээр хадгалах хэрэгтэй. File -> Save as… Файлдаа lab1.html нэр өгч шинээр хавтас үүсгэн дотор нь хадгална.<br />Алхам 3. Хадгалсан файлаа нээхэд Internet Explorer цонхон дээр нээгдэх болно. Вэб хуудсын эх код(html кодчилол)-ыг харах бол вэб хуудсын дурын газар хулганы баруун товчоо дарж View Source командыг эсвэл Internet Explorer цонхны View цэсийн Source командыг ашиглана. <br />Гүйцэтгэх даалгавар 2<br />Доорх tag-уудын тайлбарыг уншиж танилцаад, бүгдийг нэг дор ашигласан жишээ бичиж үзүүл.<br />HTML кодчилол нь тодорхой шинж чанарыг агуулсан байж болно. Жишээ нь, <body> кодчилолд дэвсгэр өнгө гэсэн шинжийг нэмж болно.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99CC/slideshow/1-5163441/5163441/quot;
> <!-Ягаан дэвсгэр өнгө-> Something really cool</BODY><br />Дэвсгэрийг өнгөөр тодорхойлж өгөхөөс гадна мөн зураг тавьж болно. Гэхдээ ашиглах зургийн файл нь уг html файлтайгаа нэг хавтаст байрлаж байх ёстой. <br /><BODY BACKGROUND=/slideshow/1-5163441/5163441/quot;
bluebar.gif/slideshow/1-5163441/5163441/quot;
> Something really cool</BODY><br />Өргөн ашиглагддаг зарим tag-ийн тайлбар:<br />1. Текст хэвжүүлэх tag <br /> <B>...</B> тодоор бичих<br /> <I>...</I> налуу бичих <br /> <U>...</U> доогуураа зураастай текст бичих<br /> <br /> Мөн дээрх tag-уудыг давхраар нь хэрэглэж болно. <br /> <BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Something really <I><B>cool</B></I> </BODY> <br />2. Фонттой ажиллах <Font > </Font> tag-ийн шинж чанарууд<br /> - SIZE шинж чанар нь -7-оос 7 хүртэл утга авна. <br /><FONT SIZE=6>cool</FONT><br /> - FACE шинж чанар нь фонтыг тодорхойлно. <br /> <FONT FACE=/slideshow/1-5163441/5163441/quot;
ARIAL/slideshow/1-5163441/5163441/quot;
>cool</FONT> <br /> - COLOR шинж чанар фонтны өнгийг тодорхойлно. Өнгийг нэрээр нь өгч болно.<br /> <FONT COLOR=/slideshow/1-5163441/5163441/quot;
#FF0000/slideshow/1-5163441/5163441/quot;
>cool</FONT> <br /> Дээрх tag-уудыг мөн давхар хэрэглэж болно.<br />3. <BR> шинэ мөр эхлүүлэх<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Hey! <BR>What's <BR>going <BR>on? </BODY><br />4. <P> шинэ параграф эхлүүлэх<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> Hey! <P>What's <P>going <P>on? </BODY><br />5. <H> гарчиг тодорхойлох<br /> - h1, … , h6 утга авна. <br /> <BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <h1> Гарчиг 1 </h1><br /> <h3> Гарчиг 3 </h3></BODY> <br /> - Гарчгийг голлуулахын тулд align шинж чанарыг ашиглана.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <h1 align=”center”> Гарчиг 1 </h1><br /></BODY> <br />6. Браузер нэгээс дээш хоосон зайг таньдаггүй тул нэгээс илүү хоосон зай авахын тулд кодыг ашиглана. <br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <br /> Something really cool</BODY><br />7. CENTER tag - текстийг голлуулах <br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FFFFFF/slideshow/1-5163441/5163441/quot;
> <CENTER>Something really cool</CENTER></BODY><br />8. IMG tag – вэбд зураг оруулах<br />SRC – Зургийн файлын замыг зааж өгнө. Уг зургийг дуудаж байгаа html файл нь зурагтай нэг хавтасд байгаа бол SRC=/slideshow/1-5163441/5163441/quot;
chef.gif/slideshow/1-5163441/5163441/quot;
, хэрэв зураг нь image дэд хавтаст байрлаж байгаа гэвэл SRC=/slideshow/1-5163441/5163441/quot;
images/chef.gif/slideshow/1-5163441/5163441/quot;
г.м зургийн замыг нь зааж өгнө.<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99CC/slideshow/1-5163441/5163441/quot;
> <IMG SRC=/slideshow/1-5163441/5163441/quot;
chef.gif/slideshow/1-5163441/5163441/quot;
WIDTH=130 HEIGHT=101></BODY> <br />9. <hr> хэвтээ шугам зурах<br /><BODY BGCOLOR=/slideshow/1-5163441/5163441/quot;
#FF99FF/slideshow/1-5163441/5163441/quot;
> <P>Something really cool</P> <hr></BODY><br /><hr> кодчиллын шинж чанарууд:<br />size – зураасны өргөн<br />width – зураасны урт <br />color - өнгө<br />align – зэрэгцүүлэлт. (Авах утгууд: left, center, right)<br />Жишээ, <hr color= red align = left><br />](https://image.slidesharecdn.com/1-100909072234-phpapp01/85/1-1-320.jpg)
