website

12/7/2560 การเขียนเวบ็ ไซต์ นางสาวอไุ รรตั น์ สมการ

เริม่ หัดเขียนเว็บไซต์ ต้องเตรียมอะไรบ้าง?หากเราไมค่ ุ้นเคยกับการทาเว็บ หรือการเขียนโปรแกรมอ่นื ๆ มาก่อนเลย ไม่ต้องกังวลไปครับ สิ่งทเ่ี ราตอ้ งมกี ็แค่ “Editor” หรือโปรแกรมสาหรบั แกไ้ ขข้อความทั่วไปน่ันเอง สาหรับผทู้ ใี่ ช้ Windows เราอาจเลือกใช้“Notepad” แตถ่ ้าใครใช้ Mac กอ็ าจจะใช้ “TextEdit” ก็ได้ครบัลองพรีวิวเว็บเพจแรกของคุณ!เม่อื เราเลือก editor ได้แลว้ ใหเ้ ราลองสรา้ งสร้างเวบ็ เพจแบบงา่ ยๆ ดูก่อนเลยฮะ ใหเ้ ราเปดิ editor ของเราขึ้นมา แลว้ ลองพมิ พข์ ้อความอะไรก็ไดล้ งไป แล้วเซฟโดยตั้งชอื่ ไฟลใ์ หเ้ ป็น “index” ส่วนนามสกุลให้เลือกเป็น“.html” เสร็จแล้วใหเ้ ราลองเปิดไฟลน์ ี้ โดยใช้ web browser อะไรก็ไดด้ ูครบั ลองพิมข้อความอะไรก็ไดล้ งใน editor แล้วเซฟโดยใชช้ ่อื “index.html”

เมือ่ ลองเปดิ ดูดว้ ย Firefox ก็จะไดห้ น้าตาแบบน้ี ช้าก่อน! นีย่ ังไมใ่ ช่รูปแบบที่ถูกตอ้ ง จรงิ อยทู่ ่ี web browsers ตา่ งๆ สามารถแสดงผลสิง่ ทเี่ ราเพิ่งเขียนลงไปได้อยา่ งถูกต้อง แต่การเขยี นเว็บน้นั จะ มมี าตรฐานของมันอยู่ เพื่อให้การพัฒนาน้นั เป็นไปในทางเดียวกนั จากเดิมที่เราเขยี นข้อความลงไปตรงๆ ใหเ้ รา เปลี่ยนมาเขียนโดยใชภ้ าษา “HTML” แทนครบั รจู้ กั กับ Markup Language HTML นนั้ เป็นภาษาคอมพิวเตอรช์ นิดหนึง่ ซึง่ ย่อมาจาก “Hyper Text Markup Language” ครบั ก่อนทจี่ ะ พูดถงึ HTML เรามาทาความรู้จกั กบั “Markup Language” กันก่อนดีกวา่ ครับ ลักษณะของ ภาษาคอมพิวเตอร์แบบ Markup ก็คือ มันจะเป็นภาษาทเี่ อาไวอ้ ธบิ ายความหมายของเนื้อหาโดยการเอาส่งิ ท่ี เรียกว่า “Tags” มาครอบเน้ือหาน้นั ๆ สมมติเราเขียนข้อความวา่1 Mr.Suranart Niamcome

หากเราเขียนแบบนี้ ถงึ แม้ว่า web browsers จะแสดงผลออกมาถกู ต้อง แต่มันจะไม่รูค้ รบั วา่ “Mr.Suranart Niamcome” คอื อะไร แต่ถ้าเราเปล่ยี นมาเขียนด้วย Markup Language แทน ก็จะไดแ้ บบน้ี1 <name>Mr.Suranart Niamcome</name> จากตัวอย่างนี้ เราได้ครอบเน้ือหาเดมิ ของเราด้วย Tags โดยเราจะเรยี ก “<name>” ว่า “Tag เปิด” และ เรียก “</name>” วา่ “Tag ปิด” หลังจากทเี่ ราเปลยี่ นมาเขยี นโดยใช้ Markup Language แบบนี้ web browsers จะเข้าใจไดท้ นั ทวี า่ “Mr.Suranart Niamcome” นี้ จรงิ ๆ แล้วเป็นช่อื คนครับ ในการทาเว็บ เราจะใช้ HTML เปน็ หลักครับ อย่าลมื ว่า HTML เองกเ็ ปน็ Markup Language ชนดิ หนึ่ง ซึง่ มันจะทาหนา้ ที่อธบิ ายเน้ือหาต่างๆ ในหนา้ เวบ็ ของเราวา่ มันคืออะไร สว่ นนเ้ี ป็นเมนนู ะ ส่วนนเ้ี ปน็ หัวขอ้ นะ และสว่ นน้เี ปน็ รปู ภาพนะ เป็นตน้ นิยามศัพทเ์ กี่ยวกับ HTML HTML คืออะไร?  HTML ยอ่ มาจาก “Hyper Text Markup Language”  HTML เป็น Markup Language ชนิดหน่ึง  Markup Language คอื ภาษาท่ใี ช้ Tags ในการอธิบายความหมายของเน้ือหา  HTML เป็นภาษาท่ใี ชใ้ นการสรา้ งเว็บเพจ  เว็บเพจคือหนา้ แต่ละหน้าของเว็บไซต์ HTML Tags  HTML ใช้ Tags ในการอธบิ ายความหมายของเน้ือหา  ในการสร้าง HTML Tags ใหเ้ ราครอบ “ชื่อ Tag” ด้วยเคร่ืองหมาย ‘<>’ แบบน้ี <ช่ือ Tag>  โดยปกตแิ ลว้ เราจะใช้ HTML Tags เปน็ คู่ เช่น <header> กบั </header> เนอื้ หาอะไรก็ตามท่ีอยู่ ระหวา่ ง HTML tags ค่นู ีจ้ ะถือเป็น “header”  เราจะเรยี ก HTML Tag ตัวแรกวา่ “Tag เปิด” และจะเรียก HTML Tag ตวั หลังว่า “Tag ปิด”  “Tag ปิด” จะมหี นา้ ตาคล้ายกับ “Tag เปิด” แตจ่ ะมี ‘/’ เพมิ่ มาที่หน้า “ชอื่ Tag”  อยา่ งไรก็ตาม HTML Tag บางตัวจะมแี ค่ “Tag เปิด” เท่านน้ั เชน่ <br> ที่หมายถึงการข้ึนบรรทัด ใหม่ จะเห็นว่า <br> มคี วามหมายสมบรู ณใ์ นตัวอย่แู ล้ว ไม่ตอ้ งเอามนั ไปครอบเน้ือหาอะไรอีก

HTML Elements  เราจะเรียก “Tag เปิด”, เน้อื หาท่ีอยูภ่ ายใน และ “Tag ปิด” รวม 3 อยา่ งนว้ี า่ “HTML Elements”  “HTML Elements” ก็คือส่ิงที่ “HTML Tag” สร้างข้ึนมา ซ่งึ มนั ก็คือเน้ือหาท่ีมคี วามหมายนัน่ เอง HTML Attributes  HTML Elements ตา่ งๆ สามารถใส่ “Attributes(ลกั ษณะ)” เพ่มิ ได้ โดยเราจะใส่ Attributes หาก ตอ้ งการระบุลักษณะเพ่ิมเติมเกีย่ วกบั HTML Elements นน้ั ๆ  Attributes ของ HTML Elements จะใส่ไว้ที่ “Tag เปิด” เสมอ  Attributes จะประกอบไปด้วย “ช่อื ของ Attribute” และ “คา่ ของ Attribute”  Attributes ของแต่ละ HTML Elements จะแตกตา่ งกันออกไป  ลองดตู วั อยา่ งนี้ <คน เพศ=”ชาย” อาย=ุ ”56″>Steve Jobs</คน> จะได้วา่ HTML Elements น้ีมี ชือ่ ว่า “คน” และมี Attributes เป็น “เพศ” และ “อายุ” จะเห็นว่า Attributes ช่วยทาให้ ความหมายของ HTML Elements มคี วามชดั เจนยิง่ ขึ้น โครงสรา้ งของเว็บเพจ มาถึงตรงน้ี เรารูแ้ ลว้ วา่ เราจะตอ้ งใช้ HTML ในการสร้างเว็บเพจ ทีน้ีเราลองมาดูกนั วา่ โครงสร้างของเวบ็ เพจ น้ันประกอบไปด้วยอะไรบ้าง  <!DOCTYPE html>สว่ นนี้จะเปน็ การระบุ version ของ html ท่เี ราจะเขียน โดยเราจะตอ้ งใสส่ ่วน น้ีเอาไวท้ บ่ี นสดุ ของเวบ็ เพจเสมอ  <html>สว่ นน้จี ะอยู่ต่อจาก <!DOCTYPE html> เราจะต้องใส่ HTML Elements ตา่ งๆ ไว้ในสว่ นนี้  <head>ส่วนน้ีจะอยู่ภายใน <html> อีกที เราจะต้องใส่ HTML Elements ท่ีใชบ้ อกรายละเอยี ด เพิ่มเติมเก่ียวกบั เวบ็ เพจไวใ้ นส่วนนี้  <body>ส่วนนีจ้ ะอยตู่ ่อจาก <head> เราจะตอ้ งใส่ HTML Elements ท่เี ราอยากให้มันแสดงผล ออกมาไวใ้ นส่วนน้ี1 <!DOCTYPE html>2 <html>

3 <head>4 โคด้ ทอี่ ยู่ในน้ีจะเอาไวบ้ อกรายละเอยี ดเพ่ิมเตมิ เก่ยี วกับเวบ็ เพจ5 </head>6 <body>7 โค้ดท่อี ยู่ในนจี้ ะแสดงผลออกมาทางหน้าจอ8 </body>9 </html> Workshop – สรา้ งเว็บเพจแรกของคุณ! ตอนน้ีเรารแู้ ลว้ วา่ โครงสร้างของเว็บเพจประกอบด้วยอะไรบ้าง ใหเ้ ราจาโครงสรา้ งน้เี อาไวใ้ หด้ ี เพราะถ้าเราจา ไดแ้ ลว้ ส่งิ ทเ่ี หลือก็แค่เลือก HTML Elements มาใสใ่ นช่อง <head> และ <body> เท่านนั้ เอง ลองมาดสู ิวา่ HTML Elements ทเี่ ราตอ้ งใช้บ่อยๆ มีอะไรบ้าง Title อย่างแรกเรามาดูการใส่ Title ของเว็บเพจกันเลยครับ ให้เราครอบชอื่ Title ของเราดว้ ย <title></title> แล้วเอาไปใส่ไว้ใน <head></head> ลองดตู วั อยา่ งน้ีครับ1 <!DOCTYPE html>2 <html>3 <head>4 <title>สอนทาเว็บไซต์ by Siam HTML</title>5 </head>

6 <body>7 โค้ดท่ีอยู่ในนี้จะแสดงผลออกมาทางหนา้ จอ8 </body>9 </html> เมื่อลองพรวี วิ ดู เนื้อหาท่ีเราใส่ไปทงั้ ในสว่ นของ <title> และในส่วนของ <body> กลับอ่านไม่ออก ท้ังนี้เป็น เพราะเรายังไมไ่ ด้กาหนดการเขา้ รหัสของตวั อักษรใหเ้ ป็นแบบ UTF-8 นนั่ เอง Meta ในการทาให้ web browsers อา่ นภาษาไทยออก เราจะต้องกาหนด “Character Sets” ใหเ้ ปน็ UTF-8 ก่อน ให้เราใส่ “<meta charset=”UTF-8″ >” เขา้ ไปใน <head></head> แบบน้ีครับ1 <!DOCTYPE html>

2 <html>3 <head>4 <meta charset=\"UTF-8\">5 <title>สอนทาเวบ็ ไซต์ by Siam HTML</title>6 </head>7 <body>8 โคด้ ที่อยู่ในนีจ้ ะแสดงผลออกมาทางหน้าจอ9 </body>10 </html> เม่อื ลองพรีววิ ดูอีกครัง้ เรากจ็ ะพบว่าภาษาไทยสามารถแสดงผลไดอ้ ย่างถกู ต้องแล้ว Headings

ทนี เ้ี ราลองมาดกู ารใส่ “heading (หัวข้อ)” ใหก้ บั เนือ้ หากันบา้ งครับ heading น้ันจะแบ่งระดบั ความสาคญั ออกเปน็ 6 ระดบั ด้วยกนั ได้แก่ <h1>, <h2>, <h3> ไลไ่ ปจนถงึ <h6> ใหเ้ ราลองเอา Tags เหลา่ นี้ไปครอบ หวั ขอ้ ของเราดคู รับ1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset=\"UTF-8\">5 <title>สอนทาเวบ็ ไซต์ by Siam HTML</title>6 </head>7 <body>8 <h1>หวั ขอ้ </h1>9 <h2>หัวข้อ</h2>10 <h3>หวั ขอ้ </h3>11 <h4>หวั ข้อ</h4>12 <h5>หวั ข้อ</h5>13 <h6>หวั ข้อ</h6>14 </body>15 </html>

เมอ่ื ลองพรีวิวดู เราจะเหน็ วา่ หัวขอ้ ของเรามีขนาดที่แตกตา่ งกัน โดยหัวขอ้ ท่ีครอบด้วย <h1> นั้นจะมขี นาด ใหญ่สดุ ส่วนหัวข้ออ่นื ๆ ก็จะมขี นาดเล็กลงมาเรื่อยๆ จนมาเล็กสุดทห่ี วั ข้อทคี่ รอบด้วย <h6> ครับ Paragraphs เม่อื ได้หวั ขอ้ แลว้ เรามาต่อกันทก่ี ารสร้าง “Paragraph (ย่อหนา้ )” ครบั ให้เราครอบเน้ือหาที่เป็น Paragraph ด้วย <p></p> ลองดตู วั อย่างน้ี1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset=\"UTF-8\">5 <title>สอนทาเว็บไซต์ by Siam HTML</title>

6 </head>7 <body>8 <h1>หัวข้อ</h1>9 <p>Siam HTML เป็นเหมอื นสงั คมออนไลน์ของเพ่ือนๆ Web Developer ที่จะนาประสบการณ์ ความรู้ หรอื เทคนิคต่างๆ มาแบง่ ปันกัน เปน็ ทๆ่ี พวกเราทุกคน จะชว่ ยกนั สร้างสรรค์วงการเวบ็ ไซตข์ องไทย10 ให้พัฒนาไม่แพ้ชาติอ่นื ๆ และยงั เป็นแหลง่ ความรู้ สาหรับนักพฒั นาเวบ็ ไซตห์ น้าใหม่ ทีจ่ ะชว่ ยส่งเสรมิ ใหก้ าร11 พัฒนาเว็บไซต์ในไทยแพรห่ ลายมากยิง่ ขน้ึ </p>12 <p>Siam HTML ยินดีเปดิ รบั บทความของเพื่อนๆ ทกุ คน หากบทความของคุณสร้างสรรค์ แปลก ใหม่ ไมซ่ ้าใคร หรือแค่คิดวา่ มีประโยชนก์ บั เพื่อนๆ นักพัฒนาเว็บไซตด์ ว้ ยกันก็ลงมือเขยี นได้เลย!!!</p> </body> </html> เมื่อลองพรวี ิวดู จะเห็นว่าการครอบเน้ือหาด้วย <p></p> ทาให้ชอ่ งว่างดา้ นบนและด้านลา่ งของเนื้อหา เพม่ิ ขนึ้ ซึ่งจะเหมาะมากในการใชแ้ บง่ เนอ้ื หาออกเปน็ พารากราฟ เพื่อให้อ่านได้งา่ ยข้ึน Links

สิ่งที่ขาดไม่ไดเ้ ลยสาหรบั การทาเว็บกค็ ือการสรา้ ง “Link” นน่ั เองครบั โดยเราจะใช้ <a></a> มาครอบ ข้อความที่ต้องการให้เป็น Link แลว้ ใส่ Attribute ทชี่ อื่ วา่ “href” เพิ่มเข้าไปท่ี <a> แลว้ ระบุคา่ ของ “href” ใหเ้ ปน็ “URL” ท่ีเราต้องการจะให้ Link ไป ลองดูตัวอย่างนค้ี รบั1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset=\"UTF-8\">5 <title>สอนทาเว็บไซต์ by Siam HTML</title>6 </head>7 <body>8 <h1>สอนทาเว็บไซต์</h1>9 <p>10 เรยี นทาเวบ็ ไซต์ Web Design ฟรี! ท่ี11 <a href=\"http://www.siamhtml.com\">SiamHTML.com</a>12 </p>13 </body>14 </html>

เมอ่ื ลองพรวี วิ ดู เราจะเห็นวา่ ข้อความ “SiamHTML.com” กลายเป็น Link ไปแล้วครบั เมอื่ ลองกดดู มันก็จะ Link ไปยัง “URL” ท่ีเราได้กาหนดไวด้ ้วย Attribute “href” ครบั Images ส่งิ สาคัญอีกอย่างหน่งึ ในการทาเว็บก็คือ “รูปภาพ” ครบั ในการใสร่ ปู ในหนา้ เวบ็ เราจะใช้ “<img>” ซง่ึ เปน็ HTML Tag ทีม่ แี ต่ “Tag เปิด” เพยี งอย่างเดียว สว่ นรายละเอยี ดต่างๆ ไม่วา่ จะเปน็ URL รวมไปถึงความกวา้ ง และความสูงของรปู ใหเ้ รากาหนดโดยใช้ Attributes ครับ ในสว่ นของ URL ให้เราใช้ “src” ส่วนความกว้าง และความสูงของรูปให้เราใช้ “width” และ “height” ตามลาดับ ลองดูตวั อย่างนี้ครบั1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset=\"UTF-8\">

5 <title>สอนทาเวบ็ ไซต์ by Siam HTML</title>6 </head>7 <body>8 <h1>สอนทาเวบ็ ไซต์</h1>9 <a href=\"http://www.siamhtml.com\">10 <img src=\"http://www.siamhtml.com/wp-content/uploads/2013/09/siamhtml.png\" width=\"240\" height=\"192\">11 </a>12 <p>13 เรยี นทาเว็บไซต์ Web Design ฟร!ี ท่ี14 <a href=\"http://www.siamhtml.com\">SiamHTML.com</a>15 </p>16 </body>17 </html>

เม่อื ลองพรวี ิวดู เรากจ็ ะเห็นรูปท่ีเราใส่ไปแลว้ ละ่ ครบัทาเวบ็ เป็นแลว้ แต่ทาไมไม่สวยเลย?มาถึงตอนน้ี คาดว่าหลายๆ คน คงจะบ่นวา่ ทาไมเวบ็ ของเราไม่เห็นสวยเหมอื นชาวบ้านเลย ไมต่ อ้ งน้อยใจไปครบั สาหรบั วันแรกของการทาเวบ็ ไซต์ ได้ขนาดนกี้ ็ถอื ว่าโอเคมากๆ แล้ว ในวนั พรุ่งน้ี เราจะมาพดู ถงึ การตกแตง่ หนา้ เว็บใหส้ วยงามโดยใช้ CSS กนั อย่าลืมติดตามให้ไดน้ ะครับ