Цоомоо: HTML гэж юу вэ?

HTML гэж юу вэ?

HTML гэдэг нь Hyper Text Markup Language гэсэн үгийн товчлол. Энэ нь вэб хуудас харуулах заавар бичдэг кодчлол юм. HTML файлыг энгийн текст боловсруулах програм ашиглан үүсгэж болох бөгөөд htm эсвэл html гэсэн өргөтгөлтэй байна.

HTML файл нь вэб хуудас харуулахад зориулсан кодчлолыг (tag) агуулсан байдаг. Бидний жишээнд үзсэн lecture.html файлын эхний кодчлол нь <html> байна. Энэ кодчлол Вэб хуудас харуулах заавар эхэлж байгааг заана. Файлын хамгийн сүүлийн кодчлол нь </html> байна. Энэ нь хуудас харуулах заавар дуусч байгааг илэрхийлнэ. <head> </head> гэсэн кодчлолын хооронд бичигдсэн мэдээлэл нь хуудасны толгойн хэсгийн мэдээллийг агуулах ба энэ нь Вэб хуудас харуулах хэрэгслээр харагдахгүй. <title> хэсэгт хуудасны гарчгийг бичнэ. Энэ гарчиг цонхны гарчгийн хэсэгт гарна. <body> кодчлолын хооронд бичигдсэн мэдээлэл Вэб хуудас харуулагч хэрэгслээр харагдана. <b> ба </b> кодчлолын хооронд бичигдсэн текст тодоор бичигдэнэ.

НТМ ба HTML өргөтгөлийн ялгаа

HTML ба НТМ өртгөтгөл нь зарчмын хувьд ялгаагүй юм. Учир нь өмнө хэрэглэгддэг байсан програмууд өргөтгөлийн хэмжээг 3 тэмдэгтээр хязгаарлаж байсан. Харин одоо энэ хязгаарлалт үгүй болсноор өргөтгөлийг 4 тэмдэгтээр илэрхийлж болно.

HTML элементийн кодчлол

HTML элементүүдийг кодчилдог. (HTML tag) Кодоо < > хаалтанд бичдэг ба ихэвчлэн хосоор бичигдэнэ. Жишээ нь : <b> ба </b> гэх мэт. Үүнийг эхлэлийн ба төгсгөлийн кодчлол гэж нэрлэж болно. Кодыг жижиг үсгээр бичнэ. HTML элементийн кодчлол нь тодорхой шинж чанарыг агуулсан байж болно. Жишээ нь: <body> кодчлолд дэвсгэр өнгө гэсэн шинжийг нэмж болно. <body bgcolor = "blue"> гэвэл хуудасны дэвсгэр өнгө хөхөөр гарна. Мөн хүснэгт <table> гэсэн кодчлолд хүснэгтийг хүрээгүй гэж заавал <table border="0"> гэж өгнө. Шинж чанарууд нь нэр ба утгаар тодорхойлогдоно. Кодчлолын шинж чанар эхлэлийн кодчлолд бичигддэг. Border гэдэг нь шинж чанарын нэр, "0" гэдэг нь утга нь болно. Шинж чанарын утгыг хаалтанд бичих шаардлагатай ба ихэвчлэн давхар хаалтыг ашиглана. Гэвч дан хаалт мөн зөвшөөрөгдөнө. Зарим тохиолдолд утга нь өөрөө хаалт агуулж байвал дан хаалт хэрэглэх шаардлагатай. Жишээ нь: name = 'George' 'Mary' 'Green’

ДОГОЛ МӨР ТОДОРХОЙЛОХ <Р> кодчлол

<html>

<body>

<р> This is a paragraph. </p>

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

<p> Tkis is a paragraph. </p>

</body>

</html>

ГАРЧИГ ТОДОРХОЙЛОХ <н> кодчлол

Н кодчлол нь текстийн гарчгийг тодорхойлно. h1, h2, h3, h4, h5, h6 гэсэн утгуудтай. h1 нь гарчгийн үсгийн хэмжээг хамгийн томоор, h6 үсгийн хэмжээг жижгээр харуулна.

<h> кодчлолыг харуулахад гарчгийн ард ба өмнө нь хоосон мөр нэмэгддэг.

<р> кодчлолтой адилхан

<BR> КОДЧЛОЛ

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

НТМL ДЭХ ТАЙЛБАР<! >

Тайлбар бичих кодчлол нь HTML бичиглэлд нэмэлт тайлбарыг оруулахад ашиглагдана. Тайлбар гэсэн энэ кодчлол нь вэб хуудсанд харагдахгүй. Зөвхөн танд өөрийн бичиглэлийг тайлбарлахад хэрэг болно.

<! - Тайлбар —>

Тайлбарын эхний хаалтын ард анхаарлын тэмдэг бичигдэнэ. Харин сүүлийн хаалтын өмнө ямар нэг тэмдэг байхгүй

HTML текст бичиж байхдаа таны вэб хуудас хэрхэн харагдахыг бүрэн мэдэж чадахгүй. Зарим компьютерийн дэлгэц том, зарим нь жижиг, мөн хэрэглэгчээс цонхны хэмжээг өөрчилж харах боломжтой байдаг. HTML хоосон зайг тооцдоггүй. Өөрөөр хэлбэл та хэдэн ч хоосон зай оруулсан түүнийг зөвхөн 1 гэж л тооцно. Мөн шинэ мөрөөс эхэлсэн ч түүнийг 1 хоосон зай гэж үзнэ. Тэгвэл шинэ мөрөөс эхлэхийн тулд <р>, <br> гэсэн кодчлолуудыг ашиглаж болно. Бnдний өмнө үзсэнээр <р>, <h> кодчлолууд хоосон мөр агуулдаг.

<html>

<body>

<h1 align="center"> Гарчиг hl. </hl>

<р> Энэ гарчиг хуудасны хувьд голлож гарна. </р>

<р> hr кодчлол хэвтээ шугам зурдаг.</р> <hr>

<р>Энэ бол догол мөр. </р> <hr>

</body>

</html>

Вэб хуудасны дэвсгэр өнгийг <body> кодчлолд зааж өгнө. Доорх жишээнд хуудасны дэвсгэр өнгийг шараар зааж өгчээ.

<html>

<body bgcolor="yellow">

<h2>Дэвсгэр өнгө ! </h2>

</body>

</html>

Кодчлол	Тайлбар
<html>	HTML текст гэдгийг тодорхойлно.
<body>	HTML текстийн үндсэн хэсгийг заана.
<h1> .. <h6>	Гарчгийг тодорхойлно.
<P>	Догол мөрийг тодорхойлно.
<br>	Мөр шилжилт хийнэ.
<hr>	Хэвтээ шутам зурна.
<!—>	Тайлбар тодорхойлно.

Текстийг хэвжүүлэх

Кодчлол	Тайлбар
<b>	Тодоор бичих
<big>	Томоор бичих
<em>	Тодруулгатай бичих
<i>	Налуугаар бичих
<small>	Жижгээр бичих
<strong>	Тодруулгатай бичих
<sub>	Доош шилжүүлж жижгээр бичих
<sup>	Дээш шилжүүлж жижгээр бичих
<ins>	Доогуур нь зурах
<del>	Дээгүүр нь дарж зурах
<s>	<del> -ийн оронд хэрэглэж болно
<strike>	<del> -ийн оронд хэрэглэж болно
<u>	<strike> -ийн оронд хэрэглэж болно

Компыотерийн гаргалтын кодчлол

Компьютерийн програмын код гаргахад зориулагдсан кодчлолууд

Кодчлол	Тайлбар
<code>	Компыотерийн код байдлаар бичих
<kbd>	Гарны код байдлаар бичих
<samp>	Компьютерийн код байдлаар бичих
<tt>	Teletype хэлбэрээр бичих
<var>	Хувьсагч байдлаар бичих
<pre>	Бичигдсэн хэлбэрийг шууд байдлаар бичих
<listing>	<рге> -ийн оронд хэрэглэж болно
<plaintext>	<рге> -ийн оронд хэрэглэж болно
<xmp>	<рге> -ийн оронд хэрэглэж болно

Товчлол, ишлэл бичих кодчлолууд

Кодчлол	Тайлбар
<abbr>	Богиносгож бичих
<acronym>	Товчилсон үгийг бичих
<address>	Хаяг бичих
<bdo>	Бичиглэлийн чиглэлийг тохируулах
<blockquote>	Урт ишлэлийг бичих
<q>	Богино ишлэлийг бичих
<cite>	Иш баримт харуулах (налуугаар)
<dfn>	Тод байдлаар харуулах (налуугаар)

HTML кодчлол дахь тэмдэгтүүд

HTML кодчлолын үндсэн тэмдэгт нь '<', '>' бөгөөд эдгээр дотор текст бичиж болдоггүй. Зарим тэмдэггүүд HTML кодчлолд тусгай утгатай байдаг, жишээ нь '<' тэмдэгт нь эхлэлийн HTML кодчлoлыг тодорхойлдог. Бид энэ тэмдэгтийг хуудас дээрээ харуулахын тулд HTML кодонд заасан тусгай тэмдэгтээр илэрхийлнэ. Тусгай тэмдэгтүүд нь гурван хэсэгтэй: нэр (&), дугаар (#), төгсгөл (;). Жишээ нь:< тэмдгийг харуулахын тулд HTML кодчлолд < эсвэл < гэж бичих хэрэгтэй. Мөн нэрээр бичиж болно. &It; less than. Нэрээр бичих н тогтооход хялбар боловч энэ нь цаанаа дугаарын хөрвүүлэлтэд ордог. Иймд дугаар бичсэн нь илүү зохимжтой.

Хоосон зай

Ердийн байдлаар 10 ширхэг зай авсан ч вэб хуудас харуулагч програм нь үүнийг нэг л зай авсан мэт харагдуулна. Энэ нь ердөө хоёр үгийг тусгаарласан л гэсэн үг, харин жинхэнэ утгаар зай авахыг хүсвэл   гэсэн тэмдэгтийг кодондоо бичнэ.

Өргөн хэрэглэгддэг тэмдэгтийн тодорхойлолтууд

Үрдүн	Тайлбар	Код (нэрээр)	Код (дугаараар)
	Хоосон зай
<	баган тэмдэг	<	<
>	ихийн тэмдэг	>	>
&	And	&	&
“	ишлэлийн тэмдэг	"	"
‘	Нэг хашилт		'

Холболт хийх HTML кодчлолууд

<а> гэсэн кодчлолоор өөр вэб хуудас руу шилжих холболтыг хийдэг. Энэхүү <а> кодчлолоор Вэб хуудас дээрх бүх төрлийн холболт хийж болно. Жишээ нь: HTML хуудас, хөдөлгөөнт дүрс, дууны файл, кино зэрэг рүү холбогдож болно.

<а> кодчлол бичих дүрэм: <а href= “хаяг” Жолбогдох текст </а>

<а> кодчлол холболт үүсгэж, href хэсгийн ард бичигдсэн хаягтай холбогдоно. <а> эхлэлийн кодчлол ба </а> төгсгөлийн кодчлолын хооронд бичигдсэн тэмдэгтүүдийг холболт хийх тэмдэгт (hyperlink) гэх ба тэдгээр нь ердийн текстээс ялгаатай. Хэрэв та уг текстдээр хулганы заагчийг байрлуулан товшилт хийвэл бичигдсэн хаяг руу холбогдоно.

<а> кодчлолын target шинж чанар

Та <а> кодчлолоор холбогдсон хуудас хаана нээгдэхийг target шинж чанараар тодорхойлж болно. Жишээ нь: target = “_blank " гэж заавал холбогдсон хуудсыг шинэ цонхонд харуулна.

<а href=“хаяг” target=“_blank”>холбогдох текст</а>

<а> кодчлолын name шинж чанар

name шинж чанар нь текстийн хэсэгт нэр өгөөд тэр хэсэг рүү шилжихэд хэрэглэгдэнэ. Үүний тусламжтай таны вэб хуудсыг үзэж суугаа хүн нэрлэгдсэн текстийн хэсэг рүү шууд шилжих боломжтой. Доорх хэлбэрээр кодолно:

<а name="өгөгдсөн нэр”> Дэлгэцэнд харагдах текст</а>

<а name= "tips"> Сонирхолтой хэсэг</а>

Дээрхи кодчлолууд нь текстэд нэр өгч байна. Одоо тэр хэсэг рүү шилжих холболт хэрхэн хийхийг үзье.

<а href="http://www.yahoo.com/htmllinks.asp#tips"> Tip хэсэгрүү үсрэх</а>

Лабораторийн ажил

Дээрх тагуудыг ашиглан өөрийн гэсэн статик blog үүсгэх. Үүнд:

Blog-ийн нэр, blog-ийн тухай мэдээлэл байх
Мэдээний хэсэг байх

i. Сонгосон мэдээ оруулдаг байх

Өөрийн мэдээллийг оруулсан байх

i. Өөрийнхөө тухай

ii. Хобби

iii. Өөрийн үзэж буй хичээлээр дүнгийн хүснэгт үүсгэх

Холбоо барих хаяг

Хичээлийн булан

Access дээр үүсгэсэн лабораторийн ажлаа өөрийнхөө blog-той холбох
Mail хаягтайгаа холбох
Үзэж буй хичээлүүдтэй холбоотой өөр өөр html хуудаснууд үүсгэн түүнийгээ blog-тойгоо холбож өгөх. Ингэснээр өөрийн чинь үүсгэсэн blog бусад хичээлүүдийн html хуудастай шууд холбоотой ажиллаж байх

Цоомоо

Цэс

Monday, May 16, 2011

HTML гэж юу вэ?

3 comments: