1.2 קוד html תרגיל
להלן מספר תרגילים שתוכל לתת למשתתפים בהרצאה כדי לתרגל את החומר הנלמד:
תרגיל 1: בניית דף HTML בסיסי¶
הוראות:
1. צור קובץ HTML חדש בשם index.html
2. הוסף את המבנה הבסיסי של HTML5
3. בתוך ה-<body>:
- הוסף כותרת ראשית עם השם שלך
- הוסף פסקה עם תיאור קצר על עצמך
- הוסף תמונה (אפשר להשתמש בתמונה כלשהי מהאינטרנט או מקובץ מקומי)
4. שמור והרץ את הקובץ בדפדפן
תרגיל 2: יצירת רשימות¶
הוראות:
צור דף HTML עם:
1. רשימה לא מסודרת של 3 מאכלים אהובים
2. רשימה מסודרת של 3 שלבים להכנת כוס תה/קפה
3. כל רשימה צריכה להיות עם כותרת מתאימה (h2 או h3)
תרגיל 3: טופס יצירת קשר¶
הוראות:
צור טופס יצירת קשר עם השדות הבאים:
1. שם מלא (שדה חובה)
2. אימייל (שדה חובה, צריך להיות בפורמט אימייל)
3. מספר טלפון
4. אפשרות בחירה בין "שאלה", "הצעה" או "תלונה" (select או radio buttons)
5. תיבת טקסט גדולה להודעה
6. כפתור "שלח"
תרגיל 4: טבלת מוצרים¶
הוראות:
צור טבלה של 4 מוצרים בחנות עם העמודות הבאות:
1. שם המוצר
2. מחיר
3. כמות במלאי
4. הערות
הוסף כותרת לטבלה והוסף גבול לטבלה.
תרגיל 5: דף אישי מורחב¶
הוראות:
צור דף HTML אישי עם:
1. כותרת ראשית עם שמך
2. תמונה שלך או תמונה כללית
3. חלק "עליי" עם 2-3 פסקאות
4. חלק "השכלה" עם רשימה מסודרת
5. חלק "תחביבים" עם רשימה לא מסודרת
6. קישור לאתר אהוב
7. טבלה עם 3 סדרות/סרטים אהובים (עם עמודות: שם, שנה, דירוג אישי)
תרגיל מתקדם: שילוב CSS בסיסי¶
הוראות:
קח את הדף מהתרגיל הקודם והוסף:
1. צבע רקע לדף
2. צבע שונה לכותרת הראשית
3. גופן שונה לפסקאות
4. יישור טקסט למרכז עבור הכותרות
5. גבול ותמונה מסביב לתמונה
תרגיל אתגרי: דף מלא עם הכל¶
הוראות:
צור דף HTML שלם שיכלול את כל האלמנטים שלמדנו:
1. מבנה HTML מלא
2. כותרות ברמות שונות
3. פסקאות
4. רשימות מסודרות ולא מסודרות
5. טבלה
6. טופס
7. תמונה
8. קישורים
9. CSS בסיסי (צבעים, גופנים)
10. JavaScript בסיסי (כפתור עם alert)