พื้นฐาน HTML
ในหมวดนี้จะเป็นพื้นฐานการใช้งาน HTML เช่นการสร้างตาราง , การใส่รูปในเว็บเพจ , การสร้างลิงค์ โดยจะมีตัวอย่างให้ทดลองพิมพ์แบบง่ายๆ
บทนำ HTML
HTML
ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน
HTML เป็นตัวย่อมาจาก Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดยสามารถนำเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ แสดงภาพ , เสียง และไฟล์ในรูปแบบอื่นๆ
ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ
1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ใน
เครื่องหมาย < ... >
2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อความที่เราต้องการแสดงผล
ตัวอย่างการใช้งานภาษา HTML
อาจลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer ของคุณเช่น Notepad
<html>
<head>
<title> หัวข้อเรื่อง ของหน้านี้ </title>
</head>
<body>
เนื้อหาที่จะแสดงใน web browser
</body>
</html>
เมื่อพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง
การทำงานของ code ด้านบน
1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ
2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย
3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page
4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser
โครงสร้างคำสั่งของ HTML
HTML
การใช้งาน
ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้
1. คำสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
2. Attributes
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย
3. not case sensitive
หมายถึง จะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน
โครงสร้างของหลักของ HTML
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ
1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง
2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่
web brower โดยตรง
<html>
<head>
คำสั่งในหัวข้อของ head
</head>
<body>
คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล
</body>
</html>
1. คำสั่งในหัวข้อของ head (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<HEAD>
<TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">
<META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">
<META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">
</HEAD>
ITLE
ข้อความที่ใช้เป็น 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 สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง
2. คำสั่งในส่วนของ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ
ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้
กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร
กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)
กลุ่มคำสั่งเกี่ยวกับการทำลิงค์
กลุ่มคำสั่งจัดการรูปภาพ
กลุ่มคำสั่งจัดการตาราง (Table)
กลุ่มคำสั่งควบคุมเฟรม
กลุ่มคำสั่งอื่นๆ
คำสั่งในการจัดหน้า
HTML
ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้า
ซึ่งการเรียนรู้ที่ดีที่สุดคือการลองพิมพ์ดู ดังนั้น Hellomyweb.com จึงได้ทำ text editor และหน้าจอแสดงผลไว้ด้วยกันให้คุณลองพิมพ์ลองแก้ไขกันดู โดยคลิกที่ลิงก์ที่หัวข้อได้เลย
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง
รูปแบบ p tag
<p> ย่อหน้าที่ 1 </p>
<p> ย่อหน้าที่ 2 </p>
<p> ย่อหน้าที่ 3 </p>
2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง
รูปแบบ br tag
บรรทัดที่ 1 <br>
บรรทัดที่ 2 <br>
บรรทัดที่ 3 <br>
3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ
รูปแบบ h tag
<h1>head 1</h1>
<h2>head 2</h2>
<h3>head 3</h3>
<h4>head 4</h4>
<h5>head 5</h5>
<h6>head 6</h6>
4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น
รูปแบบ hr
<p>เนื้อหาบทที่ 1</p>
<hr>
<p>เนื้อหาบทที่ 2</p>
<hr>
5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')
รูปแบบ align
<h3 align = 'left'>ชิดซ้าย</h3>
<h3 align = 'right'>ชิดขวา</h3>
<h3 align = 'center'>จัดเข้ากลาง</h3>
6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้
รูปแบบ bgcolor
<body bgcolor ='green'>
<h1> ดูสีพื้นหลัง </h1>
</body>
7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข
รูปแบบการเขียนคำบรรยาย source code
<!-- คำบรรยาย source code --!>
คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ
HTML
ตัวเอียง ตัวหนา หรือแบบอักษรแบบต่างนั้นมีเพื่อให้เราอ่านบทความได้ง่ายขึ้น หรือเป็นการเน้นคำ ซึ่งในบทนี้เราจะมาดูกันว่ามีคำสั่งอะไรบ้าง
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา
คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้
1.แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา
<B> ตัวอักษรแบบตัวหนา (bold)
<I> ตัวอักษรแบบตัวเอน (italic)
<S> ตัวอักษรแบบตัวขีดฆ่า (strike)
<Sub> ตัวอักษรแบบตัวห้อย (subscripted)
<Sup> ตัวอักษรแบบตัวยก (superscripted)
<U> ตัวอักษรแบบขีดเส้นใต้ (underline)
2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก
<Em> ใช้เน้นข้อความ คำพูดหรือวลี (emphasized)
<Stong> ใช้เน้นข้อความที่สำคัญมากๆ (strong)
<Ins> ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted)
<Del> ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted)
<Code> ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)
<Address> ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)
ซึ่งจริงแล้วนั้น ผลลัพธ์ออกมาก็เหมือนกัน เช่น B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ แต่เราแยกเพื่อความสะดวกในการใช้งานมากกว่า
2.คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย
รูปแบบของ Pre tag
<pre> ..... </pre>
3.คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน
เชื่อมต่อเอกสารของเราด้วย hyperlink
HTML
hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์
เรามาลองสร้าง hyperlink กันง่ายๆดู
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.สร้าง hyperlink
ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ
1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง
รูปแบบของ hyperlink ภายใน directory เดียวกัน
<a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>
รูปแบบของ hyperlink จาก directory ที่สูงกว่า
<a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>
รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น
<a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>
1.2. ลิงค์กับเว็บภายนอก
รูปแบบของ hyperlink กับเว็บภายนอก
<a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a>
2.สร้าง hyperlink ด้วยรูปภาพ
ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ
รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ
<a href='หน้าที่ต้องการเชื่อมโยง'>
<img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'>
</a>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น