תרגיל - הוספת HTML בסיסי ליישום האינטרנט שלך

10 דקות

כרגע, אתר האינטרנט שלך כולל קובץ HTML ריק. בוא נוסיף קוד! המטרה היא להשתמש בשפת סימון היפר-טקסט (HTML) כדי לתאר את דף האינטרנט שהדפדפנים של הלקוחות צריכים להציג. לא יהיה נחמד אם תהיה לך תבנית פותחת? עורכים יכולים למלא בנוחות חלק ממבנה ה-Boilerplate או ה-HTML הטיפוסי עבורך.

ביחידה זו, עליך להוסיף תוכן HTML בסיסי, לפתוח את דף ה- HTML בדפדפן ולקבל את ההסתכלות הראשונה שלך על כלי הפיתוח.

הוספת קוד HTML

Visual Studio Code מספק תמיכה בסיסית בתיכנות HTML מהקופסה. יש סימון תחביר, השלמה חכמה עם IntelliSense ועיצוב הניתן להתאמה אישית.

פתח את תיקיית אתר האינטרנט שלך ב- Visual Studio Code ולאחר מכן פתח index.html הקובץ על-ידי בחירתו בתיבת הדוExplorer.
בדף index.html, הקלד html:5ולאחר מכן בחר הזן. קוד תבנית HTML5 נוסף לקובץ.

הערה

אם קוד התבנית של HTML5 לא נוסף לקובץ ה- index.html, נסה לסגור ולפתוח מחדש את הקובץ.

ערוך את קוד התבנית כך שדומה לקוד הבא. לאחר מכן שמור את הקובץ על-ידי הקש Control+S- Windows או Command+S ב- macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

קיימות גירסאות שונות של HTML. מסמך doctype<!DOCTYPE html> שמסמך HTML זה מכיל קוד HTML5.

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

ערכת התווים (charset) עבור UTF-8 עשויה להיראות חסרת חשיבות, אך היא חיונית ליצירת האופן בו מחשבים מפרשים תווים. אם המטה-נתונים של ערכת התווים חסרים, זה עלול להוביל לאבטחה שנחשף לסכנה. יש לא מעט היסטוריה ומידע טכני מאחורי תכונת charset, אך המ לקחת החשוב בתרגיל זה הוא ש- Visual Studio Code boilerplate מספק כמה ברירות מחדל הגיוניות.

ערוך את הראש

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

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

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

חשוב

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

בעורך, שנה את <title> כך שהוא יהיה דומה לדוגמה הבאה.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

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

בעורך Visual Studio Code, הוסף שורה ריקה לאחר הרכיב <title>, הקלד linkולאחר מכן בחר Enter. Visual Studio Code אמור להוסיף את השורה הבאה לקובץ index.html שלך.
```
<link rel="stylesheet" href="">
```

עדכן את href= כך href="main.css"ושמור את הקובץ על-ידי בחירה באפשרות Control+S ב- Windows או ב- Command+S ב- macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

ערוך את גוף ההודעה

נתחיל למלא את הרכיב <body> כעת.

רכיב <body> מכיל את תוכן אתר האינטרנט שלך הגלוי ללקוחות שלך בדפדפנים שלהם.

בתוך רכיב <body>, הוסף רכיב כותרת <h1> ואחריו רכיב paragraph<p> ולאחר מכן צור רשימה לא מסודרת<ul> המכילה כמה רשימה<li> רכיבים.

ערוך את הקוד, או העתק והדבק, כך שהוא ייראה כמו הדוגמה הבאה.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

באפשרותך להשתמש בתכונת מזהה (המשמשת ברכיב <p>) לצורך עיצוב רכיב אחד, בעוד שתכונת המחלקה (המשמשת ברכיב <li>) מיועדת להקלדה של כל הרכיבים מאותה מחלקה.

לפני השלב הבא, ודא שהקובץ נשמר על-ידי בחירה באפשרות Control+S או Command+S.

פתח בדפדפן

באפשרותך להציג בתצוגה מקדימה את דף האינטרנט באופן מקומי על-ידי פתיחת קובץ ה- HTML בדפדפן. במקום כתובת אתר אינטרנט המתחילה ב- https://, הדפדפן שלך מצביע על נתיב הקובץ המקומי, אשר אמור להיראות דומה לנתיב C:/dev/simple-website/index.html.

כדי להציג תצוגה מקדימה באמצעות Visual Studio Code, לחץ באמצעות לחצן העכבר הימני על index.html ובחר פתח בדפדפן ברירת המחדל, או בחר את הקובץ index.html והשתמש בקיצור המקשים Alt+B.

חשוב

אם אתה נתקל בבעיות, ודא שאתה לוחץ באמצעות לחצן העכבר הימני ישירות על סמל שם הקובץ או הטקסט. אם מופיעה תיבת דו-שיח של Visual Studio Code, בחר כן, אני נותן אמון בעורכים; זוהי התכונה 'אמון בסביבת עבודה' המאפשרת לך להחליט אם תיקיות הפרוייקט שלך אמורות לאפשר או להגביל את ביצוע הקוד האוטומטי. זה עתה יצרת את הקובץ, כדי שהוא יהיה בטוח.

דף האינטרנט נפתח בדפדפן ברירת המחדל שלך.

הצגת הדף באמצעות כלי פיתוח

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

פתח את כלי הפיתוח על-ידי לחיצה באמצעות לחצן העכבר הימני בדף האינטרנט ובחירה באפשרות בדוק, או נסה את קיצורי הדרך הבאים:
- הקש על קיצור המקשים כלי פיתוח, F12.
- הקש Ctrl+Shift+I- Windows ו- Linux או Option+Command+I ב- Mac.
קיצורי מקשים אלה פועלים ב- Microsoft Edge, Chromeו- Firefox. אם אתה משתמש ב- Safari, עיין במאמר פיתוח אתרים. לאחר ההתקנה, בחר Safari > העדפותולאחר מכן בחר מתקדם. בחלק התחתון של החלונית, בחר את תיבת הצג תפריט פיתוח בשורת התפריטים הסימון. בחר פתח > הצג מפקח. לקבלת מידע נוסף, עיין בתיעוד של 'מפקח האינטרנט של Safari'.

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

הכרטיסיה רכיבי כלים למפתחים מציגה את מודל אובייקטי המסמך (DOM) כפי שעובד בדפדפן. בעת איתור באגים, לעתים קרובות חשוב לראות כיצד הדפדפן מפרש את קוד המקור שלך.

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

משוב

האם עמוד זה היה מועיל?