מתכוננים לסיום של קובצי cookie של צדדים שלישיים ב-Chrome. כדאי לבדוק את האתר עוד היום כדי לוודא שאין תקלות.

דף זה תורגם על ידי Cloud Translation API.

מבנה המסמך

מסמכי HTML כוללים הצהרה של סוג מסמך ואת רכיב הבסיס <html>. הרכיב <html> הוא ראש המסמך וגוף המסמך. למרות שראש המסמך אינו גלוי למבקר שרואה אותו, חיוני שהאתר יתפקד. הדף מכיל את כל המטא-מידע, כולל מידע על מנועי חיפוש ותוצאות מדיה חברתית, סמלים של כרטיסיית הדפדפן וקיצור דרך במסך הבית לנייד, והתנהגות התוכן שלך והצגתו. בקטע הזה תראו את הרכיבים, שאף על פי שאינם גלויים, נמצאים כמעט בכל דף אינטרנט.

כדי ליצור את האתר MachineLearningWorkshop.com (MLW), תחילה עליכם לכלול את הרכיבים שנחשבים חיוניים לכל דף אינטרנט: סוג המסמך, השפה האנושית של התוכן, מערכת התווים, וכמובן, השם או השם של האתר או האפליקציה.

הוספה לכל מסמך HTML

יש כמה תכונות שנחשבות חיוניות לכל דף אינטרנט. דפדפנים ימשיכו לעבד תוכן אם הרכיבים האלה חסרים, אבל הם יכללו אותם. תמיד.

`<!DOCTYPE html>`

הדבר הראשון בכל מסמך HTML הוא הפתיח. עבור HTML, כל מה שדרוש לך הוא <!DOCTYPE html>. זה אולי ייראה כמו רכיב HTML, אבל זה לא בעצם. זהו סוג מיוחד של צומת שנקרא 'doctype'. ה-doctype מורה לדפדפן להשתמש במצב רגיל. אם לא צוין מספר, הדפדפנים ישתמשו במצב רינדור שונה שנקרא מצב תאימות (quirks). הכללת doctype עוזרת למנוע מצב תאימות (quirks).

`<html>`

הרכיב <html> הוא רכיב הבסיס של מסמך HTML. זהו ההורה של <head> ו-<body>, שמכיל את כל התוכן במסמך ה-HTML מלבד ה-doctype. אם לא תשמיט, המשמעות תהיה משתמעת אבל חשוב לכלול זאת, כי זהו האלמנט שבו הצהרת הניסוח של תוכן המסמך.

שפת התוכן

מאפיין השפה lang שנוסף לתג <html> מגדיר את השפה הראשית של המסמך. הערך של המאפיין lang הוא קוד שפה בן שתיים או שלוש אותיות לפי תקן ISO, ואחריו מופיע האזור. האזור הוא אופציונלי, אבל מומלץ לעשות זאת, מפני שהשפה עשויה להשתנות באופן משמעותי בין אזורים. לדוגמה, צרפתית שונה מאוד בקנדה (fr-CA) לעומת בורקינה פאסו (fr-BF). הצהרת השפה הזו מאפשרת לקוראי מסך, למנועי חיפוש ולשירותי תרגום לדעת את שפת המסמך.

המאפיין lang לא מוגבל לתג <html>. אם יש בדף טקסט בשפה שונה מהשפה הראשית של המסמך, צריך להשתמש במאפיין lang כדי לזהות חריגים מהשפה הראשית במסמך. בדיוק כמו כשהוא נכלל בראש, למאפיין lang בגוף אין אפקט חזותי. היא רק מוסיפה סמנטיקה, ומאפשרת לטכנולוגיות מסייעות ולשירותים אוטומטיים לדעת את השפה של התוכן המושפע.

בנוסף להגדרת שפת המסמך וחריגים לשפת הבסיס הזו, ניתן להשתמש במאפיין בסלקטורים ב-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>, או כותרת מטא-נתונים של מסמך, מכילה את כל המטא-נתונים של אתר או אפליקציה. הגוף מכיל את התוכן הגלוי. המשך הקטע הזה מתמקד ברכיבים שנמצאו בתוך הפתיחה והסגירה של <head></head>

הרכיבים הנדרשים בתוך `<head>`

המטא-נתונים של המסמך, כולל כותרת המסמך, מערכת התווים, הגדרות אזור התצוגה, התיאור, כתובת ה-URL הבסיסית, קישורים לגיליון הסגנונות והסמלים, נמצאים ברכיב <head>. יכול להיות שלא תצטרכו את כל התכונות האלה, אבל תמיד כדאי לכלול את ההגדרות של מערכת התווים, הכותרת ואזור התצוגה.

קידוד תווים

הרכיב הראשון ב-<head> צריך להיות הצהרת קידוד התווים charset. היא מופיעה לפני הכותרת כדי לוודא שהדפדפן יכול לעבד את התווים בכותרת הזו ואת כל התווים בשאר המסמך.

קידוד ברירת המחדל ברוב הדפדפנים הוא windows-1252, בהתאם ללוקאל. עם זאת, כדאי להשתמש ב-UTF-8, מפני שהוא מאפשר קידוד של 1 עד 4 בייט של כל התווים, אפילו אלה שלא ידעת על קיומם. בנוסף, זהו סוג הקידוד הנדרש על ידי HTML5.

כדי להגדיר את קידוד התווים ל-UTF-8, כוללים:

<meta charset="utf-8" />

אם מצהירים על UTF-8 (לא תלוי-רישיות), אפשר לכלול סמלי אמוג'י בשם הפריט (אבל אסור לעשות זאת).

קידוד התווים עובר בירושה לכל הטקסט במסמך, אפילו <style> ו-<script>. המשמעות של ההצהרה הקטנה הזו היא שאתם יכולים לכלול אמוג'י בשמות של כיתות וב-סלקטור API (שוב, אסור). אם אתם משתמשים בסמלי אמוג'י, הקפידו להשתמש בהם באופן שמשפר את נוחות השימוש בלי לפגוע בנגישות.

כותרת המסמך

לדף הבית ולכל הדפים הנוספים צריכה להיות כותרת ייחודית. התוכן של כותרת המסמך, הטקסט שבין תגי <title> הפותחים והסוגרים, מוצג בכרטיסייה בדפדפן, ברשימת החלונות הפתוחים, בהיסטוריה ובתוצאות החיפוש, אלא אם הוגדר מחדש באמצעות תגי <meta> בכרטיסי מדיה חברתית.

<title>Machine Learning Workshop</title>

מטא-נתונים של אזור התצוגה

המטא תג הנוסף שצריך להיחשב חיוני הוא המטא תג viewport. המטא תג, שעוזר למהירות התגובה של האתר ומאפשר עיבוד טוב של תוכן כברירת מחדל, ללא קשר לרוחב אזור התצוגה. המטא תג של Viewport קיים מאז יוני 2007, אבל כשה-iPhone הראשון הושק, הוא מתועד במפרט רק לאחרונה. הוא מאפשר לשלוט בגודל ובקנה המידה של אזור התצוגה, ולמנוע את גודל התוכן באתר כך שיתאים לאתר של 960 פיקסלים למסך של 320 פיקסלים.

<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> לפרק הבא.

ראית את המטא-תווים ואת כותרת המסמך, אבל יש הרבה יותר מטא-נתונים מחוץ לתגי <meta> שמומלץ לכלול.

CSS

<head> הוא המקום שבו מוסיפים סגנונות עבור ה-HTML. יש נתיב לימוד ייעודי ל-CSS אם אתם רוצים ללמוד על סגנונות, אבל צריך לדעת איך לכלול אותם במסמכי ה-HTML.

יש שלוש דרכים לכלול CSS: <link>, <style> והמאפיין style.

שתי הדרכים העיקריות לכלול סגנונות בקובץ ה-HTML הן על-ידי הכללת משאב חיצוני באמצעות אלמנט <link> עם המאפיין rel מוגדר ל-stylesheet, או על-ידי הכללת CSS ישירות בראש המסמך בתוך תגי פתיחה וסגירה של <style>.

התג <link> הוא השיטה המועדפת להוספת גיליונות סגנונות. קישור של גיליון סגנונות חיצוני אחד או כמה גיליונות סגנונות חיצוניים יעיל גם לחוויית המפתח וגם לביצועי האתר: תוכלו לתחזק את ה-CSS במקום אחד במקום לפזר אותו בכל מקום. דפדפנים יכולים לשמור במטמון את הקובץ החיצוני, כך שאין צורך להוריד אותו שוב בכל ניווט בדפים.

התחביר הוא <link rel="stylesheet" href="styles.css">, כאשר style.css הוא כתובת האתר של גיליון הסגנונות. לרוב יוצג לך type="text/css". אין צורך! אם משלבים סגנונות שנכתבו בשפה אחרת ולא ב-CSS, צריך להשתמש במאפיין type, אבל מכיוון שאין סוג אחר של סגנונות, אין צורך במאפיין הזה. המאפיין rel מגדיר את הקשר: במקרה הזה, stylesheet. אם תשמיטו את זה, שירות ה-CSS שלכם לא יקושר.

בקרוב יוצגו לך עוד כמה ערכים של rel, אבל קודם נדון בדרכים אחרות להוספת CSS.

אם אתם רוצים שהסגנונות של גיליון הסגנונות החיצוני ייכללו בשכבה מדורגת, אבל אין לכם גישה לעריכת קובץ ה-CSS כדי להוסיף בו את פרטי השכבה, כדאי לכלול את ה-CSS עם @import בתוך <style>:

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

כשמשתמשים ב-@import כדי לייבא גיליונות סגנונות למסמך, אפשר גם להוסיף אותם לשכבות בשלבים, ההצהרות @import חייבות להיות ההצהרות הראשונות ב-<style> או בגיליון הסגנונות המקושר, מחוץ להצהרה של מערכת התווים.

שכבות מדורגות הן עדיין חדשות למדי, ויכול להיות שלא תבחינו ב-@import בחלק <style> של הכותרת, אבל בדרך כלל תראו מאפיינים מותאמים אישית מוצהרים בבלוק סגנון ראש:

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

סגנונות, דרך <link> או <style>, או שניהם, צריכים להיכנס לראש. אפשר להוסיף אותן לגוף המסמך, אבל כדי לעצב את המודעות יופיעו בראש סדר העדיפויות. זה אולי נראה לא הגיוני, כי נראה לכם שאתם רוצים שהתוכן ייטען קודם, אבל אתם למעשה רוצים שהדפדפן ידע איך לעבד את התוכן כשהוא נטען. ראשית, הוספת סגנונות מונעת צביעה מחדש מיותרת שמתרחשת אם רכיב מסוים מעוצב לאחר העיבוד שלו בפעם הראשונה.

קיימת דרך אחת לכלול סגנונות שאף פעם לא תשתמש בהם ב-<head> של המסמך: סגנונות מוטבעים. סביר להניח שלעולם לא תשתמשו בסגנונות מוטבעים בראש הדף, מאחר שגיליונות הסגנונות של סוכני המשתמש מסתירים את הכותרת כברירת מחדל. לעומת זאת, אם רוצים ליצור עורך 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>`

הרכיב link משמש ליצירת קשרים בין מסמך ה-HTML לבין משאבים חיצוניים. ניתן להוריד חלק מהמשאבים האלה, אחרים מספקים מידע. סוג הקשר מוגדר על ידי הערך של המאפיין rel. כרגע יש 25 ערכים זמינים למאפיין rel שניתן להשתמש בהם עם <link>, <a> וגם <area>, או <form>, אבל בכמה מהם אפשר להשתמש עם כולם. עדיף לכלול נתונים שקשורים למטא-מידע בראש הדף וכאלה שקשורים לביצועים בטווח <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> כדי להגדיר תמונה שונה לגמרי בכל דף, או אפילו בכל טעינת דף, אבל לא לעשות זאת. כדי לשמור על עקביות וכדי שחוויית המשתמש תהיה טובה, מומלץ להשתמש בתמונה אחת. ב-Twitter משתמשים בציפור הכחולה: כשאתם רואים את הציפור הכחולה בכרטיסיית הדפדפן, אתם יודעים שהכרטיסייה פתוחה בדף Twitter, בלי ללחוץ על הכרטיסייה. 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>

קטע הקוד הזה יוצר handler של אירועים לרכיב עם המזהה switch. עם JavaScript, לא רוצים להפנות לרכיב לפני שהוא קיים. היא לא קיימת עדיין, ולכן לא נכלול אותה עדיין. כשנוסיף את רכיב מתג התאורה, נוסיף את <script> בחלק התחתון של ה-<body> במקום ב-<head>. למה? יש שתי סיבות. אנחנו רוצים לוודא שהרכיבים קיימים לפני שהסקריפט מפנה אליהם, כי אנחנו לא מבססים את הסקריפט על אירוע DOMContentLoaded. בנוסף, JavaScript לא רק חוסם את העיבוד, אלא גם מפסיק להוריד את כל הנכסים כשמתבצעת הורדה של הסקריפטים, ולא חוזר להוריד נכסים אחרים עד שה-JavaScript מסיים את ההפעלה. לכן, בדרך כלל בקשות JavaScript יופיעו בסוף המסמך ולא בכותרת.

יש שני מאפיינים שיכולים לצמצם את אופי החסימה של הורדה והפעלה של 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 וימלא את כל חלון הדפדפן.

אחד החסרונות של האלמנט הזה הוא שקישורים לעוגן פותרים באמצעות <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" 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>

נכון!

מבנה המסמך

הוספה לכל מסמך HTML

<!DOCTYPE html>

<html>

שפת התוכן

<head>

הרכיבים הנדרשים בתוך <head>

קידוד תווים

כותרת המסמך

מטא-נתונים של אזור התצוגה

תוכן אחר בקטגוריה <head>

CSS

שימושים אחרים של הרכיב <link>

סמל אתר

גרסאות חלופיות של האתר

כתובות URL קנוניות

סקריפטים

בסיס

תגובות HTML

בחינת ההבנה

`<!DOCTYPE html>`

`<html>`

`<head>`

הרכיבים הנדרשים בתוך `<head>`

תוכן אחר בקטגוריה `<head>`

שימושים אחרים של הרכיב `<link>`