ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้
2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้
3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้
Embedded Files
1. ภาษา HTML เบื้องต้น
ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกันและถูกพัฒนามาเรื่อยๆ จนถึงปัจจุบัน
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย (Hypermedia Document Description Language) เพื่อนำเสนอเอกสารนั้น เผยแพร่ในระบบเครือข่ายใยแมงมุม WWW (World Wide Web) มีโครงสร้างการเขียนที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ (Browser)
ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ
1. ส่วนของคำสั่ง (Tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ในเครื่องหมาย < ... >
2. ส่วนของบทความทั่วๆ ไป เป็นส่วนของข้อความที่เราต้องการแสดงผล
ที่มา : ธนากรณ์ เจริญยิ่ง
Tag < ... >
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่งหรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <HR> เป็นต้น
Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <P>…</P> เป็นต้น
Attributes
Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < ... > ในส่วน Tag เปิดเท่านั้น
Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Tag ควบคุมเกี่ยวกับรูปภาพ <IMG> มี Attributes ดังนี้
<IMG SRC="ชื่อไฟล์.นามสกุล" WIDTH="n" HEIGHT="n" ALT="text" BORDER="n"> โดย
SRC เป็น Attribute ควบคุมชื่อไฟล์ภาพที่จะนำมาแสดงผล
WIDTH เป็น Attribute ควบคุมความกว้างของภาพ
HEIGHT เป็น Attribute ควบคุมความสูงของภาพ
ALT เป็น Attribute ควบคุมคำอธิบายภาพ
BORDER เป็น Attribute ควบคุมขนาดของเส้นขอบของภาพ
ไฟล์เอกสาร HTML เป็นไฟล์ข้อความรูปแบบหนึ่ง (Text File) ที่เก็บชุดคำสั่ง HTML ดังนั้นการสร้างเอกสาร HTML จึงสามารถใช้ Text Editor ตัวใดก็ได้ เช่น NotePad หรือ WordPadThai
2. โครงสร้างภาษา HTML เบื้องต้น
ที่มา : Opart Surinyotha
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่องหมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
ตัวอย่าง
<html> หมายความว่า นี่คือการเริ่มต้นเอกสาร
</html> หมายความว่า นี่คือการสิ้นสุดเอกสาร
สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีกในเอกสาร html โดยทั่วไปมักจะต้องมีแท็ก head เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
<html>
<head>
</head>
</html>
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก head) ก็คือ แท็กไตเติ้ล title ซึ่งก็คือชื่อเรื่องนั่นเอง
<html>
<head>
<title> ..... </title>
</head>
</html>
และต่อมาก็คือแท็ก body ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ในเอกสารของเราจะถูกใส่ไว้ภายในแท็ก body นี้
<!doctype html>
<html>
<head>
<title> ..... </title>
</head>
<body> ..... </body>
</html>
3. การสร้างและบันทึก Text File
ก่อนจะสร้างโปรแกรมภาษา HTML ต้องทำความรู้จักกับโปรแกรมที่จะสร้างเอกสาร HTML ก่อน โปรแกรมนี้เรียกว่า Text Editor คือโปรแกรมที่สร้างและแก้ไขเอกสาร โปรแกรมเหล่านี้ได้แก่ Notepad, Wordpad, MS Word เป็นต้น
โดยในบทเรียนนี้จะใช้ Notepad ในการสร้างเอกสาร HTML
การสร้างเอกสาร HTML เราสามารถสร้างโดยใช้ Text Editor ที่มีอยู่ทั่วไป โปรแกรมเหล่านี้จะติดมากับเครื่องที่ใช้ระบบปฏิบัติการที่เป็น Windows
ขั้นตอนการสร้างเอกสารภาษา HTML ด้วย Notepad เลือก
1. Start
2. Programs
3. Accessories
4. Notepad จะปรากฏหน้าต่างของโปรแกรม Notepad
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์โครงสร้างพื้นฐานของเว็บเพจด้วยภาษา HTML ทำการบันทึกและแสดงผลหน้าเว็บเพจ
<!doctype html>
<html>
<head>
<title>การสร้างและบันทึกเอกสาร HTML</title>
</head>
<body> เมื่อทำการสร้างเอกสารเรียบร้อยแล้ว ต้องทำการบันทึกเอกสารทุกครั้ง ถึงจะแสดงผลลัพธ์ได้</body>
</html>
การบันทึกไฟล์เอกสารภาษา HTML จะต้องกำหนดส่วนขยายหรือนามสกุลให้เป็น .html เท่านั้น ไม่เช่นนั้นไฟล์ที่สร้างขึ้นก็จะเป็น Text File ธรรมดาไม่สามารถนำไปแสดงผลบน Browser ได้
การบันทึกไฟล์สามารถทำได้ ดังนี้ ...
เลือกเมนู File ,Save ,Save as เลือกตำแหน่งที่จะจัดเก็บไฟล์
เลือกชนิดของไฟล์ที่ Save as type เป็น All Files ตั้งชื่อไฟล์ที่ Filename โดยมีหลักการตั้งชื่อไฟล์ดังนี้ คือ ชื่อไฟล์ต้องเป็นภาษาอังกฤษตัวเล็ก ห้ามเว้นวรรค สามารถใช้เครื่องหมาย - และเครื่องหมาย _ ในการคั่นระหว่างชื่อไฟล์ได้ ส่วนนามสกุลเป็น .html เท่านั้น
เมื่อต้องการดูผลลัพธ์ ให้ดับเบิ้ลคลิกที่ชื่อไฟล์ หรือเปิดบราวเซอร์ เลือกไฟล์ที่ต้องการเปิด
4. การแสดง Text File และการเปิดดู CODE ภาษาHTML
การแสดงไฟล์เอกสาร การแสดงไฟล์เอกสาร HTML มี 2 วิธีคือ
1. การแสดงไฟล์เอกสาร โดยเปิดผ่าน IE มีขั้นตอนดังนี้
ดับเบิ้ลคลิกที่ IE แล้วเลือกเมนู File ,Open , Brows
เลือกชื่อไฟล์ที่ต้องการเปิด, Open , OK
2. การแสดงไฟล์เอกสาร HTML โดยตรง มีขั้นตอนดังนี้
ดับเบิ้ลคลิกที่ชื่อไฟล์เอกสารนั้น
จะปรากฏผลลัพธ์ของไฟล์เอกสาร HTML ผ่านเว็บบราวเซอร์
การเปิดดู CODE ภาษา HTML เมื่อแสดงบนเว็บบราวเซอร์
เลือกเมนู View , Source
ที่มา : Opart Surinyotha
Page updated
Report abuse