לדלג לתוכן

0.5 טקסט, קישורים, תמונות ומדיה תרגול

תרגול 1 - דף מתכון

צרו דף HTML שלם של מתכון למנה שאתם אוהבים. הדף צריך לכלול:

  1. כותרת h1 עם שם המנה.
  2. תמונה של המנה עם alt מתאר.
  3. פסקה קצרה שמתארת את המנה.
  4. כותרת h2 "מרכיבים" ורשימה לא מסודרת (ul) של כל המרכיבים.
  5. כותרת h2 "הוראות הכנה" ורשימה מסודרת (ol) של שלבי ההכנה.
  6. קו אופקי (hr) בסוף.
  7. קישור לאתר שממנו לקחתם את המתכון (שיפתח בטאב חדש).

תרגול 2 - גלריית תמונות

צרו דף HTML עם גלריית תמונות. הדף צריך לכלול:

  1. כותרת h1 "הגלרייה שלי".
  2. לפחות 4 תמונות, כל אחת עטופה בfigure עם figcaption.
  3. לכל תמונה alt מתאר.
  4. הגדירו width לכל תמונה כדי שיהיו באותו גודל.
  5. הוסיפו תחת הגלרייה פסקה שמסבירה על התמונות.

רמז: אפשר להשתמש בתמונות מהאינטרנט עם כתובת URL מלאה בsrc.

תרגול 3 - עמוד עם סרטון יוטיוב

צרו דף HTML עם סרטון יוטיוב מוטמע:

  1. כותרת h1 עם שם הסרטון.
  2. פסקה שמתארת על מה הסרטון.
  3. iframe עם סרטון יוטיוב לבחירתכם (לכו ליוטיוב, לחצו Share ואז Embed, והעתיקו את הקוד).
  4. רשימה לא מסודרת של 3 נקודות מעניינות מהסרטון.
  5. קישור לסרטון ביוטיוב (שיפתח בטאב חדש).

תרגול 4 - דף תיק עבודות - portfolio

צרו דף תיק עבודות אישי שמכיל:

  1. כותרת h1 עם השם שלכם.
  2. תמונה (יכולה להיות כל תמונה) עם alt.
  3. כותרת h2 "על עצמי" ופסקה שמספרת עליכם.
  4. כותרת h2 "הפרויקטים שלי" ורשימה לא מסודרת של לפחות 3 פרויקטים, כאשר כל פרויקט הוא קישור (יכול להצביע לכל כתובת).
  5. כותרת h2 "כישורים" ורשימה מקוננת - קטגוריות ראשיות ובתוכן כישורים ספציפיים.
  6. קו אופקי וציטוט (blockquote) עם משפט מעורר השראה.
  7. בתחתית הדף - כתובת מייל כקישור mailto.

תרגול 5 - דף תוכן מעוצב

צרו דף HTML שמכיל:

  1. כותרת h1 "מדריך HTML למתחילים".
  2. תוכן עניינים עם קישורי עוגן (anchor links) ל-3 חלקים שונים בדף.
  3. כל חלק מתחיל בכותרת h2 עם id מתאים.
  4. השתמשו בstrong ובem לטקסט מודגש ומוטה.
  5. הציגו דוגמת קוד בתוך תגית code ובלוק קוד בתוך pre.
  6. השתמשו בישויות HTML כדי להציג את התווים <, >, ו-& כטקסט על המסך.

תרגול 6 - שאלות תיאורטיות

ענו על השאלות הבאות:

  1. מה ההבדל בין strong לבין b? מתי עדיף להשתמש בכל אחד?

  2. מה התכונה alt עושה בתגית img? למה היא כל כך חשובה?

  3. מתי נשתמש ברשימה מסודרת (ol) ומתי ברשימה לא מסודרת (ul)? תנו דוגמה לכל אחת.

  4. מה ההבדל בין div לבין span?

  5. למה כדאי להוסיף width ו-height לתמונות?

  6. מה ההבדל בין כתובת יחסית (relative) לכתובת מוחלטת (absolute)? מתי עדיף להשתמש בכל אחת?

  7. מתי נשתמש בfigure ו-figcaption במקום img רגיל?