Page 1

1

สาระสาคัญ ภาษา HTML (Hyper Text Markup Language) เป็ นภาษาที่ใช้ในการเขียนโปรแกรมข้อมูลที่ใช้แสดงผล บนเครื อข่ายอินเตอร์เน็ตในลักษณะของข้อความ รู ปภาพ เสียง และภาพเคลื่อนไหวต่างๆ ภาษา HTML เป็ น ภาษาที่ง่ายต่อการเรี ยนรู้ สามารถกาหนดรู ปแบบและโครงสร้างได้ง่าย ทาให้ได้รับความนิยม และมีการพัฒนา อย่างต่อเนื่องเพื่อให้ใช้งานง่ายขึ้น และตอบสนองต่องานด้านกราฟิ กมากยิง่ ขึ้น และสนับสนุนการแสดงผลใน เว็บบราวเซอร์มากมาย และบันทึกในรู ปของไฟล์นามสกุล htm หรื อ html

สาระการเรียนรู้ประจาหน่ วย  การสร้างเว็บเพจด้วยภาษา HTML  โครงสร้างของภาษา HTML  หลักการสร้างเว็บเพจด้วยภาษา HTML ผลการเรียนรู้ที่คาดหวังประจาหน่ วย  อธิบายความหมายของภาษา HTML ได้  อธิบายโครงสร้างและคาสัง่ หลักในภาษา HTML ได้  ใช้คาสัง่ พื้นฐานในการเขียนโปรแกรมภาษา HTML ได้  เรี ยกใช้ HTML โดยใช้โปรแกรมบราวเซอร์ได้


2

บทเรี ยนในการศึกษาภาษา HTML ต่อไปนี้ มีความประสงค์จะให้ผเู้ รี ยนได้ฝึกฝนและทาความเข้าใจใน การเขียนโค๊ดคาสัง่ ด้วยตนเอง จึงมีความจาเป็ นจะต้องใช้เครื่ องมือพื้นฐานที่มีอยูแ่ ล้วให้เป็ นประโยชน์มากที่สุด โดยไม่ตอ้ งลงทุนอะไรมากมาย เมื่อทาความเข้าใจและเขียนโค๊ดได้ถกู ต้องแม่นยาค่อยหาเครื่ องมือมาช่วยอานวย ความสะดวกอีกที เครื่ องมือเขียนคาสัง่ เราจะใช้ Notepad เป็ นหลักเพราะมีเป็ นมาตรฐานอยูแ่ ล้วในวินโดว์ทุกเวอร์ชนั่ ท่านที่ใช้ลินุกส์ก็ใช้ Text Editor ในเครื่ องได้เช่นกันนะครับ มีพร้อมกันแล้วและฟรี เครื่ องมือแสดงผล หรื อบราวเซอร์นี่ก็มีพร้อมแล้วในวินโดว์ก็เป็ น Internet Explorer หรื อจะหันไปคบกับ Firefox เหมือนกับที่มีในลินุกส์ก็ยอ่ มได้ ฟรี อีกเหมือนกัน โครงสร้ างหลักของภาษา HTML (Hypert Text Markup Lanuage) ในการเขียนภาษา HTML นั้น จะมีรูปแบบโครงสร้างการเขียนแบ่งออกเป็ น 3 ส่วน โดยจะแสดงใน รู ปแบบของสี ดังนี้

1. ส่วนประกาศ เป็ นส่วนที่กาหนดให้บราวเซอร์ทราบว่า นี่คือภาษา HTML และจะต้องทาการแปรผล อย่างไรมีคาสัง่ คู่เดียวคือ <html> และ </html> ปรากฏที่หวั และท้ายไฟล์


3

2. ส่วนหัวเรื่ อง (head) เป็ นส่วนที่แสดงผลข้อความบนไตเติ้ลบาร์ของบราวเซอร์ และอาจมีคาสัง่ สาหรับ กาหนดรายละเอียดด้านเทคนิคอื่นๆ อีก แทรกอยูร่ ะหว่างคาสัง่ <head> และ </head> 3. ส่วนเนื้อหา (body) เป็ นส่วนที่มีความซับซ้อนมากที่สุด และสามารถใส่เทคนิคลูกเล่นเพื่อดึงดูดความสนใจ จากผูช้ มได้มาก ความแตกต่างระหว่างเว็บไซต์ต่างๆ แสดงความมีฝีมือของผูจ้ ดั ทา ศิลปะในการออกแบบ จะอยูใ่ นส่วนนี้ท้งั หมด ซึ่งจะแทรกอยูร่ ะหว่างคาสัง่ <body> และ </body> HEAD : รายละเอียดคาสั่งในส่ วนหัว คาสัง่ ที่อยูใ่ นส่วนหัวนี้จะอยูร่ ะหว่างคาสัง่ <head> ... </head> เราสามารถมองเห็นผ่านบราวเซอร์ได้ เฉพาะข้อความบนไตเติ้ลบาร์ คาสัง่ อื่นๆ นั้นจะทางานในส่วนเบื้องหลัง แต่ก็มีส่วนสาคัญเป็ นอย่างยิง่ ที่ไม่ควร ละเลย ประกอบด้วยคาสัง่ ต่างๆ ดังนี้ 1. หัวเรื่องบนไตเติล้ บาร์ เป็ นส่วนสาคัญที่จะบอกรายละเอียดของหน้าเว็บเพจนั้นๆ อยูภ่ ายในคาสัง่ <title> ... </title> จะต้องกาหนดเสมอและควรใช้ภาษาอังกฤษนา สามารถใช้ภาษาไทยเป็ นคาตามได้ แต่ตอ้ งไม่ยาวเกิน 64 ตัวอักษร เช่น Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML (การนับตัวอักษรในคาภาษาไทย ต้องนับสระบน/ล่าง/วรรณยุกต์ดว้ ย) ชื่อเรี ยกเว็บไซต์ที่ปรากฏบนไตเติ้ลบาร์ นอกจากจะนามาใช้แสดงชื่อเรื่ องของเว็บไซต์น้ นั ๆ แล้ว ยังเป็ น ข้อความที่จะถูกนามาใช้เป็ นคาสาคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine เสมอ 2. การระบุอกั ขระภาษา เป็ นส่วนสาคัญและจาเป็ นสาหรับเว็บเพจภาษาไทย ทาให้ผชู้ มสามารถอ่านข้อความบน เว็บเพจเป็ นภาษาไทยได้ทนั ที โดยเฉพาะการสร้างเว็บจากเครื่ องมือสาเร็ จรู ปหลายๆ โปรแกรมที่มกั จะทาการ กาหนดให้เว็บเป็ นภาษาของผูพ้ ฒั นาโปรแกรม (อาจเป็ นภาษาในยุโรป/อเมริ กา/หรื อภาษาอื่นๆ) ทาให้ผชู้ มไม่ สามารถอ่านภาษาไทยได้ ดังนั้นผูส้ ร้างเว็บจะต้องทาการกาหนดค่าการถอดรหัสภาษาไทยไว้เลยในทุกๆ ไฟล์ โดยใช้คาสัง่ Meta ระบุไว้ที่ส่วน Head เช่นเดียวกันกับไตเติ้ล ดังนี้ <meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรื อ <meta http-equiv="Content-Type" content="text/html; charset=Windows-874"> ให้เลือกใช้อย่างใดอย่างหนึ่ง เว็บเพจที่สร้างขึ้นก็จะสามารถแสดงผลภาษาไทยได้อย่างถูกต้อง 3. ประกาศให้ โลกรู้ ถึงแม้ว่าระบบการค้นหาของ Search Engine จะนาชื่อเรื่ องของเว็บไซต์ไปเป็ นคาหลักโดย อัตโนมัติแล้วก็ยงั ไม่เพียงพอ เพราะด้วยข้อจากัดของจานวนตัวอักษรและคาที่ใส่ลงไป ดังนั้นจึงต้องมีการ กาหนดคาหลักให้กบั หน้าเว็บเพจนั้นๆ โดยใช้คาสัง่ ที่มีรูปแบบเฉพาะไว้ในส่วน Head ถัดจาก Title เรี ยกว่าการ ใช้คาสัง่ Meta (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์ ) ดังนี้


4

<Meta name="X" content="Y"> (x และ y จะถูกแทนค่าด้วยข้อความ) - ถ้า X แทนค่าด้วยคาว่า Keyword ในส่วน Y จะแทนค่าด้วยคาหลักที่เกี่ยวข้องกับเว็บไซต์น้ นั คาหลักควรเป็ น ภาษาอังกฤษ (ใช้ภาษาไทยได้) สามารถกาหนดได้มากกว่า 1 คา แต่ละคาจะคัน่ ด้วยเครื่ องหมายจุลภาค (,) เช่น <Meta name="keyword" content="html, web, page, website, home."> - ถ้า X แทนค่าด้วยคาว่า Description ในส่วน Y จะแทนค่าด้วยคาอธิบายที่เกี่ยวข้องกับเว็บไซต์น้ นั ควรเป็ น ภาษาอังกฤษ เขียนในรู ปประโยคบอกเล่าสื่อความหมายถึงเนื้อหาในเว็บนั้นๆ เช่น <Meta name="Description" content="HTML is a wonderful language for internet communication."> - ถ้า X แทนค่าด้วยคาว่า Author ในส่วน Y จะแทนค่าด้วยชื่อของเจ้าของเว็บไซต์ หรื อหน่วยงาน อาจระบุชื่อ อีเมล์ไว้เพื่อให้สะดวกในการติดต่อกับผูร้ ับผิดชอบโดยตรง เช่น <Meta name="Author" content="Sethabute - wanchalong@gmail.com"> 4. เทคนิคพิเศษ เราสามารถใส่เทคนิคพิเศษต่างๆ เพิ่มเติมในส่วนนี้ได้ เช่น สคริ ปต์พิเศษแสดงวันเวลา การ แสดงผลพิเศษ (เราจะได้ศึกษาเพิ่มเติมในบทต่อๆ ไป) นี่คือตัวอย่างของการแทรกคาสัง่ ต่างๆ ในส่วน head คุณสามารถเอาไปประยุกต์แก้ไขให้เหมาะสมกับ เว็บเพจของได้เลย <head> <title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title> <meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> <meta name="keyword" content="html, web, page, website, home."> <meta name="description" content="HTML is a wonderful language for internet communication."> <meta name="author" content="Wanchalong Sethabute - wanchalong@gmail.com"> <link href="htmlstyle.css" rel="stylesheet" type="text/css"> </head>


5

BODY : การนาเสนอในส่ วนเนือ้ หา โดยปกติเมื่อไม่มีการกาหนดอะไรเป็ นพิเศษในคาสัง่ body บราวเซอร์จะแสดงผลหน้าเว็บเพจเป็ นพื้น หลังสีขาว ตัวอักษรสีดาเสมอ ในคาสัง่ body เราสามารถระบุค่าสีของพื้นหลัง ตัวอักษร และจุดเชื่อมโยงได้ตาม ต้องการ ดังนี้ <body bgcolor="#000099" text="#FFFFFF" link="#00FFFF" alink="#00FF00" vlink="#FF99FF"> bgcolor = การกาหนดสีพ้นื หลัง link = การกาหนดสีของจุดเชื่อมโยง (link) background = การกาหนดรู ปภาพพื้นหลัง (ใช้ภาพสกุล .jpg, .gif) alink = การกาหนดสีของจุดเชื่อมโยงขณะนาเมาท์ไปชี้ (active link) text = การกาหนดสีตวั อักษรในหน้าเว็บเพจทั้งหมด (ยกเว้นส่วนที่กาหนดพิเศษ) vlink = การกาหนดสีของจุดเชื่อมโยงเมื่อคลิกไปเยีย่ มชมมาแล้ว (visited link) การกาหนดค่าสีน้ นั สามารถกาหนดโดยระบุชื่อสีโดยตรง เช่น black, white, blue, green,... เป็ นต้น แต่ การกาหนดแบบนี้จะไม่สามารถระบุความเข้มแบบไล่เฉดสีได้ จึงได้ใช้ค่าสีเป็ นตัวเลขฐานสิบหก (hexadecimal format) โดยกาหนดเป็ นค่าสีของแสง RGB แต่ละสีประกอบด้วยเลข 2 หลัก ในแต่ละสีจะมีค่าของสีจากมืดไปสว่างดังนี้ 0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลักของแต่ละสีจึง มีค่าได้ต้งั แต่ 00 – FF หรื อแปลงค่าเป็ นตัวเลขได้ต้งั แต่ 0 – 255 ดังนั้นเมื่อเรากาหนดค่าสีเป็ น 00FF00 (red=0, green=255, blue=0) ดังนั้นผลลัพธ์ที่ได้คือ สีเขียวสด ไฟล์ตวั อย่าง แสดงการกาหนดสีพ้นื หลัง ตัวอักษร และการเชื่อมโยงในหน้าเว็บเพจ ในตัวอย่างนี้ได้เพิ่มเติมการใช้ ภาพเป็ นพื้นหลังด้วยคาสัง่ Background และระบุชื่อรู ปภาพที่ใช้น้ นั ชื่อ bgimage.gif


6

<html> <head> <title> Example of Body : ไฟล์ตวั อย่างคาสัง่ BODY </title> </head> <body background="bgimage.gif" bgcolor="#ffffff" text="#000099" link="#ff0000" vlink="#990099" alink="#009900"> ข้อความที่แสดงในส่วนเนื้อหา </body> </html> END : สรุปคาสั่งที่ใช้ ในบทนี้ TAGS

รายละเอียด

<html> ... </html>

กาหนดชนิดของไฟล์ให้ html

<head> ... </head>

กาหนดส่วนหัวของไฟล์ เพื่อจัดเก็บรายละเอียดและชื่อไฟล์

<title> ... </title>

การกาหนดชื่อไฟล์เพื่อแสดงผลบนไตเติ้ลบาร์ของบราวเซอร์

<meta> <body>...</body>

การกาหนดรายละเอียดของเว็บไซต์เกี่ยวกับการแสดงผลภาษาและคาอธิบาย รายละเอียด คาค้นหาของเว็บไซต์ คาสัง่ กาหนดการแสดงผลในส่วนเนื้อหาของเว็บเพจ

html  

html lesson2

Read more
Read more
Similar to
Popular now
Just for you