การสร้างเว็บไซต์ด้วยภาษา HTML อย่างง่ายๆ
วิธีการเชือมโยง
การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
1. การเชื่อมโยงระหว่างเว็บเพจ <a href=”ไฟล์เว็บเพจ“>…สิ่งที่จะลิงค์…</a>
2. การเชื่อมโยงนอกเว็บไซต์ <a href=”URL“>…สิ่งที่จะลิงค์…</a>
3. การเชื่อมโยงภายในหน้าเว็บเพจ <a name=”กำหนดชื่อปลายทาง“></a>
และ <a href=”#ชื่อปลายทาง“>..สิ่งที่จะลิงค์…</a>
4. การเชื่อมโยงแบบอีเมล์ <a href=”mailto: E-mail address ที่ต้องการส่งถึง“>..สิ่งที่จะลิงค์…</a>
ในการเชื่อมโยง (ลิงค์) เราสามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมืื่่อรูปภาพหรือข้อความถูกลิงค์ เมื่อเราทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์ของเราจะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่เราได้ลิงค์ไว้
 รูปแบบการเชื่อมโยงระหว่างเว็บเพจ |
<html> <head><title>….การเชื่อมโยงระหว่างเว็บเพจ….</title></head> <body> <a href=”index.html“>คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ -> <a href=”index.html“><img src=”home.gif”></a> <!–ลิงค์โดยใช้รูปภาพ -> </body> </html> |
<html> <head><title>….การเชื่อมโยงนอกเว็บไซต์….</title></head> <body> <!–ลิงค์โดยใช้ข้อความ -> <a href=”http://www.nextstepdev.com“>ลิงค์มาที่เว็บไซต์ Nextstepdev.com</a><p> <!–ลิงค์โดยใช้รูปภาพ -> <a href=”http://www.nextstepdev.com“><img src=”nextstpdev.gif”></a> </body> </html> |
| การเชื่อมโยงภายในหน้าเว็บเพจ |
|
สำหรับเว็บบ้างเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยเราอาจแบ่งตามหัวข้อย่อย ๆ ก็ได้ค่ะ (เหมือนการลิงค์ในหน้านี้ค่ะ) ซึ่งอาจจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ค่ะ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ เราก็อาจทำลิงค์ ให้คลิ๊กเพื่อ go to top ได้อย่างรวดเร็วค่ะ คงเคยจะเห็นกันมาบ้างแล้วนะค่ะ (ก็เหมือนการลิงค์ในหน้านี้อีกน่ะแหละค่ะ) |
<html> <head> <title>….การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน….</title> </head> <body> <!–กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ-> <a name=”top“></a> <!–ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน-> <!–ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
|
| การเชื่อมโยงแบบอีเมล์ |
|
สำหรับการเชื่อมโยงแบบนี้ มักจะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมล์มายังผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในแท็กสำหรับลิงค์ การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานคลิ๊กที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมล์ตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่แท็กลิงค์ปรากฏอยู่ |
<html> <head><title>….การเชื่อมโยงแบบอีเมล์….</title></head> <body> <!–ลิงค์โดยใช้ข้อความ -> <a href=”mailto:mail@domain.com“>ลิงค์เมล์ส่งเมล์ไปที่ mail@domain.com</a><p> <!–ลิงค์โดยใช้รูปภาพ -> <a href=”mailto:mail@domain.com“><img src=”contact.gif”></a> </body> </html> |
การสร้างลิสต์รายการ
<HTML>
<HEAD>
<TITLE> การจัดลำดับหัวข้อและเนื้อหาโดยใช้ ( UL) </TITLE>
</HEAD>
<BODY>
การจัดหัวข้อโดยใช้ <UL TYPE=”disc”><BR>
<UL TYPE=”disc”>
<LI>เมนูหลัก</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้อ</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE=”square”><BR>
<UL TYPE=”square”>
<LI>เมนูหลัก</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้อ</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE=”circle”><BR>
<UL TYPE=”circle”>
<LI>เมนูหลัก</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้อ</LI>
<LI>รายละเอียดในเรื่องของแต่ละหัวข้</LI>
</UL>
</BODY>
</HTML>
ขอให้นักเรียนพิจารณาเฉพาะในส่วนของ Body นะค่ะ เพราะโครงการของภาษา HTML จะมี 2 สอง คือ ส่วน Head และส่วน Body
วิธีการสร้างตารางภาษา HTML
<html>
<head>
<title>my web</title>
</head>
<body bgcolor=”pink”>
<img src=”hd1.jpg”>
<font color=”#FF0000″><marquee><h2><i><u>ขอต้อนรับทุกท่านเข้าสู่เว็บไซต์ สร้างเว็บสวยด้วยมือเรา
</u></i></h2></marquee></font><br>
<img src=”01_67.jpg” “widht=”200″ height=”150″>
<img src=”images.jpg”"widht=”200″ height=”150″>
<img src=”1_display.jpg”"widht=”200″ height=”150″>
<img src=”2788184048_1.gif”"widht=”200″ height=”150″>
<table align=”center” border=”1″ width=”80%”
bgcolor=”#FFFF99″>
<tr>
<td>เลขประจำตัว</td>
<td>ชื่อ</td>
<td>นามสกุล</td>
<td>เบอร์โทรศัพท์</td>
</tr>
<tr>
<td>40203</td>
<td>ชัชชนม์</td>
<td>จันทร์เพ็ชร์</td>
<td>080000013</td>
</tr>
<tr>
<td>02</td>
<td>สมชาย</td>
<td>25,000</td>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
<td>20,000</td>
</tr>
</table>
Page1 หน้า 1
</html>
การทำตัวหนังสือวิ่งหน้าเว็บ
<html>
<head>
<title>my web</title>
</head>
<body bgcolor=”pink”>
<img src=”hd1.jpg”>
<marquee><h2><i><u>ขอต้อนรับทุกท่านเข้าสู่เว็บไซต์ สร้างเว็บสวยด้วยมือเรา</u></i></h2></marquee><br>
<img src=”01_67.jpg” “widht=”200″ height=”150″><br>
<img src=”images.jpg”"widht=”200″ height=”150″><br>
<img src=”1_display.jpg”"widht=”200″ height=”150″>
<img src=”2788184048_1.gif”"widht=”200″ height=”150″>
</body>
</html>
ผลงานและประวัติส่วนตัว
<div style=”margin-bottom:5px”> <strong> <a href=”http://www.slideshare.net/rphusangsi/radchaneeporn” title=”Radchaneeporn” target=”_blank”>Radchaneeporn</a> </strong> from <strong><a href=”http://www.slideshare.net/rphusangsi” target=”_blank”>รัชนีพร ภูแสงสี</a></strong> </div>
การสร้างเก้าอี้ด้วย google sketup
หลักการออกแบบเว็บไซต์
หลักในการออกแบบเว็บไซต์ WEB Site
ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์
การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า Site Map ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า
ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ
เราต้องกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับมา ระหว่างหน้าต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กันดังภาพ
ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า
นักเรียนสามารถออกแบบหน้าเว็บเพจแต่ละหน้าให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก
ซึ่งเรียกว่าโฮมเพจนักเรียนควรออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้เข้าชม
ในขั้นตอนการออกแบบนี้ บางทีอาจเรียกว่าการออกแบบเลย์เอาท์ (Lay Out) สามารถทำได้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้
ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า
นำเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษาhtml หรืออาจใช้โปรแกรมสำเร็จรูป เช่นFrontPage, Macromedia Dreamweaver หรือโปรแกรมสำเร็จรูปอื่น ๆ ตามความถนัด
ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือนำเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่ ที่ให้บริการ(Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริการฟรี และแบบที่ต้องเสียค่าบริการ
ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์
หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สำหรับฝากเว็บไซต์แล้ว ให้ใช้โปรแกรมสำหรับอัปโหลด (Upload) เช่นโปรแกรม CuteFTPเพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้
ขั้นตอนการสร้างเว็บ
การเก็บข้อมูลต่างๆ ในระบบคอมพิวเตอร์นั้นเพื่อความเป็นระเบียบ ความสะดวกในการทำงานและการค้นหาข้อมูล ควรสร้างโฟลเดอร์ (Folder) ขึ้นใหม่ โดยนิยมสร้างที่ี่ไดร์ฟ D: สำหรับนักเรียนที่ยังไม่มีความชำนาญในการสร้างโฟลเดอร์สามารถทำตามขั้นตอน ต่อไปนี้
1.1 นำเมาส์ไปดัีบเบิ้ลคลิกที่สัญลักษณ์ My Computer
1.2 ดับเบิล์คลิกที่ไดร์ฟ D
1.3 คลิกขวาในพื้นที่หน้าต่าง ๆ
ที่เป็นที่ว่างของไดร์ฟ D
1.4 คลิกที่รายการ New
1.5 เลื่อนเมาส์ไปคลิกที่รายการ Folder
1.6 พิมพ์ชื่อโฟลเดอร์ที่ต้องการ ตามตัวอย่างนี้ คือ HTML1 เมื่อพิมพ์ชื่อเสร็จ ให้กดปุ่ม ENTER 1ครั้งจะได้โฟลเดอร์ใหม่ชื่อว่า HTML1หลังจากนั้นควรเก็บข้อมูลทุกอย่าง เกี่ยวกับ
การสร้างเว็บเพจ ไม่ว่าจะเป็น รูปภาพภาพพื้นหลัง เสียงเพลง หรือ แม้แต่่ไฟล์เว็บเพจ ที่สร้างขึ้นด้วยภาษาHTML ต้ัองนำมาเก็บรวมไว้ในโฟลเดอร์เดียวกันนี้ทั้งหมด เพื่อการทำงานต่าง ๆ
ของเว็บเพจจะได้ไม่มีข้อผิดพลาด
ที่มา : http://school.obec.go.th/pp_school/html/makeweb2.html
