HTML 1

Âýá äèçàéí

2

WWW ãýæ þó âý?

WWW ãýäýã íü Äýëõèé íèéòèéí ñ¿ëæýý (World Wide Web) ãýñýí ¿ã þì. WWW

ãýäãèéã òîâ÷ëîí Ñ¿ëæýý áóþó Èíòåðíýò ãýæ íýðëýäýã. Èíòåðíýò ãýäýã íü

êîìïüþòåð¿¿äèéí ñ¿ëæýý áºãººä HTTP ãýñýí ñòàíäàðò ïðîòîêîë àøèãëàí õîîðîíäîî

õîëáîãäîíî. Ýíýõ¿¿ ñ¿ëæýýíèé ìýäýýëýë Âýá õóóäàñ ãýæ íýðëýãäýí õàäãàëàãääàã.

Âýá õóóäñóóä ìààíü Âýá ñåðâåð ãýæ íýðëýãääýã êîìïüþòåðò áàéðëàíà. Âýá

õóóäñóóäûã àøèãëàæ, ìýäýýëëèéã óíøèæ áàéãàà êîìïüþòåðèéã Âýáýýð ¿éë÷ë¿¿ëýã÷

(client) ãýíý. Âýáýýð ¿éë÷ë¿¿ëýã÷èä íü âýá õàðóóëàõ õýðýãñëèéã àøèãëàäàã áà Internet

Explorer, Netscape Navigator çýðýã íü ºðãºí õýðýãëýãääýã õýðýãñë¿¿ä þì. ßìàð

õóóäñûã õàðóóëàõ âý ãýäãèéã õýðýãëýã÷ýýñ èëãýýñýí øààðäëàãààð òîäîðõîéëíî.

Õóóäàñ á¿ð ººðèéí õàÿãòàé.

Æèøýý íü: http://www.yahoo.com

Âýá õóóäàñ á¿ð ìýäýýëëýý õýðõýí õàðóóëàõ çààâðûã àãóóëäàã áà âýá õóóäàñ

õàðóóëàã÷ õýðýãñýë ìààíü ýäãýýð çààâðûã óíøèæ õàðóóëíà. Õóóäàñ õàðóóëàõ çààâðûã

HTML ãýæ íýðëýãäýõ êîä÷ëîëîîð áè÷äýã. Âýá õóóäàñíû çààâðûí ñòàíäàðòûã W3C

ãýñýí áàéãóóëëàãààñ òîãòîîäîã. W3C ãýäýã íü Äýëõèéí ñ¿ëæýýíèé Õîëáîî áà World

Wide Web Consortium ãýäýã ¿ãèéí òîâ÷ëîë þì. HTML, CSS, XML íü Âýáèéí ñòàíäàðò

êîä÷ëîëóóä áà HTML êîä÷ëîëûí ñ¿¿ëèéí õóâèëáàð íü XHTML 1.0 þì.

HTML ãýæ þó âý?

HTML ãýäýã íü Hyper Text Markup Language ãýñýí ¿ãèéí òîâ÷ëîë. Ýíý íü âýá

õóóäàñ õàðóóëàõ çààâàð áè÷äýã êîä÷ëîë þì. HTML ôàéëûã ýíãèéí òåêñò

áîëîâñðóóëàõ ïðîãðàì àøèãëàí ¿¿ñãýæ áîëîõ áºãººä htm ýñâýë html ãýñýí

ºðãºòãºëòýé áàéíà. HTML êîä÷ëîë àøèãëàí ýíãèéí âýá õóóäàñ õèéæ ¿çüå. Äîîðõ

êîäûã ÿìàð íýã òåêñò áîëîâñðóóëàõ ïðîãðàì àøèãëàí ¿¿ñãýæ C äèñêèéí òºõººðºìæ

äýýð first.html ãýñýí íýðýýð õàäãàëààðàé.

<html> <head> <title>Õóóäàñíû ãàð÷èã </title> </head> <body> Ìèíèé àíõíû âýá õóóäàñ. <b>Òîäîîð áè÷èãäñýí òåêñò. </b> </body>

www.zaluu.comwww.zaluu.com

http://www.yahoo.com/

Ö.Óðàíáèëýã

3

</html>

Âýá õóóäàñ õàðóóëàõ õýðýãñýë Internet Explorer àæèëëóóëààðàé. Èíãýõäýý

Start öýñèéí Programs äýä öýñýýñ Internet Explorer ñîíãîëò õèéíý. Âýá õàðóóëàõ

õýðýãñëèéí File öýñèéí Íýýõ (Open) êîìàíäààð ¿¿ñãýñýí First.html ôàéëàà íýýíý ¿¿.

Çóðàã 1. Html ôàéë íýýõ öîíõ

Æèøýýíèé òàéëáàð

HTML ôàéë íü âýá õóóäàñ õàðóóëàõàä çîðèóëñàí êîä÷ëîëûã (tag) àãóóëñàí

áàéäàã. Áèäíèé æèøýýíä ¿çñýí First.html ôàéëûí ýõíèé êîä÷ëîë íü <html> áàéíà.

Ýíý êîä÷ëîë Âýá õóóäàñ õàðóóëàõ çààâàð ýõýëæ áàéãààã çààíà. Ôàéëûí õàìãèéí

ñ¿¿ëèéí êîä÷ëîë íü </html> áàéíà. Ýíý íü õóóäàñ õàðóóëàõ çààâàð äóóñ÷ áàéãààã

èëýðõèéëíý. <head> </head> ãýñýí êîä÷ëîëûí õîîðîíä áè÷èãäñýí ìýäýýëýë íü

õóóäàñíû òîëãîéí õýñãèéí ìýäýýëëèéã àãóóëàõ áà ýíý íü Âýá õóóäàñ õàðóóëàõ

õýðýãñëýýð õàðàãäàõã¿é. <title> õýñýãò õóóäàñíû ãàð÷ãèéã áè÷íý. Ýíý ãàð÷èã öîíõíû

ãàð÷ãèéí õýñýãò ãàðíà. <body> êîä÷ëîëûí õîîðîíä áè÷èãäñýí ìýäýýëýë Âýá õóóäàñ

õàðóóëàã÷ õýðýãñëýýð õàðàãäàíà. <b> áà </b> êîä÷ëîëûí õîîðîíä áè÷èãäñýí òåêñò

òîäîîð áè÷èãäýíý.

Çóðàã 2. First.html ôàéë àæèëëàæ áàéãàà íü

HTM áà HTML ºðãºòãºëèéí ÿëãàà

Õóóäàñíû ãàð÷èã

ãàðñàí áàéäàë

Òîäîîð áè÷èãäñýí

òåêñò


Âýá äèçàéí

4

HTML áà HTM ºðòãºòãºë íü çàð÷ìûí õóâüä ÿëãààã¿é þì. Ó÷èð íü ºìíº

õýðýãëýãääýã áàéñàí ïðîãðàìóóä ºðãºòãºëèéí õýìæýýã 3 òýìäýãòýýð õÿçãààðëàæ

áàéñàí. Õàðèí îäîî ýíý õÿçãààðëàëò ¿ã¿é áîëñíîîð òà ºðãºòãºëèéã 4 òýìäýãòýýð

èëýðõèéëæ áîëíî.

HTML ýëåìåíòèéí êîä÷ëîë

HTML ýëåìåíò¿¿äèéã êîä÷èëäîã. (HTML tag) Êîäîî <> õààëòàíä áè÷äýã áà

èõýâ÷ëýí õîñîîð áè÷èãäýíý. Æèøýý íü : <b> áà </b> ãýõ ìýò. ¯¿íèéã ýõëýëèéí áà

òºãñãºëèéí êîä÷ëîë ãýæ íýðëýæ áîëíî. Êîäûã òîì áà æèæèã ¿ñãýýð àëèíààð ÷ áè÷èæ

áîëíî. Ãýâ÷ òàíä Äýëõèéí ñ¿ëæýýíèé Õîëáîî (W3C) HTML êîä÷ëîëûã æèæèã ¿ñãýýð

áè÷èõèéã ñàíàë áîëãîæ áàéíà. Ó÷èð íü äàðàà ¿åèéí HTML áè÷èãëýë íü òîì áà æèæèã

¿ñãèéã ÿëãààòàéãààð îéëãîõîîð õèéãäýæ áàéãàà áîëíî. HTML ýëåìåíòèéí êîä÷ëîë íü

òîäîðõîé øèíæ ÷àíàðûã (àòðèáóò) àãóóëñàí áàéæ áîëíî. Æèøýý íü: <body> êîä÷ëîëä

äýâñãýð ºíãº ãýñýí øèíæèéã íýìæ áîëíî. <body bgcolor = “blue”> ãýâýë õóóäàñíû

äýâñãýð ºíãº õºõººð ãàðíà. Ìºí õ¿ñíýãò <table> ãýñýí êîä÷ëîëä õ¿ñíýãòèéã õ¿ðýýã¿é

ãýæ çààâàë <table border=“0”> ãýæ ºãíº. Øèíæ ÷àíàðóóä íü íýð áà óòãààð

òîäîðõîéëîãäîíî. Êîä÷ëîëûí øèíæ ÷àíàð ýõëýëèéí êîä÷ëîëä áè÷èãääýã. Border

ãýäýã íü øèíæ ÷àíàðûí íýð, “0” ãýäýã íü óòãà íü áîëíî. Øèíæ ÷àíàðûí óòãûã

õààëòàíä áè÷èõ øààðäëàãàòàé áà èõýâ÷ëýí äàâõàð õààëòûã àøèãëàíà. Ãýâ÷ äàí

õààëò ìºí çºâøººðºãäºíº. Çàðèì òîõèîëäîëä óòãà íü ººðºº õààëò àãóóëæ áàéâàë

äàí õààëò õýðýãëýõ øààðäëàãàòàé.

Æèøýý íü: name = „George‟ „Mary‟ „Green‟

HTML áè÷èãëýëä ñóðàëöàõ õàìãèéí

õÿëáàð àðãà áîë æèøýýòýé òàíèëöàõ þì.

ÄÎÃÎË ÌªÐ ÒÎÄÎÐÕÎÉËÎÕ <P> ÊÎÄ×ËÎË

<html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>P êîä÷ëîë äîãîë ìºðèéã òîäîðõîéëíî.</p> </body> </html>

Çóðàã 3. <p> êîä÷ëîë

ÃÀÐ×ÈÃ ÒÎÄÎÐÕÎÉËÎÕ <H> ÊÎÄ×ËÎË



5

H êîä÷ëîë íü òåêñòèéí ãàð÷ãèéã òîäîðõîéëíî. H1, h2, h3, h4, h5, h6 ãýñýí óòãóóäòàé.

H1 íü ãàð÷ãèéí ¿ñãèéí õýìæýýã õàìãèéí òîìîîð, h6 ¿ñãèéí õýìæýýã æèæãýýð

õàðóóëíà.

<h1>Ãàð÷ãèéí õýìæýý h1 </h1>

<h2> Ãàð÷ãèéí õýìæýý h2</h2>


<h4> Ãàð÷ãèéí õýìæýý h4 </h4>



<h> êîä÷ëîëûã õàðóóëàõàä ãàð÷ãèéí

àðä áà ºìíº íü õîîñîí ìºð íýìýãääýã.

<p> ïàðàãðàô òîäîðõîéëîõ êîä÷ëîëûí

ºìíº áà àðä ìºí õîîñîí ìºð íýìýãääýã.

Çóðàã 4. <h>

êîä÷ëîë

ÌªÐ ØÈËÆÈÕ <BR> ÊÎÄ×ËÎË

<br> êîä÷ëîëîîð êóðñîðûã äàðààãèéí ìºð

ð¿¿ øèëæ¿¿ëäýã. Ãýõäýý øèíýýð äîãîë

ìºð ýõýëæ áàéíà ãýæ îéëãîæ áîëîõã¿é.

<br> íü òºãñãºëã¿é êîä÷ëîë ººðººð

õýëáýë ãàíöààðàà áè÷èãäýíý.

<p>Ýíý <br> áîë äî <br>ãîë ìºð áàéíà.

Ìºð <br>øèëæèëò àãóóëæýý.

Çóðàã 5. <br> êîä÷ëîë

HTML ÄÝÕ ÒÀÉËÁÀÐ <! >

Òàéëáàð áè÷èõ êîä÷ëîë íü HTML áè÷èãëýëä íýìýëò òàéëáàðûã îðóóëàõàä

àøèãëàãäàíà. Òàéëáàð ãýñýí ýíý êîä÷ëîë íü âýá õóóäñàíä õàðàãäàõã¿é. Çºâõºí òàíä

ººðèéí áè÷èãëýëèéã òàéëáàðëàõàä õýðýã áîëíî.

<! – Òàéëáàð -->


Âýá äèçàéí

6

Òàéëáàðûí ýõíèé õààëòûí àðä àíõààðëûí òýìäýã áè÷èãäýíý. Õàðèí ñ¿¿ëèéí õààëòûí

ºìíº ÿìàð íýã òýìäýã áàéõã¿é:

Òà HTML òåêñò áè÷èæ áàéõäàà òàíû âýá õóóäàñ õýðõýí õàðàãäàõûã á¿ðýí

ìýäýæ ÷àäàõã¿é. Çàðèì êîìïüþòåðèéí äýëãýö òîì, çàðèì íü æèæèã, ìºí õýðýãëýã÷ýýñ

öîíõíû õýìæýýã ººð÷èëæ õàðàõ áîëîìæòîé áàéäàã. Èéìýýñ òà ººðèéí áè÷èæ áàéãàà

òåêñòäýý õîîñîí çàé îðóóëàõ, ìºð íýìýõ çýðãýýð õýâæ¿¿ëýëò á¿¿ õèéãýýðýé. HTML

õîîñîí çàéã òîîöäîãã¿é. ªºðººð õýëáýë òà õýäýí ÷ õîîñîí çàé îðóóëñàí áà ò¿¿íèéã

çºâõºí 1 ãýæ ë òîîöíî. Ìºí øèíý ìºðººñ ýõýëñýí ÷ ò¿¿íèéã 1 õîîñîí çàé ãýæ ¿çíý.

Òýãâýë øèíý ìºðººñ ýõëýõèéí òóëä <p>, <br> ãýñýí êîä÷ëîëóóäûã àøèãëàæ áîëíî.

Ãýõäýý <br> êîä÷ëîëûã àøèãëàõûã çºâëºæ áàéíà. <p> êîä÷ëîëûã òºãñãºëèéí </p>

áè÷èëã¿é àøèãëàæ áîëîõûã òà àíçààðñàí áàéæ ìàãàäã¿é. Ãýõäýý òà ¿¿íä íàéäàõ

õýðýãã¿é. Äàðààãèéí ¿åèéí HTML õóâèëáàð òºãñãºëèéí êîä÷ëîëã¿é áàéõûã

çºâøººðºõã¿é. HTML çàðèì êîä÷ëîëûí ºìíº, çàðèìûí àðä õîîñîí ìºð àâäàã.

Áèäíèé ºìíº ¿çñýíýýð <p>, <h> êîä÷ëîëóóä õîîñîí ìºð àãóóëäàã.

<html> <body> <p> Ýíý äîãîë ìºð õýä õýäýí ìºðººñ òîãòîæ áàéíà. Ãýâ÷ âýá õóóäàñ õàðóóëàã÷ õýðýãñýë ¿¿íèéã õýðýãñýõã¿é. </p> <p> Ýíý äîãîë ìºð îëîí õîîñîí çàé àãóóëæ áàéíà. Ãýâ÷ âýá õóóäàñ õàðóóëàã÷ õýðýãñýë ¿¿íèéã õýðýãñýõã¿é. </p> <p> Äîãîë ìºð äýõ ìýäýýëýë õýäýí ìºðººð õàðàãäàõ íü öîíõíû Âýá ¿ç¿¿ëýã÷ ïðîãðàìûí öîíõíû õýìæýý ÿìàð áàéãààãààñ õàìààðíà </p> </body> </html>

Çóðàã 6. <p> êîä÷ëîë



7

Äàðààãèéí æèøýýíä äîãîë ìºð áà ìºð øèëæèëòèéí êîä÷ëîëûã õýðõýí àøèãëàõûã

õàðóóëæýý.

<html> <body> <p> Ìºð <br>øèëæ¿¿ëýõèéí<br>òóëä <br> br êîä÷ëîë <br>àøèãëààðàé.</p> <p> Ìèíèé õýíç õóðãà Ìàãíàé õàëçàí çóðâàñòàé Ìÿíãàí õîíèíû äóíäààñ Áè õàðìàãö òàíüäàã </p>

<p>Òàíû õýâæ¿¿ëýëòèéã õýðýãñýõã¿é áàéãààã õàðæ áàéíà óó!!</p>

</body> </html>

Çóðàã 7. <br> êîä÷ëîë

Òåêñòýí ìýäýýëëèéí ãàð÷ãèéã õýðõýí ãîëëóóëàõûã ¿çüå. Ìºí õýâòýý øóãàì çóðàõ <hr>

êîä÷ëîëòîé òàíèëöúÿ.

<html> <body> <!—Ýíýõ¿¿ òàéëáàð âýá õóóäñàíä õàðàãäàõã¿é--> <h1 align="center"> Ãàð÷èã h1.</h1> <p>Ýíý ãàð÷èã õóóäàñíû õóâüä ãîëëîæ ãàðíà. Ýíý ãàð÷èã õóóäàñíû õóâüä ãîëëîæ ãàðíà </p> <p> hr êîä÷ëîë õýâòýý øóãàì çóðäàã.</p>

<hr>

<p>Ýíý áîë äîãîë ìºð. </p>


Âýá äèçàéí

8

<hr><p>Ýíý áîë äîãîë ìºð. </p> <hr>

</body>

</html>

Çóðàã 8. <hr> êîä÷ëîë

Âýá õóóäàñíûäýâñãýð ºíãèéã <body> êîä÷ëîëä çààæ ºãíº. Äîîðõ æèøýýíä õóóäàñíû

äýâñãýð ºíãèéã øàðààð çààæ ºã÷ýý.

<html> <body bgcolor="yellow"> <h2>Äýâñãýð ºíãº ! </h2> </body> </html>

HTML áè÷èãëýëèéí ¿íäñýí êîä÷ëîëóóä

Êîä÷ëîë Òàéëáàð <html> HTML òåêñò ãýäãèéã òîäîðõîéëíî. <body> HTML òåêñòèéí ¿íäñýí õýñýã ãýäãèéã òîäîðõîéëíî. <h1> .. <h6> Ãàð÷ãèéã òîäîðõîéëíî. <p> Äîãîë ìºðèéã òîäîðõîéëíî. <br> Ìºð øèëæèëò õèéíý. <hr> Õýâòýý øóãàì çóðíà. <!--> Òàéëáàð òîäîðõîéëíî.

Òåêñòèéã õýâæ¿¿ëýõ

HTML êîä÷ëîëîîð òåêñòèéã õýðõýí õýâæ¿¿ëäýãòýé òàíèëöúÿ. ¯¿íä <small>,

<big>, <b>, <i> ãýõ çýðýã êîä÷ëîëóóäûã àøèãëàíà.

<html> <body> <b> b êîä÷ëîë òîäîîð áè÷íý.</b> <strong> Ýíý áîë strong êîä÷ëîë. </strong> <br> <big>big êîä÷ëîë ¿ñãèéí õýìæýýã òîìîîð áè÷íý.</big> <br><em> em òýìäýãëýãýý </em> <br> <i> Íàëóó òåêñò </i> <br> <small> Æèæãýýð áè÷íý.</small> <br>Ýíý òåêñò <sub> subscript </sub> òýìäýãëýãýý <br>Ýíý òåêñò <sup>superscript </sup>òýìäýãëýãýý </body> </html>


http://www.w3schools.com/html/html_reference.asp


9

Çóðàã 9. Õýâæ¿¿ëýõ êîä÷ëîëóóä

Äîîð ¿ç¿¿ëýõ æèøýýãýýð õîîñîí çàé, ìºðèéã õýðõýí õàðóóëæ áîëîõûã ¿ç¿¿ëëýý. ¯¿íä

<pre> êîä÷ëîë àøèãëàíà. Ýíý íü êîä÷ëîëûí õîîðîíä áè÷ñýí çàé, õîîñîí ìºðèéã òýð

õýâýýð õàðóóëäàã.

<html> <body> <pre> Ýíý òýìäýãëýãýý Ìºð áà òýìäýãò õîîðîíäûí çàéã òîõèðóóëíà. </pre> <p> pre êîä÷ëîë ïðîãðàìûí êîä õàðóóëàõàä òîõèðîìæòîé. </p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>

Çóðàã 10. <pre> êîä÷ëîë

Êîìïüþòåðèéí ïðîãðàìûí êîä ãàðãàõàä çîðèóëàãäñàí êîä÷ëîëóóä

<html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var><br> <p> <b> Ïðîãðàìûí êîä áè÷èõýä õýðýãëýãäýíý. </b> </p> </body> </html>


Âýá äèçàéí

10

Çóðàã 11. Ïðîãðàìûí êîä ãàðãàõ êîä÷ëîëóóä

HTML áàðèìòàíä õàÿãèéã õýðõýí áè÷èõèéã ¿çüå.

<html> <body> <address> Øóóäàíãèéí õàéðöàã <br> No 313<br> Óëààíáààòàð -49 <br> Ìîíãîë </address> </body> </html>

Çóðàã 12.

<address> êîä÷ëîë

Òåêñòèéã õýðõýí òîâ÷ëîí õàðóóëàõ,

ìºí ò¿¿íèéã äýëãýðýíã¿é õàðóóëàõûã ¿çüå.

Òîâ÷ëîí ãàðñàí ¿ã äýýð õóëãàíû çààã÷èéã

áàéðëóóëàõàä äýëãýðýíã¿é áàéäëààðàà

ãàðíà. Ýíý êîä÷ëîë íü Internet Explore 5.0

áà Netscape 6.2 äýýø õóâèëáàðò ãàðíà.



11

Çóðàã 13. <abbr>, <acronym> êîä÷ëîë

<html> <body> <abbr title=" UN "> United Nations </abbr> <br> <acronym title="World Wide Web">WWW</acronym> <p>Õóëãàíû çààã÷èéã äýýðõ ¿ã äýýð áàéðëóóë. Èíãýõýä äýëãýðýíã¿é áàéäëààð õàðàãäàíà.</p> </body> </html>

Òåêñòèéí áè÷èõ ÷èãëýëòýé àæèëëàõ êîä÷ëîë.

<rtl> øèíæ ÷àíàð íü òåêñòèéã áàðóóí

òàëààñ íü ç¿¿í òèéø õºðâ¿¿ëýí

õàðóóëíà.

<html> <body> <p> Õýðýâ òàíû browser õî¸ð ÷èãëýëò áîë Òà äîîðõ ¿ãèéã áàðóóíààñ ç¿¿í, óðâóóãààð íü õàðàõ áîëíî. (rtl <=> right to left) </p> <bdo dir="rtl">Óðâóóãààð õàðàãäàíà. </bdo> </body> </html> Çóðàã 14. <bdo> êîä÷ëîë

Óñòãàãäñàí áîëîí îðóóëãà õèéñýí òåêñòèéã ÿëãàí õàðóóëàõ êîä÷ëîë.

<html> <body> <p> Òåêñòèéã õýðõýí ÿëãàæ õàðóóëàõ âý ?<br> <del>Äýýã¿¿ð çóðàãäàæ õàðàãäàíà.</del> <! Óñòãàãäñàí òåêñò> <br> <ins>Äîîãóóð çóðàãäàæ õàðàãäàíà.</ins> <! Îðóóëãà õèéñýí òåêñò> </p> <p> Ýíý êîäîíä <br>-íü Enter òîâ÷íû ¿¿ðãèéã ã¿éöýòãýæ áàéíà. </p> </body> </html>


Âýá äèçàéí

12

Çóðàã 15. <del>, <ins> êîä÷ëîë

Òåêñòèéí ïàðàãðàôûí çýðýãö¿¿ëýëòèéí êîä÷ëîë.

<html> <body> Èøëýëèéã blockqoute êîä÷èëîëîîð õàðóóëàõàä òîõèðîìæòîé. <blockquote> Á¿ãäèéã ïðîãðàìì÷ëàÿ ! Á¿ãäèéã ïðîãðàìì÷ëàÿ ! Á¿ãäèéã ïðîãðàìì÷ëàÿ ! Á¿ãäèéã ïðîãðàìì÷ëàÿ ! </blockquote> <p> Block quote íü øèíý ìºð, çàé àâ÷ òåêñòèéã áàéðëóóëäàã. </p> </body> </html>

Çóðàã 16. <blockquote> êîä÷ëîë

<blockquote> êîä÷ëîëûí õîîðîíä áè÷èãäñýí òåêñòèéã äîãîë ìºðººñ ýõëýí áè÷äýã.

Âýá õóóäàñíû HTML êîäûã õýðõýí õàðæ áîëîõ âý?



13

Òà ÿìàð íýã âýá õóóäàñ ¿çýæ ñóóõäàà ¿¿íèéã ÿàæ õèéñýí áàéíàà ãýæ ãàéõàæ

áàéñàí óó. Òýãâýë òà View öýñèéí SOURCE, ýñâýë PAGE SOURCE ãýäýã êîìàíäààð

âýá õóóäàñíû <html> êîä÷ëîëûã õàðæ áîëíî.

Òåêñò õýâæ¿¿ëýõ êîä÷ëîëóóä

Êîìïüþòåðèéí ãàðãàëòûí êîä÷ëîë

Êîä÷ëîë Òàéëáàð

<code> Êîìïüþòåðèéí êîä áàéäëààð áè÷èõ

<kbd> Ãàðíû êîä áàéäëààð áè÷èõ

<samp> Êîìïüþòåðèéí êîä áàéäëààð áè÷èõ

<tt> Teletype õýëáýðýýð áè÷èõ

<var> Õóâüñàã÷ áàéäëààð áè÷èõ

<pre> Áè÷èãäñýí õýëáýðèéã øóóä áàéäëààð áè÷èõ

<listing> <pre> -èéí îðîíä õýðýãëýæ áîëíî

<plaintext> <pre> -èéí îðîíä õýðýãëýæ áîëíî

<xmp> <pre> -èéí îðîíä õýðýãëýæ áîëíî

Òîâ÷ëîë, èøëýë áè÷èõ êîä÷ëîëóóä


<abbr> Áîãèíîñãîæ áè÷èõ

<acronym> Òîâ÷èëñîí ¿ãèéã áè÷èõ

<address> Õàÿã áè÷èõ

<bdo> Áè÷èãëýëèéí ÷èãëýëèéã òîõèðóóëàõ


<b> Òîäîîð áè÷èõ

<big> Òîìîîð áè÷èõ

<em> Òîäðóóëãàòàé áè÷èõ

<i> Íàëóóãààð áè÷èõ

<small> Æèæãýýð áè÷èõ

<strong> Òîäðóóëãàòàé áè÷èõ

<sub> Äîîø øèëæ¿¿ëæ æèæãýýð áè÷èõ

<sup> Äýýø øèëæ¿¿ëæ æèæãýýð áè÷èõ

<ins> Äîîãóóð íü çóðàõ

<del> Äýýã¿¿ð íü äàðæ çóðàõ

<s> <del> -èéí îðîíä õýðýãëýæ áîëíî

<strike> <del> -èéí îðîíä õýðýãëýæ áîëíî

<u> <strike> -èéí îðîíä õýðýãëýæ áîëíî

























Âýá äèçàéí

14

<blockquote> Óðò èøëýëèéã áè÷èõ

<q> Áîãèíî èøëýëèéã áè÷èõ

<cite> Èø áàðèìò õàðóóëàõ (íàëóóãààð)

<dfn> Òîä áàéäëààð õàðóóëàõ (íàëóóãààð)

HTML êîä÷ëîë äàõü òýìäýãò¿¿ä

HTML êîä÷ëîëûí ¿íäñýí òýìäýãò íü „<‟, ‟>‟ áºãººä ýäãýýð äîòîð òåêñò áè÷èæ

áîëäîãã¿é. Çàðèì òýìäýãò¿¿ä HTML êîä÷ëîëä òóñãàé óòãàòàé áàéäàã, æèøýý íü „<‟

òýìäýãò íü ýõëýëèéí HTML êîä÷ëîëûã òîäîðõîéëäîã. Áèä ýíý òýìäýãòèéã õóóäàñ

äýýðýý õàðóóëàõûí òóëä HTML êîäîíä çààñàí òóñãàé òýìäýãòýýð èëýðõèéëíý. Òóñãàé

òýìäýãò¿¿ä íü ãóðâàí õýñýãòýé : íýð (&), äóãààð (#), òºãñãºë ( ;). Æèøýý íü: < òýìäãèéã

õàðóóëàõûí òóëä HTML êîä÷ëîëä < ýñâýë < ãýæ áè÷èõ õýðýãòýé. Ìºí íýðýýð

áè÷èæ áîëíî. < less than. Íýðýýð áè÷èõ íü òîãòîîõîä õÿëáàð áîëîâ÷ ýíý íü öààíàà

äóãààðûí õºðâ¿¿ëýëòýä îðäîã. Èéìä äóãààð áè÷ñýí íü èë¿¿ çîõèìæòîé.

Õîîñîí çàé

Åðäèéí áàéäëààð 10 øèðõýã çàé àâñàí ÷ âýá õóóäàñ õàðóóëàã÷ ïðîãðàì ¿¿íèéã

íýã ë çàé àâñàí ìýò õàðàãäóóëíà. Ýíý íü åðäºº õî¸ð ¿ãèéã òóñãààðëàñàí ë ãýñýí ¿ã,

õàðèí òà æèíõýíý óòãààð çàé àâàõûã õ¿ñâýë ãýñýí òýìäýãòèéã êîäîíäîî

áè÷ýýðýé.

ªðãºí õýðýãëýãääýã òýìäýãòèéí òîäîðõîéëîëòóóä

¯ð ä¿í Òàéëáàð Êîä (íýðýýð) Êîä (äóãààðààð)

Õîîñîí çàé

< áàãûí òýìäýã < <

> èõèéí òýìäýã > >

& And & &

“ èøëýëèéí òýìäýã " "

„ Íýã õàøèëò '

Çàðèì îíöãîé òýìäýãò¿¿ä:

¯ð ä¿í Òàéëáàð Êîä (íýðýýð) Êîä (äóãààðààð)

¢ Öåíò ¢ ¢

£ Ïàóíä £ £

¥ Èåí ¥ ¥

§ õýñãèéí òýìäýãëýãýý § §







15

© çîõèîã÷èéí ýðõ © ©

® ôèðìèéí òýìäýãëýãýý ® ®

× ¿ðæèõ × ×

÷ õóâààõ ÷ ÷

Õîëáîëò õèéõ HTML êîä÷ëîëóóä

<a> ãýñýí êîä÷ëîëîîð ººð âýá õóóäàñ ðóó øèëæèõ õîëáîëòûã õèéäýã. Ýíýõ¿¿

<a> êîä÷ëîëîîð Âýá õóóäàñ äýýðõ á¿õ òºðëèéí õîëáîëò õèéæ áîëíî. Æèøýý íü:

HTML õóóäàñ, õºäºëãººíò ä¿ðñ, äóóíû ôàéë, êèíî çýðýã ð¿¿ õîëáîãäîæ áîëíî.

<a> Êîä÷ëîë áè÷èõ ä¿ðýì : <a href="Òàíû õàÿã">¯¿íäýýð äàðâàë õîëáîãäîíî</a>

<a> êîä÷ëîë õîëáîëò ¿¿ñãýæ, href õýñãèéí àðä áè÷èãäñýí õàÿãòàé õîëáîãäîíî. <a>

ýõëýëèéí êîä÷ëîë áà </a> òºãñãºëèéí êîä÷ëîëûí õîîðîíä áè÷èãäñýí òýìäýãò¿¿äèéã

õîëáîëò õèéõ òýìäýãò (hyperlink) ãýõ áà ãýõ áà åðäèéí òåêñòýýñ ÿëãààòàé. Õýðýâ òà óã

òåêñò äýýð õóëãàíû çààã÷èéã áàéðëóóëàí òîâøèëò õèéâýë áè÷èãäñýí õàÿã ðóó

õîëáîãääîã.

Æèøýý íü: www.yahoo.com ãýñýí õàÿã ðóó õîëáîãäîõ <a> êîä÷ëîëûã áè÷âýë: <a

href="http://www.yahoo.com/">Yahoo-ðóó îðîõ</a>

Äýýðõ HTML êîä âýá õóóäñàà õàðóóëàõ ïðîãðàìààð óíøèãäàí äîîðõè áàéäëààð

õàðàãäàíà: Yahoo-ðóó îðîõ

<a> êîä÷ëîëûí target øèíæ ÷àíàð

Òà <a> êîä÷ëîëîîð õîëáîãäñîí õóóäàñ õààíà íýýãäýõèéã target øèíæ

÷àíàðààð òîäîðõîéëæ áîëíî. Æèøýý íü: target = “_blank” ãýæ çààâàë õîëáîãäñîí

õóóäñûã øèíý öîíõîíä õàðóóëíà.

<a href=http://www.csms.edu.mn/ target="_blank"> Ìàíàé ñóðãóóëü </a>

<a> êîä÷ëîëûí name øèíæ ÷àíàð

name øèíæ ÷àíàð íü òåêñòèéí õýñýãò íýð ºãººä òýð õýñýã ð¿¿ øèëæèõýä

õýðýãëýãäýíý. ¯¿íèé òóñëàìæòàé òàíû âýá õóóäñûã ¿çýæ ñóóãàà õ¿í òîäîðõîéëñîí

òåêñòèéí õýñýã ð¿¿ øóóä øèëæèõ áîëîìæòîé.

Äîîðõ õýëáýðýýð êîäîëíî: <a name="ºãºãäñºí íýð">Äýëãýöýíä õàðàãäàõ òåêñò</a>


http://www.csms.edu.mn/

Âýá äèçàéí

16

<a name="tips">Ñîíèðõîëòîé õýñýã</a>

Äýýðõè êîä÷ëîëóóä íü òåêñòýä íýð ºã÷ áàéíà. Îäîî òýð õýñýã ð¿¿ øèëæèõ õîëáîëò

õýðõýí õèéõèéã ¿çüå.

<a href="http://www.yahoo.com/html_links.asp#tips"> Tip õýñýã ð¿¿ ¿ñðýõ</a>

Ýíý íü yahoo.com ãýñýí õàÿãíû html_links.asp ôàéëûí tips ãýæ çààñàí íýð á¿õèé òåêñò

ð¿¿ øèëæèíý. Name øèíæ ÷àíàðûã èõýâ÷ëýí èõ õýìæýýíèé òåêñòýí ìýäýýëýëòýé ¿åä

àøèãëàõàä çîõèìæòîé. Óã õîëáîëòîîð òåêñòèéí ýõíýýñ øóóä òºãñãºë äýõ ìýäýýëýë

ð¿¿ øèëæèõ áîëîìæ îëãîäîã. Âýá õóóäàñ õàðóóëàõ ïðîãðàì íü õîëáîëòûí òåêñò äýýð

äàðààä name øèíæ ÷àíàðûí àâñàí óòãààð õàéæ õýðâýý îëäâîë óã íýð ºãºãäñºí

òåêñòýý äýëãýöèéí ýõýíä ãàðãàäàã, îëäîõã¿é ¿åä ÿìàð íýãýí àëäààíû ìýäýýëýë

ãàðãàäàãã¿é.

Äîîðõè æèøýýíä ººð õóóäàñ ðóó õîëáîãäîãäîõäîî óã õóóäñàà øèíý öîíõîí äýýð

õàðóóëàõ áîëíî. Èíãýñíýýð òàíû Âýá õóóäàñ õààãäàëã¿é õýðýãëýã÷èä õàðàãäñààð

áàéõ áîëíî.

<html> <body> <a href="http://www.yahoo.com/ " target="_blank"> Yahoo </a> <p> Õýðýâ òà target ãýñýí øèíæ ÷àíàðò _blank óòãà îëãîñîí áîë Yahoo ãýñýí ¿ã äýýðýý òîâø. Èíãýõýä yahoo øèíý öîíõîí äýýð ãàð÷ èðýõ áîëíî. </p> </body> </html>

Çóðàã 17. <a> õîëáîëò target øèíæ ÷àíàð

Ýíý æèøýýãýýð Âýá õóóäàñ äîòðîî íýð ºãºãäñºí õýñýã ð¿¿ õýðõýí øèëæèõèéã ¿çüå.

<html> <body> <p> <a href="#C4"> 4-ð á¿ëãèéã õàðàõ </a>

<! Äîîð íýð ºãñºí õýñýã ð¿¿ øèëæèëò õèéíý.> </p> <h2>Á¿ëýã 1</h2> <p>Web õèéöãýýå !</p> <h2>Á¿ëýã 2</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 3</h2> <p> Web õèéöãýýå !</p> <a name="C4"> <h2> Á¿ëýã 4</h2></a>

<! Á¿ëýã 4 ãýñýí òåêñòèéí õýñýãò íýð ºã÷ áàéãàà íü> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 5</h2> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 6</h2> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 7</h2> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 8</h2>



17

<p> Web õèéöãýýå !</p> <h2>Á¿ëýã 9</h2> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 10</h2> <p> Web õèéöãýýå !</p> <h2>Á¿ëýã 11</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 12</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 13</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 14</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 15</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 16</h2> <p> Web õèéöãýýå !</p> <h2> Á¿ëýã 17</h2> <p> Web õèéöãýýå !</p> </body> </html>

Ýíý æèøýýãýýð ýëåêòðîí øóóäàíãèéí õàÿãòàé ÿàæ õîëáîãäîõûã ¿çüå .

<html>

<body>

<p> Ýíý áîë mail õîëáîëò:

<a href="mailto:[email protected]?subject=Sain%20uu?">Øóóäàí

èëãýýõ</a>

</p>

<p> <b>Àíõààð !</b><br> %20-

íü ¿ãí¿¿äèéí õîîðîíäîõ çàéã

òîäîðõîéëíî. Õýðýâ òà

Øóóäàí èëãýýõ ãýñýí ¿ã äýýð

äàðâàë çàõèà áè÷èõ öîíõ ãàð÷,

subject õýñýãò Sain uu? ãýæ

ãàðíà. Ýíý íü %20-ã õîîñîí

çàé áîëãîñîí áàéíà. </p>

</body>

</html>

Çóðàã 18. mailto õîëáîëò

Ýíä mailto õîëáîëòûí ººð íýã æèøýý ¿çüå.

<html> <body> <p> mailto õîëáîëòûí ººð íýã æèøýý: <a href ="mailto:[email protected]? [email protected]& [email protected]& subject=Summer%20Party& body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a> </p> <p> <b>Àíõààð !</b><br> %20-íü ¿ãí¿¿äèéí õîîðîíäîõ çàéã òîäîðõîéëíî. </p> </body>


Âýá äèçàéí

18

</html>

Çóðàã 19. mailto õîëáîëòûí æèøýý

Äýýðõ æèøýýíä ¿ç¿¿ëñíýýð Send mail ãýäýã ¿ã äýýð òîâøèõîä çàõèà áè÷èõ öîíõ ãàðàõ

áà TO: õýñãèéí àðä [email protected] ãýñýí õàÿã áè÷èãäýõ áà CC: õýñãèéí àðä

[email protected] BCC: [email protected] SUBJECT:

õýñãèéí àðä Summer Party ãýæ áè÷èãäýõ áà Çàõèà áè÷èõ õýñýãò You are invited to a

big summer party! ãýñýí ìýäýýëýë ãàðñàí áàéíà.

Frame êîä÷ëîë

Frame êîä÷ëîë àøèãëàñíààð òà íýãýýñ îëîí õóóäñûã íýãýí çýðýã õàðàõ

áîëîìæòîé áîëíî. HTML õóóäñóóä íü FRAME ãýæ íýðëýãäýõ õýñýã á¿ðò ãàðíà. Frame

á¿ð íü áèåý äààñàí ººð ººð ôàéëóóä áàéíà.

Frameset êîä÷ëîë

<frameset> êîä÷ëîë íü äýëãýöýíä õýäýí õóóäàñ õàðàãäàõûã òîõèðóóëäàã.

Frameset êîä÷ëîëä ìºð, áàãàíûí òîîã õóâüñàã÷ààð çààíà.

Õóâüñàã÷èéí íýð íü : rows, cols ãýæ áàéíà.

Äîîð áè÷ñýí æèøýýãýýð frameset êîä÷ëîë õî¸ð áàãàíà ¿¿ñãýæ áàéíà. Ýõíèé áàãàíà íü

öîíõíû 25%, íºãººõ íü 75% ýçëýíý. "frame_a.htm" ôàéë íü ýõíèé áàãàíàä,

"frame_b.htm" ôàéë íü õî¸ð äàõü áàãàíàä òóñ òóñ ãàðíà.

<frameset cols="25%,75%">


mailto:[email protected]


19

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

Òà õóëãàíû çààã÷èéã áàãàíû õîîðîíäîõ çóðààñ äýýð áàéðëóóëàí áàãàíû õýìæýýã

ººð÷ëººä ¿ç. Õýðýâ òà äýýðõ æèøýýíèé êîäûã áè÷ñýí áîë õýìæýý íü ººð÷ëºãäºæ

áàéãàà áèç. Õýðýãëýã÷ýýñ òàíû õóâààñàí õ¿ðýýíèé õýìæýýã ººð÷ë¿¿ëýõã¿é áàéëãàõûí

òóëä <frame> êîäîä íýìýëò áè÷èëò õèéíý .

<frame src="frame_a.htm" noresize="true" >

Õýðýâ òà õ¿ðýý õýðýãëýõèéã õ¿ñýõã¿é áàéãàà áîë <noframes> êîä íýìýýðýé. Èíãýõýä

âýá õóóäàñ õàðóóëàã÷ ïðîãðàì frame êîä÷ëîë õ¿ëýýæ àâàõã¿é.

Ýíý æèøýýãýýð õýðõýí ãóðâàí áàãàíàä õóóäñóóäûã ¿ç¿¿ëæ áîëîõûã õàðæ áîëíî.

<html> <frameset cols="25%,50%,25%"> <frame src="file:///c|/sw102Stud/frame_a.html"> <frame src=" file:///c|/sw102Stud/frame_b.htm"> <frame src=" file:///c|/sw102Stud/frame_c.htm"> </frameset> </html>

Çóðàã 20. 3 áàãàíàä õóâààãäñàí áàéãàà íü

Frame_a.html ôàéëûí àãóóëãà.

<html> <head> </head> <body> À áàãàíà <br> À áàãàíà <br> À áàãàíà <br>


Âýá äèçàéí

20

À áàãàíà <br> À áàãàíà <br> </body> </html>

Ýíý æèøýýãýýð õýðõýí ãóðâàí ìºðºíä õóóäñóóäûã ¿ç¿¿ëæ áîëîõûã õàðæ áîëíî.

<html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> Çóðàã 21. 3 ìºðºíä õàðàãäàæ áàéãàà íü

Ýíý æèøýýãýýð õýðõýí <noframe> êîä÷ëîë õýðýãëýõèéã õàðóóëíà.

<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body>Òàíû âýá õàðóóëàã÷ ïðîãðàì Frame êîä÷ëîëûã õ¿ëýýæ àâàõã¿é áàéíà.! </body> </noframes> </frameset> </html>

Äîîðõ æèøýýãýýð ãóðâàí ôàéëûã õýðõýí ìºð áàãàíà õîñëóóëàí õóâààæ Frame

àøèãëàí õàðóóëàõûã ¿çüå.

<html>  <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html>


21

Çóðàã 22. Ìºð áàãàíûã çýðýã àøèãëàñàí íü.

<noresize> êîä÷ëîë õýðýãëýâýë õ¿ðýýíèé õýìæýýã ººð÷èëæ ÷àäàõã¿é.

<html> <frameset rows="50%,50%"> <frame noresize="true" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="true" src="frame_b.htm"> <frame noresize="true" src="frame_c.htm"> </frameset> </frameset> </html>

Navigation frame ãýæ íýðëýãäýõ õ¿ðýýã õýðõýí àøèãëàõûã ¿çüå. Ýíý íü 2 õ¿ðýýíýýñ

òîãòîõ áà ýõíèé frame íü õîëáîëò õèéãäýõ òåêñò¿¿äèéã àãóóëíà. Õàðèí 2 äàõü frame

äýýð õîëáîëòóóä ãàð÷ èðæ áàéõ þì. Òà contents.html ôàéëä äîîðõ êîäûã áè÷ýýðýé:

<html> <head> </head> <body> <a href ="frame_a.html" target ="showframe">Frame a </a><br> <a href ="frame_b.hlml" target ="showframe">Frame b </a><br> <a href ="frame_c.html" target ="showframe">Frame c </a> </body> </html>

target õýñýãò õîëáîãäîõ õóóäàñ õààíà ãàðàõûã çààíà. Frame.html ôàéëä äîîðõ êîäûã

áè÷ýýðýé.

<html> <frameset cols="120,*"> <frame src="contents.html"> <frame src="frame_a.html" name="showframe"> </frameset> </html>


Âýá äèçàéí

22

Âýá õàðóóëàã÷ ïðîãðàì äýýðýý frame.html ôàéëàà íýýæ àæèëëóóëààðàé. Èíãýõýä äàðààõ áàéäëààð õàðàãäàíà.

Çóðàã 23. frame õîëáîëò õèéæ áàéãàà íü

Ìºí iframe àøèãëàæ áîëíî. Ýíý íü frame àøèãëàñíààñ þóãààð ÿëãààòàéã õàðúÿ.

<html> <body> <iframe src ="frame_a.html"> </iframe> <p>frame_a íýðòýé HTML ôàéë äàõü àãóóëãà òàíû ýíý Web äýýð ãàðíà.</p> </body> </html>

Çóðàã 24. iframe àøèãëàæ áàéãàà íü



23

Iframe àøèãëàæ ãàðñàí õóóäñûí àãóóëãûã çºâõºí ã¿éëãýõ ìºðèéí (scrollbar)

òóñëàìæòàé õàðæ áîëîõ þì.

Frame àøèãëàí õóóäàñíû íýðëýãäñýí õýñãèéã õýðõýí õàðóóëàõûã ¿çüå. Äîîðõ êîäûã

frame.html ôàéëä áè÷íý.

<html> <frameset cols="20%,80%"> <frame src="frame_a.html"> <frame src="link.html#C10"> </frameset> </html>

frame_a.html ôàéëä äîîðõ êîäûã áè÷ýýðýé.

<html> <body> <p> A áàãàíà<br> A áàãàíà<br> A áàãàíà<br> A áàãàíà<br> A áàãàíà<br> </p> </body> </html>

link.html ôàéëä äîîðõ êîäûã áè÷ýýðýé.

<html> <body> <a name="C1"><h2> Á¿ëýã 1</h2> <p>Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà. </p> <a name="C2"><h2>Á¿ëýã 2</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C3"><h2>Á¿ëýã 3</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C4"><h2>Á¿ëýã 4</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C5"><h2>Á¿ëýã 5</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C6"><h2>Á¿ëýã 6</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C7"><h2>Á¿ëýã 7</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C8"><h2>Á¿ëýã 8</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C9"><h2>Á¿ëýã 9</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C10"><h2>Á¿ëýã 10</h2></a> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà . </p> <a name="C11"><h2>Á¿ëýã 11</h2> <p> Ýíý á¿ëýã íü äîîðõè ç¿éëèéã òàéëáàðëàíà. </p> </body> </html>


Âýá äèçàéí

24

Çóðàã 25. name òîäîðõîéëîãäñîí õýñãèéã õàðóóëæ áàéãàà íü

Õ¿ðýý àøèãëàæ áàéãààä õ¿ðýýã¿é öîíõîíä ãàðãàõäàà target = “_top” êîä÷ëîë

àøèãëàíà.

<html> <body> <p>Õ¿ðýýòýé öîíõîíä áàéíà óó ?</p> <a href="http://www.w3schools.com/"target="_top">Ýíä äàð ! !</a> </body> </html>

Frame êîä÷ëîë


<frameset> Frame õóâààõ òîõèðãîî õèéíý.

<frame> Õ¿ðýýã õàðóóëíà.

<noframes> Õ¿ðýýã õàðóóëàõã¿é.

<iframe> Öîíõûã õóâààëã¿éãýýð õ¿ðýýã õàðóóëíà.

HTML - Õ¿ñíýãò

Õ¿ñíýãòèéã <table> êîä÷ëîëîîð òîäîðõîéëäîã áà ìºð¿¿äýýñ á¿ðäýíý. Ìºðèéã

<tr> êîä÷ëîëîîð òîäîðõîéëíî. Ìºð á¿õýí ºãºãäºë àãóóëàõ õýñã¿¿äýýñ òîãòîíî. ¯¿íèéã

<td> êîä÷ëîëîîð òîäîðõîéëäîã. Ýíý õýñýãò

òåêñò, çóðàã ãýõ ìýò á¿õ òºðëèéí

ºãºãäëèéã îðóóëæ áîëíî.







25

<table border="1"> <tr> <td> ìºð 1, í¿ä 1</td> <td>ìºð 1, í¿ä 2</td> </tr> <tr> <td>ìºð 2, í¿ä 1</td> <td>ìºð 2, í¿ä 2</td> </tr> </table>

Çóðàã 26. <table> êîä÷ëîë

Õ¿ñíýãò áîëîí ò¿¿íèé øèíæ ÷àíàðûã òîäîðõîéëîõ

Õ¿ñíýãòèéí õ¿ðýýã õàðàãäóóëàõûí òóëä border øèíæ ÷àíàðò óòãà ºãíº.

Border òîäîðõîéëîãäîîã¿é, ýñâýë 0 ãýæ òîäîðõîéëîãäñîí áàéâàë õ¿ñíýãò õ¿ðýýã¿é

õàðàãäàíà.

Õ¿ñíýãòèéí òîëãîéã <th> êîä÷ëîëîîð òîäîðõîéëäîã.

<html> </body> <table border="1"> <tr> <th>Õ¿ñíýãòèéí òîëãîé </th> <th>õ¿ñíýãòèéí òîëãîé</th> </tr> <tr> <td>ìºð 1, í¿ä 1</td> <td>ìºð 1, í¿ä 2</td> </tr> <tr> <td>ìºð 2, í¿ä 1</td> <td>ìºð 2, í¿ä 2</td> </tr> </table> </body> </html>

Çóðàã 27. <th> êîä÷ëîë

Õ¿ñíýãò äàõü õîîñîí ºãºãäºë

<table border="1"> <tr> <td>ìºð 1,í¿ä 1</td> <td>ìºð 1, í¿äl 2</td> </tr> <tr> <td>ìºð 2, í¿ä 1</td> <td></td>


Âýá äèçàéí

26

</tr>

</table>

Òà øóóä <td></td>-èéí îðîíä <td> </td> ãýæ õýðýãëýæ áîëíî.

<table border="1"> <tr> <td>ìºð 1,í¿ä 1</td> <td>ìºð 1, í¿äl 2</td> </tr> <tr> <td>ìºð 2, í¿ä 1</td> <td> </td> </tr> </table>

Çóðàã

28. àøèãëàñàí íü

<thead>, <tbody> áîëîí <tfoot> íü âýá õàðóóëàã÷ ïðîãðàìûí äîîä õóâèëáàðóóäàä

õààÿà õýðýãëýãääýã. Õ¿ñíýãò õýðõýí ¿¿ñãýõèéã ¿çüå.

<html> <body> <p> Õ¿ñíýãò á¿ð table êîä÷ëîëîîð ýõýëäýã. Ìºð á¿ð tr êîä÷ëîë àøèãëàíà. Õ¿ñíýãòèéí ºãºãäºë á¿ð td êîä÷ëîëîîð çààãäàíà. </p> <h4>Íýã ìºð: </h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>Íýã ìºð, ãóðâàí áàãàíà:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Õî¸ð ìºð ãóðâàí áàãàíà:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>



27

</html>

Çóðàã 29. Õ¿ñíýãò ¿¿ñãýñýí íü

Õ¿ñíýãòèéí õ¿ðýýã ººð÷ëºõ æèøýý.

<html> <body> <h4>Åðäèéí õ¿ðýýòýé:</h4> <table border="1"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4>Çóçààí õ¿ðýýòýé:</h4> <table border="8"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4>Èë¿¿ çóçààí õ¿ðýý:</h4> <table border="15"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> </body> </html>

Çóðàã 30. Õ¿ðýýíä ººð÷ëºëò õèéñýí íü

Õ¿ðýýã¿é õ¿ñíýãòèéí æèøýý.

<html> <body>


Âýá äèçàéí

28

<h4>Ýíý õ¿ñíýãò õ¿ðýýã¿é áàéíà:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td></tr> </table> <h4>Ìºí ýíý õ¿ñíýãò ÷ õ¿ðýýã¿é:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

Çóðàã 31. Õ¿ðýýã¿é õ¿ñíýãò

Õ¿ñíýãòèéí òîëãîéã õàðóóëàõ æèøýý.

<html> <body> <h4>Õ¿ñíýãòèéí òîëãîéíóóä:</h4> <table border="1"> <tr> <th>Íýð</th> <th>Óòàñ</th> <th>Óòàñ</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4> Õ¿ñíýãòèéí òîëãîéíóóä:</h4> <table border="1"> <tr> <th>Íýð:</th> <td>Bill Gates</td> </tr> <tr> <th>Óòàñ:</th> <td>555 77 854</td>



29

</tr> <tr> <th>Óòàñ:</th> <td>555 77 855</td> </tr> </table> </body> Çóðàã 32. Õ¿ñíýãòèéí òîëãîéíóóä </html>

Õîîñîí çàéã õýðõýí õàðóóëàõ âý ?

<html> <body> <table border="1"> <tr> <td>ªãºãäºë</td> <td>ªãºãäºë</td> </tr> <tr> <td> </td> <td></td></tr> </table> <p>Õîîñîí í¿ä õ¿ðýýã¿é áàéãàà áîë ò¿¿íä ÿìàð ÷ ºãºãäºë áàéõã¿é. </p> <p>Õîîñîí í¿ä õ¿ðýýòýé áàéãàà áîë ò¿¿íä õîîñîí òýìäýãò áàéíà. Õîîñîí òýìäýãòèéã HTML -ýýð àâäàã. &-ýõëýëèéí, nbsp-íü òýìäýãòèéã, ;-íü òºãñãºëèéã òîäîðõîéëíî. </p> </body> </html>

Çóðàã 33. Õîîñîí

çàéã õàðóóëàõ

Õ¿ñíýãòèéí ãàð÷ãèéã õàðóóëàõ.

<html> <body> <h4>Ýíý õ¿ñíýãò ãàð÷èã áîëîí ºðãºí õ¿ðýýòýé. </h4>


Âýá äèçàéí

30

<table border="6"> <caption>Õ¿ñíýãòèéí ãàð÷èã </caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body></html>

Çóðàã 34. Õ¿ñíýãòèéí ãàð÷èã õàðóóëàõ

Íýãýýñ îëîí ìºð áîëîí áàãàíûã íýãòãýí ºãºãäºë îðóóëàõ æèøýý.

<html> <body> <h4>Õî¸ð áàãàíûã íýãòãýñýí:</h4> <table border="1"> <tr> <th>Íýð</th> <th colspan="2">Óòàñ</th> <! 2 áàãàíûã íýãòãýñýí íü-> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Õî¸ð ìºðèéã íýãòãýñýí :</h4> <table border="1"> <tr> <th>Íýð:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Óòàñ:</th> <! 2ìºðèéã íýãòãýñýí íü-> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

Çóðàã 35. Õ¿ñíýãòèéí í¿ä íýãòãýõ

Õ¿ñíýãòèéí í¿äýíä ººð ººð òºðëèéí ºãºãäºë îðóóëàõ.



31

<html> <body> <table border="1"> <tr> <td> <p>Ýíý áîë ïàðàãðàô</p> <p> Ýíý áîë ïàðàãðàô </p> </td> <td>Ýíä õ¿ñíýãò àãóóëñàí áàéíà: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Ýíä æàãñààëò àãóóëñàí áàéíà: <ul> <li>àëèì</li> Çóðàã 36. ªãºãäºë îðóóëàõ <li>ãàäèë</li> <li>Õàí áîðãîöîé</li> </ul> </td> <td>Õ¿ñíýãòèéí í¿ä ÿìàð ÷ òºðëèéí ºãºãäºë àãóóëæ ÷àäíà</td> </tr> </table> </body> </html>

ªãºãäºë îðóóëàõ í¿äíèé õýìæýýã

òîõèðóóëàõ.

<html> <body> <h4>Òîõèðóóëààã¿é íü : </h4> <table border="1"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr>


Âýá äèçàéí

32

</table> <h4>Òîõèðóóëñàí íü:</h4> <table border="1" cellpadding="10"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr> </table>

Çóðàã 37. Í¿äíèé õýìæýý òîõèðóóëñàí íü <p> Õýðýâ òà í¿äíèé õýìæýýã òîõèðóóëààã¿é áîë Âýá õàðóóëàã÷ ïðîãðàì àâòîìàòààð ººðºº øàõàæ àâíà. Õýðýâ òà òîõèðóóëñàí áîë òîõèðóóëñàí õýìæýýíä àâíà. Ãýâ÷ òàíû ºãºãäºë òîõèðóóëñàí õýìæýýíýýñ õýòýðâýë Âýá õàðóóëàã÷ ïðîãðàì ìºí àâòîìàòààð øàõàæ àâíà. <p> </body> </html>

Ãàäíàõ õ¿ðýýíä õàðüöàíãóéãààð í¿äíèé õýìæýýã ººð÷ëºõ.

<html> <body> <h4>Òîõèðóóëààã¿é íü:</h4> <table border="1"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr> </table> <h4>Òîõèðóóëñàí íü:</h4> <table border="1" cellspacing="10"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr> </table>



33

</body> </html>

Çóðàã 38. Í¿äíèé õýìæýý òîõèðóóëñàí íü

Õ¿ñíýãòèéí àðûí ôîíûã ººð÷ëºõ æèøýý.

<html> <body> <h4>ªíãº òîõèðóóëñàí íü:</h4> <table border="1" bgcolor=rgb(255,200,0)> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr> </table> <h4>Äýâñãýð çóðàã:</h4> <table border="1" background="../man.bmp"> <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ðäàõü</td> <td>Ìºð</td> </tr> <tr> <td>Äàðààãèéí </td> <td>Ìºð</td> </tr> <tr> <td>Äàðààãèéí </td> <td>Ìºð</td> </tr> <tr> <td>Äàðààãèéí </td> <td>Ìºð</td> </tr> <tr> <td>Äàðààãèéí </td> <td>Ìºð</td> </tr> </table> </body> </html>

Çóðàã 39. Äýâñãýð çóðàã, ºíãº òîõèðóóëñàí íü


Âýá äèçàéí

34

Íýã áîëîí õýä õýäýí í¿äýíä ºíãº áà çóðàã òîõèðóóëñàí æèøýý.

<html> <body> <h4>ªíãº òîõèðóóëñàí íü:</h4> <table border="1"> <tr> <td bgcolor=rgb(255,200,0)>Ýõíèé </td> <td>Ìºð</td> </tr> <tr> <td background="man.bmp"> Õî¸ðäàõü</td> <td>Ìºð</td> </tr> </table> </body> </html>

Õ¿ñíýãòýä çýðýãö¿¿ëýëò õýðõýí õèéõèéã ¿çüå.

<html> <body> <table width="400" border="1"> <tr> <th align="left">Áàðààíû òºðºë</th> <th align="right">Íýãä¿ãýýð ñàð</th> <th align="right">Õî¸ðäóãààð ñàð</th> </tr> <tr> <td align="left">Õóâöàñ</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Ýíãýñýã</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Õ¿íñ</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Íèéò</th> <th align="right"> $1001.50 </th> <th align="right"> $744.65 </th> </tr> </table> </body> </html>


35

Çóðàã 40. Õ¿ñíýãò äýõ çýðýãö¿¿ëýëò

Õ¿ñíýãòèéí Frame øèíæ ÷àíàðûí òóñëàìæòàé õ¿ðýýã çóðæ áîëíî.

<html> <body> <h4> frame="border" ãýñýí óòãàòàé áàéíà. </h4> <table frame="border">  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td></tr> </table> <h4>frame="box" ãýñýí óòãàòàé áàéíà.</h4> <table frame="box">  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4>frame="void" ãýñýí óòãàòàé áàéíà.</h4> <table frame="void">  <tr> <td>Ýõíèé</td> <td>Ìºð</td></tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td></tr> </table> <h4> frame="above" ãýñýí óòãàòàé áàéíà.</h4> <table frame="above">  <tr> <td>Ýõíèé</td> <td>Ìºð</td></tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td>

</tr> </table> <h4> frame="below" ãýñýí óòãàòàé áàéíà. </h4> <table frame="below">  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4> frame="hsides" ãýñýí óòãàòàé áàéíà .</h4> <table frame="hsides">  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td>

Âýá äèçàéí

36

<td>Ìºð</td> </tr> </table> <h4> frame="vsides" ãýñýí óòãàòàé áàéíà. </h4> <table frame="vsides">  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4>frame="lhs" ãýñýí óòãàòàé áàéíà .</h4> <table frame="lhs"> Çóðàã 41. Õ¿ñíýãòèéí Frame øèíæ ÷àíàð  <tr> <td>Ýõíèé</td> <td>Ìºð</td> </tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð</td> </tr> </table> <h4> frame="rhs" ãýñýí óòãàòàé áàéíà .</h4> <table frame="rhs"> 

<tr> <td>Ýõíèé</td> <td>Ìºð</td></tr> <tr> <td>Õî¸ð äàõü</td> <td>Ìºð </td> </tr> </table> </body> </html>

Õ¿ñíýãòèéí êîä÷ëîë


<table> Õ¿ñíýãò òîäîðõîéëíî.

<th> Õ¿ñíýãòèéí òîëãîé òîäîðõîéëíî.

<tr> Õ¿ñíýãòèéí ìºð òîäîðõîéëíî.

<td> Õ¿ñíýãòèéí ºãºãäºë òîäîðõîéëíî.

<caption> Õ¿ñíýãòèéí ãàð÷èã òîäîðõîéëíî.

<colgroup> Áàãàíà íýãòãýõèéã çààíà. òîäîðõîéëîõ

<col> Áàãàíûí øèíæ ÷àíàðûã çààíà.

<thead> Õ¿ñíýãòèéí òîëãîé òîäîðõîéëíî.

<tbody> Õ¿ñíýãòèéí èõ áèåèéã òîäîðõîéëíî.

<tfoot> Õ¿ñíýãòèéí òºãñãºëèéã òîäîðõîéëíî.


37

HTML Æàãñààëò

HTML æàãñààëò íü ýðýìáýëýãäñýí, ýðýìáýëýãäýýã¿é, òîäîðõîéëîëòûí ãýñýí

ãóðâàí òºðºë áàéäàã. Ýðýìáýëýãäýýã¿é æàãñààëòûí ºìíº òýìäýãëýãýý ãàðäàã.

Ýðýìáýëýãäýýã¿é æàãñààëò íü <ul> êîä÷ëîëîîð òîäîðõîéëîãääîã. Á¿õ æàãñààëòóóä

<li> êîä÷ëîë õýðýãëýäýã.

<ul> <li>Coffee</li> <li>Milk</li> </ul>

Äýýðõ êîä÷ëîëûí ¿ð ä¿íä

Coffee

Milk

ãýæ ãàðíà.

Ýðýìáýëýãäñýí æàãñààëò íü òîîãîîð äóãààðëàãäñàí áàéäàã. Ýðýìáýëýãäñýí

æàãñààëò íü <ol> êîä÷ëîëîîð òîäîðõîéëîãääîã.

<ol> <li>Coffee</li> <li>Milk</li> </ol>

Äýýðõ êîä÷ëîëûí ¿ð ä¿íä :

1. Coffee

2. Milk

ãýæ ãàðíà.

Òîäîðõîéëîëòûí æàãñààëò íü ýëåìåíò¿¿äèéí æàãñààëò áèø õàðèí

òîìú¸îëëûí òàéëáàðûí æàãñààëò þì. Òîäîðõîéëîëòûí æàãñààëò íü <dl>

êîä÷ëîëîîð ýõýëäýã. Òîäîðõîéëîëòûí æàãñààëòûí òîìú¸îëîë íü <dt> êîä÷ëîëîîð,

òàéëáàð íü <dd> êîä÷ëîëîîð èëýðõèéëýãäýíý.

<dl> <dt>Êîôå</dt> <dd>Õàð, õàëóóí óíäàà </dd> <dt>Ñ¿¿ </dt> <dd>Öàãààí, õ¿éòýí óíäàà</dd> </dl>


Âýá äèçàéí

38

Çóðàã 42. Òîäîðõîéëîëòûí æàãñààëò Ýðýìáýëýãäýýã¿é æàãñààëòûí æèøýý.

<html> <body> <h4>ýðýìáýëýãäýýã¿é æàãñààëò:</h4> <ul> <li>Êîôå</li> <li>Öàé</li> <li>Ñ¿¿</li> </ul> </body> </html>

Ýðýìáýëýãäñýí æàãñààëòûí æèøýý.

<html> <body> <h4>Ýðýìáýëýãäñýí æàãñààëò:</h4> <ol> <li>Êîôå</li> <li>Öàé</li> <li>Ñ¿¿</li> </ol> </body> </html>

Ýðýìáýëýãäñýí æàãñààëòûí òºðë¿¿äèéã õýðõýí ººð÷ëºõèéã ¿çüå.

<html> <body> <h4>Òîîãîîð :</h4> <ol> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li>



39

</ol> <h4>¯ñãýýð:</h4> <ol type="A"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ol> <h4>Æèæèã ¿ñãýýð:</h4> <ol type="a"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ol> <h4>Ðîì òîîãîîð:</h4> <ol type="I"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ol> <h4>Æèæèã Ðîì òîîãîîð:</h4> <ol type="i"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ol>

Çóðàã 43. Ýðýìáýëýãäñýí æàãñààëò òºðë¿¿ä <p> Õýðýâ òà type-ä àâ÷ áîëîõã¿é óòãà îëãîâîë (æèøýý íü: type="k") æàãñààëòûã òîîãîîð äóãààðëàíà. </p> </body> </html>

Ýðýìáýëýãäýýã¿é æàãñààëòûí òýìäýãëýãýýã õýðõýí ººð÷ëºõèéã ¿çüå. <html>

<body> <h4>Áèò¿¿ äóãóéãààð:</h4> <ul type="disc"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ul> <h4>Õºíäèé äóãóéãààð:</h4> <ul type="circle"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li>


Âýá äèçàéí

40

</ul> <h4>Äºðâºëæèíãººð:</h4> <ul type="square"> <li>Àëèì</li> <li>Ãàäèë</li> <li>Íèìáýã</li> <li>Æ¿ðæ</li> </ul> </body> </html>

Æàãñààëòàí äîòîð äàõèí æàãñààëò ¿¿ñãýæ áîëíî.

<html> <body> <h4>Æàãñààëòûí äîòîð æàãñààëò ¿¿ñãýæ áîëíî:</h4> <ul> <li>Êîôå</li> <li>Öàé <ul> <li>Õàð öàé</li> <li>Íîãîîí öàé</li> </ul> </li> <li>Ñ¿¿</li> </ul> </body> </html>

Çóðàã 44. Æàãñààëò äîòîðõ æàãñààëò Æàãñààëòàí äîòîðõ æàãñààëòûí æèøýý.

<html> <body> <h4Æàãñààëò äîòîðõ æàãñààëò :</h4> <ul> <li>Êîôå</li> <li>Öàé <ul> <li>Õàð öàé</li> <li>Íîãîîí öàé <ul> <li>Õÿòàä</li> <li>Àôðèê</li> </ul> </li> </ul> </li> <li>Ñ¿¿</li> </ul> </body> </html>



41

Çóðàã 45. Æàãñààëò äîòîðõ æàãñààëò

Æàãñààëòûí êîä÷ëîëóóä


<ol> Ýðýìáýëýãäñýí æàãñààëò òîäîðõîéëíî.

<ul> Ýðýìáýëýãäýýã¿é æàãñààëò òîäîðõîéëíî.

<li> Æàãñààëò òîäîðõîéëíî.

<dl> Òîäîðõîéëîëòûí æàãñààëò òîäîðõîéëíî.

<dt> Òîìú¸îëîë.

<dd> Òîìú¸îëîë ûí òàéëáàð.

<dir> <ul>-èéí îðîíä õýðýãëýæ áîëíî.

<menu> <ul>-èéí îðîíä õýðýãëýæ áîëíî.

HTML ôîðì

HTML ôîðìûã õýðýãëýã÷ýýñ ÿíç á¿ðèéí ìýäýýëýë àâàõàä àøèãëàäàã. Ôîðìûí

ýëåìåíò¿¿ä ãýæ áàéõ áà ýíý íü text fields, textarea fields, drop-down menus, radio

buttons, checkboxes çýðýã óòãà àâíà. Ýëåìåíò á¿ð ººð ººðèéí îíöëîãòîé. Ôîðì íü

<form> ãýñýí êîä÷ëîëîîð òîäîðõîéëîãäîíî.

<form> <input> <input> </form>

<form> êîä÷ëîëòîé õàìò <input> êîä÷ëîë õýðýãëýíý. Ìºí type ãýñýí øèíæ ÷àíàðòàé,

¿¿ãýýðýý ºãºãäëèéí õýëáýðèéã çààæ ºãäºã. type =”text “ ãýñýí óòãà àâáàë õýðýãëýã÷ýýñ

óòãà îðóóëàõ áîëîìæòîé áîëîõ áà ¿ñýã, òîî, òýìäýãò¿¿äýýñ òîãòñîí ºãºãäºëä

çîðèóëàãäñàí áàéäàã.

<form> Íýð: <input type="text" name="Íýð"> <br> Îâîã: <input type="text" name="Îâîã"> </form>

ãýñýí êîä÷ëîëûí ¿ð ä¿í äàðààõ õýëáýðòýé ãàðíà.

Íýð:

Îâîã:

Ãàðààñ óòãà îðóóëàõ òýìäýãòèéí õýìæýý 20 òýìäýãòýýð õÿçãààðëàãääàã.

type = “radio ” ãýñýí óòãà àâáàë õýðýãëýã÷ îëîí ñîíãîëòóóäààñ çºâõºí ãàíöûã

ñîíãîõîä çîðèóëàãäñàí ôîðì ãàðíà.










Âýá äèçàéí

42

<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

ãýñýí êîä÷ëîëûí ¿ð ä¿í äàðààõ áàéäàëòàé ãàðíà.

Male

Female

type="checkbox" ãýñýí óòãà àâáàë õýðýãëýã÷ýýñ íýã áîëîí õýä õýäýí

ñîíãîëòóóäûã çýðýã õèéõýä çîðèóëàãäñàí ôîðì ãàðíà.

<form> <input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form>

ãýñýí êîä÷ëîëûí ¿ð ä¿í äàðààõ áàéäàëòàé ãàðíà.

I have a bike

I have a car

type = "submit" ãýæ ºãºãäâºë òîâ÷ ¿¿ñýõ áà õýðýãëýã÷ óã òîâ÷ äýýð òîâøèõîä,

ôîðìûí àãóóëãûã ººð ôàéë ðóó èëãýýäýã. Àction øèíæ ÷àíàð íü èëãýýõ ôàéëûí

íýðèéã òîäîðõîéëäîã.

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

Äýýðõ êîä÷ëîë äàðààõ áàéäàëòàé õàðàãäàíà.

Username: Submit

Õýðýâ òà ÿìàð íýã òåêñò áè÷ýýýä "Submit" òîâ÷ äýýð äàðâàë òàíä

"html_form_action.asp" ôàéëûã íýýæ username ãýýä òàíû îðóóëñàí íýðèéã áè÷ñýí

áàéõ áîëíî. Ýíý íü õýðýãëýã÷èéí íýðýýð çààãäñàí ôàéëä íýýõ ¿éëäëèéã ã¿éöýòãýäýã.

Ýíý æèøýý íü òåêñò òàëáàð ¿¿ñãýæ, õýðýãëýã÷ýýñ ìýäýýëýë àâíà.

<html> <body> <form> Íýð : <input type="text" name="Íýð"> <br> Îâîã: <input type="text" name="Îâîã" phone="976"> </form> </body> </html>



43

Ýíý æèøýý íü íóóö ¿ã õýðõýí àâ÷ áîëîõûã õàðóóëíà.

<html> <body> <form> Õýðýãëýã÷èéí íýð: <input type="text" name="õýðýãëýã÷"> <br> Password: <input type="password" name="password"> </form> <p>Õýðýâ òà òàëáàðò áè÷âýë òàíû áè÷ñýíèéã îäîîð ä¿ðñëýõèéã òà îëæ õàðíà. </p> </body> </html>

Ýíý æèøýýãýýð îëîí ñîíãîëò õýðõýí õèéõèéã ¿çüå. Òà õî¸ð ñîíãîëòûã õî¸óëàíã íü

ýñâýë àëèéã íü ÷ òýìäýãëýõã¿é áàéæ áîëíî.

<html> <body> <form> Íàäàä äóãóé áàéäàã: <input type="checkbox" name="Bike"> <br> Íàäàä ìàøèí áàéäàã: <input type="checkbox" name="Car"> </form> </body> </html>

type = "radio" ãýæ çààãäñàí ¿åä çºâõºí íýãèéã ë ñîíãîõ áîëîìæòîé. Ýõíèé ñîíãîëò

òýìäýãëýãýý õèéãäñýíýýýð ãàðíà. ñhecked ¿ã ñîíãîëò õèéäýã.

<html> <body> <form> Ýð: <input type="radio" checked name="Sex" value="male"> <br> Ýì: <input type="radio" name="Sex" value="female"> </form> <p>Òà ýíä çºâõºí íýãèéã íü ë òýìäýãëýæ ÷àäíà. </p> </body> </html>

Ýíý æèøýýãýýð ñîíãîëò õèéõ ôîðì ¿¿ñãýíý. Ãýõäýý ýíý íü íýã òºðëèéí òýìäýãëýãýý

àâàõ æàãñààëò þì.

<html> <body> <form> <select name="Ìàøèí"> <option value="volvo">Âîëüâî <option value="saab">Ñààá <option value="fiat">Ôèàò <option value="audi">Àóäè </select>


Âýá äèçàéí

44

</form> <p> Ýíä õàìãèéí ýõíèé ýëåìåíò íü òýìäýãëýãäñýí õàðàãäàíà. </p> </body> </html>

Çóðàã 46. Ñîíãîëò õèéõ æàãñààëò

Ýíý æèøýýíä ñîíãîëò õèéõ æàãñààëòààñ ñîíãîëò õýðõýí õèéõèéã ¿çüå. 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>Ýíä òà Ôèàò-ã õàìãèéí ò¿ð¿¿íä òýìäýãëýãäñýí áàéõûã îëæ õàðíà.</p> </body> </html>

Ýíý æèøýýãýýð õýðõýí òîâ÷ ¿¿ñãýæ áîëîõ òóõàé ¿çíý. <html> <body> <form> <input type="button" value="Click on me !"> </form> <p>Òîâ÷íû íýð íü Cick on me !</p> </body> </html>



45

Çóðàã 47. Òîâ÷ ¿¿ñãýñýí íü

Ýíý æèøýýãýýð ôîðìûí ýëåìåíòèéã òîéðóóëàí õ¿ðýý ãàðãàæ áîëîõûã ¿çíý. Îäîî òà

Form ãýäýã þó áîëîõ òàëààð òîäîðõîé îéëãîëòòîé áîëñîí áàéõ.

<html> <body> <fieldset> <legend> Àñóóëãà: </legend> <form> Íýð <input type="text" size="3"> Îâîã <input type="text" size="3"> </form> </fieldset> <p>Ýíä size-íü òåêñò òàëáàðûí õýìæýýã òîäîðõîéëíî.</p> </body> </html>

Çóðàã 48. Õ¿ðýý çóðñàí íü

Âýá õóóäñàíä ôîðì õýðõýí õýðýãëýõèéã ¿çüå, ýíä õî¸ð òåêñò òàëáàð, íýã Submit òîâ÷

áàéõ áîëíî.

<html> <body> <form name="input" action="html_form_action.asp" method="get"> Íýðýý îðóóë: <input type="text" name="FirstName" value="Mickey"> <br>Îâîãîî îðóóë: <input type="text" name="LastName" value="Mouse"> <br> <input type="submit" value="Submit"> </form>


Âýá äèçàéí

46

<p> Õýðýâ òà Submit òîâ÷èéã äàðâàë html_form_action.asp ôàéëûã user-ýýð íýýõ áîëíî. </p> </body> </html>

Çóðàã 49. Ôîðìûí æèøýý Ýíä îëîí ñîíãîëò õèéõ ôîðì ìºí Submit òîâ÷ àãóóëñàí õóóäàñ áàéíà.

<html> <body> <form name="input" action="html_form_action.asp" method="get"> Íàäàä äóãóé áàéäàã: <input type="checkbox" name="Bike" checked value="ON"> <br>Íàäàä ìàøèí áàéäàã: <input type="checkbox" name="Car" value="ON"> <br><input type="submit" value="Submit"> </form> <p>Õýðýâ òà Submit òîâ÷ äàðâàë òà ìýäýýëëýý ôàéë ðóó èëãýýíý. </p> </body> </html>

Çóðàã 50. Ôîðìûí æèøýý Ýíä íýã ñîíãîëò õèéõ ôîðì áà Submit òîâ÷ á¿õèé õóóäàñ áàéíà.

<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!">



47

</form> <p> Õýðýâ òà Submit òîâ÷èéã äàðâàë òà ìýäýýëëýý äýýðõ ôàéë ðóó èëãýýæ, ò¿¿íèéã íýýõ áîëíî. </p> </body> </html>

Çóðàã 51. Ôîðìûí æèøýý

Ýíý æèøýý íü ôîðì àøèãëàí ýëåêòðîí øóóäàí õýðõýí èëãýýõèéã õàðóóëíà.

<html> <body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <h3>Ýíý Form çàõèàã 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>


Âýá äèçàéí

48

Çóðàã 52. Ôîðìûí æèøýý

Ôîðìûí êîä÷ëîë


<form> Õýðýãëýã÷èéí îðóóëãûã òîäîðõîéëíî.

<input> Îðóóëàõ òàëáàð òîäîðõîéëíî.

<textarea> Òåêñò òàëáàð òîäîðõîéëíî

<label> Íýð òîäîðõîéëíî.

<fieldset> Òàëáàðûí òîõèðóóëãûã òîäîðõîéëíî.

<legend> Òàëáàðò ãàð÷èã ºã÷ ò¿¿íèéã õ¿ðýýëíý.

<select> Òýìäýãëýæ áîëîõ æàãñààëò ¿¿ñãýíý. (Drop Down List)

<opt group> Ñîíãîëòûí áàãöûã òîäîðõîéëíî.

<option> Ñîíãîëòûã æàãñààëòààð òîäîðõîéëíî. (Drop Down List)

<button> Òîâ÷ òîäîðõîéëíî. Eðäèéí òîâ÷.

<isindex> <input> -èéí îðîíä õýðýãëýæ áîëíî.

<Img> êîä÷ëîë áà Src øèíæ ÷àíàð

HTML íü <img> êîä÷ëîëîîð çóðàã îðóóëäàã. <img> êîä÷ëîë íü ãàíöààðàà

õýðýãëýãääýã. Òà çóðãèéã äýëãýöýíä õàðóóëàõûí òóëä src øèíæ ÷àíàðûã õýðýãëýõ

¸ñòîé. Src ãýäýã Source ãýñýí ¿ãèéí òîâ÷ëîë þì. src øèíæ ÷àíàðò çóðãèéí ôàéëûí

çàìûã çààñàí áàéäàã.

Áè÷èãëýë: <img src="Ýíä õàðóóëàõ ôàéëûíõàà çàìûã áè÷ýýðýé.">













49

Ýíä gif, jpg,bmp õºäºëãººíò áîëîí õºäºëãººíã¿é á¿õ òºðëèéí çóðãèéí ôàéë àâ÷

÷àäíà.

Alt øèíæ ÷àíàð

Ýíý øèíæ ÷àíàð íü äýëãýöýí äýýð ãàðñàí çóðàã äýýð õóëãàíû çààã÷èéã

áàéðëóóëàõàä ãàðàõ òàéëáàðûã îðóóëàõàä õýðýãëýíý.

<img src="boat.gif" alt="Big Boat">

Ýíý æèøýýãýýð òà ººðèéíõºº Âýá õóóäàñ äýýð õýðõýí õºäºëãººíò çóðàã ãàðãàõûã

õàðàõ áîëíî.

<html> <body> <p>Ýíý çóðàã áàéíà: <img src="../d4.bmp" width="144" height="50"> </p> <p> Ýíý õºäºëãººíò çóðàã áàéíà: <img src="../d6.bmp" width="48" height="48"> </p> <p> Õºäºëãººíò áîëîí õºäºëãººíã¿é çóðãèéã õàðóóëàõ HMTL äàõü êîä õîîðîíäîî ÿìàð ÷ ÿëãàà áàéõã¿é.</p> </body> </html>

Çóðàã 53. <img> êîä÷ëîë

Ôàéëûí çàìûã õýðõýí çààõûã õàðúÿ.

<html> <body> <p> Çóðãèéí çàìûã çààæ õàðóóëæ áîëäîã: <img src="../images/netscape.gif" width="33" height="32"> </p> <p> Çóðãèéã ìºí ñ¿ëæýýãýýð ÷ òàòàæ õàðóóëæ áîëíî: <img src="http://www.w3schools.com/images/ie.gif" width="73" height="68"> </p> </body> </html>


Âýá äèçàéí

50

Çóðãèéí ôàéëûã õýðõýí äýâñãýð çóðàã áîëãîí õàðóóëàõûã ¿çüå.

<html> <body background="../d4.bmp"> <p>Àíõààð! : gif áîëîí jpg ÿìàð ÷ çóðãèéí ôàéë õýðýãëýæ áîëíî.</p> <p>Õýðýâ çóðàã õóóäàñíààñ æèæèãõýí áàéâàë Browser ººðºº àâòîìàòààð îëøðóóëíà.</p> </body> </html>

Çóðàã 54. background øèíæ ÷àíàð

Çóðãèéã òåêñòèéí õàìò çýðýãö¿¿ëýëò õèéæ áîëíî.

<html> <body> <p> Òåêñò äýõ <img src ="../images/xhtml.gif" align="bottom" width="100" height="50"> Çóðàã </p> <p> Òåêñò äýõ <img src ="../images/xhtml.gif" align="middle" width="100" height="50"> çóðàã </p> <p> Òåêñò äýõ <img src ="../images/xhtml.gif" align="top" width="100" height="50"> çóðàã </p> <p>Çýðýãö¿¿ëýëò çààãààã¿é ¿åä align = “bottom” óòãàòàé áàéäàã. </p> <p> Òåêñò äýõ <img src ="../images/xhtml.gif" width="100" height="50"> Çóðàã </p> <p> <img src ="../images/xhtml.gif"width="100" height="50"> Òåêñòèéí ºìíºõ çóðàã </p> <p> Òåêñòèéí äàðààõ çóðàã. <img src ="../images/xhtml.gif" width="100" height="50"> </p> </body> </html>

Ìºí ïàðàãðàôûí ç¿¿í áîëîí áàðóóí òàëä çóðãèéã ÿàæ áàéðëóóëæ áîëîõûã õàðúÿ.

<html> <body>



51

<p> <img src ="../d6.bmp" align ="left" width="100" height="50"> Ýíý òåêñòèéí ÿã ç¿¿í òàëä çóðàã áàéðëàíà. </p> <p> <img src ="../d4.bmp" align ="right" width="100" height="50"> Ýíý òåêñòèéí ÿã áàðóóí òàëä çóðàã áàéðëàíà. </p> </body> </html>

Çóðàã 55. Çóðãèéí áàéðëàë Çóðãèéí õýìæýýã çààæ ººð÷èëæ áîëíî.

<html> <body> <p> <img src="../images/hackanm.gif" width="20" height="20"> </p> <p> <img src="../images/hackanm.gif"width="45" height="45"> </p> <p> <img src="../images/hackanm.gif" width="70" height="70"></p> <p>Òà width áîëîí height àòðèáóòààð çóðãèéí õýìæýýã ººð÷èëæ áîëíî. img tag. </p> </body> </html>

Ýíý æèøýý íü çóðãèéí äýýðõ òàéëáàðûã õýðõýí õÿëáàðààð õàðóóëæ áîëîõûã ¿ç¿¿ëíý.

<html> <body> <img src="../people.bmp" alt="This is a comment." width="32" height="32"> <p> Òà õóëãàíûõàà çààã÷èéã çóðàã äýýð áàéðëóóë. Èíãýõýä òà ÿìàð íýã òàéëáàð õàðàõ áîëíî. </p> </body> </html>


Âýá äèçàéí

52

Çóðàã 56. Çóðãèéí òàéëáàð

Çóðãèéã õîëáîëò õýëáýðýýð àøèãëàõûã ¿çüå.

<html> <body> <p> Òà çóðãèéã õîëáîëò áîëãîí àøèãëàæ áîëíî: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> Òà õóëãàíû çààã÷èéã çóðãàí äýýð áàéðëóóë òýð ãàð áîëæ õóâèðíà. Ãàíö òîâø òýãýýä ë õ¿ññýí õóóäàñòàéãàà õîëáîãäîõ áîëíî. </body> </html>

Çóðãèéã òýð ÷èãýýð íü õîëáîëò áîëãîõîîñ ãàäíà ìºí çóðãèéí õýñãèéã òàñàëæ õîëáîëò

õèéæ áîëíî. shape øèíæ ÷àíàðò ÿìàð õýñãýýð õîëáîëò õèéõèéã çààíà. ñoords øèíæ

÷àíàðò êîîðäèíàòûã çààæ ºãíº. àlt øèíæ ÷àíàðò çóðàã äýýð ãàðàõ òàéëáàðûã çààíà.

<html> <body> <p> Ýíý çóðãèéí õýñãýýñ õîëáîëò õèéãäýíý. </p> <img src="../d6.bmp" width=145 height=126 usemap="#people"> <map id="people" name="man"> <area shape="rect" coords="0,0,82,126" alt="Paper" href="paper.htm"> <area shape="circle" coords="90,58,3" alt="Suit"href="suit.htm"> </map> <p><b>Àíõààð :</b> <b>usemap</b> øèíæ ÷àíàð íü õîëáîëòûí id áîëíî. </p> </body> </html>



53

Çóðàã 57. Çóðãààñ õýñýã÷èëæ õîëáîëò õèéæ áàéãàà íü

Äîîðõ æèøýýãýýð çóðãèéã çààñàí õýìæýýãýýð ãàðãàæ, ò¿¿íèé äýýð õóëãàíà çààã÷èéã

áàéðëóóëàõàä õóëãàíû çààã÷èéí êîîðäèíàòûã çóðãèéí òàëáàéí õóâüä õàðüöàíãóéãààð

õàðæ áîëíî.

<html> <body> <p>Õóëãàíû çààã÷èéã çóðãàí äýýð áàéðëóóë, òýãýýä Òºëâèéí ìºðèéã õàð. Òýíä òàíû õóëãàíû çààã÷èéí êîîðäèíàò çóðãèéí õóâüä ãàðàõûã òà õàðàõ áîëíî. </p> <p> <a href="tryhtml_ismap.htm"> <img src="../d6.bmp" ismap width="146" height="126"> </a> </p> </body> </html>


Âýá äèçàéí

54

Çóðàã 58. Õóëãàíû çààã÷èéí áàéðëàë õàðóëàõ.

Äýâñãýð

<body> êîä÷ëîë íü background ba bgcolor ãýñýí 2 øèíæ ÷àíàðûã àãóóëäàã.

bgcolor øèíæ ÷àíàð íü äýâñãýð ºíãèéã òîäîðõîéëíî. ¯¿íèé àâàõ óòãà íü 16-òûí òîî,

RGB óòãààð, ýñâýë ºíãºíèé íýðýýð áàéæ áîëíî. RGB ãýäýã íü óëààí, íîãîîí, õºõ (red,

green, blue) ãýñýí ãóðâàí ºíãºíèé íàéðóóëãà þì. ¯¿ãýýð êîìïüþòåðýýð ãàðàõ á¿õ

ºíãèéã èëýðõèéëæ ÷àäíà.

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

Background øèíæ ÷àíàð íü äýâñãýð çóðãèéã òîäîðõîéëíî. Ýíý øèíæ ÷àíàðûí

àâàõ óòãà íü õàðóóëàõ çóðãèéí ôàéëûí çàì áàéäàã.

<body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif">

Äýâñãýð ºíãº áà òåêñòèéí ºíãº íü Âýá õóóäñûã óëàì ñîíèðõîëòîé áîëãîäîã. Èéìýýñ

ºíãºº çºâ ñîíãîõ íü ÷óõàë.

<html> <body bgcolor="#d0d0d0"> <p> Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. </p> <p>



55

Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. </p> </body> </html>

Çóðàã 59. Òåêñò áà äýâñãýð ºíãèéã çºâ ñîíãîñîí íü.

Òåêñòèéí áà äýâñãýð ºíãèéã áóðóó ñîíãîõ íü õóóäñûã óíøèõàä õýö¿¿ áîëãîíî. <html>

<body bgcolor="#ffffff" text="yellow"> <p> Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. Ýíý áîë ïàðàãðàô. </p> <p> Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. Ýíý áîë ººð íýã ïàðàãðàô. </p> </body> </html>

Çóðàã 60. Òåêñòèéí ºíãèéã áóðóó ñîíãîñîí íü.

Äýâñãýð çóðàã áà ºíãèéã áóðóó ñîíãîõ íü òåêñòèéã óíøèõàä õ¿íäðýë ¿¿ñãýíý.

<html> <body background="../d6.bmp"> <h3> Äýâñãýð çóðàã </h3> <p> gif áà jpg ôàéëóóä äýâñãýð çóðãèéí ôàéë áàéæ áîëíî. .</p> <p> Çóðàã æèæèã áîë õóóäàñ äýýð äàâòàí ãàðãàäàã. </p> </body> </html>


Âýá äèçàéí

56

Çóðàã 61. Äýâñãýð çóðãèéã áóðóó ñîíãîñîí íü.

Äýâñãýðèéí êîä÷ëîë


<bgcolor> Äýâñãýð ºíãèéã çààíà.

<background> Äýâñãýð çóðãèéã çààíà.




HTML 1

Documents

Transcript of HTML 1