лабораторийн ажил 3
- 1. Лабораторийн ажил 3<br />Зорилго: <br />HTML кодчиллын зураг ба тексттэй ажиллах tag-уудтай танилцаж, тэдгээрийг ашигласан жишээ бичиж ажиллуулах.<br />Бэлтгэл: <br />Ямар нэг текст боловсруулах програм нээх. (Notepad, UltraEdit32 г.м) <br />Гүйцэтгэх даалгавар <br />Доорх tag-уудын тайлбарыг уншиж, жишээг ажиллуулж танилцаад, бүгдийг нэг дор ашигласан жишээ бичиж үзүүлнэ.<br />1. Зураг ба текстийн байрлал<br /> a. <img> tag-ийн align шинж чанар<br />Bottom – текстийн хувьд доош зэрэгцүүлж байрлуулах(default утга)<br />Middle – текстийн хувьд голлуулж байрлуулах<br />Top – текстийн хувьд зургийн дээд хэсгийг зэрэгцүүлэх<br />Left – текстийн зүүн талд байрлуулах<br />Right – текстийн баруун талд байрлуулах<br />Жишээ, <br /> Текст дэх <br /> <img src =/slideshow/3-5163563/5163563/quot;
1.gif/slideshow/3-5163563/5163563/quot;
align=/slideshow/3-5163563/5163563/quot;
top/slideshow/3-5163563/5163563/quot;
width=/slideshow/3-5163563/5163563/quot;
48/slideshow/3-5163563/5163563/quot;
height=/slideshow/3-5163563/5163563/quot;
48/slideshow/3-5163563/5163563/quot;
> <br /> зураг <br /> b. <img> tag-ийн vspace, hspace шинж чанар<br />Зүүн ба баруун зэрэгцүүлэлт ашиглах үед зураг ба текстийн хоорондох зайг тодорхойлоход ашиглагдана.<br />vspace – босоо тэнхлэгийн дагуу авах зай<br />hspace – баруун ба зүүн талаас авах зай<br />Жишээ:<br /><img src=/slideshow/3-5163563/5163563/quot;
my_image.gif/slideshow/3-5163563/5163563/quot;
width=79 height=142 <br /> vspace=8 hspace=12><br />2. Зурагтай ажиллах<br /><img> tag-ийн alt шинж чанар<br />Зураг дээр хулганы заагч байрлахад гарах текстийг энэ шинж чанарт тодорхойлж өгнө.<br />Жишээ,<br /><img src=/slideshow/3-5163563/5163563/quot;
my_image.gif/slideshow/3-5163563/5163563/quot;
alt=/slideshow/3-5163563/5163563/quot;
My Image/slideshow/3-5163563/5163563/quot;
width=79 <br /> height=142 vspace=8 hspace=12><br />border шинж чанар<br />Зурганд хүрээ тодорхойлоход ашиглагдана.<br /> Жишээ,<br /> <a href=/slideshow/3-5163563/5163563/quot;
Lab2.html/slideshow/3-5163563/5163563/quot;
> <br /> <img src=/slideshow/3-5163563/5163563/quot;
left.gif/slideshow/3-5163563/5163563/quot;
alt=/slideshow/3-5163563/5163563/quot;
left/slideshow/3-5163563/5163563/quot;
border=0> Link <br /> </a><br />border нь 0 утгатай бол зураг хүрээгүй байна. Хүрээний өнгө нь body tag-н text-д тодорхойлогдсон өнгөөр тодорхойлогдоно. Хэрэв холбоос хийгдсэн(link) зураг бол хүрээ нь link шинж чанарт тодорхойлогдсон өнгөтэй байна. <br />3. Зургийг хэсэгчлэн холболт хийх<br /> <br /><img src=/slideshow/3-5163563/5163563/quot;
image.gif/slideshow/3-5163563/5163563/quot;
usemap=/slideshow/3-5163563/5163563/quot;
#map_name/slideshow/3-5163563/5163563/quot;
><br />usemap – ашиглах map-ийн нэрийг тодорхойлж өгнө. <br />Харин map-ийн зарлагаа нь дараах хэлбэрээр бичигдэнэ.<br /> <map name=/slideshow/3-5163563/5163563/quot;
map_name/slideshow/3-5163563/5163563/quot;
><br /> <area shape=/slideshow/3-5163563/5163563/quot;
rect/slideshow/3-5163563/5163563/quot;
coords=/slideshow/3-5163563/5163563/quot;
x1,y1,x2,y2/slideshow/3-5163563/5163563/quot;
<br />href=”www.csms.edu.mn”><br /> <area shape=/slideshow/3-5163563/5163563/quot;
rect/slideshow/3-5163563/5163563/quot;
coords=/slideshow/3-5163563/5163563/quot;
x1,y1,x2,y2/slideshow/3-5163563/5163563/quot;
<br />href=”Main.html”><br /> :<br /> :<br /> </map><br /> <map> tag доторх мөр бүр нь холболт хийх талбайнуудыг тодорхойлж байдаг.<br />shape шинж чанарт холбоос хийх дүрсийн хэлбэрийг тодорхойлно. <br />rect – тэгш өнцөгт, <br />circle – тойрог гэх мэт. <br />cоords шинж чанарын х1, у1 нь талбайн зүүн дээд өнцгийн координат, х2,у2 нь баруун доод өнцгийн координатыг тус тус тодорхойлно. Харин тойрог бол тойргийн төв цэг, радиусын цэгүүдийг тодорхойлж өгнө.<br />href шинж чанарт холболт хийгдэх файл эсвэл интернетийн ямар нэгэн хаяг байна. <br />4. Текстийн зэрэгцүүлэлт<br /> Текстийн зэрэгцүүлэлтийг <div> tag ашиглан тодорхойлно.<br /> <div align=left>...</div> - зүүн зэрэгцүүлэлт<br /> <div align=right>...</div> - баруун зэрэгцүүлэлт<br /> <div align=center>...</div> - голлуулах<br />
