Lecture 2. html

2012-9-10
МУИС – МТС – КМТТ
Дэд проф, Док. Б. Сувдаа
Интернэт Технологийн Үндэс
Лекц – 2. HTML – ийн тухай

Агуулга
• HTML – ийн түүх
• HTML – ийн элементүүд
• Body буюу биеийн хэсэг
• Heading – гарчиг хэлбэржүүлэх
• Paragraph (Font, color, format …) – үндсэн текстийн
формат, фонт гэх мэт
• List – жагсаалт үүсгэх
• Link – холболт үүсгэх
• Image – зураг оруулах
• Table – хүснэгт үүсгэх
• Frame – фрэйм буюу хүрээ заагууд үүсгэх

HTML – ийн түүх
• 1992: HTML 1.0, Tim Berners-Lee анх санал болгосон
• 1993: HTML+, зарим нэмэлтүүд
• 1994: HTML 2.0, хамгийн сайн шинжтэй стандарт
• 1995: Стандарт бус Netscape шинжүүд
• 1996: Netscape ба Explorer шинжүүдийн өрсөлдөөн
• 1996: HTML 3.2, Browser Wars дууссан
• 1997: HTML 4.0, stylesheet-үүд танилцуулагдсан
• 1999: HTML 4.01, ялагч болсон
• 2000: XHTML 1.0, HTML 4.01 – ийн XML хувилбар
• 2001: XHTML 1.1, модулчлагдсан
• 2002: XHTML 2.0, энгийн бөгөөд ерөнхийлсөн байдалтай болсон.

4
BODY Элемент
<BODY attributename="attributevalue">
• Хуучин attributes (гэхдээ хэрэглэгддэг)
– BACKGROUND=“Sunset.jpg”
– BGCOLOR=color
– TEXT=color
– LINK=color (зочлоогүй линк)
– VLINK=color (зочилсон линк)
– ALINK=color (сонгох үед)

5
Heading элементүүд
<H1 ...> text </H1> - Хамгийн том гарчиг
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> - хамгийн жижиг дэд гарчиг
ALIGN="position" – хаанаас нь тэгшлэхийг зааж өгнө. Тогтсон утга
нь зүүн left (default), үүнийг голлуулах буюу center, баруунаас
тэгшлэх right утга өгч болно.

6
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>

7
<P> Paragraph – Үндсэн текст
• <P> үндсэн текстийг заана.
• Мөн ALIGN="position" (left, center, right)
• Олон <P> - үүдийг нэг дор хэрэглэж болно.
Хоосон мөр үүсдэггүй.
• Хоосон мөр үүсгэхэд <BR> - ийг хэрэглэнэ.
• Бүрэн тусгаарлагдсан текстэд <P> ба </P> -
ийг хэрэглэнэ.
• Мөн </P> нь байж ч болно, үгүй ч байж
болно (сонголттой).

8
Жишээ нь:
<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered text </P>
<P><P><P>
<P ALIGN="right"> Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY>

9
<PRE> урьдчилан хэлбэржүүлсэн
текст
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>

10
Тусгай тэмдэгтүүд
Тэмдэгт Хэрэглээ
< <
> >
& &
" "
Space - зай  

11
Өнгө
• Дэвсгэр өнгө – BGCOLOR ба өнгө –
COLOR
– Үндсэн өнгүүд ашиглана (red – улаан, blue –
хөх, green – ногоон, ...)
– Бүх өнгө 6-н арван зургаатын тоогоор
илэрхийлэгдэнэ. Утга нь: RRGGBB
– FF0000 – улаан
– 888888 – саарал
– 004400 – хар ногоон
– FFFF00 – шар

12
Фонт
Жишээ нь:
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier"
The third line has this additional text </FONT>
CCS гарч ирснээс хойш хэрэглэгдэхээ больсон.

13
Дугаарлагдсан жагсаалт
Жишээ нь:
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>

14
Дугаарлагдаагүй (Тоочсон)
жагсаалт
Жишээ нь:
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>

15
Бодит тэмдэгтийн хэлбэрүүд
Жишээ нь:
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>

16
Хуурмаг тэмдэгтийн хэлбэрүүд
Жишээ нь:
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly
Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized
Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray
Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development
Kit">JDK Acronym</ACRONYM>

17
<A> Anchors (HyperLinks)
Авсолют URL холбох:
Жишээ нь:
<A HREF="http:www.microsoft.com">
Microsoft </A>.
Хамааралтай URL холбох:
<A HREF="#references"> references </A>
URL доторх дэд хэсэгтэй холбох:
<A HREF="www.amazon.com/#reference">
reference for our company. </A>

18
Hyperlinks
Жишээ нь:
<BODY>
<H3>Welcome to <A
HREF="http://www.cs.virginia.edu">
<STRONG>Computer Science</STRONG></A>
at the <A HREF="www.virginia.edu">University
of Virginia.</A>
</H3>
</BODY>

19
Зураг
• SRC шаардагдана.
• WIDTH, HEIGHT – өргөн, өндөр хуудасны
юмуу хүрээний хэмжээг утгаар нь эсвэл
процентоор өгнө. Жишээ нь:
– WIDTH="357"
– HEIGHT="50%"
• Зураг өгөгдсөн хэмжээнд дүрслэгдэнэ.

20
Align=position зураг/текстийн байршил
Left Зураг зүүн ирмэгт; текст зургийн баруун талд
Right Зураг баруун ирмэгт; текст зургийн зүүн талд
Top Зураг зүүн талд; текст зургийн дээд талд
Bottom Зураг зүүн ирмэгт; текст зургийн доод талд
Middle Текст зургийг голлоно
Зураг

21
Зураг
Жишээ нь:
<BODY>
<img src="dolphin.jpg" align="left" width="150"
height="150" alt="dolphin jump!">
This is a very cute dolphin on the left!<br>
You can see text wrap around it<br>
</BODY>
</HTML>

25
Хүснэгт
<TABLE> хүснэгтийн таг
<CAPTION> хүснэгтийн гарчиг
<TR> хүснэгтийн мөр
<TH> Хүснэгтийн баганын толгойн мэдээлэл
<TD> Хүснэгтийн баганын өгөгдөл

26
Хүснэгт
Жишээ нь:
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
</TABLE>

27
<TABLE> элементийн шинжүүд
• ALIGN=position -- left, center, right – хүснэгтйиг ззүн, голд,
баруунд байрлуулах
• BORDER=number – хүрээний өргөн цэгээр (default 0)
• CELLSPACING=number – нүднүүдийн хоорондын зай цэгээр,
тогтсон утга нь 3
• CELLPADDING=number – нүдний хүрээ ба хүснэгтийн
элемент хоёрын хоорондох зай цэгээр, тогтсон утга нь 1
• WIDTH=number[%]– хуудас юмуу фрэймийн өргөн цэгээр
эсвэл процентоор өгөх

28
• cellspacing=10
• cellpadding=10

29
BGCOLOR=color – хүснэгтийн дэвсгэр өнгө
RULES=value – дотоод шугамуудыг харуулах эсэх;
утгууд нь: none, rows, cols, ба all (default)
Жишээ нь:
<TABLE COLS=“40%, *,*”>
<TABLE ROWS=“*,*”>

30
<TR> Хүснэгтийн мөрний шинж
Мөрний утгууд:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom (босоо)
BGCOLOR -- background color
Жишээ нь:
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top"
BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle"
BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom"
BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>

31
<TD> Хүснэгтийн нүдний
шинжүүд
Утгууд нь:
colspan -- хэдэн багана
rowspan – хэдэн мөр
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200"
border="1">
<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>

32
Фрэйм
• Фрэйм нь хуудсуудыг дэлгэцэд хэрхэн харуулахыг
загварчилдаг.
• <FRAME> - ийн шинжүүд
– FRAMEBORDER – yes юмуу 1 –ийг хүрээтэй байх үед
өгнө
– FRAMESPACING – хүрээний өргөн
– BORDERCOLOR – өнгө
– SRC – тухайн фрэймд байршуулах HTML файл
– NAME –TARGET шинжийн нэр

33
Фрэйм
– MARGINWIDTH – зүүн баруунаас авах зай
(margin)
– MARGINHEIGHT – дээр доороос авах зай (margin)
– SCROLLING – yes юмуу 1 – ээр scroll bar – ийг
зөвшөөрнө
– NORESIZE – yes юмуу 1 resizing хийхийг
хориглоно

34
Фрэйм
Жишээ нь:
<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
<FRAMESET COLS="*,*">
</FRAMESET>
</FRAMESET>

35
Фрэйм
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*">
</FRAMESET>
<FRAMESET COLS="*,*">
</FRAMESET>
</FRAMESET>

36
Фрэйм
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
<FRAMESET COLS="40%, *">
</FRAMESET>
</FRAMESET>

Лавлах материал
• Линкүүд:
– http://www.w3schools.com/
– http://www.deitel.com/Books/InternetWeb
Scripting/InternetWorldWideWebHowtoPro
gram4e/tabid/2048/Default.aspx
• Хайлт хийх түлхүүр үгүүд:
– HTML

Lecture 2. html

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (8)

Similar to Lecture 2. html

Similar to Lecture 2. html (13)

Lecture 2. html