Lecture 3 4

CS212–Веб зохиомжийн үндэс

Багш: Б. Тулга

Лекц №3,4

HTML кодчилол

Хүснэгт, жагсаалт, форм

Хүснэгт

<table>...</table> tag-р хүснэгтийг тодорхойлдог ба мөрүүдээс бүрдэнэ.

<tr> </tr> мөрийг тодорхойлно

<td></td>мөрийн өгөгдөл агуулах хэсэг. Энэ хэсэгт зураг текст гэх мэт бүх төрлийн өгөгдлийг оруулж болно.

Хүснэгт болон түүний шинж чанарыг тодорхойлох

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

Хүснэгтийн толгойг <th></th> кодчлолоор тодорхойлдог.

Хүснэгтийн нүд нэгтгэх:

<th colspan></th> Баганы дагуу нүд нэгтгэнэ

<th rowspan></th> Мөрийн дагуу нүд нэгтгэнэ

Хүснэгтийн хүрээг тохируулах:

Хүснэгтийн хүрээг хэр хэмжээтэй байхыг <table border=“”> гэж зааж өгдөг. Жишээ нь:<table border=“0”></table> энэ нь хүснэгтийн ямар ч хүрээгүй гэж зааж өгж байна.

Хүснэгтийн нүдний хэмжээг тохируулах:

cellpadding =“” түлхүүр үг ашиглан тохируулна.

Жнь: <table border=“1” cellpadding=“10” >

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

Мөн гаднах хүрээнд нүдний хэмжээг харьцангуйгаар өөрчилж болдог:

Cellspacing =“” түлхүүр үгийг ашиглана.

Жнь: <table border=“1” cellspacing="10">

Хүснэгтийн арын дэвсгэр өнгийг өөрчлөх:

bgcolor=“” түлхүүр үгийг ашиглана:

Жнь:<table border="1" bgcolor="yellow">

Хүснэгтийн дэвгэрт нь зураг оруулах:

Background=“” түлхүүр үгийг ашиглана.

Жнь:<table border="1" background=“picture.jpg” >

Хүснэгтийн өгөгдлийг зэрэгцүүлэх:

align=“” түлхүүр үгийг ашиглана.

Авах утга нь: left, right, center

Жнь: <th align="left"></th>

<td align=“left"> </td>

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

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

<table> Хүснэгтийг тодорхойлно

<tr> Хүснэгтийн толгой тодорхойлоно

<th> Хүснэгтийн мөр тодорхойлно

<td> Хүснэгтийн өгөгдөл тодорхойлно

<caption> Хүснэгтийн гарчиг тодорхойлно

<colgroup> Багана нэгтгэхийг заана, тодорхойлно

<col> Баганы шинж чанарыг тодорхойлно

<thead> Хүснэгтийн толгойг тодорхойлно

<tbody> Хүснэгтийн их биеийг тодорхойлно

<tfoot> Хүснэгтийн төгсгөлийг тодорхойлно

HTML ListЭрэмбэлэгдээгүй жагсаалт

<ul> tag-р тодорхойлдог. Ихэвчлэн хар дугай тэмдэглэгээ ашигладаг.

<li> tag-р жагсаалтын элементийг тодорхойлно.

<ul> tag-н type –аар жагсаалтын тэмдэглэгээг өөрчилж болдог. Жишээ нь:

<ul type=“disk”>

<ul type=“circle”>

<ul type=“square”>

Эрэмбэлэгдсэн жагсаалт

<ol> tag-р тодорхойлно. Дугаар тэмдэгтээр дүрслэгдэнэ.

<li> tag-р жагсаалтын элементийг тодорхойлной

<ol> tag-н type –аар жагсаалтын тэмдэглэгээг өөрчилж болдог. Жишээ нь:

<ol type=“A”>

<ol type=“a”>;

<ol type=“I”>

<ol type=“i”>;

Тодорхойлолтын жагсаалт

Энэ нь жагсаалт биш томъёоллын тайлбарын жагсаалт юм.

<dl> tag-р тодорхойлно

<dt> tag-р томъёолно

<dd> tag-р тайлбарыг бичнэ

Æàãñààëòàí äîòîð äàõèí æàãñààëò ¿¿ñãýсэн жишээ:

<html>

<body>

<h4>Æàãñààëòûí äîòîð æàãñààëò ¿¿ñãýæ áîëíî:</h4>

<ul><li>Êîôå</li><li>Öàé

<ul><li>Õàð öàé</li><li>Íîãîîí öàé</li>

</ul></li><li>Ñ¿¿</li></ul>

</body>

</html>

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

Êîä÷ëîë Òàéëáàð<ol> Ýðýìáýëýãäñýí æàãñààëò òîäîðõîéëíî.<ul> Ýðýìáýëýãäýýã¿é æàãñààëò òîäîðõîéëíî.<li> Æàãñààëò òîäîðõîéëíî.<dl> Òîäîðõîéëîëòûí æàãñààëò òîäîðõîéëíî.<dt> Òîìú¸îëîë.<dd> Òîìú¸îëîë ûí òàéëáàð.<dir> <ul>-èéí îðîíä õýðýãëýæ áîëíî.

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

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








HTML FORM

Òåêñò òàëáàð (type="text")Хэрэглэгчээс текстэн өгөгдөл оруулахад зориулагдсан текст талбар. Анхдагч утга (default) нь 20 тэмдэгт байна. Хуудас дуудагдах үед уг талбар нь хоосон байна. Харин Value шинж -чанарын тусламжтайгаар анхдагч утгыг олгож болно. Бичигдэх хэлбэр:

<input type="text" name="text3"

value=“Анхдагч+ утга">

Size шинж чанар:

Size нь текст оруулах талбарын уртыг тодорхойлно. Бичигдэх хэлбэр:

<input type=“text” name=“text1” size=“30”>

Maxlength шинж чанар

Талбарт оруулах тэмдэгтийн тоог Maxlength шинж чанарын утгаар хязгаарлах боломжтой. Бичигдэх хэлбэр:

<input type=“text” name=“text” size=“30” maxlength=“20”>

Нууц үг оруулах талбар (type=“password”)

Òåêñò òàëáàðòàé èæèë òåêñò îðóóëàõàä àøèãëàãäàõ áîëîâч õýðýãëýãчèéí îðóóëæ áóé òýìäýãòүүä "bullet" (*)òýìäýãòýýð áèчèãäýíý.

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

<input type="password" name="pass1“ size=“20" maxlength="10” value=“НууцҮгОруулах”>

Олон мөр текст оруулах (type=“textarea”)

Нэгээс олон мөр текст оруулахад ашиглагдана. Хэрэглэгч текстээ оруулахад автомараат Scroll үүснэ.

Rows: нь textarea талбарын урт(мөрөөр)

Cols : нь textarea талбарын өргөн(тэмдэгтээр)

WRAP: Virtual утгатай бол оруулж буй текст зүүн гар талруу зэрэгцүүлэлт хийгдэнэ.

Бичигдэх хэлбэр:

<textarea=“comments” rows=“6” cols=“60” wrap=“virtual” </textarea>

Radio button (type="radio")

Хоорондоо хамаарал бүхий сонголтын товч. Уг сонголтын багцаас зөвхөн нэгийг нь л сонгох боломжтой. Хэрэв нэг radio button-r сонговол өмнө сонгогдсон байсан нь автоматаар сонголтгүй болно. Багц RadioButton-г тодорхойлохын тулд бүгдийнх нь name шинж чанарт ижил утга олгох хэрэгтэй. CHECKED шинж чанар нь хуудас дуудагдахад сонгогдсон байх radiobutton-г тодорхойлно.


<input type="radio" name=“ rdButton"

value=“rd1" checked> radio button1 <br>

<input type="radio" name="rdButton"

value=“rd2"> radio button2 <br>

Check Boxes (type= checkbox )

Radio button-той ижил сонголтын товч. Ялгаа нь бусад товчноосоо хамааралгүйгээр сонгогдох боломжтой. Өөрөөр хэлбэл, багц товчнуудаас хэдийг нь ч- сонгож тэмдэглэх боломжтой юм. Checkbox бүр өөр өөр нэртэй байна. Вэб форум руу илгээгдэх утга нь сонгогдсон checkbox-уудын value утга байна. CHECKED шинж чанар нь хуудас дуудагдахад сонгогдсон байх checkbox-r тодорхойлно.


<input type="checkbox" name=“chk1"

value=“One" checked>

<input type="checkbox" name=“chk2"

value=“Two">

Menu Select (type="select")

Сонголтын цэс нь жагсаалтаас сонголт хийх боломж олгодог. <OPTION>...</OPTION> tag нь цэс дээр гарах текстийг тодорхойлно.

SELECTED шинж чанар нь хуудас дуудагдах үед сонгогдсон байх элементийг тодорхойлно. Уг шинж чанарыг тодорхойлж өгөөгүй бол default -p эхний элемент сонгогдсон буюу идэвхитэй байна.


<select name="lesson">

<option value=“cs212"> cs212</option>

<option value=“cs211"> cs211</option>

</select>

Submit (type=“submit”)

Форумд type=“submit” гэж өгөгдвөл товч үүснэ. Уг товч дээр товшиход формын агуулгыг өөр файл руу илгээдэг. Action шинж чанар нь илгээх файлын нэрийг тодорхойлдог. Бичигдэх хэлбэр:

<form name="input" action="html_form_action.asp“ method="get">

User name:<input type="text“ name="user">

<input type="submit" value="Илгээх">

</form>

Form ашигласан жишээ: <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>

Кодчлол Тайлбар

<form> Хэрэглэгчийн оруулгыг тодорхойлно

<input> Оруулах талбар тодорхойлох

<textarea> Текст талбар тодорхойлох

<label> Нэр тодорхойлох

<fieldset> Талбарын тохируулгыг тодорхойлох

<legent> Талбарт гарчиг өгч түүнийг хүрээлнэ

<select> Тэмдэглэх жагсаалт үүсгэнэ

<opt group> Сонголтын багцыг тодорхойлно

<option> Сонголтыг жагсаалтаар тодорхойлно

<button> Товч тодорхойлно

<insidex> <input>-н оронд хэрэглэж болно

<img> tag

<img> tag ашиглан хөдөлгөөнт болон хөдөлгөөнгүй бүх төрлийн зургийг оруулж болно. Түүний шинж чанарт зургийн файлынхаа замыг зааж өгнө.

Бичигдэх хэлбэр нь:

<img src=“зургийн файлынхаа зам ”>

Мөн зургийн файлынхаа хэмжээг заан өгж болно.

<img src=“зургийн файлын зам”

width ”өргөн” hight ”өндөр” >

<img> tag-н align шинж чанар

Align шинж чанарыг ашиглан зургаа хүссэн байрлалдаа оруулах боломжтой. Мөн тестийн хамт зэрэгцүүлэлт хийх боломжтой.

Aвах утгууд нь:

“Top, Bottom, Middle, Left, Center, Right”


<img src=“зургийн зам” align=“байрлал”

width=“өргөн” hight=“өндөр”>

Documents

Lecture 3 4