lecture 1

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

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

Лекц №1

Интернет болон вэб хуудасны ерөнхий ойлголт

HTML –н тухай

Браузерын үүсэл хөгжил Netscape Navigator – хамгийн анхны

худалдаа арилжааны зориулалт бүхий браузер бөгөөд анхны хувилбар нь 1994 онд хэрэглээнд гарч байсан байна.

Microsoft компаниас гаргасан Internet Explorer браузер нь анх 1995 онд хэрэглээнд гарж байсан бөгөөд хамгийн өргөн хэрэглэгддэг браузеруудын нэг юм. Судалгаагаар дэлхийн нийт хэрэглэгчдийн 75% нь уг браузерыг хэрэглэдэг байна.

Firefox- энэ нь Microsoft, Linux, Mac-д зориулсан үнэгүй браузер бөгөөд маш жижигхэн бөгөөд хурдан ажиллаг давуу талтай.

Opera -браузер нь гуравдагч браузер гэж нэрлэгддэг. 1994 онд үүссэн

HTMLHTML бол загварчлалын хэл юм. Мэдээлэл болон, текстийг форматлахад ашиглана. Энэхүү мэдээллийн загварчлал нь уламжлалт програмчлалын хэлнүүдээс ялгаатай юм. HTML-д текстийг хос хаалтан дахь түлхүүр үгээр дүрслэгдэх tag-аар элементийг нь загварчилж өгнө. Жишээ нь: HTML нь өөрөө нэг элемент болох бөгөөд браузер биднийг веб бичиж байгааг тодорхойлж <html>-ээр эхэлж </html> -р дуусгавар болно. Tag-г хаахгүй бол өгүүлбэр зүйн алдаа заах болно.

HTML

<html> … </html> -н хооронд агуулагдаж байгаа бүх зүйлийг браузер харуулна.

Дээр дурьдсанчлан HTML нь загварчлалын хэл учир бид HTML кодоо Notepad програм дээр бичиж болох юм.

(Notepad програмыг ажиллуулахдаа [Start]-[Programs]-[Accessories]-[Notepad] )

HTMLЕрөнхий tag-ууд: <title> </title> гэсэн tag-н хооронд цонхны

гарчгийг өгдөг. Энэ нь хувийн хуудасны нэрийг илэрхийлж байна гэсэн үг юм. Энэ нэрээ Favorites–н жагсаалтанд оруулж болно гэсэн үг юм. Хайлтын програмууд уг хуудсыг хайхдаа энэ нэрийг ашиглах болно.

<body></body> нь гол элементийг нээнэ. Гол элементүүд браузераар харах гэсэн бүх агуулгаа байршуулна. Текст, имидж, холбоос, холбоосын өнгө, загвар, дэвсгэр ба

HTMLҮсгийн фонт зэргийг багтаана. </html> -н өмнө ямагт хаагдана. Маш олон элемент HTML-д байрладаг.

<head></head> -Хуудасан дээр харагдахгүй хэрэгтэй мэдээллийг бичнэ.

 гэсэн tag-н хооронд тайлбар үгээ бичиж болно. Тайлбар бичиж өгсөнөөр үндсэн програм бичихтэй хамаагүй юм. Энэ tag- т тайлбар бичсэнээр кодоо ойлгоход хэрэг болох юм.

HTML

Ерөнхий tag-ууд:<link> - өөр документлуу хандах холбоосыг тодорхойлно<body bgcolor> tag– нь өнгийг тодорхойлно. <body background> tag нь дэвсгэр өнгийг тодорхойлно. <p> tag нь параграф /өгүүлбэр бичнэ/ <br> tag нь мөрийг таслана<hr> tag нь шугам зурна

Гарчиг тодорхойлох <H> tag

<H> tag нь текстийн гарчгийг тодорхойлно. h1, h2, h3, h4, h5, h6 гэсэн утгууд авдаг. h1 нь хамгийн том хэмжээг заах бол h6 нь хамгийн жижиг хэмжээг илэрхийлнэ. Жишээ нь:

<html>

<head>

<title> Garchig todorhoilson jishee</title>

<body>

<h1> Caption h1 </h1>

HTML<h2> Caption h2 </h2>

<h3> Caption h3</h3>




</body>

</head>

</html>

Догол мөр тодорхойлох <p> tag

Html-д текст боловсруулж байгаа үед догол мөр авах хэрэг гарвал үүнийг <p> tag-г ашиглана. Бид office-н програм дээр текст боловсруулахдаа догол мөр авахын тулд гараас Enter товч дардаг. Код бичих явцад боловсруулж байгаа текстээ бид гараас хичнээн хэвжүүлээд, олон хоосон зай аваад браузер дээр хархад уг хэвжүүлэлт ороогүй байдаг. Олон хоосон зайг 1 л гэж тооцдог. Иймээс бүх хэвжүүлэлтэнд заавал tag ашиглах ёстой.

“p” tag ашиглаагүй жишээ

<html>

<title> “p” tag </title>

<body>

This is a paragraph

This is a paragraph

This is a paragraph

</body>

</html>

“p” tag ашигласан жишээ

<html>

<title> “p” tag </title>

<body>

<p> This is a paragraph </p>



</body>

</html>

<br> tag нь курсорыг дараагийн мөрлүү шилжүүлдэг. Энэ нь шинэ догол мөр үүсгэж байна гэсэн үг биш юм. <br> нь төгсөглгүй tag бөгөөд ганцаараа бичигдэдэг. Өөрөөр хэлбэл уг tag-г хаадаггүй гэсэн үг юм.

“br” tag

“br” tag- ашигласан жишээ

<html>

<title> “br” tag </title>

<body>

<p> This <br> is a <br> paragraph<br> This is a <br> paragraph </p>

</body>

</html>

“center” tag

Их хэмжээний текст хэвжүүлээд түүнийгээ голлуулах шаардлагай бол Center tag ашиглах нь зохимжтой байдаг. <center>…</center> дотор голууллах шаардлагтай бүх текстээ байрлуулна.

“center” tag ашигласан жишээ<html>

<title> “p” tag </title><body>

<center> <p> This is a paragraph </p> <p> This is a paragraph </p> <p> This is a paragraph </p> </center>

</body></html>

Уг жишээнд гарчиг гололсон ба, хэвтээ шугам зурах “hr” tag ашиглав.

<html>

<body>

<h1 align=“center”> Caption </h1>

<p> This is a paragraph </p> <hr>

<p> This is a paragraph </p> <hr>

<p> This is a paragraph </p><hr>

</body>

</html>

Текст хэвжүүлэх үндсэн tag-ууд

<b> тодоор бичнэ

<big> томоор бичнэ

<small> жижгээр бичнэ

<sub> subscript тэмдэглэгээ

<sup> superscript тэмдэглэгээ

<i> налуу бичнэ

Текст хэвжүүлэх tag-ууд ашигласан жишээ

<html><body>

<h1 align=“center”> Caption </h1><b> This is a paragraph </b> <br>

< small > This is a paragraph </ small ><br>< big > This is a paragraph </ big > <br>This is <sub> a paragraph </sub><br>This is a <sup> paragraph </sup><br><i> This is a paragraph </i>

</body></html>

“pre” tag

Хэд хэдэн хоосон зай авах болон, хоосон мөр авах үед уг tag-г ашиглана. Мөн програмын код бичиж харуулахад тохиромжтой.

“pre” tag ашигласан жишээ

<html>

<title> sw230</title>

<body>

<pre>

sw230- web design web design

sw230-web design CSMS

</pre>

<pre>

for i=1 to 10

print i

next i

</pre>

</body>

</html>

<ins> доогуур нь зурна

<del> дээгүүр нь дарж зурах

<s> <del>-н оронд хэргэлж болно

<strike> <del>-н оронд хэргэлж болно

<u> <strike> -н оронд хэргэлж болно

Текст хэвжүүлэх бусад tag-ууд

Компьютерийн гаргалтын tag-ууд

<code>

<kbd>

<samp>

<tt>

<var>

<pre>

<listing>

<plaintext>

<xmp>

HTMLӨргөн хэрэглэгддэг тэмдэгтүүд

lecture 1

Documents