График дизайн: HTML хэлний тухай

HTML хэлний тухай

HTML

1. Танилцуулга

2. Hyper Text Markup Language бую

1. Танилцуулга

у загварчлалын хэл

3. Ерөнхий тагууд

4. Жишээ

5. Дасгал

WWW-ийгболомжуудыг үүсгэдэг гайхамшигт ертөнцөд тавтай морилно уу.Интернет нь 30 настай боловч тэрээр 1990-ээд оны үед одоогийн энэ бүх боломжууд ыгөгсөн WWW-ийг гарч ирэхээс өмнө тийм ч түгээмэл биш байлаа.Шинэ технолги гарах бүрд хийгдэх түүний өдөр тутмын шахуу энэхүү хөгжил нь маш сэтгэл хөдөлгөсөн зүйл байсан . WWWгэдэг нь дэлхий нийтийн сүлжээ (world wide web)гэсэн үг юм. –ийг товчлон сүлжээ буюу итернет гэж нэрлэдэг .Интернет гэдэг нь компютерүүдийн сүлжээ бөгөөд HTTP гэсэн стандарт протокол ашиглан хоорондоо холбогдоно.Энэхүү сүлжээний мэдээлэл веб хуудас гэж нэрлэгдэн хадгалагддаг. Веб хуудсууд нь веб сервер нэж нэрлэгдэх компютерт байрлана. Веб хуудсуудыг ашиглаж , мэдээллийг уншиж байгаакомпютерыг вебээр үйлчлүүлэгч (client)гэнэ. Вебээр үйлчлүүлэгчид нь веб харуулах хэрэгслийг ашигладаг.Жнь Internet Explorer,Netscape’s communicator(navigator) гэх мэт.Веб хуудас интернетэд байрлаагүй байгаа үедээ C:My documentsKherlen.html нэж харагдана.Энэ хуудасны хаягийг URL(uniform source locator)гэж нэрлэдэг.Вебхуудас бүр мэдээллээ харуулах харуулдаг ба веб хуудас харуулагч хэрэгсэл маань эдгээр зааврыг уншиж харууулна.Хуудас харуулах зааврыг HTML
Гэж нэрлэгдэх кодчлолоор бичдэг .Веб хуудасны зааврын стандартыг W3Cбайгууллагаас тогтооодог. W3C (world wide consortium) дэлхйин сүлжээний холбоо гэсэн үг юм.HTML,CSS, XML нь вебийн стандарт кодчлолууд ба HTML 2,HTML3,HTML3.2, HTML4.0 байх ба хамгйин сүүлийн хувилбар нь XHTML 1.0юм.
Hyper Text Markup Language буюу загварчлалын хэл
HTML гэж COBOL, FORTRAN , Cболон PASCAL хэлтэй адил шаталсан программчлалын хэл юм. Hyper Text гэдэг нь компютерийн систем дахь нэгээс нөгөөд хамаарал бүхий онцгоой текстын нөөц гэсэн утгатай. Markup Language гэдэг нь засвар текст буюу <>их багын тэмдгийн хооронд бүх код нь бичигддэгзагварчлалын хэлюм.Мэдээлэл болон текстыг форматлахад ашиглана.Энэхүү мэдээллийн загварчлал нь уламжлалт программчлалын хэлнүүдээс ялгаатай.(Уламжлалт хэлнүүд нь загварчлагдсан дараалал дахь үйлдлийг гүйцэтгэдэг.)
<> -ийг бид tag ,</> төгсгөлйин таг.Энэ 2тагийн хооронд бүх мэдээллээ оруулж бичнэ.Tagийг хаахгүй бол өгүүлбэр зүйн алдаа зааж таны веб хуудсан дээр”өөрийн биеэр “ залрах болно.Кодыг том ба жижиг үсгээр алинаар нь ч бичиж болно.W3Cньжижиг үсгээр бичихийг санал болгодог.Учир нь дара үеийн HTML бичиглэл нь том ба жижиг үсгйиг ялгаатайгаар ойлгохоор хийгдэж байгаа болно.
Анхдагч код хэлбэрээр HTML-ийг бичих талаар сонирхоеБид HTML файлбуюу HTML баримт үүсгэдэг.Үүнийг үүсгэх нь маш амархан бөгөөд та зөвхөн ямар нэг текст засварлагч программ ашиглахад болно.FRONT PAGE EXPRESS нэртэй багц программаар веб хуудсыг бодитойгоор харж хйих боломж бий.Учир нь энэ их код шууд бичих нь төвөгтэй санагддаг.
Хэрвээ та Windows-тэй бол notepad нэртэй текст засварлах жижиг программыг ашиглаарай.Бас Word,Text Editor,Wordpad
Эсвэл HTML-ийн үнэгүй анхдагч код засварлагчийг HTML-Kit-ийг татаж авч болно(http://www.chami.com/html-kit) Microsoft’s Visual InterDev гэсэн
HTML-йиг засварлаж ,веб программыг илүү сайжруулдаг программ бий.Ихэнх HTMLфайл нь html эсвэл htm өргөтгөлтэй байна.Анхны HTML гарах үед бүх компютерууд файлыг 3 тэмдэгт бүхий өргөтгөлтэй байхыг зөвшөөрч байсан бол одоогийн windowsийн хувилбрууд нь түүнээс олон үсгээр тэмдгэлэхийг зөвшөөрдөг байна.
С ба С++,Java хэлнүүдийг ашиглах явцад хйисэн алдаа нь нэлээд ноцтой буюу программыг зайлшгүй эхнээс нь шалгахад хүргэдэг бол HTML-ийнх тийм биш .Бразераар харах үед танд энэ нь ажиглагдах болно.Таны хувиыйн хуудасны нэр Index.htm(Default ) байвал зүгээр .Учир нь ингэж нэрлэвэл та файлынхаа замын талаар дэлгэрэнгүй мэдэх шаардлагагүй болно.Таны веб сервер хувийн хуудсыг тань эхлүүлэхйин тулд энэ файлыг автоматаар хайдаг юм.
3.Ерөнхйи тагууд
<html>HTML хэлнйи эхлэлийн таг
<head> веб хуудасны толгой хэсгйин эхлэлийн таг
<title>вэбйин гарчгийн нэр </title>
</head> толгой хэсгйин төгсгөлйин таг
<body>.вебийн бие хэсэг
Вебиин бүх мэдээлэл энэ хэсэгт бичигдэнэ.
</body>бие хэсгйин төгсгөл
</html>HTMLхэлнйи төгсгөл
Текстийн хэлбэр , формат
<!--кодондоо тайлбар оруулах -- > веб хуудсандээр харагдахгүй
<b>bold</b>,<strong></strong> тодоор бичигдэнэ.
<i>italic</i>,<em>emphasis </em>налуу
<u>underline</u>,<ins> </ins>доогуураа зураастайбичигдэнэ.
<br>line break -enter товчны үүрэг гүйцэтгэнэ.
<nobr> дараагийн мөрөнд шилжихгүйгээр үргэлжлүүлэн бичнэ.
<p> paragraph</p> догол мөрөөс эхлэн бичнэ

<big> текстиин хэмжээг томруулах<big>

<big>текстийн <big> хэмжээг<big>томруулах</big></big></big>
Текстийн хэмжээг томруулах
<small> текстиин хэмжээг багасгах</small>
<small> текстийн <small> хэмжээг <small> багасгах</small></small></small>
Текстийн хэмжээг багасгах:
<hr> хөндлөн зураас оруулах
Size=”” зураасны өргөнйи хэмжээ тоогоор
Width=”” зураасны урт(200pixel), хувиар(30%)
Color=””
<hr size=”10” width=” 60%” color=”red”>

<body>
Bgcolor=”” (backgroundcolor) веб хуудасны дэвсгэр өнгө нгли үгээр эсвэл өнгөний кодоор #FFFFF)
Background=”” дэвсгэр зураг-зургийн нэр.өргөтгөл ball.jpg)
Text=”” текстийн өнгө
Link=””холбоосын өгнө
Alink=””идэвхитэй холбоосын өнгө
Vlink=””зочилсон холбоосын өнгө(ороод үзчихсэн)
Style=”color:pink”
<font> текстийн форматыг өөрчлөх</font>
Color=””өнгө
Size=””текстийн хэмжээг -3, +4 гэх мэт өөрчилж болно.
Face=”” Arial гэх мэт Гэвч хэрэглэгдэхээ больсон
<h1> heading1</h1> Гарчгийн таг –Хамгйин том гарчиг
<h2>
.
.<h6>heading6</h6> Хамгийн жижиг гарчиг
Align=”” left, right, center
Style=”color:pink”
<strike>голоороо зураастай бичигдэнэ</strike> ,<del> </del> =<s>
Zereg<sup> superscript</sup>zereg^superscript
Index<sub> subscript</sub> Index_subscript
_{<div > division</div>}

_{<div align=”left”>}_{зүүн талруу шахсан</div>зүүн тал руу шахсан}

_{<div align=”center”>голлосон</div>=<center> голлосон}

_{<div align=”right”> баруун талруу шахсан</div>}

_{<marquee> </marquee>-дэлгэц дээр текстийг гүйлгэж харуулна.}
_{loop=”” infinite}
_{bgcolor=”” өнгөний нэр ,rgb} код
width=””
height=””
direction=”” top, down , left, right
scroll amount=””1,2,3
scrolldelay=””1,2,3
Товчлол , ишлэл бичих тагууд :

<acronym title=”information communication technology” >ICT</acronym>=<abbr title=….>abbr нь IE5.0 ба Netscape6.2-ээс дээш хувилбарт гарна.

Энэ нь товчлон гарсан үг дээр заагчийг байрлуулахад дэлгэрэнгүй гарна.

<bdo dir =”rtl” > Chinzorig<bdo>giroznihc

-rtl(right to left ) баруун талаас зүүн тийш нь хөрвүүлэн харуулна.

<q>богино ишлэлийг бичих
<blockquote> урт ишлэлийг бичих
<address>хаяг бичих
<cite>иш баримт харуулах-налуугаар
<dfn>тод байдлаар харуулах-налуугаар

Компютерийн гаргалтын тагууд
<kbd>гарны код байдлаар бичих
<samp>компютерийн код байдлаар бичих
<tt>teletype-хэлбэрээр бичих
<var>хувьсагч байдлаар бичих
<listing>
<plaintext> <pre>ийн оронд хэрэглэж болно.
<xmp>

_{<pre>хоосон зай болон мөрийг тэр чигээ нь харуулна.</pre>}

_{Өргөн хэрэглэгддэг} тэмдэгт оруулах

_{Үр дүн}	_Код₍_нэрээр₎	_Код₍_{дугаараар}₎
	_	_
_<	_&It;	_<
_>	_>	_>
_&	_&	_&
_“	_"	_"
_‘		_'

_{Онцгой тэмдэгт оруулах}

_{Үр дүн}	_{Тайлбар}	_Код₍_нэрээр₎	_Код₍_{дугаараар}₎
¢	_Цент	_¢	_¢
£	_паунд	_£	_£
¥	_Иен	_¥	_¥
§	_{хэсгийн тэмдэглэгээ}	_§	_%#167;
©	_{зохиогчийн эрх}	_©	_©
®	_{фирмийн тэмдэглэгээ}	_®	_®
Ч	_үржих	_×	_×
ч	_хуваах	_÷	_÷
¼	_quarter	_&It;&frac14

_{Жагсаалт}үүсгэх

<ol> ordered list –эрэмбэлэгдсэн жагсаалт

Start=”” Дугаарлалтын эхлэх дараалал ,тоогоор

Type=””Дугаарлалтын төрөл

_·_{A_-том үсгээр}

_·_{a-жижиг үсгээр}

_·_{I-ромбо тоогоор}

_·_{i-жижиг ромбо тоогоор}

_{<li> (list)}_{дугаарлагдах текст}

_·_{value-тухайн дугаарлагдах текстийн эхлэх утгыг өгч болно}

_</ol>
_{<ol type=”A” start=”5”                                  E.}_{дугаарлагдах текст}
_<_li_>_{дугаарлагдах текст                                 F. дугаарлагдах текст}
_{<li> дугаарлагдах текст                               A. дугаарлагдах текст}
_{<li value=”1” > дугаарлагдах текст              B. дугаарлагдах текст}
_{<li> дугаарлагдах текст}
_</ol>
_{<ul> -unordered list эрэмбэлэгдээгүй жагсаалт (оронд нь <dir> <menu> байж болно.)}
_type=””_{дугаарлалтын төрөл}

_·_circle

_·_square

_·_disc

_{<dl> definition list –тодорхойлтын жагсаалт}
_{Тодорхойлтын жагсаалт нь элементийн биш харин томьёоллын тайлбарын жагсаалт юм.}
_{<dt> тодорхойлтын жагсаалтын томьёолол</dt>}
_{<dd> тодорхойлтын жагсаалт тайлбар</dd>}
_</dl>

_{Зураг оруулах}
_{<img src=”зургийн нэр.өргөтгөл”>}
_alt=””зураг дээр курсор аваачихад гарах тайлбар текст
width=”” зургийн өргөн
height=””
<img src =”D:Zurag2002 World Championship Korea and Japan100751~1.jpg” width=”320” height=”240 alt=”sport”>
Зураг 1 Зураг оруулж байгаа нь
Зураг оруулахдаа .PNG.TIFF.PCX.PICT ЗЭРЭГ өргөтгөлийг ашигладагч ихэвчлэн .JPEG.JPG.GIF ВЕКТОР ЗУРГИЙГ ашигладаг.Мөн веб хуудсаа ачааллуулахгүин тулд зургийн хэмжээг аль болох багаар тооцож хийх. Аль эсвэл их хэмжээний мэдээлэл оруулах үед веб хуудас цаанаа өгөгдлтйн баазтай хийх .
Холбоос хуудас үүсгэх (link page)
<a href =” хуудасны нэр.html”>холбоосын нэр</a> холбоосын нэр
Target=”” – холбоос хуудас гарч ирэх байрлал

leftFame-зүүн фрейм
rightFrame-баруун фрейм
topFrame-толгойн фрейм
mainframe-гол фрейм
_blank-шинэ цонхонд
_parent-гол цонх солигдоно
_self-тухайн цонх солигдоно
_top-бүх цонх солигдоно
Showframe-үзүүлэх фрейм

<a href=#> дээшээ хуудасны эхэндочих</a>
<a name =”1” > энэ текстийн байрлаж байгаа газар орших <a>
<a href=”he.html#2”> end irne shuu!!!<a/>

Зураг 2 Холбоос үүсгэсэн нь

<a href=”mail to :хаяг?subject=text”> холбоос<a/>
Холбоос гэдэг үг дээр дарвал хаяг руу орж Subject хэсэгт текст гэж гарна.
Дуу оруулах :

1.<a href=”дууны нэр.өргөтгөл”>холбоосын нэр </a>
2.<EMBED src=” дууны нэр.өргөтгөл”>
Width=”144”
Height=”60”
Autostart=”true” false
Loop=”true” false
Хүснэгт үүсгэх
<table>
Frame=””

· Border-бүтэн хүрээ

· Above-дээгүүрээ хүрээтэй

· Void-хүрээгүй

· Belowдоогуураа хүрээтэй

· Hsides-тасархай –хэвтээ чигтэй

· Vsides-босоо

· Lhs-зүүн талаараа тасархай

· Rhs-баруун талаараа тасархай

· Boxбүтэн хайрцаглана.

Border=””хүрээний өргөн
width=””хүснэгтиин өргөн
height=””хүснэгтйин өндөр
bgcolor=””rgb(255,200,0)
background=””
cellspacing=””хүснэгтийн доторх нүд хоорондох зай
cellpadding=””хүснэгтийн нүд хоорондох зай
<caption> хүснэгтийн гарчиг</vaption>
<tr> tablerow(хүснэгтйин мөр)</tr>
<th. Tablehead(хүснэгтийн толгой)</th>үнтэй адил <thead>
<td> tabledata(хүснэгтийн өгөгдөл)</td>
<th

<td =align,valign=””-нүдэн доторх текстийг зэрэгцүүлэх

· left зүүн талд болгох

· Rightбаруун

· Top -дээд

· Center-дунд

· Bottom-доод

· Middle-дунд

<th
<td colspan=””тухайн мөрийг өгсөн тоогоор баганын дагуу уртасгах
Rowspan=”” тухайн мөрийг өгсөн тоогоор мөрйин дагуу уртасгах
<Colgroup>багана нэгтгэх
<col> бганын шинж чанар
<tbody>хүснэгтийн их биеийг тодорхойлно.
<tfoot> хүснэгтийнтөгсгөлийг тодорхойлно.
Фрейм үүсгэх(frame):

Фрейм ашиглан вэб хуудас бүтээх нь 2 болон 3веб хуудсыг нэг цонхонд харах боломж олгодог .Фреимийн кодтой веб хуудас нь зөвхөн код дотор зааж өгсөн веб хуудсыг нэгтгэж харуулах ерөнхйи загварыг үүсгэдэг.Тэгэхээр фрейм үүсгэж байгаа веб хуудасны <body>-дмэдээлэл оруулахгүй.
<frameset> фреимийн эхлэл
Rows=”x%,y%” -2 веб хуудасны хэвтээ харьцаа
Cols=”x%,y%” 2вуб хуудасны босоо харьцаа
Frameborder=”yes,no,тоо” хүрээг оруулахгүй
Border=””хүрээний өргөн
Bordercolor=””хүрээний өнгө
framespacing=””фрейм хоорондын зай
<frame src=”хуудасны нэр .html”>
Name=””веб хуудасны байрлах газар

Leftframe
Rightframe
Topframe
Mainframe

Scrolling =”yes,no “ гүйлгэх товч оруулах ,оруулахгүй
Noresize-энэ кодыг бичсэн тохиолдолд хэрэглэгч фреймийн хэмжээг өөрчилж чадахгүй
Margin width=”2”
Margin h-ight=”2”
Жишээ 1: Мөр багануудад хуваах
<html>
<head>
<frameset rows="80,*" cols="*" frameborder="yes" border="5" framespacing="3">
<frame src="h.htm" name="topFrame" scrolling="NO" noresize>
<frameset cols="80,*" frameborder="NO" border="5"framespacing="3">
<frame src="1.html" name="leftframe" scrolling="no">
<frame src="2.html" name="mainframe" scrolling="yes">
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</head>
</html>
Зураг 3 !

HTML форм

HTML формыг янз бүрийн мэдээлэл авахад ашигладаг. Формын элемэнтүүд гэж text fields, textarea fields, drop-down menus, radio buttons, check boxes зэрэг утга авна. Элетэнт бүр өөр өөрийн гэсэн онцлогтой. Форм нь <form> гэсэн кодчлолоор тодорхойлогдоно.

<form>

<input>

</form>

<form> кодчлолтой хамт<input>кодчлол хэрэглэнэ. Мөн type гэсэн шинж чанартай, үүгээрээ өгөгдлийн хэлбэрийг зааж өгдөг. type=”text” гэсэн утга оруулах боломжтой болох ба үсэг, тоо, тэмдэгтүүдээс тогтсон өгөгдөлд зориулагдсан байдаг.
<form>

Нэр:<input type=”text”name=”ner”><br>

Oвог:<input type=”text”name=”овог”>

</form>

Гэсэн кодчлолын үр дүн дараах хэлбэртэй байна.

Зураг 4 text box ашигласан нь

Гараас утга оруулах тэмдэгтийн хэмжээ 20 тэмдэгтээр хязгаарлагддаг.type=”radio” гэсэн утгаас зөвхөн ганцыг сонгоход зориулагдсан форм гарна.

<form>

<input type=”radio” name=”gender” value=”female”>Female

</form>

Гэсэн кодчлолын үр дүн дараах байдалтай гарна.
Male
Female
Type=”checkbox” гэсэн утга авбал хэрэглэгчээс нэг болон хэд хэдэн сонголтуудыг зэрэг хийхэд зориулагдсан форм гарна.

<form>

<input type=”checkbox”name=”car”>I have a car

</form>

Гэсэн кодчлолын үр дүнд дараах байдалтай болно.
Зураг 5 check box ашигласасан нь

Type=”submit” гэж өгөгдвөл товч үүсэх ба хэрэглэгч уг товч дээр товшиход, формын агуулгыг өөр файл руу илгээдэг. Action шинж чанар нь илгээх файлын нэрийг тодорхойлдог.
<form name="input" action="html_form_action.asp" method="get"> <br>
user name:<input type="text"
name="user">
<input type="submit"
</form>
Зураг 6 submit-ийг ашигласан нь

Хэрэв та ямар нэг текст бичээд “Submit”товч дээр дарвал танд “html_from_action.asp” file-г нээж username гээд таны оруулсан нэрийг бичсэн байх болно. Энэ нь хэрэглэгчийн нэрээр заагдсан файлд нээх үйлдлийг гүйцэтгэдэг.
Энэ жишээ нь текст талбар үүсгэж хэрэглэгчээс мэдээлэл авна.
<html>
<body>
<form>
Нэр: <input type=”text”name=”Нэр”><br>
Овог: <input type=”text” name=”Овог”phone=”976”></form>
</body></html>
Жишээ 2 Энэ жишээ нь нууц үг хэрхэн авч болхыг харуулна.
<html>

<body>

<form>

Хэрэглэгчийн нэр:<input type=”text”name=”хэрэглэгч”><br>

Password:<input type=”password”name=”password”></form>

<p>Хэрэв т талбарт бичвэл таны бичсэнийг одоор дүрслэхийг олж харна.</p>
</body>
</html>
Зураг 7 password ашиглахыг харуулсан
Энэ жишэгээр олон сонголт хэрхэн хийхийг үзье. Та хоёр сонголтыг хоёуланг нь эсвэл алийг нь ч тэмдэглэхгүй байж болно.
Жишээ 3

<html>

<body>
<form>
Надад дугуй байдаг:<input type=”checkbox”name=”bike”><br>
Надад машин байдаг:<input type=”checkbox”name=”car”>
</form>
</body>
</html>
Зураг 8 мөн check box ашигласан жишээ
Type= “radio”гэж заагдсан үед зөвхөн нэгийг л сонгох боломжтой. Эхний сонголт тэмдэглэгээ хийгдэсэнээр гарна.Checked үг сонголт хийдэг.
Жишээ 4
<html>

<body>

<form>

Эр:<input type=”radio” checked name=”Sex” value=”male”><br>

Эм:<input type=”radio” name=”Sex” value=”female”></form>

</body>

</html>

Жишээ 5 Энэ жишээгээр сонголт хийх форм үүсгэнэ гэхдээ энэ аль нэг төрлийн тэмдэглэгээ авах жагсаалт юм.
<html>
<body>
<form>
<select name=”машин”>
<option value=”volvo”>Вольво
<option value=”saab”> сааб
<option value=”fiat”>фиат
<option value=”audi”>ауди
</select>
</form>
<p> Энд хамгийн эхний элемент нь тэмдэглэгдсэн харагдана.</p>
</body>
</html>
Зураг 9 option button ашигласан нь
Жишээ 6 : Энэ жишээнд сонголт хийх жагсаалтаас сонголт хэрхэн хийхийг үзье. Selected нь сонголт хийнэ.
<html>
<body>
<form>
<Select name=”Cars”>
<option value=”volvo”> Volvo
<option value=”saab”>saab
<option value=”fiat” selected>fiat
<option value=”audi”> audi
</select>
</form>

<p> энд та fiat –г хамгийн түрүүнд тэмдэглэгдсэн байхыг олж харна.

</p>

</body>

.</html>

Зураг 10 option button ашигласан нь

Жишээ 7 : Энэ жишэгээр хэрхэн товч үүсгэж болох тухай үзнэ.

<html>

<body>

<form>

<input type=”button”value=”click on me?”

</form>

<p>

Товчны нэр нь Click on me?

</p>

</body>

</html>

Зураг 11 товч үүсгэсэн нь

Жишээ 8: Энэ жишээгээр формын элментийг тойруулан хүрээ гаргаж болохыг үзнэ одоо та форм гэдэг юу болох талаар тодорхой ойлголттой болсон байх гэдэгт итгэж байна.
<html>
<body>
<fieldset>
<legend>асуулга:
</legend>
<form> нэр<input type=”text” size=”3”>
Овог <input type=”text” size”3”>
</form>
</fieldset>
<p>энд size нь text талбарын хэмжээг тодорхойлно. </p>
</body>
</html>
Зураг 12 формын гадуур хүрээ хийсэн нь
Жишээ 9 : Вэб хуудсанд форм хэрхэн хэрэглэхийг үзье энд хоёр текст талбар нэг Submit товч байх болно.
<html>
<body>
<form name=”input”action=”html_form_action.asp”medhod=”get”>

Нэрээ оруул: <input type=”text”name=”firstname” value=”mickey”>

<br> Овгоо оруул:<input type=”text”name=”lastname” value=”mouse”>
<br><input type=”submit” value=”submit”>
</form>
<p> хэрэв та submit товчийг html_form_action.asp file-г user –р нээх болно.</p>
</body>
</html>
Зураг 13 submit ашигласан нь
Жишээ 10: Энд олон сонголт хийх форм мөн submit товч агуулагдсан хуудас байна.
<html>
<body>
<form name=”input”action=”html_form_action.asp”methot=”get”>
Надад дугуй байдаг:<input type=”checkbox”name=”bike”checked value=”ON”><br>
<input type=”submit”value=”submit”>
</form>
<p>хэрэв та submit товч дарвал та мэдээллээ файлруу илгээнэ.
</p>
</body>
</html>
Нэг сонголт хийх форм ба submit товч бүхий хуудас байна.
Жишээ 11
<html>
<body>
<form name=”input”action=”html_form_action.asp” method=get>
Эр:<input type=”radio”name=”sex” value= “male”checked><br>
Эм:< input type=”radio”name=”sex” value=”female”>
<br>< input type=”submit” value=”submit now!”>
</form>
<p> Хэрэв та Submit товчыг дарвал та мэдээллээ дээрхи файлруу илгээж түүнийг нээх болно.
</p>
</body>
</html>
Жишээ 12 Электрон шуудан илгээх болон ачаалах
<html>
<body>
<form action="mailto: somenew.microsoft.com" method="post"
enctype="text/plain">
ner <br> <input type="text" name="name" value="zahai bicjij bui hunii ner"
size="20">
<br> Shuudan <br>
<input type="text" name="mail" value="Shuudan" size="15">
<br> Tailbar <br>
<input type="text" name="connect" value="Tailbar" size="13">
<input type="submit" value="send">
<input type="reset" value="achaalah">
</form>
</body>
</html>
Зураг 14 электрон шуудан илгээх ачаалах
Жишээ 12 Энэ жишээ нь шинэ форм ашиглан электрон шуудан хэрхэн илгээхийг харуулна.
<html>
<body>
<form action=MAILTO:someone@w3schools.com method=”post”inctype=”text/plain”>
<h3> Энэ форм захиаг w3schools илгээнэ.
</h3>
Нэр: <br><input type=”text” name=”name” value=”Таны нэр”size=”20”>
<br>Шуудан:<br>
<input type=”text” name=”mail” value=”Таны шуудан”size=”20’>
<br>Тайлбар:<br>
<input type=”text” name=”comment”value=”Таны тайлбар”size=”40”>
<br><br> <input type=”submit” value=”Илгээх”>
<input type=”reset”value=”Дахин ачааллах”>
</form>
</body>
</html>

Кодчлол

Тайлбар

Хэрэглэгчийн оруулгыг тодорхойлно.
Оруулах талбар тодорхойлно.
Текст талбар тодорхойлно.
Нэр тодорхойлно.
Талбарын тохируулгыг тодорхойлно.
Таолбахт гарчиг өгч түүнийг хүлээнэ.
Тэмдэглэх жагсаалт үүсгэнэ.(Drop down list)
Сонголтын багцыг тодорхойлно.
Сонголтыг жагсаалтаар тодорхойлно.(Drop Down List)
Товч тодорхойлно.ердийн товч
<input>-н оронд хэрэглэж болно.

CSS гэж юу вэ?

CSS гэдэг нь Cascading Style Sheets гэдэг vгийн товчлол бєгєєд хэлбэр, дизайн гэж ойлгож болох юм. CSS нь HTML кодчлолын элемент тагуудийг хэрхэн vзvvлэх форматлахыг тодорхойлдог. Єєрєєр хэлбэл таны вэбийн єнгє vзэмжийн, харагдах байдлыг сайжруулдаг.

CSS нь .css гэсэн єргєтгєлтэйгээр хадгалагддаг.
CSS ашиглахад давуу тал нь гэвэл :

Та нэг элэмэнтийн єнгийг, форматыг солихын тулд бvх хэсэгтээ єєрчлєлт хийх шаардалагагvй, харин CSS бичсэн хэсэгтээ солиход л бvх элэмэнтvvд хэвжvvлэгддэг. Энэ таны вэбмастеруудын ажлыг маш их хєнгєвчилдєг.
HTML нь зєвхєн энэ элемент гэдгийг тодорхойлдог . ж.нь : <p><ul><li> гэх мэт. Энэ нь зєвхєн элемэнтийг vvсгэдэг болхоос ямар хэмжээтэй, яаж харагдах гэх зэргийг тодорхолж чаддаггvй. Энийг CSS ашиглан шийдэж чадна.
CSS ийг харуулж чадах Browser ууд нь тєрєл бvр байна. Єргєн хэрэглэгддэг Internet Explorer, Netscape Navigator программууд нь зарим тохиолдолд хэлбэрийн хуудсуудыг харуулж чадахгvй. IE 4.0 дээших хувилбарууд NN 4.0 дээшхи хувилбарууд нь хэлэрийг харуулж чадах болсон.
Хэлбэрvvд нь ихэвчлэн таны вэб хуудасны гадна єєр файлд хадгалагддаг. Эсвэл вэб хуудасандаа хийсэн ч болно. Гадаад хэлбэрийн хуудсны ашигтай тал нь та нэг хэлбэрийг єєрчлєхийн тулд нэг л файлд єєрчлєлт оруулахад бvх хуудсанд хэвжvvлэгдэнэ гэсэн vг.
Доод хэлбэрийн хуудсыг вэб хуудасныхаа <HEAD> толгойн хэсэгт хйиж єгнє. Ж.нь :
<html>
<head>
<style>
td {
font-family: Verdana;
font-size: 8pt;
color: #000000;
}
</style>
</head>
<body >
…
</body>
</html>

Зураг 15

гэж бичигдэнэ. Энэ нь тухайн хуудсанд байгаа <TD> буюу хvснэгтийн нvдийг хэвжvvлж байна.

Хэлбэрийн хуудас нь (style sheets) хэлбэрийн мэдээллийг олон замаар тодорхойлно.

ь Веб хуудас харуулах программд заасан хэлбэр

ь Гадаад хэлбэрийн хуудас

ь Дотоод хэлбэрийн хуудас (<head> элемент доторх)

ь HTML элемент доторхи хэлбэр

    Нэг элемент дотор, нэг HTML хуудас дотор <head> элементэнд зааж, эсвэл гадаад хэлбэрийн файлаар тодорхойлж болох юм. Мөн олон гадаад хэлбэрийн хуудасыг нэг HTML файлд ашиглаж болно. HTML элемент дотор тодорхойлсон хэлбэр нь илүү эрхтэй байна. өөрөөр хэлбэл гадаад файлд хэлбэр тодорхойлсон боловч элемент дотор мөн давхар хэлбэр тодорхойлбол элемент дэх хэрбэрээр хэвжүүлнэ.
             CSS бичих дүрмээс
CSS НЬ 3 хэсгээс бүрдэнэ.
          Сонгосон элемент {шинж чанар: авах утга}
Сонгосон элемент нь HTML элемент байна. Шинж чанар гэдэг нь таны өөрчлөх гэж байгаа шинж, шинж чанар бүрд тохирох утга авна. Шинж чанар ба авах утга нь 2 босоо цэгээр(:) тусгаарлагдах ба тахир хаалтаар ({}) хүрээлэгдсэн байна.
            Body {color:red}
Хэрэв авах утга нэгээс олон үг байвал(“”) хашилтандхийж өгнө.
          p{font-family:”sans serif”}
хэрвээ нэгээс олон шинж чанар тодорхойлж буй бол шинж чанаруудыг цэг таслалаар тусгаарлана. Доорхи жишээнд параграф дахь текстийг голлуулж, улаанаар бичнэ гэж тодорхойлсон байна.
       P{text-align:center;color:red}
Хэлбэрийг ойлгомжтой харгадуулахын тулд нэг шинжийг нэг мөрөнд бичих нь зохимжтой.
        P
       {     text-align:center;      /*текстийн зэрэгцүүлэлт голлосон*/
             Color:black;             /*текстийн өнгө хар*/
            Font-family:arial       /*үсгийн фонт-агиал*/
    }
   Нэгтгэх:
Сонгосон элементүүдийг нэгтгэж болно. Өөрөөр хэлбэл хэд хэдэн элементэд шинжийг зэрэг зааж болно гэсэн үг. Эпементүүдийг таслалаар (,) тусгаарлана. Дараах жишээнд гарчиг 1-6 гэсэн элементийн өнгийг ногоон гэж тодорхойлсон байна.
h1,h2,h3,h4,h5,h6 {color:green}
Class-класс:
Класс ашиглан нэг HTML элементэд өөр өөр хэлбэрийг тодорхойлж болох юм. Жишээ нь параграфыг 2 өөр зэрэгцүүлэлтээр ашиглаж болно. Үүнийг хэлбэрт хэрхэн заахыг харъя.
        p.tight {text-align:right} /*баруун тийш зэрэгцсэн*/
        p.center {text-align:center} /*голлосон*/
дээр заасан хэлбэрээ HTML баримтдаа ашиглая.
        <p class=”tight”> Энэ параграф баруун тийш зэрэгцсэн байна.</p>
        <p class=”center”> Энэ параграф голлосон байна.</p>
Нэг HTML элементийн хувьд зөвхөн нэг л класс тодорхойлж болно. Мөн та сонгосон элементийн нэрийг орхин хэлбэрийг тодорхойлж болно. Энэ тохиолдлод энэ хэлбэрийн бүх HTML элементэнд ашиглах боломжтой болно. Доорх жишээнд элементийг голлуулах класс тодорхойлсон байна.
               .center {text-align:center}
Дээр тодорхойлсон классыг h1 ба p гэсэн элементэд хэрхэн ашигласаныг харья.
      <h1 class=”center”> гарчиг 1 голлож бичигдэнэ </h1>
      <p class=”center”>   энэ параграф мөн голлосон байна.</p>
       CSS –Тайлбар бичих
Өөр хэлбэрийн кодыг ойлгомжтой болгохын тулд тайлбар бичиж болно. Тайлбар дахь текст харагдахгүй. Тайлбар нь налуу зураас, од /* */ дотор бичигдэнэ.
     P                   /* Энэ бол тайлбар*/
     {text-align:center /* Энэ бас тйалбар байна.*/
      Color:black;

Font-family:arial}

CSS параграфд ашиглах

CSS хэлбэрээ та эхлээд гадна эсвэл дотоод хэлбэрийн хуудас гэдгээ тохируулан сонгосон байх хэрэгтэй. Энэ жишээнvvдийг дотоод хэлбэрийн хуудсан дээр авсан болно. Та class -ыг ашиглан HTML ынхээ дурын элэмэнтийг сонгож хэвжvvлэх боломжтой. Ж.нь :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
p.golloh{
text-align: center ;
}
</style>
</head>
<body>
энэ бол ямарч хэвжvvлэлт аваагvй
<p class=”golloh”>Энэ текст нь голлох болно.</p>
</body>
</html>
энэ бол тухайн p элементууд л авч чадна. Харин
<style type="text/css">
.golloh{
text-align: center ;
}
</style>
гэвэл дурийн элементэд авч ашиглаж болно. Ж.нь:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.golloh{ text-align: center ;
}
</style>
</head>
<body>
<hr class=”golloh”>
энэ бол ямарч хэвжvvлэлт аваагvй
<p class=”golloh”>Энэ текст нь голлох болно.</p>
</body>
</html
гэх мэтээр эхлээд хэлбэрээ тодорхойлчихоод дурын элементдээ ашиглах боломжтой. CSS кодчлолд тайлбар бичихдээ /* ба */ тэмдэгт хооронд бичнэ. Ж.нь :
<style type="text/css">
.golloh{
/* ene bol tailbar */
text-align: center ;
}
/* ene bas tailbar yum */
</style>

HTML элемент доторх хэлбэр

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

Элемент доторх хэлбэр нь хэлбэрийн шинж чанаруудыг бүгдийг ашиглах боломжтой. Доорх жишээнд параграфын өнгө ба зүүн талын зайн хэмжээг аяж заахыг үзүүлэв.

Энэ бол параграф. Энэ бол параграф </p>

Хэлбэрийн хуудсууд

Ижил элементийн хувьд өөр өөр хэлбэрийн хуудсанд хэлбэртйг тодорхойлсон бол утгууд нь уламжлагдана. Жишээ нь гадаад хэлбэрийн хуудсанд Гарчиг 3 (h3) элементийг доорх байдлаар тодорхойлсон гэж үзье.

{ color:red;

Text-align:left;

Font-size:8pt

}

Харин дотоод хэлбэрийн хуудсанд h3 дараах хэлбэрээр тодорхойлогджээ.

{text-alidn:tight;

Fond-size:20pt}

Дотоод хэлбэрийн хуудас бүхий файл гадаад хэлбэрийн хуудастай холбогдож байх үед h3 элемент нь дараах хэлбэрээр хэвжигдэнэ.

Color:red; /*өнгө тодорхойлсон*/

Text-align:right;

Font-size:20pt

өнгө гэсэн шинж гадаад хуудаснаас уламжлагдаж харин текстийн зэргэцүүлэлт, үсгийн фонт нь дотоод хэлбэрт тодорхойлогдсоноор солигдсон байна.

Жишээ нь:HTML файл <link> кодыг ашиглан гадаад хэлбэрийн хуудсыг холбодог.

<html>

<head>

/* гадаад хэлбэрийн файлтай холбож байгаа нь*/

</head/

<body>

<h1> Энэ гарчиг 36 хэмжээтэй.</h1>

<h2> Энэ гарчиг цэнхэр өнгөөр гарна.</h2>

<p> Параграфын зүүн талын зай 50 цэг гэж заагджээ.</p>

</body>

</html>

Жишээ 13.css файл дахь агуулгыг дор үзүүлэв.

Body{background-color:yellow}

H1{font-size:36pt}

H2{color:blue}

P{margin-left:50px}

Жишээ 14. Гадаад хэлбэрийн файлтай холбож байгаа нь.

<html>

<head>

/*холбох файлаа заана.*/ </head>

<body>

<h1> Энэ бол гарчиг</h1>

<hr> /*хэвтээ зураас гарна*/

<p> Хэлбэр нь текстийг хэвжүүлнэ. </p>

<p> <a href=”http://www.microsoft.com” target=”blank”> Энэ бол холболт </a></p>

</body>

</html>

Зураг 2

Зураг 16 Гадаад хэлбэрийн файлтай хоболт хийж байгаа нь

CSS дэвсгэр өнгөнд ашиглах нь:

Дэвсгэр (background) гэсэн энэ шинжийг ашигласанаар дэвсгэр өнгө заах зургийг дэвсгэр зураг болгох,мөн давтан гаргах, хөдөлгөөнгүй байлгах зэргийг тодорхойлж чадна.

Шинж чанар: background

Дэвсгэр гэсэн шинж чанарыг дүрсэлнэ. Авах утга background-image

ь Бичихдээ:<body style=” background-image:

url(http://www.foo.com/image.gif);

background-attachment:fixed”>text </body>}

ь <body style= “background-color:red”> text </body>

Жишээ 15. html элементийн кодчлол бүрд өөр өөр дэвсгэр өнгийг зааж болно.

<html>

<head>

Body{ background-color:red} /*h1 нь #00ff00.*/

H1{ background-color:#00ff00} /*h1-ийн дэвсгэр өнгө нь #00ff00.*/

H2{ background-color: transparent }

p{background-color:rgb(250,0,255)}

/*Параграфын дэвсгэр өнгө rgb(250,0,255)байна.*/

</style>

</head>

<body>

<h1> Энэ бол гарчиг 1</h1>

<h2> Энэ бол гарчиг 2 </h2>

<p> Энэ бол параграф.</p>

</body>

</html>

Зураг 17

Жишээ 16 : Дэсгэр зургыг ашиглаж байгаа нь.

<html>

<head>

Body{ background-image:url(“../image/bgdesert.jpg”)}

/**/ </style>

</head>

<body>

</body>

</html>

Жишээ 17: Дэвсгэр зургийг хөдөлгөөнгүй байлгах сонголт:

<html>

<head>

Body{ background-image:url(“lab1.gif”);

background-repeat:no-refeat;}

background-attachment: fixed /* хуудсыг гүйлгэхэд дэвсгэр зураг хөдөлгөөнгүй байх сонголт */

</style> </head> <body>

<br><br> <p> <b> Anhaaruulga </b> </p>

<p> Дэвсгэр зураг хуудас гүйлгэхэд хөдөлгөөнгүй байна.</p>

</body>

</html>

Зураг 18 Дэвсгэр зургийг харуулж байгаа нь

CSS текстэд ашиглах нь:

Текст гэсэн шинж чанарыг ашигласанаар текстийн харагдах хэлбэр, тэмдэгтийн хоорондын зай, зэргэцүүлэлт зэргийг хянах боломжтой.

Color- текстийн өнгийг тодорхойлно.

Direction- текстийн чиглэлийг заана.

Letter-spacing- тэмдэгт хоорондын зайг өөрчилнө.

Text-align- текстийн зэрэгцүүлэлийг заана.

Text-deroration- тэкстэнд хэвжүүлэлт хийнэ

Text-indend- эхний мөрийн зэрэгцүүлэлт хийнэ.

Text-shadow- сүүдэр оруулна.

Text-transform-үсгийн хэмжээг өөрчилнө.

Unicode-bidi-

White-space-хоосон зайг хэрхэн харуулахыг заана.

Word-spacing-үг хоорондын зайг тохируулна.

Жишээ 18. текстийн өнгийг зааж байгаа нь:

<html>

<head>

H1{color:#00ff00}

H2{color:dda0dd}

P{color:rgb(0,0,255)}

</style></head>

<body>

<h1> энэ бол гарчиг 1 </h1> <h2> энэ бол гарчиг 2 </h2>

<p> энэ бол параграф </p>

</body>

</html>

Зураг 19

Жишээ 19. Үсэг хоорондын зайг цэгээр сантиметрээр зааж болно.

<html>

<head>

h1 {letter-spacing:-3px} /*үсэг хоорондын зайг заана */

h4 {letter-spacing:0.5 cm}

</style> </head>

<body>

<p> <b> Анхааруулга !: </b>

Netscape 4 нь “letter-spacing“ шинж чанарыг харуулах боломжгүй.

</p>

<h1> энэ бол гарчиг 1, Үсгийн зай нь 3 цэгээр өгөгдсөн. </h1>

<h4> энэ бол гарчиг 4, Үсгийн зай нь 0.5 см гэж өгөгдсөн. </h4>

</body>

</html>

Зураг 6.

Зураг 20

Жишээ 20. Текстийн зэрэгцүүлэлтийг зааж байгаа нь.

<html>

<head>

h1 {text-align: center} / * текстийн зэрэгцүүлэлт-голлосон.

h2 { text-align; left}

h3 { text-align; right}

</style> </head>

<body>

<h1> Гарчиг 1 </h1>

<h2> Гарчиг 2 </h2>

<h3> Гарчиг 3 </h3>

</body>

</html>

Зураг 21

Жишээ 21. Текстэнд хэвжүүлэлт оруулсан байгаа нь.

<html>

<head>

h1 {text-decoration: overline} /*Үгийн дээгүүр зурна. */

h1 {text-decoration: line-through} /*Үгийг зурна. */

h1 {text-decoration: underline} /*Үгийн доогуур зурна.*/

а {text-decoration: none} /* Ямар нэг зураасгүй тохируулга. */

</style>

</head>

<body>

<h1> Гарчиг 1 </h1>

<h2> Гарчиг 2 </h2>

<h3> Гарчиг 3 </h3>

<p> <a href=”http://www.csms.edu.mn”> Энэ бол холболт. </a></p>

</body>

</html>

Зураг 22 нэг вебийг нөгөө вебтэй холбоно.

Жишээ 22 . Параграфын зэрэгцүүлэлтийг процентоор, сантиметрээр зааж болно.

<html>

<head>

p {text-indent: 1 cm} / *Параграфын зэрэгцүүлэлт 1 см гэж заасан

</style>

</head>

<body>

<p>

Параграф дахь текст. Параграф дахь текст.

Параграф дахь текст.

</p>

</body>

</html>

Зураг 23 Параграфын зэрэгцүүлэлтийг зааж байгаа нь:

Жишээ 23. Үсгийн хэмжээ өөрчлөх сонголт.

<html>

<head>

p. uppercase {text-transform: uppercase} / * Том үсгээр бичнэ. * /

p. lowercase {text-transform: lowercase } / * жижиг үсгээр бичнэ. * /

p. capitalize {text-transform: capitalize } / * Эхний үсгиыг томоор бичнэ. * /

</style>

</head>

Параграф дахь текст

</p>

Дараагийн параграф дахь текст.

</p>

</boby>

</html>

Зураг 24. Үсгийн хэмжээний өөрчлөлтийг зааж байгаа нь

CSS-Үсгийн фонт

Үсгийн фонт гэсэн энэ шинж нь танд үсгийн хэмжээ өөрчлөх, өргөнөөр бичих, текстийг хэвжүүлэх боломжийг олгоно.

NN: Netscape, IE: Internet Exlorer-Өгөгдсөн шинж чанарыг ямар хувилбарт ашиглах боломжтойг үзүүллээ.

Шинж чанар	Тодорхойлолт	Авах утга	NN	IE
Font	Үсгийн фонт гэсэн шинжийг тодорхойлно.	Font-style Font-variant Font-weight Font-size/line-height Font-family Caption, icon, menu Message-box Small-caption Status-bar	4.0	4.0
Font-family	Үсгийн фонтын нэр заана.	Family-name Generic-family	4.0	3.0
Font-size	Үсгийн фонтын хэмжээ заана.	xx-small, x- small, small, medium, large, x-large, xx-large, smaller, larger, хэмжээ,%	4,0	3,0
Font-stretch	Фонтыг шахаж ба сунгаж бичих сонголт.	Normal, wider, narrower, ultra-condensed Extra- condensed Condensed Semi- condensed Semi-expanded Expanded Extra- expanded Ultra- expanded
Font-style	Үсгийн фонтын хэлбэр заана.	Normal. Italic, oblique	4.0	4.0
Font-variant	Текстийг энгийн хэлбэрээр, тос үсгээр гаргана.	Normal, small-caps	6.0	4.0
Font-weight	Үсгийн өргөнийг заана.	Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900	4.0	4.0

Жишээ 24 Үсгийн фонтыг зааж тесктийг өөр өөр фонтоор бичиж болно..

<html>

<head>

h3 {font-family: times} /* үсгийн фонтын нэр заана. */

p {font-family: courier}

p. sansserif {font-family:sans-serif}

</style> </head>

<body>

<h3>

<p> Энэ бол параграф.

</p>

Энэ өөр нэг параграф </p>

</body>

</html>

Зураг 25. Текстийн фондыг өөрчилсөн нь

Жишээ 25. Үсгийн фонтын хэмжээг заасан байгаа нь.

<html>

<head>

h1 {font-size: 150.%}

h1 {font-size: 130.%} /* үсгийн фонтын хэмжээг заасан нь */

p {font-size: 100.%}

</style>

</head>

<body>

<h1> энэ бол гарчиг 1</h1>

<h2> энэ бол гарчиг 2</h2>

<p> энэ бол гарчиг </p>

</body>

</html>

Жишээ 3. Фонтын хэлбэрийг өөрчилж болно.

<html>

<head>

h1 {font-style: italic} /*налуугаар бична.*/

h2 {font-style: normal} /*хэвийн хэлбэрээр бична.*/

p {font-style: oblique}

</style>

</head>

<body>

<h1> энэ бол гарчиг 1</h1>

<h2> энэ бол гарчиг 2</h2>

<p> энэ бол гарчиг </p>

</body>

</html>

Зураг 26 Үсгийн фондын хэмжээг өөрчилсөн н

Жишээ 26. Үсгийг хэвийн хэлбэрээр ба том үсгээр бичих сонголт ашигласан нь:

<html>

<head>

p.normal {font-variant: normal} /*хэвийн хэлбэрээр бичнэ.*/

p.small {font variant: small-caps} /*том үсгээр бичнэ.*/

</style></head>

<body>

<p><b> Анхааруулга! </b. Netscape 4 нь “font-variant” гэсэн шинжийг харуулдаггүй. </p>

<p class=”normal”> Энэ бол параграф. </p>

<p class=”small”> Энэ бол параграф. </p>

</body>

</html>

Зураг 27 Үсгийн хэвийн хэлбэр том үсэг

Жишээ 27. Үсгийн өргөнийг өөрчлөх сонголт ашигласан нь.

<html>

<head>

p.normal {font-weight: normal} /*Үсгийн өргөн хэвийн.*/

p.thick{font weight: bold} /*өргөнөөр бичих сонголт*/

p.thicker {font-weight: 900} /*Үсгийн өргөн 900 хэмжээтэй */

</style></head>

<body>

<p class=”normal”> Параграф. </p> <!хэлбэрээ ашиглаж байгаа нь - >

<p class=”thick”> Дараагийн параграфв </p>

<p class=”thicker”> 3 дахь параграф. </p>

</body>

</html>

Зураг: 28 Текстийн үсгийн хэмжээг өөрчилсөн нь

Жишээ 28 Үсгийн фонтын сонголтуудыг зэрэг ашиглаж болно.

<html>

<head>

p{font: ilatic small-caps 900 12px arial}

</style>

</head>

<body>

<p> Энэ бол параграф. </p>

</body>

</html>

Зураг 29 Фондын сонголтууд

CSS-хүрээ:

Хүрээ тодорхойлох хэлбэр нь элементийг хүрээлэх хүрээний өнгө, хэлбэр, өргөнийг өөрчилнө. НTML нь текстийг хүрээлэхийн тулд хүснэгт ашигладаг. Харин хүрээ (Border) гэсэн шинж чанарын тусламжтай ямар ч элементэд тохирох хүрээг хийх боломжтой боллоо.

NN. Netscape, IE Internet Explorer-Өгөгдсөн шинж чанарыг ямар хувилбарт ашиглах боломжтойг үзүүллээ.

Шинж чанар	Тодорхойлолт
border	Хүрээ гэсэн шинжийг тодорхойлно.
Border-bottom	Доогуур хүрээг тодорхойлно.
Border-bottom-color	Доогуур зурах хүрээний өнгө
Border-bottom-style	Доогуур зурах хүрээний хэлбэр
Border-botto,-width	Доогуур зурах хүрээний өргөн
Border-color	4 талд зурах хүрээний өнгө. 1-4 янзын өнгө авч болно.
Border-left	Зүүн хүрээг тодорхойлно.
Border-left-color	Зүүн хүрээний өнгө
Border-left-style	Зүүн хүрээний хэлбэр
Border-left-width	Зүүн хүрээний өргөн
Border-right	Баруун хүрээг тодорхойлно.
Border-right-color	Баруун хүрээний өнгө
Border-right-style	Баруун хүрээн хэлбэр
Border-right-wight	Баруун хүрээний өргөн
Border-style	4 талд зурах хүрээний хэлбэр. 1-4 янзын утга авч болно.
Border-top	Дээд талын хүрээг тодорхойлно.
Border-top-color	Дээд талын хүрээний өнгө
Border-top-style	Дээд талын хүрээний хэлбэр
Border-top-wigth	Дээд талын хүрээний өргөн
Border-wigth	4 талд зурах хүрээний өргөн. 4 өөр өргөнтэй байж болно.

Жишээ 29. Параграфыг өөр өөр хэлбэр хүрээлнэ. 4 талаар ижил хэлбэрээр хүрээлнэ.

<html>

<head>

p.dotted {border-style:dotted /*хүрээний хэлбэрийг зааж байгаа.*/}

p.dashed {border-style:dashed}

p.solid {border-style: solid}

p.double {border-style: double}

p.groove { border-style: groove }

p.ridge { border-style: ridge}

p.inset { border-style: inset}

p.outset { border-style: outset}

</style>

</head>

<body>

<p>

“border-style” шинж чанар Netscape 4 дээр ажиллахгүй.

</p>

<p>

Netscape 6 нь хүрээний хэлбэрийг харуулна.

</p>

<p>

Internet Explorer 5.5 хүрээний бүх хэлбэрийг харуулна. Харин Internet Explorer 4,0-5,0 дээр цэгэн- “dotted” ба тасарха шугаман – “dashed” хүрээг харуулна.

</p>

<! Дээр тодорхойлсон хүрээний хэлбэрийг ашиглаж байгаа нь. - >

<p class=”dotted”> dotted хэлбэрийн хүрээ </p>

<p class=”dashed”> dashed хэлбэрийн хүрээ </p>

<p class=”solid”> solid хэлбэрийн хүрээ </p>

<p class=”double”> double хэлбэрийн хүрээ </p>

<p class=”groove”> groove хэлбэрийн хүрээ </p>

<p class=”ridge”> ridge хэлбэрийн хүрээ </p>

<p class=”inset”> inset хэлбэрийн хүрээ </p>

<p class=”outset”> outset хэлбэрийн хүрээ </p>

</body>

</html>

Зураг 30. Хүрээий шинжүүдийг харуулж байна.

Жишээ 30 Өөр өөр төрлийн хүрээг нэг зэрэг тодорхойлсон нь.

<html>

<head>

p.soliddouble {border-style: solid double}

p.doublesolid {border-style: double solid}

p.groovedouble {border-style: groove double}

p.three {border-style: solid double groove}

</style>

</head>

<body>

<p> <b> Анхааруулга ! </b> Netscape 4 нь “border-style” шинж чанарыг харуулж чаддаггүй. “border” шинжийг харахдаа Netcape программ ашиглана уу. </p>

<p class=”soliddouble”> Хүрээ бүхий текст. </p><br>

<p class=”doublesolid”> хүрээ бүхий текст. </p> <br>

<p class=”groovedouble”> Хүрээ бүхий текст. </p><br>

<p class=”three”> хүрээ бүхий текст. </p>

</body>

</html>

Жишээ з. Хүрээний хэлбэ ба өнгийг тодорхойлсон нь.

<html>

<head>

p.one /* хүрээ нь 1 өнгөөр тодорхойлогдож байна.*/

{border-style: solid;

Border-color: #0000ff}

p.two /*хүрээ нь 2 өнгөөр тодорхойлогдож байна.*/

{border-style: solid;

Border-color: #ff0000 #0000ff}

p.three /*хүрээ нь 3 өнгөөр тодорхойлогдож байна.*/

{border-style: solid;

Border-color: #ff0000 #00ff00 #0000ff}

p.four /* хүрээ нь 4 өнгөөр тодорхойлогдож байна.*/r

{border-style: solid;

Border-color: #ff0000 #00ff00 #0000ff rgb (250.0.255)}

</style>

</head>

<boby>

<b> Анхааруулга!: </> “border-color” шинжийг дангаар нь тодорхойлсон үед Internet Explorer харуулахгүй. Харин “border-style” шинжийг эхлээд тодорхойлвол өнгө нь харагдана.

</p>

<p class=”two”> Хүрээтэй текст </p>

<p class=”three”> <b> Анхааруулга. !: </b> Netscape 4 программ нь “”

Border-color” шинжийг харуулдаггүй. Netscape ашиглах бол хүрээний өнгийг “border” гэсэн шинжээр заах өгөөрэй. </p>

</p class=”four”> хүрээтэй текст </p>

</body>

</html>

Жишээ 31 Хүрээний өргөнийг тодорхойлж байгаа нь.

<html>

<head>

p {border-style: solid;

border-bottom-widht: 15px /*доод хүрээний өргөн 15 цэг гэж заажээ. */}

</style></head>

<body>

<p> Internet Explorer ашиглах бол “border-bottom-idth” гэсэн шинжийг “border-style” гэсэн шинжтэй хамт тодорхойлоорой. </p>

</body>

</html>

Зураг 31 Хүрээний өргөнийг тодорхойлсон нь

Жишээ 32 зүүн хүрээний өргөнийг тодорхойлж байгаа нь.

<html>

<head>

p {border-style: solid:

border-left-width:15 px /*зүүн хүрээний өргөн нь 15 цэг гэж заажээв*/}

</style> </head>

<body>

<p> Internet Explorer ашиглах бол “border-bottom-width” гэсэн шинжийг “border-style” гэсэн шинжтэй хамт тодорхойлоорой. </p>

</body>

</html>

Жишээ 33. Баруун хүрээний өргөнийг тодорхойлж байгаа нь.

<html>

<head>

p {border-style: solid:

border-right-width:15 px /* баруун хүрээний өргөн нь 15 цэг гэж заажээв*/}

</style> </head>

<body>

<p> Internet Explorer ашиглах бол “border-bottom-width” гэсэн шинжийг “border-style” гэсэн шинжтэй хамт тодорхойлоорой. </p>

</body>

</html>

Жишээ 34 доод хүрээний өргөн, хэлбэр, өнгийг зэрэг тодорхойлж болно.

<html>

<head>

p {border-bottom: medium solid #f0000 /*Доод хүрээний тохируулга */}

</style> </head>

<body>

<p> <b> Анхааруулга.</b> Netscape 4 программ нь “border-bottom” шинжийг харуулдаггүй. Netscape ашиглах бол “border-bottom-width” гэсэн шинжээр доод хүрээний өргөнийг заана уу. </p>

</body>

</html>

Зураг 32 Доод хүрээний өргөн

Жишээ 35 Хүрээний хэлбэр өргөнийг зааж байгаа нь.

<html>

<head>

p.one {border-style: solid: /*хүрээний хэлбэр*/

border -width: 5 px /* хүрээний өргөн */}

p.two {border-style: solid:

border -width: 5 px 10px

p.three {border-style: solid:

border -width: 5 px 10px 1 px

p.four {border-style: solid:

border -width: 5 px 10px 1 px medium }

</style> </head>

<body>

<p class=”one”> Internet Explorer дээр “border-width” шинжийг ганцааранг нь хэрэглэвэл ажиллахгүй. Харин эхлээд “border-style” шинжийг тодорхойлсны дараа ашиглаж болно. </p>

<p class=”two”> хүрээтэй текст </p>

<p class=”three”> хүрээтэй текст </p>

<p class=”four”> хүрээтэй текст </p>

</body>

</html>

Зураг 33

Жишээ 36 border шинжээр хүрээг тодорхойлж байгаа нь:

<html>

<head>

p {border:medium double rgb (250,0,255)}

</style> </head>

<body>

</html>

CSS Элементийн гадуурхи зай

Margin шинж чанар нь элементийн эргэн тойронд байх хоосон зайн хэмжээг тодорхойлно. Элементийг давхарлахын тулд зайн хэмжээг сөрөг утгаа зааж болно. Дээд, доод, баруун, зүүн зайн хэмжээсүүд бие биеэсээ хамааралгүй өөрчлөгдөж болно. Margin гэсэн шинж ашиглан бүх талын хэмжээг нэг зэрэг өөрчилж болох юм.

NN: Netscape, IE: Internet Explorer-Өгөгдсөн шинж чанарыг ямар хувилбарт ашиглах боломжтойг үзүүллээ.

Шинж чанар	Тодорхойлолт
Margin	Элементийн эргэн тойрны зайг тодорхойлно.
Margin bottom	Элементийн доод талын зайг заана.
Margin-left	Элементийн зүүн талын зайг заана.
Margin-right	Элементийн баруун талын зайг заана.
Margin-top	Элементийн дээд талын зайг заана.

Жишээ 37. Элементынн зүүн талын зайг тодорхойлсон нь:

<html>

<head>

p.margin {margin-left: 2 cm} /*параграф зүүн талдаа 2 см зайтай байна. */

</style> </head>

<body>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

<p class=”margin”> Энэ параграф зүүн талдаа зайтай байхаар тодорхойлогдсон. Энэ параграф зүүнталдаа зайтай байхаар тодорхойлогдсон. </p>

</body>

</html>

Зураг 34

Жишээ 38 Элементын баруун талд зай тодорхойлсон байгаа нь.

<html>

<head>

p.margin {margin-right: 5 cm} /*баруун талд 5 см зайтай байна. */

</style> </head>

<body>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

<p class=”margin”> Энэ параграф баруун талдаа зайтай байхаар

тодорхойлогдсон. Энэ параграф баруун талдаа зайтай байхаар

тодорхойлогдсон. </p>

</body>

</html>

Жишээ 39. Элементийн доод талд зай тодорхойлсон байгаа нь.

<html>

<head>

p.margin {margin-bottom: 80 px} /*доод талдаа зайтай. */

</style> </head>

<body>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

<p class=”margin”> Энэ параграф доод талдаа зайтай байхаар

тодорхойлогдсон. Энэ параграф доод талдаа зайтай байхаар

тодорхойлогдсон. </p>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

</body>

</html>

Жишээ 40 Элементийн 4 талын зайг нэг зэрэг тодорхойлж болно.

<html>

<head>

p.margin {margin: 2 cm 4cm 3 cm 4 cm} /*4 талын зай. */

</style> </head>

<body>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

<p class=”margin”> Энэ параграф 4 талдаа зайтай байхаар

тодорхойлогдсон. Энэ параграф 4 талдаа зайтай байхаар

тодорхойлогдсон. </p>

<p> Энэ бол параграф.Энэ бол параграф. Энэ бол параграф.

Энэ бол параграф. </p>

</body>

</html>

Зураг 35

CSS Padding-Элементийн зай

Padding шинж чанар нь элементийн хүрээ ба элементийн агуулга хоорондын зайг заадаг. Сөрөг утга авах боломжгүй. Дээд, доод, баруун, зүүн талын зайн хэмжээс бие биеээсээ хамааралгй өөрчлөгдөж болно.

NN: Netscape, IE: Internet Explorer-Өгөгдсөн шинэ чанарыг ямар хувилбарт ашиглах боломжтойг үзүүллээ.

Шинж чанар	Тодорхойлолт
Padding	Зайн хэмжээг нэг зэрэг тодорхойлно.
Padding-bottom	Доод зайн хэмжээг заана.
Padding-left	Зүүн талын зайн хэмжээг заана.
Padding-right	Баруун талын зайн хэмжээг заана.
	Хэмжээг заана.

Жишээ 41 Зүүн талын зайг зааж байна.

<html>

<head>

td {padding-left: 2cm} /* зүүн талын зайн хэмжээ 2см байна.*/.

</style> </head>

<body>

<td>Хүснэгтийн энэ нүд зүүн талдаа 2 см зай авсан. </td>

<!зай бүхий нүд - > </tr>

</table>

</body>

</html>

Зураг 36

Жишээ 42. Баруун талдаа зай авч байгаа нь.

<html>

<head>

td {padding-right: 5cm} /* зайн хэмжээг заана.*/.

</style> </head>

<body>

<tr>

<td>Хүснэгтийн энэ нүд баруун талдаа зайтай. Хүснэгтийн энэ нүд баруун талдаа зайтай. Хүснэгтийн энэ нүд баруун талдаа зайтай. </td>

</tr>

</table>

</body>

</html>

Жишээ 43. Дээд талдаа зай авч байгаа нь:

<html>

<head>

td {padding-top: 2cm} /* Дээд талдаа 2 см гэж зайг заажээ.*/.

</style> </head>

<body>

<tr> <td> хүснэгтийн нүд дээрээ зайтай. </td></tr>

</table>

</body>

</html>

Жишээ 4. Зайн хэмжээг хамт өгч болно.

<html>

<head>

td {padding: 1,5cm}

td.twovalues {padding: 0.5cm 2.5cm}

/* 4 талын зайн хэмжээг зэрэг зааж байгаа нь .*/

</style> </head>

<body>

<tr> <td> 4 талдаа 1,5 см гэсэн зайтай. </td></tr></table> <br> <table

border=”1”>

<tr><td class=”twovalues”> Хүснэгтийн нүд 4 талдаа зайтай. Дээд ба доод зайн хэмжээ 0,5 см, харин зүүн ба баруун талын зайн хэмжээ нь 2,5 см байна. </td></tr>

</table>

</body>

</html>

Зураг 37

CSS List-Жагсаалт

Текстийн өмнө тэмдэглэгээ гаргахад List шинж чанар хэрэглэгдэнэ.

NN: Netscape, IE: internet Explorer- Өгөгдсөн шинж чанарыг ямар хувилбарт ашиглах боломжтойг үзүүллээ.

Шинж чанар	Тодорхойлолт
List-style
List-style-image	Тэмдэглэгээг зургаар үзүүлнэ.
List-style-position	Тэмдэглээний байрлал заана.
List-style-type	Тэмдэглээний төрлийг заана.
Marker-offset

Жишээ 44. Тэмдэглээний хэлбэр тодорхойлж байгаа нь:

<html>

<head>

ul.disc {list-style-type: disc}

ul.cirle {list-style-type: crirle}

ul.square {list-style-type-square}

ul.none {list-style-type: none}

</style>

</head>

<body>

<ul class=”disc”><li> Coffee</li> <li>Tea</li><li> Coca Cola</li> </ul>

<li>Coffee</li>

<li> Coffee</li>

</ul>

<li> Coffee</li>

</ul>

</body>

</html>

Зураг 38

Жишээ 45 тэмдэглээний хэлбэр зааж байгаа нь.

<html>

<head>

Ol.decimal{list-style-type:decimal}

Ol.lroman{ list-style-type:lower-roman}

Ol.uroman{ list-style-type:upper-roman}

Ol.lalpha{ list-style-type:lower-roman}

Ol.ualpha{ list-style-type:upper-alpha}

</style> </head><body>

<li> Coffee</li> <li> Tea</li> <li> Coca Cola </li> </ol>

<li> Coffee</li> <li> Tea</li> <li> Coca Cola </li> </ol>

<li> Coffee</li> <li> Tea</li> <li> Coca Cola </li> </ol>

<li> Coffee</li> <li> Tea</li> <li> Coca Cola </li> </ol>

<li> Coffee</li> <li> Tea</li> <li> Coca Cola </li> </ol> </body> </html>

Зураг 39 Жагсаалтын тэмдэглэгээ.

Жишээ 46. тэмдэглэгээг зургаар үзүүлж байгаа нь.

<html>

<head>

ul{list-style-image:url(“…/images/arrow.gif”)}

</style> </head> <body>

<p> <b> Anhaaruulga! </b> Netscape 4ni “list style-image” shinj chanatiig haruuldaggui.</p>

<ul> <li> Coffee</li> <li> Tea</li> <li> Cova Cola </li></ul>

</body> </html>

Жишээ 4. тэмдэглэгээг зургаар гаргаж болно.

<html>

<head>

Ul {list-style:square inside url(“…/images?arrow.gif”)}

</style></head>

<body>

<p><b> Anhaaruulga! </p> Netscape 4 нь тэмдэглэгээний байрлал ба зургийг гаргадаггүй.</p>

<ul> <li> Coffee</li> <li> Tea</li> <li> Cova Cola </li></ul>

</body> </html>

CSS Чиглэл

Элементийн чиглэл шинж чанар элементийн өндөр, мөр хоорондын зайг өөрчлөхөд хэрэглэгдэнэ.

Шинж чанар	Тодорхойлолт	Авах утга
height	Элементийн өндрийг заана.	Хэмжээ,%,auto
Line-height	Мөр хоорондын зайг заана.	Хэмжээ,%,normal
Max-height	Элементийн хамгийн их өндрийн хэмжээг заана.	Хэжээ,%,none
Max-widht	Элементийн хамгийн бага өндрийн хэмжээг заана.	Хэмжээ,%.none
Min-height	Элементийн хамгийн бага өргөний хэмжээг заана.	Хэмжээ,%
Min-widht	Элементийн өргөний хэмжээг заана.	Хэмжээ,%
widht	Элементийн хамгийн их өргөнийг хэмжээг заана.	Хэмжээ,%,auto

Жишээ нь 47 : Мөр хоорондын зайг зааж байгаа нь.

<html>

<head>

p.invresa {line-height: 1cm}

</style> </head> <body>

<p> Ном хийж байна. Ном хийж байна. Ном хийж байна. Ном хийж байна. . Ном хийж байна. Ном хийж байна. Ном хийж байна. . Ном хийж байна. Ном хийж байна. Ном хийж байна.</p>

<p class=”increase”> . Ном хийж байна. Ном хийж байна. Ном хийж байна. . Ном хийж байна. Ном хийж байна. Ном хийж байна. . Ном хийж байна. Ном хийж байна. Ном хийж байна.</p>

</body> </html>

CSS ангилал шинж чанар

Энэ шинж чанарын тусламжтай элементийг хаана харуулах, зураг текстийн байрлал зэргийг удирдах боломжтой болно.

Шинж чанар	Тайлбар	Авах утга
Clear	Элементийн байрлал заана.	Left,right,both,none
Cursor	Курсорын харагдах хэлбэрийг заана.	url,auto,crosshair,default,pointer,move,e-resize,ne-resize,nw-resize,n-resizese-resize,sw-resize,s-resize,w-resize,text,wait,help
Display	Элемент яаж харагдахыг заана.	None,inlineblock,list-item,run-in,compact,marker,table,inline-table,table-row-group,table-footer-grouptable-row,table-column,table-cell,table-caption
Float	Текст ба зургийн байрлал заана.	Left,right,none
Position	Элементийн байрлал заана.	Static,retalive,absolute
visibility	Элемент харагдах эсэхийг заана.	Visibly,hidden,collapse

Жишээ 48. элементийн харагдах байдлыг тодорхойлсон нь.

<html>

<head>

Div{display:none}

P{display:inline}

</style></head>

<body>

<div> div хэсэг нь харагдахгүй.</div>

<p>Параграфд “inline ” гэсэн утга өгсөн байна.</p>

<p> Энэ утга нь параграфын хооронд мөр авахыг үгүйсгэнэ.</p>

</body>

</html>

Зураг 40 Харагдах байдлыг тодорхойлсон нь.

Жишээ 49.Position хэлбэр тодорхойлж байрлал зааж байгаа нь.

<html>

<head>

H1.ex1 {position:relative; left:20}

H2.ex2 { position:relative; left:-20}

</style></head> <body>

<p> Үндсэн байрлалын хувьд өөрчилнө.</p>

<p> “Өдөр+20” Элементийн зүүн тийш 20 цэгээр шилжүүл.</p>

<p>”Шөнө-20” Элемэнтийн байрлалаас -20 цэгээр шилжүүл.</p>

</body>

</html>

Зураг 41Элементийн байрлал зааж байгаа нь.

Css-н байрлалын шинж чанарууд

Байрлал заах шинж чанаруудын тусламжтай нэг элементийг

нөгөө элементийн хувьд хаана байрлахыг заана.

Шинж чанар	Тайлбар	Авх утга
bottom	Нэг элементийн нөгөөгийн хувьд доор нь байрлуулахыг заана.	auto,%,хэмжээ
clip	Элементийн хэлбэрийг заажь уг хэлбэрт элементийг харуулна.	shape,auto
left	Нэг элементийг нөгөөгийн хувьд зүүн талд нь байрлуулахыг заана.	auto,%,хэмжээ
overflow	Элементийн агуулга их байхад ямар үйлдэл гүйцэтгэхийг заана.	auto,%,хэмжээ
right	Нэг элементийг нөгөөгийн хувьд баруун талд нь байрлуулахыг заана.	visible,hidden,scroll,auto
top	Нэг элементийг нөгөөгийн хувьд дээд талд нь байрлуулахыг заана.	auto,%,хэмжээ
vertical-align	элементийн байрлалыг заана.	Baseline,sub,sujer,top,text,text-top,middle,bottom,text-bottom,%,хэмжээ
z-index	элементийг яаж давхарлан харагдахыг заана.	auto,тоо

Жишээ 50. Clip шинжээр зургийн хэмжээг заасан нь.

<html>

<head>

Img{position:absolute; clip:rect (0 200 0)}

</style> </head> <body>

<p><b> Анхааруулга </b> Netscape 4 нь “clip” шинжийг харуулдаггүй. </p>

<p> зураг өгөгдёөн хэмжээнд багтахгүй бо л хувааж харуулах.<br> </p>

</body> </html>

Зураг 42 Clip шинжийг харуулж байгаа нь.

Гэх мэтчилэн position,overflow,z-index адилаар бичигдэнэ.

CSS Pseudo-classes

Pseudo-classes гэдэг нь: хэлбэр ашиглан зарим элементэд янз бүрийн эффект нэмэх зориулалтай.

Жишээ 51 а элементэнд холболтонд өнгөний эффект оруулж байгаа нь.

<html>

<head>

a:link {color:#FF0000}

a:visited {color:#FF00FF}

a:hover {color#00FF00}

a:active {color”#0000FF}

</style></head>

<body>

<p><b>

<a href=”default.asp” target=”blank”> Kholbolt </a></b></p>

<p><b> Anhaaruulga! </b>a:hover нь a:link ба a:visited тодорхойлсоны дараа бичигдэнэ.</p>

<p><b> Anhaaruulga! </b> a:active нь a:hover тодорхойлсоны дараа идэвхижинэ. </p>

</body></html>

Хэрхэн бичих вэ?

Дараах зааварын дагуу Pseudo-classes бичнэ.

Сонгосон элемент: Pseudo-class{шинж чанар:авах утга}

Pseudo-classes мөн класс ашиглах боломжтой.

Сонгосон элемент.Класс: Pseudo-class{шинж чанар:авах утга}

Pseudo-classes ашиглан холболт хийх

Холболт хийхэд холболт идэвхитэй байхад, холболт хийгдсэний дараа, хулганы заагч холболтын текст дээгүүр шилжихэд зэрэгт хэлбэр ашиглан өөр өөрөөр харагдуулж болно.

a:link {color:#FF0000} /*холболт хийгдээгүй үе*/

a:visited {color:#FF00FF}/*холболт хийгдсэн*/

a:hover {color#00FF00}/*хулганы заагч холболт дээгүүр шилжэх үе*/

a:active {color”#0000FF}/*сонгогдсон холболт*/

Анхааруулга: a:hover нь a:link ба a:visited холболтын дараа бичигдэх ёстой a:active нь a:hover тодорхойлсоны дараа бичигдэнэ.

Pseudo-class нэрс нь үсгийн том жижигийг ялгалгүй ойлгоно. Internet Explorer 4 ба түүнээс дээш хувилбар нь Pseudo-class холболтын элементүүдийг гаргадаг. Харин Netscape Navigator 4.5 ба Netscape6 нь Pseudo-class холболтын элементийн заримыг гаргадаг.

Pseudo-classes ба CSS classes

Pseudo-classes нь хэлбэрийн класстай нэгдэн дараах байдлаар ашиглагдана.

a.red:visited {color:#FF00FF} /*холболт хийгдсэн*/

<a class=”red” href=”css_syntax.asp”>CSS бичиглэл </a>

Дээрх жишээнд холболт хийгдсэний дараа холболтын текст улаанаар харгадахаар заажээ.

:first-child

:first-child гэсэн Pseudo-classes нь нэг элемент өөр элементийн хүүхэд болж байгааг тодорхойлж, хүүхэд элементийг хэрхэн хэвжүүлэхийг заана. Доорх жишээнд div элементийн хүүхэд нь p болох ба зэргэцүүлэлт25 рх гэ жзаажээ.

div: :first-child p

{text-indend:25px} div

Дээрх хэлбэр доорх тохиолдолд таарна. Учир нь div элементэд тодорхойлсон эхний элемент нь р байна.

<div> <p> div элементийн эхний элемент нь параграф тодорхойлсон байна. Энэ параграф нь 25 цэгээр зэргэцсэн байна. </p>

<p> div элемент дэх 2 дахь элемент нь параграф байна. Энэ параграф зэрэгцүүлэлт хийгдэхгүй. </p>

</div>

Дээрх хэлбэр эн жишээнд таарахгүй. Учир нь div элемент дэх эхний элемент нь h1 байна. Гэтэл хэлбэрт хүүхэд элементийг p гэж тодорхойлсон.

<div>< h1> Гарчиг< /h1>

<p> Энэ параграф div элементийн дотор нь байна. Гэхдээ зэрэгцүүлэлт хийгдэхгүй. Учир нь р элемент нь div дотор байгаа эхний элемент биш. </p></div>

Р элементийн хүүхэд элемент нь ем байхаар заасан байгаа нь

р:first-child еm{font-weight:bold}

Дээрх хэлбэр дараах HTML кодчлолд тохирно.

<p> Энэ бол <em> хүүхэд</em> элемент.</p>

Хүүхэд элементийн нэрийг заалгүй тодорхойлж болно. Энэ тохиолдолд ямар ч элемент хүүхэд элемент байж болно.

а:first-child {text-decoration:none}

параграфын эхний элемент нь доогуур зураасгүй харин бусад нь зурагдсан байна.

<p>Visit <a href=”http:\www.w3schools.com”>W3Schools </a> and learn CSS!

Visit <a href=”http:\www.w3schools.com”>W3Schools </a> and learn HTML! </p>

Pseudo-classes

Pseudo-classes	NN	IE	зорилго
Active		4.0	идэвхитэй байгаа холболтонд эффект нэмнэ.
Hover		4.0	хулганы заагч үг дээр байрлахад эффект нэмнэ.
Link	4.0	3.0	холболт хийгдээгүй үед эффект нэмнэ.
Visited	4.0	3.0	холболт хийгдсэн үед эффект нэмнэ.
:first-child			эхний хүүхэд элементийг тодорхойлно.

Pseudo элемент

Pseudo элемент хэлбэрт янз бүрийн эффект оруулдаг.

Жишээ 52 first-letter шинжийг ашигласан.

<html>

<head>

Div:first-letter

{color:#ff0000;font-size:xx-large}

</style> </head> <body>

<p><b> Анхааруулга!</b> Netscape 4 нь “first-letter” шинжийг харуулдаггүй. </p>

<p><b> Анхааруулга!</b> Internet explorer 5.5 нь “first-letter” шинжийг гаргана. </p>

<div> Текстийн эхний үсгэнд хэлбэр оруулахдаа first-letter шинжийг ашиглаарай. </div>

</body> </html>

Бичиглэл

Pseudo элементийг дараах загвараар бичнэ.

Элемент. Pseudo-элемент {шинж чанар:авах утга}

Хэлбэрийн класс мөн Pseudo элементтэй хамт хэрэглэгдэх болно.

Элемент.класс: Pseudo-элемент { шинж чанар:авах утга}

First-line

“first-line” Pseudo элемент нь текст бичихэд эхний мөрд тусгай хэвжүүлэлт оруулна.

P {font-size:12pt}

P:first-line {color:#0000ff;font-variant:small-caps}

/* эхний мөрний өнгө үсгийн фонтыг заасан байна.*/

<p> Some text that ands up on two or more lines </p>

Дараах кодчлолын үр дүнд дараах хэлбэртэй харагдана.

Дээрх жишээнд веб хуудас харуудагч програм эхний мөрийг өгөгдсөн хэвжүүлэлтээр харуулсан байна.

Анхааруулга: first-line Pseudo элемент нь дараах шинжүүдийг тодорхойлно.

Үсгийн фонт
өнгө, дэвсгэр өнгө
үг хоорондын зай, үсэг хоорондын зай, мөр хоорондын зай
текстийн хэвжүүлэлт
босоо зэрэгцүүлэлт

first-letter

first-letter Pseudo элемент нь текстийн эхний үсгийг хэвжүүлнэ.

P {font-size:12pt}

P: first-letter {font-size:200 %;float:left}

<p> The first words of an article.</p>

first-letter Pseudo элемент нь дараах шинжүүдийг тодорхойлно.

Үсгийн фонт
өнгө,дэвсгэр өнгө,зураг
зайн шинжүүд
хүрээ
текст хэвжүүлэлт
босоо зэрэгцүүлэлт
мөр хоорондын зай

Pseudo элемент ба CSS Classes

Pseudo элемент нь дараах хэлбэртэй хамт ашиглагдаж болно.

p.article:first-letter {color:#ff0000}

<p class=”article”>A paragraph in an article </p>

Энэ жишээ параграфын үсэг нь улаан өнгөөр гарахаар заажээ.

Хэд хэдэн Pseudo элемент зэрэг ашиглаж болно.

CSS линкний єнгє солих, шинж чанарууд

Гадаад хуудсыг єєрийн хуудсанд холбохын тулд :

<html> <head>
<title>WebMN.net</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
......

гэсэн байдалтайгаар бичигдэнэ. Test.css нь таны хэлбэр агуулсан хуудсын нэр ба хаяг юм. Та хоёр хэлбэрийг ашигласан гэж vзвэл Гадаад хэлбэрийн хуудас , дотоод хэлбэрийг давхар бичсэн бол дотоод хэлбэрийн хуудас нь илvv давуу эрхтэйгээр хэвжvvлнэ. єєрєєр хэлбэл <head> тагт бичсэн хэлбэр авна. Гадаад хэлбэрийн хуудсыг авахгvй гэсэн vг.
CSS нь Веб хуудас хийдэг хүн бүхэнд олон хуудсыг нэг зэрэг өөрчлөх боломжийг олгоно. Ерөнхий өөрчлөлт хийхдээ зөвхөн хэлбэрийг өөрчилснөөр бүх элементэнд өөрчлөлтөө оруулж чадна.
Вэбийн линкний єнгийг тодорхойлж єгєєгvй vед автомааар цэнхэр єнгєтэй, харин урьд нь vзэж байсан линк нь улаан хvрэн єнгєтэй, тоогуураа зураастай байдаг. Тухайн вэб хуудасныхаа єнгєнд дизайнд тохируулан линкний єнгийг сонгох нь тохиромжтой.
Доорхи жишээг харъя :
; } /*link nii ongo*/
A:visited { col<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
A:link { color: #1366BB or: #1366BB; } /*urid n uzsen link-nii ongo*/
A:hover { color: #ff0000; } /*hulganii zaagch deeguur n ochih uyiin ongo*/
</style>
</head>
<body>
<a href="http://www.webmn.net">Go to WebMN.net</a>
</body>
</html>
Гэх зэргээр зааж єгч болдог. Мєн линкнийхээ фонтын хэлбэрийг, доогуур зураасын хэлбэр, vсгийн хэмжээ зэргийг зааж болдог. Одоо линк нь хэвийн байх vед доогуураа зураасгvй харагддаг, харин заагч очих vед дуугаараа зураастай болдог нэгэн жишээ харъя :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
A:link { color: #1366BA; TEXT-DECORATION: none }
A:visited { color: #1366BA; TEXT-DECORATION: none }
A:hover { color: #ff0000; TEXT-DECORATION: underline }
</style>
</head>
<body>
<a href="http://www.webmn.net">Go to WebMN.net</a>
<br>test test
</body>
</html>
.
зураг 43
Энэ TEXT-DECORATION гэсэн хэвжvvлэлтэнд єєр
none - ямарч зураасгvй болгоно
underline - доогуур зураастай болгох
overline - дээгvvрээ зураастай болгох
line-through - тэкстын дундуур дарсан хэлбэртэй зураас гаргана.
Гэх мэт бусад хэлбэрvvдийг ашиглаж болно.
Одоо vсгийн хэлбэр, хэмжээг заах жишээ харъя :
<style type="text/css">
A:link {
color: #1366BB;
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: underline
}
A:visited {
color: #1366BB;
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: underline
}
A:hover {
color: #cccccc;
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
</style>
Энэ бол тэр хуудсанд бvхэлд нь ийм байна гэж заасан болхоор таны бvх линк ийм хэвжvvлэлт авна гэсэн vг. Магадгvй та нэг хуудсанд 2,3 єєр тєрлийн хэвжvvлэлттэй линк хийхийг хvссэн vедээ id шинж чанарыг ашиглана.
Жишээн дээрээс тодорхой харагдах байх :
<html>
<head>
<style type="text/css">
A:link { color: #1366BA; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: underline
}
A:visited { color: #1366BA; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: underline
}
A:hover { color: #ff0000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
#link2 A:link { color: #FF0000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
#link2 A:visited { color: #FF0000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
#link2 A:hover { color: #00FF00; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
</style>
</head>
<body>
<table width="421" height="217" border="1">
<tr>
<td width="195"><a href="http://www.webmn.net">Go to WebMN.net</a> </td>
<td width="220" id="link2">"><a href="http://www.webxvv.com"> WebXvv.com</a></td>
</tr>
</table>
</body>
</html>
Зураг 30.

Хэлбэр бичих хэсэгтээ #link2 гэх мэтээр тусад нь тодорхойлж єгєєд харин тэр хэлбэртээ харгалзуулахын тулд id=”link2” гэх мэтээр зааж єгдєг.

CSS хулганы заагчыг солих

Хэлбэр ашиглан хулганы заагчын харагдах хэлбэрийг тодорхойлж болдог. Тодорхойлдог элэмент нь cursor юм. Бичихдээ нэг таг, элэмэнтэд харгалзуулан бичнэ.
Ж.нь :
<p style=”cursor: crosshair”>End cursoriig bairluulj ur dung har</p>
дээрхи нь тухайн заасан элэмэнт дээр заагч байрлах vед заагчын хэлбэр єєрчлєгдєн харагдах болно. Харин тэр хуудсандаа тэр чигт нь харгалзуулан єгье гэвэл :
<html>
<body style=”cursor: help”>
cursor
</body>
</html>
бусад тєрлийн заагчыг хэлбэрvvдийг дараахи кодноос хараарай.
<html>
<body>
заагчын хэлбэрvvд
<p style=”cursor: auto”>Auto</p>
<p style=”cursor: default”>Default</p>
<p style=”cursor: pointer”>Pointer</p>
<p style=”cursor: crosshair”>Crosshair</p>
<p style=”cursor: move”>Move</p>
<p style=”cursor: ne-resize”>ne-resize</p>
<p style=”cursor: nw-resize”>nw-resize</p>
<p style=”cursor: n-resize”>n-resize</p>
<p style=”cursor: se-resize”>se-resize</p>
<p style=”cursor: sw-resize”>sw-resize</p>
<p style=”cursor: s-resize”>s-resize</p>
<p style=”cursor: w-resize”>w-resize</p>
<p style=”cursor: text”>TEXT</p>
<p style=”cursor: help”>HELP</p>
<p style=”cursor: wait”>Wait</p>
</body>
</html>
Зураг 31.

энэ тухайн нэг элэментэд харгалзуулж байна. Нийт хуудсанд харгалзуулахын тулд CSS коддоо нэмхэд л хангалттай.
<style type="text/css">
body{
cursor : crosshair ;
}
</style>

Даалгавар

Java Script

Java script нь вэб хуудас хийхэд html кодчилолтой хамт ашиглагдана.HTML кодчилол нь зөвхөн текстийн агуулгыг харуулдаг бол Java script нь вэб хуудсандаа html кодчилолоор шийдэж чадахгүй байсан тэр зүйлийг шийдвэрлэж өгнө.Жишээлбэл:

html кодчилол дээр логик арифметик үйлдлүүдийг хийж чаддагүй.Тэгвэл энэ бүгдийг Java script дээр бичиж болно.Java script нь вэб хуудасны html хэл ойлгох үйл явдал буюу script-ийн жижиг программыг бичих программын хэл юм.Java script нь том жижиг үсгийн алдааг маш их анхаардаг.Өөрөөр хэлбэл та html дээр бичдэг шигээ томоор бичих үсгийг жижгээр бичвэл таны код ажиллахгүй.Таниас маш их анхаарал шаарддаг.Java script нь C програмчлалын хэлтэй төстэй зарчимтай.Java script-ийг бичихдээ html кодчилолтой адилхан <body> </body> кодчилолын хооронд бичнэ.

Java script-ийн ард ; бичих шаардлагатай.html нь <body> </body> кодчилолын хооронд бичигдсэн зүйлийг харуулдаг бол Java script нь текст бичих , бусад html кодчилол харуулахын тулд document.write(“text”); гэсэн түлхүүр үг хэрэглэнэ.Дэвсгэр өнгийг заахдаа document.bgColor=”blue”; гэж заана.

Тайлбар бичихдээ:

// -нэг мөрөнд тайлбар бичих

/* */ -нэгээс олон мөрөнд тайлбар бичих

Жишээ 53 :Тайлбар бичсэн нь:

<html>

<head>

</head>

<body>

// Java script дээр бичсэн дараах мөр ньдэвсгэр өнгийг ногоон болгоно.

document.bgColor=”green”;

/*Дараах мөр нь html цонх дээрх текстийг гаргана.

document.write(“<h1>First web </h1>”);*/

</script>

</body>

</html>

Жишээ 54: Хуудасны дэвсгэр өнгө зааж текст бичиж байгаа нь:

<html>

<head>

</head>

<body>

document.bgColor="pink";// дэвсгэр өнгийг зааж байгаа нь

document.write("<h1> ene bol garchig,</h1>");//гарчиг

document.write("Text bichij ban."+"<br>");//мөр шилжиж байна.

</script>

</body>

</html>

Java script html кодчилол дунд бичихээс гадна .js өргөтгөлтэй файлд бичээд холбож болно.

Дээр бичсэнчилэн java script дээр арифметик, математикийн үйлдэл гүйцэтгэнэ.Үүний нэг нь хувьсагч зарлан үйлдэл гүйцэтгэх.Хувьсагчийг var түлхүүр үгээр тодорхойлно.number. string, Boolean төрлийн хувьсагчид байж болно.Зарласан хувьсагчид шууд төрлийг зааж болохоос гадна утга олгож болно.

Жишээ 55 Хувьсагч зарлан утга олгож байна :

<html>

<head>

</head>

<body>

<h1> Асуултын хуудас </h1>

<script language=”javascript”>

var answer1, answer2, answer3, answer 4;

answer1=16;

answer2=5e;

answer3="Java ";

answer4=true;

</script>

</body>

</html>

Хувьсагчид олгосон утгыг хэвэлж гаргах ямар нэгэн үйлдэл хийгээгүй учраас үр дүн гарахгүй.

Зураг 44

Жишээ 56 Текстийн дэвсгэр өнгө , холболтын өнгийг зааж байна.

<html>

<head>

</head>

<body>

<script language="javascript">

document.bgColor="pink";

document.fgColor="green";

document.linkColor="red";

</script>

<h3> Гарчиг ногоон, дэлгэц ягаан өнгөтэй

<br>холболт улаан өнгөтэй байна.</h3>

<a href="www.olloo.mn"> Olloo.mn</a>

</body>

</html>

Зураг 45 текст холболтын өнгөнүүдийг зааж харуулсан нь

Жишээ 57 : Хувьсагч зарлан математик үйлдэл гүйцэтгэж байгаа нь:

<html>

<body>

a1=12;

a2=10;

aAdd=var1+var2;

aSub=var1-var2;

aNult=var1*var2;

aDiv=var1/var2;

document.write=("Хувьсагч 1:"+a1+"<br>");

document.write=("Хувьсагч 2:"+a2+"<br>");

document.write("Нийлбэр:"aAdd+"<br>");

document.write("Ялгавар:"+aSub+"<br>");

document.write("Үржвэр:"+aNult+"<br>");

document.write("Ноогдвор:"+aDiv+"<br>");

</script>

</body>

</html>

Жишээ 58: Хувьсагчийн төрөл олгож хэвлэх:

<html>

<head>

</head>

<body>

var str1="6.23E-23";

var float1=parseFloat(str1);

document.write(str1+"-ийн төрөл нь "+typeof str1+"<br>");

document.write(float1+"-ийн төрөл нь" +typeof

float1+"<br>");

</script>

</body>

Зураг 46 Хувьсагчийн төрөл хэвлэсэн нь

To string() функц нь тоог мөр тэмдэг болгоно.

Жишээ 59: Тоог тэмдэгт мөр болгох нь:

<html>

<head>

</head>

<body>

var int1=10000;

var str1=int1.toString();

document.write(int1+"-ийн төрөл нь" +typeof int1+"<br>");

document.write(str1+"-ийн төрөл нь" +typeof str1+"<br>");

</script>

</body>

</html>

Зураг 47 To string() функц ашигласан нь

Буюу тоо тэмдэгт мөр болсон нь

Жишээ 60 : Хуьсагчийн утгыг нэмэх, хорогдуулах үйлдэл

<html>

<head>

</head>

<body>

a=1;

b=7;

document.write("Өмнөх утга:"+a+" ба "+b+"<br>");

a++;

b--;

document.write("Дараах утга :"+a+" ба "+b+ " <br>");

</script>

</body>

</html>

Зураг 48 Нэмэх хорогдуулах үйлдэл

Жишээ 61 :Хувьсагчид утга олгож байгаа нь:

<html>

<head>

</head>

<body>

var num1, num2,num3;

num1=1000000

num2=1250;

num3=”Hello”;

verysmallNum=6.023e-23;

document.write("Энэ бол тоо : "+num1+"<br>");

document.write("Энэ бол тоо : "+num2+"<br>");

document.write("Энэ бол тоо : "+num3+"<br>");

</script>

</body>

</html>

Зураг 49 : Хувьсагчид утга олгож байгаа нь

Жишээ 62:Тоон утга олгож хэвлэж байгаа нь:

<html>

<head>

</head>

<body>

var decimalNum, hexadecimalNum, octalNum;

decimalNum=24;

hexadecimalNum=0x24;

octalNum=024;

document.write("Энэ бол 10-тын тоо: "+decimalNum+"<br>");

document.write("Энэ бол 16-тын тоо: "+hexadecimalNum+"<br>");

document.write("Энэ бол 8-тын тоо: "+octalNum+"<br>");

</script>

</body>

</html>

Зураг 50 Хувьсагчид утга олгож байгаа нь

Decimal-аравтын тоо:

Octal-наймтын тоо: Өмнөө заавал 0
(нойл-ыг авч бичдэг.)

Hexadecimal- арван зургаатын тоо : 0-9 тоонуудаар болон том жижиг A-F үсгээр бичигддэг.Өмнөө 0x эсвэл 0X авч бичигддэг.(16-тын тооллын систем)

A-10 E-14

B-11

C-12 F-15

D-13

Decimal, Octal , Hexadecimal бүхэл тоонуудыг Java script-д бичих байдал

Decimal	Octal	Hexadecimal
0	0	0x0
2	02	0X2
63	077	0X3f
83	0123	0x53
631	0771	0x3F1

Мөн float төрөл байдаг.Энэ нь бутархай тоо. Жишээлбэл : 1.2, 13639.566

2.997E8, 3.6022e23,1.60e-19 гэх мэтчилэнгийн бутархай тоонууд байна.

Даалгавар1:

1.Javascript гэж юу вэ? Түүнийг хэрхэн бичиж хэрэглэдэг вэ?

2.Хувьсагч гэж юувэ? Төрлүүдийг нь нэрлэн утга олгож бич!

Массив зарлах:

Массив нь C хэлэнд бичиж зарладаг шиг Array() гэсэн түлхүүр үгээр тодорхойлогдоно.Массивын индекс нь 0 гэж эхэлнэ.Массивын хэмжээг хаалтанд заах мөн хоосон орхиж болдог.

array1.lenght()-Массивын хэмжээг гаргана.

array1.join()-Массивын элементүүдийг нэгтгэн тэмдэгт мөр болгоно.

array1.join(“”)-нэгтгэхдээ элементийн хооронд зай авна.

array1.sort()-эрэмбэлэн тэмдэгт мөр болгоно.

Жишээ 12 : Массивийг зарлан элементүүдийг хэвлэх:

<html>

<head>

</head>

<body>

array1=new Array(5);

array1[0]="Массив ";

array1[1]="нь ";

array1[2]="Програмчиллын хэлэн дэх ";

array1[3]="бичиглэлтэй ";

array1[4]="адилхан";

document.write(array1[0 ], array1[1] , array1[2], array1[3], array1[4]);

</script>

</body>

</html>

Зураг 51 Массивын элементүүдийг хэвлэсэн нь:

Жишээ 63 : Массивын элементүүдийг хэвлэх:

<html>

<head>

</head>

<body>

arrayNum=newArray(5);

arrayNum[0]=6;

arrayNum[1]=28;

arrayNum[2]=5;

arrayNum[3]=7;

arrayNum[4]=11;

document.write("Анхны тоонууд:"+ arrayNum[0]+" "+arrayNum[1]+" "+arrayNum[2]+"

"+arrayNum[3]+" "+arrayNum[4]+);

</script>

</body>

</html>

Жишээ 64: Массивын элементүүдийг нэгтгэж байгаа нь:

<html>

<head>

</head>

<body>

array1=new Array();

array1[0]="html";

array1[1]="css";

array1[2]="javascript";

array1[3]="c";

array1[4]="c++";

array1[2]="visual";

str1=array1.join();

document.write(str1);

</script>

</body>

</html>

Зураг 52 Массивын элементүүдийг нэгтгэсэн нь

Жишээ 65: Массивын элементүүдийг нэгтгэхдээ хооосн тэмдэгт нэмэх :

<html>

<head>

</head>

<body>

array1=new Array();

array1[0]="HTML";

array1[1]="CSS";

array1[2]="javascript";

array1[3]="C";

array1[4]="C++";

array1[2]="VISUAL";

str1=array1.join(" ");

document.write(str1);

</script>

</body>

</html>

Зураг 53 Хоосон зай авч нэгтгэсэн нь

Жишээ 66: Массивын элементүүдийн тоог гаргаж байгаа нь:

<html>

<head>

</head>

<body>

array1=new Array(5);

array1[0]="Би";

array1[1]="санаандгүйгээр";

array1[2]="чиний баярт явдлын";

array1[3]="гэрч";

array1[4]="боллоо.";

document.write(array1[0],array1[1],array1[2],arrray1[3],array1[4] +"<br>");

document.write("Энэ массив "+array1.length+" гэсэн гишүүн агуулдаг.");

</script>

</body>

</html>

Жишээ 67: Массивыг эрэмбэлэх нь:

<html>

<head>

</head>

<body>

array1=new Array();

array1[0]="14";

array1[1]="400";

array1[2]="1";

array1[3]="19";

array1[4]="15";

array1[2]="21";

str1=array1.sort();

document.write(str1);

</script>

</body>

</html>

Зураг 54 Массивыг эрэмбэлсэн нь

Даалгавар 2:

1.Массивийг зарлан утга оноож хэвлэ!

2.Массивт утга олгон тэднийг нэгтгэ!

Операторууд:
Програмчиллын хэлнүүдтэй адилхан операторууд гэж Java script-д мөн байдаг.
Харьцуулах оператор:
If(нөхцөл)
үйлдэл1
If()else, if() else if() бүтцүүдийг мөн хэрэглэнэ.
Нөхцөл биелвэл үйлдэл 1 хийгдэнэ.
Жишээ 68: If оператор ашигласасан нь:
<html>
<head>
</head>
<body>
<script language="javascript">
time=13;
if(time==13)
utga="Цайны цаг"
document.write("Өдрийн цаг : "+time+"<br>");
document.write("Тэр үе : "+utga+"<br>");
</script>
</body>
</html>
Зураг 55 If ашигласан нь
Жишээ 69 : If else ашиглах нь:
<html>
<head>
</head>
<body>
<script language="javascript">
num=125;
if (num>125)
document.write("Yes");
else
document.write("No");
</script>
</body>
</html>
Зураг 56 if else ашиглсан жишээ
Жишээ 70 : if else-г мөн давхар давхар ашиглаж болно.
<html>
<head>
</head>
<body>
<script language="javascript">
Month="6-р сар";
Date="7";
if(Month=="6-р сар" && Date==7)
document.write("Өнөөдөр хүүхдийн баяр тул дэлгүүр онгойно.");
else
if (Month="6-р сар " && Date==1)
document.write("Өнөөдөр ажлын өдөр бөгөөд дэлүүр онгойно.");
else
if(Month=="11-р сар" && Date==26)
document.write("Өнөөдөр улс тунхагласны баяр ба дэлгүүр онгойно.");
else
document.write("Тавтай морилно уу? Маргааш ажлын өдөр тул бид ажиллана.");
</script>
</body>
</html>
Зураг 57 f else ашигласан жишээ
For давталтын оператор :
For түлхүүр үгээр давталтыг тодорхойлно.Дараах хэлбэрээр бичигдэнэ.for(эхлэх утга, хүрэх утга, давтах алхам)
Жишээ 71: 1-10 хүртэлх тоог хэвлэ.
<html>
<head>
</head>
<body>
<script language="javascript">
for (count=1; count <=10; count++)
document.write("" +count+"<br>");
</script>
</body>
</html>

Зураг 58 or оператор ашигласан нь

Жишээ 72 : Тоонуудыг квадратад дэвшүүл:

<html>

<head>
</head>
<body>
<script language="javascript">
for (count=2; count <10000 ; count= count*count)
document.write(""+ count+"<br>");
</script>
</</html>
</body>
Зураг 59 for ашигласан нь
While давталтын оператор:
While мөн for-той адилхан давталтыг тодорхойлно.Гэхдээ бичигдэх хэлбэр нь өөр.Дараах хэлбэрээр бичигдэнэ.
Эхлэх утга while(хүрэх утга) {алхам}
Хүрэх утга нь тоо боллон нөхцлөөр байж болно.Нөхцлөөр заасан үед while түлхүүр үгийн ард байрлах нөхцөл биелэх үед давталт хийгдэнэ.
Жишээ 73: 1-5 хүртэлх тоог хэвлэ
<html>
<head>
</head>
<body>
<script language="javascript">
count=1;
while (count<=5){
document.write("" +count+"<br>");
count++;}
</script>
</body>
</html>
Зураг 60 while ашигласан жишээ
Даалгавар 3 :
1.1-50 хүртэлх тооноос сондгой тоонуудыг олж хэвлэ!
2.Төгс болон анхны тоонуудыг олж хэвлэ!(Төгс тоо гэж өөрөөсөө бусад хуваагчуудынх нь нийлбэр нь уг тоотойгоо тэнцүү тоог хэлнэ.Жишээлбэл:
(6=1+2+3)
(28=1+2+4+7+14)
Харьцуулах оператор:

Оператор	Утга
<	Бага
>	Их
<=	Бага буюу тэнцүү
>=	Их буюу тэнцүү
==	Тэнцүү
!=	Тэнцүүбиш

Boolean төрлийн оператор:

&&	AND
II	OR
!	NOT

AND			OR			NOT
Con1	con2	res	Con1	Con2	Res	Con1	Con2	res
True	True	True	True	True	True
True	False	False	True	False	True
False	True	False	False	True	True
False	False	false	False	False	false

And ашигласан жишээ:
<html>
<head>
<script>
a = 10
b= 10
if (a == 10 && b == 10)
{
   alert("Both a and b are equal to 10")
}
else
{
   alert("a and b are not equal to 10")
}
</script>
</head>
</html>
Зураг 61   and ашигласан жишээ
eval(тэмдэгт мөр) функц тэмдэгт мөрийг тоо болгон хувиргаад математик үйлдлийг гүйцэтгэн хариуг буцаана.
Жишээ 74: eval функц ашиглан нэг жилд хэдэн цаг байдгийг бод!
<html>
<head>
</head>
<body>
<script language="javascript">
hoursPerYear="365*24";
document.write("Үржвэр: "+hoursPerYear+"<br>");
document.write("Үр дүн:"+eval(hoursPerYear));
</script>
</body>
</html>

Зураг 62 eval() функц ашигласан жишээ

Break, continue оператор:
Давталт гүйцэтгэж байхад давталтыг дуустал гүйцээлгүй дундаас нь гарах шаардлага гардаг.Үүнийг break операторын тусламжтай хийнэ.Харин үргэлжүүлэхдээ continue оператор ашиглана.
Жишээ 75 : Break ашиглах нь:
<html>
<head>
</head>
<body>
<script language="javascript">
count=1;
while( count <=15)
{ count++;
if (count==8) break;
document.write("Математик бол бүх шинжлэх ухааны хаан"
+count+ "<br>" );
count==count*count; }
</script>
</body>
</html>
Зураг 63 break ашигласан нь
Жишээ 76 : continue ашиглах нь:
<html>
<head>
</head>
<body>
<script language="javascript">
count=1;
while( count <=15)
{ count++;
if (count==8) continue;
document.write("Математик бол бүх шинжлэх ухааны хаан"
+count+ "<br>" );
count==count*count; }
</script>
</body>
</html>
Зураг 64 continue ашигласан нь
Функц түүний хэрэглээ:
Function түлхүүр үгээр функцыг заана.Функцыг <head>,<body> кодчиллын аль алинд нь бичиж болно.Эхлээд функцээ тодорхойлоод дараа нь тодорхойлсэн тэр нэрээ дуудна.
Window.setTimeout()-функц цагийг тодорхойлно.Энэ нь 2 параметр авна.Параметрийг таслалаар зааглана.Эхний параметр нь нэг оператор байж болно.Жишээ нь:document.bgColor=’ blue’, эсвэлфункцын нэр заасан байж болно.2 дахь параметр нь хугацааг заана.3000 гэж заасан нь 10 секундыг илэрхийлнэ.
Жишээ 77 : window.setTimeout() функц ашиглах нь:
<html>
<head>
<script language="javascript">
function rabbit( )
{ document.write("<h1> Happy New Year </h1>
<br/>
<img src='C:Munkhtsetsegne.gif '/>"); }
</script>
</head>
<body onload="window.setTimeout(
'rabbit()', 3000)">
<h1> Шинэ жил </h1>
</body>
</html>
Зураг 65 - 3 секундын дараа rabbit() функцийг дуудаж байна.
setInterval() функц оператор, функц биелүүлэхэд цагийн хязгаар заахад хэрэглэнэ.Энэ функц нь мөн 2 параметр авна.Эхний параметр нь функц нь ба нэг оператор байж болно.2 дахь параметр нь хугацааг заана.clearInterval() функцээр цаг тоолж эхэлж байгааг зогсооно.
Жишээ 78 : 3секундын дараа 2-рын утга солигдоно.
<html>
<head></head>
<body>
<script language="javascript">
window.setInterval("document.form1.text2.value=document.form1.text
1.value",3000);
</script>
<form name="form1">
Оролт:<input type="text" name="text1" value="Оролт"/><br/>
Боловсруулалт:<input type="text" name="text2"
value="Боловсруулалт"/><br/>
</form>
</body>
</html>
Зураг 66 setInterval() ашигласан нь
3 сек-ын дараа солигдож байгаа нь
Жишээ 79: clearInterval() функцын жишээ:
<html>
<head></head>
<body>
<script language="javascript">
stop=window.setInterval("document.from1.text2.value=document.from1.text1.value",3000);
</script>
<form name="from1">
Өдөр :<input type="text" name="text1" value="Өдөр"/> <br/>
Он сар :<input type="text" name="text2" value="Он сар "/> <br/>
<input type="button" name="button1" value="утга солигдохгүй " oncilck="clearInterval(stop)"/>
</form>
</body>
</html>
Функц дотор хувьсагчийг зарлаж болно.Функц доторхи хувьсагчийг локал хувьсагч, ерөнхий зарласан хувьсагчийг глобал хувьсагч гэнэ.Функцийг параметртэй , параметргүй ашиглаж болно.
Жишээ 80: Глобал хувьсагч ашигласан жишээ:
<html>
<head></head>
<body>
<script language="javascript">
var d1="Winter";
var d2="Spring"
function season() {
document.write("Улирал : "+d1+d2+"<br>"); }
season();
document.write("Улирал : "+d1+d2+"<br>");
</script>
</body>
</html>
Зураг 67 Глобал хувьсагч ашигласан жишээ

Жишээ 81: Локаль хувьсагч ашигласан жишээ:
<html>
<head></head>
<body>
<script language="javascript">
function season()
{ var d1="Winter";
var d2="Spring";
document.write("Улирал : "+d1+d2+"<br>"); }
season();
document.write("Улирал : "+d1+d2+"<br>");
</script>
</body>
</html>
Форм үүсгэх:
Java script кодчиллыг формтой хамтран ашиглана.Формтой ажиллахад стандарт үзэгдлүүд байдаг.Үүнд:

onclick-хулганаар нэг товших
ondbclick-хулганааар 2 товших
onmouseover-хулганы заагч дээгүүр нь шилжих
onmouseout-хулганы заагч элемент дээрээс гарах
onblur-элемент идэвхгүй болох
onfocus-элемент идэвхтэй болох
onmousedown-хулганы товчлуур дарах
onmouseup-хулганы товчлуур дараад авах
onkeypress-гараас товч дарах
onchange-өөрчлөлт гарах
onload-хуудас дуусах
onunload-хуудас хаах.

Одоо эдгээр үзэгдлүүдийг хэрхэн ашиглахыг үзье!
Жишээ 82: товч үүсгэе:
<html>
<head>
</head>
<body>
<form name="form1">
<input type="button" value="Над дээр дарна уу!">
</form>
</body>
</html>
Зураг 68 Товч үүсгэсэн нь
Жишээ 83:   Товч дээр нэг ба хоёр товшиход дээрх үг өөрчлөгдөнө.
<html>
<head>
</head>
<body>
<form name="form1">
<input type="button" name="button1 " value="Page"
onclick="document.form1.button1.value='Click here' ; "
ondblclick="document.form1.button1.value='No' ; "/ >
</form>
</body>
</html>
Жишээ 84: onchange үзэгдэл ашиглах :
Аль нэгийг нь сонгоход Hi нь MCS болон өөрчлөгдөнө.
<html>
<head>
</head>
<body>
<form name="form1">
<select name="select1" size="5"
onchange="document.form1.text1.value='MCS';">
<option> Fanta</option>
<option>Cola</option>
<option>Sprite</option>
</select>
<input type="text" name="text1" value="Hi"/>
</form>
</body>
</html>
Зураг 69 onchange үзэгдэл ашигласан нь
Аль нэг дээр нь дарахад өөрчлөгдөж байна.
onload, onunload үзэгдлүүдийг <body> кодчилолд хэрхэн хэрэглэхийг харуулъя.
onload, нь вэб хуудас дуудахад хийх үзэгдлийг, onunload нь вэб хуудсыг хаах үзэгдлийг заана.
Жишээ 85: Вэб хуудас дуудахад текст бичих форм руу мэдээлэл гаргаад, хуудсыг хаахад мөн мэдээлэл гаргана.
<html>
<head>
</head>
<body onload="document.form1.text1.value='Click here'; "
onunload="alert('Goodbye'); ">
<form name="form1">
<input type="text1" name="text1" size="50" value="I'm "/>
</form>
</body>
</html>
Зураг 70 onload үзэгдэл web хуудсыг дуудаж байна.
Зураг 71 onunload үзэгдэл web хуудас хаах үзэгдэл
alert(‘text’) функц нь бичигдсэн текстийг анхааруулах цонхонд гаргана.Хуудсыг хаахад alert() ажилласан байдал нь зураг 35 .
Энэ мэтчилэнгээр бусад үзэгдлүүдийг бичнэ.
Image объектыг ашиглах:
Img кодчилол ноь зураг оруулна.Images массивын тусламжтай хуудас дахь зургуудынхаа шинжийг тус тусад нь харна.Java script дээр images[0], images[1] гэх мэтчилэн хадгалагдсан байна.
Жишээ 86 : Үүсгэсэн товч дарж зураг өөрчилөх
<html>
<head>
<script language="javascript">
</script>
<img src="C:Munkhtsetsegnew.jpg" width=220 height=200/><br/>
<form name="form1">
<input type="button" name="button1"
value="After picture" onclick="document.images[0].src='C:Munkhtsetseg10.jpg;'">
</form>
</body>
</html>
Зураг 72 товч дарахад зураг солигдож байгаа нь
Зургийг ингэж массив хадгалан оруулдаг.
Window объектын шинж чанар:
Цонхыг хэрхэн нээх, ямар хэмжээтэй байх зэрэг шинжүүдийг заадаг объект.
window.open-цонх нээнэ.
window.close-цонх хаана.
window.print-цонх хэвлэнэ.
window.moveTo-Цонхыг зөөнө.2 параметр авна.Эхний параметр нь дэлгэцийн зүүн талаас шилжих зай, 2 дахь нь дээд талаас шилжих зай.
window.moveBy- Цонхыг зөөнө.
window.resizeTo-Цонхны хэмжээ өөрчилнө.2 параметр авна.Энэ 2 цонхны өргөн өндрийг заана.
window.alert-Анхааруулах зурагтай анхааруулгын цонх гарна.
window.prompt-Гараас утга авах цонх гаргана.
window.confirm-Лавлагаа хийх цонх гаргана.
Жишээ 87: Цонхыг хэвлэх хаах цонх ашигласан нь:
<html>
<head>
<script language="javascript">
document.write('<h1> Сур Сур бас дахин сур</h1>');
document.write('<p>Зүйр ');
document.write(' Үг</p> ');
</script>
<form>
<input type="button" value="Close" onclick="window.close();"/>
<input type="button" value="Print" onclick="window.print();"/>
</form>
    </body>
</html>
Зураг 73 Цонх хэвлэх хаах товч үүсгэсэн нь
Зурагт 74 Print-ийг дарахад гарч ирж байгаа
window.print цонх

Зураг 75 Close-ийг дарахад гарч ирж байгаа window.close цонх.
Жишээ 88: moveTo оператор ашиглан товч дээр дарж цонх зөө:
<html>
<head>
<script language="javascript">
</script>
<form name="form1">
Age: <input type="text" name="x" value="20"/> <br>
Name:<input type="text" name="y" value="Langua"/>
<input type="button" value="click" onclick="window.moveTo(document.form1.x.value, document.form1.y.value);"/>
</form>
</body>
</html>
Энэ мэтчилэн цааш нь бүх цонхнуудыг хийж үзээрэй.
Даалгавар 5:
1.Цонх үүсгэн түүн дээр дарахад зураг гарч ирэхээр хий!
Хүрээ (frame) объект:

HTML кодчиллоор хүрээг үүсгэнэ.Харин хүрээний нэр шинж чанар өнгө зэргийг Java script ашиглан харна.Хүрээний талаархи мэдээлэл нь img объект шиг мөн массивт хадгалагдана.

parent.frames[0].name-эхний хүрээний нэр

parent.frames[1].name-2 дахь хүрээний нэр

parent.left.document.bgColor-хүрээнд байгаа left нэртэй файлын дэвсгэр өнгө

parent.right.document.bgColor-хүрээнд байгаа right нэртэй файлын дэвсгэр өнгө

parent.frames.lenght-хүрээний тоо.

Ер нь javascript-ээр программчиллын хэлүүд дээр боддог бодлогуудыг бодож байгааг дээрхээс харсан байхаа.Тиймээс C,C++ програмчиллын хэл дээр бодсон бодлогуудаа javascript дээр хөрвүүлэн бичиж болно.Та бүхэн ингэж бичиж үзээрэй.

English : World’s web master

Internet

HTML

FORM

CSS:

JAVA SCRIPT

Нийт 88 жишээ, 75 зураг орсон.

График дизайн

Sunday, February 24, 2013

HTML хэлний тухай

HTML хэлний тухай

No comments: