Your SlideShare is downloading. ×
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Lecture 3 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lecture 3 4

1,080

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CS212 –Веб зохиомжийн үндэс Багш: Б. Тулга
  • 2. Лекц № 3,4
    • HTML кодчилол
    • Хүснэгт, жагсаалт, форм
  • 3. Хүснэгт
    • <table> ... </table> tag -р хүснэгтийг тодорхойлдог ба мөрүүдээс бүрдэнэ.
    • <tr> </tr> мөрийг тодорхойлно
    • <td></td> мөрийн өгөгдөл агуулах хэсэг. Энэ хэсэгт зураг текст гэх мэт бүх төрлийн өгөгдлийг оруулж болно.
    • Хүснэгт болон түүний шинж чанарыг тодорхойлох
    • Хүснэгтийн хүрээг харагдуулахын тулд border шинж чанарт утга өгнө. Border тодорхойлогдоогүй эсвэл, 0 гэж тодорхойлогдсон байвал хүснэгт хүрээгүй харагдана.
    • Хүснэгтийн толгойг <th></th> кодчлолоор тодорхойлдог.
  • 4.
    • Хүснэгтийн нүд нэгтгэх:
    • <th colspan></th> Баганы дагуу нүд нэгтгэнэ
    • <th rowspan></th> Мөрийн дагуу нүд нэгтгэнэ
    • Хүснэгтийн хүрээг тохируулах:
    • Хүснэгтийн хүрээг хэр хэмжээтэй байхыг <table border=“”> гэж зааж өгдөг. Жишээ нь: <table border=“0”></table> энэ нь хүснэгтийн ямар ч хүрээгүй гэж зааж өгж байна.
  • 5.
    • Хүснэгтийн нүдний хэмжээг тохируулах:
    • cellpadding =“” түлхүүр үг ашиглан тохируулна.
    • Жнь: <table border=“ 1 ” cellpadding=“10” >
    • Хэрэв нүдний хэмжээг тохируулаагүй бол браузер өөрөө автомараар шахаж авна. Хэрэв тохируулсан бол тохируулсан хэмжээнд авна. Хэрэв тохируулсан хэмжээнээс хэтэрвэл браузер автоматаар шахаж авна.
  • 6.
    • Мөн гаднах хүрээнд нүдний хэмжээг харьцангуйгаар өөрчилж болдог:
    • Cellspacing =“” түлхүүр үгийг ашиглана.
    • Жнь: <table border=“1” cellspacing=&quot;10&quot;>
    • Хүснэгтийн арын дэвсгэр өнгийг өөрчлөх:
    • bgcolor=“” түлхүүр үгийг ашиглана:
    • Жнь: <table border=&quot;1&quot; bgcolor=&quot;yellow&quot;>
  • 7.
    • Хүснэгтийн дэвгэрт нь зураг оруулах:
    • Background=“” түлхүүр үгийг ашиглана.
    • Жнь: <table border=&quot;1&quot; background=“picture.jpg” >
    • Хүснэгтийн өгөгдлийг зэрэгцүүлэх:
    • align=“” түлхүүр үгийг ашиглана.
    • Авах утга нь: left, right, center
    • Жнь: <th align=&quot;left&quot;></th>
    • <td align=“left&quot;> </td>
  • 8. Íýãýýñ îëîí ìºð áîëîí áàãàíûã íýãòãýí ºãºãäºë îðóóëàõ æèøýý
    • <html>
    • <body>
    • <h4>Õî¸ð áàãàíûã íýãòãýñýí:</h4>
    • <table border=&quot;1&quot;>
    • <tr><th>Íýð</th><th colspan=&quot;2&quot;>Óòàñ</th> <! 2 áàãàíûã íýãòãýñýí íü->
    • </tr><tr> <td>Bill Gates</td>
    • <td>555 77 854</td><td>555 77 855</td>
    • </tr></table>
  • 9.
    • <h4>Õî¸ð ìºðèéã íýãòãýñýí :</h4><table border=&quot;1&quot;>
    • <tr> <th>Íýð:</th> <td>Bill Gates</td></tr>
    • <tr> <th rowspan=&quot;2&quot;>Óòàñ:</th>
    • <! 2ìºðèéã íýãòãýñýí íü-> <td>555 77 854</td></tr>
    • <tr> <td>555 77 855</td></tr>
    • </table></body>
    • </html>
  • 10. <table> Хүснэгтийг тодорхойлно <tr> Хүснэгтийн толгой тодорхойлоно <th> Хүснэгтийн мөр тодорхойлно <td> Хүснэгтийн өгөгдөл тодорхойлно <caption> Хүснэгтийн гарчиг тодорхойлно <colgroup> Багана нэгтгэхийг заана, тодорхойлно <col> Баганы шинж чанарыг тодорхойлно <thead> Хүснэгтийн толгойг тодорхойлно <tbody> Хүснэгтийн их биеийг тодорхойлно <tfoot> Хүснэгтийн төгсгөлийг тодорхойлно
  • 11. HTML List
    • Эрэмбэлэгдээгүй жагсаалт
    • <ul> tag- р тодорхойлдог. Ихэвчлэн хар дугай тэмдэглэгээ ашигладаг.
    • <li> tag- р жагсаалтын элементийг тодорхойлно.
    • <ul> tag- н type –аар жагсаалтын тэмдэглэгээг өөрчилж болдог. Жишээ нь:
      • <ul type=“disk”>
      • <ul type=“circle”>
      • <ul type=“square”>
  • 12.
    • Эрэмбэлэгдсэн жагсаалт
    • <ol> tag- р тодорхойлно. Дугаар тэмдэгтээр дүрслэгдэнэ.
    • <li> tag- р жагсаалтын элементийг тодорхойлной
    • <ol> tag- н type –аар жагсаалтын тэмдэглэгээг өөрчилж болдог. Жишээ нь:
      • <ol type=“A”>
      • <ol type=“a”>;
      • <ol type=“I”>
      • <ol type=“i”>;
  • 13.
    • Тодорхойлолтын жагсаалт
    • Энэ нь жагсаалт биш томъёоллын тайлбарын жагсаалт юм.
    • <dl> tag- р тодорхойлно
    • <dt> tag- р томъёолно
    • <dd> tag- р тайлбарыг бичнэ
  • 14. Æàãñààëòàí äîòîð äàõèí æàãñààëò ¿¿ñãý сэн жишээ:
    • <html>
    • <body>
    • <h4>Æàãñààëòûí äîòîð æàãñààëò ¿¿ñãýæ áîëíî:</h4>
    • <ul><li>Êîôå</li><li>Öàé
    • <ul><li>Õàð öàé</li><li>Íîãîîí öàé</li>
    • </ul></li><li>Ñ¿¿</li></ul>
    • </body>
    • </html>
  • 15. Æàãñààëòûí êîä÷ëîëóóä Êîä÷ëîë Òàéëáàð <ol> Ýðýìáýëýãäñýí æàãñààëò òîäîðõîéëíî. <ul> Ýðýìáýëýãäýýã¿é æàãñààëò òîäîðõîéëíî. <li> Æàãñààëò òîäîðõîéëíî. <dl> Òîäîðõîéëîëòûí æàãñààëò òîäîðõîéëíî. <dt> Òîìú¸îëîë. <dd> Òîìú¸îëîë ûí òàéëáàð. <dir> <ul>-èéí îðîíä õýðýãëýæ áîëíî. <menu> <ul>-èéí îðîíä õýðýãëýæ áîëíî.
  • 16. HTML FORM
    • Òåêñò òàëáàð (type=&quot;text&quot;)
    • Хэрэглэг ч ээс текстэн өгөгдөл оруулахад зориулагдсан текст талбар. Анхдаг ч утга (default) нь 20 тэмдэгт байна. Хуудас дуудагдах ү ед уг талбар нь хоосон байна. Харин Value шинж - ч анарын тусламжтайгаар анхдаг ч утгыг олгож болно.
    • Би ч игдэх хэлбэр:
      • <input type=&quot;text&quot; name=&quot;text3&quot;
        • value=“ Анхдагч + утга&quot;>
  • 17.
    • Size шинж чанар:
    • Size нь текст оруулах талбарын уртыг тодорхойлно. Бичигдэх хэлбэр:
    • <input type=“text” name=“text1” size=“30”>
    • Maxlength шинж чанар
    • Талбарт оруулах тэмдэгтийн тоог Maxlength шинж чанарын утгаар хязгаарлах боломжтой. Бичигдэх хэлбэр:
    • <input type=“text” name=“text” size=“30” maxlength=“20”>
  • 18.
    • Нууц үг оруулах талбар (type=“password”)
    • Òåêñò òàëáàðòàé èæèë òåêñò îðóóëàõàä àøèãëàãäàõ áîëîâ ч õýðýãëýã ч èéí îðóóëæ áóé òýìäýãò үү ä &quot;bullet&quot; (*)òýìäýãòýýð áè ч èãäýíý .
    • Áè ч èãäýõ õýëáýð :
      • <input type=&quot;password&quot; name=&quot;pass1“ size=“20&quot; maxlength=&quot;10” value=“ НууцҮгОруулах ”>
  • 19.
    • Олон мөр текст оруулах (type=“textarea”)
    • Нэгээс олон мөр текст оруулахад ашиглагдана. Хэрэглэгч текстээ оруулахад автомараат Scroll үүснэ.
    • Rows : нь textarea талбарын урт ( мөрөөр )
    • Cols : нь textarea талбарын өргөн ( тэмдэгтээр )
    • WRAP : Virtual утгатай бол оруулж буй текст зүүн гар талруу зэрэгцүүлэлт хийгдэнэ.
    • Бичигдэх хэлбэр:
    • <textarea=“comments” rows=“6” cols=“60” wrap=“virtual” </textarea>
  • 20.
    • Radio button (type=&quot;radio&quot;)
    • Хоорондоо хамаарал б ү хий сонголтын тов ч. Уг сонголтын багцаас з ө вх ө н нэгийг нь л сонгох боломжтой. Хэрэв нэг radio button-r сонговол ө мн ө сонгогдсон байсан нь автоматаар сонголтг үй болно. Багц RadioButton- г тодорхойлохын тулд б ү гдийнх нь name ш инж чанарт ижил утга олгох хэрэгтэй. CHECKED шинж ч анар нь хуудас дуудагдахад сон г огдсон байх radiobutton- г тодорхойлно.
  • 21.
    • Бичигдэх хэлбэр:
    • <input type=&quot;radio&quot; name=“ rdButton&quot;
        • value=“rd1&quot; checked> radio button1 <br>
        • <input type=&quot;radio&quot; name=&quot;rdButton&quot;
        • value=“rd2&quot;> radio button2 <br>
  • 22.
    • Check Boxes (type= checkbox )
    • Radio button-той ижил сонголтын тов ч. Ялгаа нь бусад тов ч ноосоо хамааралг ү йгээр сонгогдох боломжтой. Өөрөөр хэлбэл, багц тов ч нуудаас хэдийг нь ч - сонгож тэмдэглэх боломжтой юм. Checkbox б ү р өөр өөр нэртэй байна. В эб фор у м руу илгээгдэх утга нь сонгогдсон checkbox-уудын value утга байна. CHECKED шинж ч анар нь хуудас дуудагдахад сонгогдсон байх checkbox-r тодорхойлно.
  • 23.
    • Бичигдэх хэлбэр:
    • <input type=&quot;checkbox&quot; name=“chk1&quot;
      • value=“One&quot; checked>
      • <input type=&quot;checkbox&quot; name=“chk2&quot;
      • value=“Two&quot;>
  • 24.
    • Menu Select (type=&quot;select&quot;)
    • Сонголтын цэс нь жагсаалтаас сонголт хийх боломж олгодог. <OPTION>...</OPTION> tag нь цэс дээр гарах текстийг тодорхойлно.
    • SELECTED шинж чанар нь хуудас дуудагдах үед сонгогдсон байх элементийг тодорхойлно. Уг шинж чанарыг тодорхойлж өгөөгүй бол default -p эхний элемент сонгогдсон буюу идэвхитэй байна.
  • 25.
    • Бичигдэх хэлбэр:
    • <select name=&quot;lesson&quot;>
    • <option value=“cs212&quot;> cs212</option>
    • <option value=“cs211&quot;> cs211</option>
    • </select>
  • 26.
    • Submit (type=“submit”)
    • Форумд type=“submit” гэж өгөгдвөл товч үүснэ. Уг товч дээр товшиход формын агуулгыг өөр файл руу илгээдэг. Action шинж чанар нь илгээх файлын нэрийг тодорхойлдог. Бичигдэх хэлбэр:
    • <form name=&quot;input&quot; action=&quot;html_form_action.asp“ method=&quot;get&quot;>
    • User name:<input type=&quot;text“ name=&quot;user&quot;>
    • <input type=&quot;submit&quot; value=&quot;Илгээх&quot;>
    • </form>
  • 27. Form ашигласан жишээ:
    • <html><body>
    • <form action=&quot;MAILTO:someone@w3schools.com&quot; method=&quot;post&quot; enctype=&quot;text/plain&quot;>
    • <h3>Ýíý Form çàõèàã W3Schools èëãýýíý.</h3>
    • Íýð:<br> <input type=&quot;text&quot;
    • name=&quot;name“ value=&quot;Òàíû íýð&quot;
    • size=&quot;20&quot;>
    • <br> Øóóäàí:<br> <input type=&quot;text&quot;
    • name=&quot;mail” value=&quot;Òàíû øóóäàí&quot;
    • size=&quot;20&quot;>
  • 28.
    • <br>Òàéëáàð:<br>
    • <input type=&quot;text&quot;
    • name=&quot;comment&quot;
    • value=&quot;òàíû òàéëáàð&quot;
    • size=&quot;40&quot;><br><br>
    • <input type=&quot;submit&quot; value=&quot;Èëãýýõ&quot;>
    • <input type=&quot;reset&quot; value=&quot;Äàõèí à÷ààëàõ&quot;>
    • </form>
    • </body>
    • </html>
  • 29. Кодчлол Тайлбар <form> Хэрэглэгчийн оруулгыг тодорхойлно <input> Оруулах талбар тодорхойлох <textarea> Текст талбар тодорхойлох <label> Нэр тодорхойлох <fieldset> Талбарын тохируулгыг тодорхойлох <legent> Талбарт гарчиг өгч түүнийг хүрээлнэ <select> Тэмдэглэх жагсаалт үүсгэнэ <opt group> Сонголтын багцыг тодорхойлно <option> Сонголтыг жагсаалтаар тодорхойлно <button> Товч тодорхойлно <insidex> <input> -н оронд хэрэглэж болно
  • 30. <img> tag
    • <img> tag ашиглан хөдөлгөөнт болон хөдөлгөөнгүй бүх төрлийн зургийг оруулж болно. Түүний шинж чанарт зургийн файлынхаа замыг зааж өгнө.
    • Бичигдэх хэлбэр нь :
    • <img src=“ зургийн файлынхаа зам ”>
    • Мөн зургийн файлынхаа хэмжээг заан өгж болно.
    • <img src=“ зургийн файлын зам ”
    • width ” өргөн ” hight ” өндөр ” >
  • 31.
    • <img> tag- н align шинж чанар
    • Align шинж чанарыг ашиглан зургаа хүссэн байрлалдаа оруулах боломжтой. Мөн тестийн хамт зэрэгцүүлэлт хийх боломжтой.
    • A вах утгууд нь:
    • “ Top, Bottom, Middle, Left, Center, Right ”
    • Бичигдэх хэлбэр:
    • <img src=“ зургийн зам ” align=“ байрлал ”
    • width=“ өргөн ” hight=“ өндөр ”>

×