View
237
Download
1
Embed Size (px)
Citation preview
1
XHTML-ו CSS
עבודה עם תגיות - המשך•xhtmlתגיות תקניות ב-•תגיות אסורות •CSSעיצוב ב-•
2003-2005חלק מהזכויות שמורות © אסף פוניס, רז מרק ודימה פרפורניק
בכתובת:CCניתן להשתמש במצגת זאת לפי רישיון http://creativecommons.org/licenses/by-nc-sa/2.5
תיכון אהל שם, רמת גןתיכון אהל שם, רמת גן22 – הרצאה מס' – הרצאה מס' PHPPHPקורס קורס
2
עבודה עם תגיות - המשך
שלא נמצא בין תגיות, xhtml ברוב המקרים, תוכן בדף ללא מאפיינים כלל. יתקבל כטקסט פשוט
< !DOCTYPE…><html><head> <title>This is my first HTML page</title></head><body>blablabla
</body></html>
3
עבודה עם תגיות - המשך לא יוצג למשתמש כפי שהוא xhtml לעומת זאת, דף ה-
<…DOCTYPE! >נראה בפנקס הרשימות.<html><head> <title>This is my first HTML page</title></head><body> blablabla new text my dear</body></html>
כדי שהדף יוצג כנדרש, חובה להשתמש בתגיות!
4
עבודה עם תגיות - המשך תגיות רבות, שפועלות/לא פועלות על טווחים מכילות
לעתים פרמטרים- מאפיינים מסוימים שיפעלו על התגית:
< tag parameter=“value”>
כאשר הפרמטרים הם פרמטרי עיצוב, הם יכתבו אך ורק , כפי שנראה בהמשך.CSSב
הערוהערותת
, ולכן הם ייכתבו באותיות xhtmlהשם והפרמטר מהווים תגית 1.קטנות. לעומת זאת, הערך שיקבל הפרמטר יכול להכתב בכל
דרך.
הערך שיקבל הפרמטר ייכתב תמיד ורק בין גרשיים.2.
5
xhtmlתגיות תקניות ב-תגיות שימושיות שלא פועלות על טווחים•
יורה />br<: שימוש בתגית בצורה brירידת שורה- . 1 לדפדפן לרדת שורה בהצגת הפלט בדף.
/>hr<: שימוש בתגית בצורה hrיצירת קו אופקי- . 2 יורה לדפדפן לצייר קו אופקי בהצגת הפלט בדף.
…<body> …line 1<br /> line 2…</body>…
6
.image.xyzהתמונה שתוצג כאן היא • במידה והתמונה לא תוצג, יהיה טקסט אלטרנטיבי:•
.altהערך שב- רשום במקומה הוא ההודעה שתוצג בחלון במעבר על titleהערך שב•
, ההודעה שתוצג תהיה ערך titleהתמונה. אם לא נקבע . altה
,JPEGישנם שלושה סוגים עיקריים של קבצי תמונות – •PNG -ו GIF הסוגים הללו נבדלים בעיקר באלגוריתמי .
הקידוד של הצבעים.
xhtmlתגיות תקניות ב-
xhtmlהצגת תמונה בדף ה- : -imgהוספת תמונה. 3תיעשה באופן הבא:
<img src=“image.xyz” alt=“text” title=“message” />
7
xhtmlתגיות תקניות ב-תגיות שימושיות שפועלות על טווחים•
: שימוש בתגית זו, יורה לדפדפן p פסקה חדשה-. 1 להציג את כל אשר נכלל בטווח של התגית בפסקה
נפרדת.
: השימוש העיקרי של התגית spanאיפיון טקסט- . 2 הוא להגדיר כיצד ייראה הטקסט)מבחינת גודל, צבע,
מקום וכו'...(.
…<body> …<p>para1</p><p>para2</p>…</body>…
8
xhtmlתגיות תקניות ב-
: aקישורים- . 3 אינטרנט: א. הוספת קישור לדף
>a href=“URL”>…My Text…</a<
My Textו הוא הקישור אליו מקשרים,URL כאשר ה
הוא הטקסט המקשר.
ב. עוגן=יצירת סימניה- קישור לחלקים שונים בדף: >a name=“value”>text</a< קביעת הסימנייה:
>a href=“#value”>text2</a< הגדרת הקישור:
9
:URL (Uniform Resource Locator)כתובות •. קיימים מס' סוגים URLלכל כתובת באינטרנט יש כתובת
שונים של כתובות:• http://www.ohel-shem.com• http://www.ohel-shem.com/MyScript.php• ftp://ftp.ohel-shem.com• mailto:[email protected]• file:///c:/Web/home.htm
כתובת יחסית / כתובת מוחלטת:•מוחלטת: כתובת מוחלטת מציגה את הנתיב המלא לקובץ
ומכילה את שם האתר, ספריית הקבצים, שם קובץ.יחסית: כתובת יחסית מציגה את הנתיב ביחס לנקודה בה נמצא
המקשר.xhtmlמסמך ה-
xhtmlתגיות תקניות ב-
10
xhtmlתגיות תקניות ב-תגיות תקניות, אך לא מומלצות.•
, אך xhtml 1.0ומותרות ב התגיות הבאות הן תקניות CSSמומלץ להשתמש בהן כמה שפחות, ולתת ל
למלא את מקומן)כל התגיות הנ"ל פועלות על טווח(:.b. הדגשת טקסט- 1 .i. נטיית טקסט- 2 .big. הגדלת טקסט- 3 .small. הקטנת טקסט- 4 h6, כאשר )h)1..6. קביעת גודל כותרת/ראש פרק- 5
הגדול ביותר.h1הוא הגודל הקטן ביותר, והערה חשובה: את כל אפשרויות העיצוב הנ"ל ניתן ועדיף ליישם ע"י שימוש בתגית
>span<וב CSS.כפי שנלמד בהמשך ,
11
xhtmlתגיות תקניות ב-
קיימים שני סוגי רשימות, מספריות וכוכביות. רשימות:.6 , ורשימה כוכבית היא olהתגית שיוצרת רשימה מספרית היא
ul..li להוספת אפשרות בכל רשימה שהיא, משתמשים בתגית
דוגמאות:
… <ol> <li>Coffee</li> <li>Tea</li> </ol> …
1.Coffee2.Tea
… <ul> <li>Coffee</li> <li>Tea</li> </ul> …
•Coffee•Tea
12
xhtmlתגיות תקניות ב-
xhtmlהערות ב-• יהיה ברור)אם רוצים לשפרו, xhtmlכדי שקוד ה-
למשל( נוהגים להשתמש בהערות. כל משתמש , יראה בו את ההערות, למרות שלא sourceשיסתכל ב
יוצגו למשתמש בדף.
הערה נכתבת כך:
וניתן לצרפה לכל מקום בקוד.
<!--My comment-->
13
xhtmlתגיות תקניות ב-
•html entities
לעתים תגיות לא יכולות למלא את כל בקשות המשתמש. קיימים
סימנים מיוחדים כגון 'רווח', © , ± וכדומה שלא ניתן להדפיס.html entities בקלות. בכך מסייעים סימנים מיוחדים שנקראים
. something&, מהצורה entity לכל סימן מיוחד יש סימון מסוג , הסימן המיוחד יודפס.xhtmlכאשר משתמשים בסימון כזה בדף
, יוצג על הדף רווח. nbsp& לדוגמה, כאשר כותבים בסקריפט
14
xhtmlתגיות אסורות ב-
לא תקניות שאסור בתכלית html להלן רשימת תגיות : xhtml 1.0האיסור להשתמש בהן ב
-appletbasefont-
center-dir-
font-isindex-
menu-s-
strike-u-
xmp-
15
CSSעיצוב ב-
?CSSמהו •
CSS = Cascading Style Sheets-השימוש ב .CSSיקבע כיצד ייראה עמוד האינטרנט מבחינה עיצובית.
, משום שאפשרויות html 4 לעיצוב עמודי CSS תחילה, שימשה ה-
העיצוב בו היו מועטות, ועם הזמן הפכה לכלי הבלעדי לעיצוב דפי xhtml.אינטרנט ב-
ששואף לשלמות הוא כזה שמאפייני העיצוב שלו xhtml עמוד .CSSמוגדרים אך ורק ע"י
16
CSSעיצוב ב-:CSS דרכים לעצב עמודים ב-3קיימות •
(, css. בפני עצמו)עמוד בפנקס הרשימות עם סיומת CSS. בניית דף עם קוד 1 וצירופו באמצעות קטע הקוד
<link rel="stylesheet" type="text/css" href="style.css" /> , בעמודים עליהם רוצים שיפעל.head שייכתב ב-
head בתוך ה-xhtml בעמוד ה-CSS בתוך העמוד – כתיבת קוד CSS. קוד 2
בצורה הבאה: <style type="text/css">…css code…</style>
, בתוך הפרמטר xhtmlה- . עיצוב פנימי – מאפייני עיצוב שנכתבים בתוך תגיות3
style .
17
CSSעיצוב ב-
:CSSקוד •
בנוי בצורה הבאה:CSSכל קוד
…selector1 {property1: value1; property2: value2;… }selector2 {propertyX: valueX; propertyY: valueY;… }…
selector(הוא האובייקט עליו יפעל העיצוב body,p,h1,span וכו'...(property הוא המאפיין של העיצוב)צבע, גודל, סוג פונט, מיקום
בדף וכו'...(value ,הוא הערך שיקבל מאפיין העיצוב)צבע->אדום
וכו'...( 20%גודל->
18
CSSעיצוב ב-
:CSSדוגמה פשוטה לקוד •
body {background-color : red;}
span {color : green; font-size: large;}
מגדיר שהרקע של העמוד יהיה בצבע אדוםCSSקוד ה בדוגמה זו שיימצא בתוכנית, הטקסט יהיה גדול spanושבכל (,body)מוגדר בוירוק.
19
CSSעיצוב ב-
span,p,h1 {color : green; font-size: large;}
h1 מגדיר שבכל פסקה חדשה, בכל כותרת CSSקוד ה בדוגמה זוspanובכל
בעמוד, הטקסט יהיה גדול וירוק.
ניתן גם לקבוע מאפיינים עיצוביים לקבוצה של אובייקטים, לדוגמה:
20
CSSעיצוב ב-עד כה הראינו כיצד להגדיר עיצוב על כל האובייקטים בעמוד
מסויים.
כיצד אפוא להגדיר עיצוב למספר מצומצם של אובייקטים?
אם מדובר באובייקטים רבים, משתמשים באפשרות שנקראת •class.איתה מגדירים עיצוב מכליל לאובייקטים הללו ,
, idאם מדובר באובייקט יחיד, מתשמשים באפשרות שנקראת •
והיא שימוש במספר סידורי מסוים עבור הסלקטור.
21
CSSעיצוב ב-
:classעיצוב מס' אובייקטים ב-• נכתוב כך:CSSבעמוד ה-
selector_tag הוא סוג התגיות עליהן יפעלו מאפייני העיצוב. אם
רוצים שהקלאס יפעל על כל סוגי התגיות, לא מציינים אותו כלל.
class_name הוא השם של קבוצת האובייקטים מסוג selector_tag נכתוב כך:xhtmlבעמוד ה- מאפייני העיצוב. עליהם יפעלו
…selector_tag.class_name {property: value; }…
…>selector_tag class=“class_name”> …
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 </span><span class=“num2”> red&small text </span><span> regular text</span><p class=“num1”> regular paragraph</p>
על המסך יופיע טקסט גדול ירוק, טקסט קטן אדום, טסקט רגיל)שחור בינוני(, ופסקה עם טקסט רגיל)שחור בינוני(.
23
CSSעיצוב ב-
):idעיצוב אובייקט יחיד(• נכתוב כך:CSSבעמוד ה-
id_name .הוא "השם" של התגיות עליהן יופעלו מאפייני העיצוב
התו חייב להיות אות באנגלית.id_nameב הראשון
נכתוב כך:xhtmlבעמוד ה-
…#id_name {property: value; }
…
…>some_tag id=“id_name”>…
24
CSSעיצוב ב-
:idדוגמה לשימוש ב•
:CSSקטע הקוד ב-
:xhtmlקטע הקוד ב-
#bigreen { color : green; font-size: large; }#redsmall { color : red;}
>span id=“bigreen”> green&large text </span><h5 id=“redsmall”> red&small text </h5><span> regular text</span>
, וטסקט רגיל)שחור 5על המסך יופיע טקסט גדול ירוק, כותרת אדומה בגודל בינוני(.
25
CSSעיצוב ב-
עיצוב פנימי:•
style בודדת, משתמשים בפרמטר xhtmlלעיצוב תגית בתוכה:
…<body style=“font-style:italic;” > <a style=“font-weight: bold;” href=“dimka.htm”>italic&bold text</a> <p style=“color:blue;”>italic&blue paragraph</p>
</body>…
ופסקה עם טסקט נטוי ,dimka.htmעל המסך יופיע קישור נטוי ומודגש לקובץ וכחול.
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
CSSעיצוב ב-
:CSSרשימת פרמטרי עיצוב ב-•
פרמטרי פונט:1 .font .)כל פרמטרי הפונט בזה אחר זה)ערכים: ערכי כל הפרמטרים -
2.font-size- ערכים: (גודל הפונטxx-large…xx-small.)
3 .font-style :ערכים(סגנון הפונט -italic,oblique.)
4 .font-weight 'ערך: מס' פיקסלים. לדוג(2- עובי הפונטpx.)
5 .font-family.)גופן הפונט)ערך: שם הגופן –
28
CSSעיצוב ב-
:CSSרשימת פרמטרי עיצוב ב-•
פרמטרי רקע:1.background כל פרמטרי הרקע בזה אחר זה)ערכים:ערכי כל -
הפרמטרים(.
2 .background-color צבע רקע)ערכים: שם צבע באנגלית, קוד -RGB.)
3 .background-image ערך: כתובת(תמונת רקע -URL.)של תמונה
4 .background-position מיקום התמונה)ערך: שתי מילים בזו אחר -(.top/center/bottom left/center/rightזו-