การทำเว็บไซต์สำหรับเด็ก - โครงสร้างไฟล์ HTML

() translation by (you can also view the original English article)

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

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

ถ้าคุณเปรียบเทียบขั้นตอนการสร้างเมือง การเขียน HTML เหมือนกับการวางรากฐานหรือวางโครงสร้างของตัวเมือง มันคือพื้นฐานของทุกสิ่งที่กำลังจะสร้างลงมา

ที่สำคัญ ทุกไฟล์ที่เราจะสร้างในบทเรียนนี้ สามารถ Download ที่นี่เพื่อดูได้เลย

จริงๆ แล้ว HTML คืออะไร

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

HyperText Markup Language (HTML) คือภาษาที่ใช้สร้างมาร์คอัพ (mark up) เนื้อหาของเว็บไซต์เพื่อให้เบราว์เซอร์สามารถเข้าใจและแสดงมันที่จอภาพได้ มันใส่โครงสร้างให้กับ text file ทั่วๆไปให้เบราว์นั้นสามารถอ่านและตีความได้

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

อิลิเมนต์ (Element)

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

แท็กเปิดและแท็กปิดเหล่านี้สำหรับแต่ละ element จะถูกเขียนขึ้นภายใต้สัญลักษณ์ (< >), นอกจากนี้แท็กปิดต้องมีเครื่องหมายทับด้วย (เช่น < / >)

เริ่มวางแผนโครงสร้าง

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

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

ภายใน body ของไฟล์ HTML ของเรา เราจะมีอิลิเมนต์หลักๆ คือ header, main และ footer

เริ่มเตรียมเอกสารของเราได้

เรายังต้องคุยเกี่ยวกับวิธีติดตั้งไฟล์เว็บไซต์ในบทก่อนหน้า จากนั้นเรากำลังทำสิ่งเหล่านี้ให้เป็นจริง

เริ่มแรกเลยสร้าง folder บนคอมพิวเตอร์ของเราชื่อ "tutsfolder"
จากนั้นถึงเวลาเปิด text editor แล้วเตรียมความพร้อมสำหรับเรื่องตื่นตาตื่นใจที่กำลังจะเกิดขึ้น
ถัดไป สร้างไฟล์ใหม่ด้วย editor นี้ (ทั่วไปก็โดยการเลือก File > New File) จากนั้น save ไว้ในชื่อ "index.html" เอาไว้ใน "tutsfolder"

จำไว้ว่า "index" คือชื่อไฟล์ และ .html คือนามสกุลของไฟล์ที่เป็นตัวบอกชนิดของไฟล์นั้น

เว็บไซต์นั้นจากเพจ เริ่มจากหนึ่งเพจจนถึงหลายๆเพจต่อๆ กัน ซึ่งเพจหลักจะชื่อ "index.html" เสมอ เพื่อบอกว่า "เฮ้ นี่คือจุดเริ่มต้นนะพวก!"

จากนั้นก็เริ่มสร้าง HTML กันเสียที

สร้างโครงสร้าง

เราจะเพิ่มโครงเข้าไป อีกครั้ง คิดเสียว่าเรากำลังก่ออิฐบ้านของเรา โดยมีโครงวางไว้ก่อน

HTML อันแรกที่เราต้องเขียนเลยคือ <!DOCTYPE html> นี่เป็นการบอกเบราว์เซอร์ว่า "เฮ้ นี่คือ HTML document นะ"

1	<!DOCTYPE html>

จากนั้น เราต้องการต่อด้วย อิลิเมนต์ <html>

1	<!DOCTYPE html>
2	<html>
3
4	</html>

ทุกอย่างจะใส่ไว้ภายใต้อิลิเมนต์นี้ ภาษาอังกฤษเรียกว่า nesting

อะไรนะ Nesting?

"ใช่ คล้ายๆ กับเอาไข่ใส่รังนกนั่นแหละ" หรือบางทีเหมือนตุ๊กตามาเรียงซ้อนกัน หรือเพื่อให้เห็นภาพเหมือนด้านล่าง การต่อตึกนั่นไง Nesting คือการเรียงเอาวัตถุหนึ่งใส่ไว้ใต้วัตถุอีกอัน ซ้อนกันไปเรื่อยๆ

ในโค้ดด้านล่างแสดงดึง element paragraph ที่อยู่ภายใต้ element body เพราะว่ามันอยู่ภายใต้แท็กเปิดและแท็กปิดของแท็ก body

1	<body>
2	<p>This paragraph element is nested inside the body element.</p>
3	</body>

เราจะทำให้โค้ดใน HTML ของเราอ่านง่ายขึ้นด้วยการทำย่อหน้า element ที่ซ้อนกันข้างในไปทางขวา แบบนี้

OK กลับไปงานเราต่อ

ส่วนหัว (Head)

จากนั้นเราจะใส่อิลิเมนต์ html ไว้ภายใต้อิลิเมนต์ head

head นั้นจะประกอบไปด้วยแท็ก title สำหรับหัวข้อเว็บของเราที่จะแสดงด้านบนแท็บของ browser เราใช้การ nesting เสียเยอะเลยนะ

<html>
    <head>
        <title>Tuts Town</title>
    </head>
</html>

หลายอย่างที่เราใส่ไว้ในส่วน head ของเอกสาร HTML นั้นจะไม่ปรากฏบนเว็บไซต์ให้เราได้เห็นโดยตรง แต่มันจะช่วยบอก search engine เช่น Google ว่าเว็บไซต์ของเรานั้นเกี่ยวกับเรื่องอะไร

ยิ่งไปกว่านั้น หลังจากที่เราสร้างไฟล์ใหม่โดยเพิ่ม style ให้กับอันล่าสุดนี้ เราจะเชื่อมเอกสารสองอันเข้าด้วยกันด้วย link ในส่วนของ head ดังนั้น มันเหมือนกับการศูนย์ควบคุมเบื้องหลังที่ผู้ชมไม่สามารถเห็นส่วนของมันได้โดยตรง

ส่วน Body

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

ส่วน Header

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

ส่วนแรกสุดที่เราต้องเอาไว้บนหัวของเว็บไซต์คือส่วนของ header ที่ประกอบไปด้วยตัวอักษรและรูปภาพที่แสดงถึงเมืองของเรา

<html>
    <head>
        <title>Tuts Town</title>
    </head>
    <body>
        <header></header>
    </body>
</html>

เราเพียงแค่สร้างอิลิเมนต์ header ไว้รอเท่านั้น เตรียมเพื่อเอาเนื้อหาลงถัดไป

ในส่วนของ Main

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

เราจะคุยเกี่ยวกับแท็กที่เล็กลง (อย่างเช่นกลุ่มสามกลุ่มด้านล่าง คือ กลุ่มที่พักอาศัย (Sleep) อาหาร (Food) และ ร้านค้า (Shop) ภายใต้แท็กใหญ่ main ในบทเรียนถัดไปเราจะเพิ่มเนื้อหาเข้าไปเพิ่มเติม

ส่วนของ Footer

ส่วนของ footer คือส่วนสุดท้ายของเว็บไซต์เรา เรามักจะเห็น link บางอย่างที่นี่เสมอ อย่างเช่น Facebook และ Twitter หรือข้อความสั้นๆ ที่ให้ผู้ชมรู้ว่าใครสร้างเว็บนี้ขึ้นมา

เราจะเขียนประโยคภูมิใจนำเสนอภายใต้อิลิเมนต์ footer นี้

1	<footer> </footer>

จำไว้ว่า ในจุดนี้เราจะยังเพิ่มอิลิเมนต์ไว้ภายใต้แท็ก body

รีวิวครั้งสุดท้าย

และแล้ว เริ่มรีวิวโครงสร้าง HTML ของเราได้เลย

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

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

สั้นๆ กับวิธีการเขียนคอมเม้นต์

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

1	<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->

ไฟล์ HTML ของบทเรียนนี้ (คุณสามารถ download ได้ที่นี่) มีคอมเม้นต์จำนวนหนึ่งที่ช่วยให้เราเข้าใจโค้ดมากยิ่งขึ้น

เยี่ยมมาก!

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

บทเรียนถัดไป เราจะเพิ่มข้อความและรูปภาพในยังโครงสร้างที่เราเพิ่งสร้างขึ้น

แล้วเจอกันรอบๆ เมืองเช่นเดิม