PHP - การสร้างตัวแปร

ตัวแปรใน PHP มีไว้ใช้สำหรับเก็บค่าต่างๆ เพื่อใช้ในการอ้างอิง การกำหนดชื่อของตัวแปรจะใช้ $ (Dollar Sign) นำหน้าชื่อตัวแปร ชื่อตัวแปรตัวแรกต้องเป็นตัวอักษร ห้ามขึ้นต้นด้วยตัวเลขหรือสัญลักษณ์ ชื่อตัวแปรห้ามเว้นวรรค อักษรตัวใหญ่ ตัวเล็ก มีความหมายต่างกัน เช่นการกำหนดค่าให้กับตัวแปรจะต้องเขียน $price = 100;

ชนิดของตัวแปร

ชนิดของตัวแปรในภาษา PHP จะมี 7 ชนิดคือ
          integer คือ ชนิดเลขจำนวนเต็ม
          double คือ ชนิดเลขทศนิยม
          string คือ ตัวอักษร หรือ กลุ่มของตัวอักษร
          array คือ กลุ่มของข้อมูล
          object  คือ ชนิดข้อมูลแบบ Object Oriented
          pdfdoc คือ เอกสารในรูปแบบ PDF (ต้องเลือกให้ PHP สนับสนุน PDF ในขณะติดตั้ง ถึงจะใช้ได้)
          pdfinfo คือ เอกสาร PDF (ต้องเลือกให้ PHP สนับสนุน PDF ในขณะติดตั้ง ถึงจะใช้ได้)

ใน PHP นั้นไม่จำเป็นต้องประกาศ ชนิดของตัวแปรก่อนที่จะใช้งาน โดย PHP จะตรวจสอบเองว่า ข้อมูลที่เก็บในตัวแปรนั้น เป็นข้อมูลชนิดใด และก็จะกำหนดชนิดของตัวแปรให้เอง เช่น

          $price = 100;  (จะเป็นชนิด integer)
          $firstName = “Com”;  (จะเป็นชนิด string)

ตัวแปร Array

เป็นตัวแปรที่ใช้เก็บกลุ่มค่าของข้อมูล เช่น การเก็บชุดค่าของสีต่างๆ ไว้ในตัวแปรเดียวกัน คือการเก็บค่าหลายๆ ค่าไว้ด้วยกัน (“blue”,”yellow”,”red”,etc.) ตัวแปร array ใน PHP เป็นได้ทั้ง indexed array และ associative array

1. indexed array

การกำหนดค่าให้ array สามารถใช้ array() function ดังนี้

$colors = array(“blue”,”yellow”,”brown”);  //สำหรับสร้างตัวแปร array ที่ทราบค่าอยู่แล้ว
หรือ $colors = array();  // สำหรับสร้างตัวแปร array ที่ยังไม่ทราบค่า)

การกำหนดค่าให้ array แบบธรรมดาสามารถทำได้ดังนี้

$colors[] =”green” ;

ให้ค่าตัวแปร $colors มีทั้งหมด 4 ค่า คือ “blue”, ”yellow”, ”brown”, ”green” ส่วนการอ้างอิงค่าแต่ละค่าที่อยู่ใน array จะต้องใช้  key เพื่ออ้างอิง ในที่นี้ไม่มีการสร้าง key ขึ้นมาเลย PHP จึงใช้วิธีกำหนดตัวเลขขึ้นมาเป็น key โดยให้

ค่าแรก (“blue”) คือ 0 การเขียนตัวแปรเพื่ออ้างอิงค่าคือ $colors[0]
ค่าที่ 2  (“yellow”) คือ 1 วิธีการเขียนตัวแปรเพื่ออ้างอิงค่าคือ $colors[1]
เป็นลำดับเรื่อยๆ ไป

2. associative array

เป็นการสร้าง key ที่มีความหมาย ตัวอย่างเช่น array $colors ข้างต้น ซึ่งสีที่อยู่ใน $colors ทั้งหมดหมายถึงสีของแต่ละส่วนของห้องทำงาน จึงควรจะกำหนด key ให้แต่ละสีโดยใช้องค์ประกอบของห้องทำงานดังนี้

ม่าน(curtain) = blue
ประตู(door) = yellow
โต๊ะ(table) = brown
ชั้นวางของ(shelf) = green

วิธีการสร้าง associative array ทำได้ดังนี้

$colors = array(“curtain”  =>  “blue”,
                         “door”    =>  “yellow”,
                         “table”    =>  “brown”,
                         “self”      =>  “green”);

วิธีอ้างอิงค่าใน associative array

     print $colors[door];

PHP variables and Web Forms

PHP สามารถดึงข้อมูลจาก web มาใช้ได้โดยง่าย เนื่องจาก PHP จะทำการโอนย้ายชื่อ ตัวแปรใน php script โดยอัตโนมัติ สามารถดูได้จากตัวอย่างดังต่อไปนี้

<FORM action=”process.php” method=”get”>
          Please enter your e-mail address:
          <INPUT type=text size=20 name=”email”><BR>
          <INPUT  type=submit  value=”submit”>
</FORM>

เมื่อมีการกรอกข้อมูลลงในฟอร์มแล้วกดปุ่ม Submit

          1. ตัวแปรชื่อ email พร้อมกับค่าที่ผู้ใช้ป้อนเข้ามาจะถูกส่งไปยังไฟล์ process.php
          2. ในไฟล์ process.php จะมีการสร้างตัวแปรชื่อ email ที่มีค่าเหมือนกับค่าที่ผู้ใช้กรอกผ่าน web browser โดยอัตโนมัติ
          ดังนั้นเราจึงสามารถใช้ค่าจาก web form ได้ทันทีโดยใช้ชื่อตัวแปรเดียวกัน

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

          <? Echo “Your address is $email ,Thank you very much”; ?>

PHP - เริ่มต้นสร้างไฟล์ PHP

การเขียนโปรแกรมภาษา PHP นั้น จะเขียนลงไปในเท็กไฟล์ แต่เวลาเซฟให้มีนามสกุลเป็น PHP ในไฟล์จะมีทั้งโค้ด PHP และ HTML การกำหนดว่า ส่วนไหนคือส่วน HTML และส่วนไหนคือส่วนของ PHP จะกำหนดได้ดังนี้

          <?  โค้ด PHP  ?>
          <?php  โค้ด PHP  ?>
          <%  โค้ด PHP  %>
          <?script langauge=”php”>  โค้ด PHP  </script>

ในไฟล์เดียวกัน สามารถใช้ tag เหล่านี้ปนกันได้ และยังสามารถแทรกโค้ด PHP ได้ทุกตำแหน่งในไฟล์ HTML

การเขียน comment

การเขียน comment อธิบายในโค้ด ให้ใช้สัญลักษณ์  /* */  หรือ //  หรือ  #

          /*
                 สามารถเขียน comment ได้หลายบรรทัด
          */

          //  หรือ # เขียนได้บัรรทัดเดียว และไม่ต้องมีเครื่องหมายสิ้นสุด comment


การเขียนคำสั่งของ php จะต้องมีการแยกคำสั่งแต่ละคำสั่งออกจากกัน จะใช้เครื่องหมาย ;


ตอนต่อไป -> การสร้างตัวแปร

HTML - สร้างปุ่มกด

รูปแบบ   <button> ข้อความที่จะแสดงบนปุ่ม </button>

สามารถใส่รูปแบบข้อความในปุ่มด้วยแท็กต่าง ๆ ได้ เช่น  <button><b>ปุ่มแบบข้อความ</b></button>

แสดงรูปบนปุ่มกด  <button><img src = “ไฟล์รูปภาพ”></button>

เพิ่มฟังก์ชั่นให้ปุ่ม

คลิกเพื่อลิงค์               <button onClick = “window.location = ‘http://เว็บไซต์’”> ข้อความ </button>
คลิกเพื่อปิดหน้าต่าง    <button onClick = “window.close()”> ข้อความ </button>
คลิกเพื่อเปิดหน้าต่าง  <button onClick = “window.open(‘ไฟล์.html’)”> ข้อความ </button>
คลิกเพื่อย้อนกลับ        <button onClick = “history.go(-1)”> ข้อความ </button>
คลิกเพื่อเดินหน้า         <button onClick = “history.go(1)”> ข้อความ </button>
คลิกเพื่อ Reload           <button onClick = “window.location.reload()”> ข้อความ </button>

สร้าง Effect ให้กับปุ่ม

เติมสีพื้นให้กับปุ่ม    <button style = “background-color:รหัสสี/ชื่อสี”> ข้อความ </button>
เติมรูปภาพเป็นพื้น  <button style = “background-image:url(ไฟล์รูปภาพ)”> ข้อความ </button>
เติมสีพื้นให้กับปุ่ม   <button style = “background-color:transparent”> ข้อความ </button>
กำหนดค่าให้ปุ่ม      <button style = “width:ค่าความกว้าง; height:ค่าความสูง”> ข้อความ </button>

HTML - การ Redirect

เมื่อเปิดเว็บเพจขึ้นมา แล้วต้องการเปลี่ยนเส้นทางไปยังไฟล์อื่น หรือโดเมนอื่น ซึ่งสามารถทำได้โดยการใช้ meta tag ของ html code ดังนี้

<html>
<head>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=http://www.yourname.com">
</head>
</html>

จะทำให้เว็บเพจถูก redirect ไปยัง http://www.yourname.com โดยทันที เพราะค่าของ CONTENT=0
แต่ถ้าต้องการหน่วงเวลาให้ผู้ใช้ได้อ่านข้อความก่อน redirect สามารถทำได้โดยกำหนดค่า CONTENT ไม่เป็น 0


ตอนต่อไป -> สร้างปุ่มกด

HTML - เปลี่ยนรูปร่างเคอร์เซอร์

สามารถเปลี่ยนรูปร่างของเคอร์เซอร์ ในบริเวณที่เลื่อนเม้าส์ไปชี้ โดยใช้แอ็ททริบิว style="cursor : ชื่อเคอร์เซอร์"

ตัวอย่าง

 <div style = "cursor: crosshair"> Crosshair </div>
 <div style = "cursor: hand"> Hand </div>
 <div style = "cursor: move"> Move </div>
 <div style = "cursor: text"> Text </div>
 <div style = "cursor: wait"> Wait </div>
 <div style = "cursor: help"> Help </div>


ตอนต่อไป -> การ Redirect

HTML - เฟรม

รูปแบบ

<FRAMESET> ... </FRAMESET> แสดงผลแบบเฟรม
<FRAME> กำหนดการแสดงเฟรมแต่ละเฟรม
<NOFRAME> ... </NOFRAME> ใช้งานเมื่อ เบราว์เซอร์ของผู้ใช้ไม่สนับสนุนการแสดงผลแบบเฟรม

<FRAMESET> มีแอ็ททริบิวต์ 2 ตัว คือ

          ROWS = "value1, value2, ..." แบ่งเฟรมตามแนวนอน ตามจำนวน value เช่น ถ้ามีค่า 3 ค่า ก็จะได้ 3 เฟรม
          COLS = "value1, value2, ..." แบ่งเฟรมตามแนวตั้ง ตามจำนวน value

          กำหนด value ได้ดังนี้
             เปอร์เซ็นต์ เช่น <FRAMESET ROWS = "45%, 55%">
             พิกเซล เช่น <FRAMESET ROWS = "200,140,100">
             ใช้ความสัมพันธ์ของเฟรม จะใช้ * เป็นตัวช่วย
                 <FRAMESET ROWS = "*,*,*"> ความสูงเท่ากันทั้ง 3 เฟรม
                 <FRAMESET COLS = "200,*"> ความกว้างเฟรมแรก 200 พิกเซล อีกเฟรมมีขนาดความกว้างตามส่วนที่เหลือของจอ
                 <FRAMESET COLS = "*,2*"> ความกว้างของเฟรมที่ 2 เป็น 2 เท่าของเฟรมแรก

<FRAME> มีแอ็ททริบิวต์ 6 ตัว คือ

   <FRAME  SEC=URL  NAME=frame_name  MARGINWIDTH=value1 MARGINHEIGHT=value1  SCROLLING=choice1  NORESIZE  FRAMEBORDER=choice2  FRAMESPACING=value2>

          SRC อ้างถึงไฟล์รูป หรือไฟล์เอกสารอื่น
          NAME ชื่อของเฟรมเพื่อใช้ในการนำไฟล์รูปภาพหรือไฟล์เอกสารอื่นมาแสดงในชื่อเฟรมที่ต้องขึ้นมา
          MARGINWIDTH ช่องว่างทางซ้ายและขวาระหว่างข้อมูลและเฟรม หน่วยเป็นพิกเซล
          MARGINHEIGHT ช่องว่างด้านบนและล่างระหว่างข้อมูลและเฟรม หน่วยเป็นพิกเซล
          SCROLLING ให้เฟรมอยู่คงที่ มี 3 ค่า คือ
             YES ให้สโคร์วได้และมีแถบสโคร์วบาร์ด้วย
             NO ให้สโคร์วไม่ได้ และไม่มีแถวสโคร์วบาร์
            AUTO ให้สร้างสโคร์วอัตโนมัติ เป็นค่าปกติ
          NORESIZE ล็อคเฟรมไว้ ไม่ให้ผู้ใช้ทำการเปลี่ยนขนาดของเฟรม
          FRAMEBORDER สร้างกรอบให้กับเฟรม มีค่า 2 ค่า คือ
             YES ให้เฟรมมีกรอบ (ค่าปกติ)
             NO ให้เฟรมไม่มีกรอบ
          FRAMESPACING ระยะห่างระหว่างเฟรม


ตอนต่อไป -> เปลี่ยนรูปร่างเคอร์เซอร์

HTML - ฟอร์ม

รูปแบบ

<FORM METHOD = “POST/GET” ACTION = “URL”> … </FORM>

          METHOD = เป็นรูปแบบในการส่งข้อมูล ประกอบไปด้วย
             GET = เป็นตัวรับ – ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
             POST = เป็นตัวรับ – ส่ง ข้อมูลไม่จำกัดจาก Server
          ACTION = ตำแหน่งหรือ URL ของ CGI Script ที่วางไว้ที่ Server

สร้างช่องกรอกข้อมูลในฟอร์ม

1. TEXT  = รูปแบบที่ผู้ใช้ต้องป้อนโดยวิธีพิมพ์ข้อความลงไปในช่องข้อมูล

          <INPUT  TYPE=TEXT  SIZE=n1  NAME=fieldname  MAXLENGTH=n2  VALUE="message">

          n1 = จำนวนตัวอักษรของกรอบรับข้อความ
          fieldname = เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลในรายการนี้
          n2 = จำนวนของความยาวสูงสุด
          message = ข้อความที่กำหนดให้เป็นค่าปกติ

2. PASSWORD = รูปแบบที่รับข้อมูลคล้าย TEXT แต่จะแสดงเป็นเครื่องหมาย * ขึ้นเวลาป้อน

          <INPUT  TYPE=PASSWORD  SIZE=n1  NAME=fieldname  MAXLENGTH=n2>

          n1 = จำนวนตัวอักษรของกรอบรับข้อความ
          fieldname = เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลในรายการนี้
          n2 = จำนวนของความยาวสูงสุด

3. RADIO = รูปแบบการรับข้อมูลที่กำหนดทางเลือกไว้ให้ผู้ใช้เลือกทางใดทางหนึ่ง

          <INPUT  TYPE=RADIO  NAME=fieldname  VALUE="message"  CHECKED>

          fieldname = ชื่อฟิลด์ที่ใช้เก็บข้อมูลในรายการนี้
          message = ค่าของรายการเลือกที่ถูกเลือก ค่าจะเก็บไว้ในฟิลด์ที่ต้องไว้
          CHECKED = แอ็ททริบิวต์ที่กำหนดให้เลือกที่ค่านั้น เป็นค่าปกติ จะมีได้เพียงรายการเดียวเท่านั้น ในแต่ละกลุ่มรายการ

          วิธีสร้างทางเลือกหลายทางก็คือให้พิมพ์แท็ก INPUT หลายๆ อัน โดยให้มีชื่อ Name ชื่อเดียวกัน

4. CHECKBOX = รูปแบบการรับข้อมูลที่ให้ผู้ใช้เลือกได้มากกว่า 1 รายการ

          <INPUT  TYPE=CHECKBOX  NAME=fieldname  VALUE="message" CHECKED>

          fieldname = เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลในรายการนี้
          message = เป็นค่าของรายการเลือกที่ถูกเลือก ค่าจะเก็บไว้ในฟิลด์ที่ต้องไว้
          CHECKED = เป็นแอ็ททริบิวต์ที่กำหนดให้เลือกที่ค่านั้น เป็นค่าปกติ

5. SUBMIT = สร้างปุ่มส่งข้อมูลทั้งหมดในแบบฟอร์มออกไป

          <INPUT  TYPE=SUBMIT  VALUE="ข้อความที่จะแสดงบนปุ่ม">

6. RESET = สร้างปุ่มลบข้อมูลในฟอร์มทั้งหมดทิ้ง

          <INPUT  TYPE=RESET  VALUE="ข้อความที่จะแสดงบนปุ่ม">

7. สร้างรายการข้อมูลให้เลือก เป็น Drop-Down Menu

          <SELECT  NAME=ชื่อฟิลค์ที่ใช้เก็บข้อมูลของรายการที่เลือก มีค่าเป็น ข้อความที่เลือก>
             <OPTION> ข้อความรายการเลือกที่ 1
             <OPTION> ข้อความรายการเลือกที่ n
          </SELECT>

แท็ก SELECT ยังมีแอ็ททริบิวต์ อีก 2 ตัว ดังนี้

          MULTIPLE ทำการแสดง Drop-Down Menu แบบหลายบรรทัด ค่าปกติคือ 4 บรรทัด หากมีรายการมากกว่านี้จะมีแถบ Scroll Bar ขึ้นมาด้วย
          SIZE=n   ใช้กำหนดจำนวนบรรทัดใน Drop-Down Menu จากค่าปกติ 4 บรรทัด เป็นจำนวนเท่ากับ n แท็ก

แท็ก OPTION ก็มีแอ็ททริบิวต์อีก 1 ตัว คือ

          SELECTED   ใช้กำหนดในรายการที่ต้องการให้เป็นค่าเลือกเริ่มต้น สามารถใส่ได้รายการเดียวเท่านั้น

8. สร้างกรอบป้อนข้อความแบบหลายบรรทัด

          <TEXTAREA  NAME=fieldname  ROWS=n  COLS=m WRAP=VALUE> ข้อมูลที่ต้องการแสดงในกรอบป้อนข้อมูล </TEXTAREA>

          ROWS กำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูล
          COLS กำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว จำนวนคอลัมน์ที่เหมาะสมที่สุด คือ 80 ตัวอักษร
          WRAP เมื่อต้องพิมพ์ในบรรทัดแรกไปจนสุดจอแล้วจะทำการขึ้นบรรทัดใหม่ให้ทันที โดยไม่ต้องเคาะบรรทัดใหม่ มี 3 ค่า ดังนี้
             off = การปิดการใช้งาน wrap ภายในพื้นที่เนื้อหา
             virtual = มีการ wrap ภายในฟอร์มเนื้อหา แต่เมื่อมีการส่งค่าไปโพสต์ที่เว็บแล้ว ข้อความที่พิมพ์จะไม่มีการ wrap
             physical = มีการ wrap ภายในฟอร์มเนื้อหา และในเว็บเพจด้วยเช่นเดียวกัน


ตอนต่อไป -> เฟรม

HTML - ลิงก์และรูปภาพ

กำหนดรูปแบบการลิงค์ใน BODY

<BODY LINK=#rrggbb VLINK=#rrggbb ALINK=#rrggbb>

         LINK = สีของตัวอักษรที่ยังไม่ได้เข้าไปที่ลิงค์นั้น
         VLINK = สีของตัวอักษรที่เข้าไปในลิงค์นั้นแล้ว
         ALINK = สีของตัวอักษรที่กำลังอยู่ในลิงค์นั้น

รูปแบบลิงค์ต่างๆ

<a href = “ไฟล์ html”> ข้อความ </a> ลิงค์ต่างไฟล์

<a href = “#ชื่อตามต้องการ”> ข้อความ </a> และ <a name = “ชื่อที่ตั้งไว้ที่ลิงค์”> ข้อความ </a> ลิงค์ภายในไฟล์

<a href = “http://URL ที่ต้องการ”> ข้อความ </a> ลิงค์ไปเว็บไซต์

<a href = “ไฟล์.นามสกุล”> ข้อความ </a> ลิงค์ไป Download

<a href = “ไฟล์ html”><img sre= “ชื่อไฟล์รูปภาพ” alt = “คำอธิบาย”> </a> ลิงค์ไฟล์ด้วยรูปภาพ

ระบุวินโดว์ที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค์

          TARGET = “window name” เป็นแอททริบิวต์ใส่ไว้ในแท็ก A

ใส่ชื่อวินโดว์หรือเฟรม ที่ต้องการให้แสดงเว็บเพจปลายทางจากการลิงค์ หากไม่พบวินโดว์หรือเฟรมดังกล่าว เบราเซอร์จะสร้างวินโดว์ขึ้นมาใหม่ โดยมีชื่อตามที่ระบุ

     Target= “_blank” จะเปิดหน้าต่างเบราเซอร์ขึ้นมาใหม่
     Target= “_self” นำข้อมูลมาแสดงบนเฟรมซึ่งมีไฟล์ลิงค์นี้อยู่
     Target= “_parent” ทำให้เบราเซอร์ปัจจุบันนั้นถูกรีเซ็ตใหม่ และนำข้อมูลมาแสดงบนเบราเซอร์นี้
     Target= “_Top” จะนำข้อมูลพิมพ์ลงบนเฟรมบนสุด

Tooltips (แสดงผลได้เฉพาะบน IE 4 ขึ้นไป)

<a href = “ลิงก์” title = “คำอธิบายลิงก์”> ข้อความ </a> สำหรับลิงค์แบบข้อความ

<input type = “text” title = “คำอธิบาย”> สำหรับ Text box ในฟอร์ม

<b title = “คำอธิบาย”> ข้อความ </b> ใช้กับข้อความ

ใส่รูปภาพในเว็บเพจ

<img src = “ชื่อรูปภาพนามสกุล .gif หรือ .jpg”> หรือ <img src = .ชื่อรูปภาพ .gif หรือ .jpg” alt = “ข้อความอธิบาย”>

          align = “top/middle/bottom/left/right” จัดตำแหน่งของภาพ
          width = “ค่าตัวเลข” ความกว้างของรูปภาพ
          height = “ค่าตัวเลข” ความสูงของรูปภาพ
          hspace = “ค่าตัวเลข” ช่องว่างแนวนอนระหว่างรูปและข้อความ
          vspace = “ค่าตัวเลข” ช่องว่างแนวตั้งระหว่างรูปและข้อความ
          border = “ค่าตัวเลข” กรอบของรูปภาพให้สีเดียวกับสีตัวอักษร ถ้าใช้กับ IE จะแสดงกรอบเมื่อรูปภาพมีการสร้างลิงค์

<IMG SRC = “ภาพความละเอียดปกติ” LOWSRC = “ภาพความละเอียดต่ำ” ALT = “ข้อความอธิบาย”> ค่อยๆ แสดงภาพ

การทำ Image Map คือการทำให้รูปภาพ 1 รูป สามารถเชื่อมโยงไปยังจุดต่าง ๆ ได้หลายแห่ง

   <MAP NAME=mapname>
     <AREA SHAPE=shape COORDS="x1, y1, x2, y2" HREF=URL>
     <AREA SHAPE=shape COORDS="x1, y1, x2, y2" HREF=URL>
   </MAP>
   <IMG SRC=filename USEMAP=#mapname>

โดย
          mapname = ชื่อของ Image Map
          shape = ชื่อรูปทรงของพื้นที่ มีอยู่ 4 ชนิด คือ
             Circle วงกลม
             Point จุด
             Polygon รูปหลายเหลี่ยม
             Rectangle สี่เหลี่ยม
COORDS = กำหนดพิกัดของพื้นที่ ดังนี้
             Circle       มี x1, y1, r1
             Point        มี x1, y1
             Polygon   มี x1, y1, x2, y2, ... xn, yn
             Rectangle มี x1, y1, x2, y2
filename = ชื่อไฟล์รูปภาพที่ต้องการนำมาสร้าง Image Map
mapname = ชื่อ Image Map ที่กำหนดไว้ใน MAP NAME และต้องมี # นำหน้าด้วย


ตอนต่อไป -> ฟอร์ม

HTML - การสร้างตาราง

รูปแบบ

<TABLE>
    <CAPTION> … </CAPTION>
    <TR>
<TH> หัวตาราง </TH>
<TH> หัวตาราง </TH>
    </TR>
    <TR>
<TD> รายละเอียดย่อย </TD>
<TD> รายละเอียดย่อย </TD>
    </TR>
          ...
</TABLE>


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

คุณสมบัติของตาราง

<TABLE>
ALIGN = align-type กำหนดตำแหน่งตาราง มีค่าดังนี้
LEFT กำหนดตารางให้อยู่ทางซ้าย
RIGHT กำหนดตารางให้อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิกเป็นพื้นหลังตาราง url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีให้ตาราง
BORDER = n เส้นขอบของตาราง ค่าความหนาของตาราง = n
BORDERCOLOR กำหนดสีให้ขอบตาราง โดยสัมพันธ์กับ BORDER
BORDER-STYLE ลักษณะของเส้นขอบ ได้แก่ solid
CELLPADDING = n กำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING = n กำหนดขนาดของเส้นตาราง
WIDTH = n กำหนดความกว้างของตาราง เป็นตัวเลขและ %
HEIGHT = n กำหนดความสูงของตาราง เป็นตัวเลขและ %
TEXT-ALIGN มีคุณสมบัติในการจัดข้อความในแนวนอน ได้แก่ left, right, center
VERTICAL-ALIGN มีคุณสมบัติในการจัดข้อความในแนวตั้ง ได้แก่ top, bottom, middle

<TR>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง

<TH>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิกเป็นพื้นหลังตาราง url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN = n ปรับขนาดของคอลัมน์ให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี
ROWSPAN = n ปรับขนาดความสูงของแถวในตารางเป็น เท่า ของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง

<TD>
ALIGN = align-type กำหนดตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND = url ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็นตำแหน่งภาพ
BGCOLOR = color กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN = n ปรับขนาดของคอลัมน์ให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุด เท่ากับจำนวนคอลัมน์ที่มี
ROWSPAN = n ปรับขนาดความสูงของแถวในตารางเป็นเท่า ของแถวปกติ สูงสุดเท่ากับจำนวนแถวที่มี
VALIGN = align-type จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่บน
MIDDLE = จัดอยู่ตรงกลาง
BUTTOM = จัดอยู่ข้างล่าง

รูปแบบของเส้นกรอบของตาราง

<TABLE FRAME="รูปแบบเส้นกรอบตารางที่ต้องการ">

มีรูปแบบดังนี้

void ไม่ขีดเส้นกรอบ
border มีเส้นทั้งสี่ด้าน
box มีเส้นเช่นเดียวกับ border
above ขีดเส้นเฉพาะเส้นกรอบด้านบน
below ขีดเส้นเฉพาะเส้นกรอบด้านล่าง
hsides กำหนดให้ขีดเส้นในแนวนอนคือด้านบนและด้านล่างของกรอบ
vsides กำหนดให้ขีดเส้นด้านซ้ายและด้านขวาของกรอบ
lhs ขีดเส้นเฉพาะกรอบด้านซ้าย
rhs ขีดเส้นเฉพาะกรอบด้านขวา

ตารางซ้อนตาราง

ทำได้โดยการแทรกแท็ก <TABLE> … </TABLE> ในช่องของตารางหลัก

ใส่รูปภาพลงในตาราง

สามารถนำรูปภาพที่มีอยู่บรรจุลงในตารางที่สร้างขึ้นได้โดยการใช้คำสั่ง <IMG SRC = รูปภาพ> เข้าไปเป็นส่วนหนึ่งของตาราง เช่น

<TABLE BORDER = “2” CELLPADDING = “5” CELLSPACING = “5” WIDTH = “60%”>
   <TR>
       <TD VALIGN = “BOTTOM” WIDTH = “30%”> <IMG SRC = “Aq.GIF” WIDTH = “108” HEIGHT = “108”> </TD>
       <TD WIDTH = “30%”> <IMG SRC = “34.GIF” WIDTH = “20” HEIGHT = “20”> </TD>
   </TR>
</TABLE>

การเชื่อมโยงข้อมูลในตาราง

ทำเหมือนกับข้อมูลที่อยู่นอกตาราง เช่น

<TABLE BORDER = “2” CELLPADDING = “5” CELLSPACING = “5” WIDTH = “60%”>
<TBODY>
<TR>
<TD WIDTH = “50%”> <A HREF = “…/index.asp”> <img height=20 src “34.gif” width=20 border=0> </A> </TD>
<TD WIDTH = “50%”> <a href = “…/index.asp”> กลับไปหน้าแรก </a> </td>
</TR>
</TBODY>
</TABLE>


ตอนต่อไป -> ลิงก์และรูปภาพ

HTML - ลำดับรายการ

รายการแบบมีสัญลักษณ์นำหน้าหัวข้อ

<UL TYPE = disc/circle/square>
          <LI> ข้อความ
</UL>

          disc = วงกลมทึบ (ค่าปกติ)
          circle = วงกลมโปร่ง
          square = สี่เหลี่ยมทึบ

รายการแบบไม่มีตัวเลข ความยาวไม่เกิน 20 ตัวอักษร (Directory List)

<DIR>
          <LI> ข้อความ
</DIR>

รายการแบบ Menu (มีสัญลักษณ์กำกับ)

<MENU>
          <LI> ข้อความ
</MENU>

รายการแบบมีหมายเลขกำกับ

<OL TYPE = “type” START = “ค่าเริ่มต้นของรายการ”>
          <LI> ข้อความ
          <LI value = “ตัวเลขที่กำหนดค่าเฉพาะของรายการนั้น”>
</OL>

          type = ชนิดแบบ มี (I, i  ลำดับเลขโรมัน)  (A, a  ลำดับแบบภาษาอังกฤษ)  (1  ตัวเลข (Default))

รายการแบบนิยาม

<DL COMPACT>
          <DT> ข้อความที่เป็นเรื่องของแต่ละรายการ </DT>
          <DD> ข้อความที่เป็นรายละเอียด </DD>
</DL>

          COMPACT ใส่เฉพาะในกรณีที่ต้องการให้หัวข้อและคำอธิบายอยู่ในบรรทัดเดียวกัน

รายการแบบใช้รูปภาพกำกับ

<UL>
          <IMG SRC = “ชื่อไฟล์รูปภาพ”>
</UL>


ตอนต่อไป -> การสร้างตาราง

HTML - การจัดรูปแบบเนื้อเรื่อง

กำหนดหัวเรื่อง

<Hn> ข้อความ </Hn>

          n = ตัวเลขแสดงขนาดของหัวเรื่อง มีค่า = 1 – 6 (ค่าน้อยตัวอักษรจะใหญ่)

ขึ้นบรรทัดใหม่

ข้อความ <BR>

แสดงข้อความต่อเนื่องกัน

<NOBR> ข้อความ </NOBR> ข้อความจะต่อเนื่องกันโดยไม่มีการขึ้นบรรทัดใหม่ ถ้าเกินจอภาพจะขึ้น Scroll Bar

ข้อความ <WBR>  ควบคุมให้ขึ้นบรรทัดใหม่ระหว่าง <NOBR> ... </NOBR>

ขึ้นย่อหน้าใหม่

<P> ข้อความ </P>

          แอ็ตทริบิวต์เพิ่มเติม

Align จัดวางข้อความ มีค่า Left (ชิดซ้าย), Center (ตรงกลาง), Right (ชิดขวา) ของจอภาพ

         ตัวอย่าง <P align = center>

กำหนดบล็อคข้อความ

<BLOCKQUOTE> ข้อความ </BLOCKQUOTE>

หมายเหตุ : แท็กนี้ใช้แอ็ตทริบิวต์เหมือนกับ <P>

จัดรูปแบบข้อความ

<PRE> ข้อความ </PRE>  จัดรูปแบบให้สามารถเว้นวรรคได้ตามต้องการ

จัดข้อความให้อยู่ตรงกลาง

<CENTER> ข้อความ </CENTER>

เส้นคั่นในแนวนอน

<HR Size=n Width=m Align=position color = สี NOSHADE>

        Size    กำหนดความหนาของเส้น
n       เป็นเลขจำนวนเต็มระบุความหนาของเส้น ขนาดปกติคือ 2 Pixels
Width เป็นการกำหนดความยาวของเส้น
m         เป็นเลขจำนวนเต็มที่ระบุความยาวของเส้น หากไม่ระบุจะได้ความยาวเต็มจอภาพ

Align เป็นตำแหน่งที่ต้องการจัดวาง
Left ชิดซ้าย
Center กึ่งกลาง
Right    ชิดขวา

color ระบุสีของเส้น แสดงผลเฉพาะ IE

NOSHADE กำหนดให้แสดงเส้นทึบแบบไม่มีเงา


ตอนต่อไป -> ลำดับรายการ

HTML - การจัดการตัวอักษร

โค้ดสำหรับจัดรูปแบบตัวอักษร

<B> ข้อความ </B> ตัวหนา

<I> ข้อความ </I> ตัวเอียง

<U> ข้อความ </U> ตัวขีดเส้นใต้

<TT> ... </TT> ตัวพิมพ์ดีด

<S> ... </S> ตัวอักษรที่มีเส้นพาดกลางข้อความ

<BLINK> ... </BLINK> ตัวกระพริบ

<STRONG> ... </STRONG> ตัวหนา

<SUB> ... </SUB> ตัวห้อยลง

<SUP> ... </SUP> ตัวยกขึ้น

กำหนดขนาดตัวอักษร

<FONT SIZE = n> message </FONT>  

          n = 1-7 ค่าปกติคือ 3

กำหนดแบบตัวอักษร

<FONT FACE = name1, name2,...>

          name1, name2 เป็นชื่อฟอนต์ที่ต้องการ โดยใส่ชื่อฟอนต์ไว้ในเครื่องหมาย "  " โดยจะนำ name1 มาใช้ก่อน ถ้าไม่ได้ติดตั้งจะนำฟอนต์ถัดไปมาใช้แทน

กำหนดสีของตัวอักษร

<FONT COLOR = “#RGB หรือ กำหนดชื่อสีที่ต้องการ”> ….. </FONT>

          #RGB เป็นตัวเลขฐานสิบหกจำนวน 6 หลัก หรือชื่อสีที่เป็นภาษาอังกฤษ การกำหนดสีของตัวอักษรทั้งเอกสาร จะทำการใส่ใน <BODY> โดยจะใช้แอตทริบิวต์ Text มาเป็นตัวกำหนด เช่น <BODY TEXT = “#RGB หรือ กำหนดชื่อสีที่ต้องการ”>

สัญลักษณ์พิเศษ

&lt; = <

&gt; = >

&reg; = เครื่องหมาย Registered

&copy; = เครื่องหมาย Copyright

ระหัส ASCII  เริ่มด้วย & แล้วตามด้วย # และค่าตัวเลขรหัส ASCII แล้วปิดด้วย ; เช่น &#163;

คำสั่งเว้นวรรค

&nbsp; ทำให้แทรกเว้นวรรคได้

ตัวอักษรวิ่ง

<MARQUEE> ข้อความ </MARQUEE>

แอททริบิวต์ของ Marquee มีดังนี้

 BEHAVIOR กำหนดแนวทางวิ่งของข้อความ
   - Scroll วิ่งจากขวามาซ้าย เมื่อหมดที่ด้านซ้ายแล้ว ก็วิ่งมาจากขวาใหม่
   - Slide วิ่งจากขวามาซ้าย เมื่อถึงขอบซ้ายแล้วจะหยุดนิ่ง ไม่วิ่งอีก
   - Alternate วิ่งจากซ้ายมาขวา เมื่อถึงขอบซ้ายจะวิ่งกลับไปทางขวา
 BGCOLOR กำหนดสีพื้นให้กับข้อความที่เป็น MARQUEE
 DIRECTION กำหนดทิศทางการวิ่งของข้อความ มี 2 ทาง คือ
   - Left วิ่งจากขวามาซ้าย
   - Right วิ่งจากซ้ายมาขวา
 HEIGHT ความสูงของพื้นที่ของ Marquee หน่วยเป็นพิกเซลล์หรือ %
 WIDTH ความกว้างของพื้นที่ของ Marquee หน่วยเป็นพิกเซลล์หรือ %
 HSPACE ระยะห่างทางซ้ายและขวาของ Marquee หน่วยเป็นพิกเซลล์
 VSPACE ระยะห่างด้านบนและล่างของ Marquee หน่วยเป็นพิกเซลล์
 LOOP จำนวนรอบของการวิ่ง ค่าปกติ คือ INFINITE (ไม่จำกัดรอบ)
 SCROLLMOUNT จำนวนระยะห่างของพิกเซลล์ ในการวิ่ง ค่ามากจะวิ่งเร็ว
 SCROLLDELAY ความหน่วงของข้อความที่วิ่ง โดยระบุเป็นตัวเลขจำนวนเต็ม เป็นมิลลิวินาที (1/1000 วินาที)

ทำให้ตัวหนังสือเลื่อนขึ้นข้างบน

         <marquee behavior=scroll direction=up height=200 scrollamount=1 scrolldelay = 80 onMouseOver="this.stop()" onMouseOut="this.start()" class="text"> ข้อความ </marquee>

  behavior บอก Scroll
direction ให้เลื่อนขึ้น ถ้าต้องการให้เลื่อนลงก็ใส่ down ไป
height ขนาดความกว้างของแทบเลื่อน
scrolldelay ความเร็วในการเลื่อนว่าให้ช้าให้เร็วแค่ไหน ตัวเลขยิ่งน้อยยิ่งเร็ว
onMouseOver เวลา Mouse นำไปวางให้มันหยุดเลื่อน
onMouseOut เวลา Mouse ไม่ได้วางให้เลื่อนนั้นเอง


ตอนต่อไป -> การจัดรูปแบบเนื้อเรื่อง

HTML - ใส่สี และภาพให้พื้นหลังของเว็บเพจ

การใส่พื้นหลังนั้นจะใส่ในส่วนของแท็ก <body> โดยใช้ส่วนขยายที่เรียกว่า Attribute ของแท็ก <body> โดยจะมีรูปแบบดังนี้

ใส่สีให้พื้นหลัง

         มีรูปแบบคือ <body bgcolor = "ชื่อสี" หรือ "#รหัสสี"> ... </body>

ใส่ภาพให้พื้นหลัง

         มีรูปแบบคือ <body background = "ชื่อภาพ.นามสกุลภาพ" bgproperties="fixed"> ... </body>

bgproperties="fixed" ถ้าใส่ค่านี้ จะเป็นการกำหนดให้รูปภาพคงที่ จะไม่มีการเคลื่อนที่เมื่อเลื่อนสกรอบาร์ เมื่อข้อมูลมีความยาวมากกว่า 1 หน้าจอ

การใส่ค่าสี

         การใส่ค่าสี สามารถใส่ค่าได้ 2 แบบ คือ แบบใช้ชื่อสีเป็นภาษาอังกฤษ เช่น red green blue และอีกรูปแบบหนึ่ง คือการใส่ค่าสีเป็นรหัสสี ซึ่งอยู่ในรูปแบบของเลขฐาน 16 ได้แก่ 1-9 และ E-F โดยใส่เป็นรหัสสี 6 หลัก ซึ่งมีตั้งแต่รหัส 000000 - FFFFFF จะได้สีทั้งหมดประมาณ 16.7 ล้านสี

         รหัสสี 6 หลักนี้ จะมีความหมายแบ่งเป็น 3 สีหลัก เป็นแม่สี สองหลักแรก คือสีแดง และ 2 หลักกลางคือสีเขียว และ 2 หลักสุดท้ายคือสีน้ำเงิน เรียกว่า RGB  (Red Green Blue) โดยแม่สีสามตัวหลักนี้ เขียนอยู่ในรูปแบบรหัสสีได้ดังนี้
               - สีแดง      #FF0000
               - สีเขียว     #00FF00
               - สีน้ำเงิน   #0000FF

และมีสีหลักอีก 2 สี คือ
               - สีดำ        #000000
               - สีขาว      #FFFFFF

ชนิดของไฟล์ภาพที่สามารถนำมาใส่ในเว็บ

1. GIF (Graphic Intechange Format)

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

2. JPG (Joint Photographic Expert Group)

         ไฟล์ภาพชนิดนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี จึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ .jpeg

3. PNG (Portable Network Graphic)

         ไฟล์ประเภทนี้จะมี 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

หมายเหตุ การใส่ภาพให้พื้นหลัง ในการกำหนดชื่อรูปจะต้องมีรูปภาพเตรียมไว้ด้วย และจะต้องระบุเส้นทางการเข้าถึงไฟล์ภาพนั้น ๆ ให้ถูกต้อง ในกรณีที่เซฟรูปภาพอยู่ที่เดียวกันกับไฟล์ HTML ให้ใส่ชื่อรูปภาพไปได้เลย แต่หากเซฟภาพไว้คนล่ะที่ก็ต้องระบุเส้นทางการเข้าถึงไฟล์ภาพ เช่น สร้างโฟลเดอร์ชื่อ images ไว้เก็บรูป โค้ดก็จะต้องระบุดังนี้ <body background = " images/simple.jpg">


ตอนต่อไป -> การจัดการตัวอักษร

HTML - เริ่มต้นสร้างไฟล์ HTML

        ไฟล์ HTML ประกอบไปด้วย แท็กภาษา HTML และข้อความต่างๆ การสร้างไฟล์สามารถสร้างได้โดยใช้โปรแกรม Notepad หรือโปรแกรม Text Editor อื่นๆ โดยเวลาบันทึกไฟล์ ให้บันทึักเป็นนามสกุล htm หรือ html

โครงสร้างของไฟล์ HTML

<HTML>
   <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>
      ข้อความและรายละเอียด ที่ต้องการให้ปรากฎบนจอภาพ
   </BODY>
</HTML>

<HTML> </HTML> เิป็นส่วนที่บอกว่าเป็นเอกสาร HTML

<HEAD> </HEAD> เป็นส่วนที่ใช้กำหนด ชื่อเรื่องของเว็บ, ชื่อผู้จัดทำเว็บ, คีย์สำหรับค้นหา

<TITLE> </TITLE> ใช้แสดงข้อความที่เป็นชื่อเรื่องหรือชื่อเว็บและจะแสดงบนไตเติ้ลบาร์

META คือ ใช้กำหนดคุณสมบัติต่างๆ ของเว็บไซต์ คำสั่งนี้จะไม่ปรากฏผลบนเบราเซอร์

<META HTTP-EQUIV = “Content-type” CONTENT = “text/html; charset=TIS-620”>

         เป็นการกำหนดให้เว็บเพจแสดงภาษาไทยได้อย่างถูกต้อง

<META NAME= “Author” CONTENT= “ชื่อผู้พัฒนาเว็บ”>

         เป็นการระบุชื่อผู้่พัฒนาเว็บหรือผู้แต่งใช้สำหรับอ้างอิง

<META NAME= “KeyWords” CONTENT= “ข้อความ1, ข้อความ2, ...”>

         เป็นการกำหนดคำสำคัญที่ใช้ในการค้นหา สำหรับ Search Engine

 <BODY> </BODY> เป็นข้อความ รูปภาพ และรายละเอียดต่างๆ ที่เป็นเนื้อหาของเว็บเพจ ที่จะให้ปรากฏอยู่บนจอภาพ

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

การใส่หมายเหตุลงในเอกสาร html

รูปแบบ

       <! ข้อความที่เป็นหมายเหตุ>


ตอนต่อไป -> ใส่สี และภาพให้พื้นหลังของเว็บเพจ