ทดลองสร้างเว็บเพจด้วย HTMLเราจะมาลองสร้างเว็บเพจแบบง่ายๆ กันครับ โดยใช้โปรแกรม
Notepad ในเครื่องของท่านก่อน โดยพิมพ์ข้อความ
เหล่านี้ลงไป
จากนั้นให้ทำการบันทึก โดยกำหนดนามสกุลของไฟล์ใหม่เป็น เช่น try.html หลังจากนั้นให้ลองเปิดไฟล์เอกสารขึ้นมา
เว็บบราวเซอร์ก็จะอ่านเพจและแสดงผลออกมาดังนี้
อิลิเมนต์ที่สำคัญส่วนของ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">คำสั่งนี้บอกให้เว็บบราวเซอร์ได้ทราบเกี่ยวกับเวอร์ชั่นของ HTML ที่เราเขียนขึ้นมาในเพจหนึ่งๆ ครับ ในที่นี้เรากำหนด
ไว้ให้เป็นเวอร์ชั่น HTML 4.0 Transitional
//ภาษา HTML แต่ละเวอร์ชั่นจะมีข้อกำหนดเกี่ยวกับแท๊กซ์ที่ใช้งานได้ ซึ่งจะแตกต่างกันไปส่วนของ <html></html>ข้อความที่อยู่ในแท๊กนี้จะถูกตีความว่าเป็นภาษาในรูปของ HTML
ส่วนของ <head></head>ข้อมูลในส่วนนี้จะไม่แสดงข้อมูลในเว็บเพจ ซึ่งจากในตัวอย่างจะมีข้อมูลอยู่สองอย่างคือ
- แท๊ก <meta>
เป็นแทีกที่แสดงถึงข้อมูลของเว็บเพจ และสามารถกำหนดเนื้อหาว่าในเอกสารนั้นใช้อักขระแบบใดในการแสดงผล
ซึ่งในตัวอย่างคือ tis-620(ภาษาไทย) อีกทั้งยังเขียนข้อมูลอื่นๆ ได้อีก เช่น ชื่อผู้สร้าง คีย์เวิร์ด ต่างๆ
- แท๊ก<title></title>
เอาไว้สำหรับกำหนดหัวเรื่องของเว็บเพจ ที่ใช้แสดงผลบน Titile Bar
ส่วนของ <body></body>สำหรับส่วนนี้คือแท๊กที่จะแสดงผลข้อความต่างๆ ออกมาให้ผู้ใช้เห็นผ่านทางเว็บบราวเซอร์ ดังนั้นในการสร้างเว็บเพจ
เราจะมาสนใจกันในแท๊กของ <body></body> นั่นเองครับ
ซึ่งในตัวอย่างผมได้ใส่แท๊ก <h1></h1> ก็คือแสดงข้อความเป็นหัวข้อระดับที่หนึ่ง ซึ่งจะใหญ่มากที่สุด โดย HTML
เราจะสามารถกำหนดได้ด้วยกัน 6 ระดับ คือ <h1> ถึง <h6> นั่นเอง
ส่วนแท๊ก <br> นี่ก็ใช้สำหรับขึ้นบรรทัดใหม่ สำหรับคำสั่งอื่นๆ สามารถศึกษาข้อมูลเพิ่มเติมได้จากด้านล่างครับ
Basic HTML รวมโค้ดสำคัญๆ ในการสร้างเว็บ HTML
คำสั่ง คำอธิบาย
<html>...</html> เป็นคำสั่งแรกที่จะต้องมีในภาษา HTML ซื่งเป็นการประกาศว่าเป็นเอกสารประเภท HTML โดยจะอยู่ที่จุดเริ่มต้นและจุดสุดท้ายของเว็บเพจ
<head>...</head> กำหนดรายละเอียดส่วนหัวของเว็บเพจ
<title>...</title> เป็นส่วนที่ใช้แสดงข้อความที่จะปรากฏบน Title Bar ของ Browser ที่กำลังทำงานอยู่ และปรากฏอยู่บน Bookmark ของ Browser ด้วย
<body>...</body> เป็นส่วนแสดงเนื้อหาของเว็บเพจ
<body bgcolor="#FF0000"> ใช้กำหนดสีพื้นหลังของเว็บเพจ
<body background="bg.ipg"> กำหนดภาพเป็นพื้นหลังของเว็บเพจ
<script>...</script> ใช้แทรกภาษาสคริปในเว็บเพจ
<style>...</style> ใช้กำหนดสไตล์ชีทในเว็บเพจ
<bgsound src="sound.midi"> ใช้กำหนดเสียงดนตรีประกอบเว็บเพจ
<!-- ข้อความ --> ใช้เป็นหมายเหตุ
<br> คำสั่งขึ้นบรรทัดใหม่
<p>...</p> คำสั่งย่อหน้าใหม่
<hr> คำสั่งเส้นคั่นบรรทัด
<center>...</center> กำหนดตำแหน่งกึ่งกลาง
<div>...</div> ใช้จัดกลุ่มของข้อความออกเป็นส่วนๆ
<font>...</font> ใช้กำหนดรูปแบบตัวอักษร
<font color="#FF0000"> ใช้กำหนดสีตัวอักษร
<b>...</b> ใช้กำหนดตัวอักษรหนา
<i>...</i> ใช้กำหนดตัวอักษรเอียง
<u>...</u> ใช้ขีดเส้นใต้ตัวอักษร
<s>...</s> กำหนดให้ขีดเส้นใต้ทับข้อความ
<tt>...</tt> กำหนดตัวอักษรให้เป็นแบบพิมดีด
<h1>...</h1> กำหนดให้ข้อความเป็นหัวเรื่อง โดยมีขนาดตั้งแต่ h1-h6
<big>...</big> ใช้กำหนดข้อความให้มีขนาดใหญ่กว่าปกติ 1 ระดับ
<small>...</small> ใช้กำหนดข้อความให้มีขนาดเล็กกว่าปกติ 1 ระดับ
<sub>...</sub> ใช้กำหนดให้ข้อความอยู่ต่ำกว่าปกติ
<sup>...</sup> ใช้กำหนดให้ข้อความอยู่สูงกว่าปกติ
<OL value="1">
<L1> บรรทัดที่ 1
<L2> บรรทัดที่ 2
</OL> แสดงตัวเลขกำกับบรรทัด ซึ่งสามารถกำหนดให้แสดงลำดับได้หลายแบบ เช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C... โดยพิมพ์คำสั่งเช่น
<UL value="A"> เป็นต้น
<UL type="disc">
<L1> บรรทัดที่ 1
<L2> บรรทัดที่ 2
</UL> แสดงสัญลักษณ์กำกับบรรทัด ซึ่งสามารถกำหนดให้แสดงผลได้หลายแบบ โดยพิมพ์คำสั่งเข้าไปเช่น <UL type="circle"> เป็นต้น
<a href="http://">ข้อความ</a> ใช้สร้างจุดเชื่อมโยง Link
<img src="pic.gif"> เป็นคำสั่งแสดงรูปภาพ ในที่นี้ภาพชื่อ pic.gif
<table>...</table> ใช้สร้างตารางในเวปเพจ
<table bgcolor="#FF0000"> กำหนดพื้นหลังของตาราง
<table border="1"> กำหนดขนาดของเส้นขอบตาราง
<table bordercolor="#FF0000"> กำหนดสีของเส้นตาราง
<caption>...</caption> ใช้กำหนดชื่อตาราง
<tr>...</tr> ใช้กำหนดแถวในตาราง
<th>...</th> ใช้สร้างเซลล์ในส่วนที่เป็นหัวของตาราง
<td>...</td> ใช้สร้างเซลล์ในส่วนที่เป็นข้อมูลของตาราง
<form>...</form> เป็นคำสั่งกำหนดฟอร์มในเว็บเพจ
<input> เป็นคำสั่งที่ใช้สร้างฟิลด์รับข้อมูลแบบต่างๆ
<select>...</select> ใช้สร้างฟิลด์แบบหลายตัวเลือก
<option>...</option> ใช้สร้างฟิลด์แบบตัวเลือกเดียว
<textarea>...</textarea> เป็นคำสั่งที่ใช้สร้างฟิลด์รับข้อมูลแบบหลายบรรทัด
<button>...</button> เป็นคำสั่งที่ใช้สร้างปุ่มเพื่อรับข้อมูลในฟอร์ม
<frameset>...</frameset> ใช้แบ่งพื้นที่ในเวปเพจออกเป็นเฟรมย่อย
<iframe>...</iframe> กำหนดข้อมูลและรูปแบบของเฟรมย่อย
<noframes>...</noframes> ใช้แสดงข้อความนกรณีที่ Browser ไม่สามารถแสดงเฟรมได้
ในการสร้างเว็บเพจ เราอาจจำเป็นต้องเพิ่มเติมข้อมูลให้กับแท๊กหนึ่งๆ ซึ่งกำหนดโดยเพิ่ม แอตทริบิวต์(attribute)
ภายในแท๊กนั้น เช่น
<body bgcolor=#ff0000>
...
</body>
สำหรับการกำหนดสีนั้นเราสามารถกำหนดได้ 2 วิธี คือ
1. ใช้เลขฐานสิบหกจำนวน 6 หลัก โดยนำมาจากแม่สี 3 สี คือ
แดง, เขียว, และน้ำเงินผสมกัน โดยมีเครื่องหมาย # นำหน้า เช่น
- #ff0000 หมายถึง ใช้สี (แดง 255, เขียว 0, น้ำเงิน 0)
- #00ff00 หมายถึง ใช้สี (แดง 0, เขียว 255, น้ำเงิน 0)
2. พิมพ์ชื่อสีเป็นภาษาอังกฤษลงไปได้เลย เช่น red,green,blue
ลิงค์หัวข้อ:
http://dexmore.com/topic/580 
Powered by SMF © 2006–2012, Simple Machines LLC
