1 / 69

ทส 215 การเขียนโปรแกรมบนเว็บ 1

ทส 215 การเขียนโปรแกรมบนเว็บ 1. HTML & CSS. อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th. Basic HTML. Tags & Elements Text Formatting Hyperlinks Images Tables Layer. Tags vs. Elements.

fritz-wells
Download Presentation

ทส 215 การเขียนโปรแกรมบนเว็บ 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ทส215การเขียนโปรแกรมบนเว็บ 1 HTML & CSS อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th

  2. Basic HTML • Tags & Elements • Text Formatting • Hyperlinks • Images • Tables • Layer

  3. 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

  4. พื้นฐานการเขียน HTML • <HTML>...</HTML>  เป็น tag หลักในทุกๆ ไฟล์ html เพื่อบ่งบอกถึงประเภทของไฟล์ และทุกๆ tag จะต้องอยู่ภายใน <html>…</html> • <HEAD>...</HEAD>  ใช้กำหนดหัวข้อเอกสารเพื่อให้ผู้ใช้ทราบว่า ณ ขณะนี้อยู่ในหน้าเว็บไหน และ ลักษณะต่าง ๆ ของเว็บเพจนั้น ๆ ซึ่งใช้กับ <TITLE>...</TITLE> • <TITLE>...</TITLE>ใช้แสดงข้อความในส่วนของ Title bar ของวินโดวส์ • <BODY>...</BODY>  ใช้เพื่อกำหนดเนื้อหาและ tag อื่น ๆ บนหน้าเว็บซึ่งทุก ๆ tag จะต้องอยู่ภายใน <body>…</body> เสมอ

  5. 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>

  6. Example <HTML> <HEAD> <TITLE>Test Page</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FF0000"> **--เรากำหนด ฉากหลัง เป็นสีดำ ตัวหนังสือ สีแดง--** </BODY> </HTML>

  7. Properties in <BODY> • TEXT กำหนดสีของตัวอักษรทั้งหมดภายในเว็บเพจ • BGCOLOR กำหนดสีพื้นหลังของเว็บเพจ <BODY BGCOLOR="#000000"> เช่น กำหนดเป็นสีขาว • LINK กำหนดสีของ Link • ALINK กำหนดสีของ Link ขณะที่ถูกคลิก • VLINK กำหนดสีของ Link เมื่อเคยถูกคลิกไปแล้ว

  8. Example <HTML> <HEAD> <TITLE>Test BODY Page </TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINKS="#0000CC" VLINK="#0000CC" > **กำหนด Font เป็นสีขาว **ฉากหลังเป็นสีดำ **ลิงค์เป็นสีน้ำเงิน** </BODY> </HTML>

  9. Text layout • ระหว่าง BODY มีได้หลายบรรทัด • text layout และ spacing จะไม่มีผลกับ browser • browser จะจัดข้อความตามขนาดของหน้าเว็บโดยอัตโนมัติ <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>

  10. 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 &nbsp; GAP &nbsp; between some of the words. </p> <p>&nbsp;&nbsp; This paragraph is<br/> indented on the first line<br/> but not on subsequent lines. </p> </body> </html> • ข้อความจะชิดซ้ายโดยอัตโนมัติ • <br/> เป็นการ Enter • <p>…</p> การเพิ่มย่อหน้าใหม่ • &nbsp; เป็นการเคาะช่องว่าง

  11. Separating blocks of text • <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 <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>

  12. 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>

  13. 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>

  14. 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>

  15. Font • <FONT>...</FONT>  สำหรับคำสั่ง font นี้จะใช้กำหนดชื่อ ขนาด และลักษณะต่าง ๆ ของตัวอักษร • สามารถกำหนดชนิดของตัวอักษร เช่น • ตัวหนา <B>...</B> • ตัวเอียง <I>...</I> • ขีดเส้นใต้ <U>....</U> • สีของตัวอักษร

  16. 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>

  17. 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>

  18. 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. 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. 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. 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. Layout in a table <html> <head> <title>Title for Page</title> </head> <body> <table border=1> <tr align="center"> <td>foo<br>foo</td> <tdvalign="top">bar</td> </tr> <tr> <td>bizbaz</td> <td>booboo</td> </tr> </table> </body> </html>

  23. 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. 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. 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. DOCTYPE • XHTML 1.0 Strict • XHTML 1.1 • XHTML 1.0 Transitional • XHTML 1.0 Frameset

  27. 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. 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. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> แบบนี้ อนุญาตให้เราใช้ HTML 4.0 ร่วมได้ สามารถเรียกใช้ทั้ง CSS กับ XHTML เช่น <body bgcolor=red></body> หรือ เขียนแบบใช้ css <body style=”background-color: red;”> ข้อดีของ XHTML 1.0 Transitional คือการที่จะช่วยให้ บราวเซอร์ เก่าๆ โดยเฉพาะ IE6 นั้นสามารถ เข้าใจภาษา ได้ใกล้เคียงกัน และ เอาไปใช้ในกรณีที่ XHTML บาง tag ไม่สามารถใช้กับ บราวเซอร์เก่าๆ ได้

  30. XHTML 1.0 Frameset • ใช้กับเฟรม(Fram) กรณีเอาหน้าเว็บมาแบบ เฟรม

  31. Meta Element ใช้กําหนดคุณสมบัติให้เว็บเพจ เช่น กําหนดคําสําคัญสําหรับ search engine หรือเพิ่มเติม ข้อความตอบรับจาก HTTP (HTTP response header) เพื่อเป็นประโยชน์ต่อการทํางานของเว็บเบราเซอร์ เช่น การ refresh หน้าเว็บเพจ หรือการกําหนดชุดตัวอักษร เป็นต้น Meta Element มี 2 รูปแบบ คือ • META NAME • META HTTP-EQUIV

  32. META NAME ใช้สําหรับกําหนดคําค้น, รายละเอียด สําหรับ search engine มีรูปแบบคําสั่ง และ attribute value ของ name หลักๆ 3 value คือ <META NAME="…" CONTENT="…">    NAME= “keywords” หรือ “Description” หรือ “Robots”           Content= ”ข้อความของ keyword” ”ข้อความของ Description” ”คําสั่งสําหรับ Robot ใน search engine”

  33. 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. META HTTP-EQUIV ใช้สําหรับกําหนดชุดของตัวอักษรที่ใช้ หรือสําหรับสั่ง refresh หน้าเว็บเพจหรือ ให้ไปที่ web site หรือไฟล์ที่กําหนด ตามเวลาที่กําหนด (delay เป็นวินาที) มีคําสั่งและ attribute value ที่ใช้มาก <META HTTP-EQUIV="…" CONTENT="…"> HTTP-EQUIV= “Content-Type” หรือ “Refresh”Content= “คําสั่ง 1 ; คําสั่ง 2 ; คําสั่ง 3”

  35. 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. CSS Cascading Style Sheets

  37. What’s CSS • การกำหนดรูปแบบที่เป็นมาตรฐานการแสดงผลทางหน้า web page ให้เป็นไปตามรูปแบบที่กำหนด • Font • Color • Size • Width • Height • align • …

  38. Types of CSS External 1 Embedded 2 Imported 3 Inline 4

  39. 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. 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. 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. 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. 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. The Box Model

  45. Basic CSS Syntax

  46. Basic CSS Syntax • Three parts: • selector • property • value selector {property: value} p { text-align: center; color: navy; font-family: arial } } declaration

  47. 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. 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. 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>

More Related