יומנו של מתכנת – לימוד בניית אתרים שיעור 1 – בניית אתר בסיסי

אז לאחר שראינו בהקדמה לסדרת השיעורים שבסדרת השיעורים הזו אנו הולכים ללמוד html ו css נתחיל בהקדמה קצרה על html ומה היא בעצם.

 

אז מה זה בעצם html?

html משמע קיצור ל HyperText Markup Language, שזה בעצם אומר שפת תגיות לתצוגה ועיצוב של דפי אינטרנט. ב html כל הכרזה על תוכן תתבצע על ידי תגיות, וכל תוכן יכתב בין התגיות הללו. html5 היא הגרסה האחרונה של שפת התכנות html.

איזה כלים צריך בשביל לתכנת ב html?

התשובה לכך היא ממש משמחת: כל עורך טקסט יספיק כדי לתכנת ב html. אני אישית משתמש בעורך טקסט שנקרא Atom. הקישור אל האתר שלהם נמצא כאן.

עורך הטקסט הזה הוא אוניברסלי – משמע הוא מתאים גם ל windows, גם ל mac, וגם ל linux (מערכת ההפעלה שאני משתמש בה). כמובן שאפשר להשתמש בכל עורך טקסט אחר.

אז בואו נראה איך נראה מסמך html, ומהם האלמנטים שחייבים להופיע בכל מסמך:

 

האלנטים שיופיעו בכל מסמך html
האלמנטים שיופיעו בכל מסמך html

 

אז מה יש לנו כאן?

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

  • <DOCTYPE html!> – הצהרה שלנו לדפדפן שיש כאן מסמך הכתוב בשפת html5. התגית הזאת היא לא חלק משפת ה html אלא היא רק באה להצהיר על השימוש בשפה הזאת.
  • <html> – הכרזה על פתיחת מסמך ה html. כל מה שיופיע בעמוד נכנס בין תגית הפתיחה של ה html לבין תגית הסגירה.
  • <head> – תגית ה head אחראית על המידע שקיים על העמוד. לא על התוכן שרואים בתוך העמוד.
  • <meta> – תגית ה meta אחראית למידע על העמוד. המידע הזה לא יוצג בעמוד אבל הוא כן יעובד על ידי הדפדפן. לרוב נעשה שימוש בתגית זו למטרות מידע על האתר שיעזרו לגוגל לזהות אותו יותר טוב ולהגיש אותו בחיפוש(במילים אחרות, משתמשים בתגית הזאת למילות מפתח ותיאור אתר בשביל קידום אתרים.), אך השימוש היחיד שלנו איתה כרגע הוא להצהיר על סוג התווים שאנחנו נשתמש בהם בעמוד. במקרה שלנו מדובר בתווים של השפה העברית. וכאן מגיע החלק הבא:
  • "charset="utf-8 – דוגמא נפלאה לתכונות של תגיות ב html. המון פעמים בתגיות שנשתמש בהן לא נצהיר רק על מה אנחנו רוצים לעשות לפי שם התגית. אלא המון פעמים נוסיף להן תכונות(באנגלית: attributes). כך שבעצם המבנה הוא כזה: <"tag-name attribute = "value> – שם תגית, אחריו יופיע שם התכונה, ואחריה סימן השווה ואחריו בתוך ראשי תיבות יופיע הערך שאנחנו מכניסים. במקרה שלנו יש את התכונה charset שמשמעותה ביאזה ערכת תווים אנו מתכוונים להשתמש, והיא שווה ל utf-8 שזאת ערכת תווים המכילה בתוכה המון שפות, כולל עברית.
  • <title> – תגית ה title אחראית על שם העמוד שיופיע בדפדפן למעלה בכרטיסייה המייצגת אותו.
  • <body> – בתוך תגית ה body נכנס כל התוכן של העמוד עצמו.
  • < — –!> – ככה כותבים הערות שלא יקראו על ידי הדפדפן. הערות אלה הן רק למפתחים עצמם.

אז לאחר שעברנו על הבסיס הנמצא בכל עמוד html. נשמור את הקובץ בתיקיה ונקרא לו index.html. הסיומת .html היא הסיומת של דפי html. את שלי יצרתי בתיקיה שקרואים לה tutorial, בשביל המדריך הזה.

ניצור קובץ html ונשמור אותו בתיקיה שבה כל הפרויקט שלנו יהיה
ניצור קובץ html ונשמור אותו בתיקיה שבה כל הפרויקט שלנו יהיה

 

השלב הבא בכל פרוייקט הוא להבין מראש מה המבנה של הפרוייקט שלנו. בפרוייקט הקרוב אנחנו הולכים להשתמש רק בעוד קובץ css שניצור בהמשך. ניצור עוד תיקיה בתוך התיקיה של הפרויקט הכללי שלנו ונקרא לה css. לכל חלק אחר באתר שאנו יוצרים (css, javascript  תמונות וכו') שיש לו פוטנציאל לכמה ממנו(כמה תמונות או כמה קבצי css שונים) ניצור תיקיה משלו. אז לאחר שיצרנו את תקיית ה css, כך מבנה התיקיות אמור להיראות:

מבנה הקבצים לאחר הוספת תיקיית ה css
מבנה הקבצים לאחר הוספת תיקיית ה css

 

אז לאחר שסידרנו את מבנה הקבצים אפשר באמת להתחיל ביצירת האתר הבסיסי שלנו.

אז בואו נתחיל

קודם כל, כדי להבין לאיזה כיוון אנו הולכים, כך הולך להיראות האתר שניצור בפרוייקט הקרוב:

 

דף הבית
דף הבית

 

דף יצירת הקשר
דף יצירת הקשר

 

הכירו את TechShop, אתר נפלא שעוסק בטכנולוגיה שהמצאתי בשביל הפרוייקט הזה. כפי שאפשר לראות, האתר נראה בסיסי, לא משהו מגונדר מדי. אבל זה למטרת הלימוד הבסיסי. בהמשך נעלה אותו רמה. בפרוייקט הקרוב נעשה את דף הבית ודף יצירת הקשר, את הדף של קצת עלינו אשאיר לכם לנסות לעצב לבד בתור עבודה עצמית. התוכן שנמצא בעמוד הבית הוא תוכן מומצא על ידי word generator שנקרא lorem ipsum. lurem ipsum הוא מנוע מילים שנועד לספק מבנה אמיתי של פסקאות למטרות עיצוביות אך שהמילים בפסקאות יהיו ללא הגיון כדי שלא יתרכזו בתוכן העמוד אלא רק בעיצוביות(מיועד לעיצובים לדוגמא).

 

אז מאיפה מתחילים?

דף הבית

דבר ראשון, אם אתם זוכרים, בתוך תגית ה head של קובץ ה html שיצרנו הוספנו שם תגית meta עם התכונה charset ונתנו לה ערך של utf-8 כדי שהאתר יקלוט תווים בעברית. האתר אמנם יקלוט את התווים בעברית, אך הוא לא יהיה מימין לשמאל כיוון שברירת המחדל של קובץ html היא משמאל לימין. אז בואו נסדר את זה ונוסיף לתגית ה html את התכונה dir שמשמעותה direction, וניתן לה ערך של rtl שמשמעותה היא right to left(יש ltr ויש rtl).לאחר שסידרנו את כיוון העמוד, נחלק את העמוד מלמעלה ללמטה לחלקים הבאים:

  • חלק עליון (נקרא header) ובו כותרת ראשית וכותרת משנה.
  • תפריט ניווט
  • חלק מרכזי (נקרא main) ובו מידע באמצע
  • חלק תחתון(נקרא footer) ובו מידע על זכויות יוצרים.

 

נתחיל מהחלק העליון. כמו שאמרתי, החלק העליון נקרא header, וזאת גם שם התגית שלו. תגית ה header היא לאו דווקא מייצגת את החלק הראשון שבאתרת אלא היא מייצגת את החלק העליון בתוך התגית שהיא נמצאת בה(דוגמא בהמשך). בתוך התגית שלו נכניס כותרת ראשית וכותרת משנה. ב html כותרות נכנסות בתגיות h1- h6, כשהגדולה ביותר היא התגית h1 והקטנה ביותר היא התגית h6. אנחנו נשתמש בתגית h1 לכותרת הראשית שלנו, שבה יהיה כתוב "TechShop" וב h2 לכותרת המשנית שלנו, שבה יהיה כתוב "כי טכנולוגיה זה אנחנו" .

תגית ה header תסמן את החלק העילון של התוכן של העמוד שלנו
תגית ה header תסמן את החלק העליון של התוכן של העמוד שלנו

 

בואו נראה כיצד זה מתבטא בפועל. נשמור את מה ששינינו, ונפתח את קובץ ה html:

כך נראה העמוד לאחר שהוספנו את ה header
כך נראה העמוד לאחר שהוספנו את ה header

 

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

ב html יש שתי סוגי רשימות: רשימה מסודרת (ordered list – שם התג הוא ol) ורשימה לא מסודרת(unordered list – שם התגית הוא ul). רשימה מסודרת תציג את מיקום הפריטים ברשימה בצורה של מספרים, ורשימה לא מסודרת תציג בכל פריט את אותו הסימן(ברירת המחדל היא עיגול, אך ניתן לשנות זאת בעזרת css).

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

צורת הכתיבה של תפריט הניווט
צורת הכתיבה של תפריט הניווט

 

נשמור, נלך אל קובץ ה index שלנו ונרען/נפתח אותו מחדש, וזאת אמורה להיות התוצאה:

זאת התוצאה באתר
זאת התוצאה באתר

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

הוספת העמודים האחרים באתר
הוספת העמודים האחרים באתר

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

המבנה של תגית a נראה כך: <a/>כיתוב שכשלוחצים עליו עוברים לקישור<a href="your-link-path>

אם ניקח את המבנה הזה וניישם אותו בתפריט שלנו, נקבל את התוצאה הבאה:

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

 

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

זאת התוצאה באתר
זאת התוצאה באתר

 

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

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

 

במקרה שלנו, נשים בתוך תגית ה section חלק עליון header (שבתחילת הפרוייקט ציינו שהוא מסמל חלק עליון של התגית בה הוא נמצא, ולאו דווקא את החלק העליון של העמוד. פשוט במקרה של תחילת הפרוייקט ה header שלנו היה החלק העליון בתוך תגית ה html הכללית). לאחר הוספת החלק עליון, נוסיף את שאר התוכן בתוך התגית p, המציינת pharagraph. ב header נכתוב בכותרת של h3 "תמיד חושבים קדימה", וב p נעתיק תוכן מלורם איפסום (lurem ipsum). זה המבנה:

מבנה התוכן המרכזי של דף ה html שלנו, המתוחם בתוך תגית ה main
מבנה התוכן המרכזי של דף ה html שלנו, המתוחם בתוך תגית ה main

 

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

ה -footer של האתר

 

נשמור את מה שעשינו. זהו כל החלק של ה html של דף הבית. בואו נסתכל על כל המבנה במלואו:

המבנה השלם של העמוד שלנו
המבנה השלם של העמוד שלנו

 

וזאת התוצאה:

המראה לאחר סיום מבנה ה html
המראה לאחר סיום מבנה ה html

 

עכשיו, לאחר שסיימנו עם מבנה ה html נוכל לעבור לחלק העיצובי ב css.

 

אז מה זה css?

המונח css אומר Cascading Style Sheets – זהו בעצם פורמט של עיצוב דפי אינטרנט. ה css נועד כדי להפריד בין התוכן והמבנה של דפי האינטרנט לבין העיצוב שלהם. צורת העיצוב נעשית על ידי ציון מזהה התוכן בדף ה html בשלוש דרכים:

  • זיהוי אלמנט – קריאה לשם של האלמנט כגון p, או body. כל אלמנט המוקדשת לו תגית.
  • זיהוי על פי class – כאשר יש המון אלמנטים מסוג שונה שאנחנו רוצים לתת להם את אותו העיצוב(לדוגמא: צבע אדום) נשתמש ב class בשביל זה.
  • זיהו על פי id – כאשר אנחנו רוצים לתת עיצוב לאלמנט ספציפי, אך לא לכל האלמנטים מאותו הסוג(לדוגמא: לשנות את הצבע של פסקה מסויימת שהיא עם תגית p, אך לא לשנות את כל תגיות ה p אשר באותו עמוד) נשתמש ב id.

במהלך הפרוייקט ניתן דוגמאות לכל אחד מהמקרים.

אז בואו נתחיל

דבר ראשון, ניצור בתוך התיקיה css קובץ שנקרא לו style.css

 

יצירת קובץ ה style.css ושמירתו בתיקיית ה css
יצירת קובץ ה style.css ושמירתו בתיקיית ה css

 

השלב הבא זה לקשר את קובץ ה html שלנו אל קובץ ה css.

קישור אל קבצי css נעשה מתוך דפי ה html עצמם. בחלק של ה head נוסיף את הדבר הבא:

<link rel="stylesheet" href="css/style.css">

מטרתו של ה "link rel="stylesheet היא להצהיר על כך שאנחנו מקשרים את העמוד לשלנו אל קובץ css. ה href אמור להיות מוכ לנו מתגית הקישור a. זהו בעצם הקישור אל קובץ ה css שלנו. במקרה שלנו התחלנו מהתיקיה של ה css שנמצאת באותו תחום של קובץ ה html שלנו(כלומר, גם התיקיה וגם קובץ ה html נמצאים ישר בתוך התיקייה הראשית), ואחר כך הוספתי "/" בשביל לעבור אל התוכן של תקיית ה css אל קובץ ה style.css. אם לא היתה תיקיית css אלא קובץ ה style.css היה גם הוא בתיקיה הראשית, בקישור היה אפשר פשט לרשום style.css.

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

נתחיל מה body שלנו. אני רוצה שהפונט שלו יהיה פונט Arial, ושהצבע שלו יהיה ירוק בהיר. נעשה זאת בדרך הבאה:

עיצוב אלמנט ה body בקובץ ה css
עיצוב אלמנט ה body בקובץ ה css

אז מה יש לנו כאן?

  • body – צורת העיצוב הראשונה שדיברנו עליה, הנעשית על פי זיהוי האלמנט בקובץ ה html. לאחר שאנו משתמשים בצורת עיצוב כלשהי, אנו נפתח סוגריים מסולסלות, וביניהן נכתוב את עיצוב ה css שלנו לאלמנט/id/class שבחרנו.
  • font-family – זהו האפיון הראשון שנתנו לאלמנט ה body. אפיון זהו בעצם מה שאנחנו מעצבים באלמנט הנבחר, כך גם גודל פונט הוא סוג של אפיון, וצבע הוא גם סוג של אפיון. לאחר סוג האפיון יהיו נקודותיים ולאחריהן הערך שאנחנו נותנים לאפיון. במקרה שלנו, font-family זהו סוג הפונט, והערך אחרי הנקודותיים הוא הפונט arial. לעוד רשימה של פונטים ניתן לבקר כאן
  • background – אפיון של רקע. אפשר לכתוב גם במילים כמו ;background:blue ואפשר גם ב hex color. אני השתמשתי בערך של hex color. הערך שנתתי הוא ccc#.

שימו לב שכל אפיון וערך מסתיימים ב ;

נשמור את השינויים ונראה איך זה מתבטא בעמוד שלנו.

העמוד שלנו לאחר השינויים
העמוד שלנו לאחר השינויים

 

אם ניזכר בתוצאה הסופית שלנו, אנחנו רוצים שכל התוכן של האתר מה header ועד ה footer יהיה במרכז. דבר זה אפשר לעשות בעזרת דרך הזיהוי השלישית על ידי id. בואו נראה איך עושים את זה.

תגית ה div

תגית ה div היא תגית שנהוג בה כדי לתת לכמות מירבית של תוכן את אותו עיצוב ה css. מקיפים את כל התוכן שאנו רוצים לעצב בתגית ה div ונותנים לה id כלשהו כדי שנוכל להתייחס אליו בקובץ ה css שלנו. כך זה יראה:

הקפת תוכן העמוד בתגית div עם id של container
הקפת תוכן העמוד בתגית div עם id של container

כפי שאפשר לראות, נתנו ל div שיצרנו את ה id של container. עכשיו כשיש לנו id נוכל להתייחס אליו בקובץ ה css שלנו.

אז כיצד מעצבים id ב css?

כדי לעצב id ב css נקרא לשם של ה id  עם # לפני. כלומר your_id#.

בואו נראה איך זה מתבטא

התייחסות ל div עם ה id של container בקובץ ה css
התייחסות ל div עם ה id של container בקובץ ה css

כמו שרשמתי לעיל, ההתייחסות ל id נעשית בעזרת הסימן #. עכשיו נעצב את ה container שלנו.

נתחיל בכך שניתן ל container שלנו את הרקע הבא:

הרקע של ה container שלנו
הרקע של ה container שלנו

 

נשמור ונרענן את הדף בעמוד שלנו:

התוצאה בדף שלנו
התוצאה בדף שלנו

ועכשיו לשלב הבא. המון פעמים אנחנו נרצה לתת לאלמנט שלנו אפיון של רוחב שיהיה אחוז מסויים מהעמוד. כלומר, אני נניח רוצה לדוגמא שה container שלנו יהיה ברוחב של כ 60% מהעמוד. אז ככה נעשה את זה:

הגדרת רוחב ה container שלנו
הגדרת רוחב ה container שלנו

 

עכשיו הצבתי ל container שלנו רוחב של 60%. כאשר מציבים לאלמנט מסויים רוחב באחוזים, חישוב הרוחב יעשה ביחס לתגית המכילה את אותו אלמנט. כלומר, במקרה שלנו לדוגמא, מכיוון שתגית ה container נמצאת בתוך תגית ה body החישוב של ה 60% יהיה בעצם 60% מה body. אך אם ניגשה עכשיו לדוגמא ל header שנמצא בתוך תגית ה container וניתן לו רוחב של 60%, הרוחב שלו יהיה 60% מה container ולא מה body.

אז בואו נשמור ונראה איך זה מתבטא בעמוד שלנו:

התוצאה באתר - ל container יש רוחב של 60% מה body
התוצאה באתר – ל container יש רוחב של 60% מה body

יש התקדמות, אך אם נסתכל שוב בתוצאה שאליה אנו רוצים להגיע אנו נראה שה container צריך להיות במרכז העמוד, ועכשיו נעשה את זה.

margin ו padding

עכשיו אנחנו ניכנס לנושא ממש חשוב ב css לא מעט אנשים מתבלבלים בו – ההבדל בין margin ל padding. אני חושב שהדרך לסדר את הבלבול הזה היא פשוט מראש להסביר את שניהם בצורה טובה. נתחיל מ margin.

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

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

כדי להמחיש יותר את ההבדל, נסתכל בשתי התמונות הבאות:

padding הוא הרווח שבין התוכן ל border, margin הוא הרווח שבין ה border לאלמנט הבא
padding הוא הרווח שבין התוכן ל border, margin הוא הרווח שבין ה border לאלמנט הבא
padding הוא הרווח שבין התוכן ל border, margin הוא הרווח שבין ה border לאלמנט הבא
padding הוא הרווח שבין התוכן ל border, margin הוא הרווח שבין ה border לאלמנט הבא

 

מקווה שהדוגמאות מובנות. עם הזמן ההבדל הזה יתבהר יותר.

אז עכשיו, לאחר שראינו את ההבדל בין margin ל padding, נגרום ל container שלנו להיות במרכז על ידי margin.

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

  • כתיבת על ארבעת הכיוונים – הדרך הראשונה היא לכתוב את הערך לכל אחד מהכיוונים בנפרד. לדוגמא, אם אני רוצה שיהיה margin(שכפי שאמרנו, זהו הרווח בין אלמנט לאלמנט ) למעלה 6 פיקסלים, למטה 7 פיקסלים, בימין 9 פיקסלים ובשמאל 4 פיקסלים, נכתוב זאת כך : ;margin: 6px 9px 7px 4px. סדר השמת הערכים הוא (משמאל לימין) למעלה, ימינה, למטה, שמאלה (כיוון השעון).
  • כתיבת ערך לאחד מהכיוונים בלבד – יהיו מקרים בהם נרצה לדוגמא שה margin יהיה רק למעלה, במקרה הזה פשוט נכתוב ;margin-top:5px (מספר הפיקסלים הוא רק בשביל הדוגמא). כפי שאפשר לנחש, יש גם margin-bottom, margin right, ו margin-left.
  • כתיבת ערך אחד שהוא יהיה לכל ארבעת הכיוונים – קיימת האפשרות לכתוב רק ערך אחד והוא יהיה מיושם על כל ארבעת הכיוונים. לדוגמא: ;margin:10px במקרה הזה יחול margin של 10 פיקסל לכל אחד מהצדדים.
  • כתיבת ערך משותף ללמעלה וללמטה, וכתיבת ערך אחר לימין ולשמאל – האפשרות האחרונה היא כתיבת ערך שיהיה ללמעלה וללמטה, ואחריו כתיבת ערך שיהיה לימין ולשמאל. לדוגמא: margin:10px 0. במקרה הזה יהיה margin של 10 פיקסל ללמעלה וללמטה, ואילו לימין ולשמא לא יהיה שום margin (כאשר כותבים 0 לא כותבים אחריו px).
  • כתיבת ערך נפרד ללמעלה, ערך נפרד ללמטה, וערך משותף לימין ולשמאל – צורת הכתיבה האחרונה. לדוגמא: ;margin:10px 50px 20px. במקרה הזה יהיה לנו margin של 10 פיקסלים למטה, 50 פיקסלים לימין ולשמאל, ו20 פיקסלים ללמטה.

אז לאחר שעברנו על הדרכים לקביעת margin נראה איך אנחנו גורמים ל container שלנו להיות במרכז:

נקבע margin כדי לשים את ה container שלנו במרכז
נקבע margin כדי לשים את ה container שלנו במרכז

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

בואו נראה את התוצאה:

התוצאה בעמוד
התוצאה בעמוד

כדי לתת עוד קצת עיצוביות, נעגל את ה container שלנו בפינות. ניתן לעשות זאת עם border-radius:

עם border-radius אשר לעגל את הפינות של הגבול המקיף את האלמנט שלנו
עם border-radius אשר לעגל את הפינות של הגבול המקיף את האלמנט שלנו

נשמור ונראה את התוצאה באתר.

התוצאה באתר
התוצאה באתר

ככל שה border-radius יהיה יותר פיקסלים, כך הגבול יהיה יותר מעוגל.

הבעיה שנוצרה היא שעכשיו לאחר שעיגלנו את ה container שלנו, הגבול שלו גולש לנו על הטקסט(בחלק של "כל הזכויות שמורות"). כדי לפתור בעיה זו נצטרך להוסיף padding ל container כדי שהמרחק בין התוכן לגבול יגדל ואז הוא לא יגלוש לנו על הטקסט. נוסיף padding של 10px לכל אחד מהצדדים:

נוסיף padding כדי להגדיל את המרחק בין התוכן לבין הגבול המקיף אותו
נוסיף padding כדי להגדיל את המרחק בין התוכן לבין הגבול המקיף אותו

נשמור ונרענן:

התוצאה באתר
התוצאה באתר

לאחר שעיצבנו את ה container עצמו, נעבור עכשיו לעצב את התוכן שלו.

נתחיל מה header. בתוך ה header יש לנו שתי כותרות: h1 ו h2. הדבר הראשון שאנחנו רוצים לעשות זה למקם את כל ה header במרכז. את זה נוכל לעשות עם text align:center. 

בעזרת text-align:center נוכל "למרכז" את התוכן של האלמנט נבחר
בעזרת text-align:center נוכל "למרכז" את התוכן של האלמנט נבחר

נשמור ונרענן:

התוצאה באתר
התוצאה באתר

נעבור לתפריט הניווט. נתחיל מזה שניתן לו צבע של aaa#, נעביר את התוכן למרכז ונגדיל את התוכן לגודל של 18px.

 

נשמור ונרענן את העמוד שלנו:

התוצאה באתר
התוצאה באתר

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

הגעה לאלמנט הנמצא בתוך אלמנט
הגעה לאלמנט הנמצא בתוך אלמנט

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

disply:inline יגרום לתגיות ה li שלנו להופיע בשורה אחת
disply:inline יגרום לתגיות ה li שלנו להופיע בשורה אחת

נשמור ונרענן את העמוד שלנו:

התוצאה באתר
התוצאה באתר

(הסיבה שהלינקים בתמונה אצלי הם בצבע שונה זה כי לחצתי על השניים הימניים והם השתנו)

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

את החלק שהלינקים קרובים מדי אחד לשני אפשר לתקן בעזרת margin. ניתן למעלה ולמטה 0 פיקסלים כי אנחנו לא רוצים שיהיה margin למעלה ולמטה. ועל ימין ושמאל ניתן 20 פיקסלים. נוסיף זאת עכשיו לתגית ה li:

 

נשמור ונרענן את האתר:

התוצאה באתר
התוצאה באתר

עכשיו נטפל בבעיה השניה. נשנה את הקישורים לצבע לבן. אפשר לעשות זאת או עם color:white או עם color:#fff(אני אישית אוהב להשתשמש ב – hex colors). נוסף על כך, נצטרך להוריד את הקו שנמצא מתחת לקישורים, את זה אפשר לעשות עם האפיון של text decoration, ולתת לו את הערך של none. את כל זה נחיל על הקישורים שלנו שנמצאים בתוך ה nav. נעשה זאת כך:

נשים צבע לבן בעזרת color:fff ונוריד קו תחתון בעזרת text-decoration:none
נשים צבע לבן בעזרת color:fff ונוריד קו תחתון בעזרת text-decoration:none

נשמור ונרענן את האתר שלנו:

התוצאה באתר
התוצאה באתר

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

 

נשמור ונרענן. כך זה אמור להיראות עכשיו כאשר אנחנו נעבור על אחד הקישורים:

התוצאה באתר
התוצאה באתר

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

margin שלילי מקרב בין אלמנטים
margin שלילי מקרב בין אלמנטים

נשמור ונרענן:

התוצאה באתר
התוצאה באתר

עכשיו נעצב קצת יותר את ה nav שלנו ונרחיב אותה ב 3px מלמעלה ומלמטה כדי לתת לתפריט שלנו יותר נוכחות. מהצדדים כמובן אין צורך.

נוסיף padding כדי להרחיב את תפריט הניווט שלנו מלמעלה ולמטה
נוסיף padding כדי להרחיב את תפריט הניווט שלנו מלמעלה ולמטה

נשמור ונרען:

התוצאה באתר
התוצאה באתר

נראה הרבה יותר טוב.

החלק האחרון שנעצב בעמוד הזה הוא ה footer שלנו. הדבר היחיד שנעשה אותה זה להעביר את הטקסט שלה למרכז. בואו נעשה זאת:

נעביר את התוכן של ה footer למרכז
נעביר את התוכן של ה footer למרכז

נשמור ונרענן

התוצאה באתר
התוצאה באתר

סיכום דבר

אז זהו למדריך הנוכחי! עברנו על לא מעט מהבסיס. למדנו גם html וגם css. המדריך הזה היה ארוך מאוד כי היה המון בסיס לכסות. המדריכים הבאים יהיו קצרים יותר. במדריך הבא נעשה את העמוד של צרו קשר וניצור טופס יצירת קשר. ובקשר לעמוד של קצת עלינו, זה התרגיל שלכם עד לשיעור הבא 🙂 תצרו קובץ css חדש בתיקיית ה css ותקראו לו about.css. אל תשכחו לקשר את עמוד ה about אליו :). אשמח מאוד אם תכתבו איך היה בשבילכם המדריך והאם הוא עזר.

וכמובן, מוזמנים תמיד לאתר שלי.

 

 

 

 

 

 

 

 

 

 

 

 

 

אודות יאיר משניות

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

6 תגובות

  1. שמתי במועדפים:) מדריך ברור ונח להבנה

  2. יאיר, תודה רבה על המדריך המושקע.

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

השאר\י תגובה