ความรู้เบื้องต้นเกี่ยวกับ ภาษาHTML

0

 ความรู้เบื้องตันเกี่ยวกับ ภาษาHTML

        
        2.1 ภาษา HTML
            HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (TAG) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ     อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ www เติบโตขยายตัวอย่างกว้างขวาง 

        2.2 การใช้โปแกรม Notepad
   ในการสร้าง Homepage สามารถทำได้โดย
       1. การใช้โปรแกรมสำเร็จรูป และ   
       2. การใช้โปรแกรม Notepad 
       ซึ่งในบทเรียนนี้จะสอนการเขียนโฮมเพจด้วยภาษา HTML โดยใช้โปรแกรมNotepad ในระบบปฏิบัติการ windows ซึ่งต้องเขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad
       Notepad นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้  และ Notepad นี้เป็นโปรแกรมที่นิยมใช้ในการเขียนโฮมเพจ สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ทำงานบนระบบ Windows
        การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notepad 
ได้โปรแกรม Notepad สำหรับเขียนโฮมเพจ ดังนี้
ทดสอบการใช้โปรแกรม Notepad โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML  ดังนี้

        2.3  การบันทึกแฟ้มและการเปิดแฟ้ม HTML
            เมื่อเราออกแบบเว็บเพจได้ตามต้องการแล้ว การที่จะบันทึกงาน ให้เลือกคำสั่ง File>Save As เพื่อบันทึกไฟล์ในชื่อใหม่ ดังภาพ

ต่อไป ให้ทำตามขั้นตอน ดังภาพ
เลือกโฟล์เดอร์ที่เก็บไฟล์งาน   ให้ตั้งชื่อไฟล์ โดยใส่นามสกุลเป็น .html     คลิกปุ่ม Save เพื่อสั่งบันทึกไฟล์
         นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจที่ควรรู้อีก 3 วิธี คือ 
วิธีที่ 1 เลือกคำสั่ง File>Save เพื่อบันทึกไฟล์ในชื่อเดิม
วิธีที่ 2 เลือกคำสั่ง File>Save All บันทึกไฟล์ทั้งหมดที่มีการเปลี่ยนแปลงแก้ไข
วิธีที่ 3 เลือกคำสั่ง File>Save to Remote Server ทำการบันทึกเว็บเพจและอัพโหลดไปยังเซิร์ฟเวอร์
การเปิดแฟ้ม HTML

      เป็นการนำแฟ้มมาทำการแก้ไข เปลี่ยนแปลง หรือเพิ่มข้อมูลลงไป ซึ่งการเปิดแฟ้มของโปรแกรม Notepad จะเหมือนกับโปรแกรมอื่น ๆ เช่น  Microsoft Word, Microsoft Excel ฯลฯ แต่จะต้องบอกประเภทของแฟ้มก่อน ซึ่งมีขั้นตอน ดังนี้
 1) คลิกที่เมนู File 
 2) เลื่อนเมาส์มาที่ Open 
 3) ในช่อง Save in ให้ทำการเลือกไดรฟ์และโฟล์เดอร์ที่จะเปิดแฟ้ม
 4) ในช่อง File of type ให้เลือกประเภท All Files 
 5) คลิกไฟล์ที่ต้องการเปิด
 6) คลิกที่ปุ่ม Open

       2.4  โครงสร้างของภาษา HTML html จะมีองค์ประกอบหลักๆ อยู่ 2 ส่วน คือ
•       ข้อความที่ต้องการให้แสดงบนจอภาพ
•       ข้อความที่เป็นคำสั่ง
โดยคำสั่งในเอกสาร html นี้จะเรียกว่า แท็ก (Tag) โดยแท็กจะต้องขึ้นต้นด้วย < ตามด้วย ชื่อแท็ก ปิดท้ายด้วย > ดังนี้<Tag name>ซึ่งจะเรียกว่า แท็กเปิดแล้วจะต้องปิดท้ายข้อความด้วยแท็กปิด ซึ่งจะมีลักษณะดังนี้ </Tag name>เรามาดูรูปแบบเต็ม ๆ กัน
<Tag name> ข้อความที่ต้องการให้แสดง</Tag name>
ชื่อแท็กต่างๆ สามารถพิมพ์ตัวใหญ่หรือตัวเล็กก็ได้ความหมายเหมือนกัน

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

โครงสร้างของภาษา html จะประกอบด้วย 2 ส่วนด้วยกัน คือส่วนที่เป็นส่วนหัว (head) และส่วนเนื้อหา (body) โดยมีรูปแบบภาษาดังนี้

<html>
       <head>
           <title>ข้อความที่ต้องการให้แสดงบนไตเติ้ลบาร์ </title>
       </head>
       <body>
              คำสั่งและข้อความให้แสดงบน browser
      </body>
</html>

    บล็อก <html> ... </html>

เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body

    บล็อก <head> ... </head>

เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน64 ตัวอักษร

   บล็อก <body> ... </body>


เป็นบล็อกที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือแท็กที่ใช้ในการกำหนดรูปแบบของเอกสาร


       comment (หมายเหตุ)


หลังจากที่ทำการเขียนโปรแกรมไปสักระยะหนึ่ง เราหรือเพื่อนอาจจะนำโปรแกรมที่เขียนขึ้นมานั้นไปพัฒนาต่อ ซึ่งอาจจะลืมเนื้อหาสาระสำคัญแล้วทำให้ดำเนินการเขียนต่อไม่ได้ จึงต้องมีการเขียน comment เพื่อช่วยเตือนความทรงจำได้

สำหรับคำสั่ง comment จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง<!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์

 ชนิดตัวอักษรที่มักจะใช้กันก็คือ

•       AngsanaUPC,CordiaUPC หรือ ชนิดตัวอักษร ที่ลงท้ายด้วยUPCตัวอื่น ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)

•       DB ThaiText ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)

•       MS Sans Serif ขนาด 10 หรือ 12 pixel (size=2 หรือ 3)

รูปแบบที่แนะนำ

•       <FONT FACE= "MS Sans Serif" SIZE=-1>...</FONT>

•       <FONT FACE= "CordiaUPC,MS Sans Serif" SIZE=-1>...</FONT>

•       <FONT FACE= "Thonburi,MS Sans Serif" SIZE=-1>...</FONT>


                 รูปแบบตัวอักษร

รูปแบบตัวอักษรแบบ Physical Style
•       <B>...</B> สั่งให้แสดงตัวอักษรแบบหนา
•       <I>...</I> สั่งให้แสดงตัวอักษรเอน
•       <U>...</U> ช่วยเน้นข้อความด้วยการขีดเส้นใต้
•       <TT>...</TT>สั่งให้แสดงตัวอักษรแบบตัวพิมพ์ดีด(มีความกว้างของแต่ละตัวอักษรเท่ากันหมด)
•       <SUP>...</SUP>สั่งให้แสดงตัวอักษรยก(superscript)
•       <SUB>...</SUB>สั่งให้แสดงตัวอักษรแบบห้อย(subscript)
 
รูปแบบตัวอักษรแบบ Logical Style ที่ใช้กันบ่อยๆ เช่น
n    <ADDRESS>...</ADDRESS> กำหนดให้เป็นตัวอักษรเอน มักใช้กับที่อยู่
n    <CITE>...</CITE>สั่งให้แสดงตัวอักษรเอน ในการอ้างอิง
n    <VAR>...</VAR>สั่งให้แสดงตัวอักษรเอน ระบุตัวแปร
n    <CODE>...</CODE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนรหัสโปรแกรม
n    <SAMPLE>...</SAMPLE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนตัวอย่าง
n    <STRONG>...</STRONG>สั่งให้แสดงตัวอักษรตัวเข้มมีค่าเหมือนกับ <B>...</B>
n    <BLINK>...</BLINK>สั่งให้แสดงตัวอักษรกระพริบ (ใช้ได้เฉพาะกับ Netscape Navigator)
n    <MARQUEE>...</MARQUEE>สั่งให้แสดงตัวอักษรวิ่ง (ใช้ได้เฉพาะกับ Internet Explorer)
รูปแบบตัวอักษรแบบ พิเศษ 
ใช้เมื่อเราต้องการ ให้แสดงสัญลักษณ์ที่เราต้องการซึ่งไม่สามารถใช้แป้นพิมพ์โดยตรงได้ ออกมาบนหน้าจอ

 ตัวอักษร เขียนแทนด้วย
 >
<
&
"
 &lt;
&gt;
&amp;
&quot;


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

        3.1 ข้อความหัวเรื่อง
         การกำหนดข้อความให้เป็นหัวเรื่องของเนื้อหา (Heading) สามารถทำได้โดยใช้ป้ายระบุ (Tag) หรือคำสั่ง Hn…/Hn       โดย n หมายถึงตัวเลขขนาดของตัวอักษรที่ใช้เป็นหัวเรื่อง ซึ่งตัวเลขจะมีค่าตั้งแต่ 1-6 โดยตัวเลข 1 จะเป็นหัวข้อหัว เรื่องที่มีขนาดของตัวอักษรที่มีขนาดใหญ่ที่สุดและตัวเลข 6 จะเป็นข้อความหัวเรื่องที่มีขนาดของตัวอักษรเล็กที่สุด  ซึ่งใช้เพื่อจุดประสงค์สำหรับการกำหนด ชื่อบท ชื่อหัวข้อต่าง ๆ เป็นต้น มีรูปแบบคำสั่งดังนี้
               <Hn>......</Hn>

      
       การกำหนดของข้อความหัวเรื่อง สามารถทำการกำหนดลักษณะพิเศษ (Attribute) สำหรับรูปแบบการแสดงผลคือ  Align ซึ่งใช้สำหรับจัดตำแหน่งในการแสดงผล โดยสามารถกำหนดให้กึ่งกลาง (Aling = center) ชิดขวา (Aligo = right) และชิดซ้าย (Alight = left) โดยถ้าไม่กำหนดลักษณะพิเศษ Alight นี้จะเป็นการจัดให้เป็นข้อความหัวเรื่องอยู่ในตำแหน่งชิดซ้าย

        3.2 การจัดวางตำแหน่งข้อความ
        
        ลองเขียนโค้ดมาก็หลายโค้ดแล้ว แต่โค้ดที่ผ่านมาแบบไหน ๆ ก็แสดงข้อความที่ตำแหน่งชิดซ้ายของหน้าจอ

เสมอ อยากเปลี่ยนตำแหน่งการวางข้อความบ้าง ต้องเขียนโค้ดอย่งไร ในบทความนี้ Webmaster มีคำตอบ (แท็ก) 

ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการ

กำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้
           
1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
          
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ 
                      
                                     <p align = "ตำแหน่ง"> ...ข้อความ...</p>
               
                                ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

  รูปแบบการจัดตำแหน่งข้อความ
<html>
  <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
       <body>
               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>
               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>
               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>
               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>
        </body> 
  </html>
        3.3 การกำหนดแบบตัวอักษร
              การกำหนดลักษณะและแบบของตัวอักษร เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น
   1. คำสั่งสำหรับกำหนดอักษรตัวหนา (Bold)  :  <B> … </B>
            ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
   ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>การกำหนดตัวหนา</TITLE>
</HEAD>
<BODY>
การกำหนดตัวหนาให้กัตัวอักษร<BR>
ตัวอักษรปรกติ COMPUTER <BR>
ตัวอักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>

ผลลัพธ์
การกำหนดตัวหนาให้กับตัวอักษร
ตัวอักษรปรกติ COMPUTER 
ตัวอักษรหนา COMPUTER


  2. คำสั่งสำหรับกำหนดอักษรตัวเอน (Italic)  :  <I> … </I>
             ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
    ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวเอน</TITLE>
</HEAD>
<BODY>
การกำหนดตัวหนาให้กัตัวเอน<BR>
ตัวอักษรปรกติ COMPUTER <BR>
ตัวอักษรเอน <B>COMPUTER</B>
</BODY>
</HTML>

ผลลัพธ์
การกำหนดตัวหนาให้กับตัวอักษร
ตัวอักษรปรกติ COMPUTER 
ตัวอักษรเอน COMPUTER

  3. คำสั่งสำหรับกำหนดอักษรขีดเส้นใต้ (Underline)  :  <U> … </U>
 
        ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น

    ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวขีดเส้นใต้</TITLE>
</HEAD>
<BODY>
การกำหนดตัวหนาให้กับตัวขีดเส้นใต้<BR>
ตัวอักษรปรกติ COMPUTER <BR>
ตัวอักษรขีดเส้นใต้ <B>COMPUTER</B>
</BODY>
</HTML>

ผลลัพธ์
การกำหนดตัวหนาให้กับตัวอักษร
ตัวอักษรปรกติ COMPUTER 
ตัวอักษรขีดเส้นใต้ COMPUTER

  4. คำสั่งสำหรับกำหนดตัวอักษรตัวขีดฆ่า  : <S>..........</S>
  
        ใช้แสดงข้อความแบบขีดฆ่าตัวอักษร ทั้งนี้เพื่อเน้นข้อความเปรียบเทียบหรือไม่ต้องการในประโยคนั้น 
                               
    ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวขีดเส้นใต้</TITLE>
</HEAD>
<BODY>
การกำหนดให้กับตัวขีดเส้นใต้<BR>
<S>Microsoft Windows</S>
</BODY>
</HTML>

ผลลัพธ์
การกำหนดตัวหนาให้กับตัวอักษร
Microsoft Windows
 
 5. คำสั่งสำหรับกำหนดอักษรตัวกระพริบ (Blink)  :  <BLINK> … </BLINK>

           ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

     ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวกระพริบ</TITLE>
</HEAD>
<BODY>
การกำหนดให้กับตัวกระพริบ<BR>
<Blink>COMPUTER</Blink>
</BODY>
</HTML>

  6. คำสั่งสำหรับกำหนดอักษรให้เคลื่อนที่ (MARQUEE)  

         ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังนี้
   <marquee scrolldelay="ความเร็ว" direction="ทิศทางวิ่ง">ข้อความ</marquee> - scrolldelay ให้แทนค่า        ด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right 

    ตัวอย่างการใช้คำสั่ง    
<
 
 7. คำสั่งสำหรับกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยก  :  <SUP> … </SUP>  และ  <SUB> …</SUB>

 การกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยกในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้ 

     ตัวอย่างการใช้คำสั่ง    
<HTML>
<HEAD>
<TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >
Computer<SUP>2</SUP> <P>
H<SUB>2</SUB>O<P>
</BODY>
</HTML>

ผลลัพธ์
Computer2
H2O
 
  8. คำสั่งสำหรับกำหนดรูปแบบตัวอักษร  :  <FONT  FACE = "......."> … </FONT>

                การกำหนดรูปแบบของตัวอักษรในเว็บเพจที่เราต้องการให้แสดงออกบนเว็บ 
                              
     ตัวอย่างการใช้คำสั่ง   
 <html>
<head>
<title>การกำหนดขนาดตัวอักษร</title>
</head>
<body>
<font face="Cordiaupc">HTML</font><br>
<font face="Ms sans serif">HTML</font><br>
<font face="AngsanaUPC">HTML</font><br>
<font face="arial">HTML</font><br>
</body>
</html>

ผลลัพธ์
HTML
HTML
HTML
HTML

  9. คำสั่งสำหรับกำหนดขนาดตัวอักษร  :  <FONT  SIZE = ขนาด> … </FONT>

            การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้ คือ
       กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร

     ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY >
<FONT SIZE="1">Computer</Font>
<FONT SIZE="2">Computer</Font>
<FONT SIZE="3">Computer</Font>
<FONT SIZE="4">Computer</Font>
<FONT SIZE="5">Computer</Font>
<FONT SIZE="6">Computer</Font>
<FONT SIZE="7">Computer</Font>
</BODY>
</HTML>

ผลลัพธ์
Computer Computer Computer Computer 
Computer  Computer 
    
  10. คำสั่งสำหรับกำหนดสีตัวอักษร  :  <FONT  COLOR = รหัสสี> … </FONT>
  
        ใช้การกำหนดให้ตัวอักษรหรือข้อความมีสีอื่นต่างจากสีตัวอักษรทั่วไป หรือต้องการเน้นสีสันเพื่อเพิ่มจุดเด่น ทำให้แปลกแตกต่างไป การระบุค่าสี สามารถใช้ได้ทั้งระบุชื่อสี หรือค่าสีในระบบเลขฐาน 16 

    ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>FONT COLOR </TITLE>
</HEAD>
<BODY >
<FONT COLOR="Red">Computer</FONT> 
<FONT COLOR="Green">Computer</FONT> 
<FONT COLOR="Black">Computer</FONT> 
</BODY>
</HTML>

ผลลัพธ์
 Computer  Computer  Computer
  
  11. คำสั่งสำหรับกำหนดสีพื้นหลังของเอกสาร  :  <BODY  BGCOLOR = รหัสสี> … </BODY>
  
            การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์มาเป็นตัวกำหนด
    การกำหนดสีของพื้นหลัง - การกำหนดสีพื้นหลังนั้น เราสามารถมีรูปแบบการกำหนดสีพื้นหลังได้อยู่ 2 รูปแบบ

            ·       ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น

            ·       ระบุรหัสของสีที่ต้องการ อาทิเช่น #FFFF00 , #0000CC , #FF66FF เป็นต้น

        ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
การกำหนดสีพื้นหลังโดยการกำหนดสี
</BODY>
</HTML>


ตาราง (Table)

 5.1 การสร้างตาราง
         หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ  หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ  การสร้างตารางในเอกสาร HTML  มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ    ดังต่อไปนี้

    1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

 <TABLE>...........</TABLE>  
เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
 <CAPTION>...........</CAPTION>   
เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง
 <TR>...........</TR>   
เป็นคำสั่งที่ใช้กำหนดแถว (ROW)
 <TH>...........</TH>  
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง
<TD>...........</TD> 
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

    โครงสร้างของตาราง
 <TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
       <TR>
             <TH> ข้อมูลส่วนหัว </TH>
     </TR> 
       <TR>
              <TD> ข้อมูล </TD>
      </TR>
       <TR>
              <TD> ข้อมูล </TD>
      </TR>
</TABLE>   


        ตัวอย่างการสร้างตาราง
      
              ผลลัพธ์
 
   5.2  การตกแต่งตาราง

      2.1 คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง   
  
    ตัวอย่างการใช้คำสั่ง BORDER  


                 ผลลัพธ์

   2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

             - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
             - RIGHT  คือ จัดตารางชิดขวาของจอภาพ
             - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

  ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

   
            ผลลัพธ์
  2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                   2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
               2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น
  
   ตัวอย่างการใช้คำสั่ง WIDTH , HEIGHT , BGCOLOR
 
        ผลลัพธ์



2.5 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง


            ผลลัพธ์


   2.6 คำสั่ง CELLPADDING  ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง


         ผลลัพธ์

 
  2.7 คำสั่ง Colspan และ Rowspan 

        คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
                    รูปแบบคำสั่ง      <TD  COLSPAN = "Number">
        โดยที่           - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
                             - Number     คือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

         คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
                       รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">
         โดยที่         - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
                            - Number       คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

        ผลลัพธ์


{getButton} $text={แบบทดสอบ} $icon={link} $color={pink} 

################################

พื้นฐานภาษา HTML

images_1 รู้จักภาษา HTML

         HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ต มีโครงสร้างการเขียนที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ เรียกใช้เอกสารเหล่านี้โดยการใช้โปรแกรมเว็บบราวเซอร์ (Web Browser) เช่น Mozilla Firefox, Opera , Nescape navigator, Internet Explorer ฯลฯ เป็นต้น

ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบันขณะที่ HTML รุ่น 5 ยังคงยังอยู่ในระหว่างการพิจารณาในการใช้งาน

 images_1ลักษณะของภาษา HTML 

          องค์ประกอบของภาษา HTML สามารถแบ่งออกได้ 2 ส่วน คือ ส่วนที่เป็นข้อความทั่ว ๆ ไป และส่วนที่เป็นคำสั่งที่ใช้กำหนดรูปแบบข้อความที่แสดง ซึ่งเราเรียกว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียนดังนี้

    • รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยแต่ละส่วนเริ่มต้นของแท็ก เรียกว่า “แท็กเปิด” และส่วนจบของแท็ก เรียกว่า “แท็กปิด” โดยในส่วนของแท็กปิดต้องมีเครื่องหมาย Slash (/)
    • แท็ก (Tag)  เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
      Ø Tag เดี่ยว  เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <br>, <hr> เป็นต้น
      Ø Tag เปิด/ปิด  เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>      k5
      ในกรณีต้องการซ้อนแท็กมากกว่า 1 แท็ก เราต้องทำการเปิด ปิดแท็กให้ถูกต้อง โดยการปิดแท็กในสุดก่อน แล้วจึงไล่ปิดแท็กอื่น ๆ ตามลำดับ
    • k4บางแท็กอาจจะไม่ต้องมีแท็กปิดก็ก็ใช้งานได้ เช่น <br>
    • เราสามารถพิมพ์เป็นตัวเล็กตัวใหญ่ เช่น <HTML>,<html>,<Html> จะมีความหมายเหมือนกันเพื่อรองรับเอกสารแบบ XHTML
    • บางแท็กจะต้องมีตัวกำหนดคุณสมบัติ เรียกว่า แอตทริบิวต์ (Attribute) และค่าที่ถูกกำหนดให้ใช้ในแท็ก (Value) โดยจะเขียนไว้หลังแท็ก
      o แอตทริบิวต์ (Attributes)  เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น

k6
images_1 โครงสร้างพื้นฐานของภาษา HTML
<html>
<head>
<title>หัวข้อเว็บเพจ</title>
</head >
<body>
…ส่วนของเนื้อหา หรือข้อความที่จะใช้แสดงเนื้อหาในเว็บเพจ …
</body>
</html>

  • <html>…</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งบอกให้ทราบว่านี้คือ ภาษา HTML ใช้ในการกำหนดจุดเริ่มและจุดสิ้นสุดของเอกสาร HTML
  • <head>…</head>  เป็นส่วนกำหนดรายละเอียดหัวเอกสาร HTML
  • <title>…</title>  เป็นแท็กที่ใช้กำหนดชื่อเว็บเพจ ซึ่งภายแท็กจะเป็นชื่อเรื่องเว็บที่ต้องการ ซึ่งความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะปรากฏที่ title bar ของบราวเซอร์ที่เราใช้งานอยู่
  • <body>…</body>  ส่วนที่เป็นเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ ตาราง และการเชื่อมโยงต่อไปยังเอกสารอื่น ๆ

images_1เครื่องมือในการสร้างเอกสาร HTML 

ในการสร้างเว็บเพจด้วยภาษา HTML เราจะมีเครื่องมือที่ใช้ในการเขียนและแก้ไขโค้ดเรียกว่า Text Editor ซึ่งเป็นโปรแกรมที่ใช้สำหรับการสร้างและแก้ไขข้อความ ปัจจุบันมีอยู่มากมายที่ใช้สำหรับแก้ไขโค้ด HTML เช่น Notepad, EditPlus, Dreamweaver ฯลฯ เป็นต้น

 k7

images_1ทดลองเขียนเว็บเพจด้วยภาษา HTML

วิธีการเปิดโปรแกรม

1. เลือก Start >> All Programs >> Accessories >> Notepad

1           2. ลองพิมพ์โครงสร้างพื้นฐาน ดังรูป

2

วิธีการบันทึกเอกสาร HTML

การบันทึกเอกสาร HTML ที่สร้างเสร็จแล้ว จะบันทึกนามสกุลเป็น .html หรือ .htm ซึ่งมีวิธีการบันทึกเอกสาร ดังนี้

1. เมื่อพิมพ์เสร็จแล้วไปที่ File >> Save

## หากเป็นการบันทึกชื่อใหม่ให้เลือก   File >> Save As..

3

2. บันทึกชื่อไฟล์และตามด้วยนามสกุล .html หรือ .htm   เช่น Test.html

4

วิธีการดูผลลัพธ์

วิธีที่ 1

หลังจากบันทึกเอกสารเรียบร้อยแล้วให้เราไปดับเบิลคลิกที่ไฟล์เอกสารเว็บที่เราสร้าง จะปรากฏดังรูป
5

วิธีที่ 2

เปิดโปรแกรม Internet Explorer

File >> Open >> Browse.. >> เลือกไฟล์เอกสารที่เราสร้าง >> Open >> OK  จะปรากฏเอกสาร HTML ที่เราสร้าง
k8

วิธีการแก้ไขเอกสาร HTML

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

1. เปิดอิดิเตอร์ Notepad

2. File >> Open

7           3. เลือก All Files

11

4. เลือกเอกสาร HTML ที่ต้องการแก้ไข >> คลิก Open >> ปรากฏเอกสาร HTML ที่ต้องการแก้ไข

k9

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

          หากพบว่าเนื้อหาที่เขียนในเว็บเพจไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเวอร์ใหม่  โดยการคลิกเมาส์ขวา เลือกคำสั่ง >> Encoding >> Thai (Windows)

17

16

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ HTML เขียนโดย นายประชา  พฤกษ์ประเสริฐ  สำนักพิมพ์ซิมพลิฟาย


>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------

{fullWidth}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า