ภาษา html
เมื่อ อังคาร, 23/09/2008 - 13:56 | แก้ไขล่าสุด อังคาร, 30/12/2008 - 22:55| โดย 
Atsawinห้ามลบ ขอให้เจ้าของผลงานประกวด แก้ไขข้อมูลได้จนถึงวันที่ 31 ธันวาคม 2551 เวลา 23.30 น.
หากเลยกำหนดเวลาดังกล่าวแล้ว ท่านเข้ามาแก้ไขข้อมูล ถือว่าโมฆะในการพิจารณาได้รับรางวัล
ซึ่งระบบของ Thaigoodview สามารถตรวจสอบได้ว่า ผลงานแต่ละชิ้น มีการแก้ไขเวลาใดบ้าง
ครูพูนศักดิ์ สักกทัตติยกุล
ความเป็นมาของภาษา HTML
WWW ถูกพัฒนาขึ้นมาครั้งแรกในปี ค.ศ.1989 โดย ทิม เบอร์เนอร์ส – ลี (Tim Berners – Lee) แห่งศูนย์ปฏิบัติการวิจัยทางอนุภาคฟิสิกส์ของยุโรป (CERN) ซึ่งตั้งอยู่ที่กรุงเจนีวา สวิตเซอร์แลนด์ ในครั้งแรก ทิมเพียงคิดอำนวยความสะดวกให้แก่บรรดานักวิทยาศาสตร์ของสถาบันให้ค้นหาข้อมูลง่ายขึ้น จึงคิดประดิษฐ์ตัวอักษรที่มีความสามารถในการสื่อสารข้อมูลได้ เรียกว่า “ไฮเปอร์เท็กซ์” (Hypertext) เมื่อได้ตัวอักษรที่มีคุณสมบัติพิเศษแล้ว สิ่งที่พัฒนาขึ้นต่อจากไฮเปอร์เท็กซ์ก็คือเครื่องมือสำหรับอ่านตัวอักษรที่เขาประดิษฐ์ขึ้น และเรียกเครื่องมือนี้ว่า “บราวเซอร์” (Browser) เพียง 3 ปีหลังจากการกำเนิดไฮเปอร์เท็กซ์ขึ้นมา โปรแกรมบราวเซอร์ตัวแรกชื่อ Mosaic ซึ่งทำงานบนระบบ X-Windows ก็สร้างปรากฎการณ์ใหม่ขึ้นมาในระบบการสื่อสารข้อมูลบนอินเทอร์เน็ต และยังเป็นแม่แบบของบราวเซอร์ตัวอื่นๆ เช่น Netscape Communicator, Internet Explorer, Opera,Mozilla Firefox, Safari เป็นต้น และก่อให้เกิดกระแสโลกไร้พรมแดนขึ้นมาจนถึงปัจจุบัน เมื่อเราทำการเชื่อมต่อเข้าเครือข่ายอินเทอร์เน็ต และใช้บราวเซอร์ในการสืบค้นข้อมูลสิ่งที่พบในหน้าต่างบราวเซอร์คือ โฮมเพจ หรือ เว็บเพจนั่นเอง การสร้างโฮมเพจหรือเว็บเพจนี้จะใช้
คำสั่งภาษาของทิมคือ ไฮเปอร์เท็กซ์ แม้ว่าต่อมาจะมีจะมีการพัฒนาโปรแกรมที่ทำให้เราสามารถสร้างเว็บเพจได้อย่างง่ายดาย แต่สุดท้ายการจัดเก็บไฟล์ การแก้ไขให้ตรงกับความต้องการของเรามากที่สุดก็ด้วยการใช้ตัวอักษรของทิม ที่เรียกกันติดปากว่า ภาษา HTML ที่มีใช้กันอยู่ในปัจจุบันนี้เอง
ลักษณะของภาษา HTML
องค์ประกอบของภาษา HTML สามารถแบ่งออกได้เป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกคำสั่งนี้ว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียนดังนี้
รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยจะต้องมีส่วนเริ่มต้นของแท็ก เรียกว่า "แท็กเปิด" และส่วนจบของแท็ก เรียกว่า "แท็กปิด" โดยส่วนของแท็กปิดจะต้องมีเครื่องหมาย Slash (/)
โครงสร้างพื้นฐานของ HTML
โครงสร้างของภาษา HTMLแบ่งออกได้เป็น 4 ส่วนหลัก ดังนี้
1.<html>...</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งมีความหมายบ่งบอกว่านี้คือภาษา HTML
2.<head>...</head>เป็นแท็กส่วนที่ใช้ในการกำหนดรายละเอียดหัวเอกสาร HTML
3.<title>...</title>เป็นแท็กที่ใช้ในการกำหนดชื่อเว็บเพจ ซึ่งจะต้องมีความยาวได้ไม่เกิน 64 ตัวอักษร
4.<body>...</body> เป็นแท็กที่ใช้ในการกำหนดส่วนของเนื้อหาบนเว็บเพจ ไม่ว่าจะเป็นข้อความ รูปภาพ ตาราง และการเชื่อมต่อไปยังเอกสารอื่นๆ
การจัดวางเนื้อหาบนหน้าเว็บ
การตัดคำขึ้นบรรทัดใหม่ <br>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <br> ข้อความที่ต้องการขึ้นบรรทัดใหม่
การตัดคำขึ้นย่อหน้าใหม่ <p>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <p> ข้อความที่ต้องการขึ้นย่อหน้าใหม่
การจัดวางตำแหน่งข้อความให้อยู่กึ่งกลาง
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <center>...</center> ข้อความที่ต้องการขึ้นย่อหน้าใหม่
การจัดรูปแบบเอกสารตามที่กำหนด <pre>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <pre>ข้อความ</pre>
การสร้างเส้นคั่นในแนวนอน <hr>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <hr>
การจัดการข้อความ
กำหนดรูปแบบข้อความที่เป็นหัวเรื่อง <hn> (n มีค่าตั้งแต่ 1 ถึง 6)
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <hn>หัวเรื่อง</hn>
การปรับเปลี่ยนขนาดตัวอักษร <font size>
ชื่อแอททริบิวท์ size
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <font...>
รูปแบบใน HTML4 <font size="n">ข้อความ</font>
การกำหนดแบบตัวอักษร <font face>
ชื่อแอททริบิวท์ face
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <font...>
รูปแบบใน HTML4 <font face="ชื่อฟอนต์">ข้อความ</font>
การกำหนดสีพื้นและสีตัวอักษร <body bgcolor.. text..>
ชื่อแอททริบิวท์ bgcolor (สีพื้นเว็บเพจ) และ text (สีตัวอักษรทั้งเว็บเพจ)
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <body...>
รูปแบบใน HTML4 <body bgcolor="#รหัสสี/ชื่อสี" text="#รหัสีสี/ชื่อสี">
การกำหนดสีเฉพาะข้อความ <font color>
ชื่อแอททริบิวท์ color
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <font...>
รูปแบบใน HTML4 <font color="#รหัสสี/ชื่อสี">...</font>
การกำหนดอักษรวิ่ง <marquee>
ตำแหน่งของแท็ก อยู่ในภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <marquee>ข้อความ</marquee>
การสร้างลิสต์แบบไม่มีลำดับ <ul>
ตำแหน่งของแท็ก ul (unordered List) อยู่ภายในแท็ก <body>...</body>
li (List Item) อยู่ภายในแท็ก <ul>...</ul>
รูปแบบใน HTML4 <ul>
<li>ข้อมูลในลิสต์
<li>ข้อมูลในลิสต์
</ul>
การกำหนดเครื่องหมายนำหน้าหัวข้อ
ชื่อแอททริบิวท์ type
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <ul…> หรือ <li…>
รูปแบบใน HTML4 <ul type=”ชนิดเครื่องหมาย”>
<li type=”ชนิดเครื่องหมาย”>
การสร้างลิสต์แบบมีลำดับ <ol>
ชื่อแท็ก <ol> และ <li>
ตำแหน่งของแท็ก ol (Ordered List) อยู่ภายในแท็ก <body>...</body>
li (List Item) อยู่ภายในแท็ก <ol>...</ol>
รูปแบบใน HTML4 <ol>
<li>ข้อมูลในลิสต์
<li>ข้อมูลในลิสต์
</ol>
การกำหนดชนิดของตัวจัดลำดับ
ชื่อแอททริบิวท์ type
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <ol...>
รูปแบบใน HTML4 <ol type="ชนิด">
การเชื่อมโยงเว็บเพจด้วยลิงค์
การสร้างลิงค์
ชื่อแท็ก a (anchor)
ชื่อแอททริบิวท์ href
รูปแบบใน HTML4 <a href="ส่วนเชื่อม">ข้อความที่ปรากฎบนหน้าเว็บ</a>
ค่าที่กำหนดให้ใช้ ชื่อไฟล์หรือตำแหน่งของเว็บเพจที่ต้องการเชื่อมโยง
ลิงค์สามารถเชื่อมโยงข้อมูลได้ 3 วิธีได้แก่
1.การเชื่อมโยงข้อมูลภายในเว็บเดียวกัน
2.การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น
3.การเชื่อมโยงข้อมูลในเว็บไซต์ที่อื่น
การเชื่อมโยงข้อมูลภายในเว็บเดียวกัน
ชื่อแอททริบิวท์ name
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <a...>
รูปแบบใน HTML4 <a name="ชื่อของจุดลิงค์">...</a>
< a href="#ชื่อของจุดลิงค์">...</a>
ค่าที่กำหนดให้ใช้ ชื่อจุดหมายปลายทาง ชื่ออะไรก็ได้ที่ไม่ซ้ำชื่ออื่นที่อยู่ในเว็บหน้าเดียวกัน
การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น แต่ยังอยู่ภายในเว็บไซต์เดียวกัน
ชื่อแท็ก <a>
ตำแหน่งของแอททริบิวท์ อยู่ในแท็ก <body>...</body>
รูปแบบใน HTML4 <a href="../index.html">Home</a>
<a href="webpage1.html">...</a>
การเชื่อมโยงข้อมูลในเว็บไซต์ที่อื่น
รูปแบบใน HTML4 <a href="URL ของเว็บไซต์ที่ต้องการเชื่อมโยง">ข้อความที่ต้องการเชื่อมโยง</a>
การใช้ภาพเป็นลิงค์ <img>
ชื่อแท็ก img
ชื่อแอททริบิวท์ src
ตำแหน่งของแท็ก อยู่ภายในแท็ก <a>...</a>
รูปแบบใน HTML4 <img src="รูปภาพที่ใช้เป็นสัญลักษณ์">
ค่าที่กำหนดให้ใช้ ชื่อรูปภาพที่ใช้เป็นสัญลักษณ์ในการเชื่อมโยง
การจัดข้อมูลในรูปแบบของตาราง
การสร้างตาราง <table>, <tr>, <td>
ชื่อแท็ก table, tr, td
ตำแหน่งของแท็ก table อยู่ภายในแท็ก <body>...</body>
tr อยู่ภายในแท็ก <table>...</table>
td อยู่ภายในแท็ก <tr>...</tr>
รูปแบบใน HTML4 <table>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
<tr><td>ข้อมูล</td><td>ข้อมูล</td></tr>
</table>
ค่าที่กำหนดให้ใช้ จำนวนแท็ก <tr>...</tr> เป็นการกำหนดจำนวนแถวในตาราง และจำนวนแท็ก <td>...</td>
เป็นการกำหนดจำนวนคอลัมน์ในแต่ละแถว
การใส่หัวข้อในตาราง
ชื่อแท็ก th
ตำแหน่งของแท็ก อยู่ภายในแท็ก <tr>...</tr>
รูปแบบใน HTML4 <tr><th>หัวข้อ1</th><th>หัวข้อ2</th></tr>
การตีเส้นตาราง
ชื่อแอททริบิวท์ border
ตำแหน่งของแอททริบิวท์ อยู่ในแท็กเปิด <table...>
รูปแบบใน HTML4 <table border="ความหนาของเส้นตาราง">
การใส่รูปภาพให้กับพื้นหลังของตาราง
ชื่อแอททริบิวท์ background
ตำแหน่งของแอททริบิวท์ อยู่ภายในแท็กเปิด <table...>
รูปแบบใน HTML4 background ="ชื่อไฟล์รูปภาพที่ต้องการนำมาใช้เป็นพื้นหลังของตาราง"
การตกแต่งหน้าเว็บเพจด้วยภาพกราฟฟิก
ประเภทของภาพกราฟฟิก
ภาพชนิด GIF
กราฟฟิกชนิด GIF กราฟฟิกชนิด GIF เป็นรูปแบบที่ถูกคิดค้นโดยบริษัท Compuserve เพื่อใช้กับคอมพิวเตอร์ต่างแบบต่างรุ่นได้
ทำให้เหมาะสำหรับการนำมาใช้ในเว็บเพจ เพราะต้องแสดงได้บนเครื่องที่แตกต่างกัน แต่ข้อจำกัดของ GIF ที่สำคัญก็คือ สามารถใช้สีได้สูงสุดเพียงครั้งละ 256 เท่านั้น
กราฟฟิกชนิด GIF ใช้การบีบอัดข้อมูลเพื่อลดพื้นที่การจัดเก็บข้อมูล ลักษณะการบีบอัดข้อมูลในรูปแบบนี้จะได้ผลมากกับกราฟฟิกที่
ใช้สีที่มีความสม่ำเสมอ เช่น ภาพการ์ตูน หรือโลโก้ โดยจำนวนสีที่ใช้นั้นมีไม่มากนัก
ภาพชนิด JPEG
กราฟฟิกชนิด JPEG ถูกพัฒนาโดย Joint Photographic Experts Group เป็นกราฟฟิกที่สามารถทำงานกับเครื่องต่างแบบต่างรุ่น
ได้เช่นกัน ข้อดีของกราฟฟิกชนิดนี้ คือสามารถแสดงสีได้สูงสุดถึง 16.7 ล้านสี อย่างไรก็ตามภาพแบบ JPEG จะมีการสูญเสียรายละเอียดบ้าง ซึ่งเป็นผลจากการบีบอัดข้อมูล (Compression) เพื่อลดขนาดภาพให้มี่ขนาดไม่ใหญ่จนเกินไป
การแสดงภาพบนเว็บเพจ <img>
ชื่อแท็ก img (image)
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML4 <img src="ชื่อไฟล์รูปภาพ">
แหล่งอ้างอิง: การสร้างเว็บไซต์ด้วยภาษา HTML: อรพิน ประวัติบริสุทธิ์: สำนักพิมพ์โปรวิชั่น 2547
http://www.nectec.or.th
จากใจผู้จัดทำ: ผมหวังว่าสื่อที่ผมจัดทำขี้นนี้จะเป็นเครื่องมือที่สามารถช่วยพัฒนาด้านระบบการเรียนการสอนทางด้านเทคโนโลยีให้ก้าวหน้ายิ่งขึ้นต่อไปครับ และถ้าหากเกิดข้อผิดพลาดประการใด ทางผู้จัดทำก็ขออภัยไว้ ณ ที่นี้ ครับ
อ่าน 7581 ครั้ง | 
Tags: 
ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง
ช่วยกันนะครับ
ไทยกู๊ดวิวจะได้อยู่นานๆ
ไม่ถูกปิดเสียก่อน
ขอขอบคุณในความร่วมมือครับ
ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558
มีผลบังคับใช้แล้ว
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ
อืมๆ ดี เน้อ
ใจเย็นๆครับผลงานคุณภาพต้องรอหน่อยครับ