โครงสร้างภาษาhtml

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

 

HTML คืออะไร

HTML (Hyper Text Markup Language) เป็นภาษามาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบผสมผสานในการสื่อสารแบบ World-Wide-Web :WWW ( Web) ซึ่งเป็นการเชื่อมต่อเครือข่ายของเครื่องคอมพิวเตอร์ทั่วโลก (Internet) รูปแบบหนึ่ง ข้อมูลในรูปแบบต่างๆ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว หรือ อื่นๆ จะถูกเชื่อมโยงเข้าหากัน ด้วยชุดคำสั่งต่างๆ เพื่อให้แสดงผลออกมาคล้ายกับ สิ่งพิมพ์ สไลด์ หรือ แบบมัลติมีเดีย

 

 

 

องค์ประกอบของภาษา 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 จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง <!…> จะไม่ถูกแสดงบน เว็บบราวเซอร์

 

 

 

 

 

หลักการเขียนภาษา HTML แบบง่ายๆ

 

  1. 1.      จัดให้คำสั่งเปิดและปิดในแต่ละชุดคำสั่งอยู่ใน column ตรงกัน

 

  1. 2.      ข้อความที่ไม่ยาวมาก ถ้ามีคำสั่งเปิดและปิด ให้เขียนในบรรทัดเดียวกัน

 

  1. 3.      คำสั่งที่มีตัวเปิดและปิด ให้เขียนตัวเปิด/ปิดให้เรียบร้อยก่อนที่จะเขียนข้อความลงไป
    เช่น ต้องการเขียนโฮมเพจของข้าพเจ้า My Homepage”ก็ควรเริ่มด้วย

 

<H2>  </H2>

<H2><B> </B></H2>

 

 

 

<H2><B>โฮมเพจของข้าพเจ้า My Homepage</B></H2>

วิธีการนี้จะช่วยให้ลดความผิดพลาดลงได้มาก

 

  1. 4.      ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา

 

5.   คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก  เล็กน้อย

 

 

 

การกำหนดสี

 

การกำหนดสีให้พื้นฉากหลัง background
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก <body> ดังนี้

 

<body bgcolor = #รหัสสี>

โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2 หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้

 

สี

 

รหัสสี

 

แดง

 

#FF0000

เขียว

 

#00FF00

 

น้ำเงิน

 

#0000FF

 

ขาว

 

#FFFFFF

 

ดำ

 

#000000

 

เทา

 

#BBBBBB

 

 

 

การกำหนดสีให้กับตัวอักษร
ถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก body ดังนี้

 

<body Text = #รหัสสี>

แต่ถ้าต้องการมีการกำหนดสีของ background อยู่ด้วย เขียนดังนี้

 

<body bgcolor = #รหัสสี text = #รหัสสี>

แต่ถ้าต้องการกำหนดสีเพื่อที่จะเน้นข้อความบางข้อความให้แตกต่างจากข้อความอื่น จะมีรูปแบบดังนี้

 

<font color = #รหัสสี>ข้อความ</font>

            การกำหนดขนาดของตัวอักษร สามารถทำได้เช่นกัน รูปแบบดังนี้

                                    <font size = ตัวเลข>ข้อความ </font>

            ตัวเลขจะมีค่าจาก –7 ถึง 7 จากขนาดเล็กไปขนาดใหญ่ ค่ามาตรฐาน คือ +3

เช่น <FONT FACE=”-JS Wansika”><FONT SIZE=+3><FONT COLOR=”#FF0000″>ข้อความ</FONT></FONT></FONT>

หมายเหตุ
ถ้าไปดูเว็บไหนแล้วชอบใจเห็นมีลูกเล่นแปลกๆ อยากรู้ว่าเขาเขียนยังไง ลองดู source code ของ web นั้นดูได้ โดยที่เมนูของเบราเซอร์คลิกที่ View แล้วไปที่ Source หรือ Page source หรือ Document Source เบราเซอร์ จะแสดง source code ซึ่งก็คือ html ของเอกสารนั้น ลองดู แล้วก็เอามาศึกษาดูว่าถ้าจะเขียนแบบนั้นจะทำได้ยังไง

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s