מבוא לקורס
מדריך אינטראקטיבי: לצד הקורס יש גם המדריך האולטימטיבי ל-HTML, דף אחד עם דוגמאות חיות, חיפוש ומפקח תגים.
ברוכים הבאים
קורס מקיף ללימוד HTML מאפס, גם בלי שום ידע קודם. הוא מכסה את כל היסודות, מהמבנה של מסמך ועד טפסים, סמנטיקה ונגישות, עם דגש על כתיבה נכונה ונקייה.
למה HTML?
- שפת הבסיס של כל דף אינטרנט
- מגדירה את המבנה והתוכן של הדף
- עובדת יד ביד עם CSS (עיצוב) ו-JavaScript (התנהגות)
- HTML נכון הוא הבסיס לנגישות ול-SEO
לפני שמתחילים
- אין צורך בידע קודם
- דפדפן ועורך קוד (מומלץ VS Code עם התוסף Live Server)
מבנה הקורס
חלק א' - יסודות
| # | שיעור |
|---|---|
| 1 | רקע והיסטוריה |
| 2 | מבנה מסמך HTML |
| 3 | תחביר בסיסי |
חלק ב' - אלמנטים
| # | שיעור |
|---|---|
| 4 | אלמנטים לטקסט |
| 5 | קישורים ותמונות |
| 6 | רשימות |
| 7 | טבלאות |
חלק ג' - מתקדם
| # | שיעור |
|---|---|
| 8 | טפסים |
| 9 | אלמנטים סמנטיים |
| 10 | תכונות (Attributes) |
| 11 | שיטות עבודה מומלצות |
דוגמאות קוד
לכל נושא יש קובץ קוד מלא ומתועד. לחיצה על קובץ פותחת אותו עם הדגשת תחביר, כפתור העתקה ואפשרות הורדה.
| # | נושא | קובץ |
|---|---|---|
| 1 | מבנה בסיסי | 01_basic_structure.html |
| 2 | אלמנטים לטקסט | 02_text_elements.html |
| 3 | קישורים ותמונות | 03_links_images.html |
| 4 | רשימות | 04_lists.html |
| 5 | טבלאות | 05_tables.html |
| 6 | טפסים | 06_forms.html |
| 7 | אלמנטים סמנטיים | 07_semantic.html |
| 8 | דף שלם | 08_complete_page.html |
איך מתחילים
צרו קובץ חדש בשם index.html והדביקו בו:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>הדף הראשון שלי</title>
</head>
<body>
<h1>שלום עולם!</h1>
<p>זהו הדף הראשון שלי ב-HTML.</p>
</body>
</html>
שמרו ופתחו את הקובץ בדפדפן (אפשר פשוט לגרור אותו לחלון הדפדפן). מעכשיו כל שינוי: שומרים, מרעננים ורואים את התוצאה.
סדר לימוד מומלץ
- יום 1: רקע, מבנה ותחביר (שיעורים 1-3)
- יום 2: טקסט, קישורים ותמונות (שיעורים 4-5)
- יום 3: רשימות וטבלאות (שיעורים 6-7)
- יום 4: טפסים (שיעור 8)
- יום 5: סמנטיקה, תכונות ושיטות עבודה מומלצות (שיעורים 9-11)
משאבים נוספים
בהצלחה! מתחילים בשיעור הראשון: רקע והיסטוריה.