โครงสร้างHTML

 การเขียนภาษา HTML ด้วยโปรแกรม  Notepad     

โครงสร้างภาษา  HTML
      HTML  ย่อมาจากคำว่า  Hypertext  Markup  Language  เป็นภาษาที่ใช้สำหรับ
สร้างเว็บเพจ  โดยคำสั่งในภาษา  HTML จะทำหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ  ซึ่งเราสามารถควบคุมได้ทั้งสีสัน  รูปภาพ  ตลอดจนตำแหน่งของสิ่งต่าง ๆ  ที่อยู่บนเว็บเพจ   คำสั่งที่ใช้ควบคุมการแสดงผลใน HTMLนั้นถูกเรียกว่าแท็ก (Tag) ซึ่งมีอยู่มากมายหลายสิบชนิด แต่ละแท็กก็จะมีหน้าที่แตกต่างกันออกไป  เช่น บางแท็กใช้สำหรับกำหนดแสดงรูปภาพ บางแท็กใช้สำหนับกำหนดสีฟอนต์หรือขนาดให้กับตัวอักษร  การเรียนรู้ภาษา HTML จึงเป็นการเรียนรู้ที่จะใช้งานแท็กในการสร้างเว็บเพจให้ได้ดังใจนึกนั่นเอง
    ลักษณะของแท็กในภาษา HTML 
            แท็ก 1 แท็ก จะประกอบด้วยส่วนเริ่ม  และส่วนปิดท้าย  ซึ่งทั้งสองส่วนจะถูกเรียกว่า Tag เปิด  และTag ปิด
 
 <HTML>    เรียกว่าแท็กเปิด
 
 </HTML>   เรียกว่าแท็กปิด
 
                แท็กที่เห็นข้างต้นเรียกว่าแท็ก HTML ซึ่งชื่อของแท็กนั้นมาจากคำที่อยู่ระหว่างเครื่องหมาย < และเครื่องหมาย    > โดยบรรทัดแรกคือ แท็กเปิดของ <HTML> จะสังเกตเห็นว่า   แท็กปิดจะต่างจากแท็กเปิด ตรงที่มีเครื่องหมาย  /  เพิ่มขึ้นมาหน้าชื่อแท็ก  แท็กนี้จะถูกนำมาใช้งานเสมอในเว็บเพจต่างๆ  เนื่องจากเป็นแท็ก ที่ใช้สำหรับกำหนดขอบเขตของเอกสาร HTML เรียกได้ว่ามีเว็บเพจก็ต้องมี <HTML> เอกสาร HTML หรือเว็บเพจ
หน้าหนึ่ง ๆ จะถูกแบ่งออกเป็น 2 ส่วนคือ  HEAD  และส่วน  BODY  ด้วย <HEAD> และ<BODY> ตามลำดับโดย <HEAD>และ <BODY>  จะอยู่ระหว่าง HTML>..</HTML> อีกทีหนึ่ง เราจะมาดูกันว่าทั้ง 2  ส่วนนี้มีหน้าที่แตกต่างกันอย่างไร

ส่วน HEAD                                                             

                 ได้แก่ส่วนที่อยู่ระหว่าง <HEAD>….</HEAD> ซึ่งเป็นส่วนที่ใช้สำหรับกำหนดการทำงานหรือกำหนดคุณสมบัติพิเศษบางประการของเว็บเพจ เช่น เราจะกำหนดชื่อ Title ซึ่งเป็นชื่อที่ปรากฏบน Title bar ของบราวเซอร์ที่ส่วน HEAD โดยถ้าเราไม่กำหนดอะไรในส่วนนี้เลยก็ไม่มีผลเสียหายแต่อย่างใด

             ส่วน BODY

                         คือ ส่วนที่อยู่ระหว่าง <BODY>…… </BODY>  ส่วนนี้จะเป็นที่เราจะใส่ข้อความต่าง ๆ  ที่เป็นเนื้อหาของเว็บเพจเข้าไป  และเรายังสามารถกำหนดคุณสมบัติพื้นฐานของเว็บเพจ เช่น รูปแบบของพื้นหลัง สีของตัวอักษรธรรมดา และตัวอักษรที่เป็นจุดลิงค์โดยใช้  <BODY>ได้อีกด้วย

                      กำหนดคุณสมบัติของหน้าเว็บเพจ                      

 เว็บเพจแต่ละหน้าจะมีคุณสมบัติบางประการเฉพาะตัว ซึ่งเราสามารถสังเกตเห็นได้เมื่อเราเปิดเว็บเพจหน้านั้น ๆ  และคุณสมบัติดังกล่าวก็มีทั้งที่กำหนดไว้ในส่วน HEAD  และส่วน BODY  โดยคุณสมบัติพื้นฐานของเว็บเพจแต่ละหน้าประกอบไปด้วย

 ชื่อ Title

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

                         ข้อความที่เราเห็นเกิดจากการกำหนดด้วย <TITLE> ซึ่งมีรูปแบบการใช้งานดังนี้

                                    ชื่อแท็ก:                               TITLE

                                    รูปแบบ:                              <TITLE>ชื่อ TITLE</TITLE>

                                    ตัวอย่างการใช้:            <TITLE> ยินดีต้อนรับสู่……บทเรียน TITLE>
                                    ตำแหน่งที่ใช้:                       ระหว่าง <HEAD>….</HEAD>

ตั้งชื่อ TITLE  ให้เว็บเพจ                            

 

                         เมื่อราต้องการกำหนดชื่อ  TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย

1. หลังจากเปิดโปรแกรม  Notepad  ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม

                           <TITLE>  เข้าไประหว่าง<HEAD>…</HEAD>

2. พิมพ์ชื่อ  TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>

3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ  TITLE ปรากฏที่ Title  bar

4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์

5. คลิกคำสั่ง  View  Source

6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>

ข้อควรจำ

                                    ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้ 

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

 <title> ยิ น ดี ต้ อ น รั บ สู่ . . . .  . บ ท เ รี ย น </title>

                                     หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็นผลเป็

 ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title                     

 

                                    การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะ

ไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด  ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search   Engine)

วิธีการทำนั้นมีขั้นตอนดังนี้

1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE>

                     เข้าไประหว่าง <HEAD>…..</HEAD>

2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ

                     พาธและชื่อไฟล์ HTML ขึ้นมาแทน โดยพาธก็คือ เส้นทางสู่ที่อยู่ของเว็บเพจหรือไดเร็คทอรีที่จะต้องผ่านเมื่อต้องการจะ

                   เปิดเว็บเพจนั่นเอง

ตั้งชื่อ TITLE  ให้เว็บเพจ                            

  

                         เมื่อราต้องการกำหนดชื่อ  TITLE ให้กับเว็บเพจ เราสามารถทำได้ง่าย ๆ โดย

1. หลังจากเปิดโปรแกรม  Notepad  ขึ้นมา พิมพ์ <HTML>, <HEAD> และ<BODY>เข้าไปแล้วก็ให้เราเพิ่ม

                           <TITLE>  เข้าไประหว่าง<HEAD>…</HEAD>

2. พิมพ์ชื่อ  TITLE ที่ต้องการเข้าไประหว่าง<TITLE>…</TITLE>

3. เมื่อบันทึกไฟล์เรียบร้อย ให้เราเปิดไฟล์ดังกล่าวขึ้นมาด้วยบราวเซอร์ จะเห็นชื่อ  TITLE ปรากฏที่ Title  bar

4. เปิดโค้ด HTML ที่ทำให้ปรากฏชื่อ Title โดยคลิกขวาที่พื้นที่แสดงผลของบราวเซอร์

5. คลิกคำสั่ง  View  Source

6. โค้ดที่ทำให้ปรากฏชื่อ Title คือ <title> ยินดีต้อนรับสู่……บทเรียน </title>

 

ข้อควรจำ

                                    ในการกำหนดชื่อ Title แม้เราจะไม่สามารถทำให้ชื่อสะดุดตาด้วยการทำให้ตัวอักษรมีลักษณะหนา เอียง หรือถูกขีดเส้นใต้ได้ 

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

 

<title> ยิ น ดี ต้ อ น รั บ สู่ . . . .  . บ ท เ รี ย น </title>

                                    หลังจากที่เราแก้ไขข้อความที่อยู่ระหว่าง <TITLE>….</TITLE> เรียบร้อยแล้วเมื่อเปิดดูบราวเซอร์จะเห็น

 ทำอย่างไรเมื่อไม่ต้องการตั้งชื่อ Title                     

                                     การไม่กำหนดชื่อ Title ก็คือ การไม่ใช้ <TITLE> หรือใช้แต่ไม่กำหนดข้อความใด ๆ ระหว่าง <TITLE> เราสามารถเลือกที่จะไม่กำหนดชื่อ Title ได้ โดยที่ไม่ก่อให้เกิดผลกระทบกับเว็บเพจแต่อย่างใด  ( ถ้าไม่ได้นำเว็บเพจไปลงทะเบียนกับ Search   Engine)  วิธีการทำนั้นมีขั้นตอนดังนี้

1. ไม่ต้องใช้ <TITLE> โดยลบ <TITLE> ออกไป หรือถ้าเป็นเอกสาร HTML ที่สร้างขึ้นมาใหม่ก็ไม่ต้องพิมพ์ <TITLE>  เข้าไประหว่าง <HEAD>…..</HEAD>

2. หลังจากที่แก้ไขเสร็จ และเปิดไฟล์ที่ได้แก้ไขขึ้นมาด้วยบราวเซอร์ (ต้องบันทึกไฟล์ก่อน) จะพบว่าที่ Title bar ได้ปรากฏ

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

 แอตทริบิวต์คืออะไร          

 แอตทริบิวต์ (Attribute) ของแท็กคือ รูปแบบหรือลักษณะที่กำหนดเข้าไปในแท็กนั้น ๆ  โดยจะกำหนดหรือไม่ก็ได้  ขึ้นอยู่กับรูปแบบการใช้งานของแต่ละแท็ก   ตัวอย่าง  เช่น แอตทริบิวต์  BGCOLOR ซึ่งใช้กำหนดเพิ่มขึ้นไปใน <BODY>เพื่อเปลื่ยนสีพื้นหลังของเว็บเพจ   <body bgcolor= “black”>….</body>

ปกติการใช้แอตทริบิวต์จะเกิดผลโดยตรงกับข้อความที่ถูกแท็กนั้นกำหนด แต่บางครั้งก็จะเกิดผลกับเว็บเพจหน้านั้น เช่น แอตทริบิวต์ต่าง ๆ ของ <BODY>

                           วิธีการใช้แอตทริบิวต์ (Attribute)

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

                                     รูปแบบ:            <ชื่อแท็ก  แอตทริบิวต์ตัวที่หนึ่ง แอตทริบิวต์ตัวที่สอง…>…</ชื่อแท็ก>

                                    ตัวอย่างการใช้:    <body bgcolor=”black” background=”16h.gif”>…</body>

ใส่ความเห็น

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 / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

ติดตาม

Get every new post delivered to your Inbox.

%d bloggers like this: