สร้างเว็บไซต์เป็นใน 30 นาที

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

เริ่มหัดเขียนเว็บไซต์ ต้องเตรียมอะไรบ้าง?

หากเราไม่คุ้นเคยกับการทำเว็บ หรือการเขียนโปรแกรมอื่นๆ มาก่อนเลย ไม่ต้องกังวลไปครับ สิ่งที่เราต้องมีก็แค่ “Editor” หรือโปรแกรมสำหรับแก้ไขข้อความทั่วไปนั่นเอง สำหรับผู้ที่ใช้ Windows เราอาจเลือกใช้ “Notepad” แต่ถ้าใครใช้ Mac ก็อาจจะใช้ “TextEdit” ก็ได้ครับ

ลองพรีวิวเว็บเพจแรกของคุณ!

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

notepad

ลองพิมข้อความอะไรก็ได้ลงใน editor แล้วเซฟโดยใช้ชื่อ “index.html”

 firefox_preview

เมื่อลองเปิดดูด้วย Firefox ก็จะได้หน้าตาแบบนี้

ช้าก่อน! นี่ยังไม่ใช่รูปแบบที่ถูกต้อง

จริงอยู่ที่ web browsers ต่างๆ สามารถแสดงผลสิ่งที่เราเพิ่งเขียนลงไปได้อย่างถูกต้อง แต่การเขียนเว็บนั้นจะมีมาตรฐานของมันอยู่ เพื่อให้การพัฒนานั้นเป็นไปในทางเดียวกัน จากเดิมที่เราเขียนข้อความลงไปตรงๆ ให้เราเปลี่ยนมาเขียนโดยใช้ภาษา “HTML” แทนครับ

รู้จักกับ Markup Language

HTML นั้นเป็นภาษาคอมพิวเตอร์ชนิดหนึ่ง ซึ่งย่อมาจาก “Hyper Text Markup Language” ครับ ก่อนที่จะพูดถึง HTML เรามาทำความรู้จักกับ “Markup Language” กันก่อนดีกว่าครับ ลักษณะของภาษาคอมพิวเตอร์แบบ Markup ก็คือ มันจะเป็นภาษาที่เอาไว้อธิบายความหมายของเนื้อหาโดยการเอาสิ่งที่เรียกว่า “Tags” มาครอบเนื้อหานั้นๆ สมมติเราเขียนข้อความว่า

หากเราเขียนแบบนี้ ถึงแม้ว่า web browsers จะแสดงผลออกมาถูกต้อง แต่มันจะไม่รู้ครับว่า “Mr.Suranart Niamcome” คืออะไร แต่ถ้าเราเปลี่ยนมาเขียนด้วย Markup Language แทน ก็จะได้แบบนี้

จากตัวอย่างนี้ เราได้ครอบเนื้อหาเดิมของเราด้วย 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 ที่เราอยากให้มันแสดงผลออกมาไว้ในส่วนนี้

Workshop – สร้างเว็บเพจแรกของคุณ!

ตอนนี้เรารู้แล้วว่าโครงสร้างของเว็บเพจประกอบด้วยอะไรบ้าง ให้เราจำโครงสร้างนี้เอาไว้ให้ดี เพราะถ้าเราจำได้แล้ว สิ่งที่เหลือก็แค่เลือก HTML Elements มาใส่ในช่อง <head> และ <body> เท่านั้นเอง ลองมาดูสิว่า HTML Elements ที่เราต้องใช้บ่อยๆ มีอะไรบ้าง

Title

อย่างแรกเรามาดูการใส่ Title ของเว็บเพจกันเลยครับ ให้เราครอบชื่อ Title ของเราด้วย <title></title> แล้วเอาไปใส่ไว้ใน <head></head> ลองดูตัวอย่างนี้ครับ

html_non_utf8

เมื่อลองพรีวิวดู เนื้อหาที่เราใส่ไปทั้งในส่วนของ <title> และในส่วนของ <body> กลับอ่านไม่ออก ทั้งนี้เป็นเพราะเรายังไม่ได้กำหนดการเข้ารหัสของตัวอักษรให้เป็นแบบ UTF-8 นั่นเอง

Meta

ในการทำให้ web browsers อ่านภาษาไทยออก เราจะต้องกำหนด “Character Sets” ให้เป็น UTF-8 ก่อน ให้เราใส่ “<meta charset=”UTF-8″ >” เข้าไปใน <head></head> แบบนี้ครับ

 html_charset_utf8

เมื่อลองพรีวิวดูอีกครั้ง เราก็จะพบว่าภาษาไทยสามารถแสดงผลได้อย่างถูกต้องแล้ว

Headings

ทีนี้เราลองมาดูการใส่ “heading (หัวข้อ)” ให้กับเนื้อหากันบ้างครับ heading นั้นจะแบ่งระดับความสำคัญออกเป็น 6 ระดับ ด้วยกัน ได้แก่ <h1>, <h2>, <h3> ไล่ไปจนถึง <h6> ให้เราลองเอา Tags เหล่านี้ไปครอบหัวข้อของเราดูครับ

 html_headings

เมื่อลองพรีวิวดู เราจะเห็นว่าหัวข้อของเรามีขนาดที่แตกต่างกัน โดยหัวข้อที่ครอบด้วย <h1> นั้นจะมีขนาดใหญ่สุด ส่วนหัวข้ออื่นๆ ก็จะมีขนาดเล็กลงมาเรื่อยๆ จนมาเล็กสุดที่หัวข้อที่ครอบด้วย <h6> ครับ

Paragraphs

เมื่อได้หัวข้อแล้ว เรามาต่อกันที่การสร้าง “Paragraph (ย่อหน้า)” ครับ ให้เราครอบเนื้อหาที่เป็น Paragraph ด้วย <p></p> ลองดูตัวอย่างนี้

html_paragraphs

เมื่อลองพรีวิวดู จะเห็นว่าการครอบเนื้อหาด้วย <p></p> ทำให้ช่องว่างด้านบนและด้านล่างของเนื้อหาเพิ่มขึ้น ซึ่งจะเหมาะมากในการใช้แบ่งเนื้อหาออกเป็นพารากราฟ เพื่อให้อ่านได้ง่ายขึ้น

Links

สิ่งที่ขาดไม่ได้เลยสำหรับการทำเว็บก็คือการสร้าง “Link” นั่นเองครับ โดยเราจะใช้ <a></a> มาครอบข้อความที่ต้องการให้เป็น Link แล้วใส่ Attribute ที่ชื่อว่า “href” เพิ่มเข้าไปที่ <a> แล้วระบุค่าของ “href” ให้เป็น “URL” ที่เราต้องการจะให้ Link ไป ลองดูตัวอย่างนี้ครับ

 html_links

เมื่อลองพรีวิวดู เราจะเห็นว่าข้อความ “SiamHTML.com” กลายเป็น Link ไปแล้วครับ เมื่อลองกดดู มันก็จะ Link ไปยัง “URL” ที่เราได้กำหนดไว้ด้วย Attribute “href” ครับ

Images

สิ่งสำคัญอีกอย่างหนึ่งในการทำเว็บก็คือ “รูปภาพ” ครับ ในการใส่รูปในหน้าเว็บ เราจะใช้ “<img>” ซึ่งเป็น HTML Tag ที่มีแต่ “Tag เปิด” เพียงอย่างเดียว ส่วนรายละเอียดต่างๆ ไม่ว่าจะเป็น URL รวมไปถึงความกว้างและความสูงของรูป ให้เรากำหนดโดยใช้ Attributes ครับ ในส่วนของ URL ให้เราใช้ “src” ส่วนความกว้างและความสูงของรูปให้เราใช้ “width” และ “height” ตามลำดับ ลองดูตัวอย่างนี้ครับ

 html_image

เมื่อลองพรีวิวดู เราก็จะเห็นรูปที่เราใส่ไปแล้วล่ะครับ

ทำเว็บเป็นแล้ว แต่ทำไมไม่สวยเลย?

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

(Visited 148,810 times, 120 visits today)

28 Responses to “สร้างเว็บไซต์เป็นใน 30 นาที”

  1. style says:

    เขียน css มา 4 ปี ขอลงเรียนด้วยคนครับ :)

  2. Kunathip Boonruangkhao says:

    บางเว็บเค้าแนะนำว่า tag ควรกำหนด width กับ height ใน css จะเหมาะสมกว่า หรืออย่างไรครับ

    • Siam HTML says:

      ส่วนตัวแอดมินว่ามันไม่ค่อยซีเรียสเท่าไรนะครับในจุดนี้ ปัจจุบัน Responsive Web จะ override width, height ด้วย stylesheets อยู่แล้ว และ width, height ก็ถือเป็น presentation การกำหนดด้วย stylesheets จึงไม่ผิดอย่างแน่นอน แต่ในอดีต validator บางตัวอาจฟ้องว่ามี error หาก ไม่มี width, height ครับ ซึ่งการ validatate นั้นเป็นเพียง guidelines แม้เรา validate ไม่ผ่าน ก็ไม่ได้แปลว่าเว็บเราไม่ดีเสมอไปครับ

  3. Cs'Angry Bird says:

    มีประโยชน์มากครับ นั่งอ่านทุกบทความครับ เข้าใจมากขึ้น ขอบคุณและเป็นกำลังใจให้ แอทมิน นำเนื้อหาดีๆแบบนี้มาให้อ่านอีกน่ะครับ

    • Siam HTML says:

      ขอบคุณมากจริงๆ ครับ ทำให้ผมมีกำลังใจสู้ต่อไป ^0^

  4. Ratchaburi Khetsong says:

    มีประโยชน์มากๆ ครับ

  5. ขอบคุณมากครับ

  6. tonSaychon says:

    อธิบายละเอียด อ่านเข้าใจได้ง่าย ขอบคุณครับ

  7. พี่คะ เขียนแล้วก็ยังอ่านไม่ออกอยู่ดี

  8. จะไปเรียนที่ไหนได้คะ ช่วยบอกหน่อย 08-1776-1771

  9. ช่วยบอกด้วยคะ ต้องทำเว็ปให้กับบริษัท 0924785908

  10. อ่านแล้วมองเห็นภาพ น่าสนใจ ต้องเรียนรู้ซะแล้ว ขอบคุณมากเลยครับ

  11. ได้แล้วครับ ใครที่ทำปล้วยังออกภาษาต่างดาวลองเอาบรรทัด meta charset ออกครับ ได้เลย

  12. ขอบคุณค่ะ ได้แล้ว ^^ ที่เหลือก็แค่จำแล้วก็ฝึกทำเยอะๆ ยังจำไม่ค่อยได้เลย 55555 แต่ทำได้ทุกอย่างที่คุณสอนแล้วนะคะ

  13. ทำไม่เปนน่ะ 5555

  14. ต้องทำให้เป็นเร็วๆค่ะ ครูให้สร้างเว็บของตัวเอง ยังทำไม่เป็นเลย 555

  15. ดีมาก อ้ายเอีย

  16. ขอบคุณค่ะ รอต่อไป

  17. ทำแบบ เป็นเว็บไซต์ ที่เปิดทั่วๆไป ได้ไหมครับ โดยใช้ HTML สร้าง

  18. อ่านสองรอบแล้ว…แต่ก็ยัง งง งง

  19. มันไม่ง้ายเลยกับเด็กที่ไม่จบม.2 555
    เห้อ!! ปวดหัวเลยทีนี้

  20. notepad ทำได้ซับซ้อนแค่ไหนครับ

Leave a Reply