Html хэлний хичээл www.birds tweet.blogspot.com

HTML хэлний хичээл www.birds-tweet.blogspot.com
s

1.1. HTML
HTML-ийн кодуудыг тег гэнэ. Жишээ нь <body> </body>, <b> </b>, <hr>, <p> гэх мэт.
HTML нь <html> тегээр эхэлж, </html> тегээр дуусна. Өөрөөр хэлбэл <html> нь HTML-ийн кодын
эхлэлийг, </html> нь төгсгөлийг тэмдэглэнэ.
HTML нь дараах 2 хэсгээс тогтно:
head хэсэг - <head> тегээр эхэлж, </head> тегээр дуусна
body хэсэг - <body> тегээр эхэлж, </body> тегээр дуусна
Жишээ нь:
<html>
<head>
<title>энд бичигдсэн текст нь дэлгэцэнд харагдахгүй</title>
</head>
<body>
энд бичигдсэн текст нь харагдана.
</body>
</html>
Вэб хуудсанд хоосон зай, их багын тэмдэг, давхар хашилт зэрэг тусгай тэмдэгтүүдийг тусгай
кодоор тэмдэглэнэ. Жишээ нь:

1.2. Head талбар
HTML-ийн head талбарт бичигдсэн зүйл нь browser-аар харагдахгүй. Head талбарт тухайн
вэб хуудастай холбоотой мэдээлүүдийг агуулах ба энд <base>, <link>, <meta>, <title>, <style>,
<script> зэрэг тегүүдийг ашиглана.
Жишээ нь:
<title>Энэ бол хуудасны нэр</title>
хуудсанд нэр өгөх
<meta http-equiv="Refresh" content="5;url=http://www.birds-tweet.blogspot.com">
5 секундын дараа автоматаар www.birds-tweet.blogspot.com хуудсанд шилжинэ. Үүнийг
ихэвчлэн тухайн хуудасны нэр өөрчлөгдсөн тохиолдолд хэрэглэнэ.
<meta http-equiv="refresh" content="5">
5 секундын дараагаар автоматаар refresh хийх
<meta name="description" content="HTML examples">

<br> өмнөх командтай адилхан боловч 2 параграфийн хоорондох хоосон зайг алгасна.
өөрөөр хэлбэл 2 <br> нь 1 <p>-тэй адилхан
<hr> хэвтээ шугам татна
<blockquote></blockquote>
текстийг блоклоно
<center></center>
текстийг голлуулна
<div align="left"></div>
текстийг дэлгэцийн зүүн талд байрлуулна
<div align="right"></div>
текстийг дэлгэцийн баруун талд байрлуулна
<b></b> текстийг тод бүдүүн болгоно
<i></i> текстийг налуу болгоно
<u></u> текстийн доогуур нэг зураас татна
<strike></strike>
текстийн дундуур нэг зураас татна
<sup></sup> текстийг дээд индекс хэлбэрээр бичнэ
<sub></sub> текстийг доод индекс хэлбэрээр бичнэ
<font></font>

үсгийн фонттой холбоотой дараах тохируулгуудыг хийнэ.
size үсгийн хэмжээг тогтооно
size=”1” үсгийн 8 гэсэн хэмжээтэй адил
үүнийг ашиглаагүй тохиолдолд буюу default үсгийн хэмжээ нь 3 гэсэн хэмжээтэй байна. Мөн
+ тэмдгийг ашиглаж үсгийн хэмжээг тогтоож болно. Хэрэв +1 гэвэл үсгийн default хэмжээн
дээр 1-ийг нэмсэн буюу 4 гэсэн хэмжээтэй, +3 гэвэл үсгийн 6 гэсэн хэмжээтэй, -2 гэвэл
үсгийн 1 гэсэн хэмжээтэй адилхан гэж ойлгож болно.
сolor үсгийн өнгийг тогтооно
үсгийн өнгийг заах бөгөөд ард тухайн өнгөнд харгалзах өнгөний кодыг нь давхар
хашилтанд бичиж өгнө. Мөн энд red, blue зэргээр тухайн өнгөний англи нэршлийг бичиж
өгч болно.
face үсгийн фонтыг тогтооно

style үсгийн өнгө, хэмжээ зэргийг тогтоон өгөх замаар стилийг үүсгэнэ, жишээ нь
style=”color:red; font-size:14pt”
1.5. Дугаар болон тусгай тэмдэгтийг оруулах
<ul></ul> тусгай тэмдэгтийг оруулах
type-ийг ашиглан тусгай тэмдэгтийн хэлбэрийг тогтоож өгч болно. Жишээ нь fillround нь
дугуй, square нь дөрвөлжин тэмдэгт г.м-ээр.
Жишээ нь:
<ul type=fillround>
<li> Google
<li> Twitter
<li> Facebook
<li> Blogger
</ul>
Харагдах хэлбэр:
• Google
• Twitter
• Facebook
• Blogger
<ol></ol> дугаар оруулах
type-ийг ашиглан дугаарын хэлбэрийг тогтоож өгч болно. 1 бол 1,2,3 г.м-ээр, А бол A, B, C
зэрэг цагаан толгойн дарааллын дагуу, а бол a, b, c зэрэг цагаан толгойн дарааллын дагуу
жижиг үсгээр, I бол I, II, III зэргээр ром тоогоор г.м-ээр.
start-ийг ашиглан дугаар хэдээс эхлэхийг зааж өгч болно.
Жишээ нь:
<ol type=I start=3>
<li> Google
<li> Twitter
<li> Facebook
</ol>
III. Google
IV. Twitter
V. Facebook
<dl></dl> тодорхойлолтыг оруулах
Жишээ нь:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
1.6. Зураг оруулах
<img></img> тегийг ашиглан зураг оруулна.
<img src="pic.gif" width="100" height="100" align="left" alt="My picture">
align=“top” зургийн дараах текст зургийн хажуу талд түүний дээд хэсэгтэй ижил мөрөнд
байрлана
align=“middle” зургийн дараах текст зургийн голд байрлана
align=”bottom” зургийн дараах текст зургийн доод хэсэгтэй ижил мөрөнд байрлана
align=”left” зураг дэлгэцийн зүүн буланд байрлана
align=”center” зураг дэлгэцийн голд байрлана
align=”right” зураг дэлгэцийн баруун буланд байрлана
border=”1” зурагт хүрээ хийж өгнө, хэрэв 0 бол хүрээгүй, харин 1-ээс эхлэн хүрээний өргөнг
тогтооно

width=”100” зургийн өргөн, pixel нэгжээр хэмжигдэнэ
height=”100” зургийн урт, pixel нэгжээр хэмжигдэнэ
alt=”my picture” хэрэв тухайн зургийг гараагүй тохиолдолд зургийн оронд гарах текст
body талбарт дэвсгэр зураг оруулахдаа background=”зураг” гэсэн кодыг ашиглана.
Жишээ нь дараах зургуудыг body талбарын дэвсгэр зураг болгон сонгое.

<body background=”../background0.jpg”>
<body background=”background.jpg”>
<body background=”picture/background1.jpg”>
Мөн body талбарын дэвсгэр өнгө, текстийн өнгийг дараах кодуудыг ашиглан оруулна.
<body bgcolor=”#800000”> дэвсгэрийн өнгөний hexadecimal number
<body bgcolor=”rgb(0,0,0)”> дэвсгэрийн RGB өнгө
<body bgcolor=”red”> дэвсгэрийн өнгөний нэр
<body text=”#004080”> текстийн өнгөний hexadecimal number
<body text=”rgb(0,0,0)”> текстийн RGB өнгө
<body text=”red”> текстийн өнгөний нэр
1.7. Хүснэгт байгуулах
<table></table> тегийг ашиглан хүснэгтийг байгуулна.
Багана болгоно <td> </td> тегүүдийн хооронд байрлана.
Харин мөрийг үүсгэхдээ <tr> </tr> тегүүдийг ашиглана.
<table width="500" height="100" bordercolor="#FF6600" bgcolor="#99CCFF" cellspacing="2" cellpadding="2"
border="2" align="center">
align хүснэгтийг хэвтээ тэнхлэгийн дагуух байрлалыг тогтооно. left, center, right буюу зүүн
талд байрлуулах, хэвтээ тэнхлэг дагуу голлуулах, баруун талд байрлуулах.
width хүснэгтийн өргөнг тогтооно. pixel-ээр хэмжигдэнэ. Мөн процентээр хэмжиж болно.
height хүснэгтийн уртыг тогтоож өгнө.
border хүснэгтийн хүрээний өргөн, pixel-ээр хэмжигдэнэ.
cellpadding өгөгдөл болон хүрээний хоорондох зай
cellspacing нүднүүдийн хоорондох зай
bordercolor хүрээний өнгө
bgcolor дэвсгэрийн өнгө
Жишээ нь:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>

<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>

<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>

<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>
1.8. Гипер холбоосыг үүсгэх
<a></a> тегийг ашиглан гипер холбоосыг буюу өөр хуудас уруу холбогдох холболтыг
үүсгэнэ..
1. Энгийн гиперхолбоосыг хийх. Тодорхой нэг текстэн дээр дарж өөр web хуудастай
холбогдох. Жишээлбэл: Сourse of study гэдэг үгийг study.html хуудастай холбогдох.
<a href=“study.html”>Course of study</a>
2. Тодорхой нэг текстэн дээр дарахад холбогдох web хуудас нь шинэ цонхонд гарах.
<a href=“study.html” target=”_blank”>Course of study</a>
3. Мөн хуудасны тодорхой хэсэгт очиж болно. Энэ нь дараах 2 алхамтай:

Нэгдүгээрт web хуудасны аль нэг хэсэгт name кодыг ашиглан нэр өгнө. Жишээ нь study web
хуудасны аль нэг хэсэгт study_1 гэсэн нэрийг өгье.
<a name=”study_1”>
Хоёрдугаарт дараах холболтыг хийж өгнө.
<a href=”study.html#stduy_1”>Course of study</a>
Энэ холболтыг хийж өгсөнөөр Course of study гэдэг үгийг дарж study.html хуудасны study_1
гэж тэмдэглэгдсэн хэсэгт очно.
4. Хэрэв зөвхөн тухайн хуудасны аль нэг хэсэгт очихыг хүсэж байвал тухайн хуудасны
очихыг хүссэн хэсэгтээ урьдчилан нэр өгнө. Жишээ нь:
<a name=”location”>
Дараа нь гипертекстээ дараах байдлаар үүсгэнэ.
<a href=”location”>go to location</a>

5. Зөвхөн текстээр гиперхолбоосыг хийхээс гадна зургаар ч хийж болно.
Жишээ нь:
<a href=”study.html”><img src=”pic1.jpg”></a>
Ингэснээр pic1.jpg зураг дээр дарах замаар study.html хуудас уруу шилжинэ.
6. Зургийг хуваах замаар гиперхолбоосуудыг хийх.
Зургийг хэд хэдэн хэсэгт хуваах буюу зургийн аль хэсэгт дарснаас хамаарч өөр өөр хуудас
уруу шилжиж болно. Үүний тулд <map></map> тегийг ашиглана.
<img src=”pic.gif” usemap=”#picture”>
<map name=”picture”>
<area shape=”rect” coords=”50,60,120,90” href=”study.html”>
<area shape=”rect” coords=”150,60,220,90” href=”history.html”>
</map>
Дээрх жишээнд зургийг 2 хуваах талаар үзлээ.
Эхний мөрөнд зураг, түүнийг хуваасан тухай бичсэн байна.
Дараагийн мөрөнд зургийг хуваасан map-ийн нэр байрласан байна.
Дараагийн 2 мөрөнд зургийг дараах 2 хэсэгт хуваасан байна.
50, 60, 120, 90 гэсэн координатаар тодорхойлогдох тэгш өнцөгт нь study.html хуудастай,
150, 60, 220, 90 гэсэн координатаар тодорхойлогдох тэгш өнцөгт нь history.html хуудастай
гиперхолбоос үүсгэнэ.
<area> тег нь дараах командуудаас тогтно.
shape хуваах талбайн хэлбэр
rect тэгш өнцөгт хэлбэртэй
circle дугуй хэлбэртэй
coords тухайн дүрсийн эзлэх талбайн координат
тэгш өнцөгт бол x1, y1, x2, y2 гэсэн 4 координаттай байна. Үүний x1, y1 энэ тэгш өнцөгтийн
зүүн дээд булангийн координат, x2, y2 нь тэгш өнцөгтийн баруун доод булангийн
координат.
дугуй бол x, y, r гэсэн 3 координаттай. Үүний х, у нь дугуйн төвийн координат, r нь
радиусийг заана.
Дараа нь href кодыг ашиглан тухайн хуваасан талбайтай холбогдсон гиперхолбоосыг тус тус
хийж өгнө.
7. Мөн body талбарт гипер холбоос бүхий текстийн өнгөтэй холбоотой тохируулгуудыг хийж
өгч болно.
<body link="#0080FF" vlink="#80FF00" alink="#800040">
link гипер холбоос бүхий текстийн өнгө
alink гипер холбоос бүхий текстийг идэвхжүүлэх үед солигдох өнгө
vlink ашигласны дараа гипер холбоосын текстийн солигдох өнгө
8. Ямар нэгэн хүний рүү мэйл бичихийг хүсвэл түүнд мөн дараах байдлаар гипер холбоос
хийж өгч болно.
<a href="mailto:someone@gmail.com">text</a>
1.9. Фрейм үүсгэх

Дэлгэцэн дээр 2 болон түүнээс дээш тооны web хуудсуудыг гаргахыг хүсвэл
<frameset></frameset> тегийг ашиглана.
Жишээ 1:
Дэлгэцийг хэвтээ тэнхлэгийн дагуу 3:7 харьцаатай 2 хэсэгт хувааж хуваасан хэсгийн дээд
талын хэсэгт title.html, доод талын хэсэгт main.html файлууд гарч байхаар үүсгэе.

<head> <title></title> <frameset rows="30%,*" border="1"> <frame name="title" src="title.html" marginwidth="10"
marginheight="10" scrolling="auto" frameborder="1"> <frame name="main" src="main.html" marginwidth="10"
marginheight="10" scrolling="auto" frameborder="1"> </frameset> </head> </body> </html>
Жишээ 2:
Дэлгэцийг босоо тэнхлэгийн дагуу 3:7 харьцаатай 2 хэсэгт хувааж хуваасан хэсгийн зүүн
талын хэсэгт menu.html, баруун талын хэсэгт main.html файлууд гарч байхаар үүсгэе.

<head> <title></title> <frameset cols="30%,*" border="0"> <frame name="menu" src="menu.html"
marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="main" src="main.html"
marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> </frameset> </head> </body> </html>
Жишээ 3:
Дэлгэцийг 3 хэсэгт хувааж хуваасан хэсгийн дээд талын хэсэгт title.html, зүүн талын хэсэгт
menu.html, баруун талын хэсэгт main.html файлууд гарч байхаар үүсгэе.

<head> <title></title> <frameset rows="30%,*" border="0"> <frame name="title" src="title.html" marginwidth="10"
marginheight="10" scrolling="auto" frameborder="0"> <frameset cols="30%,*" border="0"> <frame name="menu"
src="menu.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="main"
src="main.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> </frameset> </frameset>
</head> </body> </html>
Жишээ 4:
Дэлгэцийг 4 хэсэгт хувааж хуваасан хэсгийн дээд талын хэсэгт title.html, зүүн талын хэсэгт
menu.html, баруун талын хэсэгт main.html, доод хэсэгт footer.html файлууд гарч байхаар
үүсгэе.

<html> <head> <title></title> <frameset rows="10%,*" border="0"> <frame name="title" src="title.html"
marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frameset rows="80%,*" border="0">
7
<frameset cols="10%,*" border="0"> <frame name="menu" src="menu.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0"> <frame name="main" src="main.html" marginwidth="10" marginheight="10"
scrolling="auto" frameborder="0"> </frameset> <frame name="footer" src="footer.html" marginwidth="10"
marginheight="10" scrolling="auto" frameborder="0"> </frameset> </frameset> </head> </body> </html>
1.10. Форм оруулах
Форм нь <form></form> тэгийг ашиглана.
Text – нэг мөр бүхий текст өгөгдөл (text area – олон мөр бүхий текст өгөгдөл)-ийг
оруулахад хэрэглэнэ.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>

Radio button – олон сонголтуудаас аль нэгийг нь сонгоход хэрэглэнэ.
<form>
<input type="radio" name="sex" value="male" checked> Male
<br>
<input type="radio" name="sex" value="female"> Female

</form>

Checkbox – тухай өгөгдөл тийм, үгүй эсэхийн аль нэгнийг хэрэглэхэд ашиглана.
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

Submit Button - өггөдөл оруулахад ашиглана. Энд action нь тухайн формд орсон өггөдлийг
боловсруулах файлын нэр, абрйшлыг тогтооно.
<form name="input" action="form_action.htm"
method="get">
Username:
<input type="text" name="user">
<input type=" submit" value="Submit">
</form>

энд хэрэв нэрээ бичээд submit товчлуурыг дарвал текст талбарт оруулсан өгөгдлийг
form_action.htm гэсэн шинэ хуудас уруу илгээнэ.
<form name="input" action="form_action.htm" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked>
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit Now!">
</form>

<form name="input" action="form_action.htm" method="get">
Enter your first name:
<input type="text" name="FirstName" value="Mickey">
<br>Enter your last name:
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>

<form action="MAILTO:someone@gmail.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"

value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Анхаарал тавьсан явдалд баярлалаа

www.birds-tweet.blogspot.com

by Болжмор

ямар нэг асуух зүйл гарвал
ollydbg.exe@gmail.com

дагаад жиргээрэй
Twitter.com/Tugsjin

Html хэлний хичээл www.birds tweet.blogspot.com

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Html хэлний хичээл www.birds tweet.blogspot.com