โครงสร้างพื้นฐานของภาษา HTML

โครงสร้างพื้นฐานของคำสั่งในไฟล์ HTML ประกอบด้วยคำสั่ง <HTML> ... </HTML> ซึ่งเป็นคำสั่งพิเศษที่ใช้แสดง
ความเป็น HTML ส่วนคำสั่งหัวเรื่อง <HEAD> ... </HEAD> โดยทั่วไปมักใช้เฉพาะคำสั่ง <TITLE> ... </TITLE>
เพื่อแสดงชื่อโฮมเพจของไฟล์ HTML ในขณะที่ไฟล์ข้อมูลถูกเชื่อมโยงแบบไฮเปอร์เท็กซ์ ส่วนคำสั่งเนื้อหา <BODY>...</BODY> เป็นส่วนที่ใช้แสดงรายละเอียดที่ต้องการให้เกิดในหน้าเอกสารนั้น ๆ







โครงสร้างพื้นฐานของคำสั่งในไฟล์ HTML




วิธีการเขียนโปรแกรมที่ดี


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







เพิ่มหมายเหตุเพื่อเตือนความจำ

ควรเขียนหมายเหตุไว้ในส่วนต่าง ๆ ของโปรแกรม เพื่ออธิบายการทำงาน
เพราะเราอาจหลงลืมโปรแกรมที่เขียนได้

หรือต้องส่งต่อให้ผู้อื่นไปทำการปรับปรุงแก้ไข
หมายเหตุจะมีรูปแบบดังนี้






<!-- หมายเหตุ>








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

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



การจัดวางข้อความในเอกสาร (Layout)








การวางตำแหน่งข้อความ (Alignment)

คำสั่ง <ALIGN= >		

สามารถจัดวางข้อความให้ชิดด้านใดด้านหนึ่งของบรรทัด

โดยใช้คำสั่ง <ALIGN ตัวเลือก> โดยตัวเลือกอาจเป็น

Left, Right หรือ Center ก็ได้		





ขึ้นบรรทัดใหม่ (Line Break)

คำสั่ง <BR>		

ใช้คำสั่ง <BR> โดยสามารถใช้คำสั่ง ALIGN มาช่วยได้ เช่น

<BR ALIGN=RIGHT> หมายถึง ขึ้นบรรทัดใหม่โดยชิดขวา		





ขึ้นย่อหน้าใหม่ (Paragraph Break)

คำสั่ง <P> ... </P>		

ใช้คำสั่ง <P> และใช้คู่กับ ALIGN ได้ด้วย เช่น 

<P ALIGN CENTER>		





อยู่กลางบรรทัด (Center)

คำสั่ง <CENTER>...</CENTER>		

การจัดข้อความให้อยู่กลางบรรทัด นอกจากจะใช้คำสั่ง <ALIGN CENTER>
แล้ว ยังอาจใช้คำสั่ง <CENTER> และ </CENTER> ก็ได้ แต่ใช้ไม่ได้กับทุกบราวเซอร์





แยกเนื้อหาข้อความ คำสั่ง <BLOCKQUOTE> ...</BLOCKQUOTE>

ใช้แยกเนื้อหาข้อความออกมาเป็นลักษณะของ Block เพื่อเน้นข้อความในส่วนนั้น





จัดรูปแบบข้อความตามกำหนด (Preformatted)

คำสั่ง <PRE>...</PRE>		

ใช้สำหรับการจัดข้อความให้อยู่ในลักษณะที่เราต้องการตามไฟล์ HTML ที่เราสร้างขึ้น

การแสดงผลจะเหมือนกับที่เราพิมพ์ใน Text Editor ธรรมดา		










การกำหนดหัวเรื่อง (Heading Tag)

ใช้คำสั่ง <Hn> ... </Hn> ใช้กำหนดขนาดของข้อความที่เป็นหัวเรื่อง

รูปแบบ <Hn> ข้อความหัวเรื่อง </Hn>

โดยที่ n เป็นตัวเลขขนาดของข้อความ ซึ่งมีค่าอยู่ในช่วง
1-6 โดยข้อความจะมีขนาดใหญ่และเล็กลงไปตามค่าของ n




การกำหนด Footer

เป็นข้อความที่นำยมใส่ไว้ด้านล่างของเอกสาร เช่น
ที่อยู่ที่เราจะติดต่อได้

รูปแบบ <ADDRESS>...</ADDRESS>

ข้อความที่อยู่ระหว่าง tag นี้จะถูกกำหนดให้เป็นตัวเอน
โดยอัตโนมัติ




การสร้างเส้นตรงในแนวนอน (Horizontal line)

รูปแบบ <HR>

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

<HR Size=ความหนา Width=ความยาว Align=ตำแหน่ง
Noshade> โดยที่

Size            การกำหนดความหนาให้กับเส้น ถ้าไม่กำหนด Size จะมีความหนาปกติเท่ากับ 2 Pixels

Width          เป็นการกำหนดความยาวให้กับเส้น ระบุเป็น  % ถ้าไม่ระบุจะได้ความยาวเส้นเต็มจอ

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

Align           กำหนดตำแหน่งการจัดวางของเส้น

    

  • 
Left           จัดวางชิดซ้ายของบรรทัด
    • 


  • 
Center จัดวางกึ่งกลางของบรรทัด
    • 


  • 
Right จัดวางชิดขวาของบรรทัด
    • 








ใบงานที่ 1