Issuu on Google+

สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

: การเขียนเว็บเพจด้วยภาษา

ใบเนื้อหา แผ่นที่ : 1

HTM

หน้า ที่ 1

รหัสวิชา : 3204-2201งาน : งานการสร้างโครงสร้าง HTML

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

ภาพที่ 1 หน้าเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากๆ 1.1.2การออกแบบหน้าเว็บไซต์ทเี่ น้นภาพกราฟิกเป็นหลัก เป็นการออกแบบเว็บไซต์ที่มีภาพกราฟิกสวยงามถูกจัดวางไว้ในหน้าโฮมเพจ ซึ่งแตกต่างจากข้อแรกมาก เพราะจะไม่ค่อยมีข้อความในเว็บเพจแต่จะเป็น การ Link ที่ภาพเพื่อเข้าไปยังหน้าเว็บเพจอื่นๆ ต่อไป การสร้างเว็บไซต์แบบนี้ จะใช้โปรแกรม Photoshop สาหรับตกแต่งภาพก่อนนาไปใช้บนหน้าเว็บ


ภาพที่ 2 หน้าเว็บไซต์ที่เน้นกราฟิกเป็นหลัก


สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

: การเขียนเว็บเพจด้วยภาษา

ใบเนื้อหา

หน้า ที่

แผ่นที่ : 2

HTM

2

รหัสวิชา : 3204-2201งาน : งานการสร้างโครงสร้าง HTML 1.1.3ออกแบบหน้าเว็บไซต์ที่มีทงั้ ภาพ และเนื้อหา เป็นการออกแบบหน้าเว็บไซต์ที่ผสมกันระหว่าง 1 และ 2 ข้างต้น โดย จะเน้นการจัดวางภาพที่ตัดแบ่งเป็นชิ้นเล็กๆ ก่อน หลังจากนั้นจึงใส่ข้อความ ประกอบลงภาพ เพื่อให้เว็บไซต์ของเรามีความสวยงามด้วยภาพกราฟิกที่ นามาประกอบ และใส่เนื้อหาได้อย่างสมบูรณ์ด้วย

ภาพที่ 3 หน้าเว็บไซต์ที่มีทั้งภาพและเนื้อหา กาหนดขนาดของเว็บเพจ ขนาดของหน้าจอคอมพิวเตอร์ในปัจจุบันมีหลายขนาด เช่น 14” 15” และ 17” เป็นต้น ซึ่งมีขนาดแตกต่างกัน ทาให้การแสดงผลเว็บไซต์แตกต่าง กันด้วย เราจึงควรกาหนดขนาดเว็บไซต์ให้มีรูปแบบมาตรฐาน เพื่อทาให้การ แสดงผลได้อย่างครบถ้วนชัดเจน โดยขนาดของเว็บไซต์ที่เห็นกันมาก มีอยู่ 2 ขนาด คือ 1. ขนาดของเว็บไซต์แบบ 800x600 pixels ซึ่งเป็นขนาดมาตรฐานที่ใช้ กับหน้าจอคอมพิวเตอร์ได้ทุก ๆ ขนาด 2. ขนาดของเว็บไซต์แบบ 1024x768 pixels ซึ่งขนาดแบบนี้กาหลัง ได้รับความนิยมเพิ่มมากขึ้น เนื่องจากจอคอมพิวเตอร์ในปัจจุบันมีราคา ถูกลงมาก ดังนั้นผู้ใช้คอมพิวเตอร์จึงหันไปใช้จอคอมพิวเตอร์ที่มีขนาด ใหญ่ขึ้นด้วยเหมือนกัน


1.2 ขัน ้ ตอนการสร้างเว็บไซต์ เราสามารถนาไฟล์เว็บเพจมาร้อยเรียงและนาเสนอเป็นกลุ่มข้อมูลที่ เรียกว่า เว็บไซต์ ซึ่งจะมีวิธีการคิดตั้งแต่กาหนดโครงร่างของเว็บเพจ จนถึง การอัพโหลดเว็บขึ้นบนอินเทอร์เน็ต ทั้งหมด 6 ขั้นตอน 1. กาหนดโครงร่างของเว็บไซต์ ในการสร้างเว็บ เราจะเริ่มต้นด้วยการกาหนดผังของเว็บ หรือเรียกว่า Site Map ก่อน 2. กาหนดการเชื่อมโยงระหว่างเว็บเพจ เรากาหนดให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับมา ระหว่างหน้าต่างๆ ได้ โดยจะแสดงชื่อไฟล์ html แต่ละไฟล์ที่มีการ เชื่อมโยงสัมพันธ์กัน


สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

: การเขียนเว็บเพจด้วยภาษา

ใบเนื้อหา

หน้า ที่

แผ่นที่ : 3

HTM

3

รหัสวิชา : 3204-2201งาน : งานการสร้างโครงสร้าง HTML 3. ออกแบบเว็บเพจแต่ละหน้าภายในเว็บไซต์ เราสามารถออกแบบเว็บเพจในแต่ละหน้าให้สวยงาม เพื่อเตรียมภาพที่ จาเป็นสาหรับจัดวางบนหน้าเว็บเพจ เช่น การออกแบบโลโก้ เพื่อเป็น ลักษณ์ให้กับเว็บไซต์ของเราก่อน จากนั้นจึงทาการออกแบบหน้าเว็บ เพจในแต่ละหน้าตามลาดับ 4. สร้างเว็บเพจแต่ละหน้า เมื่อวางรูปแบบของเว็บเพจในแต่ละหน้าแล้ว จากนั้นเราก็จะทาการ เขียนโปรแกรมภาษา HTML เพื่อกาหนดให้แต่ละเว็บเพจนาเสนอ ข้อความ ภาพ หรือวิดีโอ ให้อยู่ในรูปแบบตามที่เราต้องการจะนาเสนอ นั่นเอง 5. ลงทะเบียนขอพื้นที่เว็บไซต์ฟรี หลังจากออกแบบเว็บไซต์จนเสร็จสมบูรณ์ ขั้นตอนต่อไป คือ การ เผยแพร่เว็บไซต์นั้นสู่เครือข่ายอินเทอร์เน็ตให้คนอื่นๆ สามารถเข้ามา เยี่ยมชมเว็บไซต์ของเราได้ วิธีการก็คือ การนาเว็บไซต์ที่เราสร้างขึ้น ไปไว้บนพื้นที่ที่ให้บริการ (Web Hosting) ซึ่งมีทั้งพื้นที่ที่เราต้องจ่าย ค่าบริการ และพื้นที่ที่เราสามารถนาเว็บไซต์ไปฝากได้ฟรี 6. อัพโหลดเว็บไซต์ หลังจากที่ได้สร้างหน้าเว็บไซต์จนเสร็จแล้วต่อไปเราจะทาการอัพโหลด เว็บไซต์ด้วยโปรแกรม CuteFTP เพื่อให้คนทั่วโลกสามารถดูเว็บไซต์ ของเราได้ผ่านเครือข่ายอินเทอร์เน็ต

1.3 โครงสร้าง HTML HTML ย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาหลัก ที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสาร ไฮเปอร์เท็กซ์ (Hypertext Document : ข้อความในเอกสารที่เชื่อมโยงถึง ข้อมูลต่างๆ ได้) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee


HTML= Hypertext + SGML HTML เกิดจากการสร้างเอกสาร Hypertext โดยพัฒนาจากภาษา SGML ž - HTML 1.0 เกิดขึ้นในปี 1993 โดย Tim Berners-Lee และ Dave Raggett ได้กาหนดให้เอกสาร HTML ต้องไม่ทาให้เอกสารที่สร้างนั้น อ่านไม่ได้ ž - HTML 2.0 เกิดขึ้นในปี 1995 ถูกพัฒนาขึ้นโดย IETF (Internet Engineering Task Force) สามารถเปิดแสดงผลกับบราวเซอร์ที่ใช้งาน ไม่ได้ ž - HTML 3.0 ในปี 1995 เพิ่มการทางานเกี่ยวกับตาราง การปรับ ข้อความล้อมรอบภาพ และย้อนกลับไปดูเว็บเพจที่เคยชม


สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

: การเขียนเว็บเพจด้วยภาษา

ใบเนื้อหา

หน้า ที่

แผ่นที่ : 4

HTM

4

รหัสวิชา : 3204-2201งาน : งานการสร้างโครงสร้าง HTML ž - HTML 3.2 ในปี 1996 ได้เพิ่ม Element และ Attribute ที่ทางาน ร่วมกับหลายๆ บราวเซอร์ ž

- HTML 4.0 ในปี 1997 ได้พัฒนาและดูแลมาตรฐานของ HTML ด้วย องค์กรกลางคือ W3C มี Style sheet,Frame แสดงภาพและเสียง การ สร้างฟอร์ม และใช้งาน Script แบบต่างๆ

ž

- HTML 4.01 ในปี 1997 องค์กร W3C ได้หยุดพัฒนา HTML และ พัฒนา XHTML แต่ยังใช้โปรแกรมภาษา HTML ได้เช่นเดิม 1.3.1 ลักษณะของภาษา HTML

องค์ประกอบของภาษา HTML สามารถแบ่งออกเป็น 2ส่วน คือ ส่วนที่ เป็นข้อความทั่วไป และความที่เป็นคาสั่งที่ใช้ในการกาหนดรูปแบบของ ข้อความที่แสดง รูปแบบ <แท็กเปิด> ข้อความ </แท็กปิด>

เช่น <title>….. </title>

1.3.2 โครงสร้างของ HTML

<html>….</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งบ่งบอกว่านี่คือภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสารในแต่ละแฟ้ม


<head> ….</head> เป็นส่วนกาหนดรายละเอียดหัวเอกสาร HTML เช่น - กาหนดชื่อเว็บเพจ โดยใช้แท็ก <title>…</title> ซึ่งข้อความภายใน แท็กนี้จะเป็นชื่อหัวเรื่องเว็บเพจที่ต้องการ ซึ่งจะต้องมีความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะไปปรากฏที่ title bar ของบราวเซอร์ที่เรา ใช้งานอยู่ และปรากฏบน Bookmark ของโปรแกรมบราวเซอรด้วย - กาหนดรูปแบบของข้อความและเลย์เอาท์ในหน้าเว็บเพจ ที่เรียกว่า สไตล์ชีท - การแทรก หรือใส่สคริปต์โปรแกรม เช่น javaScript


สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

ใบเนื้อหา

: การเขียนเว็บเพจด้วยภาษา

หน้า ที่

แผ่นที่ : 5

HTM

5

รหัสวิชา : 3204-2201งาน : งานการสร้างโครงสร้าง HTML <body>…</body> ส่วนนี้เป็นส่วนของเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ ตาราง และการเชื่อมต่อไปยังเอกสารอื่นๆ ที่จะไปแสดงผลที่เว็บบราวเซอร์

1.4 เครือ ่ งมือทีใ ่ ช้สร้างเอกสาร HTML ในการสร้างเว็บเพจด้วย HTML นั้น เราจะต้องมีเครื่องมือที่ใช้ในการ เขียนและแก้ไขโค้ด เรียกว่า Text Editor ซึ่งเป็นโปรแกรมที่ใช้สาหรับสร้าง และแก้ไขข้อความ ปัจจุบันมีอยู่มากกมายที่ใช้สาหรับแก้ไขโค้ดHTML โด���เฉพาะ เช่น Notepad, EditPlus และ Dreamweaver

1.5 การเขียนเว็บเพจด้วยภาษา HTML ต่อไปนี้เป็นการเขียนภาษา HTML โดยเริ่มต้นเปิดโปรแกรม EditPlus แล้วเขียนเอกสาร ดังรูป

ภาพที่ 4 พิมพ์โครงสร้าง HTML ในโปรแกรม EditPlus วิธก ี ารบันทึกเอกสาร HTML 1. เมื่อพิมพ์โปรแกรมเสร็จแล้ว เลือก File--> save as 2. บันทึกเป็นไฟล์นามสกุล .htm หรือ .html


ภาพที่ 5 การบันทึกเอกสาร HTML


สาขาวิชา : คอมพิวเตอร์ธุรกิจ ชื่อวิชา

: การเขียนเว็บเพจด้วยภาษา

ใบเนื้อหา

หน้า ที่ 6

แผ่นที่ : 6

HTM รหัสวิชา : 3204-2201งาน

: งานการสร้างโครงสร้าง HTML วิธีการดูผลลัพธ์ หลังจากที่เราบันทึกเอกสารเรียบร้อยแล้ว ให้คลิกที่เครื่องมือ โปรแกรม EditPlus เพื่อดูตัวอย่างการแสดงผล ดังภาพ

ภาพที่ 6 ผลลัพธ์ในการแสดงผล

ที่



HTML