מדריך CSS + HTML – הבסיס – חלק 1

החלטתם להיות מפתחי אתרים, אתם חסרי ידע בתחום, בדיוק עושים קורס או שאפילו סיימתם את הקורס והתחלתם ללכת לראיונות עבודה וגיליתם שחסר לכם ידע בסיסי? זה המקום בשבילכם.

כמובן שהמדריך לא יחליף קורס שלם או צפייה בסירטונים והעמקה באינטרנט, אבל הוא כן יגדיל לכם את ארגז הכלים שלכם.

כמי שבוחן עובדים חדשים, שמתי לב שגם מתמודדים שסיימו קורס בפיתוח הרבה פעמים חסרי ידע בסיסי, אם היה מדובר במתמודדים יחידים אז זה הגיוני, אבל אם רוב המתמודדים שמגיעים ישירות מקורסים באופן שיטתי חסרי ידע בסיסי… זה כבר הדליק לי מנורה אדומה.

מה שגיליתי הוא שהרבה פעמים בקורסים רצים מאוד מהר על הבסיס כדי להגיע לסיפריות המתקדמות והמעניינות (ריאקט, אנגולר) ובכל הנוגע לעיצוב (css) מלמדים רק את הדברים המתקדמים (flex, grid), זה משאיר ארגז כלים מאוד דל ולא יעיל.

אם תחשבו על זה, זה קצת מצחיק (ועצוב) , כאשר אני בוחן מפתח מתחיל במטרה לגייס ג'וניור, בהכרח אני אבחן אותו על הבסיס ולא על ספריה מתקדמת.

בפועל כשהוא יתחיל לעבוד כשהוא ללא נסיון אני אתן לא אתרים שמבוססים בעיקר על html/css/js ולא אסבך אותו עם בניה נכונה של פרויקט באנגולר או ריאקט וכו'.

במדריך הזה אני אחפור לכם הרבה (כמה שיותר בקצרה 😂) במטרה שתוכלו להגיע למבחן או שאלות של בוחן ותצליחו לענות לפחות על חלק מהשאלות שלו (על הדרך תבינו יותר).

אחרי ההקדמה הארוכה הזו, אנחנו מתחילים.

מה זה CSS ומה זה HTML?

• HTML – מורכב מתגיות ומיצג את מבנה הדף, הוא הבניין שלנו והתגיות הלבנים שלנו. למה חשוב להכיר אותו ואת התגיות שלו? ככול שנבנה אותו יותר נכון כך נעבוד קל יותר ב-CSS , הוא יהיה יותר נגיש לבעלי מוגבליות והבוטים של מנועי החיפוש יבינו יותר טוב את האתר שלנו.
• CSS – מורכב מקלאסים (classes) ואחראי על עיצוב הדף שלנו (הבניין שלנו), אף אחד לא יקנה בניין אפור ומשעמם אבל כן יקנו משהו מושך לעין שנראה טוב ומקצועי. CSS זה המברשת, המכחול ופלטת הצבעים שלנו.

עכשיו שאנחנו יודעים מה התפקיד של כל אחד אפשר להתחיל 😉

HTML

נעבור על מספר תגיות ומה המשמעות שלהן, אם יצא לכם להסתכל על מגוון התגיות הקיימות אפשר לראות שיש די הרבה ובחלק מהמקרים יש תגיות בעלות שם שונה אבל כששמים אותם בדף, לא נראה שהם משנות משהו במראה או ההתנהגות על הדף.

אם כך, למה הם קיימות?

פשוט מאוד, חלקם עוזרות לתוכנות הקראה לעיוורים בכך שהן מקריאות את שם התגית והעיוור מבין יותר טוב את הדף שנמצא מולו.

חלקם עוזרות לבוטים (BOT) של מנועי החיפוש להבין את האתר שלכם יותר טוב ובכך לתרום לקידום האתר (SEO).

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

A –

תגית שמיצגת לינק, בעלת מאפיין href שמקבל כתובת URL אליו תופנו בזמן לחיצה עליו ומאפיין target שהערכים הפופולרים שלו הם:

_self – יפנה את הדף הנוכחי ל-URL החדש

_blank – יפתח דף חדש עם ה-URL החדש

ADDRESS –

תגית סמנטית שנועדה לייצג כתובת

ARTICLE –

תגית סמנטית שמיצגת מעטפת למאמר

B –

כברירת מחדל, כל טקסט שהתגית תכיל יהיה מודגש

BR –

שובר שורה / שורה ריקה

BUTTON –

מיצר כפתור ומאופיין בדרך כלל עם תוספת של onclick אשר מפנה ל-JS

DIV –

תגית הכי פופולרית בדף והכי חסרת משמעות. משמשת בדרך כל כתוחם למספר תגיות אחרות במטרה לקבץ אותם תחת תגית אחת

FIELDSET –

תגית מקבצת של מספר אלמנטים אשר יש להם קשר אחד עם השני בטופס

FOOTER –

תגית סמנטית שמיצגת את החלק בסוף הדף

FORM –

מעטפת טופס ובעלת מאפיין action אשר מופעל בלחצה על כפתור מסוג submit

H1 –

כותרת ראשית שיכולה להופיע רק פעם אחת בדף (כמו כותרת ראשית של ספר)

H2-6 –

כותרות משניות שיכולות להופיע מספר פעמים בכל דף וצריכות להיות בסדר הגיוני, בדיוק כמו בספר או מאמר אשר בנוי כך שבנושא מסויים יש כותרת משנית H2 ואם יש תת-כותרת באותו נושא שקשור לנושא המשני מעליו אז הכותרת תהיה H3 וכן הלאה.

HEADER –

תגית סמנטית שמיצגת את החלק בתחילת העמוד

IMG –

תגית עבור תמונה, בעלת מאפיינים:

SRC שמחזיק במיקום התמונה

ALT שמחזיק בתאור מילולי של התמונה

INPUT –

תגית פופולרית מאוד ואחת הותיקות ב-HTML, המתורגמת למגוון שדות שונים על פי הסוג שלה (TYPE)

TYPES:

1. TEXT – שדה טקסט פשוט, של שורה אחת
2. SUBMIT – כפתור שליחה לטופס
3. BUTTON – כפתור רגיל שמפנה בדרך כלל לפונקצית JS
4. CHECKBOX – שדה סימון
5. NUMBER – מיועד רק למספרים ולרוב מיצר בתוך השדה חצים קטנים להעלאה והורדה של המספר
6. PASSWORD – שדה טקסט שבמקום להראות את המלל שהמשתמש כותב, רואים עיגולים שחורים
7. RADIO – שדה בחירה
8. RESET – ניקוי של טופס
9. FILE – שדה המאפשר לעלות קבצים מהמחשב

כמובן שיש עוד סוגים של שדות, אבל אלו הפופולרים שכדאי לדעת ולהכיר.

LABEL –

תגית חשובה שמצורפת לשדה (INPUT) אשר ניתן לערוך, מקושרת אליו על ידי מאפיין FOR, שמקבל את ה-ID של השדה.

במידה שלא רוצים להשתמש ב-ID אז ניתן לעטוף את ה-INPUT ב-LABEL ללא צורך ב-FOR.

MAIN –

תגית סמנטית שמיצגת את החלק העיקרי בדף

NAV –

תגית סמנטית שמיצגת איזור ניווט

OL/UL –

מיצגים רשימות, רשימה ממוספרת ורשימה לא ממוספרת בהתאמה.

התגיות יכולות להכיל באופן ישיר רק תגית LI, כל תגית אחרת נחשבת לשגיאה.

בתוך תגית LI ניתן לשים איזה תגית שרוצים.

P –

תגית עבור קטע מלל אחד שארוך יותר משורה אחת

PRE –

תגית שלא מקבלת עיצוב (כברירת מחדל) ומראה את הטקסט כמו שהוא נכתב, מאוד יעילה כשרוצים להראות קטעי קוד על המסך

SECTION –

תגית סמנטית שמיצגת חלק במסמך שהמלל בו קשור אחד לשני, מעין חלוקה לש הדף לאיזורים שונים

SELECT –

מיצר כפתור בחירה שבלחיצה עליו פותח אופציות שניתן לבחור מתוכן. האופציות רשומות בתגיות OPTION בתוך תגית ה-SELECT

SPAN –

תגית שמיצגת קטע מלל קצר

TABLE –

מייצר טבלה ומקבל תגיות כמו:

1. TD
2. TR
3. TH
4. THEAD
5. TBODY
6. TFOOT

מאוד נוח להצגת נתונים במבנה טבלאי אשר יש משמעות לעמודות ושורות.

TEXTAREA –

שדה טקסט של מספר שורות

יש עוד הרבה תגיות שלא הזכרתי, אבל אלו החשובות, שצריך להכיר ולהשתמש בהן כדי לבנות דף תקין גם עבור נגישות וגם עבור בוטים.

אלו אבני הבניין שלנו, אני ממליץ מאוד לקחת את הזמן ולהכיר אותם טוב, להבין איך הן נראות על הדף ומה הגדרות העיצוב שהן מקבלות כברירת מחדל והדפדפן.

החלק הבא ידבר על CSS , כמו כאן אני אשתדל להתרכז בהגדרות הפופולריות והחשובות שצריך להכיר.