1.เรียนรู้HTML ภาษา HTML จะแบง่ ออกเป็น 1 สว่ น คือ !. ส่วนของคาํ ส/ัง (tag) เป็นสว่ นที8กําหนดรูปแบบของข้อความที8แสดง ซง8ึ เราเรียกวา่ Tag HTML เปน็ ภาษาคอมพิวเตอร์ในรูปแบบหน่งึ ทใี่ ชส้ ำหรับสรา้ งหน้า โดยจะอยใู่ นเคร8ืองหมาย < ... > เวบ็ (Web Page) เพ่ือเกบ็ ข่าวสารขอ้ มูลทีต่ อ้ งการในรปู ของ เอกสาร 3. ส่วนของบทความท/วั ๆไป เป็นสว่ นของข้อความที8เราต้องการแสดงผล ไฮเปอร์เท็กซ์ (Hypertext) ทมี่ ีคณุ สมบัติสามารถเชอื่ มโยงหน้าเวบ็ หนึ่งไปยงั หนา้ เว็บอืน่ ๆ ได้โดยโครงสรา้ งของHTML จะมตี ัว กำ กบั ตวั อย่างการใช้งานภาษา HTML หรอื แทก็ (Tag) สำหรับใชใ้ นการควบคมุ การแสดงผลของขอ้ ความ คณุ อาจลองพิมพ์ตามตวั อกั ษรด้านลา่ งนี Oใน Text editer ของคณุ เชน่ Notepad รูปภาพ ตาราง และวตั ถอุ นื่ ๆ ผ่านเวบ็ เบราวเ์ ซอร์ (Web Browser)
การทาํ งานของ code ด้านบน คาํ ส2ังเร2ิมต้นของเอกสาร HTML 1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเร2ิมด้วย <HTML>..........</HTML> <html> และปิดด้วย </html> เสมอ คําสง2ั <HTML> เป็นคําสงั2 เริ2มต้นในการเขียนโปรแกรมและคําสง2ั </HTML> เป็นการ 2. <head> ...... </head> เป็นสว่ นที2ใช้ให้รายละเอียดเกี2ยวกบั เวบ็ เพจหน้า สนิ F สดุ โปรแกรม HTML คําสงั2 นีจF ะไมแ่ สดงผลในโปรแกรมเวบ็ เบราเซอร์ แตต่ ้องเขียน นี Fซงึ2 จะไมแ่ สดงให้เหน็ ในสว่ นของการแสดงผลของ web browser แตจ่ ะมีผล เพ2ือให้เกิดความเป็นระบบของงาน และเพื2อจะให้รู้วา่ เอกสารนีเFป็นเอกสารของภาษา กบั สว่ นอ2ืนๆ เชน่ การหาของ search engine (google,yahoo) การใช้ HTML สว่ นหวั เรื2องเอกสารเวบ็ (Head Section) งานก็จะมีคําสง2ั ยอ่ ยเพ2ือบรรยายรายละเอียด เชน่ <title> .... </title> , <HEAD>..........</HEAD> <meta> และอ2ืนอีกมากมาย Head Section เป็นสว่ นท2ีใช้อธิบายเกี2ยวกบั ข้อมลู เฉพาะของหน้าเวบ็ นนัF ๆ เชน่ ช2ือ 3. <title> .......... </title> ในสว่ นตวั อกั ษรท2ีอยใู่ นคําสงั2 นีจF ะอยใู่ น title เร2ืองของหน้าเวบ็ (Title), ชื2อผ้จู ดั ทําเวบ็ (Author), คีย์เวิร์ดสําหรับการค้นหา bar ของ web page (Keyword) โดยมี Tag สาํ คญั คือ 4. <body> .......... </body> ตวั อกั ษรท2ีอยใู่ นคําสง2ั นีจF ะแสดงสว่ น แสดงผลของ web browser <TITLE>..........</TITLE > ข้อความที2ใช้เป็น TITLE ไมค่ วรพิมพ์เกิน [\\ ตวั อกั ษร, ไมต่ ้องใสล่ กั ษณะ พิเศษ เชน่ ตวั หนา เอียง หรือสี และควรใช้ภาษาที2มีความหมายครอบคลมุ ถงึ เนือF หาของเวบ็ เพจ นนัF หรือเป็นคําสาํ คญั ในการค้นหา (Keyword) <BODY>..........</BODY> Body Section เป็นสว่ นเนือF หาหลกั ของหน้าเวบ็ ซง2ึ การแสดงผลจะต้องใช้ Tag จํานวนมาก ขนึ F อยกู่ บั ลกั ษณะของข้อมลู เชน่ ข้อความ, รูปภาพ, เสยี ง, วีดโิ อ หรือไฟล์ตา่ งๆ สว่ นเนือF หาเอกสารเวบ็ เป็นสว่ นการทํางานหลกั ของหน้าเวบ็ ประกอบด้วย Tag มากมาย ตามลกั ษณะของข้อมลู ท2ีต้องการนําเสนอ การปอ้ นคําสงั2 ในสว่ นนี Fไมม่ ีข้อจํากดั สามารถปอ้ น ตดิ กนั หรือ b บรรทดั ตอ่ b คําสง2ั ก็ได้ แตส่ ว่ นใหญ่จะยดึ รูปแบบท2ีอา่ นงา่ ย คือ การทํายอ่ หน้า ในชดุ คําสง2ั ท2ีเก2ียวข้องกนั ทงัF นีใF ห้ปอ้ นคําสงั2 ทงัF หมดภายใต้ Tag <BODY> … </BODY>
HTML เป็นภาษาคอมพิวเตอร์ในรูปแบบหนึ่งที่ใชส้ ำหรับสร้างหนา้ เว็บ (Web Page) เพ่อื เก็บข่าวสารขอ้ มูลทต่ี ้องการในรูปของ เอกสาร ไฮเปอร์เท็กซ์ (Hypertext) ท่ีมคี ณุ สมบัตสิ ามารถเช่ือมโยงหน้าเวบ็ หน่งึ ไปยงั หนา้ เวบ็ อืน่ ๆ ไดโ้ ดยโครงสร้างของHTML จะมตี วั กำ กับ หรือแท็ก (Tag) สำหรับใช้ในการควบคมุ การแสดงผลของข้อความ รปู ภาพ ตาราง และวตั ถอุ น่ื ๆ ผา่ นเว็บเบราวเ์ ซอร์ (Web Browser)
การกาหนดรูปแบบตัวอักษร เพื่อให้เกิดความแตกตา่ งของข้อความ ท่ีต้องการนาเสนอในเวบ็ เพจ มดี งั นี้ การทาตวั อักษรหนา,เอียง,ขีดเสน้ ใต้ รปู แบบคาส่งั : • <B> ...ข้อความ..... </B> :คำสั่งตวั หนา • <I> ...ขอ้ ความ..... </I> : คำสง่ั ตัวเอียง • <U> ...ข้อความ..... </U> :คาส่ังขดี เสน้ ใต้ ตวั อย่าง : ทดสอบการทาตัวอักษรหนา,เอยี ง,ขดี เสน้ ใต้ รปู แบบคำสง่ั <HTML> <HEAD><TITLE>การใสส่ อี กั ษร</TITLE></HEAD> <BODY bgcolor=white> <font size=2 face=\"ms sans serif\"> <B>ขอ้ ความหนา </B><br><I>ข้อความเอียง</I><br><U>ขอ้ ความขีดเส้นใต้ <U><br> <B><I>ข้อความหนา+เอยี ง</I></B><br> <B><I><U>ขอ้ ความหนา+เอยี ง+ขีดเสน้ ใต<้ /U></i></B> <br> <I><U>ขอ้ ความเอียง+ขดี เสน้ ใต้</U></I><br> <U><B> ขอ้ ความขีดเสน้ ใต้+หนา</B></U><br> </font> <body> <html>
2. การใส่สีอักษรรูปแบบคาสั่ง : <font color=ชอ่ื สีหรอื #รหัสสี > 3. การใสข่ นาดอักษรรูปแบบคาส่ัง : <font size=ขนาดอกั ษร> ..... .....ข้อความ.....</font>คาอธบิ าย : เปน็ คาสั่งทใ่ี ชใ้ นการตกแตง่ ขอ้ ความ...... </font>.คาอธบิ าย : เปน็ คาสง่ั ทใี่ ชใ้ นการตกแต่งอกั ษร อักษรให้เป็นสตี า่ งๆ ตามชอื่ สหี รอื รหัสสี โดยนาคาส่งั นไี้ ปครอ่ ม ใหเ้ ปน็ มขี นาดตา่ ง ๆ โดยท่ขี นาดอักษรยง่ิ มาก อักษรก็จะมขี นาดใหญ่ ข้อความท่จี ะตกแตง่ ตวั อยา่ ง : การตกแตง่ สีอักษรรปู แบบคาสงั่ ตามลาดับ โดยนาคาสั่งน้ีไปครอ่ มขอ้ ความที่จะตกแตง่ ตวั อยา่ ง : การ <HTML><HEAD> <TITLE> การใสส่ ีอกั ษร</TITLE> ตกแตง่ ขนาดอกั ษร รปู แบบคาส่งั <HTML> </HEAD> <HEAD> <BODY bgcolor=white> <TITLE> การใสข่ นาดอกั ษร</TITLE> <font color=red> อักษรสีแดง </font> <br> </HEAD> <font color=blue> อกั ษรสนี ้าเงนิ <BODY bgcolor=white><font size=10> อักษรขนาด=10 </font> <br> <font color=#66CCFF> อกั ษรสีฟ้า </font> <br><br> </font> <br> <font size=3> อักษรขนาด=3 </font> <br><br> </BODY> <font size=1> อกั ษรขนาด=1 </font> </HTML> </BODY> </HTML>
การแสดงผล4. การใส่รูปแบบอกั ษรรปู แบบคาสัง่ : <font face=\"ชือ่ รูปแบบ 5. การประยุกต์การกาหนดรูปแบบอกั ษรตัวอย่าง : การตกแต่ง อักษร\" > .....ข้อความ...... </font>.คeอธบิ าย : เป็นคาสงั่ ท่ใี ชใ้ นการตกแตง่ รปู แบบอกั ษร+ใสส่ ี+ใส่ขนาด+หนา+เอียง+ขดี เสน้ ใตร้ ูปแบบคาสง่ั อกั ษรใหเ้ ป็นมีรูปแบบต่าง ๆ ตาม font ที่กาหนด เชน่ AngsanaUPC, MS <HTML> sans serif Cordia New, โดยนาคาสั่งนไ้ี ปคร่อมขอ้ ความท่ีจะ ตกแต่งตัวอย่าง <HEAD> : การตกแตง่ รูปแบบอักษรรปู แบบคาส่ัง <TITLE> การตกแต่งอกั ษร</TITLE> <HTML> </HEAD> <HEAD> <BODY bgcolor=white><font face=\"MS sans serif\" <TITLE>การใสร่ ปู แบบอกั ษร</TITLE> color=red size=2> อกั ษรแบบ Ms sans serif ,สแี ดง, </HEAD> ขนาด=2</font> <br><br> <BODY bgcolor=white><font face=\"MS sans serif\" > อักษรแบบ Ms <font face=\"AngsanaUPC\" color=blue> อกั ษรแบบ sans serif </font> <br> AngsanaUPC ,สนี ้าเงิน </font> <br> <br><U> <fontface=\"AngsanaUPC\">อกษั รแบบAngsanaUPC</font><br> <font face=\"Cordia New\" size=3> อกั ษรแบบ Cordia New , <font face=\"Cordia New\" > อักษรแบบ Cordia New </font> <br> ขนาด=3,ขดี เสน้ ใต้ </font> </U> <body> <br><br><B><font size=4 color=red > อกั ษรหนา, ขนาด=4, <html> สแี ดง </font> </B> <br><br> <B><I> <font face=\"Ms sans serif\" color=red > อักษร ms sans serif ,หนา+เอยี ง,สี แดง </font> </B></I> </BODY> </HTML>
ขอ้ มูลอ้างอิง 1. http://academic.udru.ac.th/~samawan/content/HTML1. pdf 2. https://www.hellomyweb.com/course/html/intro_html / https://youtu.be/GzaH_M0D2Ag. ขอขอบคณุ คลปิ วีดีโอสอน จากชอ่ ง nana สาระ
Search
Read the Text Version
- 1 - 9
Pages:
