ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytโครงสร้างของภาษา HTML

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

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

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

<html>
      <head>
          <title>
              ข้อความนี้จะแสดงบนไตเติ้ลบาร์ของบราวเซอร์
          </title>
      </head
>
      <body>
          ส่วนเนื้อหาของเว็บเพจ ประกอบด้วย
            - ข้อความ
            - รูปภาพ
            - สื่อมัลติมีเดีย
          - - - - - - - - - - - - -
          - - - - - - - - - - - - -
          - - - - - - - - - - - - -
      </body>

</html>
(1) ส่วนประกาศ
(2)
 
  ส่วนหัว
 
(2)
(3)
 
 
 
  ส่วนเนื้อหา
 
 
 
(3)
(1)

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

  2. ส่วนหัวเรื่อง (head) เป็นส่วนที่แสดงผลข้อความบนไตเติ้ลบาร์ของบราวเซอร์ และอาจมีคำสั่งสำหรับกำหนดรายละเอียดด้านเทคนิคอื่นๆ อีก แทรกอยู่ระหว่างคำสั่ง <head> และ </head>

  3. ส่วนเนื้อหา (body) เป็นส่วนที่มีความซับซ้อนมากที่สุด และสามารถใส่เทคนิคลูกเล่นเพื่อดึงดูดความสนใจจากผู้ชมได้มาก ความแตกต่างระหว่างเว็บไซต์ต่างๆ แสดงความมีฝีมือของผู้จัดทำ ศิลปะในการออกแบบจะอยู่ในส่วนนี้ทั้งหมด ซึ่งจะแทรกอยู่ระหว่างคำสั่ง <body> และ </body>

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

คำสั่งที่อยู่ในส่วนหัวนี้จะอยู่ระหว่างคำสั่ง <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 (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์) ดังนี้
    <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 - [email protected]">
     
  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 - [email protected]">
    <link href="htmlstyle.css" rel="stylesheet" type="text/css">
</head>

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

โดยปกติเมื่อไม่มีการกำหนดอะไรเป็นพิเศษในคำสั่ง 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) ดังนั้นผลลัพธ์ที่ได้คือ สีเขียวสด


Click to TOP

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

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

<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>


Click to TOP

ytEND : สรุปคำสั่งที่ใช้ในบทนี้
TAGS รายละเอียด
<html> ... </html> กำหนดชนิดของไฟล์ให้ html
<head> ... </head> กำหนดส่วนหัวของไฟล์ เพื่อจัดเก็บรายละเอียดและชื่อไฟล์
<title> ... </title> การกำหนดชื่อไฟล์เพื่อแสดงผลบนไตเติ้ลบาร์ของบราวเซอร์
<meta> การกำหนดรายละเอียดของเว็บไซต์เกี่ยวกับการแสดงผลภาษาและคำอธิบายรายละเอียด คำค้นหาของเว็บไซต์
<body>...</body> คำสั่งกำหนดการแสดงผลในส่วนเนื้อหาของเว็บเพจ

Click to TOP

ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP