[คอมพิวเตอร์] การเขียนเว็บเพจด้วยภาษา HTML 2

โครงสร้างของภาษา HTML

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

image

บทเรียนในการศึกษาภาษา HTML ต่อไปนี้ มีความประสงค์จะให้ผู้เรียนได้ฝึกฝนและทำความเข้าใจในการเขียนโค๊ดคำสั่งด้วยตนเอง จึงมีความจำเป็นจะต้องใช้เครื่องมือพื้นฐานที่มีอยู่แล้วให้เป็นประโยชน์มากที่สุด โดยไม่ต้องลงทุนอะไรมากมาย เมื่อทำความเข้าใจและเขียนโค๊ดได้ถูกต้องแม่นยำค่อยหาเครื่องมือมาช่วยอำนวยความสะดวกอีกที

  • เครื่องมือเขียนคำสั่ง เราจะใช้ Notepad เป็นหลักเพราะมีเป็นมาตรฐานอยู่แล้วในวินโดว์ทุกเวอร์ชั่น ท่านที่ใช้ลินุกส์ก็ใช้ Text Editor ในเครื่องได้เช่นกันนะครับ มีพร้อมกันแล้วและฟรี
  • เครื่องมือแสดงผล หรือบราวเซอร์นี่ก็มีพร้อมแล้วในวินโดว์ก็เป็น Internet Explorer หรือจะหันไปคบกับ Firefox เหมือนกับที่มีในลินุกส์ก็ย่อมได้ ฟรีอีกเหมือนกัน

ytโครงสร้างหลักของภาษา HTML (Hypert Text Markup Lanuage)

ในการเขียนภาษา HTML นั้น จะมีรูปแบบโครงสร้างการเขียนแบ่งออกเป็น 3 ส่วน โดยจะแสดงในรูปแบบของสี ดังนี้


ข้อความนี้จะแสดงบนไตเติ้ลบาร์ของบราวเซอร์

>

ส่วนเนื้อหาของเว็บเพจ ประกอบด้วย
– ข้อความ
– รูปภาพ
– สื่อมัลติมีเดีย
– - – - – - – - – - – - –
– - – - – - – - – - – - –
– - – - – - – - – - – - –


(1) ส่วนประกาศ
(2)

ส่วนหัว

(2)
(3)

ส่วนเนื้อหา

(3)
(1)

  1. ส่วนประกาศ เป็นส่วนที่กำหนดให้บราวเซอร์ทราบว่า นี่คือภาษา HTML และจะต้องทำการแปรผลอย่างไรมีคำสั่งคู่เดียวคือ และ ปรากฏที่หัวและท้ายไฟล์
  2. ส่วนหัวเรื่อง (head) เป็นส่วนที่แสดงผลข้อความบนไตเติ้ลบาร์ของบราวเซอร์ และอาจมีคำสั่งสำหรับกำหนดรายละเอียดด้านเทคนิคอื่นๆ อีก แทรกอยู่ระหว่างคำสั่ง และ
  3. ส่วนเนื้อหา (body) เป็นส่วนที่มีความซับซ้อนมากที่สุด และสามารถใส่เทคนิคลูกเล่นเพื่อดึงดูดความสนใจจากผู้ชมได้มาก ความแตกต่างระหว่างเว็บไซต์ต่างๆ แสดงความมีฝีมือของผู้จัดทำ ศิลปะในการออกแบบจะอยู่ในส่วนนี้ทั้งหมด ซึ่งจะแทรกอยู่ระหว่างคำสั่ง และ
Click to TOP

ytHEAD : รายละเอียดคำสั่งในส่วนหัว

คำสั่งที่อยู่ในส่วนหัวนี้จะอยู่ระหว่างคำสั่ง … เราสามารถมองเห็นผ่านบราวเซอร์ได้เฉพาะข้อความบนไตเติ้ลบาร์ คำสั่งอื่นๆ นั้นจะทำงานในส่วนเบื้องหลัง แต่ก็มีส่วนสำคัญเป็นอย่างยิ่งที่ไม่ควรละเลย ประกอบด้วยคำสั่งต่างๆ ดังนี้

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

    ให้เลือกใช้อย่างใดอย่างหนึ่ง เว็บเพจที่สร้างขึ้นก็จะสามารถแสดงผลภาษาไทยได้อย่างถูกต้อง

  3. ประกาศให้โลกรู้ ถึงแม้ว่าระบบการค้นหาของ Search Engine จะนำชื่อเรื่องของเว็บไซต์ไปเป็นคำหลักโดยอัตโนมัติแล้วก็ยังไม่เพียงพอ เพราะด้วยข้อจำกัดของจำนวนตัวอักษรและคำที่ใส่ลงไป ดังนั้นจึงต้องมีการกำหนดคำหลักให้กับหน้าเว็บเพจนั้นๆ โดยใช้คำสั่งที่มีรูปแบบเฉพาะไว้ในส่วน Head ถัดจาก Title เรียกว่าการใช้คำสั่ง Meta (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์) ดังนี้
    “X” content=“Y”> (x และ y จะถูกแทนค่าด้วยข้อความ)
    • ถ้า X แทนค่าด้วยคำว่า Keyword ในส่วน Y จะแทนค่าด้วยคำหลักที่เกี่ยวข้องกับเว็บไซต์นั้น คำหลักควรเป็นภาษาอังกฤษ (ใช้ภาษาไทยได้) สามารถกำหนดได้มากกว่า 1 คำ แต่ละคำจะคั่นด้วยเครื่องหมายจุลภาค (,) เช่น
      “keyword” content=“html, web, page, website, home.”>
    • ถ้า X แทนค่าด้วยคำว่า Description ในส่วน Y จะแทนค่าด้วยคำอธิบายที่เกี่ยวข้องกับเว็บไซต์นั้น ควรเป็นภาษาอังกฤษ เขียนในรูปประโยคบอกเล่าสื่อความหมายถึงเนื้อหาในเว็บนั้นๆ เช่น
      “Description” content=“HTML is a wonderful language for internet communication.”>
    • ถ้า X แทนค่าด้วยคำว่า Author ในส่วน Y จะแทนค่าด้วยชื่อของเจ้าของเว็บไซต์ หรือหน่วยงาน อาจระบุชื่ออีเมล์ไว้เพื่อให้สะดวกในการติดต่อกับผู้รับผิดชอบโดยตรง เช่น
      “Author” content=“Sethabute – wanchalong@gmail.com”>
  4. เทคนิคพิเศษ เราสามารถใส่เทคนิคพิเศษต่างๆ เพิ่มเติมในส่วนนี้ได้ เช่น สคริปต์พิเศษแสดงวันเวลา การแสดงผลพิเศษ (เราจะได้ศึกษาเพิ่มเติมในบทต่อๆ ไป)

นี่คือตัวอย่างของการแทรกคำสั่งต่างๆ ในส่วน head คุณสามารถเอาไปประยุกต์แก้ไขให้เหมาะสมกับเว็บเพจของได้เลย

Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML
Content-Type” content=”text/html; charset=TIS-620″>
keyword” content=”html, web, page, website, home.”>
description” content=”HTML is a wonderful language for internet
communication.”>
author” content=”Wanchalong Sethabute – wanchalong@gmail.com”>
htmlstyle.css” rel=”stylesheet” type=”text/css”>

Click to TOP

ytBODY : การนำเสนอในส่วนเนื้อหา

โดยปกติเมื่อไม่มีการกำหนดอะไรเป็นพิเศษในคำสั่ง body บรำหนดสีตัวอักษรในหน้าเว็บเพจทั้งหมด (ยกเว้นส่วนที่กำหนดพิเศษ)

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) ดังนั้นผลลัพธ์ที่ได้คือ สีเขียวสด

Click to TOP

ไฟล์ตัวอย่าง

แสดงการกำหนดสีพื้นหลัง ตัวอักษร และการเชื่อมโยงในหน้าเว็บเพจ ในตัวอย่างนี้ได้เพิ่มเติมการใช้ภาพเป็นพื้นหลังด้วยคำสั่ง Background และระบุชื่อรูปภาพที่ใช้นั้นชื่อ bgimage.gif

Example of Body : ไฟล์ตัวอย่างคำสั่ง BODY

background=”bgimage.gif” bgcolor=”#ffffff” text=”#000099″ link=”#ff0000″ vlink=”#990099″ alink=”#009900″>
ข้อความที่แสดงในส่วนเนื้อหา

ytEND : สรุปคำสั่งที่ใช้ในบทนี้

TAGS
รายละเอียด


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


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


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

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


คำสั่งกำหนดการแสดงผลในส่วนเนื้อหาของเว็บเพจ

กิจกรรมเรียนรู้ประจำหน่วย

ขั้นตอนดำเนินการ
ให้ศึกษาจากหน่วยการเรียนรู้ที่ 1 เรื่อง ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต แล้วตอบคำถามต่อไปนี้
1. อินเทอร์เน็ต หมายถึง ……………………
2. ให้อธิบายประวัติของอินเทอร์เน็ตมาพอสังเขป
………………………………
………………………………
………………………………
3. ให้อธิบายรูปแบบการบริการของอินเทอร์เน็ต มาเป็นข้อๆ
3.1 …………………………………………………………………………………………………………..
3.2 …………………………………………………………………………………………………………..
3.3 …………………………………………………………………………………………………………..
3.4 …………………………………………………………………………………………………………..
3.5 …………………………………………………………………………………………………………..
3.6 …………………………………………………………………………………………………………..
3.7 …………………………………………………………………………………………………………..
3.8 …………………………………………………………………………………………………………..
3.9 …………………………………………………………………………………………………………..
3.10 ………………………………………………………………………………………………………..
4. นักเรียนคิดว่าจะสามารถนำอินเทอร์เน็ตมาประยุกต์ใช้ในการดำเนินชีวิตประจำวันได้อย่างไร
………………………………
………………………………
………………………………
………………………………

- 2007-12-7 9:49:12 โพสต์โดย : admin คนอ่าน 476 คน
หน้าแรก Tlcthai.comหน้าแรก Tlcthai.com close Trainning CenterTrainning Center Clip VDOClip VDO เกมส์เกมส์ GameGame ฟังเพลง Onlineฟังเพลง Online Pic PostPic Post TV OnlineTV Online Edu parkEdu park ผู้หญิงผู้หญิง โปรโมทเว็บไซต์โปรโมทเว็บไซต์ สาวสวย เซ็กซี่สาวสวย เซ็กซี่ การ์ตูนการ์ตูน ละครย้อนหลังละครย้อนหลัง ท่องเที่ยวท่องเที่ยว รายการทีวีย้อนหลังรายการทีวีย้อนหลัง ข่าวบันเทิง เกาหลีข่าวบันเทิง เกาหลี ข่าวเด่นข่าวเด่น ตรวจสลากกินแบ่งรัฐบาลตรวจสลากกินแบ่งรัฐบาล