Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - การใส่เนื้อหาลง HTML

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

ยินดีต้อนรับสู่บทเรียนที่สี่ของซีรีย์ การทำเว็บไซต์สำหรับเด็ก ของเรา วันนี้เราจะมาใส่เนื้อหาลงใน HTML กัน

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

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

กล่องคอนเทนเนอร์

เราจะต้องได้คุยเกี่ยวกับคอนเทนเนอร์อีกหลายครั้งในการสร้างเว็บไซต์ ดังนั้นมันสำคัญมากที่ต้องเข้าใจว่ามันคืออะไร

เนื้อหาของเราทั้งหมดจะถูกวางไว้ภายใต้คอนเทนเนอร์ HTML  แต่ละอันนั้นถูกจัดด้วยอิลิเมนต์ HTML แต่ละอิลิเมนต์มีความหมายพิเศษในตัวมันเอง มันช่วยให้เบราว์เซอร์เข้าใจสิ่งต่างๆ บนหน้าเพจแต่ละหน้า

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

การเพิ่มเนื้อหา

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

เริ่มจากบนสุดก่อนเลย!

ส่วน Header

อย่างที่เราเคยคุยกัน ส่วนของ header นั้นอยู่บนสุดของเว็บไซต์และมีอิลิเมนต์ตัวมันเอง <header> ที่เป็นอิลิเมนต์แรกที่อยู่ภายในแท็ก body

ส่วน header มักจะประกอบไปด้วยบทนำ และ เมนูลิ้งค์ไปยังหน้าอื่น (เรียกว่า navigation หรือเรียกย่อๆ ว่า nav) เว็บไซต์ของเราจะต้องมีการต้อนรับที่อบอุ่นด้วยรูปที่น่ารัก ดังนั้นลองเพิ่มมันเข้าไปเลย

ส่วน Heading

เราต้องแสดงข้อความ "Welcome to Tuts+ Town" บนหน้าเพจ ซึ่งมันเรียกว่าส่วน heading หลัก (main heading)

การทำเว็บโดยทั่วไปเรามี heading อยู่ทั้งหมด 6 ระดับ ซึ่ง h1 นั้นสำคัญที่สุด ส่วน h6 นั้นสำคัญน้อยที่สุด ในข้อความ HTML ที่อยู่ใน heading มักจะเขียนด้วยแท็กต่อไปนี้ <h1>, <h2>, <h3>, <h4>, <h5> หรือ <h6>

"Welcome To Tuts+ Town" นั้นคือ heading หลักของเรา (มันสำคัญมาก) ดังนั้นเราจะพิมพ์มันไว้ระหว่างแท็กเปิดและแท็กปิดของอิลิเมนต์ <h1> นี้

เบราว์เซอร์จะแปลผลและรู้ว่ามันเป็นส่วนของ heading ที่ว่านั่นเอง

รูปเมืองของเรา

ในส่วนของ header เราจะมีรูปน่ารักๆ ของเมืองเรา

ภายใต้โฟลเดอร์หลัก "tutstown" คุณต้องการสร้างอีกโฟลเดอร์ "images" และบันทึกรูปทั้งหมดไว้ที่นั่น

รูปภาพทั้งหลายถูกเพิ่มไว้ภายใต้อิลิเมนต์ <img> ภายในแท็กนี้เราจะต้องใส่ตำแหน่งของรูปภาพหรือที่เรียกว่า source แบบนี้

เห็น / ข้างหลัง src="images" ไหม นั่นเราจะเรียกว่า "ไปที่โฟลเดอร์ image ภายใน / หาไฟล์ชื่อว่า townheader.svg"

จากนั้น ก่อนที่เราจะเสร็จสิ้นแท็ก <img> จะใส่รายละเอียดไว้ภายใต้ แอตทริบิ้วท์ (attribute) alt 

แอตทริบิ้วท์ (Attribute) คือสิ่งที่เราสามารถเพิ่มไปที่อิลิเมนต์ที่ซึ่งช่วยอธิบายเพิ่มเติมให้พวกมัน หรือบอกพวกมันว่ามันทำงานอย่างไร มีเพียงบาง attribute นั้นจะทำงานเฉพาะกับอิลิเมนต์บางตัวเท่านั้น เช่นอิลิเมนต์ <img> จะต้องมีแอตทริบิวต์ src และ alt ด้วยไว้เสมอ

สำคัญมาก อิลิเมนต์ <img> นั้นเป็นแบบต้องปิดแท็กด้วยตัวมันเองหรือเรียกว่า self-closing นี่หมายถึงแท็กเปิดและแท็กปิดจะอยู่ในที่เดียวกัน

ทีนี้มาถึงจุดพีคละ!

ถึงจุดนี้เราสามารถเปิดเว็บไซต์ในเบราว์เซอร์ได้เพื่อเห็นสิ่งที่เราได้ทำลงไป ไปที่โฟลเดอร์ "tutstown" และดับเบิ้ลคลิกไฟล์ที่ชื่อ "index.html" ในส่วนนี้จะทำการเปิดหน้าใหม่ในเบราว์เซอร์

และนี่คือเว็บไซต์ของเรา ขณะนี้มันยังไม่มีอะไรมาก แต่เราก็พร้อมสำหรับการเปลี่ยนแปลงที่จะตามมา จากตรงนี้ เมื่อไหร่ก็ตามที่คุณต้องการดูการเปลี่ยนแปลงในเบราว์เซอร์ คุณสามารถบันทึกหรือเซฟ (save) ไฟล์ HTML และกดปุ่มรีเฟรช (refresh) (ปุ่มไอคอนลูกศรกลมๆ ที่อยู่ด้านบน) ของหน้าต่างเบราว์เซอร์

จากนั้น คุณจะสังเกตว่าเราจะยังไม่เห็นรูปเมฆมาแสดง เพราะว่าเรายังไม่ได้ใส่สีเหลืองให้กับ background เราจะได้เรียนเกี่ยวกับสีของพื้นหลัง ตำแหน่งและขนาดข้อความในบทเรียนถัดไปเมื่อเข้าสู่เรื่องของ CSS

ส่วนหลัก (Main Section)

ในส่วนหลักนี้ของเว็บไซต์ของเราจะประกอบไปด้วยข้อมูลจำนวนหนึ่ง เราจะใส่ข้อมูลที่สำคัญเกี่ยวกับเมืองของเราไว้ในอิลิเมนต์ <main> นี้

ส่วนอื่นๆ (Sections)

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

มีโครงสร้างอื่นๆอีกมากที่จะตามมา!

ภายใน section ของเรา เราจะมีกรอบเล็กๆ ที่จะสร้าง เช่นกล่องเล็กๆ สำหรับข้อความที่อยู่ถัดจากรูปภาพ

งั้นลองทำสิ่งนี้ในเวลาเดียวกัน สำหรับแต่ละ section จะมีรูปใส่อยู่ภายในอิลิเมนต์นั้นพร้อมกับข้อความ

ลองมาดูโครงสร้างเหล่านี้ก่อนที่เราจะใส่เนื้อหาจริงๆ เข้าไป

จากนั้นเรามาคุยกันเรื่องรูปภาพกันก่อน รูปภาพนี้จะถูกเพิ่มในทางเดียวกับภาพหัว แต่ชื่อไฟล์และรายละเอียดจะแตกต่าง

อิลิเมนต์ div

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

ส่วนของหัวและรายการร้านค้าจะอยู่ภายใต้แท็ก <div> นี้

ส่วนหัว (Heading)

เราสามารถเห็นได้ว่าในแต่ละส่วนนั้นจะมีส่วนหัวเล็กๆ เช่น ที่พัก (Sleep), อาหาร (Food) และ ร้านค้า (Shop) สิ่งเหล่านี้จะบอกเราเกี่ยวกับรายการเล็กๆ ทางขวาของแต่ละอัน เราได้ใช้ <h1> สำหรับข้อความแนะนำที่อยู่ด้านบนไปแล้ว ดังนั้นเราจะใช้ <h2>ที่สำคัญลงมาแทนแบบนี้

ลิสต์รายการ (List)

มี list ของ HTML อยู่สองแบบ คือแบบเรียงลำดับ ordered (ด้วยตัวเลข) และไม่เรียงลำดับ unordered (จะแสดงปุ่มสีดำแทนที่จะเป็นตัวเลข) ทั้งคู่นั้นเหมาะมากที่จะแสดงข้อมูลในรูปแบบรายการ และแต่ละ section ของเว็บไซต์เราจะมี unordered list (<ul>) กับสิ่งสองอย่าง

ที่ใส่ไว้ภายใต้ลิสต์ใหญ่นั้นคือ list item ซึ่งแต่ละอันนั้นจะเขียนอยู่ภายใต้แท็ก <li>

ลิ้งค์เชื่อมโยง (Link)

ลิสต์ต่างๆที่เราเพิ่งเพิ่มเข้าไปนั้นเราจะลิ้งค์ไปที่เว็บไซต์ของร้านค้าอื่น ดังนั้นผู้เข้าเยี่ยมชมของเราสามารถคลิกมันเพื่อรับข้อมูลเพิ่มเติม เพื่อที่จะแปลงคำแต่ละคำ (หรือหลายๆ คำ) ไปเป็นลิ้งค์ที่คลิกได้ เราต้องครอบคำเหล่านั้นด้วย anchor tag หรือที่เราเรียกกันว่าแท็ก a ซึ่งมันจะเขียนด้วยสัญลักษณ์นี้ <a>

เหมือนกันกับทำให้อิลิเมนต์ <img>  นั้นมีแอตทริบิวต์พิเศษ ในส่วนของการเปิดแท็ก <a> เราจะต้องใส่แอตทริบิวต์ที่บ่งบอกถึงตำแหน่งที่อยู่ของเว็บที่เราต้องการไป (web address) ด้วยแอตทริบิวต์ href

โค้ดส่วนที่เราตามมาจะเป็นตัวอย่างการสร้างลิ้งค์ที่เชื่อมต่อจากคำว่า "here" ไปยังเว็บๆ นี้ http://tutsplus.com/

นั่นคือวิธีที่แน่นอนในการเพิ่มลิ้งค์ไปที่รายการของเรา ด้วยการใส่ชื่อร้านไว้ภายใต้แท็ก a นั้น ทั้งการเปิดและปิดแท็ก a จะอยู่ภายใน list item <li> ความแตกต่างนั้นเพราะ สิ่งเหล่านี้ไม่ใช่ร้านค้าจริงๆ ที่จะไปยังเว็บจริงๆ เราจะใส่ # ไว้ใน href เพื่อที่จะไม่ทำให้เราไปยังเว็บอื่น คืออยู่ที่เดิมนั่นเอง

และนี่คือผลงานของรายการร้านค้าที่ที่แสดงขึ้นมา

เราได้สร้าง unordered list และเอา list item ใส่ไว้ภายใต้มันนั้น ยิ่งกว่านั้นเราจะครอบชื่อร้านของเราด้วยแท็ก a อีกด้วย จำไว้ว่า เรายังไม่ได้ใส่สไตล์ใดๆ ในขณะนี้ ซึ่งสีของลิ้งค์จะแสดงสีน้ำเงินซึ่งเป็นค่า default แทนที่จะเป็นสีส้ม

ส่วนของการ Wrap Up

หลังจากเรามีส่วนของ section เต็มที่แล้ว เราจะต้องการย้อนสิ่งเหล่านี้ให้เป็นขั้นที่แน่นอนสำหรับสอง section สุดท้าย แต่ละครั้งเราต้องการแน่ใจว่าเนื้อหามีการเปลี่ยนแปลง ส่วนของโครงสร้าง HTML นั้นจะเหมือนเดิมสำหรับทั้งสาม section แต่ข้อความและรูปภาพนั้นจะแตกต่างกันออกไป

จากนั้น เรามารีวิวโค้ดของ section ทั้ง 3 อันกัน โอ้! มันเยอะมาก!

ส่วนท้ายด้านล่างของเว็บ (Footer)

<footer> นั้นจะเป็นอิลิเมนต์แรกหลังจากแท็กปิดของอิลิเมนต์ <main> มันจะไม่ใส่ภายใต้ main นั้น

เราสามารถเพิ่มอิลิเมนต์ footer เข้าไปในเพจ ซึ่งจะแสดงไว้ในระดับเดียวกับ main เพราะว่าพวกมันนั้นอยู่ภายใต้ body อยู่แล้ว

มีเพียงแค่เนื้อหาเล็กน้อยเท่านั้นที่ใส่ไว้ใน footer เป็นประโยคที่บอกว่าเว็บนี้ใครเป็นคนทำขึ้น (แน่นอน! นั่นคือเรา) ส่วนของเนื้อหาจะถูกครอบไว้ภายใต้แท็ก <p> (อิลิเมนต์ paragraph) ที่ซึ่งใส่ไว้ข้างใน footer อีกที

มาดูพรีวิวแบบเต็มๆ กัน

คุณได้ทำการเซฟเอกสาร HTML ที่ทำขึ้นด้วยตนเองไหม พร้อมกับทั้งรีเฟรชเบราว์เซอร์ที่เราทำงาน ฉันก็ด้วย งั้นมองหน้าตาที่เราได้ทำกัน

ลองมองกลับไปที่อิลิเมนต์ที่เราได้ใช้

เรานั้นได้คุยเเกี่ยวกับอิลิเมนต์ที่แตกต่างจำนวนมากที่นี่ ดังนั้นเรามารีวิวหนึ่งในนั้นที่ใช้ในไฟล์ HTML ของเรากัน

<html> ไว้ครอบ HTML ทั้งหมด
<head> ที่ๆ เราเขียนข้อมูลเกี่ยวกับเว็บไซต์
<title> หัวข้อของเว็บไซต์ (หรือชื่อด้านบนของ tab)
<body> ครอบเนื้อหาที่แสดงออกจอทั้งหมด
<header> ครอบส่วนของข้อความต้อนรับ
<h1> , <h2> ส่วนของ heading หรือส่วนหัวของเรา
<img> ใส่รูปภาพเข้าไปในเพจ
<main> ไว้เก็บเนื้อหาหลัก (main content)
<section> แบ่งเพจออกเป็น section
<div> อิลิเมนต์สารพัดประโยชน์
<ul> สำหรับใส่รายการที่ไม่ได้เรียงลำดับ (unordered list)
<li> รายการแต่ละอันในรายการรวม
<a> สำหรับทำ link ไปที่อื่น
<footer> เนื้อหาส่วนท้ายสุด

สรุป

ในบทเรียนนี้เราได้เรียนรู้ว่าจะใส่เนื้อหาเข้าไปในโครงสร้าง HTML ได้อย่างไร เราทำด้วยมือเปล่าๆของเราเอง (แน่นอนใช้คอมพิวเตอร์ด้วย)

ถัดไปเราจะได้เรียนรู้เกี่ยวกับ การสไตล์หรือใส่สีสันให้กับเพจเพื่อให้มันดูสวยงาม และยังง่ายต่อการอ่านและใช้งานอีกด้วย

แล้วเจอกัน

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.