สรุปเนื้อหา การสร้างเว็บไซต์โดยใช้ภาษา HTML
ชั้นมัธยมศึกษาปีที่ 3 ครูสุเมธ ราชประชุม
HTML ย่อมาจากคำว่า "HyperText Markup Language" เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่าง ๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ
ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย
การสร้างเว็บเพจ
เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ
- TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น
- ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ
ขั้นตอนในการสร้างเว็บเพจ
- เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วบันทึกเป็นไฟล์นามสกุล .htm หรือ .html
- เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor
โครงสร้างของภาษา HTML
ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่าย ๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag …
ลักษณะของภาษา Html
- คำสั่งของภาษา Html จะอยู่ในเครื่องหมาย < > เสมอ
- ในแต่ละคำสั่ง (tags) ส่วนใหญ่จะมีคำสั่งเปิด < > และคำสั่งปิด </ > เสมอ เช่น ข้อความ
- สามารถใช้อักษรตัวใหญ่ หรือตัวเล็กก็ได้ เช่น
หรือ
จะได้ผลลัพธ์เช่นเดียวกัน ข้อตกลงในการอ่าน
- ข้อความที่เป็นตัวหนาจะเป็นคำสั่งภาษา Html ตัวธรรมดาจะเป็นข้อความธรรมดาที่ไม่เกี่ยวกับภาษา Html รูปแบบโครงสร้างของภาษา Html ทุกครั้งที่เราจะเขียนโฮมเพจด้วยภาษา Html เราจะต้องพิมพ์โครงสร้างต่อไปนี้ลงไปก่อนทุกครั้ง
จากโครงสร้างดังกล่าวสามารถอธิบายได้ดังนี้
• คำสั่ง กับ จำเป็นต้องพิมพ์ลงไปทุกครั้งเพื่อบอกว่าเริ่มคำสั่ง html แล้ว และ จบคำสั่ง html แล้วโดย มักจะอยู่บรรทัดแรกเสมอเพื่อบอกว่าเริ่มต้นที่นี่ กับ มักจะอยู่บรรทัดล่างสุดเสมอเพื่อบอกว่าจบส่วนของภาษา html แล้ว
• คำสั่ง และ ใช้สำหรับประกาศหัวของโฮมเพจว่าเขียนโดยใคร โฮมเพจชื่อว่าอะไร ฯลฯ เราเรียกว่าส่วนหัวของโปรแกรม
• คำสั่ง
• คำสั่ง และ ข้อมูลที่อยู่ระหว่าง และ จะเป็นส่วนของข้อมูลที่เราต้องการแสดงในเว็บเพจ
การสร้างเอกสารภาษา 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 ชื่อไฟล์ต้องเป็นภาษาอังกฤษตัวเล็ก ห้ามเว้นวรรค สามารถใช้เครื่องหมาย - และเครื่องหมาย _ ในการคั่นระหว่างชื่อไฟล์ได้ นามสกุลให้เป็น .html หรือ .htm เท่านั้น ไม่เช่นนั้นไฟล์ที่สร้างขึ้นก็จะเป็น Text File ธรรมดา ไม่สามารถนำไปแสดงผลบน Browser ได้
4. เลือกเมนู File →Save →Save as เลือกตำแหน่งที่จะจัดเก็บไฟล์
5. เลือกชนิดของไฟล์ที่ช่อง Save as type เป็น All Files
การขึ้นบรรทัดใหม่
ในเอกสารภาษา HTML ข้อความที่เราใส่เข้าไปในเอกสารจะเป็นข้อความที่ต่อเนื่องกันไป และจะขึ้นบรรทัดใหม่ก็ต่อเมื่อข้อความได้ยาวไปชนขอบขวาของหน้าจอแล้วเท่านั้น
หากเราต้องการตัดข้อความหรือขึ้นบรรทัดใหม่จะต้องกำหนดเอง โดยใช้ Tag
รูปแบบของคำสั่ง HTML ที่ใช้ในการขึ้นบรรทัดใหม่
การใส่หมายเหตุ (Comment) ในเอกสาร
การใส่หมายเหตุในเอกสาร HTML คือการที่เราต้องการใส่ข้อความหรือข้อมูลไว้ในเอกสาร แต่ไม่ต้องการให้แสดงบน Browser นั่นเอง
รูปแบบของคำสั่ง HTML ที่ใช้ในการใส่หมายเหตุในเอกสาร
หลักการเขียนภาษา HTML แบบง่ายๆ
- จัดให้คำสั่งเปิดและปิดในแต่ละชุดคำสั่งอยู่ใน column ตรงกัน
- ข้อความที่ไม่ยาวมาก ถ้ามีคำสั่งเปิดและปิด ให้เขียนในบรรทัดเดียวกัน
- คำสั่งที่มีตัวเปิดและปิด ให้เขียนตัวเปิด/ปิดให้เรียบร้อยก่อนที่จะเขียนข้อความลงไปเช่น ต้องการเขียน"โฮมเพจของข้าพเจ้า My Homepage"ก็ควรเริ่มด้วย
โฮมเพจของข้าพเจ้า My Homepage
4. ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา
5. คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก เล็กน้อย
การกำหนดสี
การกำหนดสีให้พื้นฉากหลัง background
การกำหนดสีของแบ๊คกราวด์ เราจะมีการเพิ่มคำว่า bgcolor = #รหัสสี เข้าไปในแท็ก ดังนี้
โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้
สี รหัสสี
แดง #FF0000
เขียว #00FF00
น้ำเงิน #0000FF
ขาว #FFFFFF
ดำ #000000
เทา #BBBBBB
การกำหนดสีให้กับตัวอักษรถ้า ต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก bodyดังนี้
แต่ถ้าต้องการมีการกำหนดสีของ background อยู่ด้วย เขียนดังนี้
แต่ถ้าต้องการกำหนดสีเพื่อที่จะเน้นข้อความบางข้อความให้แตกต่างจากข้อความอื่น จะมีรูปแบบดังนี้
ข้อความ
การกำหนดขนาดของตัวอักษร สามารถทำได้เช่นกัน รูปแบบดังนี้
ข้อความ
ตัวเลขจะมีค่าจาก –7 ถึง 7 จากขนาดเล็กไปขนาดใหญ่ ค่ามาตรฐาน คือ +3
เช่น ข้อความ
การใส่รูปภาพ
ในการนำรูปภาพมาใส่ในเวบนั้น เป็นวิธีหนึ่งที่จะทำให้ โฮมเพจของเราดูน่าสนใจยิ่งขึ้น แต่ว่าถ้ามีมากไปก็ไม่ไหว เพราะว่ามันจะทำให้โหลดช้าขึ้น คงจะไม่ทันใจสำหรับพวกใจร้อนทั้งหลาย สำหรับแท็กที่ใช้แทรกรูปภาพ จะมีรูปแบบดังนี้
width = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความกว้างของภาพ
height = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความสูงของภาพ
สรุปคำสั่งพื้นฐานHTML
คำสั่งขึ้นบรรทัดใหม่
ข้อความ ย่อหน้าใหม่
คำสั่งเพิ่มช่องว่าง
คำสั่งแสดงชื่อรูปภาพ ชื่อ photo.jpg เริ่มต้นการเขียนโปรแกรม HTML
คำสั่งส่วนของชื่อเรื่องโดยคำสั่งย่อยคือ
ส่วนของเนื้อเรื่อง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น