วันอังคารที่ 18 ธันวาคม พ.ศ. 2555

การสร้างเว็บเพจด้วยภาษา HTML

โดย Sorasak Sattayanuwat
ภาควิชาเทคโนโลยีการศึกษา คณะศึกษาศาสตร์
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตปัตตานี
HTML ย่อมาจากคำว่า "HyperText Markup Language" เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย

การสร้างเว็บเพจ

เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ
  1. TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น
  2. ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ

ขั้นตอนในการสร้างเว็บเพจ

  1. เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วเซฟเป็นไฟล์นามสกุล .htm หรือ .html
  2. เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor

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

การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งนั้นจะอยู่ในรูปของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป ซึ่งจะกล่าวในบทต่อไป
Tag แบ่งออกเป็น 2 ประเภท คือ
  1. แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
    ข้อความ.... <br>
    <hr>
    <! - ข้อความ - >


  1. แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
    <html> ส่วนของเนื้อหา ..... </html>
    <center> ข้อความ..... </center>
    <p> ข้อความ.... </p>

*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ <U> .... </U> และตามด้วย คำสั่ง ตัวเอียง <I>....</I> จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***
<I> U> ข้อความ.... </U> </I>
การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง
format.jpg (25175 bytes)
  • คำสั่งหลัก <HTML> .... </HTML> เป็นคำสั่งที่ไว้กำหนดจุดเริ่มต้นและจุดจบของเอกสาร
  • คำสั่งหลัก <HEAD> .... </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยภายในคำสั่งนี้จะประกอบไปด้วย
    • คำสั่งหลัก <TITLE> .... </TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการให้ขึ้นอยู่ในส่วนของ Title Bar โดยสามารถพิมพ์ได้ยาว 64 ตัวอักษร
  • คำสั่งหลัก <BODY> .... </BODY> เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของเอกสารทั้งหมด ว่าจะให้มีลักษณะอย่างไร

ตัวอย่าง

การกำหนดหัวข้อ (Heading)
คำอธิบาย
ใช้ในการกำหนดขนาดให้กับข้อความที่เป็นหัวข้อเรื่อง ในเอกสารที่มีหัวข้อเป็นปลีกย่อย สามารถแยกเป็นลำดับของหัวเรื่องได้อย่างชัดเจน
รูปแบบ
<hx> ..... </hx>
ตัวอย่าง
<html> <head>
<title> Education Technology </title>
</head>
<body>
<h1>Test Heading if x=1</h1>
<h2>Test Heading if x=2 </h2>
<h3> Test Heading if x=3 </h3>
<h4> Test heading if x=4 </h4>
<h5> Test heading if x=5 </h5>
<h6> Test heading if x=6 </h6>
</body>
</html>
    

การกำหนดจุดสิ้นสุดบรรทัด (Break Rule)
คำอธิบาย
ใช้ในการกำหนดจุดสิ้นสุดบรรทัด และขึ้นบรรทัดใหม่ คำสั่งนี้เหมือนการกด Enter บน keyboard นั่นเอง
รูปแบบ
..... <br>
ตัวอย่าง
<html> <head>
<title> Break Rule Tag </title>
</head>
<body>
Test Normal Message
Test Normal Message
Test Break Rule Tag <br>
Test Break Rule Tag <br>
</body>
</html>
    

การขึ้นย่อหน้าใหม่ (Paragraph)
คำอธิบาย
ใช้แสดงข้อความในลักษณะพารากราฟ หรือย่อหน้าในเว็บเพจ และยังสามารถใช้ในการขึ้นบรรทัดใหม่ครั้งละ 2 บรรทัด
รูปแบบ
<p> ... </p>
<p align="left/center/right"> ... </p>
ตัวอย่าง
<html> <head>
<title> Paragraph Tag </title>
</head>
<body>
<p> Test Normal Paragraph Tag
<p align="right"> Test Righ Paragraph Tag
<p align="center"> Test Center Paragraph Tag
<p align="left"> Test Left Paragraph Tag
</body>
</html>
    

แสดงข้อความแบบจัดกึ่งกลาง (Center)
คำอธิบาย
ใช้แสดงข้อความหรือรูปภาพใช้จัดกึ่งกลางเว็บเพจ
รูปแบบ
<center> ... </center>
ตัวอย่าง
<html> <head>
<title> Paragraph Tag </title>
</head>
<body>
Test Normal Message
<center> Test Center Message </center>
</body>
</html>
    

การแสดงเส้นคั่นทางแนวนอน (Horizontal Rule)
คำอธิบาย
ใช้แสดงเส้นคั่นแนวนอน โดยใช้ในการแบ่งเนื้อหาหรือคั่นเพื่อความสวยงามและความเป็นระเบียบของเนื้อหา
รูปแบบ
<hr>
<hr align="left/center/right"> กำหนดตำแหน่งเส้น
<hr width="pixels or %"> กำหนดความยาวเส้น
<hr size="pixels"> กำหนดขนาดเส้น
<hr noshade> กำหนดลักษณะเส้น
ตัวอย่าง
<html> <head>
<title> Horizontal Rule Tag </title>
</head>
<body>
<hr>
<hr width="100%">
<hr width="50%">
<hr width="200">
<hr size="3">
<hr size="7">
<hr align="right">
<hr align="center" width="75% size="3">
<hr noshade>
</body>
</html>
    
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)