1. 1 XHTML ו-CSS עבודה עם תגיות - המשך תגיות תקניות ב-xhtml תגיות אסורות עיצוב ב-CSS חלק מהזכויות שמורות © אסף פוניס, רז מרק ודימה פרפורניק 2003-2005 ניתן להשתמש במצגת זאת לפי רישיון CC בכתובת: http://creativecommons.org/licenses/by-nc-sa/2.5 תיכון אהל שם, רמת גן קורס PHP – הרצאה מס' 2

2. 2 עבודה עם תגיות - המשך ברוב המקרים, תוכן בדף xhtml שלא נמצא בין תגיות, יתקבל כטקסט פשוט ללא מאפיינים כלל. This is my first HTML page blablabla

3. 3 עבודה עם תגיות - המשך לעומת זאת, דף ה-xhtml לא יוצג למשתמש כפי שהוא נראה בפנקס הרשימות. This is my first HTML page blablabla new text my dear כדי שהדף יוצג כנדרש, חובה להשתמש בתגיות !

4. 4 עבודה עם תגיות - המשך תגיות רבות, שפועלות/לא פועלות על טווחים מכילות לעתים פרמטרים- מאפיינים מסוימים שיפעלו על התגית: כאשר הפרמטרים הם פרמטרי עיצוב, הם יכתבו אך ורק בCSS, כפי שנראה בהמשך. הערות 1. השם והפרמטר מהווים תגית xhtml, ולכן הם ייכתבו באותיות קטנות. לעומת זאת, הערך שיקבל הפרמטר יכול להכתב בכל דרך. 2. הערך שיקבל הפרמטר ייכתב תמיד ורק בין גרשיים.

5. 5 תגיות תקניות ב-xhtml תגיות שימושיות שלא פועלות על טווחים 1. ירידת שורה- br: שימוש בתגית בצורה יורה לדפדפן לרדת שורה בהצגת הפלט בדף. 2. יצירת קו אופקי- hr: שימוש בתגית בצורה יורה לדפדפן לצייר קו אופקי בהצגת הפלט בדף. … …line 1 line 2… …

6. 6 התמונה שתוצג כאן היא image.xyz. טקסט אלטרנטיבי : במידה והתמונה לא תוצג, יהיה רשום במקומה הערך שב -alt. הערך שב title הוא ההודעה שתוצג בחלון במעבר על התמונה. אם לא נקבע title, ההודעה שתוצג תהיה ערך ה alt. ישנם שלושה סוגים עיקריים של קבצי תמונות – JPEG, PNG ו - GIF. הסוגים הללו נבדלים בעיקר באלגוריתמי הקידוד של הצבעים. תגיות תקניות ב-xhtml 3. הוספת תמונהimg -: הצגת תמונה בדף ה-xhtml תיעשה באופן הבא:

7. 7 תגיות תקניות ב-xhtml תגיות שימושיות שפועלות על טווחים 1. פסקה חדשה- p : שימוש בתגית זו, יורה לדפדפן להציג את כל אשר נכלל בטווח של התגית בפסקה נפרדת. 2. איפיון טקסט- span: השימוש העיקרי של התגית הוא להגדיר כיצד ייראה הטקסט(מבחינת גודל, צבע, מקום וכו'...). … … para1 para2 … …

8. 8 תגיות תקניות ב-xhtml 3. קישורים- a: א. הוספת קישור לדף אינטרנט: …My Text… כאשר הURL הוא הקישור אליו מקשרים, וMy Text הוא הטקסט המקשר. ב. עוגן=יצירת סימניה- קישור לחלקים שונים בדף: קביעת הסימנייה: text הגדרת הקישור: text2

9. 9 כתובות URL (Uniform Resource Locator): לכל כתובת באינטרנט יש כתובת URL. קיימים מס' סוגים שונים של כתובות: http://www.ohel-shem.com http://www.ohel-shem.com/MyScript.php ftp://ftp.ohel-shem.com mailto:asaf@ohel-shem.com file:///c:/Web/home.htm כתובת יחסית / כתובת מוחלטת: מוחלטת: כתובת מוחלטת מציגה את הנתיב המלא לקובץ ומכילה את שם האתר, ספריית הקבצים, שם קובץ. יחסית: כתובת יחסית מציגה את הנתיב ביחס לנקודה בה נמצא מסמך ה- xhtml המקשר. תגיות תקניות ב-xhtml

10. 10 תגיות תקניות ב-xhtml תגיות תקניות, אך לא מומלצות. התגיות הבאות הן תקניות ומותרות ב1.0 xhtml, אך מומלץ להשתמש בהן כמה שפחות, ולתת לCSS למלא את מקומן(כל התגיות הנ"ל פועלות על טווח): 1. הדגשת טקסט- b. 2. נטיית טקסט- i. 3. הגדלת טקסט- big. 4. הקטנת טקסט- small. 5. קביעת גודל כותרת/ראש פרק- h(1..6), כאשר h6 הוא הגודל הקטן ביותר, וh1 הגדול ביותר. הערה חשובה : את כל אפשרויות העיצוב הנ " ל ניתן ועדיף ליישם ע " י שימוש בתגית וב CSS, כפי שנלמד בהמשך.

11. 11 תגיות תקניות ב-xhtml 6. רשימות: קיימים שני סוגי רשימות, מספריות וכוכביות. התגית שיוצרת רשימה מספרית היא ol, ורשימה כוכבית היא ul. להוספת אפשרות בכל רשימה שהיא, משתמשים בתגית li. דוגמאות: … Coffee Tea … 1.Coffee 2.Tea … Coffee Tea … Coffee Tea

12. 12 תגיות תקניות ב-xhtml הערות ב-xhtml כדי שקוד ה-xhtml יהיה ברור(אם רוצים לשפרו, למשל) נוהגים להשתמש בהערות. כל משתמש שיסתכל בsource, יראה בו את ההערות, למרות שלא יוצגו למשתמש בדף. הערה נכתבת כך: וניתן לצרפה לכל מקום בקוד.

13. 13 תגיות תקניות ב-xhtml html entities לעתים תגיות לא יכולות למלא את כל בקשות המשתמש. קיימים סימנים מיוחדים כגון 'רווח', ©, ± וכדומה שלא ניתן להדפיס בקלות. בכך מסייעים סימנים מיוחדים שנקראים html entities. לכל סימן מיוחד יש סימון מסוג entity, מהצורה &something. כאשר משתמשים בסימון כזה בדף xhtml, הסימן המיוחד יודפס. לדוגמה, כאשר כותבים בסקריפט &nbsp, יוצג על הדף רווח.

14. 14 תגיות אסורות ב-xhtml להלן רשימת תגיות html לא תקניות שאסור בתכלית האיסור להשתמש בהן בxhtml 1.0: -applet basefont- center- dir- font- isindex- menu- s- strike- u- xmp-

15. 15 עיצוב ב-CSS מהו CSS? CSS = Cascading Style Sheets. השימוש ב-CSS יקבע כיצד ייראה עמוד האינטרנט מבחינה עיצובית. תחילה, שימשה ה-CSS לעיצוב עמודי html 4, משום שאפשרויות העיצוב בו היו מועטות, ועם הזמן הפכה לכלי הבלעדי לעיצוב דפי אינטרנט ב-.xhtml עמוד xhtml ששואף לשלמות הוא כזה שמאפייני העיצוב שלו מוגדרים אך ורק ע"י CSS.

16. 16 עיצוב ב-CSS קיימות 3 דרכים לעצב עמודים ב-CSS: 1. בניית דף עם קוד CSS בפני עצמו(עמוד בפנקס הרשימות עם סיומת.css), וצירופו באמצעות קטע הקוד שייכתב ב-head, בעמודים עליהם רוצים שיפעל. 2. קוד CSS בתוך העמוד – כתיבת קוד CSS בעמוד ה-xhtml בתוך ה-head בצורה הבאה: …css code… 3. עיצוב פנימי – מאפייני עיצוב שנכתבים בתוך תגיות ה-xhtml, בתוך הפרמטר style.

17. 17 עיצוב ב-CSS קוד CSS: כל קוד CSS בנוי בצורה הבאה: … selector1 {property1: value1; property2: value2;… } selector2 {propertyX: valueX; propertyY: valueY;… } … selector הוא האובייקט עליו יפעל העיצוב(body,p,h1,span וכו'...) property הוא המאפיין של העיצוב(צבע, גודל, סוג פונט, מיקום בדף וכו'...) value הוא הערך שיקבל מאפיין העיצוב(צבע->אדום, גודל->20% וכו'...)

18. 18 עיצוב ב-CSS דוגמה פשוטה לקוד CSS: body { background-color : red; } span { color : green; font-size: large; } בדוגמה זו קוד ה CSS מגדיר שהרקע של העמוד יהיה בצבע אדום ( מוגדר ב body), ושבכל span שיימצא בתוכנית, הטקסט יהיה גדול וירוק.

19. 19 עיצוב ב-CSS span,p,h1 { color : green; font-size: large; } בדוגמה זו קוד ה CSS מגדיר שבכל פסקה חדשה, בכל כותרת h1 ובכל span בעמוד, הטקסט יהיה גדול וירוק. ניתן גם לקבוע מאפיינים עיצוביים לקבוצה של אובייקטים, לדוגמה :

20. 20 עיצוב ב-CSS עד כה הראינו כיצד להגדיר עיצוב על כל האובייקטים בעמוד מסויים. כיצד אפוא להגדיר עיצוב למספר מצומצם של אובייקטים? אם מדובר באובייקטים רבים, משתמשים באפשרות שנקראת class, איתה מגדירים עיצוב מכליל לאובייקטים הללו. אם מדובר באובייקט יחיד, מתשמשים באפשרות שנקראת id, והיא שימוש במספר סידורי מסוים עבור הסלקטור.

21. 21 עיצוב ב-CSS עיצוב מס' אובייקטים ב-class: בעמוד ה-CSS נכתוב כך: selector_tag הוא סוג התגיות עליהן יפעלו מאפייני העיצוב. אם רוצים שהקלאס יפעל על כל סוגי התגיות, לא מציינים אותו כלל. class_name הוא השם של קבוצת האובייקטים מסוג selector_tag עליהם יפעלו מאפייני העיצוב. בעמוד ה-xhtml נכתוב כך: … selector_tag.class_name {property: value; } … >selector_tag class=“class_name”> …

22. 22 עיצוב ב-CSS דוגמה לשימוש בclass: קטע הקוד ב-CSS: קטע הקוד ב-xhtml: span.num1 { color : green; font-size: large; } span.num2 { color : red; font-size: small; } >span class=“num1”> green&large text red&small text regular text regular paragraph על המסך יופיע טקסט גדול ירוק, טקסט קטן אדום, טסקט רגיל(שחור בינוני), ופסקה עם טקסט רגיל(שחור בינוני).

23. 23 עיצוב ב-CSS עיצוב אובייקט יחיד(id): בעמוד ה-CSS נכתוב כך: id_name הוא " השם " של התגיות עליהן יופעלו מאפייני העיצוב. התו הראשון ב id_name חייב להיות אות באנגלית. בעמוד ה-xhtml נכתוב כך: … #id_name {property: value; } … >some_tag id=“id_name”> …

24. 24 עיצוב ב-CSS דוגמה לשימוש בid: קטע הקוד ב -CSS: קטע הקוד ב-xhtml: #bigreen { color : green; font-size: large; } #redsmall { color : red;} >span id=“bigreen”> green&large text red&small text regular text על המסך יופיע טקסט גדול ירוק, כותרת אדומה בגודל 5, וטסקט רגיל(שחור בינוני).

25. 25 עיצוב ב-CSS עיצוב פנימי: לעיצוב תגית xhtml בודדת, משתמשים בפרמטר style בתוכה : … italic&bold text italic&blue paragraph … על המסך יופיע קישור נטוי ומודגש לקובץ dimka.htm, ופסקה עם טסקט נטוי וכחול.

26. 26 עיצוב ב-CSS רשימת פרמטרי עיצוב ב-CSS: פרמטרי טקסט: 1.color - צבע הטקסט)ערכים: שם צבע באנגלית, קוד RGB #rrggbb). 2.direction- ישור טקסט לכיוון מסוים(ערכים: rtl - לימין. ltr–לשמאל). 3. letter-spacing- רווח בין אותיות בטקסט(ערך: מס' פיקסלים. לדוג' 2px). 4. text-align – מיקום הטקסט בדף(ערכים: left,right,center). 5. text-decoration – תוספות לטקסט(ערכים: underline,overline,blink). 6. word-spacing – רווח בין מילים בטקסט(ערך: מס' פיקסלים. לדוג' 4px).

27. 27 עיצוב ב-CSS רשימת פרמטרי עיצוב ב-CSS: פרמטרי פונט: 1. font - כל פרמטרי הפונט בזה אחר זה(ערכים: ערכי כל הפרמטרים). 2.font-size - גודל הפונט)ערכים: xx-large…xx-small). 3. font-style- סגנון הפונט(ערכים: italic,oblique). 4. font-weight- עובי הפונט(ערך: מס' פיקסלים. לדוג' 2px). 5. font-family – גופן הפונט(ערך: שם הגופן).

28. 28 עיצוב ב-CSS רשימת פרמטרי עיצוב ב-CSS: פרמטרי רקע: 1.background - כל פרמטרי הרקע בזה אחר זה(ערכים:ערכי כל הפרמטרים). 2. background-color- צבע רקע(ערכים: שם צבע באנגלית, קוד RGB). 3. background-image- תמונת רקע(ערך: כתובת URL של תמונה). 4. background-position- מיקום התמונה(ערך: שתי מילים בזו אחר זו- top/center/bottom left/center/right).