Hyper Text Markup Language

HTML Hyper Text Markup Language

HTML • เป็นโปรแกรมภาษาคอมพิวเตอร์รูปแบบหนึ่งที่ใช้ในการสร้างเอกสารนำเสนอข้อมูลผ่านโปรแกรม Web Browser - การเขียน HTML นั้นจะใช้อิดิเตอร์ใดๆ ก็ได้ หรือโปรแกรมเฉพาะในการเขียนเวบ - ไฟล์ของเวบมีสกุลเป็น .html หรือ .htm • ** ในที่นี้จะแนะนำการใช้ Notepad เป็นหลัก**

แสดงตัวอย่างด้วยเวบบราวเซอร์ Internet Explorer

โครงสร้างเอกสาร HTML • ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสำคัญสองส่วนคือ Head กับ Body -Head จะเป็นส่วนหัวจะเหมือนกับ Header ของหน้าเอกสารทั่วไป -Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ ทั้งสองส่วนจะอยู่ภายใน Tag • <HTML>…</HTML>

โครงสร้างคำสั่ง Tag • Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > )

Tag HTML แบ่งได้ 2 ลักษณะ คือ • Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น • Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…..............</B>, <I>….....</I> เป็นต้น

คำสั่งในการเริ่มต้นในการสร้างเว็บเพจคำสั่งในการเริ่มต้นในการสร้างเว็บเพจ • คำสั่งเริ่มต้น <HTML>..........</HTML> • คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุด คำสั่ง HTML คำสั่งนี้จะไม่แสดงผลแต่ต้องเขียนเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML

ส่วนหัวของโปรแกรม • <HEAD>..........</HEAD> คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง <HEAD>...</HEAD> จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ <TITLE>........</TITLE> กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์ <TITLE>..........</TITLE > คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML จะแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์

ส่วนเนื้อหาของโปรแกรมส่วนเนื้อหาของโปรแกรม • <BODY>..........</BODY> คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

ตัวอย่างคำสั่งในการเริ่มต้นในการสร้างเว็บเพจตัวอย่างคำสั่งในการเริ่มต้นในการสร้างเว็บเพจ • <HTML><HEAD><TITLE>หัวเรื่อง.</TITLE></HEAD><BODY> ข้อความ ............... รูปภาพ ............... </BODY></HTML>

ส่วนหัวเรื่องเอกสารเว็บ (Head Section) • Head Section • เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword)ใน Title ไม่ควรพิมพ์เกิน 64 ตัวอักษร ควรมีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ หรือ มีลักษณะเป็นคำสำคัญในการค้นหา (Keyword)

ส่วนหัวเรื่องเอกสารเว็บ (Head Section) • Title จะปรากฏข้อความที่ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window) ใน Title มักจะมี Tag ที่อธิบายเกี่ยวกับสมบัติของเวบ ได้แก่ Tag META • Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย

ตัวอย่างHead Section • <HEAD><TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620"> <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ"> <META NAME="Keywords" CONTENT="ข้อความ 1, ข้อความ 2, …"></HEAD>

ส่วนเนื้อหาเอกสารเว็บ (Body Section) • Body Section • เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัด ในการพิมพ์คำสั่ง พิมพ์ติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>

และแบ่งกลุ่มคำสั่งได้ดังนี้และแบ่งกลุ่มคำสั่งได้ดังนี้ • กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร กลุ่มคำสั่งการทำเอกสารแบบรายการ (List) กลุ่มคำสั่งเกี่ยวกับการทำลิงค์ กลุ่มคำสั่งจัดการรูปภาพ กลุ่มคำสั่งจัดการตาราง (Table) กลุ่มคำสั่งควบคุมเฟรม กลุ่มคำสั่งอื่นๆ

การสร้างเว็บเพจด้วย Notepad • การสร้างเอกสาร HTML ด้วยโปรแกรม Notepad 1. เรียกโปรแกรม Start, All Program, Accessories, Notepad 2. พิมพ์คำสั่ง HTML ลงไป 3. จัดเก็บไฟล์ และกำหนดนามสกุลเป็น .html (การพิมพ์ชื่อไฟล์ ให้พิมพ์ชื่อและสกุลของไฟล์ไว้ในเครื่องหมายคำพูด หรือ ก่อน save เลือกเป็น All file)

4. เปิดโปรแกรมเบราเซอร์ แล้วเปิดไฟล์เอกสารเว็บที่สร้าง เพื่อดูผล • <HTML><HEAD> <TITLE>.....หัวเรื่อง..........</TITLE></HEAD><BODY> ข้อความ 1............... ข้อความ 2............... </BODY></HTML>

การเชื่อมโยง (link) • การเชื่อมโยงข้อมูล (Links) เป็นการเชื่อมโยงจากข้อมูลหนึ่งไปยังอีกข้อมูลหนึ่งได้อย่างรวดเร็ว ความสามารถในเชื่อมโยงข้อความได้ทั้งจากภายในแฟ้มเอกสารข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่อยู่ต่างเว็บไซต์กันข้อความที่ถูกกำหนดให้เชื่อมโยงกับข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษรที่มีสีแตกต่างจากตัวอักษรทั่วไป และอาจมีการขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไปตัวอักษรที่แสดงผลอยู่บนเว็บเบราเซอร์จะมีสีดำบนพื้นสีขาว (หรือสีเทา)แต่สำหรับข้อความที่ใช้เป็นตัวเชื่อมโยงข้อมูลนั้น จะมีตัวอักษรเป็นสีน้ำเงิน (หรือสีอื่นตามแต่ที่ผู้สร้างกำหนดขึ้นมา) เมื่อเลื่อนเมาส์ไปชี้ที่ข้อความซึ่งมีการเชื่อมโยง รูปแบบของตัวชี้จะเปลี่ยนจาก สัญลักษณ์ลูกศรไปเป็นรูปมือแทน และที่แถบที่แสดงสถานะด้านล่างจะแสดงถึงตำแหน่งของจุดหมายปลายทางที่ข้อความเชื่อมโยงไปถึงให้เราได้เห็น

ประเภทของการเชื่อมโยงประเภทของการเชื่อมโยง • HTML แบ่งการเชื่อมโยงออกเป็น 2 ประเภท ดังนี้การเชื่อมโยงภายในเว็บไซต์ การเชื่อมโยงนอกเว็บไซต์ • การเชื่อมโยงภายในเว็บไซต์ ยังแบ่งออกได้เป็นอีก 2 ชนิด คือ การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร • การเชื่อมโยง อื่นๆ อีก เช่น การเชื่อมโยง Email การเชื่อมโยงแบบ Downloadเป็นต้น

การสร้างตาราง • การสร้างตาราง ในเว็บเพจส่วนใหญ่มักใช้ตารางช่วยงาน เพราะว่าตารางสามารถประยุกต์ใช้งานได้หลายแบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน การใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบ ที่ชัดเจน ต่อมามีการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ หรือเว็บเพจทั่วๆ ไปด้วย จนบางครั้งดูไม่ออกว่าเป็นตาราง

การสร้างตาราง • โครงสร้างของตาราง แท็ก < TABLE > โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง

ตัวอย่างการสร้างตารางตัวอย่างการสร้างตาราง • คำสั่งการสร้างตาราง<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE> <CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </CAPTION> <TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR> <TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </TH> <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD>

การแบ่งพื้นที่ของจอภาพ (Frame) • การแบ่งส่วนบนจอภาพออกเป็นส่วนๆ โดยที่แต่ละส่วนต่างก็มีข้อมูลแยกแตกต่างกันไป ซึ่งเราจะเรียกการแบ่งหน้าจอภาพออกเป็นส่วนๆ ว่า เฟรม (FRAME) เฟรมเป็นรูปแบบการจัดพื้นที่การใช้งานบนหน้าจอใหม่ โดยพื้นที่ในแต่ละส่วนนั้นจะมีข้อมูลแยกเป็นของตัวเอง โดยที่จะมีเนื้อหาที่เกี่ยวข้องกันหรือไม่เกี่ยวข้องกันก็ได้ ขึ้นอยู่กับการออกแบบเพื่อให้ใช้งานแตกต่างกันไปการแบ่งจอภาพออกเป็นส่วนๆ สามารถนำพื้นที่ทั้งหมดของจอภาพให้ถูกใช้งานอย่างเต็มที่ ทั้งนี้เพราะในการใช้เฟรมจะมีการเรียกไฟล์ HTMLขึ้นมาพร้อมๆ กันหลายไฟล์ ทำให้ประหยัดเวลาในการค้นหาข้อมูล

การแบ่งพื้นที่ของจอภาพ (Frame) • เฟรมจะประกอบด้วยเฟรมหลักและเฟรมย่อยเฟรมหลัก และเฟรมย่อยคือ Frame1, 2เฟรมหลักจะเป็นเฟรมที่กำหนดว่าต้องการให้ Frame 1 และ Frame 2 อยู่ส่วนใดของ Web browserเราสามารถกำหนดได้ว่าต้องการกำหนดกี่เฟรม(ในที่นี่จะกล่าวถึงกำหนด 2 และ 3 เฟรม)

การแบ่งพื้นที่ของจอภาพ (Frame) • ข้อสังเกต 1. ในการใช้งานจะต้องเปิดแฟ้ม เฟรมหลัก <index> 2. ในเอกสารที่เป็น เฟรมหลัก จะใช้ tag <FRAME> แทนส่วนของ <BODY> 3. การแบ่งจอภาพ (เฟรม) ต้องสร้างแฟ้มให้ครบกับการแบ่ง และต้องมีแฟ้มหลักในการกำหนดการแบ่งจอภาพด้วย เช่น แบ่ง 2 ส่วนต้องมี 3 แฟ้ม แบ่ง 3 ส่วน ต้องมี 4 แฟ้ม 4. การใช้งานต้องเปิดแฟ้มหลักที่เก็บคำสั่ง

1. การแบ่งจอภาพ 2 ส่วน • <HTML><HEAD> <TITLE>ตัวอย่างการแบ่งพื้นที่จอ 2 ส่วน</TITLE></HEAD><FRAMESET COLS="30%,70%"><FRAME SRC=”ชื่อแฟ้ม1.html" NAME="right"><FRAME SRC=" ชื่อแฟ้ม2.html" NAME="left"></FRAMESET></HTML>

2. การแบ่งจอภาพ 3 ส่วน • <HTML><HEAD> <TITLE>ตัวอย่างการแบ่งพื้นที่จอ 3 ส่วน</TITLE></HEAD> < FRAMESET ROWS="20%,80%"> < FRAME SRC="ชื่อแฟ้ม1.html" NAME="top"> < FRAMESET COLS="30%,70%"> < FRAME SRC="ชื่อแฟ้ม2.html" NAME="left"> < FRAME SRC="ชื่อแฟ้ม3.html" NAME="right"> < /FRAMESET> <noframes> <p> </p> </noframes> < /FRAMESET></HTML>

การเชื่อมโยงระหว่างเฟรมการเชื่อมโยงระหว่างเฟรม • การสร้างลิงค์ระหว่างเฟรม • กรณีที่สร้างหน้าเว็บเพจโดยประกอบด้วยหลายๆ เฟรม การกำหนดให้มีการเชื่อโยง ระหว่างแต่ละเฟรมอย่างเช่น หน้าเว็บเพจมีทั้งหมด 3 เฟรม ถ้าเราสร้างต้นทางของลิงค์ไว้ในเฟรมทางด้านซ้าย เมื่อคลิกลิงค์ที่เว็บเพจปลายจะแสดงขึ้นมาทางเฟรมด้านขวาสำหรับวิธีการลิงค์ระหว่างเฟรม สามารถทำได้ดังนี้ • 1. กำหนดชื่อเฟรมที่อยู่ทางด้านบนสุด เป็น Top (เฟรมที่ 1) 2. กำหนดชื่อเฟรมที่อยู่ด้านซ้ายมือ เป็น Left (เฟรมที่ 2) 3. กำหนดชื่อเฟรมที่อยู่ด้านขวามือ เป็น right (เฟรมที่ 3)

ตัวอย่าง • 3.1 กำหนดไปยังตามเฟรมที่มีชื่อตามกำหนด ได้แก่ <a href="ชื่อแฟ้ม.html" target="ชื่อเฟรม">ข้อความ เข่น <a href="Test221.html" target="right">ไป ขวา <a href="Test222.html" target="top">ไป บน • 3.2 กำหนดเชื่อมโยงลักษณะอื่นๆ เช่น - เปิดหน้าต่างใหม่ <a href="ชื่อแฟ้ม.html" target="_blank">ข้อความ- เปลี่ยนทั้งหน้า <a href="ชื่อแฟ้ม.htmll" target="_parent">ข้อความ

สมาชิก • นางสาวศรัญญา อรนันท์ เลขที่ 21 • นางสาวศิรินันท์ สุนา เลขที่ 23 • นางสาวสไบทิพย์ บุญทศ เลขที่ 28

แหล่งอ้างอิง • http://www2.nectec.or.th/courseware/internet/html/index.html • http://www.nkpw.ac.th/pornsak/ • http://61.7.157.234/pornsak/html//index.htm

สวัสดี

Hyper Text Markup Language