งานชิ้นที่4 น.ส.สราลี ฤทธิรัตน์ ม.4/1 เลขที่ 20
เมื่อ พฤ, 12/07/2012 - 22:02 | แก้ไขล่าสุด พฤ, 12/07/2012 - 22:02| โดย 
pncsaralee
การเขียนโปรแกรมด้วยภาษา HTML มีส่วนประกอบที่สำคัญอยู่ 2
ส่วน คือ
1. ส่วนที่เป็นข้อความที่จะพิมพ์ คือ ข้อมูล ข้อความ เนื้อหาต่างๆ
ที่ต้องการนำเสนอออกมาในเว็บเพจ
2. ส่วนที่เป็นคำสั่ง
คือ ส่วนนี้จะใช้ในการจัดการรูปร่างและรูปแบบของตัวอักษรหรือเอกสาร จะเรียกว่า tag และส่วนที่เป็นคำสั่ง tag
นี้ จะถูกเขียนอยู่ในเครื่องหมาย < > ทุกคำสั่ง
เช่น <br>, <body>, <head> เป็นต้น
รูปแบบของ tag
แบ่งออกเป็น 2 กลุ่ม คือ
1. tag เดี่ยว
คือ รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีเพียงแท็กเดียว ก็สามารถใช้งานได้ เช่น <br>
2. tag คู่
คือ รูปแบบคำสั่งที่เป็นสองส่วน คือ มีส่วนเริ่มต้นและต้องมีส่วนจบของคำสั่งถึงจะสามารถทำงานได้สมบูรณ์
โดยส่วนจบของแต่ละคำสั่งจะมีเครื่องหมาย Slash
(/) ไว้หน้าแท็กคำสั่งนั้น เช่น <html>......</html>
การเขียนโปรแกรมด้วยภาษา
HTML จะมีโครงสร้างและการจัดวางคำสั่งหลักที่เป็นมาตรฐานเหมือนกันทั่งโลก โดยจะประกอบด้วยคำสั่งหลักๆ
อยู่ 4 คำสั่งด้วยกัน ดังนี้
1.
<html>........</html>
เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร
HTML
2. <head>........</head>
เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง
3. <title>.........</title>
เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบ
Title Bar คำสั่งนี้จะอยู่ภายในคำสั่งส่วน
<head>......</head> โดยกำหนดความยาวของตัวอักษรไม่เกิน
64 ตัวอักษร
4. <body>.........</body>
เป็นคำสั่งที่กำหนดข้อความและรูปแบบของคำสั่งต่างๆ
ที่ใช้สำหรับปรับแต่งเอกสารที่จะนำเสนอออกทางส่วนแสดงผลหลักของ
Web Browser
ขั้นตอนการเขียนโปรแกรมด้วยภาษ HTML เบื้องต้น
1.กำหนดพื้นที่ที่จะใช้จัดเก็บเอกสารทั้งหมด
1.1 สร้างโฟลเดอร์
(folder) ไว้ที่ My Document โดยตั้งชื่อเป็นชื่อของนักเรียน
(เป็นภาษาอังกฤษ) เช่น My Documnents/shanikarn
1.2 ภายในโฟลเดอร์
shanikarn ให้สร้างโฟลเดอร์ย่อยที่ใช้ในการจัดเก็บภาพต่างๆ ที่จะนำมาแสดงในเว็บเพจ
โดยตั้งชื่อว่า images เช่น My Documents/shanikarn/images
2.เปิดโปรแกรม
Notepad - -
> 3.พิมพ์คำสั่งภาษา
HTML - - >
2
.1 คลิกที่ Start
2.2 คลิกที่ Program
2.3 คลิกที่ Accessories
2.4 คลิกที่ Notepad
3.พิมพ์คำสั่งภาษา HTML เมื่อเปิดโปรแกรม
Notepad แล้วให้พิมพ์คำสั่งต่างๆ
4.บันทึกเอกสาร HTML
- - > 5.เรียกดูผลลัพธ์ที่เว็บบราวเซอร์
4.1
หลังจากพิมพ์ข้อมูลต่างๆ เสร็จ
ให้จัดเก็บข้อมูลโดยคลิกที่เมนู File แล้วเลือก save
4.2 ในการจัดเก็บครั้งแรก โปรแกรมจะขึ้นกรอบมาให้ตั้งชื่อให้กับเอกสาร
ให้เลือกเก็บข้อมูลดังต่อไปนี้
- ข้อมูลในช่อง Save
in : ให้เลือกไปที่โฟลเดอร์ที่เราสร้างไว้ในตอนแรก (shanikarn)
- ข้อมูลในช่อง File
name: ให้ตั้งชื่อว่า test.htm
- ข้อมูลในช่อง Save
as type : ให้เลือกเป็น All Files
-
จากนั้นให้คลิกที่ปุ่ม Save
5.เรียกดูผลลัพธ์ที่เว็บบราวเซอร์
5.1 เปิดโปรแกรม Internet Explorer
5.2 คลิกที่เมนู File เลือก Open ดังภาพด้านล่าง
5.3 จากข้อ 5.2 จะปรากฏหน้าจอดังภาพด้านล่าง
ให้คลิกที่ปุ่ม Browse...
5.4 จากข้อ 5.3 จะปรากฏหน้าจอดังภาพด้านล่าง
ให้ทำการเลือกเปิดเอกสารที่ได้ทำการ save เอาไว้ในข้อ 4
(test.htm)
- เลือกไฟล์ HTML
ที่เก็บไว้ในช่อง Look in:
- ในช่อง Files
of type: เลือกเป็นแบบ All Files ถึงจะมองเห็นเอกสารที่เป็น
HTML
- คลิกเลือกชื่อไฟล์เอกสารที่ต้องการเปิด
- คลิกปุ่ม Open
จะปรากฎผลดังนี้
คลิกที่ปุ่ม
O.K. เครื่องคอมพิวเตอร์จะทำการเรียกโปรแกรมเว็บบราวเซอร์ขึ้นมาพร้อมทั้งแสดงผลลัพธ์ของข้อมูลตามที่ต้องการ
ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง
ช่วยกันนะครับ
ไทยกู๊ดวิวจะได้อยู่นานๆ
ไม่ถูกปิดเสียก่อน
ขอขอบคุณในความร่วมมือครับ
ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558
มีผลบังคับใช้แล้ว
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ
