מסמכי HTML כוללים הצהרה על סוג המסמך ואת רכיב הבסיס <html>. בתוך רכיב <html> יש את ראש המסמך ואת גוף המסמך.
החלק העליון של המסמך לא גלוי מחוץ לקוד, אבל הוא חיוני לתפקוד של האתר. הוא מכיל את כל המטא-מידע, כולל מידע למנועי חיפוש ולתוצאות ברשתות חברתיות, סמלים לכרטיסייה בדפדפן ולקיצור הדרך במסך הבית בנייד, וההתנהגות וההצגה של התוכן. בקטע הזה מפורטים הרכיבים שקיימים כמעט בכל דף אינטרנט, אבל לא מוצגים בו.
כדי ליצור אתר MachineLearningWorkshop.com (MLW), מתחילים בהוספת הרכיבים שצריכים להיחשב חיוניים לכל דף אינטרנט: סוג המסמך, השפה האנושית של התוכן, מערכת התווים וכמובן הכותרת או השם של האתר או האפליקציה.
הוספה לכל מסמך HTML
יש כמה רכיבים שחיוניים לכל דף אינטרנט. הדפדפנים מעבדים את התוכן גם אם הרכיבים האלה חסרים, אבל מומלץ לכלול אותם.
<!DOCTYPE html>
החלק הראשון בכל מסמך HTML הוא המבוא. ב-HTML, כל מה שצריך הוא
<!DOCTYPE html>. זה נראה כמו רכיב HTML, אבל זה בעצם צומת מיוחד שנקרא doctype. ה-doctype אומר לדפדפן להשתמש במצב רגיל.
אם לא מציינים את המצב, הדפדפנים משתמשים במצב עיבוד שונה שנקרא מצב תאימות (quirks mode).
הכללת ה-DOCTYPE עוזרת למנוע מצב תאימות (quirks mode).
<html>
הרכיב <html> הוא רכיב בסיס של מסמך HTML. הוא רכיב האב של <head> ושל <body>, והוא מכיל את כל מה שנמצא במסמך ה-HTML, מלבד ה-doctype. אם לא מציינים את השפה, היא מובלעת, אבל מומלץ לציין אותה כדי להצהיר על השפה של המסמך.
שפת התוכן
המאפיין lang
בתג <html> מגדיר את השפה הראשית של המסמך. הערך הוא קוד שפה לפי תקן ISO, ואחריו אזור אופציונלי.
לדוגמה, הצרפתית בקנדה היא fr-CA, ובבורקינה פאסו היא fr-BF. ההצהרה הזו עוזרת לקוראי מסך, למנועי חיפוש ולשירותי תרגום לזהות את שפת המסמך.
אפשר להשתמש במאפיין lang בתגים אחרים כדי לזהות חריגים לשפה הראשית של המסמך. בדומה לשימוש בתג lang בתוך התג head, השימוש בתג הזה בתוך התג body לא יוצר אפקט ויזואלי. הוא מוסיף סמנטיקה, כך שטכנולוגיות מסייעות ושירותים אוטומטיים יכולים לזהות את השפה של תוכן ספציפי.
בנוסף להגדרת השפה של המסמך וחריגים לשפת הבסיס הזו, אפשר להשתמש במאפיין בסלקטורים של CSS.
אפשר לטרגט את <span lang="fr-fr">Ceci n'est pas une pipe.</span> באמצעות מאפיין וממשקי בחירת שפה
[lang|="fr"]
ו-:lang(fr).
<head>
בין התגים הפותחים והסוגרים <html>, נמצא את שני רכיבי הצאצא:
<head> ו-<body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
התג <head> מכיל מטא-נתונים של אתר או אפליקציה, והתג <body>
מכיל תוכן גלוי. בהמשך החלק הזה נתמקד ברכיבים שמוטמעים בתוך האלמנט <head>.
רכיבים נדרשים בתוך <head>
המטא-נתונים של המסמך, כולל שם המסמך, ערכת התווים, הגדרות אזור התצוגה, התיאור, כתובת ה-URL הבסיסית, הקישורים לגיליון הסגנונות והסמלים, נמצאים ברכיב <head>. יכול להיות שלא תצטרכו את כל התכונות האלה, אבל תמיד צריך לכלול הגדרות של ערכת תווים, שם ותצוגת אזור.
קידוד תווים
האלמנט הראשון ב-<head> צריך להיות הצהרת קידוד התווים charset. הוא מופיע לפני הכותרת כדי לוודא שהדפדפן יוכל לעבד את התווים בכותרת הזו ואת כל התווים בשאר המסמך.
קידוד ברירת המחדל ברוב הדפדפנים הוא windows-1252, בהתאם ללוקאל. עם זאת, מומלץ להשתמש ב-UTF-8, שמאפשר קידוד של כל התווים בטווח של בייט אחד עד ארבעה בייטים.
כדי להגדיר את קידוד התווים ל-UTF-8, צריך לכלול:
<meta charset="utf-8" />
אם מציינים UTF-8 (לא תלוי באותיות רישיות), אפשר אפילו לכלול אמוג'י בכותרת.
קידוד התווים עובר בירושה לכל מה שנמצא במסמך, כולל <style> ו-<script>. ההצהרה הקטנה הזו אומרת שאפשר לכלול אמוג'י בשמות של מחלקות וב-selectorAPI. אם אתם משתמשים באימוג'י, הקפידו להשתמש בהם באופן שמשפר את נוחות השימוש בלי לפגוע בנגישות.
כותרת המסמך
לכל דף, לדף הבית ולכל הדפים הנוספים, צריכה להיות כותרת ייחודית.
התוכן של כותרת המסמך, הטקסט שבין התגים הפותחים והסוגרים <title>, מוצג בכרטיסיית הדפדפן, ברשימת החלונות הפתוחים, בהיסטוריה, בתוצאות החיפוש ובכרטיסים של המדיה החברתית, אלא אם הוגדר מחדש באמצעות תגי <meta>.
<title>Machine Learning Workshop</title>
מטא-נתונים של אזור התצוגה
מטא תג אזור התצוגה חיוני לרספונסיביות של האתר, ומבטיח שהתוכן יוצג בצורה טובה בלי קשר לרוחב אזור התצוגה. למרות שמטא תג של אזור תצוגה קיים מאז 2007, רק לאחרונה הוא תועד במפרט. היא שולטת בגודל ובקנה המידה של אזור התצוגה, ומונעת את כיווץ התוכן כדי להתאים למסכים קטנים יותר.
<meta name="viewport" content="width=device-width" />
הקוד שלמעלה אומר: "הפוך את האתר לרספונסיבי, קודם כל על ידי הגדרת רוחב התוכן כרוחב המסך". בנוסף ל-width, אפשר להגדיר את הזום ואת המדרגיות, אבל שניהם מוגדרים כברירת מחדל לערכים נגישים. אם רוצים להיות ספציפיים, אפשר לכלול:
<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> שצריך לכלול.
CSS
בקטע <head> מוסיפים סגנונות ל-HTML. אם אתם רוצים ללמוד על סגנונות, תוכלו לעיין בתוכנית הלימודים שמוקדשת ל-CSS, אבל אתם צריכים לדעת איך לכלול אותם במסמכי ה-HTML שלכם.
יש שלוש דרכים לכלול CSS: <link>, <style> והמאפיין style
יש שתי דרכים עיקריות לכלול סגנונות בקובץ ה-HTML: לכלול משאב חיצוני באמצעות רכיב <link> עם המאפיין rel שמוגדר לערך stylesheet, או לכלול CSS ישירות בחלק העליון של המסמך בין תגי הפתיחה והסגירה <style>.
השיטה המועדפת להוספת גיליונות סגנונות היא באמצעות התג <link>. קישור של גיליונות סגנונות חיצוניים בודדים או מעטים הוא טוב לחוויית המפתחים ולביצועי האתר: אתם יכולים לתחזק את ה-CSS במקום אחד במקום שהוא יהיה מפוזר בכל מקום, והדפדפנים יכולים לשמור במטמון את הקובץ החיצוני, מה שאומר שלא צריך להוריד אותו שוב בכל פעם שמנווטים לדף אחר.
התחביר הוא <link rel="stylesheet" href="styles.css">, כאשר styles.css הוא שם הקובץ והמיקום היחסי של גיליון הסגנונות. יכול להיות שתראו את המאפיין type="text/css", אבל הוא לא חובה. המאפיין rel מגדיר את קשר הגומלין, שהוא stylesheet במקרה הזה. אם לא תציינו את מאפיין rel, שירות ה-CSS לא יקושר.
בהמשך נציג עוד כמה ערכים של rel, אבל קודם נסביר על דרכים אחרות לכלול CSS.
אם רוצים שהסגנונות של גיליון הסגנונות החיצוני יהיו בשכבת קסקייד, אבל אין גישה לעריכת קובץ ה-CSS, צריך לכלול את ה-CSS עם @import בתוך <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
כשמשתמשים ב-@import כדי לייבא גיליונות סגנונות למסמך, באופן אופציונלי לשכבות מדורגות, הצהרות ה-@import צריכות להיות ההצהרות הראשונות ב-<style> או בגיליון הסגנונות המקושר, מחוץ להצהרה של ערכת התווים.
שכבות מדורגות הן עדיין תכונה חדשה יחסית, ולכן יכול להיות שלא תראו את התג @import בתוך <style>, אבל לרוב תראו מאפיינים מותאמים אישית שמוצהרים בתוך בלוק סגנון של head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
סגנונות שנוספו באמצעות <link>, <style> או שניהם, צריכים להיות בתג head. הן פועלות כשהן נכללות בגוף המסמך, אבל מומלץ להוסיף סגנונות בתג head מסיבות שקשורות לביצועים. יכול להיות שזה נראה לא הגיוני, כי אולי אתם רוצים שהתוכן שלכם ייטען ראשון. אבל עדיף שהדפדפן ידע איך לעבד את התוכן כשהוא נטען. הוספת סגנונות קודם לכן מונעת את הצביעה מחדש המיותרת שמתרחשת אם אלמנט מעוצב אחרי שהוא מוצג בפעם הראשונה.
יש דרך אחת לכלול סגנונות שלא תשתמשו בהם אף פעם ב-<head> של המסמך: סגנונות מוטבעים. סביר להניח שלעולם לא תשתמשו בסגנונות מוטבעים בתג head, כי גיליונות הסגנונות של סוכני המשתמש מסתירים את התג head כברירת מחדל. אבל אם רוצים ליצור עורך CSS בלי JavaScript, למשל כדי לבדוק את הרכיבים המותאמים אישית של הדף, אפשר להשתמש ב-display: block כדי להפוך את התג head לגלוי, ואז להסתיר את כל מה שמופיע ב-head, ואז להשתמש במאפיין style מוטבע כדי להפוך בלוק סגנונות שניתן לעריכה לגלוי.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
אפשר להוסיף סגנונות מוטבעים לרכיב <style>.
שימושים אחרים ברכיב <link>
הרכיב link משמש ליצירת קשרים בין מסמך ה-HTML לבין משאבים חיצוניים. אפשר להוריד חלק מהמשאבים האלה, ואחרים הם משאבים
למידע בלבד. סוג הקשר מוגדר על ידי הערך של המאפיין rel
attribute. יש 25 ערכים זמינים למאפיין rel שאפשר להשתמש בהם עם <link>, <a> ו-<area>, או עם <form>, ויש כמה ערכים שאפשר להשתמש בהם עם כל המאפיינים. מומלץ לכלול את התגים שקשורים למטא-נתונים בתג head ואת התגים שקשורים לביצועים בתג <body>.
עכשיו צריך לכלול בכותרת עוד שלושה סוגים: icon, alternate ו-canonical. במודול הבא תוסיפו סוג רביעי,
rel="manifest".
סמל האתר
משתמשים בתג <link> עם rel="icon" כדי לזהות את סמל האתר של המסמך. סמל אתר הוא סמל קטן שמופיע בכרטיסיית הדפדפן, בדרך כלל מימין לשם המסמך. כשמצמצמים את הכרטיסיות, יכול להיות שהכותרת תיעלם, אבל הסמל יישאר גלוי. רוב סמלי האתר הם לוגו של חברה או של אפליקציה.
אם לא מציינים סמל אתר, הדפדפן יחפש קובץ בשם
favicon.ico בספרייה ברמה העליונה (תיקיית השורש של האתר). עם <link>, אפשר להשתמש בשם קובץ ובמיקום שונים:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
הקוד שלמעלה אומר: "צריך להשתמש ב-mlwicon.png כסמל בתרחישים שבהם הגודל 16px, 32px או 48px מתאים". במאפיין 'גדלים' אפשר להזין את הערך 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" />
יש שני סוגים מיוחדים של סמלים לא סטנדרטיים לדפדפן Safari:
apple-touch-icon למכשירי iOS ו-mask-icon לכרטיסיות מוצמדות ב-macOS.
apple-touch-icon חל רק כשהמשתמש מוסיף אתר למסך הבית:
אפשר לציין כמה סמלים עם ערכים שונים של sizes למכשירים שונים.
הסמל mask-icon ישמש רק אם המשתמש יצמיד את הכרטיסייה ב-Safari במחשב: הסמל עצמו צריך להיות SVG מונוכרומטי, והמאפיין color ממלא את הסמל בצבע הנדרש.
אפשר להשתמש בתג <link> כדי להגדיר תמונה שונה לחלוטין בכל דף או אפילו בכל טעינת דף, אבל לא מומלץ לעשות את זה. כדי לשמור על עקביות ולספק חוויית משתמש טובה, מומלץ להשתמש בתמונה אחת. Google משתמשת בסמלי אתרים שונים לכל אחד מהאפליקציות השונות שלה: יש סמל לאימייל, סמל ליומן וכו'. אבל כל הסמלים של 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 ולתת שם לסגנון החלופי.
כתובות URL קנוניות
אם יוצרים כמה תרגומים או גרסאות של סדנת למידת מכונה,
יכול להיות שמנועי חיפוש לא יזהו את המקור המוסמך. משתמשים ב-rel="canonical"
כדי לזהות את כתובת ה-URL המועדפת לאתר או לאפליקציה.
צריך לכלול את כתובת ה-URL הקנונית בכל הדפים המתורגמים ובדף הבית, ולציין את כתובת ה-URL המועדפת שלנו:
<link rel="canonical" href="https://www.machinelearning.com" />
בדרך כלל משתמשים בrel="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, מומלץ להימנע מהפניה לרכיב לפני שהוא קיים. הסצנה switch עדיין לא קיימת, ולכן לא נכלול את הגורם המטפל באירועים.
כשנוסיף את רכיב מתג האור, נוסיף את <script> בחלק התחתון של <body> ולא ב-<head>. למה? שתי סיבות. אנחנו רוצים לוודא שהרכיבים קיימים לפני שהסקריפט שמפנה אליהם נתקל בהם, כי אנחנו לא מבססים את הסקריפט הזה על אירוע DOMContentLoaded.
בנוסף, JavaScript לא רק חוסם את הרנדור, אלא גם גורם לדפדפן להפסיק להוריד את כל הנכסים כשהסקריפטים מורדים, והוא לא ממשיך להוריד נכסים אחרים עד שביצוע ה-JavaScript מסתיים. לכן, בדרך כלל בקשות JavaScript מופיעות בסוף המסמך ולא בחלק העליון שלו.
יש שני מאפיינים שיכולים לצמצם את החסימה של הורדה וביצוע של JavaScript: defer ו-async. עם defer, הרינדור של ה-HTML לא נחסם במהלך ההורדה, וקוד ה-JavaScript מופעל רק אחרי שהרינדור של המסמך מסתיים. עם async, הרינדור לא נחסם גם במהלך ההורדה, אבל אחרי שההורדה של הסקריפט מסתיימת, הרינדור מושהה בזמן שקוד ה-JavaScript מופעל.
async. הערה: בסקריפטים של מודולים שנטענים באמצעות <script type="module">, האפשרות defer מופעלת כברירת מחדל.
כדי לכלול את ה-JavaScript של MLW בקובץ חיצוני, אפשר לכתוב:
<script src="js/switch.js" defer></script>
הוספת מאפיין defer
דוחה את ההפעלה של הסקריפט עד אחרי שכל התוכן מוצג,
כך שהסקריפט לא פוגע בביצועים. המאפיינים async ו-defer תקפים רק בסקריפטים חיצוניים.
בסיס
יש עוד רכיב שמופיע רק ב-<head>. הרכיב <base> שמשמש לעיתים רחוקות מאפשר להגדיר כתובת URL ודף יעד לקישור כברירת מחדל. המאפיין href מגדיר את כתובת ה-URL הבסיסית לכל הקישורים היחסיים.
המאפיין target, שתקף גם ב-<base> וגם בקישורים ובטפסים, מגדיר את המקום שבו הקישורים האלה אמורים להיפתח. ברירת המחדל של _self היא פתיחת קבצים מקושרים באותו הקשר של המסמך הנוכחי. אפשרויות אחרות כוללות _blank, שפותחת כל קישור בחלון חדש, _parent של התוכן הנוכחי, שיכול להיות זהה ל-self אם חלון הפתיחה הוא לא iframe, או _top, שנמצא באותה כרטיסיית דפדפן, אבל מופיע מחוץ לכל הקשר כדי לתפוס את כל הכרטיסייה.
רוב המפתחים מוסיפים את מאפיין target לכמה קישורים, אם בכלל, שהם רוצים לפתוח בחלון חדש בקישורים או בטפסים עצמם, במקום להשתמש ב-<base>.
<base target="_top" href="https://machinelearningworkshop.com" />
אם האתר שלנו מוטמע ב-iframe באתר כמו Yummly, הכללת הרכיב <base> תגרום לכך שכאשר משתמש ילחץ על קישור כלשהו במסמך שלנו, הקישור ייטען בחלון קופץ מחוץ ל-iframe, וימלא את כל חלון הדפדפן.
אחד החסרונות של הרכיב הזה הוא שקישורי עוגן נפתרים באמצעות <base>. הפונקציה <base> ממירה למעשה את הקישור <a href="#ref"> לקישור <a target="_top" href="https://machinelearningworkshop.com#ref">, ומפעילה בקשת HTTP לכתובת ה-URL הבסיסית עם הפרגמנט המצורף.
עוד כמה דברים על <base>:
- יכול להיות רק רכיב
<base>אחד במסמך. - היא צריכה להופיע לפני השימוש בכתובות 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" href="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>