รู้จักกับ HTML กันก่อนนะ
ในการเรียนวิชา Building Software II นั้นจะเป็นเรียนเกี่ยวกับเรื่องของ Web Application ดังนั้นจึงจำเป็นต้องมีการฝึกฝนความรู้ของ HTML กันสักหน่อย
ภาษา HTML (Hypertext Markup Language) เป็นภาษาที่ใช้กำหนดการแสดงผลสิ่งต่างๆที่อยู่บนหน้าเว็บเพจ ไม่ว่าจะเป็นข้อความ รูปภาพ วิดีโอ เสียง หรือแม้แต่ไฟล์ชนิดอื่นๆ โดยภาษา HTML จะแบ่งออกเป็น 2 ส่วนคือ
- Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>, <br> เป็นต้น
- Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
2. ส่วนของบทความทั่วไป เป็นส่วนของข้อความที่ต้องการแสดงผล
ถัดมาผมก็จะขอแนะนำเว็บ w3schools มันเป็นเว็บที่รวบรวมความรู้พื้นฐานและ Tag ต่างๆของภาษา HTML แถมด้วยความรู้พื้นฐานเกี่ยวกับ CSS JAVASCRIPT และอื่นๆที่เกี่ยวข้องกับการเขียนเว็บไว้อีกมากมาย
ทำเว็บเพจ My Idol
หลังจากศึกษาพื้นฐาน HTML แล้ว งานแรกที่ต้องนั่นก็คือการเขียนหน้าเว็บเพจ "My Idol" หรือ "บุคคลที่อยากเอาเป็นแบบอย่าง" และด้านล่างนี้ก็คือหน้าเว็บที่ผมเขียนขึ้นมา บุคคลที่ผมยกให้เป็นไอดอลก็คือ "ฮิเดโอะ โคจิมะ" ผู้ผลิตและนักออกแบบเกมที่มีชื่อเสียงอันดับต้นๆของโลก(อวย)
หน้าเว็บเพจ
HTML
จากโค้ด HTML ข้างบน ผมก็จะขออธิบาย tag ต่างๆที่ได้ใช้ไป โดยเริ่มจาก <!DOCTYPE html> ที่ใส่ไว้บนสุดเพื่อบอกชนิดของเอกสารช่วยให้เว็บเบราว์เซอร์แปลเอกสารได้อย่างถูกต้อง
ถัดมาคือโครงสร้างหลักของ HTML โดยจะต้องเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งภายในก็จะประกอบไปด้วย <head>...</head> และ <body>...</body>
ส่วนของ <head> นั่นผมจะมีการใช้ tag <meta charset="UTF-8"> เพื่อให้หน้าเว็บรองรับภาษาที่หลากหลาย เนื่องจากในหน้าเว็บนี้ผมมีการใส่ภาษาญี่ปุ่นเข้าไปด้วย และอีก tag นึงก็คือ <title> เป็น tag ที่ใช้กำหนดชื่อหัวข้อของเว็บเพจที่ title bar
ส่วนของ <body> จะเป็นส่วนเนื้อหาหลักของหน้าเว็บเพจ จะมี tag ต่างๆอยู่ภายในมากมายตามลักษณะข้อมูลที่ต้องการนำเสนอ
<h1>...</h1> เป็น tag ที่ใช้กับ heading หรือข้อความที่เป็นหัวข้อเรื่อง โดยจะมีตั้งแต่ h1 ไปจนถึง h6
<p>...</p> เป็น tag ที่ใช้จัด Paragraph หรือ ย่อหน้า โดยจะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ
<img src="ที่อยู่ของรูปภาพ"> เป็น tag ที่ใช้ใส่รูปภาพลงบนหน้าเว็บ
<b>...</b> ตัวหนา <i>...</i> ตัวเอียง <u>...</u> ขีดเส้นใต้
<br/> ขึ้นบรรทัดใหม่ <hr> เส้นคั่นหน้า
เป็นสัญลักษณ์พิเศษใช้แทน space หรือเวนวรรค เนื่องจากในการเขียน HTML ต่อให้เราจะเว้นวรรคกี่ครั้งก็ตาม ก็จะแสดงผลออกมาเท่ากับว่าเราเว้นวรรคเพียงครั้งเดียว
การใช้ Style จะเป็นการใช้ CSS เพื่อตกแต่งหน้าเว็บให้สวยงามขึ้น ซึ่งผมก็มีการนำมาใช้เล็กๆน้อยๆ เช่น
<body style="background-color:#EFEFFF"> เพื่อกำหนดให้พื้นหลังของหน้าเว็บเป็นสี #EFEFFF
<p style="text-align:center;"> เพื่อจัดรูปแบบข้อความใน paragraph ให้อยู่กึ่งกลาง
<p style="text-indent:2em;"> เพื่อให้เริ่มต้น paragraph ด้วยย่อหน้าขนาด 2em เป็นต้น
ขอบคุณข้อมูลจาก : http://www.hellomyweb.com/course/html/
ไม่มีความคิดเห็น:
แสดงความคิดเห็น