Transcript Slide 1
ทส215 การเขียนโปรแกรมบนเว็บ 1 HTML & CSS ั อาจารย์อรรถวิท ชงคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th 1 [email protected] Basic HTML Tags & Elements Text Formatting Hyperlinks Images Tables Layer 2 [email protected] Tags vs. Elements HTML เป็ นกลุม ่ ของ tags ซงึ่ ระบุโครงสร ้างและเนือ ้ หาชนิดต่าง ๆ ั ลักษณ์นี้ < > tags จะอยูใ่ นสญ • <img src="image.gif" /> สว่ นใหญ่จะต ้องมี tag เปิ ด และ ปิ ดท ้าย • <title> and </title> HTML element is an object enclosed by a pair of tags <title>My Home Page</title> คือ TITLE element <b>This text appears bold.</b> คือ BOLD element <p>Part of this text is <b>bold</b>.</p> คือ a PARAGRAPH element that contains a BOLD element 3 [email protected] ้ ฐานการเขียน HTML พืน <HTML>...</HTML> เป็ น tag หลักในทุกๆ ไฟล์ html เพือ ่ บ่งบอกถึงประเภท ของไฟล์ และทุกๆ tag จะต ้องอยูภ ่ ายใน <html>…</html> ้ <HEAD>...</HEAD> ใชก้ าหนดหัวข ้อเอกสารเพือ ่ ให ้ผู ้ใชทราบว่ า ณ ขณะนีอ ้ ยู่ ในหน ้าเว็บไหน และ ลักษณะต่าง ๆ ของเว็บเพจนั น ้ ๆ ซงึ่ ใชกั้ บ <TITLE>...</TITLE> ้ <TITLE>...</TITLE> ใชแสดงข ้อความในสว่ นของ Title bar ของวินโดวส ์ ้ อ <BODY>...</BODY> ใชเพื ่ กาหนดเนือ ้ หาและ tag อืน ่ ๆ บนหน ้าเว็บซงึ่ ทุก ๆ tag จะต ้องอยูภ ่ ายใน <body>…</body> เสมอ 4 [email protected] Structural elements ไฟล์ HTML ประกอบด ้วย 2 สว่ นหลัก ๆ ได ้แก่ HEAD ประกอบด ้วย setup information สาหรับ browser และ Web page BODY ประกอบด ้วย content ต่าง ๆ ทีจ ่ ะแสดงใน Web page <html> <head> <title>Title for Page</title> </head> <body> Text that appears in the page </body> </html> 5 [email protected] Example <HTML> <HEAD> <TITLE>Test Page</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FF0000"> ี า ตัวหนั งสอ ื สแ ี ดง--** **--เรากาหนด ฉากหลัง เป็ นสด </BODY> </HTML> 6 [email protected] Properties in <BODY> ี องตัวอักษรทัง้ หมดภายในเว็บเพจ TEXT กาหนดสข ี น BGCOLOR กาหนดสพ ื้ หลังของเว็บเพจ ่ กาหนดเป็ นสข ี าว <BODY BGCOLOR="#000000"> เชน ี อง Link LINK กาหนดสข ี อง Link ขณะทีถ ALINK กาหนดสข ่ ก ู คลิก ี อง Link เมือ VLINK กาหนดสข ่ เคยถูกคลิกไปแล ้ว 7 [email protected] Example <HTML> <HEAD> <TITLE>Test BODY Page </TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINKS="#0000CC" VLINK="#0000CC" > ี าว **ฉากหลังเป็ นสด ี า **ลิงค์เป็ นสน ี ้ าเงิน** **กาหนด Font เป็ นสข </BODY> </HTML> 8 [email protected] Text layout <html> <head> <title>Title for Page</title> </head> <body> This is a whole lot of text that goes on and on and on and on . . </body> </html> - ระหว่าง BODY มีได ้หลายบรรทัด - text layout และ spacing จะไม่ม ี ผลกับ browser - browser จะจัดข ้อความตามขนาด ของหน ้าเว็บโดยอัตโนมัต ิ 9 [email protected] Overriding default layouts <html> <head> <title>Title for Page</title> </head> <body> <p> This is a paragraph of text<br/> made up of two lines. </p> <p> This is another paragraph with a GAP between some of the words. </p> <p> This paragraph is<br/> indented on the first line<br/> but not on subsequent lines. </p> </body> </html> 10 ิ ซายโดย ้ - ข ้อความจะชด อัตโนมัต ิ - <br/> เป็ นการ Enter - <p>…</p> การเพิม ่ ย่อ หน ้าใหม่ ่ งว่าง - เป็ นการเคาะชอ [email protected] Separating blocks of text <html> <head> <title>Title for Page</title> </head> <body> <h1>Major heading 1</h1> <p>Here is some text.</p> <h2>Subheading</h2> <p>Here is some subtext.</p> <hr/> <h1>Major heading 2</h1> <p>Here is some more text.</p> </body> </html> <h1>…</h1> tags สร ้าง large, bold heading <h2>…</h2> tags สร ้าง slightly smaller heading <h6>…</h6> tags สร ้าง tiny heading ้ <hr/> วาดเสนแบ่ งหน ้าจอ <hr width="50%" /> sets width <hr size=10 /> sets thickness 11 [email protected] Aligning text <html> <head> <title>Title for Page</title> </head> <body> <h1 style="text-align:center">Centered Heading</h1> <p>Here is some left-justified text (which is the default in HTML).</p> <p style="text-align:center"> Here is some centered text. </p> <div style="text-align:right"> <h2>Right-justified Heading</h2> <p>Here is some right-justified text.</p> </div> </body> </html> 12 [email protected] Text styles <html> <head> <title>Title for Page</title> </head> <body> <p>Text can be emphasized using <b>bold</b>, <i>italics</i>, or even <big>resizing</big>. <br/> <u>Underlining</u> text is not generally recommended since it looks too much a like a hyperlink. <br/> The typewriter font is good for displaying code: <small><tt>sum = sum + i;</tt></small> </p> </body> </html> 13 [email protected] More text styles <html> <head> <title>Title for Page</title> </head> <body> <p><span style="color:red">Subscripts</span> (e.g., x<sub>1</sub>) and <span style="color:blue">superscripts </span> (e.g., 2<sup>10</sup>) can be embedded directly in text. </p> <p> In order to avoid affecting line spacing, usually it should be made smaller (e.g., <small>2<sup>10</sup></small>). </p> </body> </html> 14 [email protected] Font ื่ ขนาด และลักษณะต่าง ๆ <FONT>...</FONT> สาหรับคาสงั่ font นีจ ้ ะใชก้ าหนดชอ ของตัวอักษร ่ สามารถกาหนดชนิดของตัวอักษร เชน • ตัวหนา <B>...</B> • ตัวเอียง <I>...</I> ้ • ขีดเสนใต ้ <U>....</U> ี องตัวอักษร • สข 15 [email protected] Example <HTML> <HEAD><TITLE>Test Font </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FONT> font ขนาดปกติ</FONT><BR> <FONT SIZE=1> font size=1</FONT> ื ภายใน Tags นีจ **ตัวหนังสอ ้ ะเปลีย ่ นไปตามขนาดทีเ่ ราเลือก** <FONT SIZE=2> font size=2</FONT><BR> <FONT SIZE=3> font size=3</FONT><BR> <FONT SIZE=4><B> font size=4 ตัวหนา<B> </FONT><BR> <FONT SIZE=4><I> font size=4 ตัวเอียง</I></FONT><BR> ้ <FONT SIZE=4><U> font size=4 ตัวขีดเสนใต ้</U></FONT><BR> <FONT SIZE=5> font size=5</FONT><BR> <FONT SIZE=6> font size=6</FONT><BR> <FONT SIZE=7> font size=7</FONT><BR> ื สน ี ้ าเงิน <FONT SIZE=7 COLOR="BLUE"> font size=7 ตัวหนังสอ </FONT> </BODY> </HTML> 16 [email protected] Lists <html> <head> <title>Title for Page</title></head> <body> <p> <ol> <li>First thing. <li>Second thing. <li>Third thing. </ol> </p> <p> <dl> <dt>HTML <dd>HyperText Markup Language <dt>HTTP <dd>HyperText Transfer Protocol </dl> </p> </body> </html> 17 [email protected] 18 [email protected] Hyperlinks <html> <head> <title>Title for Page</title> </head> <body> <p> <a href="http://www.itsci.mju.ac.th"> Information Technology of MAEJO</a> <br> <a href="page09.html" target="_blank"> Open page09 in a new window</a> </p> </body> </html> 19 [email protected] Hyperlinks (cont.) <html> <head> <title>Title for Page</title></head> <body> <p align="center"> [<a href="#HTML">HTML</a>|<a href="#HTTP">HTTP</a> |<a href="#IP">IP</a> |<a href="#TCP">TCP</a> ] </p> <p>Computer acronyms: <dl> <a name="HTML"></a><dt>HTML <dd>HyperText Markup Language <a name="HTTP"></a><dt>HTTP <dd>HyperText Transfer Protocol <a name="IP"></a><dt>IP <dd>Internet Protocol <a name="TCP"></a><dt>TCP <dd>Transfer Control Protocol </p> </body> </html> 20 [email protected] Images can include images using IMG โดยทั่วไป browsers สามารถแสดงผล GIF และ JPEG files ั plug-in applications สาหรับการแสดงผล รูปแบบอืน ่ ๆ ต ้องอาศย <img src="filename" alt="alternate text" /> <html> <head> <title>Title for Page</title> </head> <body> <div style="text-align:center"> <img src=“images/itmju.gif" alt=“it mju" /> <p>it mju</p> </div> </body> </html> 21 [email protected] Tables ิ ขอบซาย ้ table จัดการข ้อมูล rows และ columns โดยทั่วไป column จะอยูช ่ ด <html> <head> <title>Title for Page</title> </head> <body> <table> <tr> <td>foo</td> <td>bar</td> </tr> <tr> <td>bizbaz</td> <td>booboo</td> </tr> </table> </body> </html> 22 [email protected] Layout in a table <html> <head> <title>Title for Page</title> </head> <body> <table border=1> <tr align="center"> <td>foo<br>foo</td> <td valign="top">bar</td> </tr> <tr> <td>bizbaz</td> <td>booboo</td> </tr> </table> </body> </html> 23 [email protected] Table width <html> <head> <title>Title for Page</title> </head> <body> <table width="100%"> <tr> <td>left-most </td> <td align="right">right-most</td> </tr> </table> </body> </html> 24 [email protected] Other table options <html> <head> <title>Title for Page</title></head> <body> <table border=1 cellspacing=4 cellpadding=8> <tr> <th>HEAD1</th> <th>HEAD2</th> <th>HEAD3</th> </tr> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <td rowspan=2 align="center"> four </td> <td colspan=2 align="center"> five </td> </tr> <tr> <td> six </td> <td> seven </td> </tr> </table> </body> </html> 25 [email protected] Layer : DIV <html> <head> <title>Title for Page</title> </head> <body> <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; z-index:1;" > Text In Layer Here </div> </body> </html> style=“display: inline;” style=“display: none;” = แสดงข ้อมูลให ้ปรากฏ ่ น/ไม่แสดงข ้อมูล = ซอ 26 [email protected] DOCTYPE XHTML XHTML XHTML XHTML 1.0 Strict 1.1 1.0 Transitional 1.0 Frameset 27 [email protected] XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ้ ้าเว็บแบบ XHTML 1.0 Strict นี้ เหมาะสมจะใชเมื ้ อ การใชหน ่ คุณมั่นใจว่า ิ้ หน ้าเว็บทีเ่ ขียนนัน ้ ล ้วนแล ้วแต่เป็ นโครงสร ้างภาษาแบบ XHTML ทัง้ สน และอนุญาตให ้ตกแต่งหน ้าเว็บด ้วย CSS เท่านัน ้ ไม่สามารถเขียน <body bgcolor=black></body> ได ้ 28 [email protected] XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ลักษณะการใช ้ คล ้ายกันกับ XHTML 1.0 Strict คือใช ้ XHTML คูก ่ บ ั CSS ้ อ แต่ควรใชเมื ่ ต ้องการ เขียนโครงสร ้างเว็บแบบ ใหม่ทงั ้ หมด (XML) 29 [email protected] XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ้ ง้ CSS กับ XHTML แบบนี้ อนุญาตให ้เราใช ้ HTML 4.0 ร่วมได ้ สามารถเรียกใชทั ่ <body bgcolor=red></body> เชน หรือ เขียนแบบใช ้ css <body style=”background-color: red;”> ข ้อดีของ XHTML 1.0 Transitional คือการทีจ ่ ะชว่ ยให ้ บราวเซอร์ เก่าๆ ้ โดยเฉพาะ IE6 นัน ้ สามารถ เข ้าใจภาษา ได ้ใกล ้เคียงกัน และ เอาไปใชในกรณี ท ี่ XHTML บาง tag ไม่สามารถใชกั้ บ บราวเซอร์เก่าๆ ได ้ 30 [email protected] XHTML 1.0 Frameset ใชกั้ บเฟรม(Fram) กรณีเอาหน ้าเว็บมาแบบ เฟรม 31 [email protected] Meta Element ่ กาหนดคาสาคัญสาหรับ search engine หรือ ใชก้ าหนดคุณสมบัตใิ ห ้เว็บเพจ เชน เพิม ่ เติม ข ้อความตอบรับจาก HTTP (HTTP response header) เพือ ่ เป็ นประโยชน์ ่ การ refresh หน ้าเว็บเพจ หรือการกาหนดชุด ต่อการทางานของเว็บเบราเซอร์ เชน ตัวอักษร เป็ นต ้น Meta Element มี 2 รูปแบบ คือ META NAME META HTTP-EQUIV 32 [email protected] META NAME ใชส้ าหรับกาหนดคาค ้น, รายละเอียด สาหรับ search engine มีรป ู แบบคาสงั่ และ attribute value ของ name หลักๆ 3 value คือ <META NAME="…" CONTENT="…"> NAME= “keywords” หรือ “Description” หรือ “Robots” Content= ”ข ้อความของ keyword” ”ข ้อความของ Description” ”คาสงั่ สาหรับ Robot ใน search engine” 33 [email protected] Example <META NAME="Keywords" CONTENT="keyword1,keyword2,keyword3"> บรรยายเว็บไซต์ ด ้วยคาสาคัญ <META NAME="Description" CONTENT="Describe your site in a single phrase no exceeding 20 words"> บรรยายเว็บไซต์ ด ้วยประโยคสรุป <META NAME="robots" CONTENT="index,follow"> คาสงั่ สาหรับ search engine ให ้ทาการ index หน ้าปั จจุบน ั และทุกหน ้าทีห ่ น ้า ปั จจุบน ั link ไป <META NAME="robots" CONTENT="noindex,nofollow,noarchive"> คาสงั่ สาหรับ search engine ไม่ให ้ทาการ index หน ้าปั จจุบน ั และทุกหน ้าทีห ่ น ้า ปั จจุบน ั link ไป รวมถึงไม่ให ้เก็บข ้อมูลใน cache ของ search engine ด ้วย 34 [email protected] META HTTP-EQUIV ใชส้ าหรับกาหนดชุดของตัวอักษรทีใ่ ช ้ หรือสาหรับสงั่ refresh หน ้าเว็บเพจหรือ ให ้ไปที่ web site หรือไฟล์ทก ี่ าหนด ตามเวลาทีก ่ าหนด (delay เป็ นวินาที) ้ มีคาสงั่ และ attribute value ทีใ่ ชมาก <META HTTP-EQUIV="…" CONTENT="…"> HTTP-EQUIV= “Content-Type” หรือ “Refresh” Content= “คาสงั่ 1 ; คาสงั่ 2 ; คาสงั่ 3” 35 [email protected] Example <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> character set ชุดตัวอักษร สาหรับการแสดงผลตัวอักษร Western <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=Windows-874"> <meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> character set ชุดตัวอักษร สาหรับการแสดงผลในภาษาไทย ไม่ควรเว ้นวรรค หรือระบุเป็ น อย่างอืน ่ สาหรับการสร ้างเว็บภาษาไทย <meta http-equiv="refresh" content="10;URL='http://www.borland.com"> ให ้ refresh หลัง 10 วินาที แล ้วไปที่ www.borland.com <meta http-equiv="refresh" content="180"> ให ้ refresh หน ้านี้ เมือ ่ ครบ 180 วินาที่ (3 นาที) อาจใชส้ าหรับเว็บที่ update ข ้อมูลบ่อยๆ ่ Chat room ตลอดเวลา เชน 36 [email protected] CSS Cascading Style Sheets 37 [email protected] What’s CSS การกาหนดรูปแบบทีเ่ ป็ นมาตรฐานการแสดงผลทางหน ้า web page ให ้ เป็ นไปตามรูปแบบทีก ่ าหนด Font Color Size Width Height align … 38 [email protected] Types of CSS 1 External 2 Embedded 3 Imported 4 Inline 39 [email protected] External Connection made via the LINK tag Use the optional TYPE attribute to specify a media type type/css <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css” /> </head> 40 [email protected] Internal/Embedded Style characteristics are embedded in the HEAD section of the webpage Perhaps best used when a single page requires a unique style sheet <head> <style type=“text/css”> hr { color: navy} body {margin-left: 20px} </style> </head> 41 [email protected] Imported Allows for using style sheets from other sources Must be included at the beginning of the style sheet using the @import statement Other CSS rules can be included @import url(form.css); @import url(board.css); 42 [email protected] Inline Least flexible Requires each element to be tagged if you want them to appear differently Looses the advantage of using CSS <p style=“color: yellow; font-family: verdana”> This is a paragraph </p> <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; z-index:1;" > Text In Layer Here </div> 43 [email protected] Using multiple sheets You can use multiple sheets to define the style of your document Internal styles will override external styles, if they are duplicated h3 {color: red; text-align: right; font-size: 8pt} (external CSS) h3 {text-align: center; font-size: 20pt} (internal CSS) = h3 {color: red; text-align: center; font-size: 20pt } 44 [email protected] The Box Model 45 [email protected] Basic CSS Syntax 46 [email protected] Basic CSS Syntax Three parts: selector property value } declaration selector {property: value} p{ text-align: center; color: navy; font-family: arial } 47 [email protected] Basic CSS Syntax Selectors can be grouped so that a common property can be specified <style type="text/css"> h1,h2,h3,h4,h5,h6 { color: yellow } </style> <h1> This is a level 1 heading </h1> <h2> This is a level 2 heading </h2> 48 [email protected] CSS Syntax - class The class selector allows you to create different styles for the same HTML element. <style type="text/css"> p.right { text-align: right } p.center { text-align: center } </style> <p class=“right”> This paragraph will be right aligned. </p> 49 [email protected] CSS Syntax - class <style type="text/css"> .center { text-align: center } </style> <h1 class=“center”> This heading will be centered </h1> <p class=“center”> So will this text </p> 50 [email protected] Example Background Properties 51 [email protected] Background properties Basic syntax background background-color background-image background-repeat background-attachment background-position 52 [email protected] Background properties All attributes can be set in a single declaration: background: #000000 url(‘psumark.gif’) no-repeat fixed center 53 [email protected] Background properties Setting the body background (internal CSS) body { background: #000000 url(‘psumark.gif’) no-repeat fixed center } 54 [email protected] Background properties Setting the body background (external CSS) body: { background: #000000 url(‘psumark.gif’) no-repeat fixed center } 55 [email protected] Text properties Commonly used attributes color direction text-align text-decoration text-indent 56 [email protected] Text properties color sets the color of the text color can be represented by the • color name (red), • rgb value (rgb(255,0,0)), • by a hexadecimal number (#ff0000) Syntax body {color: #ff0000} 57 [email protected] Text properties direction sets the direction of the text can be set as left to right (ltr) or right to left (rtl) Syntax body {direction: rtl} 58 [email protected] Text properties text-align aligns the text in an element possible values are left, right, center and justify Syntax p {text-align: center} 59 [email protected] Text properties text-decoration adds certain decoration elements to the text possible values are none, underline, overline, line-through and blink Syntax p {text-decoration: underline} 60 [email protected] Text properties text-indent indents the first line of text inside an element possible values are length (defines a fixed value) and % (defines a % of the parent element) Syntax p {text-indent: 20px} 61 [email protected] Font properties font-style font-variant font-weight font-size/line-height font-family 62 [email protected] Font properties font-style Normal Italic oblique Syntax: body {font-style: italic} 63 [email protected] Example Style definition <html > <head> <style type="text/css"> p { color: red; background: yellow; } </style> </head> <body > <p>This is a paragraph</p> <p>This is another longer paragraph</p> </body> </html> Content [email protected] www.themegallery.com Text p{ } font-family: Vivaldi, Helvetica, sans-serif; font-style: italic; font-weight: bold; font-size: 30px; text-decoration: underline; letter-spacing: 0.1em; word-spacing: 1em; [email protected] www.themegallery.com Defining your own style - a class Instead of modifying existing elements like <p>.. Often useful to invent your own style Called a class Then in HTML say class=”.... [email protected] www.themegallery.com Defining your own style body{ background: rgb(0,15,31); } .bigHeading{ color: rgb(0,200,255); background: rgb(0,31,63); font-size: 20px; font-weight: bold; text-indent: 10px; } .smallHeading{ color: rgb(0,150,200); background: rgb(0,31,63); font-size: 15px; text-indent: 10px; } In HTML.. <p class=”bigHeading”> Big heading </p> <p class=”smallHeading”> Small heading </p> [email protected] www.themegallery.com Reasons for Using CSS ไฟล์แต่ละหน ้าเล็กลงกว่าเดิม เพราะโค ้ดน ้อยกว่า มีความยืดหยุน ่ สูงในการปรับแต่งแก ้ไขในอนาคต สามารถควบคุมเว็บหลายๆ หน ้าได ้ด ้วย style sheet เพียงแค่ไฟล์เดียว สามารถจัดการเลย์เอ ้าท์ได ้อย่างละเอียด แม่นยา ง่ายในการเรียกดู Source ใชดี้ กบ ั ระบบเสริ ช ์ เอ็นจิน ซงึ่ ระบบเสริ ส ์ เอ็นจิน ้ ต่างๆ 68 [email protected] 69 [email protected]