- HTML (1) 030523315 – Web Programming and Web Database Asst. Prof. Dr. Choopan Rattanapoka
HTML คืออะไร HTML คือ ภาษา markup ที่ใช้ในการอธิบายเอกสารในรูปแบบเว็บ Hyper Text Markup Language ภาษา markup คือ ภาษาที่ใช้ markup tags เป็นองค์ประกอบ ใน HTML เอกสารก็จะถูกอธิบายด้วย HTML tags การทำงานของเว็บไซต์ HTTP Request HTTP Reply (HTML, ภาพ, etc) Client (Web Browser) Server (Web Server)
HTML tags (element) HTML tags คือ คำเฉพาะ (keyword) ที่อยู่ภายในวงเล็บแหลม <tagname> เนื้อหา </tagname> HTML tags ส่วนใหญ่จะมาเป็นคู่ <tagname> จะเรียกว่า tag เปิด และส่วนใหญ่จะมาคู่กับ </tagname> ที่เรียกว่า tag ปิด โดยจะมี / อยู่หน้า tagname ตัวอย่าง HTML tags <h1> Hello World </h1> <title> My First Web </title> <br> หรือ <br/> HTML tags นั้น ไม่ case sensitive หมายความว่า จะใช้ <Title>, <TITLE>, หรือ <TiTle> ก็ได้
ตัวอย่าง HTML มาทดลอง เขียนกันเลย !! <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph. </p> </body> </html> DOCTYPE ใช้นิยามว่าเอกสารนี้คือ HTML <html> .. </html> ใช้คลุมเอกสาร HTML <head> .. </head> ให้ข้อมูลเพิ่มเติม เกี่ยวกับเอกสาร <title> .. </title> ใช้กำหนดหัวข้อของเอกสาร <body> .. </body> ใช้กำหนดเนื้อหาของ เอกสาร <h1> .. </h1> ทำให้ข้อความเป็นหัวข้อแบบ heading <p> .. </p> ใช้แสดงย่อหน้าของข้อความ มาทดลอง เขียนกันเลย !!
โครงสร้างเอกสาร HTML
HTML Attributes HTML elements สามารถที่จะมี attributes ได้ Attribute จะเป็นตัวให้ข้อมูลเสริมกับ element นั้นๆ ปกติแล้ว attribute จะเขียนใน tag เปิด Attribute จะอยู่ในรูปแบบคู่ ชื่อ=“ค่า” ตัวอย่าง <p title=“Hello”>… </p> <img src=“…” width=“..” height=“..”>
HTML Heading (1) ใช้สำหรับทำหัวข้อ โดยจะมีให้ใช้ตั้งแต่ <h1> จนถึง <h6> ซึ่ง <h1> จะมีขนาดตัวอักษรของหัวข้อที่ใหญ่ที่สุด และ <h6> มีขนาดตัวอักษรของหัวข้อที่เล็กที่สุด ข้อความที่อยู่ภายใน tag จะถูกแสดงบนหน้าเว็บ พร้อมกับขึ้นบรรทัดใหม่ <!DOCTYPE html> <html> <body> <h1>Heading H1</h1> <h2>Heading H2</h2> <h3>Heading H3</h3> <h4>Heading H4</h4> <h5>Heading H5</h5> <h6>Heading H6</h6> Normal Text. </body> </html>
HTML Heading (2) การเขียนเส้นคั่นบรรทัด ใน HTML จะใช้ <hr> <!DOCTYPE html> <html> <body> <h1>Hello World h1</h1> <hr> <h2>Hello World h2</h2> </body> </html>
HTML Heading (3) HTML <head> element การกำหนด title (หัวข้อ) ให้กับเอกสาร <title> การกำหนดภาษาที่ใช้ในการแสดงผล <meta> ใช้อ้างอิงถึง CSS <style>, <link> <!DOCTYPE html> <html> <body> สวัสดีชาวโลก :) </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> สวัสดีชาวโลก :) </body> </html>
HTML Paragraphs ใช้สำหรับทำย่อหน้าของเอกสาร ด้วย tag <p> … </p> โดย ข้อความที่อยู่ภายใน tag จะแสดงออกบนหน้าเว็บ และจะขึ้นย่อหน้าใหม่ ให้กับเอกสาร <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> Normal Text. </body> </html>
HTML Display ในภาษา HTML นั้น ถึงแม้ว่าข้อความจะมี การขึ้นบรรทัดใหม่ เว้นช่องว่าง มากขนาดนั้น ในการแสดงผลของ HTML นั้นจะเปลี่ยนเป็นช่องว่างเดียว <!DOCTYPE html> <html> <body> <p> Testing HTML display on web browser </p> Testing HTML display on web browser </body> </html>
HTML Line Break ในเมื่อไม่สามารถจะทำให้ข้อความมีการขึ้นบรรทัดใหม่ได้ด้วยวิธีปกติ ดังนั้น จึงต้องใช้ HTML element <br> <!DOCTYPE html> <html> <body> <p> Testing HTML<br> display on <br>web browser </p> </body> </html>
HTML Pre-formatted Text ถ้าต้องการให้ HTML แสดงผลเหมือนตามที่เขียนใน HTML เลย สามารถใช้ <pre> element แต่รูปแบบของตัวหนังสือจะเป็นแบบ fixed-width font ที่ถูกกำหนด เอาไว้ก่อนแล้ว <pre> … </pre> <!DOCTYPE html> <html> <body> <pre> Testing HTML display on web browser </pre> </body> </html>
HTML Styles (1) เอกสาร HTML ปกติแล้วจะเป็นตัวอักษรสีดำ บนพื้นหลังสีขาว แต่สามารถเปลี่ยนแปลงได้ด้วยการ ใช้ attribute style มีรูปแบบคือ style=“property:value” (CSS property) ตัวอย่าง : สีพื้นหลังของหน้าเว็บ <body style=“background-color:lightgrey”> สีตัวอักษร <h1 style=“color:blue”>This is h1</h1> <p style=“color:red”>Paragraph.</p> รูปแบบตัวอักษร <p style=“font-family:verdana”>Paragraph.</p> ขนาดตัวอักษร <p style=“font-size:160%”>Paragraph.</p> การจัดวางตัวอักษร <p style=“text-align:center”>Paragraph.</p>
HTML Styles (2) ถ้าต้องการให้มี style หลายแบบผสมกัน สามารถเชื่อมกันได้ด้วย ; <!DOCTYPE html> <html> <body style="background-color:lightgrey"> <h1 style="color:blue">This is h1</h1> <p style="color:red">Paragraph.</p> <p style="font-family:verdana">Paragraph.</p> <p style="font-size:160%">Paragraph.</p> <p style="text-align:center">Paragraph.</p> <p style="font-size:160%;color:green;text-align:center">Paragraph.</p> </body> </html>
HTML Colors สีใน HTML มีวิธีระบุได้ 3 วิธี เป็นค่าเลขฐานสิบหก #RRGGBB (RR, GG, BB ใช้ฐานสิบหก 2 หลักของแต่ละแม่สี 00-FF) เป็นค่า RGB rgb(r, g , b) (r, g, และ b ใช้เลขฐานสิบ 0 – 255) เป็นชื่อสี รอบรับ 140 ชื่อสี http://www.w3schools.com/html/html_colornames.asp
HTML Text Formatting (1) นอกการจากใช้ attribute style แล้ว ยังมี tag พิเศษสำหรับจัดการ กับรูปแบบตัวอักษรอีก ตัวหนา ใช้ <b>..</b> หรือ <strong>..</strong> ตัวเอียง ใช้ <i>..</i> หรือ <em>..</em> ปรับขนาดตัวอักษรเล็กลง <small> .. </small> Highlight ข้อความ <mark> .. </mark> ขีดเส้นฆ่าข้อความ <del> .. </del> ขีดเส้นใต้ข้อความ <ins> .. </ins> ข้อความห้อย (subscript) <sub> .. </sub> ข้อความยก (superscript) <sup> .. </sup>
HTML Text Formatting (2) ตัวอย่าง <!DOCTYPE html> <html> <body> This text is <b>Bold</b>. <br> <i>Itallic</i> <h1>Heading <small>text</small> title</h1> This is <mark>important</mark>.<br> <del>HTML</del> <ins>HTML5</ins> is good.<br> X<sub>1</sub> = A<sup>2</sup> + B<sup>5</sup><br> Combine <b><i>Text</i></b>, <mark><ins>it's up to you</ins></mark> </body> </html>
HTML Comments การ comment ใน HTML จะเป็นข้อความที่อยู่ระหว่าง <!-- …. --> <!DOCTYPE html> <html> <body> <!-- <p>Hello 2</p> --> <p>Hello 2</p> <!-- this is a multiple lines comment --> </body> </html>
HTML Style - CSS CSS (Cascading Style Sheets) Inline – ใช้ attribute style ใน HTML elements <h1 style=“color:blue”>Blue heading</h1> Internal – ใช้ <style> element ในส่วนของ <head> <head> <style> body {background-color:green} h1{color:blue}</style> </head> External – ใช้ CSS file จากข้างนอก <link rel=“stylesheet” href=“style.css”>
CSS properties เบื้องต้น CSS Fonts color เช่น color: #FFFFFF; font-family เช่น font-family: courier font-size เช่น font-size: 150% CSS Box border เช่น border: 1px solid black; padding เช่น padding: 10px; (ช่องว่างภายในกล่อง) margin เช่น margin: 10px; (ช่องว่างนอกกล่อง) <!DOCTYPE html> <html> <head> <style> p { border: 1px solid black; padding: 10px; margin: 30px; } </style> <body> <p> Hello World</p> <p> Second Box<br> 2 lines </p> </body> </html>
HTML Lists ใช้ <ul>.. </ul> เป็นตัวครอบรายการแบบเป็น bullet ใช้ <ol> .. </ol> เป็นตัวครอบรายการแบบเป็นตัวเลข ใช้ <li> .. </li> สำหรับชื่อรายการ <!DOCTYPE html> <html> <body> <ul> <li> Hello </li> <li> World </li> </ul> <ol> </ol> </body> </html>
HTML Block Element Block element คือ ปกติจะเริ่มต้น และสิ้นสุดด้วยการขึ้นบรรทัดใหม่ เช่น <h1>, <p>, <ul>, <table> เป็นต้น Inline element คือ element ที่จะไม่ขึ้นบรรทัดใหม่หลังจากจัดเอกสาร เช่น <b>, <td>, <a>, <img> เป็นต้น <div> … </div> เป็น block element ที่จริงๆ แล้วไม่มีหน้าที่พิเศษใดๆ แต่จะใช้ครอบชุด เอกสารบางอย่าง แล้วใช้ style และ id, class เพื่อมาควบคุมการทำงานอีกที <div style=“background-color:black;color:white”> <h1>Hello World</h1> This is an example. </div> <span> … </span> เป็น inline element ไม่มีหน้าที่พิเศษ และทำงานคล้ายกับ <div> <h1>This is <span style=“color:red”>Important</span></h1>
HTML Images (1) เอกสาร HTML สามารถแสดงรูปภาพได้ด้วย tag <img src=“ชื่อและที่อยู่รูป” alt=“ข้อความ” width=“ความกว้างของรูป” height=“ความสูงของรูป”/> <img src= “cit.jpg“ alt=“CIT-LOGO”> CIT LOGO ในกรณีที่ไม่เจอรูปภาพ ในกรณีที่เจอรูปภาพ <img src= “cit.jpg“ alt=“CIT-LOGO” width=“40” height =“40”> CIT LOGO
HTML Images (2) ความกว้างกับความสูงของภาพสามารถใช้ style attribute ได้ ซึ่งจะแนะนำมากกว่าการใช้ width, height attribute โดยตรง เพราะอาจจะถูก CSS ปรับขนาดได้ในภายหลัง <img src=“..” style=“width:100px;height:100px”> Property ใน style ของ img ที่อาจจะได้ใช้ border เพิ่มกรอบให้กับรูปภาพ float เช่น float:right; float:left ให้ภาพลอยอยู่ด้านขวาหรือซ้าย
HTML Links (1) ในเอกสาร HTML สามารถที่จะทำ link เพื่อเข้าไปยังเว็บอื่นๆ ได้ ด้วย <a href = “URL ของ link”> ข้อความที่จะแสดง </a> <!DOCTYPE html> <html> <body> <a href= "http://www.google.com">Link to Google</a> </body> </html>
HTML Links (2) การเปลี่ยนสีให้กับ link จะใช้ style เช่น <style> a:link {color:#000000; background-color:transparent; text-decoration:none} a:visited {color:#000000; background-color:transparent; text-decoration:none} a:hover {color:#ff0000; background-color:transparent; text-decoration:underline} a:active {color:#ff0000; background-color:transparent; text-decoration:underline} </style> การกำหนดเป้าหมายของของ link ใช้ attribute target เช่น <a href=“…” target=“_blank”> … </a>
HTML Links (3) การใช้รูปภาพเป็น link <a href=“…”> <img src=“…”> </a> การใช้ attribute : id <a id=“tips”>Tip Section</a> สร้างหัวข้อ <a href=“#tips”>Go to Tip Section</a> กด link หาหัวข้อ
งานครั้งที่ 1 : HTML แสดงชื่อ-นามสกุลของนักศึกษา ด้วยขนาดตัวอักษร h1 ขีดเส้นแนวนอน แสดงภาพ 2 ภาพ ขนาด 100 x 100 ภาพซ้ายเป็นการแสดงภาพเฉยๆ ภาพขวาเมื่อคลิกที่ภาพจะวิ่งไปยังเว็บ http://www.google.com สร้างกรอบด้วย <div> มีสีพื้นหลังเป็นสีชื่อ “LightGoldenRodYellow” และตัวหนังสือเป็นสีชื่อ “FireBrick” ภายในกรอบให้แสดงข้อความตามที่กำหนด โดยคำว่า ต้องจำ ให้เป็นตัวหนา แสดงคำที่มีการขีดเส้นใต้คำ สร้าง List (bullet) ดังภาพ โดยคำว่า HTML และ PHP กำหนดให้เป็นตัวเอียง และคำว่า w3school เป็นลิงค์ เมื่อกดแล้วจะวิ่งไปยังเว็บ http://www.w3schools.com