פורום אטרף - שיעור מס' 7

הקדמה

בשיעור הקודם למדנו מספר דברים:

ליצור תיבת טקסט.
ליצור תיבת מלל.
ליצור לחצן איפוס ולחצן שליחה.
לחצי אישור.
רשימת בחירה.
ועוד..

בואו נתחיל

הערות
יש אפשרות לעשות הערות קוד (מי שמכיר שפות אחרות אז אני מדבר על דברים כמו "#", "//" או "/**/").
כלומר שאני אראה משהו שלא יודפס בדף כדי שיהיה קל לקרוא את הקוד?

אז זהו שכן!
זה פשוט מאוד, נרשום כך:

קוד HTML:

<!-- Comment -->

נרשום את ההערה איפה שרשום "Comment", נריץ את הקוד ונראה שלא רואים את ההערה!

שימו לב,
אסור לשים דברים חשובים בהערות, כולם יכולים לראות את הקוד מקור בדף!
(קליק ימני והצג מקור דף)
CSS
יש אפשרות לקצר את הקוד? במקום לתת לכל דבר Style?
אז כן יש דבר כזה.

קודם כל נשים את הקוד בתגית style
ככה:

קוד HTML:

<style type="text/css"><!--CSS--> </style>

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

איפה שרשום "CSS" צריך לרשום את קוד ה-CSS שלנו.
למשל דוגמא, נעשה את גודל הכתב שלנו 14PX:

קוד HTML:

<style type="text/css"><!--body{font-size: 14px;}--> </style>

רשמנו בקוד CSS "body{font-size: 14px;}" שזה אומר שכל פעם שהמחשב רואה את התג body(במקרה שלנו זה פעם אחת אבל זה יכול לעבוד על כל תג) זה ישים את הגודל 14PX.
נסו ותראו.

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

קוד HTML:

<span class="MyClass">Text</span>

קוד CSS:

קוד:

.MyClass {color: blue;}

שימו לב לנקודה בהתחלה ^
וכך ייצא לנו צבע כחול למה שהגדרנו את המאפיין class ל-MyClass.

כנ"ל ל-id:

קוד HTML:

<span id="MyID">Text</span>

קוד CSS:

קוד:

#MyID {color: blue;}

במקום נקודה שמים סולמית ^

קישור חיצוני ל-CSS
לפעמים קוד ה-CSS יכול להיות מאוד אבל ארוך ובגלל זה בשביל להקל על קריאת הקוד יש כאלה שמשתמשים בלינק חיצוני ובשביל זה נכתוב:

קוד:

<link rel="stylesheet" type="text/css" href="Code.css">

כלומר:
הקטע: rel="stylesheet" אומר לנו מה זה (וכך גם לדפדפן)
הקטע: type="text/css" אומר באיזה שפה הקטע הנ"ל
והקטע: href="Code.css" אומר מאיפה לקחת את הקישורים *הקובץ החיצוני חייב להיגמר בסיומת CSS!*
אם ניצור קובץ CSS עם כל הקוד ונקשר את הדף הראשי אליו, התוצאה תיהיה אותה תוצאה.

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

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

תגי HTML:
http://www.w3schools.com/tags/default.asp
פקודות CSS:
http://www.w3schools.com/css/default.asp

לשיעור הקודם - שיעור מס' 6 לחצו כאן.
שאלות על HTML ו-CSS בפורום שפות צד לקוח.

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

שיעור מס\' 7 - HTML ו-CSS

הודעת מערכת

עוד באטרף