ITeacher: HTML

Âåá õóóäàñ ãýæ þó? Áèäíèé ºäºð òóòàì îðæ ìýéëýý øàëãàäàã yahoo.com, chinggis.com ãýõ ìýò áóñàä ¿çýæ ñîíèðõäîã òºðºë á¿ðèéí ìýäýýëýë àãóóëñàí ýäãýýð õóóäñóóäûã ÷èíü ýíãèéíýýð âåá õóóäàñ ãýäýã þì. Òýãâýë ýäãýýð âåá õóóäàñ ÿìàð õýëáýðòýé, õààíà áàéäàã, õýðõýí çîõèîãäñîí áàéäàã âý? ãýâýë ìàø ýíãèéí åðººñºº ë ýäãýýð õóóäñóóä á¿ãä ôàéë õýëáýðýýð äýëõèé íèéòèéã õîëáîñîí ø¿ëæýýíèé ÿìàð íýãýí ¿éë÷èëãýý ¿ç¿¿ëäýã êîìïüþòåðèéí õàòóó äèñêýí äýýð íºãººõ word, excel-èéí ôàéë øèã ôàéë õýëáýðýýð õàäãàëàãäàæ áàéäàã. Òýãâýë ýíý õóóäñûã á¿òýýæ áóé ç¿éë íü HTML ãýäýã ñêðèïò áè÷èãëýë ýíý íü òåêñò, çóðàã, ãàð÷èã çýðýã âåá õóóäñûí á¿òöèéã òîäîðõîéëæ ÷àäàõ õýë áºãººä ò¿¿íòýé õàìò PHP, PERL, JAVA, Javascript, CGI, ASP ãýõ ìýò âåá õºãæ¿¿ëýã÷ áîëîí ïðîãðàìì÷ëàëûí õýë¿¿äèéã õîñëóóëàí àøèãëàäàã.

HTML ãýäýã íü Hyper Text Markup Language ãýñýí ¿ã áºãººä áèäíèé ¿çäýã á¿õ âåá õóóäàñ ¿¿ãýýð áè÷èãäñýí áàéäàã áà áèä òýð âåá õóóäñûí html áè÷èãëýëèéã õàðæ áîëäîã. HTML íü òåêñò õýëáýðýýð èíòåðíåòýýð äàìæäàã áà áèäýíä ìºí ýõ êîä íü õàðàãääàã ñêðèïò áè÷èãëýë ãýæ îéëãîæ áîëíî. Âåá õóóäñûã á¿òýýñýí html áè÷èãëýëèéã âåá áðàóçåð ïðîãðàììûí, òóõàéëáàë Internet explorer ïðîãðàìì äýýð View öýñíèé Source êîììàíäààð ¿çýæ áîëíî. Òýãâýë âåá õóóäàñ ãýäýã íü html áè÷èãëýëèéã àãóóëñàí .htm, .html ãýñýí ºðãºòãºë á¿õèé ôàéë þì. ¯¿íèéã áèä html õóóäàñ ãýäýã. Âåá íü òýãýõýýð ººð õîîðîíäîî íýãýýñ íºãºº ð¿¿ ¿ñðýõ õîëáîîñîîð õîëáîãäñîí âåá õóóäñóóäààñ òîãòîíî.

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

Æèøýý: http://icttc.mng.net:80/index.html

http://-¯¿íèéã ïðîòîêîë ãýíý.
icttc.mng.net-¯¿íèéã äîìàéí(domain) íýð ãýíý.
:80-¯¿íèéã ïîðò ãýíý.
Index.html-¯¿íèéã âåá õóóäàñ áóþó html ôàéë ãýíý.

Ýíäýýñ HTTP ïðîòîêîë àøèãëàí 80 äóãààðòàé êîìïüþòåðèéí ïîðòîîð òóõàéí domain-ä õàðãàëçàõ âåá õóóäñóóäûã ¿çäýã áàéíà.

HTML áè÷èãëýë ìààíü þó þó õèéæ ÷àäàõ âý ãýõýýð çºâõºí ìýäýýëëèéã áèäýíä ä¿ðñëýí ¿ç¿¿ëýõ ¿¿ðýãòýé. Òýðíýýñ áèø äýýðõ ìýäýýëëèéã íü ººð÷ëºõ, õóâüñãàõ ¿éëäëèéã õèéæ ÷àäàõã¿é õàðèí òîãòâîðòîé áàéõ õýñã¿¿äèéã íü õèéæ ºãäºã.

Õóóäñûí á¿òöèéã òîäîðõîéëäîã òàã:

<HTML>
<HEAD>
<TITLE>
<BODY>

<HTML>. . .</HTML>

Ýíý tag áóþó HTML êîììàíä íü HTML ôàéëèéí ýõëýë òºãñãºëèéã èëýðõèéëíý.

Tag ãýäýã íü íºãººòýéã¿¿ð èõ áàãûí õààëò(< >) õîîðîíä áè÷èãääýã òåêñò ãýñýí ¿ã þì. HTML òàãóóä íü èõýâ÷ëýí 2 õýëáýðòýé áàéíà. ªºðººð õýëáýë òàãèéí ýõëýë áîëîí òàãèéí òºãñãºë ãýñýí 2 õýëáýðòýé. Æèøýý: <html> ãýæ ýõëýýä </html> ãýæ òºãñºíº. <b>…</b>, <font>…</font> ãýõ ìýò. Çàðèì html òàã òºãñãºëã¿é áàéäàã.

Æèøýý: <br>, <hr> ãýõ ìýò òºñãºëã¿é õýðýãëýäýã.

Ìºí html òàãûã òîì, æèæèã ¿ñãýýð áè÷ñýíèé ÿëãàà áàéäàãã¿é áà õàðèí íýãýí æèãä áè÷èæ çàíøâàë ç¿ãýýð áàéäàã.

<html>…</html> òàã íü HEAD tag-ààð òîäîðõîéëîãäñîí HTML ôàéëèéí ýõëýë òºãñãºëèéã òîäîðõîéëíî.

Áè÷èãäýõ õýëáýð:

<html

TITLE=“Òåêñò òýìäýãò”

VERSION=“Òåêñò òýìäýãò”

…

</html>

<html> òàãèéí äîòîð òîäîðõîéëîãäñîí TITLE, VERSION-èéã øèíæ ÷àíàð áóþó íýìýëò òîäîðõîéëîëò ãýäýã.

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

Æèøýý: <html title=“HTML ñêðèïò õýë” version=“1”>. . .</html>

Title-ä òîäîðõîéëîãäñîí “HTML ñêðèïò õýë” ãýäýã òåêñò íü óã html õóóäñûã âåá áðàóçåð äýýðõ ¿çýõýä õóóäñûí äóðûí õýñýãò õóëãàíû çààã÷ äîîð òàéëáàð òåêñòýýð (tooltip text) ãàðíà.

<HEAD>. . .</HEAD>

Õóóäàñòàé õîëáîîòîé ìýäýýëëèéã ýíý tag äîòîð òîäîðõîéëæ ºãäºã. Document Type Definition (DTD)

Æèøýý:

<html>

<head>

<title>Âåá õóóäñûí íýð</title>

</head>

</html>

<HEAD> òàã äîòîð áè÷èãääýã

<TITLE>
<BASE>
<STYLE>
<META>
<LINK> òàãóóäûã òîëãîéí òàãóóä ãýíý.

<TITLE>. . .</TITLE>

Âåá õóóäàñíû ãàð÷ãèéã òîäîðõîéëæ ºãíº. Ýíý tag íü <head>…</head> tag-ûí äîòîð áè÷èãäýíý.

Æèøýý:

<html>

<head>

<title>Titlebar-ûã õàðäàà</title>

</head>

</html>

<META>

Ýíý tag íü âåá õóóäñûí äàëä ìýäýýëëèéã áóþó òóõàéëáàë, âåá õóóäñûí îáúåêò (òåêñò, çóðàã, òîâ÷ëóóð ãýõ ìýò)-ûí õýëáýðø¿¿ëýëò, òóõàéí âåáèéã èíòåðíåòèéí õàéëòûí ñèñòåìýýð õàéõàä òóñ áîëîõ ò¿ëõ¿¿ð ¿ãñ, òóõàéí õóóäñûã á¿òýýñýí çîõèîã÷èéí ìýäýýëýë çýðãèéã àãóóëäàã. Ýíý tag íü <head>…</head> tag-ûí äîòîð áè÷èãäýíý.

Æèøýý:

<html>

<head>

<title>Titlebar-ûã õàðäàà</title>

</head>

</html>

charset=windows-1251 ãýñýí Unicode-ûã meta tag äîòîð áè÷èæ ºãºõ øààðäëàãàòàé ãýñýí ¿ã.

<STYLE>…</STYLE>

Tag-ûí ¿¿ðýã íü âåáèéí ìýäýýëëèéí õýëáýðø¿¿ëýëòèéã õèéõ áºãººä íýã ¸ñîíäîî html tag-ûã äàõèí ¿¿ðýã çîðèëãûã òîäîðõîéëîõîä àøèãëàäàã. ¯¿íèé òóõàé Cascading Sheet Style (CSS) áè÷èõ õýñýãò òîäîðõîé òàéëáàðëàãäàíà.

Æèøýý:

<html>

<head>

<title>Titlebar-ûã õàðäàà</title>

<style>

H1:

{

color: blue;

}

</style>

</head>

</html>

<BODY>…<BODY>

Âåáèéí ¿íäñýí ìýäýýëýëèéã áóþó ä¿ðñëýãäýí ãàðàõ á¿õ ìýäýýëýëèéã ýíý tag-ûí äîòîð áè÷èæ ºãäºã.

Æèøýý:

Âåá õóóäñûã á¿òýýõ ¿íäñýí äàðààëàë íü

<html>

<head>

…

</head>

<body>¯íäñýí õýñýã</body>

</html>

áàéíà.

Áè÷èãäýõ õýëáýð:

<BODY
  BACKGROUND=“äýâñãýð çóðàãèéí õàÿã”
  BGCOLOR=“äýâñãýð ºíãº”
  TEXT=“òåêñòèéí ºíãº”
  LINK=“õîëáîîñûí ºíãº”
  ALINK=“èäýâõòýé õîëáîîñûí ºíãº”
  VLINK=“¿çñýí õîëáîîñûí ºíãº”
  ONLOAD=“loadJScode”
  ONUNLOAD=“unloadJScode”
  ONBLUR=“blurJScode”
  ONFOCUS=“focusJScode”

>

...

</BODY>

BACKGROUND=”äýâñãýð çóðãûí õàÿã”

Õóóäàñ äýëãýöýí äýýð àðûí äýâñãýð íü çóðàãòàé áàéõûã òîäîðõîéëíî.

Æèøýý:

<body background=http://www.yourcompany.com/images/image1.gif> ýñâýë <body background=“images/image1.gif”> ãýõ ìýòýýð äýâñãýð çóðãèéí çàìûã çààæ ºã÷ áîëíî.

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

BGCOLOR=“äýâñãýð ºíãº”

Õóóäñûí äýâñãýð ºíãèéã òîäîðõîéëæ ºãíº.

TEXT=“òåêñòèéí ºíãº”

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

Æèøýý:

LINK=“õîëáîîñûí ºíãº”

Õîëáîîñ(ëèíê)-ûí àíõíû ºíãº áóþó óã õîëáîîñ äýýð click õèéãýýã¿é áàéõ ¿åèéí ºíãèéã òîäîðõîéëíî. Õýðýâ ýíý ºíãèéã òîäîðõîéëæ ºãººã¿é ¿åä áðàóçåð àíõíû (default color) ºíãèéã ñîíãîíî.

ALINK=“èäýâõòýé áóé õîëáîîñûí ºíãº”

Õîëáîîñ ëèíê äýýð äàðñàí ¿åèéí ºíãèéã òîäîðõîéëíî. ªºðººð õýëáýë ÿã îäîî èäýâõòýé áàéãàà õóóäàñò õàðãàëçàõ ëèíêèéí ºíãèéã òîäîðõîéëíî. Õýðýâ ýíý ºíãèéã òîäîðõîéëæ ºãººã¿é ¿åä áðàóçåð àíõíû (default color) ºíãèéã ñîíãîíî.

VLINK=“àÿëñàí õîëáîîñûí ºíãº”

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

HTML òàãóóäûã åðºíõèé ¿¿ðýã çîðèóëàëòûí òàã, form òàã, frame(öîíõòîé õàðüöàõ) òàã ãýæ àíãèëíà. HTML òàãóóäûã òîì æèæèã ¿ñãýýð áè÷ñýíèé ÿëãàà áàéõã¿é. Ýäãýýð òàãóóäûã <body>. . .</body> òàãûí äîòîð òàëä áè÷äýã.

Åðºíõèé ¿¿ðýã çîðèóëàëòûí òàã:

Òàéëáàð.

HTML ñêðèïò áè÷èãëýë äîòîð òàéëáàð õèéõýä àøèãëàäàã áºãººä áðàóçåð äýýð ä¿ðñëýãäýõã¿é.

Æèøýý:

¯íäñýí õýñýã áóþó âåáèéí áèå

</body>

Òåêñò áîëîí îáúåêò õýëáýðø¿¿ëýõ òàã. Îáúåêò ãýäýã íü òåêñò, çóðàã çýðýã äýëãýöýíä ä¿ðñëýãäýæ áóé á¿õèé ë ç¿éëñèéã õýëíý.

<B>. . .</B>

Òåêñòèéã á¿ä¿¿í (BOLD) õýëáýðýýð õýëáýðø¿¿ëíý.

Æèøýý:

<B>Ýíý áîë á¿ä¿¿í òåêñò</B>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë á¿ä¿¿í òåêñò

<I>. . .</I>

Òåêñòèéã íàëóó (ITALLIC) õýëáýðýýð õýëáýðø¿¿ëíý.

Æèøýý:

<I>Ýíý áîë íàëóó òåêñò</I>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë íàëóó òåêñò

<U>. . .</U>

Òåêñòèéã äîîãóóðàà çóðààñòàé (UNDERLINED) õýëáýðýýð õýëáýðø¿¿ëíý.

Æèøýý:

<U>Ýíý áîë á¿ä¿¿í òåêñò</U>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë äîîãóóðàà çóðààñòàé òåêñò

Æèøýý:

<b><i><u>Á¿ä¿¿í íàëóó äîîãóóðàà çóðààñòàé òåêñò</u></i></b>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Á¿ä¿¿í íàëóó äîîãóóðàà çóðààñòàé òåêñò

<STRONG>…</STRONG>

Æèøýý:

<strong>Ýíý áîë strong òåêñò</strong>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë strong òåêñò

<STRIKE>…</STRIKE>

Æèøýý:

<strike>Ýíý áîë strike òåêñò</strike>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë strike áóþó äàðàãäñàí òåêñò

<SMALL>…</SMALL>

<BIG>…</BIG>

Æèøýý:

<small>Ýíý áîë æèæèãõýí ¿ñã¿¿ä</small><br>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë æèæèãõýí ¿ñã¿¿ä

Ýíý áîë òîì ¿ñã¿¿ä

<SUB>…</SUB>

Subscript áóþó òåêñòèéí äîîä áóëàíä òåêñò áè÷èõ áîëîìæèéã îëãîíî. Өөрөөр хэлбэл доод индекс гэсэн үг.

Æèøýý:

Òåêñò<sub>Ýíý áîë subscript òåêñò</sub>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Òåêñò_{Ýíý áîë subscrit
òåêñò}

<SUP>…</SUP>

Superscript áóþó òåêñòèéí äýýä áóëàíä òåêñò áè÷èõ áîëîìæèéã îëãîíî. Өөрөөр хэлбэл дээд индекс гэсэн үг.

Æèøýý:

Òåêñò<sup>Ýíý áîë superscript òåêñò</sup>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Òåêñò^{Ýíý áîë superscript òåêñò}

<FONT>…</FONT>

Òåêñòèéí ºíãº, ºíäºð, õýëáýðèéã òîäîðõîéëíî.

Áè÷èãäýõ õýëáýð:

<font

color=”Òåêñòèéí ºíãº”

size=”Òåêñòèéí õýìæýý”

face=”Òåêñòèéí õýëáýð”

…

</font>

color
Ýíý øèíæ ÷àíàð íü òóõàéí òåêñò ÿìàð ºíãºòýé ä¿ðñëýãäýõèéã òîäîðõîéëíî.
Size
Ýíý øèíæ ÷àíàð íü òóõàéí òåêñòèéí ºíäðèéã òîäîðõîéëíî.
Face
Ýíý øèíæ ÷àíàð íü òóõàéí òåêñò ÿìàð õýëáýðèéí font-òîé áàéõûã òîäîðõîéëíî.

Æèøýý:

<font color=”blue”>Ýíý áîë öýíõýð ºíãºòýé òåêñò</font>

<font size=”14”>Ýíý áîë 14 ºíäºðòýé òåêñò</font>

<font face=”Arial mon”>Ýíý áîë Arial òåêñò</font>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

Ýíý áîë öýíõýð ºíãºòýé òåêñò

Ýíý áîë 14 ºíäºðòýé òåêñò

Ýíý áîë Arial òåêñò

<BR>

Øèíý ìºðºíä øèëæ¿¿ëýõ òàã.

Æèøýý:

<html>

<body>

1-ð ìºð. <br> 2-ð ìºð. <br> 3-ð ìºð.

</body>

</html>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

1-ð ìºð.

2-ð ìºð.

3-ð ìºð.

Õýðýâ <br> òàãèéã àøèãëààã¿é áîë äîîðõ õýëáýðòýé áàéíà:

1-ð ìºð. 2-ð ìºð. 3-ð ìºð.

<HR>

Õýâòýý òýíõëýãèéí äàãóó øóãàì çóðíà.

Áè÷èãäýõ õýëáýð:

<hr

align=”left” ýñâýë “center” ýñâýë “right”

width=””

height=””

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

Æèøýý:

<html>

<body>

1-ð ìºð. <hr> 2-ð ìºð. <hr> 3-ð ìºð.

</body>

</html>

Áðàóçåð äýýð ä¿ðñëýãäýõ áàéäàë:

1-ð ìºð.

2-ð ìºð.

3-ð ìºð.

<DIV>…</DIV>

Ýíý òàã äîòîð áè÷èãäñýí îáúåêòèéã äýëãýöèéí õóâüä çýðýãö¿¿ëýëò õèéíý.

Áè÷èãäýõ õýëáýð:

<div

align=”left” ýñâýë “center” ýñâýë “right”

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</div>

align ãýäýã øèíæ ÷àíàðûã íü òîäîðõîéëîîã¿é áè÷âýë àíõíû óòãà(default value) áóþó õóóäñûí õóâüä ç¿¿í òàëä çýðýãö¿¿ëýëò õèéíý.

Æèøýý:

<html>

<body>

<div>Òåêñò</div>

<div align=”center”>Õóóäñûí ãîëä</div>

<div align=”right”>Õóóäñûí áàðóóí òàëä</div>

<div align=”right”>Õóóäñûí ç¿¿í òàëä</div>

</body>

</html>

<H1> - <H6>

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

Æèøýý:

<html>

<body>

<h1 align=”left” >Òåêñò h1</h1>

<h2 align= “center” > Òåêñò h2</h2>

<h3 align= “right”> Òåêñò h3</h3>

<h4> Òåêñò h4</h4>

<h5> Òåêñò h5</h5>

<h6> Òåêñò h6</h6>

</body>

</html>

<P>…</P>

Ïàðàãðàô (paragraph) áóþó øèíý ìºð äýýð äîîðîî îðóóëíà. <br> òàãòàé òºñòýé.

Áè÷èãäýõ õýëáýð:

align=”left” ýñâýë “center” ýñâýë “right”

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</p>

Æèøýý:

<html>

<body>

<p>Òåêñò</p>

<p align= “center” > Òåêñò</p>

<p align= “right”> Òåêñò</p>

<p align=”left” >Òåêñò</p>

</body>

</html>

<PRE>…</PRE>

Preformatted text áóþó òåêñò äîòîð çàé àâàõ, tab çàé àâàõ, ìºð áóóëãàõ çýðãèéã áè÷èõäýý áèä äýýð ¿çñýí  , <br> ãýñýí òàãèéã àøèãëàæ áàéñàí áîë ýíý òàã äîòîð áè÷èæ ºãñºíººð ìºð áóóëãàí áè÷ñýí, çàé àâñàí åð íü ÿàæ áè÷ñýí òýð ÷èãýýð íü ä¿ðñëýíý.

Áè÷èãäýõ õýëáýð:

<pre

cols=”áàãàíà”

wrap

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</pre>

Æèøýý:

<html>

<body>

Òåêñò Òåêñò

Òåêñò

<pre>

Òåêñò Òåêñò

Òåêñò

</pre>

</body>

</html>

Æàãñààëò ¿¿ñãýõ: (LISTS)

· DIR

· DL

· DT

· DD

· OL

· UL

· LI

<DIR>…</DIR>

Directory list

Áè÷èãäýõ õýëáýð:

<dir

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</dir>

Æèøýý:

<html>

<body>

<p>DIR òàãèéã àøèãëààä æàãñààëò ¿¿ñãýõ</p>

<DIR>

<LI>Òåêñò

<DIR>

<LI> Äýä òåêñò

</DIR>

<LI> Òåêñò

<DIR>

<LI>Äýä òåêñò

</DIR>

</body>

</html>

<DL>…</DL>

Difinition list

Áè÷èãäýõ õýëáýð:

<dl

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</dl>

Æèøýý:

<html>

<body>

<p>DL òàãèéã àøèãëààä æàãñààëò ¿¿ñãýõ</p>

<DL>

<DT>Òåêñò

<DD> Äýä òåêñò

<DT>Òåêñò

<DD> Äýä òåêñò

<DT>Òåêñò

<DD> Äýä òåêñò

</DL>

</body>

</html>

<OL>…</OL>

Ordered list áóþó ýðýìáýëýãäñýí æàãñààëò ¿¿ñãýíý. ªºðººð õýëáýë òîî÷èæ áè÷èõ.

Áè÷èãäýõ õýëáýð:

<ol

start=”ýõëýõ óòãà”

type=”A” ýñâýë “a” ýñâýë “I” ýñâýë “i” ýñâýë “1”

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</ol>

· start
Ýíý øèíæ ÷àíàð íü ÿìàð óòãààñ ýõëýí òîî÷èõûã òîäîðõîéëíî

· type
Ýíý øèíæ ÷àíàð íü àíãëè öàãààí òîëãîéí äàðààëëààð òîì ¿ñãýýð òîî÷èõ, æèæèã ¿ñãýýð òîî÷èõ, Ðîì òîîãîîð òîî÷èõ ìºí òîîãîîð òîî÷èõ çýðãèéã òîäîðõîéëæ ºãíº.

Æèøýý:

<html>

<body>

<li>1

<li>2

<li>3

<li>4

</ol>

<li>1

<li>2

<li>3

<li>4

</ol>

<li>1

<li>2

<li>3

<li>4

</ol>

<li>1

<li>2

<li>3

<li>4

</ol>

<li>1

<li>2

<li>3

<li>4

</ol>

<li>1

<li>2

<li>3

<li>4

</ol>

</body>

</html>

<UL>…</UL>

Unordered list áóþó ýðýìáýëýãäýýã¿é æàãñààëò ¿¿ñãýíý.

Áè÷èãäýõ õýëáýð:

<ul

type=”circle” ýñâýë “square” ýñâýë “disc”

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

…

</ul>

· type
Ýíý øèíæ ÷àíàð íü òîéðîã, êâàäðàò çýðãýýð òîî÷èõèéã òîäîðõîéëæ ºãíº.

Æèøýý:

<html>

<body>

<ul>

<li>1

<li>2

<li>3

<li>4

</ul>

<li>1

<li>2

<li>3

<li>4

</ul>

<li>1

<li>2

<li>3

<li>4

</ul>

</body>

</html>

<LI>

Áè÷èãäýõ õýëáýð:

<li

start=”ýõëýõ óòãà”

type=”disc” ýñâýë “circle” ýñâýë “square” ýñâýë ”A” ýñâýë “a” ýñâýë “I” ýñâýë “i” ýñâýë “1”

class=”õýëáýðø¿¿ëýëòèéí àíãèëàë”

style=”õýëáýðø¿¿ëýëò”

List item áóþó æàãñààëòàíä áàéõ ýëåìåíòèéã òîäîðõîéëæ ºãíº. ¯¿íèéã <ol>, <ul> òàãóóäòàé õàìò õýðýãëýíý.

Æèøýý:

<html>

<body>

<li>1

<li>11

<li>2

<li>3

<li>4

</ul>

<li>22

</ol>

<li>11

</ul>

</body>

</html>

Çóðàã, äóó, âèäåî ä¿ðñ îðóóëàõ.

<IMG>

Çóðàã, äóó, âèäåî ä¿ðñã¿éãýýð òýð äóíäàà çóðàãã¿éãýýð âåáèéã òºñººëºõºä áýðõ. Âåáäýý çóðàã, äóó, âèäåî ä¿ðñ îðóóëàõàä <img> òàãèéã àøèãëàíà.

Áè÷èãäýõ õýëáýð:

<img

src=”URL”

border=”õ¿ðýýíèé òîî”

alt=”òåêñò”

dynsrc=”URL âèäåî ä¿ðñ”

height=”çóðãèéí ºíäºð”

width=”çóðãèéí ºðãºí”

class=”Õýëáýðø¿¿ëýëòèéí àíãèëàë”

datafld=”colname”

datasrc=”#id”

id=”value”

lang=”language”

language=”javascript” ýñâýë “vbscript”

name=”Òàãèéí íýð”

style=”Õýëáýðø¿¿ëýëò”

loop=”òîî”

usermap=”URL”

· src
URL áóþó çóðãèéí áàéðëàõ õàÿãèéã òîäîðõîéëæ ºãíº.

· dynsrc
Âèäåî ä¿ðñèéí õàÿãèéã òîäîðõîéëæ ºãíº.

Ëèíê áóþó âåá õóóäàñ õîîðîíäîõ õîëáîîñ ¿¿ñãýõ.

<A>…</A>

Íýã áàðèìòààñ(âåá õóóäàñ) íºãºº áàðèìò ðóó øèëæèõ õîëáîîñûã õèéõýä ºðãºí àøèãëàäàã òàã þì.

Áè÷èãäýõ õýëáýð:

accesskey=”key”

class=”Õýëáýðø¿¿ëýëòèéí àíãèëàë”

datafld=”colname”

datasrc=”#id”

href=”URL”

id=”value”

lang=”language”

language=”javascript” ýñâýë “vbscript”

methods=”HTTP-METHODS”

name=”Òàãèéí íýð”

style=”Õýëáýðø¿¿ëýëò”

tabindex=”Òîî”

target=”Öðíõíû íýð” ýñâýë “_blank” ýñâýë “_parent” ýñâýë “_self” ýñâýë “_top”

…

</a>

Pages

ITeacher

Ads 468x60px

Ангилалууд

Ангилал

Холбоосууд

HTML

Ýíý áîë á¿ä¿¿í òåêñò

Ýíý áîë íàëóó òåêñò

Ýíý áîë äîîãóóðàà çóðààñòàé òåêñò

Á¿ä¿¿í íàëóó äîîãóóðàà çóðààñòàé òåêñò

Ýíý áîë strong òåêñò

Ýíý áîë strike áóþó äàðàãäñàí òåêñò

Ýíý áîë æèæèãõýí ¿ñã¿¿ä

Бусад бичлэг

Мэдээллийн сан