วันพุธที่ 11 มกราคม พ.ศ. 2560

ทดลองเขียน HTML

        ในวิชา Building Software II จะเน้นไปเรื่องการเขียน web application เป็นหลัก SPN จึงให้ทดลองการเขียนเว็บโดยใช้ HTML โดยใช้ text editor แบบธรรมดา ทางกระผมจึงได้ทดลองเขียนโดยใช้ gedit ซึ่งเป็น text editor ที่ทาง ubuntu มีให้อยู่แล้ว มาเขียนภาษา HTML โดยจะเขียนหน้าเว็บเกี่ยวกับไอดอลที่ตัวเองชื่นชอบ

        ในการเขียน HTML ก็ได้หาความรู้พื้นฐานมาจากเว็บไซด์ http://www.w3schools.com/html/ 
ซึ่งเป็นเว็บไซด์ที่ส่วนตัวผมเองว่าเป็นเว็บที่ดีมาก เพราะจะมีข้อมูลที่ครอบคลุมแล้วยังมีการทดสอบระหว่างการอ่านเนื้อหาในส่วนๆนั้นจบ ซึ่งจะมีเนื้อหาของส่วน css มาให้ด้วย

        หลังจากที่ได้ทดลองเขียนนี้คือผลงานของผม




HTML




        จากโค้ดด้านบนกระผมก็พอจะเข้าใจภาษา HTML ขั้นพื้นฐานได้แล้ว โดยความรู้พื้นฐานก็อย่างเช่นว่า <> คือ tag ในการเขียนโค้ด HTML <> จะเป็นหัวใจหลัก ในการเขียน โดยในโค้ดจะมีส่วนสำคัญๆคือ <html> <head> <body> โดยจะต้องมี tag ปิดด้วย </html> ฯลฯ ในส่วนของ <head> จะเป็นการกำหนดส่วนหัวของเว็บเพจ หรือ ก็คือส่วนนี้



        ในส่วนของ <body> ก็จะเป็นการใส่เนื้อหาต่างๆ โดยคำสั่งที่ใช้ไปก็จะมี 
<h1-h6> เป็นส่วนของ heading หรือหัวข้อ จะต้องมี tag ปิดด้วย
<p> เป็นส่วนของการใส่ข้อความเป็นย่อหน้า จะต้องมี tag ปิดด้วย
<br> เป็นการเว้นบรรทัด หรือ ขึ้นบรรทัดใหม่
<div> เป็นการสร้าง block ให้กับส่วนต่างๆของข้อความ จะต้องมี tag ปิดด้วย
<ul> เป็นการสร้าง listing โดยจะใช้คู่กับ <li> โดยจะสามารถใส่ style กำหนดได้ว่าต้องการรูป                แบบใด โดยผมเลือกแบบวงกลม



จะได้ผลเป็นดังนี้



<table> เป็นการสร้างตาราง โดยจะใช้คู่กับ <tr> เป็นการสร้างแถว <th> เป็นการใส่หัวข้อในแนวหลัก <td> เป็นการใส่เนื้อหาในแนวหลัก

<img src=""> เป็นการใส่รูปโดยใน "" จะสามารถใส่ได้ทั้งชื่อไฟล์รูปภาพที่อยู่ในเครื่อง หรือ อาจจะเป็นลิ้งค์ของรูปภาพที่ต้องการก็ได้ 

และอีกสิ่งที่ได้จากการทดลองเขียนก็คือในส่วนต่างๆของคำสั่ง สามารถที่จะใช้ คำสั่ง style เข้ามาช่วยเพิ่มเติมคุณสมบัติต่างๆได้ อย่างเช่น 

<div style="background-color:#ffb67a;border:3px solid black;"> จะเป็นการใส่สีพื้นหลัง แล้วใส่เส้นขอบขนาด 3 พิกเซล แล้วมีลักษณะของเส้นเป็นสีดำทึบ

<h2 align="left"> จะทำให้ข้อความ heading ของเรานั้นถูกจัดอยู่ในด้านซ้าย

แล้วก็ได้รู้จักกับ HTML entities จากเว็บไซด์นี้ http://www.w3schools.com/html/html_entities.asp
ซึ่งตัวที่ได้ลองใช้คือ $nbsp ซึ่งจะทำให้ผลที่ออกมาเป็นการเคาะ spacebar 1 ครั้ง หรือ non-breaking space นั้นเอง








ไม่มีความคิดเห็น:

แสดงความคิดเห็น