() translation by (you can also view the original English article)
ยินดีต้อนรับสู่บทเรียนที่สี่ของซีรีย์ การทำเว็บไซต์สำหรับเด็ก ของเรา วันนี้เราจะมาใส่เนื้อหาลงใน HTML กัน
ในบทเรียนก่อนหน้า เราได้ลองเขียนโค้ดโครงสร้าง HTML และได้เรียนรู้กับอิลิเมนต์ของมันบางตัว จากนี้ไปเราจะเพิ่มเนื้อหาของเว็บไซต์เข้าไปยังโครงสร้างที่เราได้เขียนขึ้น
เตือนความจำนิดนึง ไฟล์ที่เสร็จแล้วของบทเรียนนี้สามารถดาวน์โหลดได้ที่นี่ เอาไปดูกันก่อนได้เลย และถ้าคุณติดขัดหรือเจออุปสรรคใดๆ ถามคำถามในกล่องคอมเม้นต์ด้านล่างบทความนี้ได้ทันที
กล่องคอนเทนเนอร์
เราจะต้องได้คุยเกี่ยวกับคอนเทนเนอร์อีกหลายครั้งในการสร้างเว็บไซต์ ดังนั้นมันสำคัญมากที่ต้องเข้าใจว่ามันคืออะไร
เนื้อหาของเราทั้งหมดจะถูกวางไว้ภายใต้คอนเทนเนอร์ HTML แต่ละอันนั้นถูกจัดด้วยอิลิเมนต์ HTML แต่ละอิลิเมนต์มีความหมายพิเศษในตัวมันเอง มันช่วยให้เบราว์เซอร์เข้าใจสิ่งต่างๆ บนหน้าเพจแต่ละหน้า
เมื่อมองดูอีกแง่ ภาพวาดน่ารักด้านบน ตัวสิ่งก่อสร้างนั้นจะเป็นกล่องคอนเทนเนอร์สำหรับใส่หน้าต่าง ประตู และ นาฬิกา เข้าไป หน้าต่างหนึ่งในนั้นก็เป็นกล่องคอนเทนเนอร์ที่ภายในมีนักออกแบบอยู่
การเพิ่มเนื้อหา
จากโครงสร้างที่เป็นคอนเทนเนอร์ที่เรามีอยู่แล้ว เราจะใส่เนื้อหาเข้าไปภายในนั้น อิลิเมนต์ทั้งหมดที่เราเพิ่มเข้าไปในไฟล์ของเราในบทเรียนที่แล้ว ช่วยให้เราจัดเรียงสิ่งต่างๆ ได้ง่ายขึ้น มันช่วยให้สถานที่ที่เราสามารถใส่ข้อความและรูปภาพเข้าไปได้
เริ่มจากบนสุดก่อนเลย!
ส่วน Header
อย่างที่เราเคยคุยกัน ส่วนของ header นั้นอยู่บนสุดของเว็บไซต์และมีอิลิเมนต์ตัวมันเอง <header> ที่เป็นอิลิเมนต์แรกที่อยู่ภายในแท็ก body
1 |
<body>
|
2 |
<header> </header> |
3 |
</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> นี้
1 |
<header>
|
2 |
<h1>Welcome To Tuts+ Town</h1> |
3 |
</header>
|
เบราว์เซอร์จะแปลผลและรู้ว่ามันเป็นส่วนของ heading ที่ว่านั่นเอง
รูปเมืองของเรา
ในส่วนของ header เราจะมีรูปน่ารักๆ ของเมืองเรา
ภายใต้โฟลเดอร์หลัก "tutstown" คุณต้องการสร้างอีกโฟลเดอร์ "images" และบันทึกรูปทั้งหมดไว้ที่นั่น
รูปภาพทั้งหลายถูกเพิ่มไว้ภายใต้อิลิเมนต์ <img> ภายในแท็กนี้เราจะต้องใส่ตำแหน่งของรูปภาพหรือที่เรียกว่า source แบบนี้
1 |
<img src="images/townheader.svg" |
เห็น / ข้างหลัง src="images" ไหม นั่นเราจะเรียกว่า "ไปที่โฟลเดอร์ image ภายใน / หาไฟล์ชื่อว่า townheader.svg"
จากนั้น ก่อนที่เราจะเสร็จสิ้นแท็ก <img> จะใส่รายละเอียดไว้ภายใต้ แอตทริบิ้วท์ (attribute) alt
1 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
แอตทริบิ้วท์ (Attribute) คือสิ่งที่เราสามารถเพิ่มไปที่อิลิเมนต์ที่ซึ่งช่วยอธิบายเพิ่มเติมให้พวกมัน หรือบอกพวกมันว่ามันทำงานอย่างไร มีเพียงบาง attribute นั้นจะทำงานเฉพาะกับอิลิเมนต์บางตัวเท่านั้น เช่นอิลิเมนต์ <img> จะต้องมีแอตทริบิวต์ src และ alt ด้วยไว้เสมอ
สำคัญมาก อิลิเมนต์ <img> นั้นเป็นแบบต้องปิดแท็กด้วยตัวมันเองหรือเรียกว่า self-closing นี่หมายถึงแท็กเปิดและแท็กปิดจะอยู่ในที่เดียวกัน
ทีนี้มาถึงจุดพีคละ!
ถึงจุดนี้เราสามารถเปิดเว็บไซต์ในเบราว์เซอร์ได้เพื่อเห็นสิ่งที่เราได้ทำลงไป ไปที่โฟลเดอร์ "tutstown" และดับเบิ้ลคลิกไฟล์ที่ชื่อ "index.html" ในส่วนนี้จะทำการเปิดหน้าใหม่ในเบราว์เซอร์
และนี่คือเว็บไซต์ของเรา ขณะนี้มันยังไม่มีอะไรมาก แต่เราก็พร้อมสำหรับการเปลี่ยนแปลงที่จะตามมา จากตรงนี้ เมื่อไหร่ก็ตามที่คุณต้องการดูการเปลี่ยนแปลงในเบราว์เซอร์ คุณสามารถบันทึกหรือเซฟ (save) ไฟล์ HTML และกดปุ่มรีเฟรช (refresh) (ปุ่มไอคอนลูกศรกลมๆ ที่อยู่ด้านบน) ของหน้าต่างเบราว์เซอร์
จากนั้น คุณจะสังเกตว่าเราจะยังไม่เห็นรูปเมฆมาแสดง เพราะว่าเรายังไม่ได้ใส่สีเหลืองให้กับ background เราจะได้เรียนเกี่ยวกับสีของพื้นหลัง ตำแหน่งและขนาดข้อความในบทเรียนถัดไปเมื่อเข้าสู่เรื่องของ CSS
ส่วนหลัก (Main Section)
ในส่วนหลักนี้ของเว็บไซต์ของเราจะประกอบไปด้วยข้อมูลจำนวนหนึ่ง เราจะใส่ข้อมูลที่สำคัญเกี่ยวกับเมืองของเราไว้ในอิลิเมนต์ <main> นี้
1 |
<body>
|
2 |
<header>
|
3 |
<h1>Welcome To Tuts+ Town</h1> |
4 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
5 |
</header>
|
6 |
<main>
|
7 |
</main>
|
8 |
</body>
|
ส่วนอื่นๆ (Sections)
เรามีกลุ่มที่เกี่ยวข้องสามกลุ่มบนหน้าเว็บไซต์ของเราที่ซึ่งเราจะจัดมันไว้ในสาม section คำว่า section คือส่วนเดี่ยวๆ ของเว็บไซต์ที่มีข้อมูล เรามักจะใช้อิลิเมนต์แยกออกมาคือ <section>
1 |
<main>
|
2 |
<section> </section> |
3 |
<section> </section> |
4 |
<section> </section> |
5 |
</main>
|
มีโครงสร้างอื่นๆอีกมากที่จะตามมา!
ภายใน section ของเรา เราจะมีกรอบเล็กๆ ที่จะสร้าง เช่นกล่องเล็กๆ สำหรับข้อความที่อยู่ถัดจากรูปภาพ
งั้นลองทำสิ่งนี้ในเวลาเดียวกัน สำหรับแต่ละ section จะมีรูปใส่อยู่ภายในอิลิเมนต์นั้นพร้อมกับข้อความ
ลองมาดูโครงสร้างเหล่านี้ก่อนที่เราจะใส่เนื้อหาจริงๆ เข้าไป
1 |
<section>
|
2 |
<img /> |
3 |
<div>
|
4 |
</div>
|
5 |
</section>
|
จากนั้นเรามาคุยกันเรื่องรูปภาพกันก่อน รูปภาพนี้จะถูกเพิ่มในทางเดียวกับภาพหัว แต่ชื่อไฟล์และรายละเอียดจะแตกต่าง
1 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
อิลิเมนต์ div
อิลิเมนต์ <div> นั้นจะค่อนข้างเป็นอิลิเมนต์สารพัดประโยชน์เลย มันอนุญาตให้เราจัดกลุ่มส่วนต่างๆ ของหน้าซึ่งไม่มีอิลิเมนต์อื่นที่เหมาะกว่านี้อีกแล้ว
1 |
<div>
|
2 |
<img /> |
3 |
<div>
|
4 |
<!-- A heading and shop list will be added here -->
|
5 |
</div>
|
6 |
</div>
|
ส่วนของหัวและรายการร้านค้าจะอยู่ภายใต้แท็ก <div> นี้
ส่วนหัว (Heading)
เราสามารถเห็นได้ว่าในแต่ละส่วนนั้นจะมีส่วนหัวเล็กๆ เช่น ที่พัก (Sleep), อาหาร (Food) และ ร้านค้า (Shop) สิ่งเหล่านี้จะบอกเราเกี่ยวกับรายการเล็กๆ ทางขวาของแต่ละอัน เราได้ใช้ <h1> สำหรับข้อความแนะนำที่อยู่ด้านบนไปแล้ว ดังนั้นเราจะใช้ <h2>ที่สำคัญลงมาแทนแบบนี้
1 |
<section>
|
2 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
3 |
<div>
|
4 |
<h2>Sleep</h2> |
5 |
</div>
|
6 |
</section>
|
ลิสต์รายการ (List)
มี list ของ HTML อยู่สองแบบ คือแบบเรียงลำดับ ordered (ด้วยตัวเลข) และไม่เรียงลำดับ unordered (จะแสดงปุ่มสีดำแทนที่จะเป็นตัวเลข) ทั้งคู่นั้นเหมาะมากที่จะแสดงข้อมูลในรูปแบบรายการ และแต่ละ section ของเว็บไซต์เราจะมี unordered list (<ul>) กับสิ่งสองอย่าง
ที่ใส่ไว้ภายใต้ลิสต์ใหญ่นั้นคือ list item ซึ่งแต่ละอันนั้นจะเขียนอยู่ภายใต้แท็ก <li>
1 |
<ul>
|
2 |
<li></li>
|
3 |
<li></li>
|
4 |
</ul>
|
ลิ้งค์เชื่อมโยง (Link)
ลิสต์ต่างๆที่เราเพิ่งเพิ่มเข้าไปนั้นเราจะลิ้งค์ไปที่เว็บไซต์ของร้านค้าอื่น ดังนั้นผู้เข้าเยี่ยมชมของเราสามารถคลิกมันเพื่อรับข้อมูลเพิ่มเติม เพื่อที่จะแปลงคำแต่ละคำ (หรือหลายๆ คำ) ไปเป็นลิ้งค์ที่คลิกได้ เราต้องครอบคำเหล่านั้นด้วย anchor tag หรือที่เราเรียกกันว่าแท็ก a ซึ่งมันจะเขียนด้วยสัญลักษณ์นี้ <a>
เหมือนกันกับทำให้อิลิเมนต์ <img> นั้นมีแอตทริบิวต์พิเศษ ในส่วนของการเปิดแท็ก <a> เราจะต้องใส่แอตทริบิวต์ที่บ่งบอกถึงตำแหน่งที่อยู่ของเว็บที่เราต้องการไป (web address) ด้วยแอตทริบิวต์ href
โค้ดส่วนที่เราตามมาจะเป็นตัวอย่างการสร้างลิ้งค์ที่เชื่อมต่อจากคำว่า "here" ไปยังเว็บๆ นี้ https://tutsplus.com/
1 |
For more tutorials click <a href="https://tutsplus.com/">here</a>. |
นั่นคือวิธีที่แน่นอนในการเพิ่มลิ้งค์ไปที่รายการของเรา ด้วยการใส่ชื่อร้านไว้ภายใต้แท็ก a นั้น ทั้งการเปิดและปิดแท็ก a จะอยู่ภายใน list item <li> ความแตกต่างนั้นเพราะ สิ่งเหล่านี้ไม่ใช่ร้านค้าจริงๆ ที่จะไปยังเว็บจริงๆ เราจะใส่ # ไว้ใน href เพื่อที่จะไม่ทำให้เราไปยังเว็บอื่น คืออยู่ที่เดิมนั่นเอง
และนี่คือผลงานของรายการร้านค้าที่ที่แสดงขึ้นมา
1 |
<ul>
|
2 |
<li><a href="#">The Snooze Inn</a></li> |
3 |
</ul>
|
เราได้สร้าง unordered list และเอา list item ใส่ไว้ภายใต้มันนั้น ยิ่งกว่านั้นเราจะครอบชื่อร้านของเราด้วยแท็ก a อีกด้วย จำไว้ว่า เรายังไม่ได้ใส่สไตล์ใดๆ ในขณะนี้ ซึ่งสีของลิ้งค์จะแสดงสีน้ำเงินซึ่งเป็นค่า default แทนที่จะเป็นสีส้ม
ส่วนของการ Wrap Up
หลังจากเรามีส่วนของ section เต็มที่แล้ว เราจะต้องการย้อนสิ่งเหล่านี้ให้เป็นขั้นที่แน่นอนสำหรับสอง section สุดท้าย แต่ละครั้งเราต้องการแน่ใจว่าเนื้อหามีการเปลี่ยนแปลง ส่วนของโครงสร้าง HTML นั้นจะเหมือนเดิมสำหรับทั้งสาม section แต่ข้อความและรูปภาพนั้นจะแตกต่างกันออกไป
จากนั้น เรามารีวิวโค้ดของ section ทั้ง 3 อันกัน โอ้! มันเยอะมาก!
1 |
<main>
|
2 |
<section>
|
3 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
4 |
<div>
|
5 |
<h2>Sleep</h2> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="#">The Snooze Inn</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="#">Zzz Hotel</a> |
12 |
</li>
|
13 |
</ul>
|
14 |
</div>
|
15 |
</section>
|
16 |
|
17 |
<section>
|
18 |
<img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." /> |
19 |
<div>
|
20 |
<h2>Food</h2> |
21 |
<ul>
|
22 |
<li>
|
23 |
<a href="#">Just Cookies</a> |
24 |
</li>
|
25 |
<li>
|
26 |
<a href="#">Cake Too</a> |
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</section>
|
31 |
|
32 |
<section>
|
33 |
<img src="images/townshop.svg" alt="Illustration of a Tuts Town store." /> |
34 |
<div>
|
35 |
<h2>Shop</h2> |
36 |
<ul>
|
37 |
<li>
|
38 |
<a href="#">Puppy Parade</a> |
39 |
</li>
|
40 |
<li>
|
41 |
<a href="#">Cool Kittens</a> |
42 |
</li>
|
43 |
</ul>
|
44 |
</div>
|
45 |
</section>
|
46 |
</main>
|
ส่วนท้ายด้านล่างของเว็บ (Footer)
<footer> นั้นจะเป็นอิลิเมนต์แรกหลังจากแท็กปิดของอิลิเมนต์ <main> มันจะไม่ใส่ภายใต้ main นั้น
เราสามารถเพิ่มอิลิเมนต์ footer เข้าไปในเพจ ซึ่งจะแสดงไว้ในระดับเดียวกับ main เพราะว่าพวกมันนั้นอยู่ภายใต้ body อยู่แล้ว
มีเพียงแค่เนื้อหาเล็กน้อยเท่านั้นที่ใส่ไว้ใน footer เป็นประโยคที่บอกว่าเว็บนี้ใครเป็นคนทำขึ้น (แน่นอน! นั่นคือเรา) ส่วนของเนื้อหาจะถูกครอบไว้ภายใต้แท็ก <p> (อิลิเมนต์ paragraph) ที่ซึ่งใส่ไว้ข้างใน footer อีกที
1 |
<footer>
|
2 |
<p>Created with enthusiasm by caring residents.</p> |
3 |
</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 ได้อย่างไร เราทำด้วยมือเปล่าๆของเราเอง (แน่นอนใช้คอมพิวเตอร์ด้วย)
ถัดไปเราจะได้เรียนรู้เกี่ยวกับ การสไตล์หรือใส่สีสันให้กับเพจเพื่อให้มันดูสวยงาม และยังง่ายต่อการอ่านและใช้งานอีกด้วย
แล้วเจอกัน
