Web basic 5

LOGO

ВЭБИЙН ҮНДЭС

Лекц-5
Багш: Г.Өсөхжаргал

www.themegallery.com

АГУУЛГА

Frameset үүсгэх

CSS үүсгэх

COMPANY LOGO


Frame target windowing

 Frame ашиглан нэгээс олон хуудсыг нэгэн зэрэг
харах боломжтой юм. Frame –ийг <frameset >tag
–ийг ашиглан хэдэн хуудас ашиглахыг нь
тодорхойлж өгнө. HTML хуудсууд нь Frame гэж
нэрлэгдэх хэсэг бүрт гарна.
 <frameset> tag ашиглан хуваалт хийж байгаа үед
html хуудсандаа <body> tagийг ашиглахгүй.

COMPANY LOGO


Frame target windowing
 <Frameset > нь rows, cols гэсэн шинж
чанартай.
 Rows= – хуваах мөрийн тоо
 Cols= – хуваах баганын тоо

Энэ хоёрыг нэг дор хамт ашиглах боломжгүй.
 <frameset > дотор <frame> tag-ийг хамт
ашиглана.
 <frame>
 Src= тухайн frame ийн хэсэгт харагдах html хуудасны
зам, нэр байна.

COMPANY LOGO


FRAME TARGET WINDOWING
 Marginwidth = зүүн ирмэгээс өгөгдөл нь ямар
зайд байрлахыг заана.
 Marginheight = дээд ирмэгээс өгөгдөл нь ямар
зайд байрлахыг заана
 Noresize- хуваасан хэмжээг өөрчлөх боломжгүй
 Scrolling – гүйлгэх мөр байх эсэхийг
тодорхойлно.
 Name – тухайн frame ийн хэсгийг нэрлэсэн нэр

COMPANY LOGO


 Нэг frame –ийн link нь нөгөө frame-ийн
хэсэгт үйлчлэхийг target гэнэ. Үүнийг
үүсгэхийн тулд frame tag-д name шинж
чанарыг ашиглана.
 <frame src=“a.html” name=“window_name”>

COMPANY LOGO


COMPANY LOGO


<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


<html>
<frameset rows="10%,90%">
<frame src="control.html">
<frame src="main.html" name="bigwindow">
</frameset>
</html>

COMPANY LOGO



 <area shape = “rect” coords =
“0,0,100,100” href=“URL” target =
“bigwindow” >
 <form action =“URL” target
=“window_name”>

COMPANY LOGO


<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


FRAME 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


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


</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


<ul>

<li><a href="Today.html"> Today news</a>

<li><a href="best.html"> Top10</a>

</ul>

</body>

</html>

COMPANY LOGO


FRAME 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


FRAME 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


CSS ҮҮСГЭХ

 CSS – Cascading Style Sheet

 HTML файл CSS хамтран төрөл бүрийн
гаралтын хэлбэрийг үүсгэнэ.
 Хэлбэрийн хуудас нь таны HTML
файлаас гадна хадгалагдана.

COMPANY LOGO


CSS ҮҮСГЭХ

 CSS нь 3 хэсгээс бүрдэнэ.
 Сонгосон элемент – энэ нь ямар нэг HTML
tag байна
 Шинж чанар

 Авах утга

Шинж чанар ба авах утга нь (:) –тодорхойлох
цэгээр тусгаарлагдана. Мөн { } хаалтанд байна

COMPANY LOGO


CSS ҮҮСГЭХ

 Жишээ нь : p{color:red}

 Хэрэв авах утга нэгээс олон байвал “ ” ийм
хашилтанд хийнэ.

p {font-family:”TRAJAN PRO”}
 Хэрэв нэгээс олон шинж чанар тодорхойл
байвал шинж чанаруудыг ; -аар тусгаарлана.

p { text-align:center; color:red }

COMPANY LOGO


CSS ҮҮСГЭХ

 Нэг шинжийг нэг мөрөнд бичих нь илүү
ойлгомжтой. Сонгосон элементүүдийг нэгтгэж
болно. Өөрөөр хэлбэл хэд хэдэн
элементүүдийн шинжийг нь зэрэг зааж өгч
болно. Тэдгээр элементүүдээ (,) –таслалаар
тусгаарлана.
 CSS-т тайлбарыг /* */ гэж хийнэ.

COMPANY LOGO


CSS ҮҮСГЭХ

 Хэлбэрийн хуудсуудыг дараах байдлаар
тодорхойлно.
1. Гадаад хэлбэрийн хуудас

2. Дотоод хэлбэрийн хуудас

3. HTML tag доторх хэлбэр

COMPANY LOGO


Гадаад хэлбэрийн хуудас – External
Style Sheet

 Нэг хэлбэрийг олон хуудсанд ашиглахдаа
гадаад хэлбэрийн хуудсыг ашиглана. Гадаад
хэлбэрийн хуудсыг ашигласнаар бүхэл вэб
хуудасны харагдах байдлыг зөвхөн нэг файл
өөрчилснөөр хялбархан хийнэ. Гадаад
хэлбэрийн хуудас нь HTML файлаас гадна
хадгалагдана.

COMPANY LOGO


Гадаад хэлбэрийн хуудас – External
Style Sheet
 Гадаад хэлбэр бүхий файлыг <link> гэсэн
html –ийн tag ашиглан html хуудасныхаа
<head> хэсэгт холбож өгнө.

<head>

<link rel=“stylesheet” type=“text/css”
href=“mystyle.css” >

</head>

COMPANY LOGO


Гадаад хэлбэрийн хуудас –
External Style Sheet
 Гадаад хэлбэрийн хуудас нь ямар нэг HTML
код агуулдаггүй бөгөөд cssгэсэн өргөтгөлтэй
хадгалагдана. Жишээ нь :

hr {color:blue}

p {margin-left:20px}

body {bagckground-image:url(“URL”)}

COMPANY LOGO


Дотоод хэлбэрийн хуудас –
Internal Style Sheet
 Энэ хуудас нь зөвхөн нэг бармтанд л
ашиглагдана. Хэлбэрээ тодорхойлохдоо
<style> tag –ийг <head> хэсэгт бичиж ашиглана.
 <head> <style type=“text/css”>

hr {color:blue}


body {bagckground-image:url(“URL”)}

</style> </head>
COMPANY LOGO


Дотоод хэлбэрийн хуудас –
Internal Style Sheet
 Нэг HTML хуудсанд олон гадаад хэлбэрийн
хуудас ашиглаж болно.
 Гадаад хэлбэрийн хуудаснаас дотоод
хэлбэрийн хуудас илүү эрхтэй байна.

COMPANY LOGO


HTML TAG ДОТОРХ ХЭЛБЭР

 Элемент доторх хэлбэр нь хэлбэрийн олон
давуу талыг ашиглах боломжгүй болгоно.
 Элемент доторх хэлбэр нь хэлбэрийн бүх
шинж чанаруудыг ашиглах боломжтой.

<p style=“color:green; margin-left:20px”>

This is paragraph </p>

COMPANY LOGO


ХЭЛБЭРИЙН ХУУДСУУД

 Ижил элементүүдийн хувьд өөр өөр
хэлбэрийн хуудсанд хэлбэрийг
тодорхойлсон бол утгууд нь уламжлагдана.
Жишээ нь :
 Гадаад хэлбэр  Дотоод хэлбэр

h3 { color:red h3 { text-align:right

text-align:left font-size:20pt }

font-size:8pt }
COMPANY LOGO


ЖИШЭЭ НЬ1: CSSEXAMPLE1.CSS

body {background-color:yellow}

h1 {font-size:36pt}

h2 {color:blue}


COMPANY LOGO


Жишээ нь1: example1.html

<html> <head>

href=“cssexample1.css”> </head>

<body>

<h1> This is header </h1>

<h2> This is header </h2>

<p> This is paragraph </p>

</body> </html>
COMPANY LOGO


ЖИШЭЭ НЬ2: CSSEXAMPLE2.CSS

body {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


Жишээ нь2: example2.html

<html> <head>

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


Charset=Windows-1251

Charset=UTF-8

COMPANY LOGO

Web basic 5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Web basic 5

Ähnlich wie Web basic 5 (8)

Mehr von Usukhuu Galaa

Mehr von Usukhuu Galaa (20)

Web basic 5