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

חומר לימוד ב-HTML

קוד ה-HTML הוא הבסיס של דף אינטרנט. ביחידה הזו נסביר איך לבנות מבנה מוצק ומשמעותי לדף אינטרנט.

נקודות עיקריות

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

מה זה HTML?

HTML הוא קיצור של HyperText Markup Language (שפת סימון של היפר-טקסט). זהו קוד שמשמש אותנו כדי:

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

מתי משתמשים ב-HTML?

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

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

HTML בפעולה

בבסיס של HTML נמצאים רכיבים. רכיבים נוצרים באמצעות תגים.

לרוב הרכיבים יש תג פותח ותג סוגר:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

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

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

חלק מתוכן ה-HTML נוצר עם תגים שנסגרים מעצמם ולא צריך תג סוגר נוסף:

<img />
<link />

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

חלקי רכיב HTML

דוגמה בפורמט HTML

הקוד הזה יוצג בדפדפן וייראה כמו בתמונה שלמטה.

הקוד הזה…

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

‫... Makes This Web Page

HTML Reference

רשימה של כל תגי ה-HTML

מסגור

הקשר ומטרה

HTML הוא ראשי תיבות של Hyper Text Markup Language (שפת סימון היפר-טקסט). זו דרך לתת משמעות מבנית לטקסט. הוא מאפשר למחשבים ולמתכנתים לקבוע בקלות מה המטרה של קטע טקסט.

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

הערות למדריכים:

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

בשיעור הזה נציג כמה דוגמאות במהירות, ובאופן כללי יש שלוש גישות יעילות מאוד לשימוש בהן:

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

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

יעדי למידה

התלמידים יוכלו

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

תחילת העבודה

המסגרת והמטרה של הקטע

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

# creating an html file on the command line
touch index.html

# opening your html file in your browser
open index.html

אתגרים קצרים

יוצרים עוד 3 קובצי HTML עם שמות שרוצים.
פותחים את אחד הקבצים בכלי לעריכת טקסט ובדפדפן.

המבנה של דף HTML

המסגרת והמטרה של הקטע

מסמך HTML צריך תמיד להתחיל באותו מבנה:

התג DOCTYPE הוא מיוחד ואין לו תג סגירה. זה גם התג היחיד שיכול להכיל ערכים לא אלפאנומריים (אותיות/מספרים).
התג <head> מכיל מידע על האתר שלכם, אבל לא תוכן ממשי שיוצג בדף.
התג <body> מכיל את כל התוכן של הדף שיוצג בפועל במסך.
צריך להציב את התגים שבהם תשתמשו כדי ליצור את המבנה של הדף בין התגים <body>.
בין תגי הפתיחה והסגירה, אנחנו מוסיפים את הטקסט או את ה'תוכן' של האלמנט. התוצאה הסופית תיראה כך: <example-tag>Content Goes in here</example-tag>. אפשר גם להציב תגים בתוך תגים אחרים.
שימו לב: כשמציבים תג בתוך תג אחר, צריך להוסיף הזחה לתג החדש כדי לציין שהוא צאצא של תג האב שלו.

אוצר מילים

רכיבים – פריטים (כמו תמונות, פסקאות וכותרות) שנוצרו באמצעות קוד HTML.
תגים – קטעי קוד שמציינים איפה מתחילים ומסתיימים רכיבים מסוימים.
‫child – רכיבים שנכללים בתוך רכיבים אחרים.
‫parent – רכיבים שמכילים רכיבים אחרים.

דוגמאות ל-HTML

הערה: הדוגמה הבאה היא רק להמחשה. לא צריך להבין את כולה מיד, אבל כדאי לראות איך נראה קוד HTML מעוצב היטב.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

אתגרים קצרים

פותחים אחד מהקבצים שיצרתם ומוסיפים את המבנה הבסיסי של תג HTML.
מגדירים את גוף ה-HTML כדי להציג את עץ המשפחה (או את עץ המשפחה של מישהו אחר). משתמשים בתג section כדי להחזיק קבוצה משפחתית. משתמשים בתג p כדי להוסיף חבר/ה בקבוצה המשפחתית. המשפחות מורכבות, אבל הנה דוגמה:

<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

תגים נפוצים

המסגרת והמטרה של הקטע

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

דוגמאות לקטע קוד מפורטות במאמר בנושא הפניה ל-HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

אתגרים קצרים

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

הקשר

‫HTML היא השפה של התוכן באינטרנט.

תצטרכו להשתמש בשורת הפקודה כדי לנווט לקובצי ה-HTML ולפתוח אותם. קובצי ה-HTML יורחבו עם סגנונות CSS והתנהגות שנכתבו באמצעות סקריפטים של JavaScript, שמורכבים מפונקציות שונות. קובצי HTML יהיו גם תבניות שמשמשות את Google App Engine ומאוכלסות ממסד נתונים.

HTML בפעולה

תחילת העבודה עם HTML

קוד HTML נכתב בתוך קבצים עם הסיומת .html.

צפייה בדף

כדי לראות תצוגה מקדימה של קובץ HTML ב-Mac: בשורת הפקודה, עוברים לתיקייה עם דף ה-HTML ומקלידים open filename, ומחליפים את filename בשם של קובץ ה-HTML.

תחביר כללי

<tag>
  Content
</tag>

הרכיבים מוטמעים

אפשר למקם רכיבי HTML בתוך רכיבים אחרים:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

המבנה של דף HTML

לכל דף אינטרנט יש מבנה בסיסי זהה. כך הוא נראה:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

התג <head> מכיל מידע על האתר שלכם, אבל לא תוכן ממשי שיוצג בדף (אפשר לחשוב על התג הזה כעל 'המוח' של דף האינטרנט).
התג <body> מכיל את כל התוכן של הדף שיוצג בפועל במסך.

אלמנטים נפוצים

אפשר להשתמש ברכיבים הנפוצים האלה בתוך התגים <body> ו-</body> כדי להוסיף תוכן לדף.

פסקה

כדי ליצור פסקה, משתמשים בתגי הפתיחה והסגירה p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

תגובה

אפשר להשתמש בהערות כדי להקל על קריאת הקוד בלי להשפיע על קוד ה-HTML הסופי שעבר רינדור.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

כותרות

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

תג <div> כללי

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

רשימות

רשימות של פריטים ברשימה, <li>, עטופות בתג של רשימה לא מסודרת, <ul>, או בתג של רשימה מסודרת, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>

<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

תמונה

בתג <img> צריך לציין את כתובת התמונה באמצעות המאפיין src, והמאפיין האופציונלי alt משמש לנגישות, כולל קוראי מסך.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

עוגן (מה שאנשים רבים מכנים 'קישורים')

כדי להשתמש בתג <a> עבור היפר-קישור, צריך לציין את כתובת היעד של ההיפר-קישור באמצעות המאפיין href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

סרגל אופקי

<!-- This self-closing tag creates a line across your web page. -->
<hr>

הפסקה

<!-- This self-closing tag creates a line break between elements. -->
<br>

טופס

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

‫action – היעד של נתוני הטופס כשהטופס נשלח
‫method – מציין אם הנתונים צריכים לעבור עיבוד באמצעות בקשה מסוג GET או POST.

<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

קלט

‫<input> הוא הרכיב שמשמש את <form> לאיסוף מידע.

בדרך כלל לרכיב <input> יש גם מאפיין name שמשמש מסדי נתונים כדי לזהות את השדה שאליו שייכים הנתונים שנשלחו.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

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

טיפים וטריקים

כדי ללמוד אילו תגי HTML זמינים, אפשר לבדוק את הקוד של דפי אינטרנט ולראות באילו תגים מפתחים אחרים השתמשו כדי להוסיף משהו לדף אינטרנט.
אם אתם לא מוצאים את מה שאתם רוצים להוסיף, כדאי לעיין במסמכי התיעוד למפתחים. אלה כמה רשימות של כל רכיבי ה-HTML האפשריים: https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
כשכותבים HTML, לגבי רכיבים שצריכים תג פותח ותג סוגר, מומלץ לפתוח ולסגור את התג קודם, לפני שמוסיפים תוכן בין התגים. כך לא יישארו לכם תגים לא מקושרים.
כדי לראות בצורה הטובה ביותר את האופי המקונן של רכיבי HTML בקוד, כדאי להוסיף כניסה לרכיבים שנמצאים בתוך רכיבים אחרים. כך תוכלו לזהות במהירות את המבנה של תוכן ה-HTML.
להשתמש בהרבה תגובות. ההערות האלה יעזרו לכם לפתור בעיות בקוד שלכם, ויעזרו לאחרים כשתבקשו מהם לבדוק אותו.
משאבים באינטרנט כמו html5boilerplate.com יכולים לעזור לכם להתחיל לכתוב HTML במהירות.

סיכום שיטות מומלצות

מידע על דף אינטרנט מופיע ב-<head> של מסמך HTML: כותרת, מטא-נתונים, קישורים לסגנונות וכו'.
המידע בדף אינטרנט מופיע בתג <body> במסמך HTML.
יש הרבה רכיבים שמפתחים יכולים להשתמש בהם כדי ליצור את התוכן של מסמך HTML, כולל: <p>,‏ <h1>-<h6>,‏ <div>,‏ <li>,‏ <img>,‏ <a>,‏ <hr>,‏ <br>,‏  ועוד.
חלק מהאלמנטים דורשים תג פתיחה ותג סגירה: <p></p>.
יש גם רכיבים שנסגרים מעצמם, ולכן צריך להשתמש רק בתג פתיחה: <img>.
תגים יכולים לכלול מאפיינים (src,‏ alt,‏ id וכו') שמספקים מידע נוסף על האופן שבו רכיב צריך להתנהג: <img src="filename.png" alt="description">.
הערות, , מספקות למפתחים הערות שימושיות להבנת הפעולות של קטעים בדף אינטרנט.
אפשר להשתמש בכלים המובנים למפתחים בדפדפן כדי לבדוק את קוד ה-HTML של דפי אינטרנט ולראות איך הדף נבנה.

שאלה 1

איזה מהרכיבים הבאים הוא רכיב צאצא? (אין להתייחס לרכיבי body/html לצורך התרגיל הזה)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

h1
p
a
h1 ו-p

שאלה 2

במסמך HTML, התג מופיע ברכיב `<head>` והתג מופיע ברכיב `<body>`.

מבנה, מטא-נתונים
מטא-נתונים, מבנה
כותרות, תוכן קטן יותר
הכותרת העליונה של האתר, התוכן הראשי של האתר

שאלה 3

אילו מהסיבות הבאות הן לא סיבות טובות להוספת כניסה לאלמנטים מקוננים?

הזחה מקלה על ההבנה אילו רכיבים נכללים ברכיבים אחרים
ההזחה מקלה על אנשים לקרוא את המבנה של דף האינטרנט
הזחה מקלה על בוטים או מנועי חיפוש לקרוא את המבנה של דף האינטרנט
הזחה מקלה על זיהוי רכיבים באותה רמה

שאלה 4

איזו מהאפשרויות הבאות היא מאפיין של רכיב HTML?

<div class="sidebar">Sidebar goes here!</div>

div
class
סרגל צד
סרגל הצד יופיע כאן!

שאלה 5

כמה מאפיינים יש לרכיב ה-HTML הבא?

<input type="text" placeholder="username" name="username" />

שאלה 6

בקטע ה-HTML הבא שמתאר קשר גומלין, איזה אלמנט הוא אלמנט אב?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p>
<b>
<i>

שאלה 7

כמה מהאלמנטים בקטע קוד ה-HTML הבא הם צאצא של אלמנט הורה?

(אל תספרו את רכיבי התג <body> או <html>)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

שאלה 8

חלק מהדפדפנים יעבדו את קטע קוד ה-HTML הבא בצורה נכונה, אבל מה לא בסדר בו?

<img src=puppies.png width=400 />

אין לו תג סוגר
צריך להוסיף מירכאות סביב ערכי המאפיינים
כדי לציין את המאפיין width, צריך לציין גם את המאפיין height
חסר מאפיין חובה

שאלה 1

איזה מהרכיבים הבאים הוא רכיב צאצא? (אין להתייחס לרכיבי body/html לצורך התרגיל הזה)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

הרכיב a הוא רכיב צאצא כי הוא כלול ברכיב אחר.

שאלה 2

במסמך HTML, התג מופיע ברכיב `<head>` והתג מופיע ברכיב `<body>`.

המטא-נתונים נכנסים לרכיב <head> והמבנה נכנס לרכיב <body>. שום דבר ברכיב <head> לא יהיה גלוי בדף האינטרנט עצמו.

שאלה 3

אילו מהסיבות הבאות הן לא סיבות טובות להוספת כניסה לאלמנטים מקוננים?

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

שאלה 4

איזו מהאפשרויות הבאות היא מאפיין של רכיב HTML?

<div class="sidebar">Sidebar goes here!</div>

‫class הוא המאפיין – מאפיינים מופיעים בתוך רכיב HTML, ובדרך כלל יש להם ערך (אבל לא תמיד).

שאלה 5

כמה מאפיינים יש לרכיב ה-HTML הבא?

<input type="text" placeholder="username" name="username" />

לרכיב input שלמעלה יש 3 מאפיינים – type,‏ placeholder ו-name.

שאלה 6

בקטע ה-HTML הבא שמתאר קשר גומלין, איזה אלמנט הוא אלמנט אב?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

‫<p> הוא רכיב הורה כי הוא מכיל רכיבים אחרים.

שאלה 7

כמה מהאלמנטים בקטע קוד ה-HTML הבא הם צאצא של אלמנט הורה?

(אל תספרו את רכיבי התג <body> או <html>)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

יש 4 רכיבי צאצא בקטע הקוד – בעצם, כל רכיב שיש לו רכיב אב מעליו, כלומר כל רכיב חוץ מהרכיב <div> – <h1>, <p>, <i>, <a>.

שאלה 8

חלק מהדפדפנים יעבדו את קטע קוד ה-HTML הבא בצורה נכונה, אבל מה לא בסדר בו?

<img src=puppies.png width=400 />

צריך להוסיף מירכאות סביב ערכי המאפיינים. ‫<img /> הוא תג סגירה עצמית, ואין לו מאפיין חובה. אפשר להשתמש ב-width בלי height ולהפך.

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

נקודות עיקריות

מה זה HTML?

מתי משתמשים ב-HTML?

HTML בפעולה

חלקי רכיב HTML

דוגמה בפורמט HTML

הקוד הזה…

‫... Makes This Web Page

HTML Reference

מסגור

הקשר ומטרה

יעדי למידה

תחילת העבודה

המסגרת והמטרה של הקטע

אתגרים קצרים

המבנה של דף HTML

המסגרת והמטרה של הקטע

אוצר מילים

דוגמאות ל-HTML

אתגרים קצרים

תגים נפוצים

המסגרת והמטרה של הקטע

אתגרים קצרים

הקשר

HTML בפעולה

תחילת העבודה עם HTML

צפייה בדף

תחביר כללי

הרכיבים מוטמעים

המבנה של דף HTML

אלמנטים נפוצים

פסקה

תגובה

כותרות

תג <div> כללי

רשימות

תמונה

עוגן (מה שאנשים רבים מכנים 'קישורים')

סרגל אופקי

הפסקה

טופס

קלט

טיפים וטריקים

סיכום שיטות מומלצות

שאלה 1

איזה מהרכיבים הבאים הוא רכיב צאצא? (אין להתייחס לרכיבי body/html לצורך התרגיל הזה)

שאלה 2

במסמך HTML, התג __ מופיע ברכיב <head> והתג __ מופיע ברכיב <body>.

שאלה 3

אילו מהסיבות הבאות הן לא סיבות טובות להוספת כניסה לאלמנטים מקוננים?

שאלה 4

איזו מהאפשרויות הבאות היא מאפיין של רכיב HTML?

שאלה 5

כמה מאפיינים יש לרכיב ה-HTML הבא?

שאלה 6

בקטע ה-HTML הבא שמתאר קשר גומלין, איזה אלמנט הוא אלמנט אב?

שאלה 7

כמה מהאלמנטים בקטע קוד ה-HTML הבא הם צאצא של אלמנט הורה?

שאלה 8

חלק מהדפדפנים יעבדו את קטע קוד ה-HTML הבא בצורה נכונה, אבל מה לא בסדר בו?

שאלה 1

איזה מהרכיבים הבאים הוא רכיב צאצא? (אין להתייחס לרכיבי body/html לצורך התרגיל הזה)

שאלה 2

במסמך HTML, התג __ מופיע ברכיב <head> והתג __ מופיע ברכיב <body>.

שאלה 3

אילו מהסיבות הבאות הן לא סיבות טובות להוספת כניסה לאלמנטים מקוננים?

שאלה 4

איזו מהאפשרויות הבאות היא מאפיין של רכיב HTML?

שאלה 5

כמה מאפיינים יש לרכיב ה-HTML הבא?

שאלה 6

בקטע ה-HTML הבא שמתאר קשר גומלין, איזה אלמנט הוא אלמנט אב?

שאלה 7

כמה מהאלמנטים בקטע קוד ה-HTML הבא הם צאצא של אלמנט הורה?

שאלה 8

חלק מהדפדפנים יעבדו את קטע קוד ה-HTML הבא בצורה נכונה, אבל מה לא בסדר בו?

חומר לימוד ב-HTML

במסמך HTML, התג מופיע ברכיב `<head>` והתג מופיע ברכיב `<body>`.

במסמך HTML, התג מופיע ברכיב `<head>` והתג מופיע ברכיב `<body>`.