0.8 פרויקטים פרויקט

פרויקט 1 - דף קורות חיים אישי¶

בנו דף HTML שלם של קורות חיים (CV) אישיים. הדף צריך להיראות מקצועי ולהכיל את כל המידע שבדרך כלל נמצא בקורות חיים.

דרישות מבנה¶

מבנה סמנטי מלא - השתמשו בתגיות header, main, section, footer.
כותרת עליונה (header) שמכילה:
תמונה (עם alt מתאר) - יכולה להיות כל תמונה.
שם מלא בכותרת h1.
כותרת תפקיד (למשל "מפתח פרונטאנד") בכותרת h2.
פרטי התקשרות בתגית address: טלפון (עם קישור tel), אימייל (עם קישור mailto), קישור לפרופיל LinkedIn.
חלק "על עצמי" (section) שמכיל:
כותרת h2.
פסקה או שתיים שמתארות אתכם מקצועית.
חלק "ניסיון תעסוקתי" (section) שמכיל:
כותרת h2.
לפחות 2 מקומות עבודה, כל אחד עם:
- שם החברה ותפקיד בכותרת h3.
- תקופת עבודה בתגית time.
- רשימה (ul) של תחומי אחריות.
חלק "השכלה" (section) עם טבלה שמכילה:
עמודות: מוסד לימודים, תואר/תעודה, שנים.
שימוש בthead ו-tbody.
לפחות 2 שורות.
חלק "כישורים" (section) שמכיל:
כותרת h2.
רשימות מקוננות - קטגוריות עם כישורים ספציפיים (למשל: שפות תכנות, כלים, שפות דיבור).
טופס "צור קשר" (section) שמכיל:
שם (text, required).
אימייל (email, required).
נושא (select עם אפשרויות: הצעת עבודה, שיתוף פעולה, אחר).
הודעה (textarea, required).
כפתור שליחה.
labels ל-100% מהשדות.
כותרת תחתונה (footer) עם:
זכויות יוצרים.
קישור חזרה לראש הדף (anchor link).

דרישות נגישות¶

lang="he" ו-dir="rtl" בתגית html.
meta charset UTF-8.
כל תמונה עם alt.
כל שדה טופס עם label.
היררכיית כותרות נכונה (h1, h2, h3 - בלי דילוגים).
ניתן לנווט בכל הדף עם מקלדת.

פרויקט 2 - בלוג אישי עם 3 עמודים¶

בנו בלוג אישי שמורכב מ-3 עמודי HTML מחוברים עם ניווט ביניהם. כל העמודים צריכים להיות באותה תיקייה.

עמוד 1 - דף הבית (index.html)¶

header עם:
שם הבלוג בh1.
nav עם קישורים ל-3 העמודים (index.html, post.html, contact.html).
main שמכיל:
כותרת h2 "ברוכים הבאים".
פסקה מקדימה על הבלוג.
לפחות 2 "תצוגות מקדימות" של פוסטים, כל אחת בתוך article:
- כותרת h3 (שהיא גם קישור לpost.html).
- תאריך בתגית time.
- פסקה קצרה (תקציר).
- קישור "קראו עוד" לpost.html.
aside עם:
מידע על הכותב.
רשימת קטגוריות.
footer עם זכויות יוצרים וkishurim.

עמוד 2 - פוסט מלא (post.html)¶

header - זהה לדף הבית (אותו ניווט).
main שמכיל article אחד עם:
כותרת h2 של הפוסט.
תאריך פרסום (time).
שם הכותב.
לפחות 3 פסקאות תוכן.
תמונה בתוך figure עם figcaption.
רשימה (ol או ul).
ציטוט (blockquote).
קטע קוד בתוך pre ו-code.
קישור חיצוני לקריאה נוספת.
aside - קישורים לפוסטים קשורים.
footer - זהה לדף הבית.

עמוד 3 - צור קשר (contact.html)¶

header - זהה לדף הבית.
main שמכיל:
כותרת h2 "צור קשר".
פסקה מזמינה.
טופס מלא (form, method="POST") עם:
- fieldset "פרטים אישיים": שם, אימייל, טלפון.
- fieldset "ההודעה שלכם": נושא (select), סוג פנייה (radio: שאלה, משוב, שיתוף פעולה), הודעה (textarea).
- checkbox "אני מסכים למדיניות הפרטיות" (required).
- כפתור שליחה.
פרטי התקשרות נוספים בתגית address.
footer - זהה לדף הבית.

דרישות כלליות לכל העמודים¶

מבנה סמנטי מלא (header, nav, main, aside/section, footer).
lang="he" ו-dir="rtl".
meta charset UTF-8.
title ייחודי לכל עמוד.
ניווט עקבי בכל העמודים (אותו nav).
קישורים יחסיים בין העמודים (לא כתובות מוחלטות).
כל שדה טופס עם label.
כל תמונה עם alt.
היררכיית כותרות נכונה.

פרויקט 3 - שיבוט מבנה אתר אמיתי¶

בחרו אחד מהאתרים הבאים ובנו שיבוט של המבנה שלו בHTML בלבד (בלי CSS, בלי עיצוב). המטרה היא לתרגל זיהוי מבנה ותרגומו לHTML סמנטי.

אפשרות א - ערך בוויקיפדיה¶

פתחו ערך ויקיפדיה כלשהו (בעברית או באנגלית) ושחזרו את המבנה שלו:

header - הכותרת הראשית של הערך.
nav - תוכן עניינים (ul עם anchor links לכל חלק).
main - תוכן הערך:
sections עם כותרות h2 (לפחות 4 חלקים).
פסקאות עם strong ו-em.
קישורים פנימיים וחיצוניים.
לפחות תמונה אחת בfigure עם figcaption.
טבלה אחת (למשל "מידע בסיסי" או infobox).
רשימות (ul ו-ol).
הערות שוליים (רשימה ממוספרת עם anchor links).
aside - סרגל צד עם:
"מידע מהיר" (טבלה או רשימה).
תמונה.
footer - קטגוריות הערך, קישורים.

אפשרות ב - Hacker News¶

פתחו את Hacker News (news.ycombinator.com) ושחזרו את המבנה:

header - הלוגו, שם האתר, ניווט (new, past, comments, ask, show, jobs).
main - רשימת הפוסטים (ol):
כל פוסט (li) מכיל:
- מספר סידורי.
- חץ הצבעה (אפשר להשתמש בטקסט כמו "^").
- כותרת הפוסט כקישור.
- שם הדומיין בסוגריים.
- שורת מטא-דאטה: נקודות, שם מפרסם, זמן, מספר תגובות (כקישור).
לפחות 10 פוסטים.
footer - קישורים (Guidelines, FAQ, API, Security, Lists, Bookmarklet, Legal, Apply to YC, Contact).

אפשרות ג - אתר חדשות¶

בחרו אתר חדשות (ynet, walla, או אחר) ושחזרו את עמוד הבית:

header - לוגו, ניווט ראשי עם קטגוריות (חדשות, ספורט, תרבות, כלכלה).
main שמכיל:
כתבה ראשית (article) עם כותרת גדולה, תמונה, ותקציר.
לפחות 6 כתבות נוספות (article), כל אחת עם כותרת, תקציר קצר, ותאריך.
sections לפי קטגוריות.
aside - מודעה (placeholder), "הנקראים ביותר" (ol).
footer - קישורים, צור קשר, זכויות יוצרים.

דרישות כלליות לפרויקט 3¶

HTML בלבד - אין CSS, אין JavaScript. לא צריך שהדף ייראה כמו האתר האמיתי, רק שהמבנה יהיה נכון.
מבנה סמנטי מלא.
alt לכל תמונה.
labels לכל שדה טופס (אם יש טפסים).
היררכיית כותרות נכונה.
קישורים יכולים להצביע ל-# (אין צורך בדפים אמיתיים).
תמונות יכולות להיות מהאינטרנט או placeholder.

טיפים¶

לפני שמתחילים לכתוב קוד, פתחו את האתר ונתחו את המבנה שלו. שימו לב לחלקים: header, ניווט, תוכן ראשי, סרגל צד, footer.
השתמשו בDevTools של הדפדפן (F12) כדי לראות את מבנה הHTML של האתר האמיתי וללמוד ממנו.
התחילו מהמבנה הכללי (header, main, footer) ואז מלאו את הפרטים.
אל תנסו לשחזר הכל - התמקדו במבנה הראשי והחשוב.