יסודות ה-HTML

Articles

יסודות ה-HTML

במאמר זה נסביר את יסודות ה-HTML.

זה מסביר את התגיות המרכזיות כגון הכרזת DOCTYPE, <html>, <head> ו-<body>. זה גם מתאר תגיות, מאפיינים ותווים מיוחדים.

YouTube Video

יסודות ה-HTML

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>HTML is the language used to create the basic structure of web pages.</p>
15        </main>
16    </body>
17</html>

<!DOCTYPE html>

בתחילת הקובץ, אנו מצהירים שזהו מסמך HTML5, דבר שמראה שהוא פועל בהתאם לחוקי HTML5.
<html>

תגית <html> היא האלמנט החיצוני ביותר במסמך HTML שעוטפת את כל התוכן. כל קובץ HTML מכיל רק תגית <html> אחת, וכל התגיות האחרות מעוגנות בתוכה. המאפיין lang="en" בתוך תגית <html> הפותחת נקרא מאפיין ומיידע את הדפדפן שהמסמך נכתב באנגלית. זה עוזר להודיע לקוראי מסך ולמנועי חיפוש על השפה של המסמך.
<head>

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

<meta charset="UTF-8"> מגדיר את קידוד התווים של המסמך ל-UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> הוא כיוון שמייעל את התצוגה למכשירים ניידים. הדף מתאים את עצמו לרוחב המסך של המכשיר.

<title> מייצג את הכותרת של הדף המוצגת בלשונית הדפדפן. בדוגמה זו, הכותרת 'בסיסי HTML' מוגדרת.
<body>

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

התגית <main> מייצגת את התוכן העיקרי של הדף. הדבר כולל כותרות ופסקאות.
<h1>

התגית <h1> מייצגת את הכותרת החשובה ביותר בדף. נהוג להשתמש בתגיות <main> ו-<h1> רק פעם אחת במסמך.
<p>

התגית <p> מייצגת פסקה.


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

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

תגים ותכונות

כעת, בואו נבחן את תגיות ותכונות ה-HTML.

 1<!-- Opening tag and closing tag -->
 2<div>Content</div>
 3
 4<!-- Self-closing tag -->
 5<br>
 6
 7<!-- Nested tag -->
 8<div>
 9    <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14    <div>Nested Content</div>
15</div>
16
17<!-- Tag     : <div> -->
18<!-- Element : <div>Content</div> -->

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

לתגים יכולים להיות תכונות המספקות מידע נוסף לתג. תכונות נכתבות בתוך תג הפתיחה בפורמט attribute-name="value".

כאן, <div> מתייחסת כתגית, ו-<div>Content</div> מתייחסת כאלמנט.

1<div id="header">
2    <ul class="menu">
3        <li>Home</li>
4        <li style="display: hidden;">Unvisible Menu Item</li>
5    </ul>
6</div>

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

תווים מיוחדים ב-HTML

כעת, בואו נבדוק תווים מיוחדים ב-HTML.

ב-HTML ישנם תווים מיוחדים שמשמשים להצגת סמלים ותווים מסוימים. תווים מיוחדים אלה נקראים ישויות (entities). תווים מיוחדים מתחילים ב-& (אמפרסנד), ואחריהם שם או מספר, ומסתיימים ב-; (נקודה-פסיק).

תווים מיוחדים מייצגים ב-HTML

להלן מספר תווים מיוחדים נפוצים.

Display	Entity Name	Entity Number	Description
`&`	`&`	`&`	Ampersand (`&`)
`<`	`<`	`<`	Less-than sign (`<`)
`>`	`>`	`>`	Greater-than sign (`>`)
`"`	`"`	`"`	Double quotation mark (`"`)
`'`	`'`	`'`	Apostrophe (`'`)
©	`©`	`©`	Copyright symbol (©)
€	`€`	`€`	Euro symbol (€)
¥	`¥`	`¥`	Japanese Yen symbol (¥)
¢	`¢`	`¢`	Cent symbol (¢)
£	`£`	`£`	Pound symbol (£)
	` `	` `	Non-breaking space (space)

דוגמאות לשימוש בתווים מיוחדים ב-HTML

באופן מיוחד, יש להשתמש בסוגריים משולשים (<, >) ובמירכאות כפולות באופן נכון ב-HTML.

סוגריים זוויתיים (<, >) וסימני מרכאות כפולות יש לייצג כתווים מיוחדים ב-HTML, כפי שמוצג להלן.

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>
15                HTML is the language used to create the basic structure of web pages.<br>
16                It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17            </p>
18            <hr>
19            <h2>Basic Elements of HTML</h2>
20            <div>
21                HTML elements are used to organize and display content on a web page.
22                They include tags for text, images, links, and more.
23            </div>
24            <hr>
25            <ul>
26                <li>Headings (e.g., &lt;h1&gt;, &lt;h2&gt;)</li>
27                <li>Paragraphs (&lt;p&gt;)</li>
28                <li>Links (&lt;a&gt;)</li>
29                <li>Lists (&lt;ul&gt;, &lt;ol&gt;)</li>
30                <li>Images (&lt;img&gt;)</li>
31            </ul>
32            <hr>
33-            <h3>About '<h1>' tag and '<h2>' tag</h3>
34+            <h3>About '&lt;h1&gt;' tag and '&lt;h2&gt;' tag</h3>
35            <img src="image.png"
36-                alt="This is an example of "image"">
37+                alt="This is an example of &quot;image&quot;">
38        </main>
39    </body>
40</html>

גרסאות HTML

בואו נסתכל כאן על גרסאות HTML.

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

HTML 1.0 (1993)

לגרסה הראשונה של HTML היו רק תכונות סימון בסיסיות מאוד. היא הגדירה אלמנטים כמו קישורים, כותרות, פסקאות ורשימות.
HTML 2.0 (1995)

הגרסה הסטנדרטית הראשונה, שהוסיפה יותר אלמנטים כולל תמיכה בטפסים וטבלאות.
HTML 3.2 (1997)

נוספו מאפייני עיצוב נוספים, שאפשרו שילוב אלמנטים של עיצוב וסקריפטים. בנוסף, עיצוב באמצעות אלמנט <table> הפך נפוץ.
HTML 4.01 (1999)

ההפרדה בין המבנה למצגת התקדמה, ו-CSS הוצג. הומלץ על יצירת אתרים התואמים לסטנדרטים. כמו כן, התאמות בין-לאומיות ונגישות המסמכים שופרו.
HTML5 (2014)

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

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

HTML התפתחה במהלך גרסאות אלו, והפכה לטכנולוגיית רשת גמישה וחזקה יותר.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

HTML סמנטי