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>

22

ALIGN="left"

23

ALIGN="right"

24

ALIGN=“bottom"

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/InternetWebScripting/InternetWorldWideWebHowtoProgram4e/tabid/2048/Default.aspx

• Хайлт хийх түлхүүр үгүүд:

– HTML

http://www.w3schools.com/

http://www.deitel.com/Books/InternetWebScripting/InternetWorldWideWebHowtoProgram4e/tabid/2048/Default.aspx



Асуулт ?

lecture 2. html

Documents