лабораторийн ажил 2

3
Лабораторийн ажил 2 Зорилго: HTML кодчиллын хүрээ үүсгэх болон холболт хийх tag-уудтай танилцаж, тэдгээрийг ашигласан жишээ бичиж ажиллуулах. Бэлтгэл: Ямар нэг текст боловсруулах програм нээх. (Notepad, UltraEdit32 г.м) Гүйцэтгэх даалгавар 1. Хүрээ үүсгэх 1. Дараах хэлбэрийн хүрээ үүсгэх жишээ бич. 2. “Фрейм6” гэсэн холбоос дээр дарахад www.yahoo.com хаяг “зүүн фрейм” дээр нээгдэнэ. 3. Фрейм5 текст дээр дарахад www.google.mn хаяг фрейм3 дээр нээгдэнэ. 4. Фрейм4 текст дээр дарахад фреймүүд анхны төлөвтөө буюу доорх байдлаар харагдана. “зүүн фрейм” фрейм2 фрейм3 фрейм4 фрейм5 фрейм6 Фрейм үүсгэх Frame кодчилол ашигласнаар нэгээс олон хуудас(html файл)-ыг браузер дээр нэгэн зэрэг харах боломжтой болно. HTML хуудсууд нь FRAME гэж нэрлэгдэх хэсэг бүрт гарна. Frame бүр нь биеэ даасан өөр өөр файлуудыг дуудаж харуулдаг. Анхаарах зүйл: Хуудсыг хүрээнүүдэд хувааж байгаа кодчиллын хэсэг буюу frameset tag-ийг агуулж буй html файлд <body>... </body> tag-ийг ашигладаггүй. <frameset> - Frame хуваах тохиргоо хийнэ. <frame> - Хүрээг харуулна. <noframes> - Хүрээг харуулахгүй. <iframe> - Цонхыг хуваалгүйгээр хүрээг харуулна. Жишээ: frameset cols кодчилол цонхыг баганы дагуу хуваана. Эхний багана нь цонхны 30%, нөгөө нь 70%-ийг эзэлнэ. "lab1.htm" файл нь эхний баганад, "lab2.htm" файл нь хоёр дахь баганад тус тус гарна. <html> <frameset cols="30%,70%">

Upload: ulziibaatar

Post on 20-Jun-2015

1.397 views

Category:

Documents


10 download

TRANSCRIPT

Page 1: лабораторийн ажил 2

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

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

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

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

Гүйцэтгэх даалгавар 1. Хүрээ үүсгэх1. Дараах хэлбэрийн хүрээ үүсгэх жишээ бич. 2. “Фрейм6” гэсэн холбоос дээр дарахад www.yahoo.com хаяг “зүүн фрейм” дээр

нээгдэнэ. 3. Фрейм5 текст дээр дарахад www.google.mn хаяг фрейм3 дээр нээгдэнэ.4. Фрейм4 текст дээр дарахад фреймүүд анхны төлөвтөө буюу доорх байдлаар

харагдана.

“зүүн фрейм”

фрейм2 фрейм3 фрейм4

фрейм5 фрейм6

Фрейм үүсгэхFrame кодчилол ашигласнаар нэгээс олон хуудас(html файл)-ыг браузер дээр нэгэн

зэрэг харах боломжтой болно. HTML хуудсууд нь FRAME гэж нэрлэгдэх хэсэг бүрт гарна. Frame бүр нь биеэ даасан өөр өөр файлуудыг дуудаж харуулдаг. Анхаарах зүйл: Хуудсыг хүрээнүүдэд хувааж байгаа кодчиллын хэсэг буюу frameset tag-ийг агуулж буй html файлд <body>... </body> tag-ийг ашигладаггүй.

<frameset> - Frame хуваах тохиргоо хийнэ.<frame> - Хүрээг харуулна.<noframes> - Хүрээг харуулахгүй. <iframe> - Цонхыг хуваалгүйгээр хүрээг харуулна.

Жишээ: frameset cols кодчилол цонхыг баганы дагуу хуваана. Эхний багана нь цонхны 30%, нөгөө нь 70%-ийг эзэлнэ. "lab1.htm" файл нь эхний баганад, "lab2.htm" файл нь хоёр дахь баганад тус тус гарна.

<html> <frameset cols="30%,70%"> <frame src="lab1.htm"> <frame src="lab2.htm"> </frameset> <html>

Сүүлийн багана буюу цонхны 70%-ийг эзэлж буй фреймийг дахин мөрийн дагуу 2 хуваах бол:

<html> <frameset cols="30%,70%"> <frame src="lab1.htm scrolling="NO" noresize> <frameset rows="50%,50%" frameborder="NO">

Page 2: лабораторийн ажил 2

<frame src="lab2" name="topFrame" scrolling="NO" > <frame src="lab3" name="mainFrame"> </frameset></frameset></html>noresize - Браузер дээр фреймийн хэмжээг өөрчлөх боломжгүйframeborder – Фреймийн хүрээний өргөн. “NO” утгатай бол хүрээг харуулахгүй.name – Фреймийн энэ шинж чанараар үүсгэж буй фреймд нэр өгөх ба энэ нэр нь <a>

tag-ийн target шинж чанарт ашиглагдана. scrolling – Фрейм дээр scrollbar гарах эсэх

Гүйцэтгэх даалгавар 2. Холбоос хийх<a> - Вэб хуудас дээрх бүх төрлийн холболт хийх tag. Алхам 1. <a> tag ашигласан жишээ бич.

<a href="csms.edu.mn" target="_blank"> Холболт хийх текст</a>

href – холболт хийх хаягtarget - холбогдсон хаяг хаана нээгдэхийг тодорхойлно.

_blank – шинэ цонхон дээр нээгдэх _self – холбоос текстийг агуулж буй фрейм дээр нээгдэх_parent – нээлттэй байгаа цонхон дээр нээгдэхэсвэл уг цонх нээгдэх фреймийн нэр байж болно.

Алхам 2. <a> tag-ийн name шинж чанарыг ашигласан жишээ бич. Жишээ, “3-р зураг руу шилжих” гэсэн холбоос текст дээр дарахад 3-р зураг буюу

сүүлийн зураг руу шилжих.<html><body> <a href="#last">3-р зураг руу шилжих</a> <p><img src=“pic1.jpg”width=200 height=200>Зураг1 <p><img src=”pic2.jpg”width=200 height=200>Зураг2 <p><a name="last">

<img src=”pic3.jpg” width=200 height=200> Зураг3

</a> </body></html>