การออกแบบและพัฒนาเว็บไซต์

จุดประสงค์รายวชิ า

1. เขา้ ใจเกี่ยวกบั หลักการออกแบบเวบ็ ไซต์
2. มที กั ษะในการประยกุ ตใ์ ชโ้ ปรแกรมการสร้างเวบ็ ไซต์
3. มีคณุ ลักษณะนสิ ยั ที่พงึ ประสงค์ และเจตคติทด่ี ใี นวชิ าชีพคอมพิวเตอรธ์ รุ กิจ

สมรรถนะวชิ า

1. แสดงความรูเ้ ก่ยี วกับหลักการออกแบบและพัฒนาเว็บไซต์
2. ออกแบบและพฒั นาเวบ็ ไซตใ์ นงานธุรกจิ

คาอธิบายรายวชิ า

ศึกษาและปฏบิ ัตเิ ก่ียวกับหลักการออกแบบเวบ็ ไซตใ์ นงานธุรกจิ การใช้สี การใชต้ ัวอักษร การ
ใช้
รปู ภาพ การออกแบบกราฟิกและภาพเคลือ่ นไหวสาหรับเวบ็ สว่ นตดิ ตอ่ ผใู้ ช้ แม่แบบเอกสารเวบ็
สรา้ งเวบ็ ไซต์ กรณศี กึ ษา

บทท่ี 1

ความรู้พืน้ ฐานเกย่ี วกบั การออกแบบและพฒั นาเว็บไซต์
๑. ประเภทของเว็บไซต์ แบง่ ออกได้ดงั นี้

๒. โครงสร้างการทางานของเวบ็ ไซต์ ประกอบไปด้วย 4 รูปแบบใหญๆ่ ไดด้ ังนี้
๒.๑ โครงสรา้ งแบบเรยี งลาดบั (Sequential Structure) โครงสร้างประเภทน้ีจะมี

ลกั ษณะเรียงลาดบั แต่ละเวบ็ เพจไปในลักษณะเสน้ ตรง ซ่งึ ใช้แนวคิดเชน่ เดียวกบั หนังสือ ข้อดีของ
โครงสร้างรูปแบบนค้ี ือ ง่ายต่อการดูแลปรบั ปรงุ แก้ไข ส่วนขอ้ เสยี นน้ั กค็ ือ ผใู้ ช้จะตอ้ งผ่านหนา้ เว็บ
เพจท่ไี ม่จาเปน็ ก่อนเพ่อื เข้าสูเ่ ว็บเพจท่ตี ้องการ

๒.๒ โครงสร้างแบบลาดับขัน้ (Hierarchy Structure) โครงสร้างประเภทน้จี ะมีลักษณะ
แนวคดิ คล้ายกับต้นไม้ โดยมจี ุดเริ่มตน้ ทห่ี น้าแรกก่อนแล้วจงึ เข้าส่เู ว็บเพจถัดไป ซึง่ อยู่ในลักษณะ
การแยกออกเปน็ หัวขอ้ ต่างๆ และภายในยงั มหี วั ขอ้ ยอ่ ยท่ีสามารถแยกออกไปได้อีก ขอ้ ดขี อง
โครงสร้างรปู แบบนค้ี อื ง่ายต่อการแยกแยะและการจัดระบบขอ้ มูล ส่วนขอ้ เสยี คือต้องออกแบบให้
มีโครงสร้างทมี่ คี วามสมดุล

๒.๓ โครงสรา้ งแบบตาราง (Grid Structure) โครงสรา้ งประเภทน้มี ีความซบั ซอ้ น เปน็ การ
เพ่ิมความยืดหยุ่นใหเ้ วบ็ เพจใหแ้ ก่ผู้ใช้มากกวา่ สองแบบแรก โดยมีการเชอ่ื มโยงในแต่ละส่วนของ
เวบ็ เพจท่ไี มเ่ ป็นเชิงเส้นตรง เนือ่ งจากผู้ใชส้ ามารถเปลยี่ นทิศทางการเข้าสู่เวบ็ เพจท่ีตอ้ งการได้

๒.๔ โครงสร้างแบบใยแมงมมุ (Web Structure) โครงสร้างประเภทนจี้ ะมคี วามยืดหยนุ่
มากท่สี ุด โครงสร้างรปู แบบน้ีไม่มีโครงสรา้ งทต่ี ายตวั แนน่ อน ทุกหนา้ ในเว็บสามารถเช่อื มโยงไปถงึ
กันไมว่ า่ จะอยู่ในเว็บเพจหน้าใดๆ กส็ ามารถทจี่ ะเชือ่ มโยงไปยังเวบ็ เพจหน้าอนื่ ๆ ได้

๓. ข้นั ตอนการสร้างเวบ็ ไซต์
ขนั้ ตอนที่ 1 วางแผนจดั ทาเวบ็ ไซต์
กาหนด เนอ้ื หา แบ่งเนื้อหาเป็นหมวดหม่ตู ่างๆ ตามลาดับก่อนหลัง และรายละเอยี ด

ของเวบ็ ท่เี ราจะจัดทาเพอ่ื ใหเ้ ห็นมุมมอง คร่าวๆ ก่อนจะลงมือสร้างเวบ็ ไซต์
ขั้นตอนท่ี 2 การกาหนดโครงสรา้ งของเว็บ
คือขน้ั ตอนการกาหนดผังของเวบ็ หรอื ทเี่ รยี กว่า Site Map เพ่อื ใหท้ ราบ

องคป์ ระกอบท้ังหมดของเว็บ ตวั อยา่ งเช่น เรามหี น้าเวบ็ เพจทัง้ หมด 6 เวบ็ เพจ กาหนด Site Map
ไดด้ ังรูป

ขั้นตอนท่ี 3 กาหนดการเช่ือมโยงระหวา่ งเวบ็ เพจ
เปน็ การกาหนดการเชอื่ มโยงในแต่ละหนา้ เวบ็ เพจใหส้ ามารถเช่ือมโยงกลบั ไป

กลับมาระหว่างหนา้ เว็บเพจต่างๆ ได้ จากตวั อยา่ ง จะเหน็ วา่ หน้า index.html สามารถเชอื่ มโยง
ไปยังหนา้ ตา่ งๆไดแ้ ละแต่ละหน้าก็สามารถเชือ่ มโยงกลบั มายงั หน้า index.html ไดต้ วั อยา่ งดงั รปู

ขัน้ ตอนที่ 4 ออกแบบหน้าเวบ็ เพจแต่ละหน้า
ออกแบบโครงสร้างหน้าเว็บเพจในแต่ละหน้าเพอื่ จะไดร้ ูว้ ่าในเวบ็ เพจแต่ละหนา้ มี

รายละเอยี ดอะไรบ้าง ไมว่ ่าจะเป็น ขอ้ มลู รูปภาพ จากน้ันทาการออกแบบหน้าเวบ็ เพจหนา้ ตอ่ ไป

ขัน้ ตอนท่ี 5 สรา้ งเว็บเพจในแตล่ ะหน้า
เมอ่ื ได้ทาการออกแบบหน้าเว็บแตล่ ะหนา้ แล้ว ต่อไปคือข้นั ตอนการสรา้ งหนา้ เว็บ

เพจตามที่ไดอ้ อกแบบไว้ ดว้ ยโปรแกรมต่างๆไมว่ ่าจะเปน็ โปรแกรมประเภทText Editor เพ่อื ใช้ใน
การเขียนชดุ คาส่ัง HTML หรอื โปรแกรมสาเรจ็ รูปเพ่อื ให้แต่ละหนา้ เว็บเพจนาเสนอข้อความ
รปู ภาพ วดี ีโอ และเสยี ง อย่ใู นรปู แบบตามทตี่ ้องการ

ข้นั ตอนท่ี 6 จดโดเมนเนมและหาพื้นท่ีฝากเว็บไซต์
หลังจากเราสร้างเวบ็ ไซตเ์ สรจ็ แล้ว ขน้ั ตอนตอ่ ไป คือ ทาการต้ังชือ่ เวบ็ ไซต์คอื การจด

โดเมนเนม และหาท่ฝี ากเว็บไซต์ ทีเ่ รียกวา่ เว็บโฮสติ้ง (Web Hosting) ท่มี ีทง้ั แบบเสียคา่ ใชจ้ ่าย
และแบบให้พ้ืนทีฝ่ ากเวบ็ ไซต์ฟรี อยา่ งเช่นเว็บไซตท์ ีใ่ หบ้ รกิ ารฝากเวบ็ ไซตฟ์ รี
คือ http://www.thcity.com วธิ ีการใหท้ าการสมคั รตามข้นั ตอนต่างๆบนหน้าเวบ็ เทา่ น้เี รากจ็ ะ
มชี ่ือเวบ็ และพื้นที่ ฝากเวบ็ ไซตแ์ ลว้

ขนั้ ตอนท่ี 7 อพั โหลดเวบ็ ไซต์
หลังจากสมัครบรกิ ารพ้นื ท่ีฝากเวบ็ แล้ว ขนั้ ตอนตอ่ ไป คือการอพั โหลดไฟล์เว็บไซต์

ของเราไปยังเว็บไซตท์ ่ใี หบ้ รกิ ารพืน้ ท่ีฝากเว็บไซตผ์ า่ นโปรแกรม FTP ตา่ งๆ เช่นโปรแกรม
Filezilla แค่น้ีทุกคนทว่ั โลกกส็ ามารถเปดิ ดูเว็บไซตข์ องเราผา่ นระบบเครอื ข่ายอนิ เทอร์เน็ตไดแ้ ลว้

๔. องค์ประกอบทสี่ าคญั ของเว็บไซต์ แบ่งออกเปน็ 3 สว่ นหลกั ๆ คือ

๑. ส่วนหัวของหนา้ (Page Header)
เป็นส่วนท่ีอยตู่ อนบนสุดของหนา้ และเป็นส่วนทสี่ าคัญท่ีสุดของหน้า เพราะเป็นส่วนท่ี

ดงึ ดดู ผู้ชมให้ติดตามเน้อื หาภายในเวบ็ ไซต์ มักใส่ภาพกราฟิกเพื่อสร้างความประทับใจ สว่ นใหญ่
ประกอบด้วย

- โลโก้ (Logo) เป็นสง่ิ ทเี่ วบ็ ไซต์ควรมี เปน็ ตวั แทนของเวบ็ ไซต์ได้เปน็ อย่างดี และยงั ทา
ใหเ้ วบ็ นา่ เชือ่ ถอื

- ช่ือเว็บไซต์ (Name)
- เมนหู ลักหรือลงิ ค์ (Navigation Bar) เป็นจุดเชอ่ื มโยงไปสูเ่ นื้อหาของเวบ็ ไซต์
๒. ส่วนของเน้อื หา (Page Body)
เป็นสว่ นท่ีอยูต่ อนกลางของหนา้ ใช้แสดงขอ้ มลู เนอ้ื หาของเว็บไซต์ ซึง่ ประกอบด้วย
ขอ้ ความ, ตารางข้อมูล ภาพกราฟกิ วีดโี อ และอ่ืนๆ และอาจมเี มนูหลัก หรือเมนเู ฉพาะกลมุ่ วาง
อยู่ในส่วนนี้ด้วย
สาหรับสว่ นเนื้อหาควรแสดงใจความสาคัญที่เป็นหวั เร่อื งไว้บนสดุ ขอ้ มลู มีความกระชับ ใช้
รปู แบบตัวอักษรท่ีอ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบยี บ

๓. สว่ นทา้ ยของหนา้ (Page Footer)
เปน็ สว่ นทอ่ี ยูด่ ้านล่างสุดของหน้า มกั วางระบบนาทางทเ่ี ปน็ ลิงคข์ อ้ ความง่าย ๆ และ

อาจแสดงขอ้ มลู เพิ่มเตมิ เก่ยี วกบั เนือ้ หาภายในเว็บไซต์ เชน่ เจา้ ของเว็บไซต์, ขอ้ ความแสดงลขิ สทิ ธ์ิ
, วิธกี ารติดต่อกบั ผดู้ ูแลเว็บไซต์, คาแนะนาการใชเ้ วบ็ ไซต์ เป็นต้น โดยปกติสว่ นหัวและส่วนทา้ ย
มักแสดงเหมอื นกนั ในทุกหน้าของเว็บเพจ
๕. ข้อมลู ที่ควรกากับไวบ้ นหน้าเวบ็

๖. โครงสรา้ งภาษา HTML
ภาษา HTML ย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาทใ่ี ช้สาหรบั

สรา้ งเวบ็ เพจ โดยจะไดร้ บั การแปลหรอื การแสดงผลโดยเวบ็ เบราเซอร์ซงึ่ สามารถแสดงได้ทง้ั
ข้อความ ภาพ และเสียง

ในไฟลเ์ อกสาร HTML ประกอบดว้ ย สองส่วนใหญ่ๆ คือ ส่วนหัว HEAD และ
สว่ นตัว BODY

1) Tag <HTML> และ </HTML> จะอยู่บรรทดั แรก และ บรรทัดสดุ ท้าย ใน
ไฟล์ HTML เสมอ เปน็ Tag ที่บอกให้รู้วา่ ข้อความ หรือ Tag ทอี่ ยรู่ ะหวา่ ง 2 Tag นี้ เปน็
แบบ HTML

2) Tag <HEAD> และ </HEAD> สว่ นน้จี ะไว้ใส่ รายละเอยี ดต่าง ๆ
เชน่ Tag<TITLE>TodayLoad.com</TITLE> ไว้ใส่ข้อความท่ีตอ้ งการใหป้ รากฎอยู่บน ไตเติ้ล
บาร์ เป็นตน้

3) <BODY ....... > ขอ้ ความทปี่ รากฎอยตู่ รงชว่ งจุดไขป่ ลา
4) Tag <BODY> และ </BODY> ขอ้ ความ หรอื Tag ท่อี ย่รู ะหวา่ ง 2 Tag น้ี เป็นส่วน
ของเนอ้ื หา

บทที่ 2

การจดั การกบั ข้อความ
1. การข้นึ ประโยคย่อหนา้ ใหม่

คาสั่ง <p> เปน็ คาสั่งท่ใี ชส้ าหรับจัดวางตาแหน่งขอ้ ความ (Paragraph Break หรือ
Alignment) แมจ้ ะมีการใช้คาส่ัง <br> ช่วยในการจดั ขอ้ ความขนึ้ บรรทัดใหมแ่ ล้วบางคร้ังยังไม่
ตรงตามรปู แบบที่
ผู้เขยี นโปรแกรมตอ้ งการ เช่น จัดข้นึ บรรทดั ใหม่และเวน้ บรรทัด หรอื จัดย่อหนา้ จดั ข้อความชิด
ซ้าย
จดั ขอ้ ความให้อยูก่ ่ึงกลาง ในโปรแกรม HTML สามารถทาไดโ้ ดยใช้รปู แบบคาสั่งดังนี้

ชอ่ื แทก็ p อยู่ภายใน <body>…….</body>
ตาแหน่งแทก็ <p> …</p>
รูปแบบการใช้

ตัวอย่างการใชง้ าน

<body>
<p align=left>
ตวั อยา่ งขอ้ ความทถี่ ูกจดั ดว้ ยคาสง่ั left

</p>
<p align=center>
ตัวอย่างขอ้ ความท่ีถูกจดั ดว้ ยคาสั่ง center
</p>
<p align=right>
ตวั อยา่ งข้อความทีถ่ ูกจัดดว้ ยคาส่งั right
</p>

</body>

ผลลัพธ์ท่ีได้

2.การปดั บรรทดั ใหม่
โดยปกติขอ้ มูลต่างๆ ทเี่ ราเขียนข้นึ ใน Text Editor เมอื่ นาไปแสดงผลท่บี ราวเซอร์ เราจะ

เห็นวา่
การขึ้นตน้ ขอ้ ความในย่อหนา้ และการตดั คาขนึ้ บรรทดั ใหม่ จะไม่ตรงกับทเ่ี ราจัดรปู แบบไว้ใน
Text Editor เพราะว่าการจดั รปู แบบเอกสารในเว็บเบราวเ์ ซอร์ จะตอ้ งใช้แท็กภาษา HTML
กาหนดเท่านน้ั

ตาแหนง่ แทก็ อย่ภู ายใน <body>…….</body>
รูปแบบการใช้ <br> ข้อความทตี่ ้องการข้ึนบรรทดั ใหม่

ตวั อยา่ งการใช้ <br>

<body>
<br> การข้ึนบรรทดั ใหม่ของข้อความ <br> <br>
<br> คาสง่ั การข้นึ บรรทัดใหม่ ซง่ึ จะใช้คาสง่ั br จะให้ผลเสมือนการกด Enter
<br> บนคยี บ์ อรด์ คาสง่ั br สว่ นใหญ่มกั นยิ มจะวางไว้ในตาแหน่งสดุ ทา้ ยของ

ประโยค
<br> โดยตอ้ งการใหแ้ สดงผลประโยคใหม่ในบรรทดั ต่อมา
<br> คาสั่ง br จะเปน็ คาส่ังทไี่ ม่ตอ้ งมีคาส่งั ปิด (Single Tag)

</body>

ผลลพั ท์ทไี่ ด้ ขอ้ ความที่อยหู่ ลัง <br> จะถูกตดั ขนึ้ บรรทัดใหม่

3.เพิ่มช่องวา่ งขอ้ ความด้วย &nbsp;
ถา้ เราต้องการเวน้ ช่องว่างระหว่างข้อความ สามารถทาไดด้ ว้ ยการแทรกอกั ขระพเิ ศษลงไป

คือ &nbsp; แทน 1 ชุด ตอ่ 1 ชอ่ งว่างตัวอักษร โดยมรี ปู แบบดงั นี้

ช่อื อักขระพเิ ศษ &nbsp;
ตาแหนง่ ที่ใช้ อยู่ภายในแท็ก <body>…</body>
รูปแบบการใช้ ใส่ &nbsp; ตรงตาแหน่งทีต่ ้องการเว้นช่องว่างมากกว่า 1ช่องวา่ ง

ตัวอย่างการใช้งาน

<body>

ประวัตคิ วามเป็นมาอนิ เทอรเ์ นต็ <br>

<p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;อินเทอรเ์ นต็ ซ่งึ เป็นโครงการของ ARPAnet

ซงึ่ เปน็ หนว่ ยงานท่สี ังกัด<br>กระทรวงกลาโหม ของสหรัฐ ถกู ก่อตัง้ เมื่อ

ประมาณ ปีค.ศ.1960(พ.ศ.2503) <br>และไดถ้ กู พฒั นาเรอื่ ยมา

</p>

<p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ค.ศ.1969 ARPA ได้รับทุนสนันสนนุ

จากหลายฝ่าย ซง่ึ หนึ่งในผสู้ นบั สนุนก็คือ Edward Kenedy และเปล่ยี นชือ่ จาก
ARPA เปน็ DARPA พรอ้ มเปลย่ี นแปลงนโยบายบางอย่าง

</p>
</body>
ผลลัพธท์ ไี่ ด้
4.สร้างเส้นคนั่ แนวนอน <hr>
การสรา้ งเส้นคนั่ แนวนอน (Horizontal Line) เพอ่ื แยกเอกสารออกเปน็ ส่วน ๆ ทาให้ง่ายตอ่ การ
อา่ นและดเู ปน็ ระเบยี บมากย่ิงข้ึน โดยมีรูปแบบการใชค้ าสั่ง ดังน้ี
ชอ่ื แทก็ hr
ตาแหน่งแท็ก อยู่ภายใน <body>….</body>
รูปแบบการใช้ <hr>

ตวั อย่างการใช้

<body>

ประวตั ิความเปน็ มาอนิ เทอรเ์ นต็ <br>

<p>

อินเทอรเ์ นต็ ซึ่งเป็นโครงการของ ARPAnet(Advanced Research Projects

Agency Network) ซง่ึ เปน็ หน่วยงานท่สี งั กัด กระทรวงกลาโหม ของสหรฐั

</p>

<hr>

<p>

ค.ศ.1969(พ.ศ.2512) ARPA ไดร้ ับทนุ สนันสนนุ จากหลายฝ่าย ซงึ่ หนึ่งในผสู้ นบั สนนุ

ก็ คอื Edward Kenedy และเปลยี่ นชอื่ จาก ARPA เปน็ DARPA (Defense

Advanced Research Projects Agency)

</p>

</body>

ผลลพั ธ์ท่ไี ด้

เสน้ ค้นั แนวนอนทเ่ี กดิ จากการใช้แท็ก hr
เราสามารถกาหนดคุณสมบตั ิของเส้นคน้ั แนวนอน ได้ด้วยการกาหนดแอตทรบิ ิวตต์ า่ งๆ

สาหรับแทก็ hr ไดด้ งั น้ี

ชือ่ แอตทรบิ ิวต์ คาอธิบาย
width กาหนดความยาวของเส้น มีหนว่ นเปน็ พิกเซล
Size กาหนดความหนาของเสน้ มีหน่วนเปน็ พิกเซล
Noshade กาหนดให้เป็นเส้นค่ันสเี ดียวท้ังเส้น
align กาหนดตาแหนง่ ของเสน้ ใหอ้ ยูต่ ามตาแหน่งท่รี ะบุ
Left=ชิดซา้ ย Right=ชิดขวา Center= ก่ึงกลาง

ตัวอยา่ งการกาหนดคณุ สมบตั ิเสน้ ค่ันแบบตา่ งๆ
<body>
เส้นค่นั ปกติ
<hr>
เสน้ คน่ั ขนาด width=10
<hr width=10>

เส้นคน่ั ขนาด width=100
<hr width=100>

เส้นคน่ั ขนาด width=30 %
<hr width=30%

เส้นคนั่ ขนาด size=5
<hr size=5>
เสน้ คน่ั ขนาด size=10

<hr size=10>

เสน้ คน่ั ขนาด size=5 width=200
<hr size=5 width=200>

เส้นคั่น ขนาด size=5 width=30% align=left
<hr size=5 width=30% align=left>
เส้นค่ัน ขนาด size=5 width=30% align=center noshade
<hr size=5 width=30% align=center noshade>
</body>

ผลลัพธ์ท่ีได้

5.การกาหนดหัวเรอ่ื ง
คือการกาหนดขนาดตัวอกั ษรใหแ้ ตกตา่ งกันเพือ่ แยกแตล่ ะหวั เรื่องอยา่ งชดั เจน เราสามารถกาหนด
ขนาดหวั เรื่องไดถ้ ึง 6 ระดับ ดงั นี้

ชื่อแท็ก hn (n มีคา่ ต้ังแต่ 1-6)
ตาแหนง่ แท็ก อยู่ภายใน <body>…….</body>
รปู แบบการใช้ <hn> หวั เร่อื ง </hn> (n=1-6)

ตัวอย่างการใชง้ าน <hn>

<body>

<h1> Heading1 </h1>
<h2> Heading2 </h2>

<h3> Heading3 </h3> </body>
<h4> Heading4 </h4>
<h5> Heading5 </h5>
<h6> Heading6 </h6>

ผลลัพธ์ท่ไี ด้

6.การกาหนดลักษณะตวั อกั ษร

เราสามารถกาหนดรปู แบบตวั อักษรในข้อความได้หลายแบบ เชน่ ตวั หนา ตวั เอน โดย

รูปแบบทีก่ าหนดจะไม่มีการเปลยี่ นแปลง ถงึ แม้บราเซอร์ทีใ่ ช้เปิดจะเปน็ คนละตัวกนั ลกั ษณะ

ตวั อกั ษรท่ีนยิ มใช้ เช่น

ชื่อแท็ก รปู แบบแท็ก ตวั อยา่ ง

Bold (ตัวหนา) <b>……</b> This is Bold
Italic (ตวั เอยี ง) <i>……</i> This is Italic
Underline (ขดี เสน้ ใต้) <u>……</u> This is Underline
Strike (ขดี ฆ่า) <s>...</s> This Strike
Typewriter Text (ตัว <tt>...</tt> This is Typewriter
พิมพด์ ีด)
Superscript (ตัวอักษรยก) ^... This is Superscript
Subscript (ตัวอักษรหอ้ ย) _... This is Subscript

Big (ตัวอกั ษรขนาดใหญ)่ <big>...</big> This is Big
Small (ตัวอกั ษรขนาดเล็ก) <small>...</small> This is Small

***หมายเหตุ
แทก็ <sup>,<sub>,<big>,<small> สามารถนามาซ้อนกันได้ เพือ่ ให้การกาหนดคา่ มาก

ขึ้นกวา่ เดิมเช่น <big>BIG</big> กบั <big><big>BIG</big></big> คาว่า BIG ตัวท่สี องจะ
ใหญ่กว่าตัวแรกเชน่ กนั ถ้าเปล่ยี นแท็ก <sup> ตัวก็จะยกสงู ขน้ึ แท็ก <sub> ตัวก็จะห้อยตา่ ลง
เป็นตน้

ตัวอยา่ งการใชง้ าน

<body>
การสบู บุร่ี เปน็ <b> อนั ตราย </b> ต่อชีวติ <br>
<i> ตัวอยา่ งเช่น </i> ใครสบู บุรีจะอายุส้นั <u> เฉลี่ย 40 ปี </u> เท่าน้ัน

</body>

บทที่ 3

การแทรกรปู ภาพ
ไฟลภ์ าพทีน่ ิยมนามาใชบ้ นเวบ็ เพจ

ปกติไฟลภ์ าพทใี่ ช้งานอยทู่ วั่ ไป จะมอี ยูห่ ลายนามสกุลด้วยกนั เชน่ tif,bmp,jpg,gif,png ซึ่ง
แต่ละนามสกุลของไฟลภ์ าพเหล่าน้ีจะบ่งบอกถึงคุณภาพของไฟลภ์ าพดังกลา่ ว โดยไฟลภ์ าพท่ีนิยม
นามาใช้บนเว็บจะมดี งั นี้

1. ไฟลภ์ าพชนิด JPEG
ภาพชนิด JPEG มักจะบันทกึ เปน็ นามสกลุ jpeg หรือ jpg ไดร้ ับความนยิ มสงู มาก รองรบั

จานวนสีทมี่ คี วามแตกต่างไดม้ ากถึง 24 บติ (16 ล้านสี) ซึ่งนอกจากจะแสดงผลภาพที่ดแี ล้ว ยงั มี
ความจุต่า ดังนั้น จึงมกั ถูกนาไปใชเ้ พื่อการบันทึกภาพถา่ ยตา่ งๆ

2. ไฟลภ์ าพชนิด GIF
ภาพ GIF รองรับจานวนสสี งู สุดเพียง 8 บติ (256 ส)ี ดังนั้น จึงเหมาะกบั ภาพพื้นฐานทั่วไป

ทรี่ ะดบั ความละเอียดและสีต่างๆ จานวนไม่มาก เช่น ภาพประเภทตราสัญลกั ษณ์ (Logo) ภาพ
การ์ตูนคลิปอารต์ หรือภาพอ่ืนๆ ที่มรี ายละเอยี ดสีไม่ ซบั ซ้อน ซง่ึ นอกจากจะมีความจุตา่ แล้ว
ยงั สามารทาเปน็ ภาพ้นื หลังโปร่งใสและนามาสร้างภาพเคลือ่ นไหวได้

3. ไฟล์ภาพชนิด PNG
เปน็ การนาคุณสมบตั เิ ด่นของ JPG และ GIF มารวมเข้าไวด้ ว้ ยกัน รองรบั สที ีม่ จี านวนมาก

ถงึ 24 บิต เหมอื น JPG อกี ทัง้ ยังสามารถกาหนดพ้นื หลังให้เป็นแบบโปร่งใสไดเ้ ช่นเดียวกบั GIF ใน
ขณะเดยี วกันก็มีความจุตา่

การแทรกรูปภาพ<img src=>
ก่อนจะทาการแทรกภาพเราควรเตรยี มรูปภาพและกาหนดขนาดภาพให้เหมาะสมเสียก่อน

และถา้ ภาพท่ีใชไ้ มใ่ ชภ่ าพทเ่ี ราสร้างเองแต่เป็นการไป หามาเราจะต้องระบุแหลง่ ทมี่ าของภาพดว้ ย
ทกุ ครงั้ แล้วคอ่ ยทาการแทรกภาพลงบนหน้าเว็บโดยสามารถทาได้ดังนี้

ชื่อแทก็ Img ช่ือแอตทริบิวต์ src

ตาแหนง่ การใช้ อยู่ระหวา่ ง <body>…</body>

รูปแบบการใช้ <img src= “ชือ่ ไฟล์รปู ภาพ.นามสกุลภาพ(jpg,gif,png)”>

ตวั อย่าง <img src= “com.jpg”> (ทาการแทรกรปู ภาพช่อื com นามสกุล

ภาพ jpg)

>>>กรณีไฟลภ์ าพกบั ไฟลเ์ ว็บเพจอย่ใู นไดเร็กทอรี่เดียวกัน
รูปแบบการใชค้ าส่ัง <img src="ชื่อไฟล.์ นามสกลุ ">

>>>กรณไี ฟลเ์ วบ็ เพจกบั ไฟล์รปู ภาพไม่อยใู่ นไดเร็กทอรี่ เดยี วกัน
รปู แบบการใช้คาสง่ั <img src="ชอื่ forderทจ่ี ัดเกบ็ ไฟล/์ ช่ือไฟล์.นามสกลุ ">

จะเห็นว่าถ้าไฟลเ์ วบ็ เพจกบั ไฟล์รูปภาพไม่อยู่ในไดเรก็ ทอรี่ เดียวกัน จะต้องระบชุ อื่ ไดเร็กทอ
รต่ี ามดว้ ยเครอ่ื งหมาย “/” แล้วคอ่ ยระบชุ ่ือไฟลแ์ ละนามสกลุ ภาพ

การแทรกขอ้ ความกากับภาพ (alt)
การใสข่ ้อความกากับภาพ(Alternative text)จะเป็นการใสข่ อ้ ความให้กับภาพเพ่อื อธิบาย

เกีย่ วกบั ภาพนั้นๆ ซ่ึงจะปรากฏเมื่อนาเมาสไ์ ปชที้ ี่ภาพกจ็ ะมีข้อความปรากฏข้ึน สามารถกาหนดได้
ดังน้ี

ชือ่ แอตทริบิวต์ alt
ตาแหนง่ การใช้ อยูภ่ ายในแทก็ <img src=>
รูปแบบการใช้ <img src= “ชอ่ื ไฟลร์ ปู ภาพ” alt=“ข้อความกากับภาพ”>

การปรบั ขนาดภาพ (width&height)
ในบางครง้ั ภาพท่ีแทรกลงบนหนา้ เวบ็ เพจอาจมีขนาด เลก็ ไปหรอื ใหญไ่ ป เราสามารถปรบั ขนาด
ของรูปภาพได้ดังนี้
ช่อื แอตทรบิ วิ ต์ width กบั height
ตาแหน่งการใช้ อยภู่ ายในแท็ก <img src=>
รปู แบบการใช้ <img src= “ชื่อไฟล์รปู ภาพ” width= “ความกว้าง” height=“ความสูง”

>
ค่าทก่ี าหนดใหใ้ ช้ กาหนดคา่ เปน็ จานวนพกิ เซลหรือเป็น %

1. ตวั อยา่ งการปรบั ความกว้างของภาพด้วย width
<body>

<img src="c1.jpg">
ภาพขนาดปกติ <img src="c1.jpg" width="200">
ภาพขนาด width=200
</body>

2. ตัวอยา่ งการปรับความกวา้ งและความสงู ของภาพ
<body>

<img src="c1.jpg">
ภาพขนาดปกติ <img src="c1.jpg" width="200" height="400">
ภาพขนาด width=200 height=400
</body>

การใส่กรอบหรือเส้นขอบรปู ภาพ (border)
ถ้าตอ้ งการใสเ่ ส้นกรอบใหก้ บั รปู ภาพ สามารถทาไดด้ งั น้ี

ชือ่ แอตทรบิ วิ ต์ border
ตาแหน่งการใช้ อย่ภู ายในแท็ก <img src=>
รปู แบบการใช้ <img src=“ชื่อไฟลร์ ปู ภาพ” border=“ความหนาของกรอบ” >
ค่าที่กาหนดให้ใช้ กาหนดคา่ เป็นจานวนพิกเซล

ตัวอย่างการใส่เส้นกรอบหรือเสน้ ขอบให้กับรูปภาพ
<body>

<center>
<img src="c1.jpg"> ภาพขนาดปกติ<img src="c1.jpg" border="5"> ปรับความหนาเส้น
กรอบขนาด 5 px

</center>
</body>

การจัดตาแหนง่ รูปภาพ (align) ร่วมกับขอ้ ความ
ในกรณที ่ีเราตอ้ งการจดั ตาแหนง่ รปู ภาพกบั ขอ้ ความทอี่ ยใู่ นบรรทัดเดยี วกันให้อยใู่ น

ตาแหน่งที่เราต้องการ สามารถกาหนดได้ดังนี้

ชือ่ แอตทรบิ ิวต์ align จดั
ตาแหนง่ การใช้ อยูภ่ ายในแท็ก <img src=>
รูปแบบการใช้ <img src=“ชอ่ื ไฟลร์ ปู ภาพ” align=“คา่ ทก่ี าหนดให้ใช้” >
คา่ ทก่ี าหนดให้ใช้ bottom = ให้ขอบลา่ งภาพเสมอขอบล่างข้อความleft =

ภาพอยู่ด้านซ้าย
middle = ใหก้ ่งึ กลางภาพเสมอขอ้ ความ
right = จดั ภาพอย่ดู ้านขวา
top = ให้ขอบบนภาพเสมอขอบบนขอ้ ความ

ตัวอยา่ งการจดั ตาแหน่งรูปภาพรว่ มกบั ขอ้ ความ
<body>
<h3> การจัดตาแหน่งรูปภาพกับขอ้ ความ </h3>
<img src="c1.jpg" align="bottom"> bottombottom
<br>
<img src="c1.jpg" align="middle"> middlemiddle
<br>
<img src="c1.jpg" align="top"> toptop
</body>

การเพ่มิ ระยะระหวา่ งรูปภาพกบั ข้อความ (vspace&hspace)
การเพมิ่ ระยะห่างของภาพกบั ขอ้ ความสามารถกาหนดได้ 2แบบ คอื การกาหนดระยะหา่ ง

แนวต้งั (Vertical space) ใชแ้ อตทริบวิ ต์ vspace เปน็ การกาหนดด้านบนกบั ด้านลา่ ง และการ
กาหนดระยะหา่ งแนวนอน (Honrizontal space) ใชแ้ อตทริบวิ ต์ hspace เปน็ การกาหนด
ดา้ นซ้ายและขวา

ชื่อแอตทริบวิ ต์ vspace และ hspace
ตาแหน่งการใช้ อยู่ภายในแท็ก <img src=>
รูปแบบการใช้ <img src=“ชอ่ื ไฟลร์ ูปภาพ” vspace=“ระยะห่างขอบบน

ล่าง” hspace=“ระยะหา่ งขอบซา้ ยขวา” >
คา่ ทีก่ าหนดให้ ขนาดของความห่างขอบกาหนดเป็นพกิ เซล
ใช้

ตวั อยา่ งการใช้งาน
<body>
<img src="c1.jpg" vspace="10" hspace="70">
hspace=ซ้าย ขวา<br>
vspace=บน ลา่ ง </body>
การแสดงภาพเป็นพ้ืนหลัง (background)

การนาภาพมาตกแต่งเปน็ ภาพพ้ืนหลังในหนา้ เวบ็ เพจเพอื่ เพ่ิมความสวยงามให้หน้าเว็บเพจ
แตภ่ าพทนี่ ามาทาเป็นภาพพื้นหลงั ควรเลอื กภาพท่ีไม่มีรายละเอียดมากจนเกนิ ไปหรอื สไี มส่ ับซ้อน
จนเกินไป เพอื่ จะไดไ้ ม่ทาให้ขอ้ ความกบั ภาพพืน้ หลังกลืนกนั จนไมส่ ามารถอ่านเน้ือหาบนหนา้ เวบ็
เพจไดต้ ัวอยา่ งการใช้งาน

ชอ่ื แอตทริบิวต์ background

ตาแหนง่ ของแอตทริ อยู่ในแท็กเปิด <body>

บิวต์

รปู แบบการใช้ <body background=“ชื่อไฟลร์ ูปภาพ” >

<body background="f2.jpg">
<b> การแทรกภาพเป็นพน้ื หลงั หน้าเว็บเพจ </b>

</body>

ศัพทเ์ บ้ืองต้นเกี่ยวกบั เว็บไซต์

อนิ เตอรเ์ นต็ (Internet) เปน็ เครือข่ายคอมพิวเตอร์ทใ่ี หญท่ ่ีสุดในโลกซง่ึ รวมเอาเครือข่ายย่อยเป็น
จานวนมากตอ่ เชื่อมภายใตม้ าตรฐานเดียวกันจนเปน็ เครือขา่ ยคอมพวิ เตอรข์ นาดใหญ่ ทาให้ทวั่
โลกเชือ่ มโยงกันเปน็ เครอื ข่ายเดียวกนั ได้ในแพลตฟอรม์ ของ เวิลด์ ไวด์ เว็บ (World Wide Web)

เวลิ ด์ ไวด์ เว็บ (World Wide Web – www) หรอื เรียกยอ่ ๆ วา่ เว็บ (web) เปน็ อินเตอร์เน็ต
ชนิดหนึง่ ทอี่ ยู่ในรูปแบบของกราฟิกและมลั ตมิ เี ดีย ซงึ่ ประกอบดว้ ยข้อความ (Text) ภาพ
(Graphic) เสยี ง (Sound) และภาพเคลื่อนไหว (Movie) เป็นต้น ผใู้ ช้ท่วั ไปสามารถเข้าไปในเวบ็ ได้
ง่าย และจะได้รับข้อมูลครบถว้ นปจั จุบนั ถา้ พดู ถงึ อนิ เตอรเ์ น็ต คนทัว่ ไปจะเข้าใจว่าหมายถึงเว็บ
ทง้ั ทจี่ ริงแลว้ เวบ็ เป็นสว่ นหนึง่ ของอินเตอรเ์ นต็ เทา่ น้ัน

http (HyperText Transfer Protocol: HTTP) เป็นโปรโตคอลสาหรบั เปิดดูขอ้ มลู
จาก www เรียกใช้งานไดโ้ ดยระบุ http:// และตามดว้ ย URL ในชอ่ งกรอก Address ดา้ นบน
ของโปรแกรมเวบ็ บราวเซอร์

URL (Uniform Resource Locator) คอื ข้อความทีบ่ อกตาแหนง่ ของข้อมลู ใน Internet ไมว่ า่ จะ
เปน็ Web page, File ประเภทต่างๆ เช่น รูปภาพ เสยี ง

URL ประกอบดว้ ย โปรโตคอล + domain name + (directory ทีเ่ กบ็ ไฟล์)
ชอื่ ไฟล์ เช่น http://www.enjoyday.net/webtutorial/css/index.html

http://www.enjoyday.net/images/logo.jpg

โดเมนเนม (Domain Name) หรือที่เข้าใจกันท่วั ไป คอื ช่อื เรยี กเวบ็ ไซต์นน่ั เอง การจดทะเบยี น
โดเมนเนมจงึ เป็นการลงทะเบยี นชือ่ ให้กับเว็บไซตข์ องเราในโลกอนิ เตอร์เน็ต โดเมนเนมทขี่ อจด
ทะเบยี นจะต้องไม่ซ้ากับคนอ่ืน และควรต้งั ให้เกย่ี วข้องกับเนือ้ หาภายในเว็บไซต์ หรอื เกยี่ วขอ้ ง
กบั สินค้าและ บริการ ตลอดจนใช้คางา่ ย ๆ ให้จาได้ เชน่ sanook.com และ yahoo.com เปน็
ตน้

เว็บไซต์ (Website) และเว็บเพจ (Webpage)
เอกสารหรอื ส่วนท่ตี ดิ ต่อกับผูใ้ ช้ในเว็บ เรียกวา่ เว็บเพจ (Webpage) หมายถงึ เอกสาร

หน่ึงหนา้ การใชเ้ วบ็ กค็ อื การเปิดอ่านหรอื เปดิ ใชเ้ วบ็ แต่ละหนา้ น่ันเอง เว็บเพจอาจสร้างขึ้นดว้ ย
ภาษาคอมพิวเตอร์ เชน่ HTML, ASP, PHP, JAVA ฯลฯ

เมื่อนาเวบ็ เพจหลาย ๆ หน้ามารวมกนั และระบอุ ย่ใู นอนิ เตอร์เน็ต หรือยอู ารแ์ อล
(Uniform Resource Locator – URL) ให้กบั เวบ็ เพจกลุ่มนน้ั จะเรียกวา่ เวบ็ ไซต์ (Web Site)

เม่อื เปดิ เว็บไซต์ขึน้ มาจะพบกบั หนา้ แรกของเวบ็ ไซต์ ซง่ึ เรียกวา่ โฮมเพจ
(Homepage) ซ่ึงเปน็ หน้าท่สี าคัญท่สี ดุ และเปน็ หนา้ ทจี่ ะเชื่อมโยงไปยงั เวบ็ เพจและเวบ็ ไซต์อน่ื ๆ

เวบ็ เบราเซอร์ (Web Browser) คอื โปรแกรมทีใ่ ชส้ าหรบั เปดิ เว็บเพจหรอื รบั ส่งข้อมูลตามท่เี ครื่อง
ลูกขา่ ยร้องขอเม่อื เราเปดิ เข้าส่อู นิ เตอร์เน็ต เวบ็ เบราเซอรท์ ่ีไดร้ ับความนยิ มปัจจุบันมหี ลาย
โปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google
Chrome

เวบ็ เซฟิ เวอร์ (Web server) คือ เครื่องคอมพวิ เตอร์ทท่ี าหนา้ ท่ีให้บริการข้อมูลใน www ซึง่ เก็บ
Web page และโปรแกรมจัดการบริการ เมื่อผใู้ ชต้ ้องการดู Web page ทีอ่ ยู่ในเคร่อื ง Server ก็
จะใช้ Web browser เรยี กขอข้อมูลโดยระบุท่ีอย่ขู องขอ้ มลู ในลกั ษณะทเี่ รียกว่า URL

อพั โหลด (Upload) คือ การส่งข้อมลู จากเครือ่ งของเราไปยัง Web Server เมอื่ เราสร้าง Web
page แต่ละหน้าแลว้ ตอ้ งส่งขอ้ มูลไปเกบ็ ไวท้ ี่ Web Server ทเ่ี ป็นเครอื่ งคอมพวิ เตอรท์ ีใ่ ห้บริการ
ข้อมูล www โดยอาศัยโปรแกรม FTP.

Search engine เปน็ เคร่ืองมือหรือโปรแกรมในการคน้ หาเวบ็ ตา่ งๆ โดยมกี ารเก็บ รายช่ือเว็บไซต์
และขอ้ มูลท่เี กย่ี วข้องตา่ งๆ ของเว็บไซต์ และนามาจัดเกบ็ ไว้ใน server เพื่อใหส้ ามารถค้นหาและ
แสดงผลไดส้ ะดวกรวดเรว็ เช่น google.com, yahoo.com, bing.com, altavista.com,
sanook.com เป็นตน้

จดั ทาโดย

1.นางสาวธัญลกั ษณ์ สุขเทศ
2.นายพีระพฒั น์ ม่นั ใจ
3.นายศุภกติ ต์ิ สทุ ธิภาค
4.นางสาวเกษร วงษ์บิน
5.นางสาวปนัดดา อม่ิ เงนิ
6.นางสาวณัฏฐณชิ า โพชะโน
7.นายกติ ติวฒั นา คงชะเวช
8.นางสาวพรทพิ ย์ บุตโรบล
9.นางสาวจฑุ ามาศ เจริญศักดิ์
10.นางสาวอัญรตั น์ พลเวช