เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
•
4 likes•638 views
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
Similar to เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น (20)
More from Khon Kaen University
More from Khon Kaen University (20)
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
- 2. โครงสร้างการทางานของ HTML การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้ 1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทางาน ในระบบ Windows 2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คาสั่งในการจัดรูปแบบ หรือตกแต่ง เอกสาร HTML ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้ <html> <head> <title> ส่วนชื่อเอกสาร </title> </head> <body> tag คาสั่ง </body> </html> คาสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า "<" ตามด้วย ชื่อคาสั่งและปิดท้ายด้วย เครื่องหมายมากกว่า ">" เป็นส่วนที่ทาหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคาสั่งของ HTML ส่วนใหญ่จะ อยู่เป็นคู่ มีเพียงบาง คาสั่งเท่านั้น ที่มีรูปแบบคาสั่งอยู่เพียงตัวเดียว ในแต่ละคาสั่ง จะมีคาสั่งเปิดและปิด คาสั่งปิดของแต่ละ คาสั่งจะมี รูปแบบเหมือนคาสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นาหน้าคาสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคาสั่งเปิดบาง คาสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่ <tag> เราเรียกว่า tag เปิด </tag> เราเรียกว่า tag ปิด Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่ อยู่ใน tag นี้ชิดซ้าย not case sensitive หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน คาสั่งในหัวข้อของ head (Head Section) Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อ ผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการค้นหา (Keyword) โดยมี Tag สาคัญ คือ
- 3. TITLE ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความ ในส่วนนี้จะแสดงผลใน title bar ของ web browser META Tag META จะไม่ปรากฏผลบนบราวเซอร์ แต่จะเป็นส่วนสาคัญ ในการจัดอันดับบัญชีเว็บ สาหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google, yahoo) charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows- 874 ก็ได้ ตอนนี้แนะนาให้ใช้เป็น charset=utf-8 Keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คาได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคา การพิมพ์ชุดคาสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทาได้อิสระ โปรแกรมบราวเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง พื้นที่หลักในการทางาน (Work Space) พื้นที่สาหรับการทางานจะมีอยู่ 2 ส่วนหลักๆ คือ ส่วน Code และ Design Code Design
- 4. การใส่รูปภาพ, การใส่สี หรือการนาภาพมาเป็น Background การนารูปภาพมาใช้งาน โดยไปคลิกที่ Insert > Image แล้วเลือกรูปภาพที่ต้องการเพิ่มเข้ามาในไฟล์เรา แล้วกด OK หากมีหน้าต่างนี้เด้งขึ้นมา ให้นักเรียนไม่ต้องใส่ค่าใดๆเลย แล้วให้กด OK ก็จะได้ภาพที่นักเรียนต้องการแทรกเข้ามา
- 5. การแทรกรูปภาพในแบบที่ 2 (Rollover Image) ในการแทรกภาพแบบ Rollover Image เป็นการทาให้ภาพนั้นมีการเปลี่ยนแปลงเมื่อนาเมาส์ไปวางบนภาพนั้น โดยเรา จะต้องทาการสร้างภาพนั้นมา 2 ภาพก่อน โดยภาพแรกคือภาพที่โชว์ทั่วไป และ ภาพที่ 2 จะเป็นภาพที่มีการเปลี่ยนแปลง หลังจากที่นาเมาส์นั้นไปวางบนภาพที่ 1 วิธีการแทรกภาพแบบ Rollover Image โดยเริ่มจากไปกดที่ Insert > Image Objects แล้วเลือก Rollover Image เมื่อมีหน้าต่างเด้งขึ้นมา โดยในช่อง Original image ให้นักเรียนกดที่ช่อง Browse… เพื่อเลือกรูปภาพที่ 1 ซึ่งเป็นรูปที่ จะโชว์ก่อนเอาเมาส์มาวางบนภาพ และในช่อง Rollover image ให้นักเรียนกดที่ช่อง Browse… เพื่อเลือกรูปที่ 2 ซึ่งเป็นรูปที่ เปลี่ยนจากรูปแรก หลังจากเอามาเมาส์มาวางบนภาพแล้ว หลังจากนั้นให้นักเรียนกดที่ปุ่ม OK ก็จะได้ภาพที่เป็นแบบ Rollover Image
- 6. การใส่สีให้กับภาพพื้นหลัง ในการสร้าง Home Page นั้นหากปล่อยพื้นหลังให้เป็นสีขาว อาจจะทาให้เว็บเพจเราขาดความน่าสนใจ หรือไม่มี จุดเด่น ดังนั้นการใส่สีให้กับพื้นหลังจึงมีความสาคัญอย่างมาก โดยวิธีการใส่สีให้กับพื้นหลังนั้น มีวิธีการดังนี้ โดยให้นักเรียนไปคลิกที่ Page Properties… ซึ่งจะอยู่ด้านล่างของหน้าจอโปรแกรม โดยให้นักเรียนคลิกที่ช่องสี่เหลี่ยม หลังข้อความ Background color แล้วเลือกสีที่ต้องการ แล้วกดที่ปุ่ม OK
- 7. การนาภาพมาเป็นพื้นหลัง โดยให้นักเรียนไปคลิกที่ Page Properties… ซึ่งจะอยู่ด้านล่างของหน้าจอโปรแกรม โดยให้นักเรียนคลิกที่ Browser… ของ Background image แล้วเลือกภาพที่ต้องการ แล้วกดที่ปุ่ม OK แล้วเลือกรูปภาพตามที่ต้องการ แล้วกดที่ปุ่ม OK
- 8. การพิมพ์ตัวอักษร และจักรูปแบบข้อความ ในการพิมพ์ข้อความลงในเว็บเพจเรา เราสามารถพิมพ์ลงไปได้เลย และหากนักเรียนต้องการที่จะจัดรูปแบบของ ข้อความนั้นๆ ให้นักเรียน ลากครอบคลุมดาข้อความนั้นๆก่อน หลังจากนั้นให้นักเรียนให้นักเรียนกดเลือกที่ Size นักเรียนสามารถปรับไซต์ได้ตามต้องการ เพื่อทาการเลือกสีของตัวอักษร สาหรับตั้งค่าตัวหนา ตัวเอียง จัดซ้าย จัดกลาง จัดขวา ตามลาดับ
- 9. การเพิ่ม Font ในการสร้างเว็บเพจบางครั้ง font ที่ทางโปรแกรมมีให้อาจจะไม่ถูกใจ หรือสวยงามตามที่ต้องการ ดังนั้นเราจึงหา font เพิ่มเติมจากที่อื่น แล้วเพิ่มเข้ามาในโปรแกรมเพื่อสาหรับสร้างเว็บเพจเรา โดยมีวิธีการเพิ่ม font ดังนี้ คือให้คลิกที่ font > Edit Font List… จากนั้นจะเด้งหน้าต่างนี้ขึ้นมา แล้วพิมพ์ค้นหา font ที่เราต้องการในช่อง (1) เมื่อเจอแล้วให้กด Add font เข้าไปที่ปุ่ม (2) เมื่อได้ตามต้องการแล้วให้กดปุ่ม OK 1 2