วิชาการพัฒนางานบนเว็บ (Web Programming)

วิชาการพัฒนางานบนเว็บ(Web Programming) *พื้นฐานการเขียนภาษา HTML*

ทำความรู้จักกับภาษา HTML HTML (HyperText Markup Language) เป็นภาษามาตรฐานที่กำหนดขึ้นสำหรับสร้างเว็บเพจ ซึ่งเป็นภาษาที่มีโครงสร้างการเขียนที่ชัดเจนด้วยตัวกำกับที่เรียกว่า “Tag” โดยจะเป็นตัวควบคุมการแสดงผล ทั้งในส่วนของข้อความ รูปภาพ และอื่นๆ เช่น <title></title>

รูปแบบของภาษา HTML • Tag • คือ คำสั่งที่อยู่ภายในเครื่องหมาย “<….>” ซึ่งจะต้องมี Tag เปิด และปิดเสมอ (ยกเว้นบางคำสั่ง) • Attribute • คือ ส่วนที่ใช้กำหนดคุณสมบัติของคำสั่ง ซึ่งจะอยู่ภายใน Tag เปิด • เช่น <hr align=“center”>

โครงสร้างขั้นพื้นฐานของภาษา HTML • <HTML>…</HTML> • <HEAD>…</HEAD> • <TITLE>…</TITLE> • <BODY>…</BODY>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นของเอกสาร HTML ที่ใช้สำหรับประกาศให้ทราบว่าเอกสารนี้เขียนด้วย HTML ซึ่งจะใช้ Tag เปิดไว้ที่บรรทัดแรกสุดของเอกสาร HTML และ Tag ปิดไว้ที่บรรทัดสุดท้าย <html> …. …. …. </html>

คำสั่ง <HEAD> เป็นคำสั่งสำหรับใช้บอกรายละเอียดเกี่ยวกับเว็บเพจ หรือ Keyword หรือข้อมูลจำพวก Metadata ที่จำเป็นในเอกสาร HTML <html> <head> …. </head> …. </html>

คำสั่ง <TITLE> เป็นคำสั่งที่อยู่ภายในคำสั่ง <HEAD> ซึ่งใช้สำหรับบอกให้ทราบว่าเอกสาร HTML นี้เกี่ยวกับอะไร โดยแสดงเป็นข้อความขึ้นที่ Title Bar และยังใช้เป็นชื่อสำหรับบันทึกลงใน Bookmark หรือ Favorites ด้วย <html> <head> <title>Title Name…</title> </head> …. </html>

คำสั่ง <BODY> เป็นคำสั่งสำหรับสร้างส่วนเนื้อหาของ HTML โดยคำสั่งหรือเนื้อหาของ HTML จะต้องอยู่ภายใน Tag คำสั่ง <BODY>….</BODY> ทั้งหมด ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือการเชื่อมโยงต่างๆ <html> <head> <title>….</title> </head> <body> Content…. </body> </html>

การเขียน HTML ขั้นพื้นฐาน <html> <head> <title>My Title</title> </head> <body> My Content </body> </html>

แบบฝึกหัด ให้เขียนเอกสาร HTML โดยให้แสดงผลที่ Title Bar ว่า “My First Web Page” และให้แสดงผลที่ เนื้อหาของเว็บเพจ ว่า “Welcome to My First Web Site” EX1-1

การจัดหน้าเว็บเพจขั้นพื้นฐานการจัดหน้าเว็บเพจขั้นพื้นฐาน • <P>…</P> (ALIGN=“…” : left, right, center ) • <BR> • <CENTER>… </CENTER> • <DIV>….</DIV> (ALIGN=“…” : left, right, center ) • <HR> (ALIGN, NOSHADE, SIZE, WIDTH, COLOR)

คำสั่ง <P> <html> <head><title>My Page</title></head> <body> <p>ข้อความ…</p> </body> </html> <p align=“right”>ข้อความ…</p> EX1-2

คำสั่ง <BR> <html> <head><title>My Page</title></head> <body> ข้อความ1<br>ข้อความ2<br>ข้อความ3 </body> </html> <nobr>ข้อความ…</nobr> EX1-3

คำสั่ง <CENTER> <html> <head><title>My Page</title></head> <body> <center> ข้อความ1<br> ข้อความ2<br> ข้อความ3 </center> </body> </html> EX1-4

คำสั่ง <DIV> <html> <head><title>My Page</title></head> <body> <div align=“right”>ข้อความ1</div> <div align=“center”>ข้อความ2</div> </body> </html> div align=“right”, “center”, “left” EX1-5

แบบฝึกหัด • ให้เขียนจัดหน้าเว็บเพจด้วยข้อความต่อไปนี้ • “ABCDEFGHIJKLMNOPQRSTUVWXYZ” • ให้แสดงผลเหมือนหน้าเว็บเพจต่อไปนี้ด้วยคำสั่งใดก็ได้ ดังนี้ • <P>…</P> • <BR> • <NOBR>…</NOBR> • <CENTER>… </CENTER> • <DIV>….</DIV> EX1-6

คำสั่ง <HR> • เป็นคำสั่งสำหรับเส้นคั่นบรรทัดในเว็บเพจ เพื่อใช้สำหรับแบ่งเนื้อหาออกเป็นส่วนๆ ซึ่งมี Attribute ดังนี้ • <hr align=“…”> (right, center, left) • <hr noshade> • <hr size=“…”> (ขนาดเป็นร้อยละ หรือพิกเซล) • <hr width=“…”> (ขนาดเป็นร้อยละ หรือพิกเซล) • <hr color=“…”> (เช่น green, blue, red, yellow)

คำสั่ง <HR> <html> <head><title>My Page</title></head> <body> ข้อความ1<hr> ข้อความ2<hr noshade> </body> </html> <hr align=“…” noshade size=“…” width=“…” color=“…”> EX1-7

แบบฝึกหัด • ให้เขียนจัดหน้าเว็บเพจด้วยข้อความต่อไปนี้ • “ABCDEFGHIJKLMNOPQRSTUVWXYZ” • ให้แสดงผลเหมือนหน้าเว็บเพจต่อไปนี้ด้วยคำสั่งต่อไปนี้ • <HR> • <BR> • <CENTER>… </CENTER> • <DIV>….</DIV> EX1-8

วิชาการพัฒนางานบนเว็บ (Web Programming)