1.<A>.....</A>
Холбоос(аттрибут нь href) болон бичиг баримтын тодорхой хэсгийг заагчийг(аттрибут нь name) vvсгэдэг.
Аттрибутууд: href = хаяг Холбогдох зорилгын(хэрвээ бичиг баримтын нэр бvхий хэсэг(named anchor) биш бол зайлшгvй шаардагдана) хаягийг тодорхойлно. methods = жагсаалт(лист) Браузераас хамаарсан дvрмvvдийн жагсаалтыг тодорхойлдог. name = тэмдэгт мөр(string) Бичиг баримтын тодорхой хэсгийг заагчийн нэрийг тодорхойлно. rel = холбоо хамаарал Тухайн бичиг баримт болон зорилгын(target) хамаарлыг заадаг. rev = холбоо хамаарал Тухайн зорилгоос уг бичиг баримт руу буцах холбоог заана. target = нэр Заагдсан бичиг баримтыг хvлээн авахын тулд, тодорхой фрейм болон цонхны нэрийг тодорхойлох. title = тэмдэгт мөр Зорьсон бичиг баримтыг(target document) гарчигаар хангадаг байна. urn = urn Уг холбоос дах Uniform Resource Name-г тодорхойлно. Жишээ нь: Doc.html нэртэй бичиг баримтад info нэртэй хэсэг газрыг (named anchor) vvсгэхийн тулд <a> тагийг name аттрибуттайгаар ашиглана. <a name="info"> Information </a>Уг бичиг баримт дах заагдсан газар руу холбоос хийхийн тулд <a> тагийг href аттрибуттайгаар мөн чагт(#) тэмдэгтийг ашиглана. <a href="doc.html#info">Link to information</a>
<ABBR>...</ABBR>Товчилсон нэр тодорхойлдог.
<ADDRESS>...</ADDRESS>
Хаяг тодорхойлсон дайвар текст Жишээ нь: <address>http://www.yahoo.com</address>
<APPLET>...</APPLET>Текст дотор биелэх аpplet-г тодорхойлно.
Аттрибутууд: align= байрлал<applet> мужийг текстийн орой(top), дунд(middle), ёроол(bottom), зvvн(left), баруун(right ), абсолют дунд(absmiddle), абсолют ёроол(absbottom), үндсэн зураасны дэргэд(baseline) байрлуулна.Default нь bottom байдаг. alt = тэмдэгт мөр <applet> мужийг байрлуулахын тулд сонгох текстийг тодорхойлдог боловч хэрэглээний программыг биелvvлж чадахгvй. code = анги(класс) Кодын биелэгдэх(шаардлагатай) ангийн нэрийг тодорхойлдог. codebase = хаяг (url) Буцаагдсан кодын хаяг height = n <applet> мужийн өндрийг цэгээр(pixel) тодорхойлно. hspace = n <applet> мужийн баруун болон зvvн талд нь нэмэлт зайг цэгээр тодорхойлдог. name = тэмдэгт мөр <applet>-н тодорхой жишээний нэрийг тодорхойлно. vspace = n <applet> мужийн дээд болон доод талд нь нэмэлт зайг цэгээр тодорхойлдог. width = n <applet> мужийн өргөнийг цэгээр тодорхойлдог.
<AREA>Client-side зургийн төлөвлөгөөн дээр хулганы хөдөлгөөнийг мэдрэх мужийг тодорхойлдог.
Аттрибутууд: coords = жагсаалтУг мужийн хvрээг тодорхойлдог дvрсээс хамаарсан координатуудын жагсаалтуудыг таслалаар тусгаарлаж тодорхойлно. href = хаяг Уг мужтай холбогдсон зорилгын(target) хаягийг заана. nohref Уг мужтай холбоотой бичиг баримт байхгvйг заана;уг мужид даралт хийснээр ямарваа нэгэн эффект илрэхгvй байна. shape = дvрс Мужийн дvрсийг тодорхойлно. Авах утгууд нь: circ, circle, poly, polygon, rect, rectangle.
<B>...</B>
Дайвар текстийг bold шрифтийн хэлбэрт оруулна. Жишээ нь: <b>HTML Lesson </b> Vр дvн: HTML Lesson
<BASE>
Тухайн бичиг баримт дах бvх холбоотой хаягууд(URL)-д зориулсан vндсэн хаяг(URL)-г тодорхойлдог. Аттрибутууд: href = хаяг(URL) Vндсэн хаягийг тодорхойлно. target = нэр Бичиг баримт дах бүх <a> холбоосуудын зорилгот цонхыг(default) тодорхойлно. Ихэнхдээ бусад фреймvvд рvv, холбоосыг чиглvvлэхэд хэрэглэгддэг.Уг аттрибутын авдаг 4 онцгой утга байдаг.Vvнд:_blank, _parent, _self, _top. Эдгээр утгуудыг фрейм бvлэгт тодорхойлсон буй.
<BASEFONT>
Доорх текстийнхээ фонтны хэмжээг тодорхойлно. Аттрибутууд: size= утга Vндсэн фонтны хэмжээг 1-с 7 хvртэл олгоно.(default нь 3 байдаг)
<BGSOUND>
Internet Explorer2-с хойших хувилбаруудад. Бичиг баримтад дэвсгэр аудиог тодорхойлно. Аттрибутууд: loop = утга Аудиогийн хэдэн удаа тоглогдох дугаарыг зааж өгнө.Утга нь integer эсвэл хязгааргүй утгатай байж болдог. src = хаяг Тоглогдох аудиогийн хаягийг заана. Жишээ нь: <bgsound loop=12000 src="c:/songs/supreme.mp3">
<BIG>...<BIG>
Дайвар текстийг том хэлбэрт оруулна. <big>HTML Lesson</big>
<BLINK>...</BLINK>
Текстийг гэрэлтvvлж анивчуулна.
<BLOCKQUOTE>…</BLOCKQUOTE>
Хашигдсан дайвар текст. <blockquote>HTML Lesson</blockquote>
<BODY>...</BODY>
Бичиг баримтын эхлэл төгсгөлийн заагийг тогтооно. Аттрибутууд: alink = өнгө Бичиг баримт дах идэвхтэй холбоосуудын өнгийг тодорхойлно. background = хаяг Бичиг баримтын дэвсгэрт тавигдах зургийн хаягийг заана. bgcolor = өнгө Бичиг баримтын дэвсгэрийн өнгө. bgproperties = утга Internet Explorer2-с хойших хувилбаруудад.Уг утгыг тогтоосон байхад дэвсгэр зураг текстийг дагаж хөдлөхгvй. leftmargin = утга Internet Explorer2-с хойших хувилбаруудад.Бичиг баримтын зvvн хvрээний хэмжээг цэгээр тодорхойлно. link = өнгө Бичиг баримт дах холбогдоогvй(unvisited) гипертекст холбоосын өнгийг заана. text = өнгө Бичиг баримт дах ердийн текстийн өнгө. topmargin = утга Internet Explorer2-с хойших хувилбаруудад. Бичиг баримтын дээд хvрээний хэмжээг цэгээр тодорхойлно. vlink = өнгө Бичиг баримт дах холбогдсон(visited) холбоосын өнгийг заана. Жишээ нь: <body background="c:/image.jpg" alink="0124FF" link="FFFFCD" vlink="663366">
......................................
...............................
</body>
<BR>
Одоогийн текстийг, дараагийн мөрийн эхэнд очин тасална.Өөрөөр хэлбэл текстийг шинэ мөрнөөс эхлvvлдэг байна. Аттрибутууд: clear = хvрээ(margin) Текстийг таслаад мөн хvссэн хэмжээгээр доош нь, баруун, зvvн, эсвэл бvгд рvv нь шилжvvлнэ.
<CAPTION>...</CAPTION>
Хvснэгтэнд гарчиг тодорхойлдог. Аттрибутууд: аlign = байрлал Netscape-д гарчгийг босоо шугмын дагуу оройд(top), эсвэл ёроолд(bottom) нь олгодог. Default утга нь оройд нь голлуулсан(top centered) байдаг. Internet Exploler-д гарчгийг хэвтээ шугмын дагуу зvvн(left), төвд(center), баруун(right) талд эсвэл босоо шугмын дагуу оройд(top), эсвэл ёроолд(bottom) нь олгодог. Default утга нь оройд нь голлуулсан(top centered) байдаг. Босоо болон хэвтээ байрлалыг 2-нг нь зэрэг олгож болохгүй. valign = байрлал Internet Explorer2-с хойших хувилбаруудад. Босоо шугмын дагуу оройд(top), эсвэл ёроолд(bottom) нь олгодог. Default утга нь оройд (top ). Vvнийг Internet Explorer-д босоо болон хэвтээ байрлалд 2-ууланд нь гарчиг олгоход ашиглана.
<CENTER>...</CENTER>
Дайвар текстийг төвд байрлуулна.
<CITE>...</CITE>
Дайвар текстийг иш татсан мэт хэлбэрт оруулна.
<
Internet Explorer2-с хойших хувилбаруудад. Хvснэгтийн <colgroup> даx багануудын тохиргоог хийнэ. Аттрибутууд: align=утга Уг аттрибут нь баганын нvднvvд дэх текстийн байрлалыг тодорхойлдог. Left, center, right гэсэн утгуудыг авдаг. span=n <col>-р байгуулсан багануудын тоог тодорхойлно.
<COLGROUP>
Internet Explorer2-с хойших хувилбаруудад. Хvснэгтэн дэx багануудын тохиргоог хийнэ. Мөн <table> тагд rules=groups vед босоо шугамнууд нь хаана зурагдахыг заана. Аттрибутууд: align=утга Уг аттрибут нь баганын нvднvvд дэх текстийн байрлалыг тодорхойлдог. Left, center, эсвэл right гэсэн утгуудыг авдаг. span=n <colgroup> дах багануудын тоог тодорхойлно.
<COMMENT>...</COMMENT>
Internet Explorer2-с хойших хувилбаруудад.Бичиг баримтанд тайлбар байрлуулдаг. Тайлбарууд нь өөр бусад бvх браузеруудад харагдана. <!- - тайлбар текст- ->-р бvх браузеруудад тайлбар байрлуулдаг.
<DD>...</DD>
Тодорхойлолтын жагсаалт дах элементvvдийн, тодорхойлолтын хэлбэрийг нь хангаж өгдөг.
<DFN>...</DFN>
Дайвар текстийг тодорхойлолтын хэлбэрт оруулдаг.
<DIR>...</DIR>
<li> тагийг агуулдаг директор жагсаалтыг vvсгэдэг. Аттрибутууд: compact Жагсаалтыг, боломжтой бол илvv авсаархан болгодог.
<DIV>...</DIV>
Бичиг баримтанд бvлэг vvсгэдэг. Аттрибутууд: аlign=утга Текстийг бvлэг дотор байрлуулдаг. Авах утгууд нь left, center, болон right.
<DL>...</DL>
<dd> болон <dt> тагуудыг агуулдаг тодорхойлолтын жагсаалт vvсгэдэг. Аттрибутууд: compact Жагсаалтыг, боломжтой бол илvv авсаархан болгодог.
<DT>...</DT>
Тодорхойлолтын жагсаалтны элементvvдийн тодорхойлолтын бvлгийг илэрхийлдэг.
<EM>...</EM>
Дайвар текстийг нэмэлт онцолсон хэлбэрт шилжvvлдэг.
<EMBED>…</EMBED>
Объектыг бичиг баримтанд нэвтрvvлнэ. Аттрибутууд: src=хаяг Нэвтрvvлэх гэж буй объектын хаягийг тодорхойлно. height=n Объектыг нэврvvлэх мужийн өндөрийг тодорхойлно. name=нэр Нэвтрvvлсэн объектод нэр олгоно. width=n Объектыг нэврvvлэх мужийн өргөнийг тодорхойлно.
<FIELDSET>...</FIELDSET>
Маягтын мета болон элементvvдийн удирдлагуудыг нэгтгэдэг.
<FONT>…</FONT>
Текстийн өнгө, хэмжээ болон фонтыг нь тодорхойлно. Аттрибутууд: color=өнгө Текстийн өнгийг тодорхойлно. face=жагсаалт Текстийн фонтны хэлбэрийг тодорхойлно. Авах утга нь фонтны нэрнvvд. size=утга Текстийн фонтны хэмжээг тодорхойлно. Авах утга нь 1-с 7 хvртэл. Жишээ нь: <font color="black" size="4" face="Mon_Parsek"> HTML Lesson </font>
<FORM>...</FORM>
Маягт тодорхойлно. Аттрибутууд: action=хаяг Маягтыг боловсруулах программын хаяг. enctype=төрөл Маягтын элементvvд ямар байхыг тодорхойлдог. method=загвар Өгөгдөл дамжуулах загварыг тодорхойлно. Авах утгууд нь get болон post. Default утга нь get юм. target=нэр Зөвхөн Internet Explorer3-с хойших хувилбаруудад хvчинтэй. Vр дvн болон танилцуулга нь ачаалагдах зорилгын цонхыг тодорхойлно. Авах онцгой утгууд нь _bottom, _top, _parent болон _self.
<FRAME>...</FRAME>
Фреймийн олонлог дох фреймийг тодорхойлно. Аттрибутууд: bordercolor = өнгө Зөвхөн Netscape-д хvчинтэй. Хэрвээ фрейм нь хvрээтэй байхаар бол хvрээний өнгийг олгодог. frameborder = [1/0] Зөвхөн IE3. Фреймд 3-D хvрээ олгох эсэхийг шийднэ. Default утга нь хvрээг оруулдаг 1 гэсэн утга. 0 гэсэн утга нь хvрээг оруулдаггvй. frameborder = [yes/no] Зөвхөн Netscape. Фреймд 3-D хvрээ болон энгийн хvрээ олгох эсэхийг шийднэ. Default утга нь yes. marginheight = n Фреймийн өгөгдлvvдийн дээр болон доор n цэгийн хэмжээтэй зайг оруулдаг. marginwidth = n Фреймийн өгөгдлvvдийн баруун болон зvvн талд n цэгийн хэмжээтэй зайг оруулдаг. name= тэмдэгт мөр Фреймийн нэрийг тодорхойлно. noresize Хэрэглэгч өөрөө фреймийн хэмжээг олгох боломж өгдөг. scrolling=[yes/auto/no] scrollbar(гvйлгэгч шугам) хэрэгтэй эсэхийг тодорхойлно. src=хаяг Тухайн фреймд ачаалагдах эх бичиг баримтын хаяг. Уг тагийн тухай "Фрейм" бvлэгт тодорхой vзээрэй.
<FRAMESET>...</FRAMESET>
Фреймvvдийн цуглуулга болон бусад frameset-г тодорхойлно. Аттрибутууд: border = n Зөвхөн Netscape. Frameset дэх фреймийн хvрээний хэмжээг цэгээр олгоно. Default утга нь 5 цэгийн өргөнтэй байдаг. bordercolor = өнгө Зөвхөн Netscape. Frameset дэх фреймийн хvрээний өнгийг тодорхойлно. cols = жагсаалт Frameset дэх фреймийн тоо болон өргөнийг тодорхойлно. frameborder = [1/0] Зөвхөн IE. Фреймд 3-D хvрээ олгох эсэхийг шийднэ. Default утга нь хvрээг оруулдаг 1 гэсэн утга. 0 гэсэн утга нь хvрээг оруулдаггvй. frameborder = [yes/no] Зөвхөн Netscape. Фреймд 3-D хvрээ болон энгийн хvрээ олгох эсэхийг шийднэ. Default утга нь yes. framespacing = n Зөвхөн IE3. Хөрш фреймvvдийн хооронд нэмэлт зай олгоно. Утга нь цэгээр өгөгдөнө. rows=жагсаалт Frameset дэх фреймийн тоо болон өндөрийг тодорхойлно. |
HTML 5-ын тухай
HTML 5-ын хөгжүүлэлт WHATWG (Web Hypertext Application Technology Working Group) 2004 оноос эхэлсэн ба 2009 оноос W3C WHATWG хоёр хамтран HTML 5-ын хөгжүүлэлт дээр ажиллах болсон.
HTML 5 олон шинэ элемент, шинж чанаруудыг нэмж байгаа ба мөн олон элемент, шинж чанаруудыг устган өөрчилж байгаа. Жишээлбэл video, audio, canvas, section, article, header, nav гэсэн шинэ элементүүд нь мультимедиа, график, симантик хэрэглээнд зориулан нэмэгдсэн.
Одоогийн байдлаар мэдэгдээд байгаа шинэ элементүүдийг сүүлийн үеийн вэб хөтчүүд болон тэдгээрийн хөгжүүлэгдэж байгаа хувилбарууд дэмждэг болж байгаа ч бүрэн 100% дэмждэг вэб хөтөч одоогийн байдлаар гараагүй байна. Мөн таны ашиглаж байгаа вэб хөтөч ямар HTML 5-ыг хэр дэмжиж байгааг шалгах боломжтой болжээ. Шалгахын тулдhttp://html5test.com/ сайтруу орох хэрэгтэй.
HTML 5-ын шинэ элементүүд
Ихэнх шинэ элементүүд нь ерөнхийдөө бүр шинэ зүйл биш ба одоогийн вэб сайтуудад ямар нэгэн өөр технологи, аргачлал ашиглан хийсэн байдаг зүйлсүүд юм. Мөн вэб сайтуудад хэрэглэгдээд тогтмол ойлголт болсон зарим нэг ойлголтуудыг оруулж өгсөн байна. Жишээлбэл article, header, footer гэх мэт.
Доорх шинэ элемент бүр өөрийн гэсэн шинж чанартай ба шинж чанаруудыг дэлгэрэнгүй авч үзсэнгүй зарим нэг элементед жишээ код орууллаа.
Шинэ маркап элементүүд
article
|
Мэдээний бичлэг, блог, форум гэх мэт гадаад агуулгатай текст оруулах
|
aside
|
Тусдаа мэдээлэл оруулах
|
command
|
Товч эсвэл сонголт хийх эсвэл сонголт хийх
|
details
|
Баримтын тухай тайлбар мэдээлэл эсвэл баримтын нэг хэсэг
|
summary
|
Гарчиг, товчлол, нарийнчилсан мэдээлэл
|
figure
|
Хэсэг хэсэг мэдээллийг бүлэглэх
|
| figcaption |
Фигурийн гарчиг
|
footer
|
Баримт эсвэл хэсгийн доод хэсгийн мэдээлэл. Зохиогчийн нэр, он сар, холбоо барих мэдээлэл эсвэл зохиогчийн эрхийн мэдээлэл агуулсан байна
|
header
|
Баримт эсвэл хэсгийн удиртгал, навигашн агуулсан байна
|
hgroup
|
Хэсгийн гарчиг, h1-ээс h6 хүртэл ашиглана, үндсэн гарчиг нь том ба бусад нь жижиг байна
|
mark
|
Текстийг ялгаж харуулах
|
meter
|
Хэмжигдэхүүнд зориулсан, хамгийн их болон бага утга мэдэгдэж байгаа тохиолдолд ашиглана
|
nav
|
Хэсгийн навигашн
|
progress
|
Ажлын явцын төлвийг мэдээлэх
|
ruby
|
Руби тэмдэглэгээ хийхэд (Хятад тэмдэглэл эсвэл таних тэмдэг)
|
rt
|
Руби тэмдэглэгээний тайлбар
|
rp
|
Руби элементийг дэмждэггүй хөтчүүд юу харуулахыг
|
section
|
Баримтыг хэсэгчлэх. Бүлгүүд, дээд, доод хэсгийн мэдээлэл эсвэл өөр ямар нэгэн хэсэг
|
time
|
Цаг болон хугацааг тодорхойлох
|
wbr
|
Үгээр таслах. Мөрөөр таслахын боломжгүй байдлыг шийдсэн
|
Шинэ мэдээллийн элементүүд
audio
|
Мультимедиа агуулга, дуунууд, хөгжим эсвэл аудио стрим
|
video
|
Видео агуулга, клип эсвэл видео стрим
|
source
|
Видео эсвэл аудио мэдээллийн эх сурвалжаас оруулахад
|
embed
|
Эмбед агуулгад зориулсан, плуг-ин гэх мэт
|
Видео нь Ogg, MPEG 4 форматуудыг дэмждэг ба MPEG 4 формат нь өндөр нягтаршилтай видео бичлэг үзүүлэх чадвартай юм.
Жишээ код:
Дээрх жишээнд хоёр видео файлыг заасан нь хэрэв вэб хөтөч эхний файлыг дэмжихгүй эсвэл байхгүй тохиолдолд дараагийн видео файлыг шалгах зарчимаар ажилдагийг харуулжээ.
Канвас элемент
canvas
|
Графикийг скрипт ашиглан хийхэд
|
Канвас нь шинэ ойлголт бөгөөд тэгш өнцөгт хэлбэртэй талбай графикийн үйлдлүүд хийдэг. Будах, зурах, бичих, зураг оруулах.
Канвас ашиглан бөөрөнхийг ууссан өнгөөр будсан жишээ:
Шинэ формын элементүүд
datalist
|
Оруулах утганд зориулсан сонголтууд
|
keygen
|
Хэрэглэгчдийг баталгаажуулах түлхүүрүүдийг үүсгэх
|
output
|
Өөр өөр төрлийн гаралт, скриптээр бичигдсэн гаралт шиг
|
tel
|
Утасны дугаар оруулах
|
search
|
Хайх талбар
|
url
|
URL оруулах
|
email
|
Нэг эсвэл олон э-майл оруулах
|
datetime
|
Цаг, огноо оруулах
|
date
|
Огноо оруулах
|
month
|
Сар оруулах
|
week
|
Долоо хоног оруулах
|
time
|
Цаг оруулах
|
datetime-local
|
Дотоод цаг, огноо оруулах
|
number
|
Тоо оруулах
|
range
|
Оруулах тоонд хязгаарлалт хийх
|
color
|
Арван зургаатаар өнгө оруулах, #FF8800 гэх мэт
|
No comments:
Post a Comment