מדריך ל-HTML פלוס {22 דוגמאות קוד}

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>&copy; 2023 My Website</p>
</footer>

 

מה תמצאו במאמר זה?

צריכים להתייעץ?