LOGO       ВЭБИЙН ҮНДЭС             Лекц-5       Багш: Г.Өсөхжаргал
www.themegallery.com    АГУУЛГАFrameset үүсгэхCSS үүсгэх                       COMPANY LOGO
www.themegallery.com     Frame target windowing Frame ашиглан нэгээс олон хуудсыг нэгэн зэрэг  харах боломжтой юм. Frame ...
www.themegallery.com     Frame target windowing <Frameset > нь rows, cols гэсэн шинж  чанартай.   Rows= – хуваах мөрийн ...
www.themegallery.comFRAME TARGET WINDOWING Marginwidth = зүүн ирмэгээс өгөгдөл нь ямар зайд байрлахыг заана. Marginheigh...
www.themegallery.com FRAME TARGET WINDOWING Нэг frame –ийн link нь нөгөө   frame-ийн хэсэгт үйлчлэхийг    target гэнэ. Үү...
www.themegallery.com    COMPANY LOGO
www.themegallery.com  FRAME TARGET WINDOWING<html><body> <div align="center"><a href="index.html" target="bigwindow">Index...
www.themegallery.com FRAME TARGET WINDOWING<html><frameset rows="10%,90%"><frame src="control.html"><frame src="main.html"...
www.themegallery.com FRAME TARGET WINDOWING <area   shape    =   “rect”   coords      = “0,0,100,100”    href=“URL”     t...
www.themegallery.com   FRAME TARGET WINDOWING<html><frameset cols=“50%,*%”><frame src=“a.html”><frameset rows=“50%,50%”><f...
www.themegallery.com    COMPANY LOGO
www.themegallery.comFRAME EXAMPLE – HEAD.HTML<html><head><title> This is header </title></head><body bgcolor="#00FFFF"><ma...
www.themegallery.com FRAME EXAMPLE – INDEX.HTML<html><head><base target="body"> </head><body><form method="post" action="u...
www.themegallery.com</form><map id="mypic"><area shape="rect" coords="0,0,50,50" href="father.html"><area shape="circle" c...
www.themegallery.com<ul><li><a href="Today.html"> Today news</a><li><a href="best.html"> Top10</a></ul></body></html>     ...
www.themegallery.comFRAME EXAMPLE – BODY.HTML<html><body><bgsound src="URL" loop="-1"><font face="script mon" size=4  colo...
www.themegallery.comFRAME EXAMPLE – MAIN.HTML<html><head><title>Mongolia</title></head><frameset rows="10%,90%">  <frame s...
www.themegallery.com    COMPANY LOGO
www.themegallery.com           CSS ҮҮСГЭХ CSS – Cascading Style Sheet HTML файл CSS хамтран төрөл бүрийн гаралтын хэлбэр...
www.themegallery.com            CSS ҮҮСГЭХ CSS нь 3 хэсгээс бүрдэнэ.   Сонгосон элемент – энэ нь ямар нэг HTML    tag ба...
www.themegallery.com              CSS ҮҮСГЭХ Жишээ нь : p{color:red} Хэрэв авах утга нэгээс олон байвал “ ” ийм  хашилта...
www.themegallery.com            CSS ҮҮСГЭХ Нэг шинжийг нэг мөрөнд бичих нь илүү  ойлгомжтой. Сонгосон элементүүдийг нэгтг...
www.themegallery.com              CSS ҮҮСГЭХ Хэлбэрийн    хуудсуудыг     дараах   байдлаар тодорхойлно. 1. Гадаад хэлбэри...
www.themegallery.com Гадаад хэлбэрийн хуудас – External            Style Sheet Нэг хэлбэрийг олон хуудсанд ашиглахдаа гад...
www.themegallery.com Гадаад хэлбэрийн хуудас – External            Style Sheet Гадаад хэлбэр бүхий файлыг <link> гэсэн  h...
www.themegallery.com    Гадаад хэлбэрийн хуудас –       External Style Sheet Гадаад хэлбэрийн хуудас нь ямар нэг HTML код...
www.themegallery.com    Дотоод хэлбэрийн хуудас –        Internal Style Sheet Энэ     хуудас    нь      зөвхөн   нэг   ба...
www.themegallery.com   Дотоод хэлбэрийн хуудас –       Internal Style Sheet Нэг HTML хуудсанд олон гадаад хэлбэрийн хууда...
www.themegallery.com    HTML TAG ДОТОРХ ХЭЛБЭР Элемент доторх хэлбэр нь хэлбэрийн олон  давуу талыг ашиглах боломжгүй бол...
www.themegallery.com      ХЭЛБЭРИЙН ХУУДСУУД Ижил    элементүүдийн         хувьд       өөр        өөр хэлбэрийн          ...
www.themegallery.com   ЖИШЭЭ НЬ1: CSSEXAMPLE1.CSSbody {background-color:yellow}h1 {font-size:36pt}h2 {color:blue}p {margin...
www.themegallery.com   Жишээ нь1: example1.html<html> <head><link rel=“stylesheet” type=“text/css”  href=“cssexample1.css”...
www.themegallery.com    ЖИШЭЭ НЬ2: CSSEXAMPLE2.CSSbody {background-color:orange}h1 {color:blue; font-size:20pt}hr {color:p...
www.themegallery.com       Жишээ нь2: example2.html<html> <head><link rel=“stylesheet” type=“text/css”  href=“cssexample2....
www.themegallery.com    COMPANY LOGO
www.themegallery.com    COMPANY LOGO
www.themegallery.comCharset=Windows-1251Charset=UTF-8                    COMPANY LOGO
Upcoming SlideShare
Loading in...5
×

Web basic 5

1,410

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,410
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web basic 5

  1. 1. LOGO ВЭБИЙН ҮНДЭС Лекц-5 Багш: Г.Өсөхжаргал
  2. 2. www.themegallery.com АГУУЛГАFrameset үүсгэхCSS үүсгэх COMPANY LOGO
  3. 3. www.themegallery.com Frame target windowing Frame ашиглан нэгээс олон хуудсыг нэгэн зэрэг харах боломжтой юм. Frame –ийг <frameset >tag –ийг ашиглан хэдэн хуудас ашиглахыг нь тодорхойлж өгнө. HTML хуудсууд нь Frame гэж нэрлэгдэх хэсэг бүрт гарна. <frameset> tag ашиглан хуваалт хийж байгаа үед html хуудсандаа <body> tagийг ашиглахгүй. COMPANY LOGO
  4. 4. www.themegallery.com Frame target windowing <Frameset > нь rows, cols гэсэн шинж чанартай.  Rows= – хуваах мөрийн тоо  Cols= – хуваах баганын тоо Энэ хоёрыг нэг дор хамт ашиглах боломжгүй. <frameset > дотор <frame> tag-ийг хамт ашиглана. <frame>  Src= тухайн frame ийн хэсэгт харагдах html хуудасны зам, нэр байна. COMPANY LOGO
  5. 5. www.themegallery.comFRAME TARGET WINDOWING Marginwidth = зүүн ирмэгээс өгөгдөл нь ямар зайд байрлахыг заана. Marginheight = дээд ирмэгээс өгөгдөл нь ямар зайд байрлахыг заана Noresize- хуваасан хэмжээг өөрчлөх боломжгүй Scrolling – гүйлгэх мөр байх эсэхийг тодорхойлно. Name – тухайн frame ийн хэсгийг нэрлэсэн нэр COMPANY LOGO
  6. 6. www.themegallery.com FRAME TARGET WINDOWING Нэг frame –ийн link нь нөгөө frame-ийн хэсэгт үйлчлэхийг target гэнэ. Үүнийг үүсгэхийн тулд frame tag-д name шинж чанарыг ашиглана. <frame src=“a.html” name=“window_name”> COMPANY LOGO
  7. 7. www.themegallery.com COMPANY LOGO
  8. 8. www.themegallery.com FRAME TARGET WINDOWING<html><body> <div align="center"><a href="index.html" target="bigwindow">Index</a><a href="menu.html" target="bigwindow">menu</a></div></body></html> /contol.html/ гэж хадгал COMPANY LOGO
  9. 9. www.themegallery.com FRAME TARGET WINDOWING<html><frameset rows="10%,90%"><frame src="control.html"><frame src="main.html" name="bigwindow"></frameset></html> COMPANY LOGO
  10. 10. www.themegallery.com FRAME TARGET WINDOWING <area shape = “rect” coords = “0,0,100,100” href=“URL” target = “bigwindow” > <form action =“URL” target =“window_name”> COMPANY LOGO
  11. 11. www.themegallery.com FRAME TARGET WINDOWING<html><frameset cols=“50%,*%”><frame src=“a.html”><frameset rows=“50%,50%”><frame src=“a.html”><frame src=“c.html”></frameset></frameset> </html> COMPANY LOGO
  12. 12. www.themegallery.com COMPANY LOGO
  13. 13. www.themegallery.comFRAME EXAMPLE – HEAD.HTML<html><head><title> This is header </title></head><body bgcolor="#00FFFF"><marquee behavior="alternative"><h2>Welcome to my website </h2></marquee></body></html> COMPANY LOGO
  14. 14. www.themegallery.com FRAME EXAMPLE – INDEX.HTML<html><head><base target="body"> </head><body><form method="post" action="user.html">User ID:<input type="text" name="id" size=12><br>Password:<input type="password" name="pass" size=12><br>Remember my ID on this computer:<input type="checkbox" name="check" value="rem"><input type="submit value="connect""> COMPANY LOGO
  15. 15. www.themegallery.com</form><map id="mypic"><area shape="rect" coords="0,0,50,50" href="father.html"><area shape="circle" coords="75,75,25" href="father.html"></map><img src="mypic.jpg" usemap="#mypic" height="100" width="100"><ol> <li><a href="first.html"> first</a> <li><a href="second.html"> Second</a></ol> COMPANY LOGO
  16. 16. www.themegallery.com<ul><li><a href="Today.html"> Today news</a><li><a href="best.html"> Top10</a></ul></body></html> COMPANY LOGO
  17. 17. www.themegallery.comFRAME EXAMPLE – BODY.HTML<html><body><bgsound src="URL" loop="-1"><font face="script mon" size=4 color="yellow"><b><textarea name="1" rows=5 cols=30>Once upon a time</textarea></b></font></body></html> COMPANY LOGO
  18. 18. www.themegallery.comFRAME EXAMPLE – MAIN.HTML<html><head><title>Mongolia</title></head><frameset rows="10%,90%"> <frame src="head.html" noresize> <frameset cols="30%,70%"> <frame src="index.html" noresize> <frame src="body.html" name="body"> </frameset></frameset></html> COMPANY LOGO
  19. 19. www.themegallery.com COMPANY LOGO
  20. 20. www.themegallery.com CSS ҮҮСГЭХ CSS – Cascading Style Sheet HTML файл CSS хамтран төрөл бүрийн гаралтын хэлбэрийг үүсгэнэ. Хэлбэрийн хуудас нь таны HTML файлаас гадна хадгалагдана. COMPANY LOGO
  21. 21. www.themegallery.com CSS ҮҮСГЭХ CSS нь 3 хэсгээс бүрдэнэ.  Сонгосон элемент – энэ нь ямар нэг HTML tag байна  Шинж чанар  Авах утга Шинж чанар ба авах утга нь (:) –тодорхойлох цэгээр тусгаарлагдана. Мөн { } хаалтанд байна COMPANY LOGO
  22. 22. www.themegallery.com CSS ҮҮСГЭХ Жишээ нь : p{color:red} Хэрэв авах утга нэгээс олон байвал “ ” ийм хашилтанд хийнэ. p {font-family:”TRAJAN PRO”} Хэрэв нэгээс олон шинж чанар тодорхойл байвал шинж чанаруудыг ; -аар тусгаарлана. p { text-align:center; color:red } COMPANY LOGO
  23. 23. www.themegallery.com CSS ҮҮСГЭХ Нэг шинжийг нэг мөрөнд бичих нь илүү ойлгомжтой. Сонгосон элементүүдийг нэгтгэж болно. Өөрөөр хэлбэл хэд хэдэн элементүүдийн шинжийг нь зэрэг зааж өгч болно. Тэдгээр элементүүдээ (,) –таслалаар тусгаарлана. CSS-т тайлбарыг /* */ гэж хийнэ. COMPANY LOGO
  24. 24. www.themegallery.com CSS ҮҮСГЭХ Хэлбэрийн хуудсуудыг дараах байдлаар тодорхойлно. 1. Гадаад хэлбэрийн хуудас 2. Дотоод хэлбэрийн хуудас 3. HTML tag доторх хэлбэр COMPANY LOGO
  25. 25. www.themegallery.com Гадаад хэлбэрийн хуудас – External Style Sheet Нэг хэлбэрийг олон хуудсанд ашиглахдаа гадаад хэлбэрийн хуудсыг ашиглана. Гадаад хэлбэрийн хуудсыг ашигласнаар бүхэл вэб хуудасны харагдах байдлыг зөвхөн нэг файл өөрчилснөөр хялбархан хийнэ. Гадаад хэлбэрийн хуудас нь HTML файлаас гадна хадгалагдана. COMPANY LOGO
  26. 26. www.themegallery.com Гадаад хэлбэрийн хуудас – External Style Sheet Гадаад хэлбэр бүхий файлыг <link> гэсэн html –ийн tag ашиглан html хуудасныхаа <head> хэсэгт холбож өгнө.<head><link rel=“stylesheet” type=“text/css” href=“mystyle.css” ></head> COMPANY LOGO
  27. 27. www.themegallery.com Гадаад хэлбэрийн хуудас – External Style Sheet Гадаад хэлбэрийн хуудас нь ямар нэг HTML код агуулдаггүй бөгөөд cssгэсэн өргөтгөлтэй хадгалагдана. Жишээ нь : hr {color:blue} p {margin-left:20px} body {bagckground-image:url(“URL”)} COMPANY LOGO
  28. 28. www.themegallery.com Дотоод хэлбэрийн хуудас – Internal Style Sheet Энэ хуудас нь зөвхөн нэг бармтанд л ашиглагдана. Хэлбэрээ тодорхойлохдоо <style> tag –ийг <head> хэсэгт бичиж ашиглана. <head> <style type=“text/css”> hr {color:blue} p {margin-left:20px} body {bagckground-image:url(“URL”)} </style> </head> COMPANY LOGO
  29. 29. www.themegallery.com Дотоод хэлбэрийн хуудас – Internal Style Sheet Нэг HTML хуудсанд олон гадаад хэлбэрийн хуудас ашиглаж болно. Гадаад хэлбэрийн хуудаснаас дотоод хэлбэрийн хуудас илүү эрхтэй байна. COMPANY LOGO
  30. 30. www.themegallery.com HTML TAG ДОТОРХ ХЭЛБЭР Элемент доторх хэлбэр нь хэлбэрийн олон давуу талыг ашиглах боломжгүй болгоно. Элемент доторх хэлбэр нь хэлбэрийн бүх шинж чанаруудыг ашиглах боломжтой.<p style=“color:green; margin-left:20px”>This is paragraph </p> COMPANY LOGO
  31. 31. www.themegallery.com ХЭЛБЭРИЙН ХУУДСУУД Ижил элементүүдийн хувьд өөр өөр хэлбэрийн хуудсанд хэлбэрийг тодорхойлсон бол утгууд нь уламжлагдана. Жишээ нь : Гадаад хэлбэр  Дотоод хэлбэр h3 { color:red h3 { text-align:right text-align:left font-size:20pt } font-size:8pt } COMPANY LOGO
  32. 32. www.themegallery.com ЖИШЭЭ НЬ1: CSSEXAMPLE1.CSSbody {background-color:yellow}h1 {font-size:36pt}h2 {color:blue}p {margin-left:50px} COMPANY LOGO
  33. 33. www.themegallery.com Жишээ нь1: example1.html<html> <head><link rel=“stylesheet” type=“text/css” href=“cssexample1.css”> </head><body><h1> This is header </h1><h2> This is header </h2><p> This is paragraph </p></body> </html> COMPANY LOGO
  34. 34. www.themegallery.com ЖИШЭЭ НЬ2: CSSEXAMPLE2.CSSbody {background-color:orange}h1 {color:blue; font-size:20pt}hr {color:purple}p {font-size:11pt; margin-left:20px}a:visited {color:yellow}a:active {color:blue}a:hover {color:red} COMPANY LOGO
  35. 35. www.themegallery.com Жишээ нь2: example2.html<html> <head><link rel=“stylesheet” type=“text/css” href=“cssexample2.css”> </head><body><h1> This is header </h1> <hr><p> This is paragraph </p><p> <a href=“www.yahoo.com” target=“_blank”> This is link </a> </p></body> </html> COMPANY LOGO
  36. 36. www.themegallery.com COMPANY LOGO
  37. 37. www.themegallery.com COMPANY LOGO
  38. 38. www.themegallery.comCharset=Windows-1251Charset=UTF-8 COMPANY LOGO

×