เทคนิคการเลือกชนิดของไฟล์รูปภาพที่นํามาใส่ในเว็บเพจ

ในการนําภาพมาใส่ในเว็บเพจนั้น แม้จะมีให้เลือกหลายชนิดก็ตาม เเต่เพื่อให้การเสนอเว็บเพจ
จะได้รวดเร็วและสวยงาม ควรคํานึงถึงขั้นตอนต่อไปนี้
1. เลือกไฟล์ภาพชนิดที่มีขนาดเล็กเพื่อให้ใช้เวลาในการ LOAD ไฟล์ภาพน้อยที่สุด
2. หากจําเป็นต้องใช้ไฟล์ขนาดใหญ่ให้แบ่งภาพเป็นภาพย่อยและนําเสนอภาพย่อยนั้นใน
ลักษณะต้องต่อเนื่องกันจะทําให้การ LOAD ไฟล์ภาพเร็วขึ้น
3. ไฟล์ภาพที่นํามาใช้ไม่ควรมีความละเอียดของสีมากเกินไป เพราะนอกจากจะต้องใช้เวลาใน
การ LOAD นานแล้วเครื่องของผู้แวะเข้าชมเว็บบางคนไม่สนับสนนภาพที่มีความละเอียด
ของสีสูง ทําให้สีเพี้ยนไปมีผลให้ผู้แวะชมหมดความสนใจได้ง่ายๆ

เทคนิคการทําเว็บไซต์และสร้างเว็บเพจให้น่าสนใจ

ขั้นตอนการสร้างเว็บไซต์
1. กําหนดเรื่องที่ต้องการทําเวบไซต์ควรเป็นเรื่องที่เราสนใจและมีความรู้หรือหาได้รับมอบหมาย
ให้ทําเว็บไซต์ขององค์กรหหรือหน่วยงานก็ควรศึกษามาเเล้วอย่างดี
2. กําหนดกลุ่มเป้าหมายที่ต้องการนําเสนอเว็บไซต์การที่เรารู้ว่ากลุ่มเป้าหมายที่เราจะนําเสนอ
เว็บไซต์คือกลุ่มใด จะทาให้ การจัดทำข้อมูลเเละเนื้อหาได้เหมาะสมกับกลุ่มเป้าหมายนนั้น
3. กําหนดเนื้อหาของเว็บไซต์ซึ่งต้องสอดคล้องกับกลุ่มเป้าหมายที่กําหนดไว้

การแสดงไฟล์เอกสารและการเปิดดู CODE ภาษา HTML

การแสดงไฟล์เอกสาร
การแสดงไฟลเอกสาร  HTML มี 2 วิธีคือ
1. การแสดงไฟล์เอกสารโดยเปิดผ่าน IE มีขั้นตอนดังนี้
– ดับเบิ้ลคลิกที่ IE แล้วเลือกเมน File → Open → Brows
– เลือกชื่อไฟล์ที่ต้องการเปิด→ Open → OK
2. การแสดงไฟล์เอกสาร HTML โดยตรง มีขั้นตอนดังนี้
– ดับเบิ้ลคลิกที่ชื่อไฟล์เอกสารนั้น
– จะปรากฏผลลัพธ์ของไฟล์เอกสาร HTML ผ่านเว็บบราวเซอร์
การเปิดดู CODE ภาษา HTML เมื่อแสดงบนเว็บบราวเซอร์
– เลือกเมนู View →Source

การสร้างเอกสารภาษา HTML และการบันทึกเอกสารภาษา HTML

ก่อนจะสร้างโปรแกรมภาษา  HTML ต้องทําความรู้จักกับโปรแกรมที่จะสร้างเอกสาร HTML ก่อน
โปรแกรมนี้เรียกว่า Text Editor คือโปรแกรมที่สร้างและแก้ไขเอกสารโปรแกรมเหล่านี้ได้แก่ Notepad,
Wordpad, MS Word เป็นต้น โดยที่จะเรียนนี้จะใช้ Notepad ในการสร้างเอกสาร HTML
การสร้างเอกสาร HTML เราสามารถสรางโดยใช้ Text Editor ที่มีอยู่ทั่วไป โปรแกรมเหล่านี้จะติด
มากับเครื่องใช้ระบบปฏิบัติการที่เป็น Windows
ขั้นตอนการสร้างเอกสารภาษา HTML ด้วย Notepad
1. เลือก Start →Programs →Accessories→ Notepad
2. จะปรากฏหน้าตารางของโปรแกรม Notepad
3. ให้คีย์เอกสาร HTML ตามนี้
<HTML>
<HEAD>
<TITLE> การสร้างและบันทกเอกสาร HTML </TITLE>
</HEAD>
<BODY>
สวัสดีค่ะ คนอ่านหน้าตาดีจังเลย
</BODY>
</HTML>

การใส่เส้นคั่นในเอกสาร

การใส่เส้นคั่นในเอกสาร
เป็นอีกวิธีหนงทึ่ ี่จะแบบงข้อมลให้เป็นสัดส่วน และยังเป็ นการตกแต่งเว็บเพจให้สวยงามได้อีก
ด้วยการใส่เส้นเสนอคั่รในเอกสารนั้นมีวิธีการใส่และการปรับแต่งเสอนคั่น ดังนี้
การใส่เสนคั่นในแนวนอน (Horizontal Rule)
เป็นการใส่เส้นคั่นเพื่อแบ่งข้อมูลออกเป็นสัดส่วนให้ดูง่ายขึ้น โดยการใช้ Tag<HR>
รูปแบบของคําสั่ง HTML ที่ใส่เส้นคั่นในเอกสาร
<HR>ข้อมูลที่ต้องการแบ่ง
การกาหนดขนาดของเส้นคั่น
รูปแบบของคําสั่ง HTML ในการกําหนดขนาดของเสนคคั่น
<HR WIDTH=ความยาวของเส้นคั่น SIZE=ความหนาของเสอนคั่น>
ความยาวและความหนาของเส้นนั้น มีหน่วยเป็นพิกเซล โดยมีความยาวสูงสุดที่ 800 พิกเซล และความหนาสูงสุด 500 พิกเซล

การกําหนดขนาดของตัวอักษรและการกําหนดตัวอักษรเป็นหัวเรื่อง

การกาหนดขนาดตัวอักษร
กําหนดขนาดให้เมื่อนำเอกสาร  HTML ไปแสดงบนบราวเซอร์ขนาดของตัวอกษรจะ
ถูกกำหนดเป็นพื้นฐานหากต้องการกําหนดเอง ก็สามารถทาได้โดยขนาดของตัวอักษรจะมี
7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่
รูปแบบคําสั่ง HTML ในการกําหนดขนาดตัวอักษร
<FONT SIZE=”ขนาดตัวอักษรที่ต้องการ”>ข้อความ</FONT>
ตัวอย่างคําสั่ง
<FONT SIZE=”7”>นี่คือขนาดตัวอักษรเทากกับ 7 </FONT>
<FONT SIZE=”6”>นี่คือขนาดตัวอักษรเทากกับ 6 </FONT>
<FONT SIZE=”5”>นี่คือขนาดตัวอักษรเทากกับ 5 </FONT>
<FONT SIZE=”4”>นี่คือขนาดตัวอักษรเทากกับ 4 </FONT>
<FONT SIZE=”3”>นี่คือขนาดตัวอักษรเทากกับ 3 </FONT>
<FONT SIZE=”2”>นี่คือขนาดตัวอักษรเทากกับ 2 </FONT>
<FONT SIZE=”1”>นี่คือขนาดตัวอักษรเทากกับ 1 </FONT>
ผลลัพธ์ที่ได้
นี่คือขนาดตัวอักษรเท่ากับ 7
นี่คือขนาดตัวอักษรเท่ากับ 6
นี่คือขนาดตัวอักษรเท่ากับ 5
นี่คือขนาดตัวอักษรเท่ากับ 4 นี่คือขนาดตัวอักษรเ่ท่ากับ 3
นี่คือขนาดตวอั ักษรเท่ากับ 2
นี่คือขนาดตัวอักษรเท่ากับ 1

การใส่รูปภาพในตาราง

การใส่รูปภาพลงในตาราง
นอกจากเราจะใส่ข้อความหรือข้อมูลต่างๆ ลงในตารางแล้วเรายังสามารถนำรูปภาพมา
วางไว้้ในตารางได้เพื่อให้การแสดงข้อมูลมีรูปแบบที่ดูง่าย สวยงามและเป็นระเบียบมากขึ้น การ
ใส่รูปในตารางจะใช้วิธีเดียวกับการใส่รูปใน Webpage ทั่วๆไป โดยให้กําหนดไว้ใน <TD> ที่
ต้องการใส่รูป
รูปแบบของคําสั่ง HTML การใส่รูปภาพในตาราง
<TD><IMG SRC=”ชื่อไฟล์รูปภาพที่ต้องการ.นามสกุล”>
</TD>

การใส่รูปภาพและใส่เสียงให้เป็นพื้นหลังของเว็บเพจ

การใส่รูปภาพให้เป็นพื้นหลังของเว็บเพจ
การกําหนดพนหลังของเว้ ็บเพจ นอกจากเราจะกําหนดให้เป็นสีพื้นแล้วยังสามารถนํา
รูปภาพมาเปนพื้นหลังได้ด้วยไม่ว่าจะเป็นรูปภาพจากการสแกน หรือได้มาจากกล้องดิจิตอล เพื่อ
ตกแต่งให้เว็บเพจสวยงามขึ้น
รูปแบบคําสั่ง HTML ที่ใช้ในการใส่รูปภาพให้เป็นพื้นหลงของเว้บเพจ
<BODY BACKGROUND=”ชื่อไฟล์รูปภาพที่ต้องการนามาเป็นพื้นหลัง.นามสกุล”>
</BODY>
การใส่เสียงให้ เป็นพื้นหลงของเว็บเพจ
ปัจจุบันมีหลายๆเว็บไซต์ที่พอเราคลิกเขาไปแวะชมแล้วมีเสียงเพลงหรือเสียงดนตรี
บรรเลงหรือเสยงบรรยายหรือทักทายผู้แวะชมนั้น ก็เพราะเขาใส่เสียงเป็นพนหลังของเว็บเพจ
นั่นเองซึ่งเปนเทคนิคหนงที่ทําให้ผู้แวะชมเกิดความสนใจและเพลิดเพลิน โดยจะกําหนดคําสั่งไว้
ในส่วนของ Tag<Head>
รูปแบบคําสั่ง HTML ที่ใช้ในการใส่เสียงให้เป็นพนหลังของเว็บเพจ
<BGSOUND SRC=”ชื่อไฟล์เพลง.นามสกุล” LOOP=“รอบที่กําหนดให้เล่น” >

การกำหนดระยะห่างของรูปภาพ

ปกติข้อความจะติดกับรูปภาพ ซึ่งเราสามารถกําหนดระยะหางของรูปภาพและข้อความเองได้
รูปแบบคําสั่ง HTML ที่ใช้ในการกําหนดระยะหางของรูปภาพ
<IMG SRC=”ชื่อไฟล์รูปภาพ.นามสกุล”
HSPACE=”ระยะห่างของขอบซ้ายและขอบขวาภาพ”
VSPACE=”ระยะห่างของขอบบนและขอบล่างของภาพ”>
ตัวอย่างคําสั่ง
<IMG SRC=”book1.jpg” border=4 HSPACE=”15″ VSPACE=”15″>แสดงข้อความห่างจากรูปภาพ

การกำหนดตำเเหน่งของรูปภาพ

เราสามารถกําหนดตําแหนงของภาพที่นํามาใส่ในเว็บเพจกับคําอธิบายรูปภาพได้
คําอธิบายรูปภาพนั้นวางอยู่ตําแหน่งไหนของรูปภาพ
รูปแบบคําสั่ง HTML ที่ใช้ในการกําหนดตําแหน่งของรูปภาพ
<IMG ALIGN=รูปแบบตําแหน่งรูปภาพ SRC=”ชื่อไฟล์รูปภาพ.นามสกุล”>
รูปแบบการวางตําแหน่งภาพ
รูปแบบ ลักษณะการสดง
CENTER แสดงข้อความตรงกับกึ่งกลางของภาพ
LIFT แสดงภาพทางซ้ายและแสดงข้อความทางขวาของภาพ
RIGHT แสดงภาพทางขวาและแสดงข้อความทางซ้ายของภาพ
TEXTTOP แสดงส่วนบนข้อความตรงกบขอบบนของภาพ
BOTTOM แสดงส่วนลางข้อความตรงกบขอบล่างของภาพ