פרולוג קטןשום מתכנת לא באמת זוכר מתי הוא התחיל לכתוב html תקני, אני לפחות זוכר את זה בתור סוג של קסם, אני זוכר שגיליתי מה float עושה, ואחר כך כשרציתי ששום אלמנט לא יפריע לי בדרך אז חיפשתי את clear לאט לאט נכנסתי פחות או יותר לקונספט מאחורי זה, זה עבד יופי...
הבהרה קטנה לפני שנתחיל, טבלאות הן חלק מהDTD של HTML5, השימוש בהן פשוט צריך להיות מתון ובמקומות הנכונים.
בואו נלמד טיפה תיאוריה, כן זה משעמם אני לא מת על זה, אבל זה חשוב לפני שמתקדמים.
כל אלמנט בHTML יש לו תצוגה משלו, זה אומר שהדפדפן לפי זה יודע איזה פרמטרים מותר לכם לתת לו ואיזה אסור, ואיך הוא אמור לרנדר אותו בסופו של דבר, אתם מכירים את זה בCSS כ-display.
איזה סוגי תצוגה יש לנו? יש המון, אני אכסה את הmain types שהם:
1.block - האלמנט שלנו זקוק לפרמטרים של רוחב וגובה, ומתנהג כבלוק לכל דבר, כל מה שיבוא אחריו ירד שורה מתחת, כי אם לא הגדרנו floating לאותו אלמנט אנחנו לא יכולים להציב לידו אלמנטים אחרים.
2.inline - אלמנטים שמוגדרים כinline אין להם רוחב וגובה, הם פשוט יעמדו בשורה זה לצד זה עד שיגיע אלמנט מסוג block וירד שורה.
3.inline-block - נועד למצב שאנחנו רוצים לשלב בין 2 המצבים הראשונים, זאת אומרת להציב את האלמנטים באותה שורה, אבל גם לתת להם רוחב וגובה.
כמובן שגם יש לנו מצבי תצוגה של טבלאות וכדומה, אבל כשמשתמשים באלמנטים שהם לא טבלה אני לא רואה סיבה טובה להשתמש בזה, מבחינת performance זה בטח לא עושה לאף אחד טוב לתת לדפדפן לרנדר div כטבלה.
---------------------- אני עוצר כאן שניה ----------------------
מתי נכון להשתמש בטבלאות?
בדרך כלל כשיש לנו המון נתונים שאנחנו צריכים להציג אותם כטבלה, ואנחנו לא רוצים עכשיו לייצר CSS שלם שיימקם את הכל במקום הנכון, מדובר בדרך כלל על דברים גם שפחות דורשים עיצוב, רשימות מלאי, כל מה שרחוק מעיני המשתמש באתר שלכם ומיועד לשימוש אישי שלכם...
----------------------- אני ממשיך -------------------------------
Floating Elements
זה מושג קצת בעייתי "אלמנטים צפים", הוא מסבך נורא את הראש שלנו בלהבין מתי אנחנו צריכים להשתמש בו, אז אני אתן לכם 2 אופציות.
ב-CSS קיים Property שנקרא float שהערכים שלו הם נורא פשוטים:
1.right - אנחנו רוצים שהאלמנט יעוף ימינה
2.left - אנחנו רוצים שהאלמנט יעוף ______
מה זה אומר יעוף? זה אומר שהאלמנט שבא אחריו פשוט יעמוד לידו בדרך כלל כשעובדים עם RTL אז לרוב אתם תראו שם המון float: right אלא אם כן הוא משלב גם תוכן בLTR אז אתם תראו גם left פה ושם.
עכשיו להשתמש ב-float ברגע שמבינים אותו זה נורא נחמד, קודם כל זה נורא נותן לנו חופש לבצע את המיקום הבסיסי של האלמנטים שלנו באתר, איפה כל קוביה תעמוד וכן הלאה...
אבל אם אנחנו רוצים להמנע מלחשוב על RTL/LTR בעתיד, עדיף שנשתמש בinline-block שעושה בדיוק את מה שfloat עושה רק ברגע שנשנה את הdirection של האתר לא יהיה את הצורך לשנות floatים אולי למעט תיקונים קטנים...
אז מה למדנו עד עכשיו?
1.כל אלמנט יכול להיות מוצג כקופסא עם גובה ורוחב, יכול להיות מוצג כinline element למה שבא אחריו, יכול להיות מוצג כשניהם.
2.טבלאות זה אחלה רעיון לדוחות שאנחנו רוצים להוציא ברקע, לניהול של המון המון נתונים שאין יותר מדי מחשבה לאיך הם ייראו.
3.יש 2 דרכים עיקריות להציב אלמנטים אחד ליד השני:
א.להשתמש בfloating elements
ב.להשתמש בinline-block
עכשיו בואו נדבר קצת על אלמנטים בסיסיים בHTML ומה מצב התצוגה שלהם:
1.div - הוא אלמנט שבדרך כלל תשתמשו בו כדי לייצג בלוק של תוכן באתר שלכם, מצב התצוגה שלו הוא block element.
2.span - הוא אלמנט שמייצג טקסט בדרך כלל, סוג התצוגה שלו הוא inline-element אבל אל תהיו מקובעים על מה שאני אומר פה, להגדיל ראש זה הכי כיף שיש ואם יש לכם רעיונות אחרים תזרמו.
3.p - היא פסקה, היא כמובן inline-element.
4.h1,h2,h3,h4,h5,h6,h7 - כותרות כולן הן block elements
נוסיף קצת תגיות חדשות של HTML5
header - אמור לייצג את כל החלק העליון של האתר שלכם
footer - אמור לייצג את כל החלק התחתון של האתר שלכם
section - אמור לעטוף תת תוכן באתר, אם יש לכם שאלה ותת שאלה, אז בשביל התת שאלה אתם תייצרו section לא עולה לי דוגמא טובה יותר, כמובן שsection הוא לא נועד להיות wrapper שמקבל CSS ועוטף את כל האתר שלכם, הוא נועד לייצר הפרדה בתוכן, בשביל wrappers יש divים.
video - מייצג וידאו
audio - מייצג סאונד
nav - הוא מעטפת לnavigation links באתר שלכם, תחתיו סביר להניח שתכניס קישורים.
מי שרוצה לקרוא עוד מוזמן פה
http://www.w3schools.com/html/html5_new_elements.asp
אני לא נותן דוגמאות קוד כי אני די מצפה שזה יבוא לכם אינסטינקטיבית איך לעשות את זה עכשיו.
גירסת הדפסה
סגן המנהל
מפקח
Winner
צל"ש
מומחה
