צעדים ראשונים בכתיבת קוד HTML

התחילו היום לכתוב קוד HTML. צעד אחר צעד. (קריאה של 7 דק')

שמחה שהגעתם עד לפה, אתם עומדים לעשות את הצעדים הראשונים בעולם המופלא של פיתוח Front end.

אז כמה דברים בתור התחלה: הכל בHTML קשור בתוכן. CSS הוא החלק העיצובי, וJS הוא זה שגורם לדברים לעבוד, מפעיל.

את מסמך הHTML מחלקים לכמה חלקים. מסתכלים עליו ומחלקים לcomponents, או בעברית צחה "קומפוננטות". כל קומפוננטה מכילה תוכן משלה, והשם או התגית שהיא תקבל - יהיו בהתאם לתוכן שהיא מכילה. לדוגמא, אם נכתוב פסקה, היא תכנס לתוך תגית מסוג <p> הלוא היא paragraph.

בנוסף, בכתיבת HTML יש כמה כללים בסיסיים שחובה להכיר:

כמעט לכל תגית שנשתמש בה בכתיבת מסמך הhtml יש תגית פתיחה ותגית סגירה. תגית פתיחה תראה כך לדוגמא: <body> ותגית סגירה תמיד תראה כך </body> . יש תגיות יוצאות דופן שלהן אין תגית סגירה (כמו תגית <img>).
התגיות בשפת html הן תגיות סמנטיות, זאת אומרת, בעלות משמעות, אם קוראים לתגית <p> הסיבה תהיה - שהיא מסמלת פסקה, אם נשתמש בתגית <img> מדובר על להכניס תמונה וכו'.
Syntax הוא התחביר והמבנה, אילו תגיות קיימות? כיצד הן נכתבות? וכו'..
בכתיבת הhtml נתחשב רק במבנה המסמך וכמובן בתגיות שהוא מכיל. לא תהיה כל משמעות לירידת שורה, רווח וכו'. כאשר נטען קובץ html בדפדפן, הדפדפן מתייחס לhtml כאל תוכן בלבד. כל מה שקשור בעיצוב, הוא יקח אך ורק מקובץ הcss.

תגיות HTML בסיסיות

תגית מסוג DOCTYPE! - זוהי התגית הראשונה שנכתוב במסמך HTML והיא היחידה שנכתבת עם סימן קריאה ובאותיות גדולות. תגית זו מסמלת באיזו שפה המסמך הולך להיות כתוב - HTML. והיא תיכתב כך: <!DOCTYPE html>
התגית הבאה שנשתמש בה תהיה תגית <head>. בתגית הזו יכתב כל מה שנחשב ל-meta data. זאת אומרת, כל מה שקשור בדף או באתר שאנחנו בונים, אבל לא מופיע ויזואלית בתוכו; לדוגמא, כותרת הtab, קובץ הcss שנקשר לדף כדי להעניק לו את העיצוב שלו, ועוד.
<body> - התגית שבה יכתב כל מה שבסופו של דבר יופיע בדף או האתר שאנחנו בונים. זאת אומרת, כל הטקסט, הכותרות, התמונות, הקישורים ולמעשה, כל התוכן.
כותרות בדף – H1-H6 - 'תגיות הh' מיודעות ליצירת כותרות. בעיקרון, קיימות h1-h6 , כל אחת מקבלת עיצוב default שנראה אחרת (מבחינת גודל, לא צבע או פונט). לדוגמא, h1 היא כותרת הדף בדרך כלל ולכן היא הגדולה ביותר מבין כולן, אחריה יגיעו h2,h3,h4,h5.h6 וכולן יקטנו בהתאמה. חשוב לציין, שאף על פי שבספרות הHTMLית מצוינות רק התגיות הללו, ניתן להגדיר עוד תגיות כותרת כמו h7,h8,h36 וכו'.
תגית <section> - תגית שמסמנת section מסוים שאנחנו רוצים להגדיר בדף. לדוגמא, אם יש לי דף שנחלק ל-3 'קומפוננטות', ה-section הראשון יהיה welcome שבו יכתבו כמה דברי פתיחה, ה-section השני יהווה הסבר לדוגמא על אירוע שצריך להתקיים, פרטים על האירוע וכו', וה- section השלישי יהיה טופס הרשמה לאירוע, למשל. תגית ה- <section> תכלול בהרבה מהפעמים תגיות של כותרות (h1-h6), ופסקאות (<p>) וככלל, יכולה להכיל בתוכה עוד תבניות אחרות. ה-sections השונים בדף בהכרח יכללו תוכן מקובץ (grouped), שבו האלמנטים קשורים אחד בשני.
תגית <article> - לעומת התגית הקודמת, תגית זו הינה תגית בודדת. זאת אומרת, היא תגית תוכן שקיימת בזכות עצמה, היא לא 'עוטפת' תבניות אחרות כמו section, אלא – היא התוכן בעצמה. עם זאת, התגית הזו בכל זאת יכולה להיעטף בתגיות אחרות ואז היא תהיה nested (מהמילה nest). התגיות שיעטפו אותה יהיו בהכרח קשורות לתוכן שלה.
<aside> - תגית שבזממנו משתמשים בה יחסית הרבה, מאחר והיא מאפיינת את כל התוכן הצידי של האתר. זאת אומרת, כל התוכן שאנחנו רוצים שיופיע באתר, אבל הוא לא מרכזי ולא צריך להופיע במרכז הדף, כמו למשל פרסומות, יופיע תחת תגית <aside> ויופיע בצד הדף שאנחנו בונים.
תגיות <figure> וגם - <figcaption> - אלו תגיות שמגיעות יחד כמעט תמיד. נשתמש בהן במקרים כמו למשל, הצגת תמונה עם קרדיט לצלם. תגית ה<figure> תהווה את התגית שאיתה נציג את התמונה, ותגית ה-<figcaption> תהיה המסגרת שעוטפת אותה ובה נכתוב את הקרדיט לצלם.
כך הקוד יראה:

<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>

</figure>

תגית <img> - תגית כמעט בסיסית, באמצעותה נכניס תמונות לדף שלנו. כפי שצוין למעלה, לא לכל התגיות יש תגית סגירה, ותגית <img> היא אחת מהתגיות הללו. תוכלו לראות בדוגמא מעלה כיצד היא נכתבת. היא כוללת בתוכה שני אלמנטים נוספים; src – שהוא הקישור לתמונה (בין אם זה קישור לתמונה שמאוחסנת בתיקייה אצלנו או תמונה שלקוחה מהאינטרנט ואז נוכל לקחת אותה באמצעות לחיצת עכבת ימנית על התמונה ובחירה באופציה ‘copy image address’), ו-alt – שהוא תיאור התמונה. למה צריך תיאור תמונה? מעבר לכך שכאשר התמונה לא תופיע מסיבה כזו או אחרת (הלינק לתמונה אינו קיים יותר וכו') יופיע התיאור שלה בalt, ובכן, יש אנשים כבדי ראייה שלא יכולים לצפות בתמונות באתרים, ולכן אחד מכללי הנגישות החדשים שנכנסו הינם תיאור התמונה עבור קוראי מסך למיניהם (בקרוב יעלה פוסט שכולו עוסק בנגישות).
תגית <a> - משמשת להכנסת לינק. לעשות hyperlink אתם בטוח יודעים.; מסמנים אלמנט כלשהו (מילה / תמונה / משפט וכדומה) ומחברים אליה קישור (לינק) למקום אחר. התגית <a> היא בעצם hyperlink. נשתמש בה כך:
תגית <div> היא בעצם division, מחלקת את האתר לכמה divisions שונים. נשמע דומה לsection, אבל, שימו לב, תגית <div> לא בהכרח תחזיק בתוכה אלמנטים שקשורים אחד בשני, אלא רק תגרום לחלוקה של הדף. מעצם היותה מחלקת את הדף לdivisions היא נחשבת תגית block. (מה הן תגיות block ו – inline?) ולכן היא מחזיקה בתוכה את תכונת 'חלוקת הדף' הויזואלית.

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