Html хичээл

Од цогцолбор сургууль

Багш Л.Баярсайхан

Веб хуудас хийх
Вэб хуудсыг HTML хэлний тусламжтайгаар хийдэг. HTML гэдэг нь
Hyper Text Markup Language (Гипер Текстийн Хэл) гэсэн англи үгний
товчилсон хэлбэр юм. HTML-ийг Basic, Pascal, С г.м. програмчлалын хэлтэй
адилтгаж бодож болохгүй. HTML нь компьютерийн хэл биш, энэ нь хялбар
энгийн бичиглэлийн нэг хэлбэр юм.
Веб хуудас гэдэг нь HTML хэлээр бичсэн текст бүхий файл юм.
Ийм файлыг HTML-файл гэдэг.
Дотор нь агуулагдах текстийг HTML-код гэдэг.
HTML-код бичихийн тулд танд 2 төрлийн програм хангамж хэрэгтэй
болно.
1.
Юуны өмнө HTML-код бичиж, HTML-файлыг үүсгэх програм хэрэгтэй.
Ийм програмыг HTML-эдитор гэдэг.
2.
HTML-файлыг веб хуудас хэлбэрээр нь харуулдаг програм хэрэгтэй.
Ийм програмыг веб браузер (web browser) буюу веб үзүүлэгч гэдэг.
Windows үйлдлийн системд Internet Explorer хэмээх стандарт браузер байдаг.
Түүнчлэн Mozilla FireFox, Netscape Navigator, Opera зэрэг веб браузерууд бий.

Үндсэн HTML хэлний бүтэц нь толгойн хэсэг ба их биеийн хэсгээс
тогтох ба HTML, HEAD, BODY гэсэн үндсэн 3 тагийг агуулах бөгөөд
дараах хэлбэртэй байна. Үүнд:
 <HTML> … </HTML> таг нь
Вэб хуудасны эхлэл, төгсгөлийг.
<HTML>
 <HEAD> … </HEAD> таг нь
<HEAD>
толгойн хэсэг буюу Вэб хуудасны
...
гарчиг гэх мэт элементүүдийг.
. . . Энэ хэсэгт Толгойн хэсэг
 <BODY> … </BODY> таг нь их
...
биеийн хэсэг буюу HTML хэл
</HEAD>
дээр бичигдэж байгаа ихэнх эх
<BODY>
кодыг агуулна.
...
. . . Энэ хэсэгт Их биеийн хэсэг
...
</BODY>
</HTML>

HTML source код бичих
HTML кодыг Notepad, Wordpad дээр бичиж засварлаж болдог.
1. Start->Programs->Accessories->Notepad команд сонгож Notepad програмыг
санах ойд ачаална.
2. Шинэ файл үүсгээд дараах HTML кодыг бичнэ /Зураг №1/
<HTML>
<HEAD>
<TITLE> Баярсайхан хувийн веб хуудас</TITLE>
</HEAD>
<BODY>
Тавтай морилно уу!
</BODY>
</HTML>

/Зураг №1/

3. File/Save команд сонгоно.
4. Нээгдэх Save харилцах цонхны Save in талбарт хадгалах замаа зааж өгнө.
Жишээлбэл, C:My Documents г.м.
5. File name талбарт файлын нэр, өргөтгөлийг оруулна.
Жишээлбэл: bayar.html гэж бичиж өгнө
6. Save товчлуур дээр дарна.

Дэвсгэр өнгө өөрчлөх

Үсгийн фондны өнгө өөрчлөх

Текстээ хөдөлгөөнд оруулахдаа
<marquee> энд текст байрлана </marquee> гэж бичиж өгнө

Хүснэгт үүсгэх

<table></table>- хүснэгт үүсгэх таг
<td></td>-багана оруулах таг
<tr></tr>- мөр оруулах таг
<table width=”300”>- хүснэгтийн өргөний хэмжээг
заана.
<Table border=”1”> хүснэгтийн хүрээний өргөн
<table bordercolor=”color”> хүснэгтийн хүрээний
өнгө

<td colspan="2"> </td>

// 2 багана нэгтгэх код

Хүснэгт үүсгэх

Зурганд хүрээ оруулахдаа
<img src=”web/me.gif” border=1><br>
Зурагны өндөр өргөнийг
тохируулахдаа
<img src=”web/me.gif” width=”100”
height=”50”><br>

Тодотгох, Бичмэл болгох, Доогуур зураастай болгох
(Bold, Italics and Underline)
Тодотгох буюу Bold болгохдоо

<b> Баярсайхан </b>

Баярсайхан

Бичмэл буюу Italics болгохдоо

<i> Баярсайхан </i>


Доогуур зураастай буюу Underline болгохдоо

<u> Баярсайхан </u>


Текстыг дэлгэцэнд тоочсон байдлаар 3
янзаар гаргаж болно.
Жирийн тоочсон, Дугаарласан, Догол мєр хэрэглэсэн.

Жирийн тоочсон текст дараах байдлаар харагддаг:
 Баярсайхан
 Энхдөлгөөн
 Энххүслэн
 Алтанзул
Харин vvнийг хийхийн тулд <ul> <li> .. <li> .. </ul> гэсэн бvтэцийг хэрэглэдэг.
Дээрх жишээний кодыг доор vзvvлэв:

Дугаарласан текст дараах байдлаар харагддаг:
1. БаярАсайхан
2. Энхдөлгөөн
3. Энххүслэн
4. Алтанзул
Харин vvнийг хийхийн тулд <ol> <li> .. <li> .. </ol> гэсэн бvтэцийг хэрэглэдэг.
Дээрх жишээний кодыг доор vзvvлэв:

Холбоос оруулах
Єєр сайт руу заасан холбоос-линк оруулах
Вэб хуудасны хамгийн их ашигтай давуу талуудын нэг нь єєр хуудас
руу заасан линк оруулах боломжтой байдаг юм. Єєр хуудас руу заасан
коммандыг "anchor tag" гэж нэрлээд дараах байдлаар хэрэглэнэ:

<a href="URL"> .. .............. </a>
Дээрхи код нь вэб хуудасандаа дараах байдлаар харагдна:

Html хичээл

More Related Content

What's hot

Similar to Html хичээл

More from Баярсайхан Л

Html хичээл