Lecture 2. html

1,157 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,157
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lecture 2. html

  1. 1. 2012-9-10 МУИС – МТС – КМТТ Дэд проф, Док. Б. Сувдаа Интернэт Технологийн Үндэс Лекц – 2. HTML – ийн тухай
  2. 2. Агуулга • HTML – ийн түүх • HTML – ийн элементүүд • Body буюу биеийн хэсэг • Heading – гарчиг хэлбэржүүлэх • Paragraph (Font, color, format …) – үндсэн текстийн формат, фонт гэх мэт • List – жагсаалт үүсгэх • Link – холболт үүсгэх • Image – зураг оруулах • Table – хүснэгт үүсгэх • Frame – фрэйм буюу хүрээ заагууд үүсгэх
  3. 3. 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. 4. 4 BODY Элемент <BODY attributename="attributevalue"> • Хуучин attributes (гэхдээ хэрэглэгддэг) – BACKGROUND=“Sunset.jpg” – BGCOLOR=color – TEXT=color – LINK=color (зочлоогүй линк) – VLINK=color (зочилсон линк) – ALINK=color (сонгох үед)
  5. 5. 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. 6. 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. 7. 7 <P> Paragraph – Үндсэн текст • <P> үндсэн текстийг заана. • Мөн ALIGN="position" (left, center, right) • Олон <P> - үүдийг нэг дор хэрэглэж болно. Хоосон мөр үүсдэггүй. • Хоосон мөр үүсгэхэд <BR> - ийг хэрэглэнэ. • Бүрэн тусгаарлагдсан текстэд <P> ба </P> - ийг хэрэглэнэ. • Мөн </P> нь байж ч болно, үгүй ч байж болно (сонголттой).
  8. 8. 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. 9. 9 <PRE> урьдчилан хэлбэржүүлсэн текст <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>
  10. 10. 10 Тусгай тэмдэгтүүд Тэмдэгт Хэрэглээ < &lt; > &gt; & &amp; " &quot; Space - зай &nbsp;
  11. 11. 11 Өнгө • Дэвсгэр өнгө – BGCOLOR ба өнгө – COLOR – Үндсэн өнгүүд ашиглана (red – улаан, blue – хөх, green – ногоон, ...) – Бүх өнгө 6-н арван зургаатын тоогоор илэрхийлэгдэнэ. Утга нь: RRGGBB – FF0000 – улаан – 888888 – саарал – 004400 – хар ногоон – FFFF00 – шар
  12. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 19 Зураг • SRC шаардагдана. • WIDTH, HEIGHT – өргөн, өндөр хуудасны юмуу хүрээний хэмжээг утгаар нь эсвэл процентоор өгнө. Жишээ нь: – WIDTH="357" – HEIGHT="50%" • Зураг өгөгдсөн хэмжээнд дүрслэгдэнэ.
  20. 20. 20 Align=position зураг/текстийн байршил Left Зураг зүүн ирмэгт; текст зургийн баруун талд Right Зураг баруун ирмэгт; текст зургийн зүүн талд Top Зураг зүүн талд; текст зургийн дээд талд Bottom Зураг зүүн ирмэгт; текст зургийн доод талд Middle Текст зургийг голлоно Зураг
  21. 21. 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> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML>
  22. 22. 22 ALIGN="left"
  23. 23. 23 ALIGN="right"
  24. 24. 24 ALIGN=“bottom"
  25. 25. 25 Хүснэгт <TABLE> хүснэгтийн таг <CAPTION> хүснэгтийн гарчиг <TR> хүснэгтийн мөр <TH> Хүснэгтийн баганын толгойн мэдээлэл <TD> Хүснэгтийн баганын өгөгдөл
  26. 26. 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> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> </TABLE>
  27. 27. 27 <TABLE> элементийн шинжүүд • ALIGN=position -- left, center, right – хүснэгтйиг ззүн, голд, баруунд байрлуулах • BORDER=number – хүрээний өргөн цэгээр (default 0) • CELLSPACING=number – нүднүүдийн хоорондын зай цэгээр, тогтсон утга нь 3 • CELLPADDING=number – нүдний хүрээ ба хүснэгтийн элемент хоёрын хоорондох зай цэгээр, тогтсон утга нь 1 • WIDTH=number[%]– хуудас юмуу фрэймийн өргөн цэгээр эсвэл процентоор өгөх
  28. 28. 28 <TABLE> элементийн шинжүүд • cellspacing=10 • cellpadding=10
  29. 29. 29 <TABLE> элементийн шинжүүд BGCOLOR=color – хүснэгтийн дэвсгэр өнгө RULES=value – дотоод шугамуудыг харуулах эсэх; утгууд нь: none, rows, cols, ба all (default) Жишээ нь: <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”>
  30. 30. 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. 31. 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. 32. 32 Фрэйм • Фрэйм нь хуудсуудыг дэлгэцэд хэрхэн харуулахыг загварчилдаг. • <FRAME> - ийн шинжүүд – FRAMEBORDER – yes юмуу 1 –ийг хүрээтэй байх үед өгнө – FRAMESPACING – хүрээний өргөн – BORDERCOLOR – өнгө – SRC – тухайн фрэймд байршуулах HTML файл – NAME –TARGET шинжийн нэр
  33. 33. 33 Фрэйм – MARGINWIDTH – зүүн баруунаас авах зай (margin) – MARGINHEIGHT – дээр доороос авах зай (margin) – SCROLLING – yes юмуу 1 – ээр scroll bar – ийг зөвшөөрнө – NORESIZE – yes юмуу 1 resizing хийхийг хориглоно
  34. 34. 34 Фрэйм Жишээ нь: <FRAMESET ROWS="75%,25%"> <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET>
  35. 35. 35 Фрэйм <FRAMESET ROWS="25%,75%" <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET>
  36. 36. 36 Фрэйм <FRAMESET ROWS="*,*"> <FRAMESET COLS="15%, 2*, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> <FRAMESET COLS="40%, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> </FRAMESET>
  37. 37. Лавлах материал • Линкүүд: – http://www.w3schools.com/ – http://www.deitel.com/Books/InternetWeb Scripting/InternetWorldWideWebHowtoPro gram4e/tabid/2048/Default.aspx • Хайлт хийх түлхүүр үгүүд: – HTML
  38. 38. Асуулт ?

×