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

 

HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาท่ี่ใช้สำหรับสร้างเว็บเพจ โดยคำสั่งในภาษา HTML จะทำหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ ซึ่งเราสามารถควบคุมได้ทั้งสีสัน รูปภาพ ตลอดจนตำแหน่งของสิ่งต่าง ๆ ที่อยู่บนเว็บเพจ

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

การเปิดดูโค้ด HTML ของเว็บเพจจากบราวเซอร์

1. ใ ห้ คลิกขวา ที่หน้าเว็บเพจ ที่เปิดไว้

2. คลิกเลือก คำสั่ง View Source  (โปรแกรม  Microsoft Internet Explorer) ,โปรแกรม Google Chrome ให้เลือก ดูรหัสต้นฉบับ หรือโปรแกรม Mozilla Fivefox ให้เลือก View Page Source

3. โปรแกรม Notepad   จะปรากฎขึ้นมา โดยมี โค้ด HTML ของเว็บเพจหน้านั้นปรากฎขึ้นมาด้วย

ลักษณะของแท็กในภาษา HTML

<html>  – แท็กเปิด </html> — แท็กปิด

(การใช้งานแท็กเราสามารถใช้ได้ทั้งตัวอักษรเล็ก และตัวอักษรใหญ่ โดยไม่มีความแตกต่างใด ๆ และเราจะไม่เห็นแท็กปรากฎในเว็บเพจ)

การใช้งานแท๊กในภาษา HTML นั้น เมื่อเราไม่ต้องการใช้ประโยชน์จากแท็กใด เราก็ไม่ต้องพิมพ์แท็กนั้นเข้าไป แต่จะต้องไม่ลืมว่ามีแท็กอยู่ 3 แท็กที่เราจำเป็นต้องใช้ในการเขียนโค้ด HTML  นั่นก็คือ <HTML>, <HEAD> และ <BODY>

เอกสาร HTML หน้าหนึ่งจะถูกแบ่งออกเป็น 2 ส่วนคือ ส่วน HEAD และส่วน BODY

ส่วน HEAD

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

ส่วน BODY

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

การกำหนดชื่อ TITLE

รูปแบบ <title> ชื่อ Title </title>

ตัวอย่างการใช้ <title>http://www.mpp3.ac.th ยินดีต้อนรับ</title>

ตำแหน่งที่ใช้ ระหว่าง <head>.…………….</head>

ตัวอย่างการเขียนเว็บเพจด้วยภาษา HTML

<html>

<head>

<title> ข้อความที่ต้องการให้แสดงในแถบหัวเรื่อง </title>

</head>

<body> คำสั่งในภาษา HTML ในการสร้างเว็บเพจ </body>

</html>

คำสั่งพื้นฐาน
< !– ข้อความ –> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width=”50%” size = “3″> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
&nbsp; คำสั่ง เพิ่มช่องว่าง
<IMG SRC = “PHOTO.GIF”> คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY> คำสั่ง <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

Create a free website or blog at WordPress.com. The Adventure Journal Theme.

ติดตาม

Get every new post delivered to your Inbox.

%d bloggers like this: