โครงสร้างเอกสาร

เอกสาร HTML มีการประกาศประเภทเอกสารและองค์ประกอบรูท <html> องค์ประกอบที่ฝังอยู่ในองค์ประกอบ <html> คือส่วนหัวของเอกสารและเนื้อหาเอกสาร แม้ว่าผู้เข้าชมที่มองเห็นจะมองไม่เห็นหัวของเอกสาร แต่สิ่งสำคัญก็คือการทำให้เว็บไซต์ของคุณใช้งานได้ ซึ่งประกอบด้วยข้อมูลเมตาทั้งหมด รวมถึงข้อมูลสำหรับเครื่องมือค้นหาและผลลัพธ์ในโซเชียลมีเดีย ไอคอนสำหรับแท็บเบราว์เซอร์และทางลัดหน้าจอหลักของอุปกรณ์เคลื่อนที่ ตลอดจนลักษณะการทำงานและการนำเสนอเนื้อหา ในส่วนนี้ คุณจะพบคอมโพเนนต์ที่แม้จะไม่แสดงอยู่ในเกือบทุกหน้าเว็บ

ในการสร้างเว็บไซต์ MachineLearningWorkshop.com (MLW) ให้เริ่มด้วยการใส่คอมโพเนนต์ที่ควรพิจารณาว่าจำเป็นต่อหน้าเว็บทุกหน้า ได้แก่ ประเภทของเอกสาร ภาษามนุษย์ของเนื้อหา ชุดอักขระ และชื่อของเว็บไซต์หรือแอปพลิเคชัน

เพิ่มไปยังเอกสาร HTML ทั้งหมด

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

<!DOCTYPE html>

สิ่งแรกในเอกสาร HTML ก็คือคำย่อ ใช้ <!DOCTYPE html> เพียงอย่างเดียวสำหรับ HTML นี่อาจดูเหมือนองค์ประกอบ HTML แต่ที่จริงแล้วไม่เป็นเช่นนั้น ซึ่งเป็นโหนดชนิดพิเศษที่เรียกว่า "doctype" DOCTYPE จะบอกเบราว์เซอร์ให้ใช้โหมดมาตรฐาน หากไม่ระบุ เบราว์เซอร์จะใช้โหมดการแสดงผลอื่นที่เรียกว่าโหมดที่ไม่มาตรฐาน การรวม DOCTYPE จะช่วยป้องกันโหมดที่ไม่มาตรฐาน

<html>

องค์ประกอบ <html> เป็นองค์ประกอบรูทสำหรับเอกสาร HTML เป็นระดับบนสุดของ <head> และ <body> ที่มีทุกอย่างในเอกสาร HTML นอกเหนือจาก DOCTYPE หากไม่ใส่ จะถือว่าระบุเป็นนัย แต่สิ่งสำคัญคือต้องใส่ไว้ด้วย เนื่องจากนี่คือองค์ประกอบที่ใช้ประกาศภาษาของเนื้อหาในเอกสาร

ภาษาของเนื้อหา

แอตทริบิวต์ภาษา lang ที่เพิ่มลงในแท็ก <html> จะกำหนดภาษาหลักของเอกสาร ค่าของแอตทริบิวต์ lang คือรหัสภาษา ISO 2 หรือ 3 ตัวอักษรตามด้วยภูมิภาค ภูมิภาคเป็นตัวเลือกที่ไม่บังคับ แต่แนะนำให้มี เนื่องจากภาษาในแต่ละภูมิภาคอาจแตกต่างกันอย่างมาก ตัวอย่างเช่น ภาษาฝรั่งเศสแตกต่างกันมากในแคนาดา (fr-CA) เทียบกับบูร์กินาฟาโซ (fr-BF) การประกาศภาษานี้ช่วยให้โปรแกรมอ่านหน้าจอ เครื่องมือค้นหา และบริการแปลภาษารู้ภาษาของเอกสาร

แอตทริบิวต์ lang ไม่ได้จำกัดเฉพาะแท็ก <html> หากมีข้อความในหน้าเว็บที่เป็นภาษาอื่นที่ไม่ใช่ภาษาของเอกสารหลัก ควรใช้แอตทริบิวต์ lang เพื่อระบุข้อยกเว้นสำหรับภาษาหลักภายในเอกสาร แอตทริบิวต์ lang ในร่างกายจะไม่แสดงผลเช่นเดียวกับเวลาที่อยู่ในส่วนหัว วิธีนี้เป็นเพียงการเสริมความหมายโดยเปิดให้เทคโนโลยีความช่วยเหลือพิเศษและบริการอัตโนมัติทราบภาษาของเนื้อหาที่ได้รับผลกระทบ

นอกเหนือจากการตั้งค่าภาษาสำหรับเอกสารและข้อยกเว้นสำหรับภาษาฐานนั้นแล้ว ยังสามารถใช้แอตทริบิวต์ในตัวเลือก CSS ได้ด้วย กำหนดเป้าหมาย <span lang="fr-fr">Ceci n'est pas une pipe.</span> ได้ด้วยตัวเลือกแอตทริบิวต์และภาษา [lang|="fr"] และ :lang(fr)

เราพบแท็กย่อย 2 รายการคือ <head> และ <body> ซึ่งอยู่ระหว่างแท็กเปิดและแท็กปิด <html>

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> หรือส่วนหัวข้อมูลเมตาของเอกสารมีข้อมูลเมตาทั้งหมดสำหรับเว็บไซต์หรือแอปพลิเคชัน ส่วนเนื้อหามีเนื้อหาที่มองเห็นได้ ส่วนที่เหลือของส่วนนี้เน้นที่คอมโพเนนต์ที่พบว่าฝังอยู่ภายในการเปิดและปิด <head></head>

คอมโพเนนต์ที่จำเป็นภายใน <head>

ข้อมูลเมตาของเอกสาร ได้แก่ ชื่อเอกสาร, ชุดอักขระ, การตั้งค่าวิวพอร์ต, คำอธิบาย, URL ฐาน, ลิงก์สไตล์ชีต และไอคอนในองค์ประกอบ <head> แม้ว่าคุณอาจไม่จำเป็นต้องใช้ฟีเจอร์เหล่านี้ทั้งหมด แต่ให้ใส่ชุดอักขระ ชื่อ และการตั้งค่าวิวพอร์ตไว้ด้วยเสมอ

การเข้ารหัสอักขระ

องค์ประกอบแรกใน <head> ควรเป็นการประกาศการเข้ารหัสอักขระ charset ซึ่งอยู่ก่อนชื่อเพื่อให้มั่นใจว่าเบราว์เซอร์จะแสดงอักขระในชื่อนั้นและอักขระทั้งหมดในส่วนที่เหลือของเอกสารได้

การเข้ารหัสเริ่มต้นในเบราว์เซอร์ส่วนใหญ่คือ windows-1252 ขึ้นอยู่กับภาษา อย่างไรก็ตาม คุณควรใช้ UTF-8 เพราะตัวเลือกนี้จะเปิดใช้การเข้ารหัสแบบ 1-4 ไบต์ของอักขระทั้งหมด แม้แต่อักขระที่คุณไม่รู้ตัวด้วยซ้ำว่ามีอยู่ และยังเป็นประเภทการเข้ารหัสที่ HTML5 กำหนดด้วย

หากต้องการตั้งค่าการเข้ารหัสอักขระเป็น UTF-8 ให้ใส่โค้ดต่อไปนี้

<meta charset="utf-8" />

เมื่อประกาศ UTF-8 (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) คุณจะใส่อีโมจิในชื่อได้ด้วย (แต่โปรดอย่า)

การเข้ารหัสอักขระจะรับช่วงอยู่ในทุกๆ อย่างในเอกสาร แม้กระทั่ง <style> และ <script> การประกาศเล็กๆ น้อยๆ นี้หมายความว่าคุณจะใส่อีโมจิในชื่อคลาสและ selectorAPI ได้ (ขอย้ำอีกครั้งว่าอย่าใส่) หากใช้อีโมจิ อย่าลืมใช้อีโมจิในลักษณะที่จะช่วยเพิ่มความสามารถในการใช้งานโดยไม่ส่งผลเสียต่อการช่วยเหลือพิเศษ

ชื่อเอกสาร

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

<title>Machine Learning Workshop</title>

ข้อมูลเมตาของวิวพอร์ต

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

<meta name="viewport" content="width=device-width" />

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

วิวพอร์ตเป็นส่วนหนึ่งของการตรวจสอบความสามารถเข้าถึงได้ง่ายของ Lighthouse โดยเว็บไซต์ของคุณจะผ่านการตรวจสอบหากสามารถปรับขนาดได้และไม่ได้ตั้งค่าขนาดสูงสุดไว้

ถึงตอนนี้ โครงร่างสำหรับไฟล์ HTML ของเราคือ:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

เนื้อหา <head> อื่นๆ

ยังมีอีกมากมายที่จะปรากฏใน <head> ที่จริงแล้วข้อมูลเมตาทั้งหมด องค์ประกอบส่วนใหญ่ที่คุณจะพบใน <head> ครอบคลุมไว้ที่นี่ และในขณะเดียวกันก็ยังบันทึกตัวเลือก <meta> ไว้อีกมากมายสำหรับบทถัดไปด้วย

คุณได้เห็นชุดอักขระเมตาและชื่อเอกสารแล้ว แต่ยังมีข้อมูลเมตาอีกมากที่อยู่นอกแท็ก <meta> ที่ควรรวมไว้

CSS

<head> เป็นที่ที่คุณใส่รูปแบบสำหรับ HTML เรามีเส้นทางการเรียนรู้สำหรับ CSS โดยเฉพาะ หากคุณต้องการเรียนรู้เกี่ยวกับสไตล์ แต่ต้องทราบวิธีใส่สไตล์ลงในเอกสาร HTML

คุณรวม CSS ได้ 3 วิธี ได้แก่ <link>, <style> และแอตทริบิวต์ style

2 วิธีหลักในการรวมรูปแบบไว้ในไฟล์ HTML คือการรวมแหล่งข้อมูลภายนอกโดยใช้องค์ประกอบ <link> ที่ตั้งค่าแอตทริบิวต์ rel เป็น stylesheet หรือการรวม CSS ไว้ในส่วนหัวของเอกสารโดยตรงภายในแท็กเปิดและปิด <style>

แท็ก <link> เป็นวิธีที่แนะนำในการรวมสไตล์ชีต การลิงก์สไตล์ชีตภายนอกเพียงหน้าเดียวหรือไม่กี่รายการส่งผลดีต่อทั้งประสบการณ์ของนักพัฒนาซอฟต์แวร์และประสิทธิภาพของเว็บไซต์ โดยคุณจะสามารถรักษา CSS ไว้ในจุดเดียวแทนที่จะมีการโจมตีไว้ทุกที่ และเบราว์เซอร์สามารถแคชไฟล์ภายนอกได้ ซึ่งหมายความว่าคุณจะไม่ต้องดาวน์โหลดซ้ำอีกเมื่อไปยังส่วนต่างๆ ของหน้าเว็บ

ไวยากรณ์คือ <link rel="stylesheet" href="styles.css"> โดยสไตล์ชีต.css คือ URL ของสไตล์ชีต ซึ่งบ่อยครั้งคุณจะเห็น type="text/css" ไม่จำเป็น หากใส่รูปแบบที่เขียนด้วยสิ่งอื่นที่ไม่ใช่ CSS คุณจะต้องใช้ type แต่เนื่องจากไม่มีประเภทอื่นๆ จึงไม่จำเป็นต้องใช้แอตทริบิวต์นี้ แอตทริบิวต์ rel กำหนดความสัมพันธ์: ในกรณีนี้คือ stylesheet หากคุณไม่เลือกช่องนี้ ระบบจะไม่ลิงก์ CSS ของคุณ

คุณจะได้พบกับค่า rel อีก 2-3 ค่าในเร็วๆ นี้ แต่ก่อนอื่น มาพูดถึงวิธีอื่นๆ ในการรวม CSS กัน

หากต้องการให้รูปแบบสไตล์ชีตภายนอกอยู่ภายในเลเยอร์แบบ Cascade แต่คุณไม่มีสิทธิ์แก้ไขไฟล์ CSS เพื่อใส่ข้อมูลเลเยอร์ คุณจะต้องรวม CSS ที่มี @import ไว้ใน <style> ดังนี้

<style>
  @import "styles.css" layer(firstLayer);
</style>

เมื่อใช้ @import เพื่อนำเข้าสไตล์ชีตไปยังเอกสาร (ไม่บังคับ) ลงในเลเยอร์แบบ Cascade คำสั่ง @import จะต้องเป็นคำสั่งแรกใน <style> หรือสไตล์ชีตที่ลิงก์ นอกการประกาศชุดอักขระ

เลเยอร์การเรียงซ้อนยังใหม่พอสมควรและคุณอาจไม่เห็น @import ในส่วนหัว <style> แต่คุณจะเห็นการประกาศพร็อพเพอร์ตี้ที่กำหนดเองในบล็อกรูปแบบส่วนหัวบ่อยๆ ดังนี้

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

สไตล์ต่างๆ ไม่ว่าจะผ่าน <link> หรือ <style> หรือทั้ง 2 อย่าง ควรอยู่ในหัว แท็กเหล่านี้จะทำงานได้หากอยู่ในเนื้อหาของเอกสาร แต่คุณต้องการให้รูปแบบอยู่ในส่วนหัวเพื่อเหตุผลด้านประสิทธิภาพ นี่อาจฟังดูขัดกับสิ่งที่ควรจะเป็น เพราะคุณอาจคิดว่าต้องการให้เนื้อหาโหลดขึ้นมาก่อน แต่จริงๆ แล้วคุณต้องการให้เบราว์เซอร์รู้วิธีแสดงผลเนื้อหาเมื่อโหลด การเพิ่มรูปแบบก่อนจะเป็นการป้องกันการทำซ้ำที่ไม่จำเป็นซึ่งเกิดขึ้นหากมีการจัดรูปแบบองค์ประกอบหลังจากแสดงผลครั้งแรก

จากนั้นคุณจะมีวิธีหนึ่งในการรวมรูปแบบที่คุณจะไม่ใช้ใน <head> ของเอกสาร นั่นก็คือ รูปแบบแทรกในบรรทัด คุณคงไม่ใช้รูปแบบแทรกในบรรทัดในส่วนหัว เพราะสไตล์ชีตของ User Agent จะซ่อนส่วนหัวโดยค่าเริ่มต้น แต่ถ้าคุณต้องการสร้างโปรแกรมแก้ไข CSS โดยไม่มี JavaScript เพื่อให้ทดสอบองค์ประกอบที่กำหนดเองของหน้าเว็บได้ คุณอาจทำให้ส่วนหัวปรากฏด้วย display: block จากนั้นซ่อนทุกอย่างในส่วนหัว จากนั้นด้วยแอตทริบิวต์ style ในบรรทัด ทำให้แสดงบล็อกสไตล์ที่แก้ไขเนื้อหาได้

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

แม้ว่าคุณจะเพิ่มรูปแบบแทรกในบรรทัดใน <style> ได้ แต่การจัดรูปแบบ <style> ใน style ก็เป็นเรื่องที่สนุกขึ้น ฉันออกนอกเรื่อง

องค์ประกอบ link จะใช้ในการสร้างความสัมพันธ์ระหว่างเอกสาร HTML และทรัพยากรภายนอก แหล่งข้อมูลเหล่านี้บางส่วนอาจมีการดาวน์โหลดไว้ ในขณะที่อื่นๆ มีไว้เพื่อให้ข้อมูล ประเภทของความสัมพันธ์จะกำหนดโดยค่าของแอตทริบิวต์ rel ปัจจุบันมีค่าที่ใช้ได้ 25 ค่าสำหรับแอตทริบิวต์ rel ที่สามารถใช้กับ <link>, <a> และ <area> หรือ <form> โดยมี 2-3 ค่าที่ใช้ได้กับทุกค่า แต่แนะนำให้รวมรายการที่เกี่ยวข้องกับข้อมูลเมตาในส่วนหัว และรายการที่เกี่ยวข้องกับประสิทธิภาพใน <body>

ตอนนี้คุณจะต้องรวมประเภทอื่น 3 ประเภทไว้ในส่วนหัว ได้แก่ icon, alternate และ canonical (คุณได้ใส่ประเภทที่ 4 rel="manifest" ในโมดูลถัดไป)

ไอคอน Fav

ใช้แท็ก <link> พร้อมด้วยคู่แอตทริบิวต์/ค่า rel="icon" เพื่อระบุไอคอน Fav ที่จะใช้สำหรับเอกสาร ไอคอน Fav เป็นไอคอนขนาดเล็กมากซึ่งปรากฏบนแท็บเบราว์เซอร์ ซึ่งมักจะอยู่ทางด้านซ้ายของชื่อเอกสาร เมื่อคุณเปิดแท็บไว้เป็นจำนวนมาก แท็บจะย่อลงและชื่ออาจหายไปทั้งหมด แต่ไอคอนจะยังคงปรากฏให้เห็นตลอดเวลา ไอคอน Fav ส่วนใหญ่จะเป็นโลโก้บริษัทหรือแอปพลิเคชัน

หากคุณไม่ประกาศไอคอน Fav เบราว์เซอร์จะมองหาไฟล์ชื่อ favicon.ico ในไดเรกทอรีระดับบนสุด (โฟลเดอร์รูทของเว็บไซต์) คุณสามารถใช้ชื่อไฟล์และตำแหน่งอื่นได้ด้วย <link>:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

โค้ดที่อยู่ก่อนหน้าระบุว่า "ใช้ mlwicon.png เป็นไอคอนสำหรับสถานการณ์ที่ 16 พิกเซล, 32 พิกเซล หรือ 48 พิกเซลจะเหมาะสม" แอตทริบิวต์ขนาดจะยอมรับค่า any สำหรับไอคอนที่รองรับการปรับขนาดหรือรายการที่คั่นด้วยช่องว่างของค่าสี่เหลี่ยมจัตุรัส widthXheight โดยที่ค่าความกว้างและความสูงคือ 16, 32, 48 ขึ้นไปในลำดับเรขาคณิตนั้น หน่วยพิกเซลจะถูกละไว้ และค่า X จะไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

มีไอคอนพิเศษที่ไม่ได้มาตรฐาน 2 ประเภทสำหรับเบราว์เซอร์ Safari ได้แก่ apple-touch-icon สำหรับอุปกรณ์ iOS และmask-iconสำหรับแท็บที่ปักหมุดใน macOS ระบบจะใช้ apple-touch-icon เมื่อผู้ใช้เพิ่มเว็บไซต์ลงในหน้าจอหลักเท่านั้น คุณสามารถระบุไอคอนหลายรายการด้วย sizes ที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ ระบบจะใช้ mask-icon ในกรณีที่ผู้ใช้ปักหมุดแท็บใน Safari บนเดสก์ท็อปเท่านั้น โดยตัวไอคอนควรเป็น SVG แบบโมโนโครม และแอตทริบิวต์ color จะแสดงสีที่จำเป็นให้กับไอคอน

ถึงแม้ว่าคุณสามารถใช้ <link> เพื่อกำหนดรูปภาพที่แตกต่างกันโดยสิ้นเชิงในแต่ละหน้า หรือแม้กระทั่งการโหลดหน้าเว็บแต่ละครั้ง ก็อย่าใช้ โปรดใช้รูปภาพเดียวเพื่อความสอดคล้องและประสบการณ์ที่ดีของผู้ใช้ Twitter ใช้นกสีน้ำเงิน เมื่อคุณเห็นนกสีน้ำเงินในแท็บเบราว์เซอร์ แสดงว่าแท็บนั้นเปิดไปยังหน้า Twitter โดยไม่คลิกแท็บ Google ใช้ไอคอน Fav ที่ต่างกันสำหรับแต่ละแอปพลิเคชัน เช่น ไอคอนจดหมาย ไอคอนปฏิทิน แต่ไอคอน Google ทั้งหมดใช้รูปแบบสีเดียวกัน ขอย้ำอีกครั้งว่า คุณรู้แน่ชัดแล้วว่าเนื้อหาของแท็บที่เปิดอยู่มาจากไอคอนอย่างไร

เว็บไซต์เวอร์ชันทางเลือก

เราใช้ค่า alternate ของแอตทริบิวต์ rel เพื่อระบุคำแปลหรือการนำเสนอแบบอื่นของเว็บไซต์

สมมติว่าเรามีเว็บไซต์ในเวอร์ชันต่างๆ ที่แปลเป็นภาษาฝรั่งเศสและโปรตุเกสแบบบราซิล

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

เมื่อใช้ alternate สำหรับการแปล ต้องตั้งค่าแอตทริบิวต์ hreflang

ค่าสำรองเป็นมากกว่าคำแปล เช่น แอตทริบิวต์ type จะกำหนด URI ทางเลือกสำหรับฟีด RSS ได้เมื่อตั้งค่าแอตทริบิวต์ type เป็น application/rss+xml หรือ application/atom+xml มาลิงก์เว็บไซต์เวอร์ชัน PDF ปลอมกัน

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

หากค่า rel คือ alternate stylesheet จะเป็นการกำหนดสไตล์ชีตสำรองและต้องตั้งค่าแอตทริบิวต์ title เพื่อตั้งชื่อสไตล์ทางเลือกนั้น

หน้า Canonical

หากสร้างเวิร์กช็อปแมชชีนเลิร์นนิงหลายเวอร์ชันหรือหลายเวอร์ชัน เครื่องมือค้นหาอาจสับสนว่าเวอร์ชันใดเป็นแหล่งที่มาที่เชื่อถือได้ สำหรับกรณีนี้ ให้ใช้ rel="canonical" เพื่อระบุ URL ที่ต้องการสำหรับเว็บไซต์หรือแอปพลิเคชัน

ใส่ Canonical URL ไว้ในหน้าที่แปลแล้วทุกหน้า และในหน้าแรกซึ่งระบุ URL ที่เราต้องการ ดังนี้

<link rel="canonical" href="https://www.machinelearning.com" />

ลิงก์ Canonical ของ rel="canonical" มักใช้สําหรับการโพสต์ข้ามแพลตฟอร์มกับสื่อเผยแพร่และแพลตฟอร์มการเขียนบล็อก เพื่อให้เครดิตแหล่งที่มาต้นฉบับ หากเว็บไซต์เผยแพร่เนื้อหา ก็ควรมีลิงก์ Canonical ไปยังแหล่งที่มาต้นฉบับด้วย

สคริปต์

แท็ก <script> จะใช้เพื่อรวมสคริปต์ ประเภทเริ่มต้นคือ JavaScript หากคุณใส่ภาษาสคริปต์อื่นๆ ให้ใส่แอตทริบิวต์ type พร้อมด้วยประเภท MIME หรือ type="module" หากเป็นโมดูล JavaScript เฉพาะโมดูล JavaScript และ JavaScript เท่านั้นที่จะได้รับการแยกวิเคราะห์และเรียกใช้

คุณสามารถใช้แท็ก <script> เพื่อห่อหุ้มโค้ดหรือดาวน์โหลดไฟล์ภายนอก ใน MLW ไม่มีไฟล์สคริปต์ภายนอก เพราะขัดแย้งกับความเชื่อยอดนิยม คุณไม่จำเป็นต้องใช้ JavaScript สำหรับเว็บไซต์ที่ใช้งานได้ และนี่เป็นเส้นทางการเรียนรู้ HTML ไม่ใช่ JavaScript

คุณจะต้องใส่ JavaScript สั้นๆ เพื่อสร้างไข่อีสเตอร์ในภายหลัง

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

ข้อมูลโค้ดนี้จะสร้างเครื่องจัดการเหตุการณ์สำหรับองค์ประกอบที่มีรหัส switch เมื่อใช้ JavaScript คุณไม่ต้องการอ้างอิงองค์ประกอบใดองค์ประกอบหนึ่งก่อนที่จะมีอยู่ ยังไม่มีข้อมูล เราจึงยังไม่รวมข้อมูลดังกล่าว เมื่อเราเพิ่มองค์ประกอบสวิตช์ไฟ เราจะเพิ่ม <script> ที่ด้านล่างของ <body> แทนใน <head> เหตุผล เหตุผล 2 ประการ เราต้องการตรวจสอบว่ามีองค์ประกอบอยู่ก่อนที่จะพบสคริปต์ที่อ้างอิงองค์ประกอบดังกล่าว เนื่องจากเราไม่ได้วางสคริปต์นี้ไว้ในเหตุการณ์DOMContentLoaded หลักๆ แล้ว JavaScript ไม่เพียงแค่บล็อกการแสดงผลเท่านั้น แต่เบราว์เซอร์จะหยุดดาวน์โหลดเนื้อหาทั้งหมดเมื่อมีการดาวน์โหลดสคริปต์ และจะไม่ดาวน์โหลดเนื้อหาอื่นๆ ต่อจนกว่า JavaScript จะเสร็จสิ้นการดำเนินการ ด้วยเหตุนี้ คุณจึงมักจะเห็นคำขอ JavaScript ที่ส่วนท้ายของเอกสารมากกว่าที่จะพบในส่วนหัว

มีแอตทริบิวต์ 2 รายการที่ลดลักษณะการบล็อกของการดาวน์โหลดและเรียกใช้ JavaScript ได้ ได้แก่ defer และ async เมื่อใช้ defer การแสดงผล HTML จะไม่ถูกบล็อกระหว่างการดาวน์โหลด และ JavaScript จะทำงานหลังจากที่เอกสารแสดงผลเสร็จแล้วเท่านั้น เมื่อใช้ async การแสดงผลจะไม่ถูกบล็อกระหว่างการดาวน์โหลด แต่เมื่อดาวน์โหลดสคริปต์เสร็จแล้ว การแสดงผลจะหยุดชั่วคราวขณะเรียกใช้ JavaScript

การโหลดเมื่อใช้อะซิงโครนัสและเลื่อนเวลาออกไป

หากต้องการรวม JavaScript ของ MLW ในไฟล์ภายนอก คุณสามารถเขียนสิ่งต่อไปนี้

<script src="js/switch.js" defer></script>

การเพิ่มแอตทริบิวต์ defer จะเลื่อนการดำเนินการของสคริปต์ไปจนกว่าจะแสดงผลทุกอย่างแล้ว ซึ่งจะป้องกันไม่ให้สคริปต์ส่งผลเสียต่อประสิทธิภาพ แอตทริบิวต์ async และ defer ใช้ได้กับสคริปต์ภายนอกเท่านั้น

ฐาน

มีอีกองค์ประกอบหนึ่งที่พบเฉพาะใน <head>. เท่านั้น องค์ประกอบ <base> อนุญาตให้ตั้งค่าเป้าหมายและ URL ของลิงก์เริ่มต้น แอตทริบิวต์ href กำหนด URL ฐานสำหรับลิงก์ที่เกี่ยวข้องทั้งหมด

แอตทริบิวต์ target ซึ่งใช้ได้ใน <base> รวมทั้งลิงก์และแบบฟอร์ม จะกำหนดตำแหน่งที่ควรเปิดลิงก์เหล่านั้น ค่าเริ่มต้นของ _self จะเปิดไฟล์ที่ลิงก์ในบริบทเดียวกับเอกสารปัจจุบัน ตัวเลือกอื่นๆ ได้แก่ _blank ซึ่งจะเปิดทุกลิงก์ในหน้าต่างใหม่ _parent ของเนื้อหาปัจจุบันซึ่งอาจเหมือนกับไฟล์เปิดเองหากเครื่องมือเปิดไม่ใช่ iframe หรือ _top ที่อยู่ในแท็บเบราว์เซอร์เดียวกัน แต่เด้งออกจากบริบทใดๆ เพื่อใช้ทั้งแท็บ

นักพัฒนาซอฟต์แวร์ส่วนใหญ่เพิ่มแอตทริบิวต์ target ลงในลิงก์บางรายการ (หากมี) ที่ต้องการเปิดในหน้าต่างใหม่บนลิงก์หรือแบบฟอร์มเอง แทนที่จะใช้ <base>

<base target="_top" href="https://machinelearningworkshop.com" />

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

ข้อเสียประการหนึ่งขององค์ประกอบนี้คือลิงก์ Anchor จะได้รับการแก้ไขด้วย <base> <base> แปลงลิงก์ <a href="#ref"> เป็น <a target="_top" href="https://machinelearningworkshop.com#ref"> ได้อย่างมีประสิทธิภาพ ซึ่งจะทริกเกอร์คำขอ HTTP เป็น URL พื้นฐานที่มีส่วนย่อยแนบอยู่

สิ่งอื่นๆ ที่ควรทราบเกี่ยวกับ <base>: จะมีองค์ประกอบ <base> ได้เพียง 1 รายการในเอกสาร และควรมีก่อนการใช้ URL สัมพัทธ์ รวมทั้งการอ้างอิงสคริปต์หรือสไตล์ชีตที่เป็นไปได้

ตอนนี้โค้ดจะมีลักษณะดังนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" src="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

ความคิดเห็น HTML

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับโครงสร้างของเอกสาร

โปรดระบุภาษาของเอกสาร

เพิ่มแอตทริบิวต์ language ลงในแท็ก HTML
โปรดลองอีกครั้ง
เพิ่มแอตทริบิวต์ lang ลงในแท็ก HTML
ถูกต้องแล้ว!
Add the <lang> ไปยัง <head>
โปรดลองอีกครั้ง

เลือกองค์ประกอบที่สามารถรวมอยู่ใน <head>

<p>
โปรดลองอีกครั้ง
<title>
ถูกต้องแล้ว!
<meta>
ถูกต้องแล้ว!