การสร้างเว็บอย่างง่าย ๆ ด้วยภาษา HTML
ก่อนที่เราจะได้สร้างเว็บด้วยภาษา html นั้น เราจะต้องทำความรู้จักกับมันเสียก่อน เพื่อจะได้มีความรู้พื้นฐานเกี่ยวกับภาษา html
ภาษา html เป็นพื้นฐานของการทำเว็บไซต์ เขียนง่าย แทบจะไม่มีความรู้เรื่อง html ก็สามารถเขียนได้แล้วเพราะแค่พิมพ์ข้อความที่ต้องการ โดยไม่ต้องมีฟอร์ม แล้วเซฟเป็น .htm หรือ .html ก็ใช้ได้ แล้วอีกอย่างสามารถเปิดกับ Browser ได้เลย ไม่เหมือนกับ ภาษา php หรือ asp ที่ต้องมีเซิร์ฟเวอร์มารองรับ จึงสามารถเปิดได้ เพราะถ้าไม่มีเซิร์ฟเวอร์มารองรับ ผลที่ได้มันจะเป็นโค้ดโผล่ขึ้นมาแทน และอีกอย่างที่สำคัญภาษา html นั้นสามารถใช้ร่วมกับภาษา php และ asp ได้โดยไม่มีปัญหา โดยส่วนมาก ถ้าเป็นเว็บที่มีการแสดงผลธรรมดา หรือ ไม่มี Application คือหมายความว่า ที่ไม่มีระบบสมาชิก ระบบค้นหา เว็บบอร์ด จะเขียนด้วยภาษา html ทั้งสิ้น เพราะเหตุผลที่ว่าไว้ข้างต้นก็ คือ เขียนง่าย ถึงแม้ภาษา html จะเขียนง่าย แต่การที่เขียนง่ายนี่แหละที่ทำให้ไม่มีลูกเล่นอะไรเลย จึงต้องใช้ Java Script เข้ามาช่วย ซึ่งเจ้าตัวนี้แหละที่ทำให้เว็บที่สร้างด้วยภาษา html ดูเด่นเป็นประกายขึ้นมาเยอะเลย เพราะสามารถแสดงลูกเล่นได้หลายอย่าง
คำสั่งพื้นฐานของการทำเว็บด้วย ภาษา HTML
1. คำสั่งพื้นฐานที่บังคับต้องมี
คำสั่งแรก เป็นคำสั่งพื้นฐานจริง ๆ เพราะเป็นรูปแบบของการเขียนภาษาแบบ html ที่จริงตรงนี้ไม่ต้องมีก็ได้อย่างที่ได้บอกไว้ใน รู้จักกับภาษา html แล้ว เพราะเพียงแค่เซฟเป็น .htm หรือ .html มันก็จะแสดงผลออกมา แต่เพื่อให้เกิดความสวยงามเราก็คงจะเขียนดีกว่านะ ไปดูกันเลย
<html>
<head>
<title> </title>
</head>
<body> </body>
</html>
นี่คือ เป็นรูปแบบของภาษา html ถ้าสังเกตให้ดี ถ้าเริ่มต้นคำสั่ง จะมีคำสั่งอยู่ในเครื่องหมาย <> และเมื่อจบคำสั่ง จะมีเครื่องหมาย / อยู่ใน <> ด้วย ก็คือ อยู่ในรูป </> เป็นการปิดคำสั่งนั้น ๆ อันที่จริงการปิดคำสั่งนั้นไม่ต้องมีก็ได้แต่ที่มีก็เพื่อสวยงาม (อีกและ) และก็เพื่อจะได้รู้ว่าปิดคำสั่งอะไรไป
<html> </html> เป็นรูปแบบให้เรารู้ว่าตอนนี้ได้ใช้ภาษา html อยู่โดยใส่คำสั่งต่าง ๆ เข้าไปในช่องว่างที่เว้นไว้ให้ คำสั่งต่าง ๆ ที่กล่าวมาในส่วนนี้ก็จะประกอบไปด้วย
1. ส่วนของ <head> </head> ในส่วนนี้ชื่อก็ คือ "หัว" หมายความว่า ถ้าเราใส่คำสั่งไปในส่วนนี้มันจะไปแสดงในส่วนอื่น ๆ ที่ไม่ใช่ในส่วนเนื้อหา ส่วนที่ไม่ใช่เนื้อหาก็จะมี ไตเติ้ลบาร์ ก็คือ บริเวณที่อยู่ข้างบนของขอบหน้าต่าง สกอลบาร์ ก็คือ ที่เลื่อน และสุดท้าย สเตตัสบาร์ ก็คือ บริเวณที่อยู่ข้างล่างของหน้าต่าง ในส่วนนี้ก็จะใส่คำสั่งพื้นฐานก็คือ
1.1 <title> </title> ในช่องว่างให้ใส่ชื่อที่คุณต้องการ มันจะไปแสดงที่ไตเติ้ลบาร์
1.2 ในส่วน head นี้ เราสามารถจะใส่ Java Script เพื่อให้เว็บเราดูโดดเด่นได้
2. ส่วนของ <body> </body> ในส่วนนี้ก็ให้ใส่เนื้อหา คำสั่งแสดงผลต่าง ๆ ลงในช่องว่าง มันจะไปแสดงผลในส่วนของเนื้อหา
2. คำสั่งพื้นฐานที่จำเป็น
การทำพื้นหลัง
พื้นหลังที่เป็นสีต่าง ๆ ใช้คำสั่ง <body bgcolor="ใส่ชื่อสีหรือรหัสสี"></body> ต้องใส่ไว้ในแท็กของ <body> สำหรับชื่อสีก็ใส่ไป อย่างเช่น red ก็คือสีแดง สำหรับรหัสสีนั้นจะเขียนอยู่ในรูป #xxxxxx ตรง xxxxxx ก็ให้ใส่ตัวเลขหรืออักษรภาษาอังกฤษ อักษรอังกฤษให้ใช้ A-F
ส่วนพื้นหลังที่เป็นรูปภาพ ใช้คำสั่ง <body background="ที่อยู่ของไฟล์รูปภาพครับ"></body> ต้องใส่ไว้ในแท็ก <body> เช่นเดียวกับพื้นหลังที่เป็นสี การใส่ที่อยู่ของไฟล์ถ้าจะให้ใส่แบบสั้น ๆ ก็ควรให้อยู่ในโฟลเดอร์เดียวกับเว็บเพจของเรา เช่น เว็บเพจอยู่ที่ C:\ ก็ควรเซฟรูปภาพที่ C:\ เวลาเขียนคำสั่งก็จะเขียนได้ดังนี้ <body background="ชื่อรูปภาพ"></body> โดยส่วนมากจะเก็บรูปภาพไว้ในโฟลเดอร์ image ซึ่ง image นี้จะอยู่ในโฟลเดอร์เดียวกับไฟล์เว็บเพจ เวลาเขียนก็แค่พิมพ์ image/ชื่อรูปภาพ
ตัวอักษร ใช้คำสั่ง <font face="ใส่ชื่อฟอนต์ของตัวอักษร" size="ใส่ขนาดของตัวอักษร" color="ใส่ชื่อสีหรือรหัสสี">ใส่ข้อความ</font>
face คือ ชื่อฟอนต์สามารถดูได้จากโปรแกรมที่ใช้พิมพ์ เช่น MS Word ครับ
size คือ ขนาดตัวอักษร ในเว็บจะไม่เหมือนกับโปรแกรมทั่วไปที่ใช้พิมพ์งานนะครับ คือ ถ้าใส่ 1 ขนาดจะประมาณ 8 ในโปรแกรมที่ใช้พิมพ์งานอะครับ ใส่ 2 = 10 ใส่ 3 = 12 ลองใส่ไปเรื่อย ๆ ครับ ถ้าใส่ 7 ก็ประมาณ 72 แล้วครับใหญ่มากครับ
color คือ สีตัวอักษรนั้นก็เหมือนพื้นหลัง ใส่ได้ทั้งชื่อและรหัสสี
รูปแบบตัวอักษร
ตัวหนา ใช้คำสั่ง <b>ใส่ข้อความ</b>
ตัวเอียง ใช้คำสั่ง <i>ใส่ข้อความ</i>
ขีดเส้นใต้ ใช้คำสั่ง <u>ใส่ข้อความ</u>
ถ้าจะให้มีทั้งตัวหนา ตัวเอียง และขีดเส้นใต้ ให้ใส่ทั้งหมดไปก็จะเป็นดังนี้ <b><i><u>ใส่ข้อความ</u></i></b>
การจัดรูปแบบ
ซ้าย ใช้คำสั่ง <p align="left">ใส่ข้อความหรือชื่อที่อยู่ของรูปภาพ</p>
กึ่งกลาง ใช้คำสั่ง <p align="center">ใส่ข้อความหรือชื่อที่อยู่ของรูปภาพ</p>
ขวา ใช้คำสั่ง <p align="right">ใส่ข้อความหรือชื่อที่อยู่ของรูปภาพ</p>
ชิดขอบ ใช้คำสั่ง <p align="justify">ใส่ข้อความหรือชื่อที่อยู่ของรูปภาพ</p>
เว้นช่องไฟ ใช้คำสั่ง
ใช้ 1ครั้งจะเว้นได้ 1 ช่อง
เว้นบรรทัด ใช้คำสั่ง <br>
ใช้ <br> 1 ครั้ง จะเว้นได้ 1 บรรทัด
การทำกรอบ (Frame)
ใช้คำสั่ง <ifram src="ชื่อเพจหรือ URL เว็บที่ต้องการให้แสดง" width="ความกว้าง" height="ความสูง" frameborder="จะให้มีกรอบหรือเปล่า" scolling="จะให้มีแถบเลื่อนหรือเปล่า"></iframe>
name คือ ชื่อของเฟรม ถ้าในเพจนั้น ๆ มีหลายเฟรมก็ควรตั้งชื่อให้ไม่ซ้ำกัน
src คือ ชื่อของเพจ หรือ URL ของเว็บที่ต้องการให้มาแสดงในกรอบ
width คือ ความกว้างของเฟรม จะใส่เป็น pixels หรือ เปอร์เซ็นต์ ก็ได้
height คือ ความสูงของเฟรม จะใส่เป็น pixels หรือ เปอร์เซ็นต์ ก็ได้
framborder คือ กรอบของเฟรม ถ้าไม่ให้มี ใส่ 0 ถ้ามี ใส่ 1
scolling คือ แถบเลื่อน จะให้มีหรือเปล่า ถ้าไม่ให้มี ใส่ no ถ้ามี ใส่ yes
การเชื่อมโยง (Link)
Link ไปยังอีกเพจนึงของเรษหรืออีกเว็บ ใช้คำสั่ง <a href="ชื่อที่อยู่เพจ หรือ URL ของเว็บ ที่ต้องการไป" target="ต้องการให้แสดงผลยังไง" target="เวลาเอาเมาส์ไปชี้จะให้มีข้อความอะไรแสดงขึ้นมา">ใส่ข้อความหรือชื่อที่อยู่ของรูปภาพ</a>
href คือ ที่อยู่ของที่ที่เราจะไป ถ้าเป็นเพจของเราให้ใส่ชื่อไฟล์ไปเลยเหมือนกับทำรูปภาพให้เป็นพื้นหลัง ถ้าเป็น URL ก็ให้ใส่ชื่อเว็บไป
target คือ เป้าหมาย หรือลักษณะการแสดงผล ว่าเวลาเรากดลิ้งค์แล้วจะเป็นลักษณะอย่างไร ดูได้จากข้างล่าง
ถ้าไม่ใส่ จะลิ้งค์ไปโดยใช้หน้าต่างเดิมที่
ใส่ ชื่อเฟรม จะลิ้งค์ไปโดยแสดงที่เฟรมนั้น ๆ ตามชื่อที่ได้ตั้งไว้
ใส่ _blank จะลิ้งค์ไปโดยเปิดหน้าต่างใหม่
ใส่ _parent จะใช้กับเพจที่มีเฟรมอยู่ ซึ่งเฟรมนั้นจะมีลิ้งค์ พอกดลิ้งค์ไปก็จะแสดงที่เพจแม่ ก็คือเพจที่มีเฟรมอยู่เลย ถ้าไม่ใส่มันก็จะแสดงในเฟรมนั้นเท่านั้น
title คือ ข้อความที่พอเราเอาเมาส์ไปวางไว้แล้วจะแสดงข้อความออกมา
Link E-Mail
ใช้คำสั่ง <a href="mailto:ใส่ E-Mail Address ครับ">ใส่ข้อความครับหรือชื่อที่อยู่ของรูปภาพ</a>
การนำรูปภาพมาแปะ
ใช้คำสั่ง <img src="ชื่อที่อยู่ของรูปภาพ" width="ความกว้าง" height="ความสูง" border="มีขอบหรือไม่">
src คือ ที่อยู่ของรูปภาพ ถ้าอยู่ในโฟลเดอร์เดียวกันให้ใส่ชื่อรูปภาพได้เลย อย่างกับที่อธิบายไว้แล้วตอนนต้น
width คือ ความกว้างของรูป จะใส่เป็น pixels หรือ เปอร์เซ็นต์ ก็ได้
height คือ ความสูงของรูป จะใส่เป็น pixels หรือ เปอร์เซ็นต์ ก็ได้
border คือ ขอบของรูป ถ้าไม่ให้มี ใส่ 0 ถ้ามี ใส่ 1
การทำตาราง
ใช้คำสั่ง <table border="มีขอบหรือไม่" cellpadding="ความสูงของเซลล์" cellspacing="ระยะห่างเซลล์จากขอบของตาราง" bordercolor="สีของขอบตาราง" width="ความกว้าง" height="ความสูง">ใส่เซลล์ตาราง</table>
border คือ ขอบของตารางมีหรือไม่ ถ้ามีใส่ 1 ถ้าไม่มี ใส่ 0
cellpadding คือ ความสูงของเซลล์ใส่เป็น Pixels
cellspacing คือ ระยะห่างของเซลล์จากขอบตาราง ใส่เป็น Pixels
bordercolor คือ สีของขอบตาราง ใส่เป็นชื่อสี หรือรหัสก็ได้ครับ ถ้าไม่ได้ให้มีขอบตารางไม่ต้องใส่ก็ได้
width คือ ความกว้างของตาราง ใส่เป็น Pixels หรือ เปอร์เซ็นต์ ก็ได้
height คือ ความสูงตารางของตาราง ใส่เป็น Pixels หรือ เปอร์เซ็นต์ ไม่ต้องใส่ก็ได้
สำหรับเซลล์ตารางสร้างได้ดังนี้
เซลล์ตารางแบบคอลัมน์ ใช้คำสั่ง <td width="ความกว้าง" bgcolor="สีพื้นหลัง">ใส่ข้อความหรือที่อยู่ของรูปภาพ</td>
เซลล์ตารางแบบแถว ใช้คำสั่ง <tr width="ความกว้าง" bgcolor="สีพื้นหลัง">ใส่ข้อความหรือที่อยู่ของรูปภาพ</tr>
ให้ใส่เซลล์ตารางลงไปใน <table> </table> นี้เลย
width คือ ความกว้างของเซลล์ ใส่เป็น Pixels หรือ เปอร์เซ็นต์ ก็ได้
bgcolor คือ สีพื้นหลัง ถ้าใส่เป็นรูปภาพก็ทำแบบเดียวกับ ทำพื้นหลังด้วยรูปภาพ อย่างที่ได้บอกเมื่อตอนต้น เมื่อรู้จักคำสั่งต่าง ๆ ของภาษา html กันแล้วก็มาเริ่มต้นทำงานได้เลย
เริ่มสร้างเว็บด้วยภาษา HTML
1. สำหรับโปรแกรมที่ใช้นั้น ก็คือ Notepad เป็นโปรแกรมที่มีอยู่ใน Windows ทุกรุ่นอยู่ โปรแกรมนี้เป็นโปรแกรมที่ใช้วิธีเขียนโค้ดคำสั่ง
สำหรับการเรียกนั้น ก็คือเริ่มที่ Start -> Programs -> Accessories -> Notepad
2. ลองมาสร้างโฮมเพจดู โดยใช้คำสั่งพื้นฐานต่าง ๆ ที่จำเป็นในการสร้างเว็บ อย่างที่ได้เขียนอธิบายไว้ในส่วนของ คำสั่งพื้นฐานในการสร้างเว็บ
โดยพิมพ์ตามข้างล่าง หรือ Copy ไปได้เลย
<html>
<head>
<title>ทดลองสร้างเว็บ</title>
</head>
<body bgcolor="pink">
<p align="center"><font face="AngsanaUPC" size="5" color="red">
<b>นี่ คือ หน้าตาเว็บของเรา</b><br>
<u>สวยละซี่</u><br><i>ขอบคุณที่ชมนะ</i><br>
<a href="http://www.createwebsite.cjb.net" target="blank" title="คลิกเลย">นี่คือเว็บของเรา</a><br>
<a href="mailto:[email protected]">ติดต่อเราได้ที่นี่นะ!</a><br>
<hr width="80%" color="yellow">
</font></p>
</body>
</html>
3. เมื่อใส่ข้อความ ภาพ ต่าง ๆ จนเป็นที่น่าพอใจแล้วต้องการจะดูตัวอย่างงานที่สร้างขึ้น ให้ทำการเซฟงานก่อนโดยเลือกไปที่ File > save
4. ในการเซฟเมื่อตั้งชื่อเว็บแล้วให้พิมพ์คำว่า .html ต่อท้ายชื่อเว็บที่ได้ตั้งไว้ดังตัวอย่าง
5. หลังจากทำการบันทึกเรียบร้อย ก็ให้เปิดไฟล์ที่บันทึก โดยการดับเบิ้ลคลิกที่ตัวไฟล์ได้เลย พอดับเบิ้ลคลิกเสร็จ Web Browser จะถูกเปิดออกมาพร้อมกับมีผลงานของเรามาแสดงด้วย
6. เมื่อสร้างเว็บขึ้นมาแล้วแต่ต้องการให้มีลูกเล่นและต้องการจะตกแต่งให้สวยงามก็ต้องใช้ JAVA Script มาช่วย สำหรับการใส่ Java Script ในภาษา html นั้นจะใส่ได้ใน 3 ส่วนด้วยกัน คือ
1. ในส่วนของ <head> </head>
2. ในส่วนของ <body> </body>
3. ในส่วนของ <head> </head> และ <body> </body>
ก็แล้วแต่ Java Script ว่าคำสั่งไหนจะใส่ไว้ที่ใด สำหรับเว็บที่แจก Java Script ก็มีดังนี้
1. http://www.codetukyang.com
2. http://www.javafile.com
3. http://www.free-javascript.com
เมื่อได้โค้ดที่ถูกใจก็ Copy ใส่ใน html ได้เลย
