ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
HTML HyperText Markup Language
วิชา การเขียนโปรแกรมบนเว็บ (Web Programming)
2
ความหมายของ HTML HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C)
3
องค์ประกอบของ HTML Tag เป็นสัญลักษณ์ที่บอกให้ Browser แสดงผลในรูปแบบใด
ชื่อ Tag จะอยู่ในครื่องหมาย < > เช่น <body> แบ่งเป็น 2 ประเภทคือ Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย Slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B> <BLINK>…</BLINK> เป็นต้น
4
องค์ประกอบของ HTML Attribute เป็นส่วนขยายความสามารถของ Tag นั้นๆ จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป มีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น โดยจะเขียนไว้ใน Tag เปิด เช่น <h1 align = “right”>, align = “right” คือ Attribute เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ <P> ประกอบด้วย ALIGN="Left/Right/Center" ซึ่งสามารถเขียนได้ดังนี้ <P ALIGN="Left">...</P> หรือ <P ALIGN="Right">...</P>
5
องค์ประกอบของ HTML Content คือเนื้อหาที่ต้องการให้แสดงบนหน้าเว็บ
เช่น <h1>My homepage</h1>, My homepage คือ Content Element คือชุดของ Tag เริ่มตั้งแต่เครื่องหมาย Tag เปิด ไปจนกระทั่ง Tag ปิด ซึ่งรวมทั้ง Attribute และ Content ด้วย
6
องค์ประกอบของ HTML Tag เปิด content element Tag ปิด
<html> <head> <title>NPRU Travel</title> </head> <body> <p align="center"> มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา </p> </body> </html> content element Tag ปิด
7
กฎการเขียนเอกสาร HTML
การเขียน HTML ต้องคำนึงถึงไวยากรณ์ (Syntax) ดังต่อไปนี้ Tag ต้องล้อมรอบด้วยเครื่องหมายนี้ < > ในวงเล็บ <Tag> Tag จะต้องพิมพ์ติดกับ < มิฉะนั้น Web browser จะไม่สามารถแปลภาษาได้ Tag ใช้ตัวพิมพ์เล็กหรือใหญ่ก็ได้ ความหมายเดียวกัน เช่น <title>, <Title>, <TITLE> มีความหมายเท่ากัน Tag ส่วนใหญ่จะมาเป็นคู่ มี tag เปิด และ tag ปิด เช่น <h1>ยินดีต้อนรับ</h1> ยกเว้น บาง tag ที่ยอมให้มี tag เปิดได้อย่างเดียว เช่น <br> Tag ปิด ต้องมีเครื่องหมาย / (Slash) นำหน้า เช่น </table> ในการพิมพ์เอกสาร HTML สามารถพิมพ์แยกบรรทัดหรือเคาะช่องว่าง หรือพิมพ์ติดกันก็ได้ ในมาตรฐาน XHTML ถ้าเป็น Tag เดี่ยว ต้องมีเครื่องหมาย / (Slash) ก่อนปิด > เช่น <br /> Tag ต้องอยู่ในเครื่องหมาย < > เท่านั้น
8
กฎการเขียนเอกสาร HTML
มีการเขียนเป็นแบบ LiFo (Last in – First out) Tag ที่เปิดก่อนต้องปิดทีหลัง เช่น
9
โครงสร้างของเอกสาร HTML
Tag head แท็ก Meta Element <html> <head> <meta name = "keywords" content = “ราชมงคลล้านนา,เทคโน"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>RMUTL University</title> </head> <body> <p align="center">มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา </p> </body> </html> Tag HTML Tag body
10
โครงสร้างของเอกสาร HTML
<HTML>..... </HTML> เป็น Tag ที่ใช้เพื่อกำหนดว่าเอกสารนี้มีการใช้ภาษา HTML เป็น Markup Language <HEAD>.....</HEAD> เป็น Tag ที่ใช้กำหนดส่วนหัวของเอกสาร HEAD ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้รายละเอียดเกี่ยวกับเอกสารฉบับนี้ ข้อมูลตรงส่วนนี้จะไม่ปรากฏอยู่บนหน้าจอ <BODY>.....</BODY> เป็น Tag ที่บอกถึงลักษณะต่างๆ ของเอกสารฉบับนี้ ข้อความที่อยู่ภายใต้ Tag <BODY> จะเป็นข้อความที่แสดงในหน้าเว็บเพจ
11
โครงสร้างของเอกสาร HTML
<TITLE>..... </TITLE> เป็นการระบุข้อความที่ต้องการให้เป็นชื่อของเอกสาร โดย TITLE เป็น ส่วนหนึ่งของ HEAD และจะต้องปิด Tag ให้เรียบร้อยมิฉะนั้นจะเกิดข้อผิดพลาดได้ ผลลัพธ์ของ Tag นี้ คือ ข้อความที่อยู่ระหว่าง <TITLE>..... </TITLE> จะแสดงใน Title bar ของ Windows
12
โครงสร้างเอกสาร HTML ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>
13
ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ <HEAD> <TITLE>ข้อความอธิบายชื่อเรื่อง</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ"> <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2, …"> </HEAD>
14
ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี และควรใช้เฉพาะภาษาอังกฤษที่มีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ หรือ มีลักษณะเป็นคำสำคัญในการค้นหา (Keyword) การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กำกับด้วย Tag TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นั่นเอง) Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือ ช่องว่าง
15
ส่วนเนื้อหาเอกสารเว็บ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน
16
ส่วนเนื้อหาเอกสารเว็บ (Body Section) ต่อ..
ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้ กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร กลุ่มคำสั่งการทำเอกสารแบบรายการ (List) กลุ่มคำสั่งเกี่ยวกับการทำลิงค์ กลุ่มคำสั่งจัดการรูปภาพ กลุ่มคำสั่งจัดการตาราง (Table) กลุ่มคำสั่งสำหรับสร้างฟอร์ม (Form)
17
การสร้างเอกสาร HTML - วิธีการสร้าง
การสร้าง HTML Document นั้นสามารถสร้างได้หลายวิธี เช่น ใช้โปรแกรม Text Editor อย่างเช่น Notepad , Editplus ที่รับข้อมูลของ Text เป็นรหัส ASCII สร้างเอกสาร HTML ขึ้นมาแล้ว save file ด้วยนามสกุล .html หรือ .htm ใช้โปรแกรมสร้างเว็บสำเร็จรูป (Web Authoring Tools) สร้างขึ้นมา โดยโปรแกรมเหล่านี้จะมีองค์ประกอบต่างๆ ของ Web Page มาให้แล้ว ผู้ใช้เพียงแค่เลือกใช้งานเท่านั้น เช่น Dream Weaver , Frontpage เป็นต้น
18
การสร้างเอกสาร HTML - วิธีการสร้าง
3. ใช้โปรแกรมอย่าง เช่น Microsoft Office สร้างเอกสาร แล้วทำการ Save File ให้เป็น HTML Document ก็ได้ การแสดง HTML Document นั้นไม่จำเป็นที่จะต้องมี คำสั่ง HTML ในเอกสารนั้นเลยก็ได้ มีเพียงข้อความแล้ว save file ให้เป็น .HTML แค่นั้นก็สามารถใช้งานได้แล้ว เพียงแต่ว่ารูปแบบการแสดงอาจจะไม่ถูกต้องตามที่ต้องการ
19
การสร้างเอกสาร HTML - วิธีการสร้าง
ตัวอย่างการใช้ Notepad สร้างเอกสาร HTML ขึ้นมาโดยยังไม่มีคำสั่ง HTML
20
คำสั่งในการเริ่มต้นในการสร้างเว็บเพจ
คำสั่งเริ่มต้น <HTML> </HTML> คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML
21
ส่วนหัวของโปรแกรม <HEAD>..........</HEAD>
คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง <HEAD>...</HEAD> จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ <TITLE> </TITLE>
22
กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์
<TITLE> </TITLE > คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฏหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์
23
ส่วนเนื้อหาของโปรแกรม
<BODY> </BODY> คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ
24
ส่วนเนื้อหาของโปรแกรม
สำหรับ <BODY> จะมี Attribute อยู่หลายๆ ตัว ซึ่งจะมีรายละเอียดดังนี้ <BODY TEXT="BLACK" BGCOLOR ="YELLOW" LINK="BLUE" VLINK="BLUE" ALINK="WHITE" BACKGROUND="IMAGE_NAME"> ความหมายของ Attribute ต่างๆ เป็นดังนี้ text ใช้สำหรับกำหนดสีของข้อความทั่วไป bgcolor กำหนดสีพื้น แต่ถ้ามีการกำหนดภาพ Background เอาไว้ด้วยจะไม่มีผลอะไร link กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่น (ก่อนเชื่อม) vlink กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่นที่เคยไปมาแล้ว (หลังเชื่อม) alink กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่นในขณะที่กำลังกดปุ่มบนเมาส์ค้างอยู่ (ขณะเลือก) background กำหนดรูปภาพที่จะใช้เป็นฉากหลัง
25
การกำหนดสีของพื้นหลังของตัวอักษร
จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์มาเป็นตัวกำหนด การกำหนดสีของพื้นหลัง - การกำหนดสีพื้นหลังนั้น เราสามารถมีรูปแบบการกำหนดสีพื้นหลังได้อยู่ 2 รูปแบบ ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การกำหนดสีพื้นหลังโดยการกำหนดสี </BODY> </HTML>
26
การกำหนดสีของพื้นหลังของตัวอักษร แบบที่ 2
การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG <HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF"> การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG" </BODY> </HTML>
27
การกำหนดสีของตัวอักษร
รูปแบบ :: <BODY TEXT="#RGB หรือ กำหนดชื่อสีที่ต้องการ"> <HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="blue" > การกำหนดสีตัวอักษร </BODY> </HTML>
28
การกำหนดสีของตัวอักษร
การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG <HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="#FF0066" > การกำหนดสีตัวอักษร </BODY> </HTML>
29
การแบ่งย่อหน้าและการจัดตำแหน่ง – ย่อหน้า / เว้นบรรทัด
<P> เป็นตัวจัดให้ข้อความที่ตามหลังมาขึ้นย่อหน้า (Paragraph) ใหม่ <BR /> เพื่อให้ข้อความขึ้นบรรทัดใหม่ ( Tag <BR /> ไม่จำเป็นต้องมี Tag ปิดก็ได้ ) ความแตกต่างของ <P>และ <BR /> คือ ถ้าหากเราต้องการขึ้นย่อหน้าใหม่ จะใช้ Tag <P> การขึ้นบรรทัดใหม่นั้นก็เว้นระยะระหว่างย่อหน้าเดิมกับย่อหน้าใหม่เพิ่มขึ้น แต่ถ้าหากจบบรรทัดต้องการจะขึ้นบรรทัดใหม่ โดยข้อความยังเป็นใจความต่อเนื่องกันอยู่ก็สามารถใช้ <BR /> แทนได้
30
การแบ่งย่อหน้าและการจัดตำแหน่ง – การจัดตำแหน่ง
จัดชิดซ้าย โดยทั่วไปตัวอักษรหรือประโยคจะถูกจัดชิดซ้ายโดยอัตโนมัติอยู่แล้ว แต่ถ้า ต้องการระบุจริงๆ ก็ทำได้ด้วยการใช้ <p>โดยระบุ Attribute align ให้เป็น left ลองดูตัวอย่าง <p align="left">ข้อความ</p> ผลที่ได้คือ ข้อความนี้ถูกจัดชิดซ้าย
31
การแบ่งย่อหน้าและการจัดตำแหน่ง – การจัดตำแหน่ง
จัดกลางหน้า ใช้คำสั่งง่ายๆ ข้างล่างนี้ <p align=“center”></p> หรือ <center>ข้อความ</center> ก็ได้ ผลที่ได้คือ ข้อความนี้ถูกจัดกลางหน้า จัดชิดขวา ใช้คำสั่งคล้ายกับการจัดชิดซ้าย ดังนี้ <p align="right">ข้อความ</p> ข้อความนี้ถูกจัดชิดขวา
32
การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น
แบ่งข้อความหน้าจอ เส้นคั่นที่ไม่ใช่การขีดเส้นใต้ตัวอักษร Horizontal Rule <HR /> ตัวอย่าง <body>It has been Information technology</body> ผลลัพธ์คือ It has been Information technology
33
การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น
ความยาวของการคั่น <HR WIDTH = NUMBER/PERCENT> กำหนดได้ 2 รูปแบบ ที่ Attribute Width 1. กำหนดตามจำนวนจุดของพิกเซล(Pixel)บนจอภาพ 2. กำหนดเป็นเปอร์เซ็นความยาว เปรียบเทียบกับหน้าจอ <hr width = 500> และ <hr width = 75%> จาก 100%ของหน้าจอ
34
การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น
ความหนาของเส้นคั่น <HR SIZE = NUMBER> กำหนดขนาดความหนา (สูง) ของเส้นจะใช้ Attribute Size โดยกำหนดค่าเป็น พิกเซล <hr size = 3> จะหนากว่า <hr size = 6> ตัวเลขเพิ่มขึ้น ขนาดความหนา(สูง)จะสูงขึ้น
35
การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น
การวางตำแหน่งเส้นคั่น บ่อยครั้งที่เส้นแบ่งข้อความไม่ยาวเต็มจอ และจะปรากฎตรงกลางจอภาพเสมอ ถ้าต้องการเปลี่ยนไปชิดริม ให้เพิ่ม Attribute Align = Left หรือ Align = Right ลงในคำสั่ง <HR> หรือต้องการให้อยู่ตรงกลางเหมือนเดิม ก็กำหนด Align = Center <hr size=n width=n align="left,right or center" noshade>
36
คำสั่งการเว้นวรรค (None Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้ว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม นี้เป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมายพิเศษ เช่น <, > อักษรพวกนี้จะไม่สามารถเขียนลงไปตรงๆ เพื่อให้ Browser แสดง ทั้งนี้เพราะ Browser จะตีความเอาว่าเป็น Tags ซึ่งอาจทำให้การแปลผิดพลาดได้ ตัวอย่าง รหัสใช้แทนอักษรพิเศษอื่นๆ เช่น < ใช้แทนตัว < ( less than ) > ใช้แทนตัว > ( greater than ) & ใช้แทนตัว & ( ampersand ) 36
37
<Hn> … Heading Text … </Hn>
การกำหนดรูปแบบอักษร – หัวข้อ การกำหนดขนาดของตัวอักษรในแต่ละ Section (Headline) ใช้ <Hn> และ </Hn> โดย n แทนตัวเลข 1 – 6 1 คือขนาดใหญ่สุด และ 6 คือขนาดเล็กสุด รูปแบบคำสั่ง <Hn> … Heading Text … </Hn>
38
ตัวอย่างรูปแบบคำสั่ง HEADER
การกำหนดรูปแบบอักษร – หัวข้อ <H1>COMPUTER</H1> <H2>COMPUTER</H2> <H3>COMPUTER</H3> <H4>COMPUTER</H4> <H5>COMPUTER</H5> <H6>COMPUTER</H6> COMPUTER ตัวอย่างรูปแบบคำสั่ง HEADER
39
การกำหนดรูปแบบอักษร – <FONT>
การกำหนดขนาดของตัวอักษร รูปแบบ <FONT SIZE = N> … </FONT> N = ขนาดของตัวอักษรมีค่าตั้งแต่ 1 ถึง 7 1 คือขนาดเล็กสุด และ 7 คือขนาด ใหญ่ สุด
40
การกำหนดรูปแบบอักษร <FONT>
การกำหนดรูปแบบอักษรด้วย Face Attribute Face ช่วยในการระบุรูปแบบตัวอักษรที่ต้องการลงไปได้เลย เช่น AngsanaUPC , MS Sans Serif , CordiaUPC วิธีการกำหนดเป็นดังนี้ <font face=“ชื่อ Font”>ข้อความ</font> ถ้าต้องการแสดงผลเป็นภาษาไทยอย่างถูกต้อง ควรเลือกใช้แบบอักษรที่ ลงท้ายด้วย UPC ซึ่งเป็นแบบอักษรที่สนับสนุนภาษาไทย ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif
41
การกำหนดรูปแบบอักษร – <FONT>
กำหนดสีเฉพาะให้กับตัวอักษรด้วย color Here is RED color Here is GREEN color Here is BLUE color วิธีการกำหนดเป็นดังนี้ <font color="สีที่ต้องการ">ข้อความ</font>
42
การกำหนดรูปแบบอักษร – <FONT>
รวมเข้าด้วยกัน การกำหนดรูปแบบด้วย TAG Font นั้น สามารถนำเอา Attribute ทั้งหมด มากำหนดรวมกันได้ ตัวอย่าง <font face=“AngsanaNew" size=2 color="#FF00FF">Hey</font> <font face="CordiaNew"><font size=5>What’s</font> <font size=3><font color="FF0000">Up</font>
43
การกำหนดรูปแบบอักษร – อื่นๆ
นอกจากการกำหนดรูปแบบอักษรโดยการใช้ <FONT> แล้ว ยังสามารถกำหนดรูปแบบอักษรอื่นๆ ได้อีก เพื่อให้ตัวอักษรเป็นไปตามแบบที่เราต้องการ โดยการใช้ Tag ต่างๆ ดังนี้ <B>…</B> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวหนา <I>…</I> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวเอียง <U>…</U> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวขีดเส้นใต้ <STRIKE>…</STRIKE> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวขีดกลางตัวอักษร <SUP>…</SUP>ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวยก <SUB>…</SUB>ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวห้อย
44
รายการ (List) ในการสร้างเอกสาร HTML นั้นข้อมูลบางอย่างต้องมีการแสดงในรูปแบบของรายการ ไม่ว่าจะเป็นรายการที่ไม่เรียงลำดับ หรือว่ารายการที่ต้องมีลำดับก่อนหลัง ถ้าหากว่าใช้ TAG ทั่วๆ ไปในการสร้างรายการ (List) ก็สามารถทำได้เช่นกัน เพียงแต่ว่ารูปแบบของ Bullet หรือตัวเลข อาจจะถูกจำกัดหรือว่าใช้ได้น้อยแบบ HTML จึงมี Tag ที่สามารถใช้ในการแสดงรายการรวมถึงการจัดการและควบคุมรูปแบบของรายการที่นำเสนอได้ โดยมี List 3 ประเภท คือ Unordered List, Ordered List
45
List – Unordered List เป็นการแสดงรายการแบบที่ไม่ได้เรียงลำดับ มีการแสดงรูปแบบย่อหน้าโดยมี Bullet นำหน้า รูปแบบ Tag ที่ใช้ คือ <UL> <LI>….</LI> </UL> โดยที่ <LI> เป็น TAG ที่ใช้ สำหรับแสดงรายการแต่ละรายการ
46
My Unordered List Item 1 Item 2 Item 3 List – Unordered List
ตัวอย่างเช่น <UL>My Unordered List <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> ผลลัพธ์ที่ได้คือ My Unordered List Item 1 Item 2 Item 3
47
List – Unordered List การใช้ Bullet ให้กับรายการที่ไม่มีลำดับ สามารถกำหนด Bullet รูปแบบอื่นๆ ได้อีก ดังนี้ Type = Circle Type = Square Type = Disc เพิ่ม Attribute TYPE เข้าไป โดยถ้าต้องการให้ทุกรายการของ List เป็น Bullet ตามที่ต้องการก็ให้ใส่ TYPE ไว้ที่ <UL TYPE=“….”> แต่ถ้าต้องการเฉพาะ List ตัวใดตัวหนึ่ง ก็ให้ใส่ไว้ที่ <LI TYPE=“….”>
48
List – Unordered List ผลลัพธ์ที่ได้คือ ตัวอย่างเช่น My Unordered List
<UL TYPE =“SQUARE”> My Unordered List <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> ผลลัพธ์ที่ได้คือ My Unordered List Item 1 Item 2 Item 3
49
List – Ordered List เป็นการแสดงรายการแบบที่เรียงลำดับ ลำดับของรายการมีความสำคัญ มีการแสดงรูปแบบย่อหน้าโดยมีหมายเลขเรียงลำดับจาก 1,2,3, ..... รูปแบบ Tag ที่ใช้ คือ <OL> <LI>….</LI> </OL>
50
My Ordered List 1. Item 1 2. Item 2 3. Item 3 List – Ordered List
ผลลัพธ์ที่ได้คือ My Ordered List 1. Item 1 2. Item 2 3. Item 3 ตัวอย่างเช่น <OL>My Ordered List <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </OL>
51
List – Ordered List รายการแบบมีลำดับจะมีเลขลำดับนำหน้ารายการทุกๆ รายการโดยอัตโนมัติ ซึ่งสามารถจะใช้ลำดับรูปแบบอื่นๆ แทนตัวเลข โดยใช้ Attribute ได้ เพิ่ม Attribute TYPE เข้าไป โดยถ้าต้องการให้ทุกรายการของ List เป็น รูปแบบตัวเลขตามที่ต้องการก็ให้ใส่ TYPE ไว้ที่ <OL TYPE=“….”> แต่ถ้าต้องการเฉพาะ List ตัวใดตัวหนึ่ง ก็ให้ใส่ไว้ที่ <LI TYPE=“….”>
52
List – Ordered List รูปแบบ TYPE ของ Ordered List มีดังนี้
Arabic <OL TYPE=1> ซึ่งตรงนี้เป็นค่า Default อยู่แล้ว Capital Letters <OL TYPE=A> จะมีรูปแบบ คือ A,B,C, … Small Letters <OL TYPE=a> จะมีรูปแบบ คือ a , b , c , … Large Roman <OL TYPE=I> จะมีรูปแบบ คือ I , II , III , … Small Roman <OL TYPE=i> จะมีรูปแบบ คือ i , ii , iii , iv , ...
53
List – List ซ้อนกัน จากที่กล่าวมาข้างต้นแล้ว นอกจากนั้นเรายังสามารถใช้งาน List ในรูปแบบอื่นๆที่เป็นการรวม List หลายๆ ประเภทเข้าด้วยกัน หรือใช้งานในลักษณะของ List ซ้อน List ก็ได้ เช่น <OL>Ordered List <LI>Item 1</LI> <UL> <LI>Item A</LI> <LI>Item B</LI> </UL> <LI>Item 2</LI> </OL>
54
File Format ที่สนับสนุนการทำงานบนเว็บเพจ
ไฟล์กราฟิกที่สนับสนุนระบบอินเทอร์เน็ต ปัจจุบันมี 3 ไฟล์หลักๆ คือ ไฟล์สกุล GIF (Graphics Interlace File) ไฟล์สกุล JPG (Joint Photographer’s Experts Group) ไฟล์สกุล PNG (Portable Network Graphics)
55
Image Tag and Attribute
เราสามารถนำภาพกราฟิกตามที่ได้กล่าวมาข้างต้นมาใส่รวมเข้ากับเอกสาร HTML ได้ โดยใช้ Tag ดังนี้ <img src= "ที่อยู่/ชื่อรูปภาพ" > โดยจะต้องทำการอ้างอิงชื่อรูปภาพ พร้อมทั้งที่อยู่ของรูปภาพนั้นให้ถูกต้องด้วย ซึ่ง Attribute SRC หรือ Source นั้น เป็น Attribute ที่ใช้สำหรับการกำหนดที่อยู่ของรูปภาพ ซึ่งโดยปกติจะใช้คู่กับ Tag <IMG> เสมอ รูปแบบการนำภาพมาใส่ในเอกสาร HTML แบบนี้เราเรียกว่า Inline Graphic
56
Image Tag and Attribute
Alt= เป็นการกำหนดข้อความอธิบาย โดยจะปรากฎก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฎ Align=เป็นการจัดตำแหน่งของรูปภาพกับข้อความที่อยู่ใกล้เคียง โดยมีค่าต่างดังนี้ Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
57
Image Tag and Attribute
Width = การกำหนดขนาดความกว้างของรูปภาพ Height = การกำหนดขนาดความสูงของรูปภาพ Border = เป็นการกำหนดเส้นกรอบของรูปภาพ - สำหรับการใส่เส้นขอบให้กับรูปใดๆ นั้น ให้ใช้แอตทริบิวต์ BORDER แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง โดยปกติถ้าหากว่ามีการนำรูปภาพไปเป็นจุด Link จะไม่นิยมให้มีเส้นขอบ ก็คือใช้ Border=0
58
Image Tag and Attribute
Hspace = เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
59
Image Tag and Attribute
Vspace = เป็นการกำหนดระยะเว้นขอบจากด้านบนกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
60
Absolute Path and Relative Path
ในการอ้างอิงชื่อ file ต่างๆ ใน HTML ไม่ว่าจะเป็น file รูปภาพ หรือว่า file ที่เป็น HTML Document หรือว่า file อื่นๆ เราสามารถทำการอ้างอิงได้ 2 แบบ คือ 1. Absolute Path 2. Relative Path
61
Absolute Path and Relative Path
Absolute Path เป็นการอ้างอิงชื่อไฟล์ โดยตรง เช่น <IMG SRC=“flower.gif”> การอ้างอิงแบบนี้จะต้องให้ไฟล์ .HTML และไฟล์ รูปภาพนี้อยู่ใน Directory หรือ Folder เดียวกัน Relative Path โดยปกติแล้วไฟล์รูปภาพ หรือไฟล์ อื่นๆ อาจจะไม่ได้อยู่ใน Directory เดียวกัน เนื่องจากการจัดระบบไฟล์หรือ เพื่อทำให้มีการแบ่งแยกไฟล์ประเภทต่างๆ เป็นไปตามที่ผู้สร้างกำหนด หรือเพื่อความง่ายในการบำรุงรักษาเว็บเพจ ดังนี้ เมื่อเวลาที่อ้างอิงไฟล์ ต่างๆ ในเว็บแต่ว่าคนละ Directory กัน จึงจำเป็นที่จะต้องมีการอ้างอิง Path ด้วย เพื่อความถูกต้องของการแสดงผลนั้นๆ การอ้างอิงแบบ Relative สามารถทำได้โดย ใช้ “/” (Slash) เป็นตัวขั้นระหว่างชื่อ directory ถ้า file ที่อ้างอิงอยู่ในระดับที่สูงกว่า file HTML ที่ทำงานอยู่ ให้ใช้ “../” สำหรับการอ้างอิงเหนือขึ้นไป 1 ระดับ ถ้าเป็นการอ้างอิงเหนือขึ้นไป 2 ระดับก็ให้เพิ่ม ../ ไปอีก 1 ครั้ง ซึ่งจะได้ “../../” ถ้า file ที่อ้างอิงอยู่ในระดับที่ต่ำกว่า ก็ให้อ้างอิง ชื่อ folder หรือ directory ก่อน แล้วตามด้วยชื่อ file เช่น <IMG SRC=“image/myimage.jpg”> ซึ่งแสดงว่า myimage.jpg เป็นรูปภาพที่อยู่ใน Directory ที่ชื่อ image และ File HTML ที่อ้างอิงรูปภาพนี้อยู่ในระดับที่สูงกว่า
62
การเชื่อมโยง (LINK) TAG ที่ใช้สำหรับการสร้าง การเชื่อมโยง คือ
<A HREF=“URL หรือ ปลายทาง”>ข้อความที่ใช้เป็นตัวเชื่อมโยง</A> HREF หรือ Hypertext Reference เป็น Attribute ที่ใช้บอกว่าจะเชื่อมโยงไปยังปลายทางที่ไหน การทำ Link ข้อความที่ใช้เป็นตัวเชื่อมโยงนับเป็นเรื่องที่สำคัญ ถ้าไม่ใส่ไป เวลาที่แสดงผลก็ไม่มีจุด หรือข้อความที่จะเป็นตัวเชื่อมโยงไปได้ (ผู้ใช้ไม่สามารถ Click จุดไหนได้ เพื่อที่จะทำการเชื่อมโยง) เป็นที่ทราบกันดีอยู่แล้วว่าการที่อินเทอร์เน็ตได้รับความนิยมอย่างกว้างขวางอยู่ทั่วโลกนั่น เป็นผลมาจากความสามรถในการเชื่อมโยงข้อมูล (Links) จากข้อมูลหนึ่งไปยังอีกข้อมูลหนึ่งได้อย่างรวดเร็ว โดยสามารถเชื่อมโยงข้อความได้ทั้งจากภายในแฟ้มเอกสารข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่อยู่ต่างเว็บไซต์กัน ข้อความที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บบราวเซอร์จะแสดงผลเป็นตัวอักษรที่มีสีแตกต่างจากตัวอักษรทั่วไป และอาจมีการขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไปตัวอักษรที่แสดงผลอยู่บนเว็บบราวเซอร์จะมีสีดำบนพื้นสีขาว (หรือสีเทา) แต่สำหรับข้อความที่ใช้เป็นตัวเชื่อมโยงข้อมูลนั้น จะมีตัวอักษรเป็นสีน้ำเงิน (หรือสีอื่นตามแต่ที่ผู้สร้างกำหนดขึ้นมา) เมื่อเลื่อนเมาส์ไปชี้ที่ข้อความซึ่งมีการเชื่อมโยง รูปแบบของตัวชี้จะเปลี่ยนจาก สัญลักษณ์ลูกศรไปเป็นรูปมือแทน และที่แถบที่แสดงสถานะด้านล่างจะแสดงถึง ตำแหน่งของจุดหมายปลายทางที่ข้อความเชื่อมโยงไปถึงให้เราได้เห็น
63
การเชื่อมโยง (LINK) ประเภทของการเชื่อมโยงสามารถแบ่งได้ดังนี้
1. การเชื่อมโยงภายในเว็บไซต์เดียวกัน การเชื่อมโยงต่างแฟ้มเอกสาร การเชื่อมโยงภายในแฟ้มเอกสาร 2. การเชื่อมโยงภายนอกเว็บไซต์ 3. การเชื่อมโยงแบบอื่นๆ การเชื่อมโยงแบบ การเชื่อมโยงแบบ Download
64
การเชื่อมโยง (LINK) 1. การเชื่อมโยงภายในเว็บไซต์เดียวกัน หมายถึง file ต่างๆ นั้นจะอยู่ภายในเว็บไซต์เดียวกัน หรือว่าอยู่ที่เครื่องเดียวกันนั่นเอง 1.1 การเชื่อมโยงต่างแฟ้มเอกสาร หมายถึง จะเชื่อมโยงไปยัง file อื่นๆ ที่อยู่ในเว็บไซต์เดียวกัน ที่ไม่ใช่ file ต้นฉบับ หรือ file ที่กำลังแสดงผลอยู่ รูปแบบ Tag ที่ใช้จะมีดังนี้ ซึ่งการเชื่อมโยงแบบนี้จะใช้วิธีการอ้างอิง Path แบบ Absolute Path หรือ Relative Path ก็ได้ ขึ้นอยู่กับว่าในเว็บไซต์จะมีการจัดการ file อย่างไร <a href="ไฟล์ที่จะทำการเชื่อมโยงที่มีนามสกุล .html">ข้อความ</a>
65
การเชื่อมโยง (LINK) 1.2 การเชื่อมโยงภายในแฟ้มเอกสาร หมายถึง การเชื่อมโยงไปยังส่วนอื่นๆ เช่น ส่วนต้น ส่วนท้าย หรือส่วนกลาง ของเอกสารเดียวกัน (File เดิม แต่ว่าเอกสารในหนึ่งหน้านั้นมีขนาดยาวมาก) โดย Tag ที่ใช้ คือ <a name="ชื่อที่ตั้งไว้เพื่อที่จะทำการเชื่อมโยงมาหา">ข้อความ</a> <a href="#ทำการตั้งชื่อตามความต้องการ">ข้อความ</a> หลักการที่สำคัญจะต้องมีการกำหนด name ให้กับข้อมูลที่จะทำการเชื่อมโยงมาหาก่อน จากนั้นจึงจะไปสร้างจุดเชื่อมโยงต่อขึ้นมา
66
<a href="http://URLที่ต้องการจะเชื่อมโยงไป">ข้อความ</a>
การเชื่อมโยง (LINK) 2. การเชื่อมโยงภายนอกเว็บไซต์ เป็นการเชื่อมโยงไปยังเอกสารที่อยู่ต่างเว็บไซต์กันรูปแบบ Tag ที่ใช้ คือ <a href=" โดยจะต้องมีการใส่ ก่อนซึ่งเป็นการบอกว่าจะใช้ Protocol HTTP ในการติดต่อ แล้วตามด้วยที่อยู่ของเว็บไซต์ แล้วชื่อ file ที่ต้องการ (ถ้ามี)
67
การเชื่อมโยง (LINK) 3. การเชื่อมโยงแบบอื่นๆ
3.1 การเชื่อมโยงแบบ ในการสร้างเว็บเพจ ถ้าเราต้องการให้ผู้เยี่ยมชมสามารถติดต่กับผู้สร้างเว็บเพจโดยที่ผู้ชมเว็บเพจไม่รู้จะติดต่อได้อย่างไร เราก็สามารถให้ผู้เยี่ยมชมสามารถติดต่อกับเราได้โดยการส่งอีเมล์ Tag ที่ใช้ คือ <a href="mailto: address ของผู้ที่จะส่ง ">ข้อความ</a>
68
<a href="ไฟล์ที่ต้องการให้ Download">ข้อความ</a>
การเชื่อมโยง (LINK) 3.2 การเชื่อมโยงแบบ Downloadในเว็บเพจในปัจจุบันนี้มักจะนิยมนำเอาข้อมูลต่าง ๆ ลงสู่เว็บเพจ เพื่อจะทำให้เนื้อหาของเว็บเพจนั้นมีประโยชน์แก่ผู้เข้าเยี่ยมชม จึงทำให้มีการนำข้อมูลต่างที่จะทำการเผยแพร่ ไม่ว่าจะเป็น ข้อมูลที่เป็นไฟล์ Word ไฟล์ Power Point และไฟล์อื่นๆ อีกมากมาย ในการที่จะนำไฟล์ต่างๆ นี้ลงสู่เว็บเพจนั้นเราจะต้องทำการ zip ไฟล์ข้อมูลนั้น เพื่อเป็นการง่ายต่อการจะนำไฟล์ไป ใช้โดยการ Download ไฟล์นั้น Tag ที่ใช้คือ <a href="ไฟล์ที่ต้องการให้ Download">ข้อความ</a>
69
การเชื่อมโยง (LINK) การเชื่อมโยงไฟล์ด้วยรูปภาพ
ในการเชื่อมโยงข้อมูลโดยใช้ตัวอักษรนั้น อาจจะทำให้เว็บเพจของเรานั้นไม่น่าสนใจ เราสามารถใช้รูปภาพมาทดแทนการเชื่อมโยงข้อมูลด้วยตัวอักษร Tag ที่ใช้ คือ <a href="ไฟล์ที่มีนามสกุล .html"><img src="ชื่อไฟล์รูปภาพ" ></a> * โดยปกติจะตั้ง Border = 0 ไว้ด้วย เพื่อทำให้จุดที่เป็นภาพ Link ไม่มีเส้นขอบขึ้นมา
70
การสร้างตาราง(Table)
ต่อมามีการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (คือเว็บเพจแรกที่จะแสดงให้เห็นเมื่อเข้าสู่ เซิร์ฟเวอร์นั้น) หรือเว็บเพจทั่วๆ ไปด้วย จนบางครั้งดูไม่ออกว่าเป็นตาราง ในบทนี้จะค่อยๆ อธิบายจากการทำตารางง่ายๆ ไปจนถึงการใช้ตารางช่วยออกแบบเว็บเพจ
71
การสร้างตาราง (Table)
โครงสร้างของตาราง โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว Row และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง Column หลักการในการสร้างตาราง ประกาศ <TABLE> ก่อน จากนั้นจะเริ่มสร้างจาก Row <TR> โดยทิศทางจะเป็น ซ้าย --> ขวา แล้วค่อยๆ สร้าง Cell , ช่องในแต่ละ Column ต่อมา <TD>
72
การสร้างตาราง – ตัวอย่าง
<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TABLE> ผลลัพธ์ที่ได้คือ ตารางขนาด 3 แถว แถวละ 2 คอลัมน์นั่นเอง
73
การสร้างตาราง – Tag ที่เกี่ยวข้อง
<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE> <TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR> <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD> นอกจากนี้ยังมี Tag อื่นๆ ที่ช่วยในการสร้างตาราง คือ <CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ</CAPTION> * <TH> มีค่าเท่ากับ <TD> เพียงแต่ทำให้ข้อมูลที่อยู่ในนี้เป็นตัวหนาและจัดรูปแบบให้อยู่ตรงกลาง
74
การสร้างตาราง – การกำหนดเส้นขอบ BORDER
การกำหนดเส้นของตาราง โดยทั่วไปแล้วข้อมูลในตารางจะถูกแบ่งออกเป็นส่วน ๆ อย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูล แต่บางครั้งเพื่อความสวยงามแล้ว นักออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้นกรอบที่ทำให้รกหูรกตานั้นได้ โดยเฉพาะในกรณีที่นักออกแบบให้แท็ก <TABLE> ในการตกแต่งเว็บเพจ การกำหนดว่าจะแสดงหรือไม่แสดงกรอบทำได้โดยใช้แอตทริบิวต์ BORDER และ BORDERCOLOR ที่ Tag <TABLE> เท่านั้น ตัวอย่าง <TABLE BORDER="ค่าตัวเลข" BORDERCOLOR="#RGB หรือชื่อสี" > หมายเหตุ โดยปกติถ้าไม่ใส่ Attribute นี้ จะไม่มีเส้นขอบขึ้นมาให้
75
การสร้างตาราง – การกำหนดเส้นขอบ BORDER
<TABLE> <TR> <TD>data</TD> </TR> </TABLE> <TABLE BORDER=1> <TR> <TD>data</TD> </TR> </TABLE> data data
76
Attribute สำหรับ Table - Cellpadding และ Cellspacing
โดยปกติเมื่อมีการใส่ข้อความลงไปใน Cell หรือ <TD> จะมีช่องว่างต่างๆ เกิดขึ้น เราสามารถกำหนดให้ค่าของช่องว่างเรานี้มากขึ้นหรือน้อยลงก็ได้ Cellpadding = ช่องว่างระหว่างข้อมูลกับกรอบภายใน Cell Cellspacing = ช่องว่างระหว่าง Cell กับ Cell Cellpadding กับ Cellspacing จะเป็น Attribute ที่ใส่ไว้ใน <TABLE> โดยกำหนดค่าเป็นตัวเลข Pixel เช่นเดียวกับ Attribute Border ข้อมูล Cellpadding Cellspacing
77
Attribute สำหรับ Table – Width และ Height
โดยการกำหนดทั้ง WIDTH และ HEIGHT สามารถกำหนดเป็นแบบ Percent หรือ ว่ากำหนดเป็น Pixel ก็ได้ สามารถกำหนดได้ใน Tag ใดก็ได้ ไม่ว่าจะเป็น <TABLE>, <TR>, <TD> แต่ต้องให้มีความสัมพันธ์กัน เช่น ถ้าในแถวเดียวกันกำหนด Height ไว้เท่าไร ในแถวนั้นถ้ามี <TD> ใดกำหนดสูงกว่า ก็จะให้ผลลัพธ์เท่ากับค่าที่สูงสุดในแถวนั้น เช่นเดียวกันกับ Column ถ้าใน Column มีการกำหนด Width ไว้ ตารางจะนับค่าที่มากที่สุดแทนค่าอื่นๆ ที่กำหนดเอาไว้
78
Attribute สำหรับ Table – Width และ Height
79
Attribute สำหรับ Table – การจัดตำแหน่ง
Align = กำหนดตำแหน่ง Left, Center, Right (ซ้าย กลาง ขวา) Valign = กำหนดตำแหน่ง Top, Middle, Bottom (บน กลาง ล่าง) ซึ่งเราสามารถใส่ Attribute Align, Valign ได้ที่ TAG <TR>, <TD> ถ้ากำหนด Align ไว้ที่ <TABLE> จะเป็นการจัดตำแหน่งของ Table กับจอภาพแทน ที่สำคัญคือ ถ้าหากว่าเรากำหนดไว้ใน <TR> แล้วไปกำหนดต่อใน <TD> จะนับจากส่วนที่ย่อยสุดเป็นหลักก่อน คือ ดูตามค่า ใน <TD> แล้วค่อยไปดูใน <TR>
80
Attribute สำหรับ Table – การจัดตำแหน่ง
ตัวอย่างเช่น <TABLE> <TR ALIGN=RIGHT> <TD>x</TD> <TD ALIGN=LEFT>x</TD> </TR> <TR> <TD ALIGN=CENTER>x</TD> </TABLE> จัดตาม <TR> x จัดตาม <TD> จัดตาม Default จัดตาม <TD>
81
Attribute สำหรับ Table – การจัดตำแหน่ง
สรุปการกำหนดตำแหน่ง Valign \ Align Left Center Right Top X Middle Bottom
82
Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง
เราสามารถใส่สีให้กับช่องของตารางหรือ Cell ได้โดยการเพิ่ม Attribute BGCOLOR เข้าไป (เหมือนกับ <BODY> ) ช่องก็จะมีสีตามที่เรากำหนดไว้ สามารถกำหนดได้ใน Tag ใดก็ได้ ไม่ว่าจะเป็น <TABLE> , <TR>, <TD> แต่มีหลักการเหมือนกันกับ Align คือ ถ้าหากว่าเรากำหนดไว้ใน <TABLE> แล้วไปกำหนดต่อใน <TR> หรือ <TD> จะนับจากส่วนที่ย่อยสุดเป็นหลักก่อน คือ ดูตามค่า ใน <TD> แล้วค่อยไปดูใน <TR> แล้วจึงไปดูค่าใน <TABLE> ต่อไป
83
Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง
เช่น <TABLE BGCOLOR=“brown” BORDER=1> <TR> <TD> </TD> </TR> <TD BGCOLOR=“Yellow”> </TD> </TABLE>
84
Attribute สำหรับ Table – สีพื้นหลังและภาพพื้นหลัง
นอกจากนี้เรายังสามารถใส่ภาพเป็น Background ให้กับตารางได้ด้วย โดยใช้ Attribute Background=“ที่อยู่รูปภาพ/ชื่อรูปภาพ” โดยหลักการใช้เหมือนๆ กับ BACKGROUND ของ <BODY> เช่น <TABLE BORDER=1> <TR> <TD> </TD> </TR> <TD BACKGROUND=“j002.jpg”> </TD> </TABLE>
85
ข้อควรระวังในการใช้ Table
ระวังการใช้ HTML จัดรูปแบบอักษรกับ TABLE ถ้าต้องการกำหนดรูปแบบอักษรให้กับข้อความทุกข้อความในตาราง ไม่สามารถใช้คำสั่ง เช่น <B><I>…..</I></B> ระบุครอบตาราง ดูตัวอย่าง วิธีที่ผิด <B><I>….. <table> </table> </I></B> วิธีที่ถูก <table> <tr><td> <B><I>ข้อความ</I></B> </td></tr> </table>
86
Colspan และ Rowspan ในตอนสร้างตารางครั้งแรก จะเห็นได้ว่า ตารางที่สร้างขึ้นมาได้นั้นเป็นรูปแบบสี่เหลี่ยมที่มีช่องแต่ละ Row แต่ละ Column เท่าๆกัน แต่ว่าในการใช้งานจริงอาจไม่เป็นอย่างนั้น จึงจำเป็นที่จะต้องมีการปรับตารางขึ้นมา การปรับแต่งตารางให้มีรูปร่างที่แตกต่างกันไปในแต่ละช่อง เช่นการขยายตามแนวนอน หรือการขยายตามแนวตั้งนั้นสามารถทำได้โดยการเพิ่ม Attribute Colspan หรือ Rowspan เข้าไปที่ <TD> COLSPAN = การขยายช่องตามแนวตั้ง (Column) ออกไปทางด้านขวามือของช่องตารางนั้น ROWSPAN = การขยายช่องตามแนวนอน (Row) ลงไปทางด้านล่างของช่องตารางนั้น
87
Colspan และ Rowspan ตัวอย่าง COLSPAN <TABLE> <TR>
<TD COLSPAN=2>…</TD> </TR> <TD>…</TD> </TABLE> จะเห็นว่า Row ที่ 1 จะมีแค่ Cell เดียวเท่านั้น และ Cell นั้นก็จะมีการขยายColumn ออกไป 2 Column ทางด้านขวา * ดูได้ง่ายๆ คือ บรรทัดไหนมีกี่ช่อง ก็จะมี <TD> ตามที่กำหนด และดูได้อีกว่าช่องนั้นขยายไปกี่ Column จากจำนวนช่องด้านบนหรือช่องด้านล่างของช่องที่ขยาย ว่าขยายไปเท่าไร
88
Colspan และ Rowspan ตัวอย่าง ROWSPAN <TD>…</TD>
<TABLE> <TR> <TD ROWSPAN=2>…</TD> <TD>…</TD> </TR> </TABLE> จะเห็นว่า Row ที่ 1 จะมี Cell 2 Cell และ Cell แรกก็จะมีการขยาย Row ลงไป 2 Row ทางด้านล่าง ดูได้ง่ายๆ คือ ช่องนั้นขยายไปกี่ Row จากจำนวนช่องข้างซ้ายหรือช่องด้านขวาของช่องที่ขยาย ว่าขยายไปเท่าไร ถ้าบรรทัดนั้นมีช่องที่ถูกขยายมาจากนั้นบน บรรทัดนั้นจะนับจำนวนช่องเฉพาะที่ไม่ได้ถูกขยายมา
89
Table ซ้อน Table การสร้างตารางก็สามารถทำการใส่ตารางซ้อนลงไปได้อีกข้างในตารางโดยรูปแบบของTAG จะเหมือนการสร้างตารางปกติ เพียงแต่ว่าจะมอง ตารางเป็นข้อมูลของ <TD>..</TD> ช่องนั้นเอง เช่น ... <TD> <TABLE> <TR> <TD>..</TD> </TR> </TABLE> </TD> …
90
สรุป Attribute ที่สำคัญของ Table
แอตตริบิวต์ ค่าที่กำหนด คำอธิบาย Align Left,center,right จัดตารางกับหน้าจอ Bgcolor #xxxxxx, ชื่อสี กำหนดสีพื้นตาราง Border ตัวเลข ขนาดเส้นขอบตาราง Bordercolor สีเส้นตาราง Cellpadding ระยะห่างระหว่างเส้นของเซลล์กับเนื้อหา Cellspacing ระยะห่างระหว่างเซลล์ Width ตัวเลข หรือ % ความกล้างของตารางกำหนดได้ 2 แบบ กำหนดเป็น pixel หรือกำหนดเป็น % ของหน้าจอ หรือ % ของตารางที่ซ้อนตาราง height ความสูงของตาราง
91
การประยุกต์ใช้ตารางกับ Webpage
การใช้ Table ใน Webpage โดยส่วนใหญ่ทุก Webpage มักจะมีการใช้ Table เข้ามาเกี่ยวข้องด้วยดังนี้ จัดขอบซ้ายขวาของ Webpage ให้พอดีกับหน้าจอ นำเสนอข้อมูลในลักษณะของตาราง จัดทำรูปแบบ Webpage ให้มีลักษณะของ Column แบบหนังสือพิมพ์ จัดทำ Menu หรือ Navigator ของ Website
งานนำเสนอที่คล้ายกัน
