SlideShare una empresa de Scribd logo
1 de 2
Лабораторийн ажил 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 =quot;
1.gifquot;
  align=quot;
topquot;
  width=quot;
48quot;
 height=quot;
48quot;
> <br />  зураг  <br />    b. <img> tag-ийн vspace, hspace шинж чанар<br />Зүүн ба баруун зэрэгцүүлэлт ашиглах үед зураг ба текстийн хоорондох зайг тодорхойлоход ашиглагдана.<br />vspace – босоо тэнхлэгийн дагуу авах зай<br />hspace – баруун ба зүүн талаас авах зай<br />Жишээ:<br /><img src=quot;
my_image.gifquot;
 width=79 height=142 <br />                      vspace=8 hspace=12><br />2. Зурагтай ажиллах<br /><img> tag-ийн alt шинж чанар<br />Зураг дээр хулганы заагч байрлахад гарах текстийг энэ шинж чанарт тодорхойлж өгнө.<br />Жишээ,<br /><img src=quot;
my_image.gifquot;
 alt=quot;
My Imagequot;
 width=79  <br />                          height=142 vspace=8 hspace=12><br />border шинж чанар<br />Зурганд хүрээ тодорхойлоход ашиглагдана.<br />      Жишээ,<br />  <a href=quot;
Lab2.htmlquot;
> <br />    <img src=quot;
left.gifquot;
 alt=quot;
leftquot;
 border=0> Link <br />  </a><br />border нь 0 утгатай бол зураг хүрээгүй байна. Хүрээний өнгө нь body tag-н text-д тодорхойлогдсон өнгөөр тодорхойлогдоно. Хэрэв холбоос хийгдсэн(link) зураг бол хүрээ нь link шинж чанарт тодорхойлогдсон өнгөтэй байна. <br />3. Зургийг хэсэгчлэн холболт хийх<br />  <br /><img src=quot;
image.gifquot;
 usemap=quot;
#map_namequot;
><br />usemap – ашиглах map-ийн нэрийг тодорхойлж өгнө. <br />Харин map-ийн зарлагаа нь дараах хэлбэрээр бичигдэнэ.<br />   <map name=quot;
map_namequot;
><br /> <area shape=quot;
rectquot;
 coords=quot;
x1,y1,x2,y2quot;
 <br />hrEF=”www.csms.edu.mn”><br />     <area shape=quot;
rectquot;
 coords=quot;
x1,y1,x2,y2quot;
 <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 />
лабораторийн ажил 3

Más contenido relacionado

Más de ulziibaatar

Más de ulziibaatar (20)

лабораторийн ажил 5
лабораторийн ажил 5лабораторийн ажил 5
лабораторийн ажил 5
 
лабораторийн ажил 4
лабораторийн ажил 4лабораторийн ажил 4
лабораторийн ажил 4
 
лабораторийн ажил 2
лабораторийн ажил 2лабораторийн ажил 2
лабораторийн ажил 2
 
лабораторийн ажил 1
лабораторийн ажил 1лабораторийн ажил 1
лабораторийн ажил 1
 
Lab4 Report
Lab4 ReportLab4 Report
Lab4 Report
 
Lab2 Query
Lab2 QueryLab2 Query
Lab2 Query
 
Pp Lect10 11
Pp Lect10 11Pp Lect10 11
Pp Lect10 11
 
Pp Lect12 13
Pp Lect12 13Pp Lect12 13
Pp Lect12 13
 
Pp Lect9
Pp Lect9Pp Lect9
Pp Lect9
 
Pp Lect8
Pp Lect8Pp Lect8
Pp Lect8
 
Pp Lect4 5
Pp Lect4 5Pp Lect4 5
Pp Lect4 5
 
Access Table
Access TableAccess Table
Access Table
 
Pp Lect6
Pp Lect6Pp Lect6
Pp Lect6
 
Pp Lect41 1
Pp Lect41 1Pp Lect41 1
Pp Lect41 1
 
Pp Lect13 1
Pp Lect13 1Pp Lect13 1
Pp Lect13 1
 
Pp Lect9 10 1
Pp Lect9 10 1Pp Lect9 10 1
Pp Lect9 10 1
 
Pp Lect8 1
Pp Lect8 1Pp Lect8 1
Pp Lect8 1
 
Pp Lect7 1
Pp Lect7 1Pp Lect7 1
Pp Lect7 1
 
Pp Lect6 1
Pp Lect6 1Pp Lect6 1
Pp Lect6 1
 
Pp Lect5
Pp Lect5Pp Lect5
Pp Lect5
 

лабораторийн ажил 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 =quot; 1.gifquot; align=quot; topquot; width=quot; 48quot; height=quot; 48quot; > <br /> зураг <br /> b. <img> tag-ийн vspace, hspace шинж чанар<br />Зүүн ба баруун зэрэгцүүлэлт ашиглах үед зураг ба текстийн хоорондох зайг тодорхойлоход ашиглагдана.<br />vspace – босоо тэнхлэгийн дагуу авах зай<br />hspace – баруун ба зүүн талаас авах зай<br />Жишээ:<br /><img src=quot; my_image.gifquot; width=79 height=142 <br /> vspace=8 hspace=12><br />2. Зурагтай ажиллах<br /><img> tag-ийн alt шинж чанар<br />Зураг дээр хулганы заагч байрлахад гарах текстийг энэ шинж чанарт тодорхойлж өгнө.<br />Жишээ,<br /><img src=quot; my_image.gifquot; alt=quot; My Imagequot; width=79 <br /> height=142 vspace=8 hspace=12><br />border шинж чанар<br />Зурганд хүрээ тодорхойлоход ашиглагдана.<br /> Жишээ,<br /> <a href=quot; Lab2.htmlquot; > <br /> <img src=quot; left.gifquot; alt=quot; leftquot; border=0> Link <br /> </a><br />border нь 0 утгатай бол зураг хүрээгүй байна. Хүрээний өнгө нь body tag-н text-д тодорхойлогдсон өнгөөр тодорхойлогдоно. Хэрэв холбоос хийгдсэн(link) зураг бол хүрээ нь link шинж чанарт тодорхойлогдсон өнгөтэй байна. <br />3. Зургийг хэсэгчлэн холболт хийх<br /> <br /><img src=quot; image.gifquot; usemap=quot; #map_namequot; ><br />usemap – ашиглах map-ийн нэрийг тодорхойлж өгнө. <br />Харин map-ийн зарлагаа нь дараах хэлбэрээр бичигдэнэ.<br /> <map name=quot; map_namequot; ><br /> <area shape=quot; rectquot; coords=quot; x1,y1,x2,y2quot; <br />hrEF=”www.csms.edu.mn”><br /> <area shape=quot; rectquot; coords=quot; x1,y1,x2,y2quot; <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 />