HTML, או HyperText Markup Language, היא שפת הסימון הסטנדרטית המשמשת ליצירת דפי אינטרנט.
HTML מאפשר לך לבנות תוכן בדף אינטרנט באמצעות תגיות, המוקפות בסוגריים זווית, כגון <tagname>.
תגים אלה מציינים את ההתחלה והסוף של אלמנטים שונים, כגון כותרות, פסקאות ותמונות.
להלן סקירה קצרה של כמה מתגי ה-HTML הנפוצים ביותר:
<html>: זהו אלמנט הבסיס של מסמך HTML.
<head>: זה מכיל מטא מידע על הדף, כגון הכותרת וכל קישור לגיליונות סגנונות או סקריפטים.
<body>: לכאן עובר תוכן הדף.
<h1> – <h6>: אלו הן תגיות כותרות המעידות על חשיבות הטקסט.
<p>: תג זה משמש ליצירת פסקאות.
<a>: תג זה יוצר קישור לדף או למשאב אחר.
<img>: תג זה משמש להוספת תמונה בדף.
<ul> ו-<ol>: תגים אלה משמשים ליצירת רשימות לא מסודרות ומסודרות, בהתאמה.
<li>: תג זה משמש ליצירת פריטי רשימה.
<div>: זהו תג מיכל לשימוש כללי שניתן להשתמש בו כדי לקבץ אלמנטים אחרים.
<span>: זהו תג מיכל נוסף המשמש בדרך כלל להחלת סגנונות או תכונות אחרות על פיסת טקסט קטנה.
כעת, בואו נצלול לכמה דוגמאות קוד:
יצירת מסמך HTML בסיסי:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is some sample text.</p>
</body>
</html>
הוספת קישור לדף אחר:
<a href="http://www.example.com">Visit Example.com</a>
יצירת רשימה:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
הוספת תמונה:
<img src="image.jpg" alt="A description of the image">
הוספת טבלה:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
הוספת טופס:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
הוספת כפתור:
<button>Click me</button>
הוספת וידאו:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
הוספת רשימה מסודרת עם ספרות רומיות:
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
הוספת קו אופקי:
<hr>
הוספת קישור עם תמונה:
<a href="http://www.example.com"><img src="image.jpg" alt="A description of the image"></a>
הוספת הסבר כלים:
<span title="This is a tooltip">Hover over me</span>
הוספת תיבת סימון:
<input type="checkbox" id="myCheckbox" name="myCheckbox" value="yes">
<label for="myCheckbox">Check me</label>
יצירת רשימה מקוננת:
<ul>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
יצירת רשימה נפתחת:
<select name="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
יצירת קבוצת לחצני בחירה:
<input type="radio" id="option1" name="myRadio" value="option1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="myRadio" value="option2">
<label for="option2">Option 2</label><br>
<input type="radio" id="option3" name="myRadio" value="option3">
<label for="option3">Option 3</label>
הוספת מעבר שורה:
<br>
הוספת תמונת רקע:
<body style="background-image: url('background.jpg');">
הוספת הערה:
<!– This is a comment –>
יצירת ערכת שדות עם מקרא:
<fieldset>
<legend>My Legend</legend>
<label for="myInput">Enter some text:</label>
<input type="text" id="myInput" name="myInput">
</fieldset>
הוספת כותרת תחתונה:
<footer>
<p>© 2023 My Website</p>
</footer>
