28
1 XHTML - וCSS ךךךך- ךךךךך ךך ךךךךך- ךךךךך ךךךךךך ךxhtml ךךךךך ךךךךךך- ךךךךך ךCSS © ךךך ךךךךך, ךך ךךך ךךךךך ךךך ךךךךךךךך ךךךךךך ךךךךךךךך2003-2005 ךךךך ךךךךךך ךךךךך ךךך ךךך ךךךךךךCC ךךךךךך:http://creativecommons.org/licenses/by-nc-sa/2.5 ווווו ווו וו, ווו וו ווווו ווו וו, ווו וו וווו ווווPHP PHP – ווווו וו' – ווווו וו'2 2

1 XHTML ו-CSS עבודה עם תגיות - המשך תגיות תקניות ב-xhtml תגיות אסורות עיצוב ב-CSS חלק מהזכויות שמורות © אסף פוניס,

  • 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זו-