Лабораторийн ажил 3

Зорилго: HTML кодчиллын зураг ба тексттэй ажиллах tag-уудтай танилцаж, тэдгээрийг

ашигласан жишээ бичиж ажиллуулах.

Бэлтгэл: Ямар нэг текст боловсруулах програм нээх. (Notepad, UltraEdit32 г.м)

Гүйцэтгэх даалгавар Доорх tag-уудын тайлбарыг уншиж, жишээг ажиллуулж танилцаад, бүгдийг нэг дор

ашигласан жишээ бичиж үзүүлнэ.

1. Зураг ба текстийн байрлал a. <img> tag-ийн align шинж чанар

- Bottom – текстийн хувьд доош зэрэгцүүлж байрлуулах(default утга)- Middle – текстийн хувьд голлуулж байрлуулах- Top – текстийн хувьд зургийн дээд хэсгийг зэрэгцүүлэх- Left – текстийн зүүн талд байрлуулах- Right – текстийн баруун талд байрлуулахЖишээ, Текст дэх <img src ="1.gif" align="top" width="48" height="48"> зураг

b. <img> tag-ийн vspace, hspace шинж чанарЗүүн ба баруун зэрэгцүүлэлт ашиглах үед зураг ба текстийн хоорондох зайг тодорхойлоход ашиглагдана.- vspace – босоо тэнхлэгийн дагуу авах зай- hspace – баруун ба зүүн талаас авах зайЖишээ:

<img src="my_image.gif" width=79 height=142 vspace=8 hspace=12>

2. Зурагтай ажиллах<img> tag-ийн alt шинж чанар

Зураг дээр хулганы заагч байрлахад гарах текстийг энэ шинж чанарт тодорхойлж өгнө.Жишээ,<img src="my_image.gif" alt="My Image" width=79 height=142 vspace=8 hspace=12>

border шинж чанарЗурганд хүрээ тодорхойлоход ашиглагдана.

Жишээ, <a href="Lab2.html"> <img src="left.gif" alt="left" border=0> Link </a>

border нь 0 утгатай бол зураг хүрээгүй байна. Хүрээний өнгө нь body tag-н text-д тодорхойлогдсон өнгөөр тодорхойлогдоно. Хэрэв холбоос хийгдсэн(link) зураг бол хүрээ нь link шинж чанарт тодорхойлогдсон өнгөтэй байна.

3. Зургийг хэсэгчлэн холболт хийх

<img src="image.gif" usemap="#map_name">

usemap – ашиглах map-ийн нэрийг тодорхойлж өгнө. Харин map-ийн зарлагаа нь дараах хэлбэрээр бичигдэнэ. <map name="map_name">

<area shape="rect" coords="x1,y1,x2,y2" hrEF=”www.csms.edu.mn”>

<area shape="rect" coords="x1,y1,x2,y2" hrEF=”Main.html”>

: :

</map>

<map> tag доторх мөр бүр нь холболт хийх талбайнуудыг тодорхойлж байдаг.shape шинж чанарт холбоос хийх дүрсийн хэлбэрийг тодорхойлно.

rect – тэгш өнцөгт, circle – тойрог гэх мэт.

cоords шинж чанарын х1, у1 нь талбайн зүүн дээд өнцгийн координат, х2,у2 нь баруун доод өнцгийн координатыг тус тус тодорхойлно. Харин тойрог бол тойргийн төв цэг, радиусын цэгүүдийг тодорхойлж өгнө.href шинж чанарт холболт хийгдэх файл эсвэл интернетийн ямар нэгэн хаяг байна.

4. Текстийн зэрэгцүүлэлт Текстийн зэрэгцүүлэлтийг <div> tag ашиглан тодорхойлно. <div align=left>...</div> - зүүн зэрэгцүүлэлт <div align=right>...</div> - баруун зэрэгцүүлэлт <div align=center>...</div> - голлуулах