הקדמה HTML היא שפת תכנות אשר פקודותיה מורות לדפדפן כיצד עליו להציג את דף ה – WEB.
את רוב פקודות ה – HTML נוכל לראות על כל דפדפן, אך ישנן פקודות חדשות שמותאמות
לדפדפנים השונים. הדפדפנים נפוצים ביותר הם: Netscape Navigator ן – Internet
Explorer.
כל אחד מהדפדפנים האלו חידש ושיפר את מאגר פקודות ה – HTML שהוא יכול להבין,
בהמשך נלמד על שיפורים אלה.
קובץ HTML הוא קובץ טקסט פשוט וניתן לכתוב אותו בכל EDITOR שהוא. את הקובץ יש
לשמור בסיומת של HTM או HTML.
שפת ה – HTML מורכבת משני סוגי פקודות:
פקודות מכולה – הפקודה מתחלקת לפקודת פתיחה ופקודת סגירה, כאשר היא
משפיעה על מראה הטקסט שנמצא בין שני הפקודות.
1.
פקודה בודדת – פקודה שאינה צריחה פקודת סגירה ותפקידה לבצע פעולה
מסויימת.
2.
כל פקודה מופיעה בין סוגריים זוויתיים. < ו- >. (רק כך יכול הדפדפן לזהות שמדובר
בפקודה כאשר אם נכתוב בתוך הסוגריים פקודה שלא קיימת הדפדפן יתעלם ממנה) לדוגמה:
<P>.
הדפדפן יכול להבחין בין פקודת פתיחה לבין פקודת סגירה על ידי בסימן “/”. לדוגמה:
פקודת פתיחה – <H1> פקודת סגירה – <H1/>. (הפקודה תקבע את המראה של מה שירשם בין
הפקודות)
כתיבת עמוד ראשון
ישנן פקודות שחייבות להופיע בכל עמוד:
פקודת פתיחה – <HTML> תופיע התחילת כל מסמך ופקודת סגירה <HTML/>
תופיע בסוף כל מסמך. כל מה שיהיה בין הפקודות האלו יהיה מסמך ה –
HTML שלך.
1.
פקודת פתיחה – <HEAD> ופקודת סגירה – <HEAD/>. בין הפקודות האלו
יוגדר כל מה שאינו גוף המסמך כגון: כותרת וקשרים למסמכים אחרים.
2.
פקודת פתיחה – <TITLE> ופקודת סגירה – <TITLE/>. בין הפקודות האלו
תוגדר כותרת המסמך. (לא תופיע בגוף המסמך עצמו אלא בשורת הכותרת של
הדפדפן)
3.
פקודת פתיחה – <BODY> ופקודת סגירה – <BODY/>. בין הפקודות האלו
יוגדר גוף המסמך. (כל מה שיציג הדפדפן על המסך)
4.
לדוגמה:
<HTML>
<HEAD>
ראש המסמך
<TITLE>
כותרת המסמך
<TITLE/>
<HEAD/>
<BODY>
גוף המסמך
<BODY/>
<HTML/>
טקסט
ישנן מספר דרכים לשלוט בצורה שבה הדפדפן יציג את הטקסט. ניתן לשלוט על גודל
הטקסט, על צבע הטקסט, על חוזק הטקסט, על הטיית הטקסט (ITALIC), על הדגשת הטקסט עם
קו תחתון ועל סוג הגופן. (אם למערכת ההפעלה מותקן אותו גופן כמובן)
גודל הטקסט
את גודל הטקסט ניתן לקבוע בשני דרכים:
ע”י הפקודות <?H> ו- <?H/> כאשר גודל הטקסט יכול לנוע בין 1 ל-
6. (1 הכי גדול)
1.
ע”י הפקודות <?=FONT SIZE> ו- <FONT/> כאשר גודל הטקסט יכול
לנוע בין 1 ל- 7. (7 הכי גדול)
2.
דוגמאות:
<H3/>כתב בגודל בינוני<H3>
<FONT/>כתב גדול<FONT SIZE=7>
צבע הטקסט
את צבע הטקסט ניתן לקבוע ע”י הפקודות <FONT/> ו- <??????#=COLOR
FONT>
דוגמה:
<FONT/>כתב בצבע כחול<FONT COLOR=#0000ff>
חוזק הטקסט
את חוזק הטקסט ניתן לקבוע ע”י הפקודות <B/> ו- <B>
דוגמה:
<B/>טקסט בולט<B>
הטיית הטקסט
כדי ליצור טקסט מוטה יש להשתמש בפקודות <I/> ו- <I>
דוגמה:
<I/>טקסט מוטה<I>
הדגשת הטקסט בקו תחתון
כדי להדגיש טקסט בקו תחתון יש להשתמש בפקודות <U/> ו- <U>
דוגמה:
<U/>טקסט מודגש בקו תחתון<U>
סוג הגופן
את סוג הגופן ניתן לקבוע ע”י הפקודות <FONT/> ו- <“סוג גופן”=FACE
FONT>
דוגמה:
<FONT/>כתב בגופן מירים<“FONT FACE=”Miriam>
קישורים
אחד מהדברים שאליהם בנוי דף האינטרנט הוא היכולת להורות לדפדפן להציג דף אחר
לאחר ביצוע פעולה של קריאה לדף החדש. לקריאה לדף החדש קוראים קישור. אם לא היו
קישורים בדפי האינטרנט היינו צריכים לדעת את שמם של כל הדפים ולטעון אותם
בעצמנו.
ישנם שני סוגי קושורים:
קישור למסמך אחר
1.
הפקודות שבהן נשתמש על מנת ליצור קישור כזה הן <A/> ו- <“כתובת המסמך
החדש”=A HREF>
בין פקודת הפתיחה ופקודת הסיום יהיה התוכן הכתוב שכאשר נלחץ עליו
הדפדפן ידע שהו צריך לטעון את הדף שכתובתו רשומה אחרי ה- HREF.
(תוכן זה יהיה מודגש בקו תחתון וצבעו יהיה כחול)
דוגמה:
<A/>הדף הבא<“A HREF=”nextpage.htm>
קישור באותו המסמך למקום אחר
2.
כדי ליצור קישור בתוך המסמך נשתמש בפקודות <A/> ו- <“שם עוגן#”=A HREF
> וכדי ליצור את העוגן נשתמש בפקודות <A/> ו- <“שם עוגן”=A NAME>
בין פקודת הפתיחה ופקודת הסיום של הקישור יהיה התוכן הכתוב שכאשר נלחץ
עליו הדפדפן יקפוץ למקום שבו מופיעות פקודות העוגן.
בין פקודת הפתיחה ופקודת הסיום של העוגן לא חייבים לכתוב שום דבר וגם
אם נכתוב לא יהיה שינוי בתצוגה של הכתוב על מסך הדפדפן.
דוגמה:
<A/>עבור לחלק ראשון<“A HREF=”http://compumedic.co.il/main/#one>
יכתב במקום שבו מתחיל החלק הראשון של המסמך
<A/>חלק ראשון<“A NAME=”one>
הערה: ניתן גם להגיע למקום מסויים במסמך חדש ע”י שימוש בפקודות
<A/> ו- <“שם עוגן#כתובת מסמך חדש”=A HREF>
דוגמה:
<A/>עבור לחלק ראשון של הדף הבא<“A HREF=”nextpage.htm#one>
תמונה
לא רק מילים ואותיות יכולות לספק לנו מידע, גם התמונות יכולות. שילוב הגרפיקה בעמוד
ה – HTML שלך, יהפוך אותו למושך יותר, קריא יותר (קשה לקרוא כמויות גדולות של
חומר כתוב), מובן יותר, יצירתי יותר ועוד ועוד ועוד. כמובן ישנם דברים שניתן להעביר
רק בצורה גרפית כגון התמונה שלך. בזמן האחרון ניתן גם לראות יותר ויותר שימוש
בתמונות למטרת פרסום באינטרנט.
ישנם שני סוגי תמונות שניתנות להצגה בעזרת הדפדפן:
תמונת Graphics Interchange Format – GIF.
תמונת Joint Photographic Experts Group – JPG.
ניתן לשלב תמונה בדף האינטרנט שלך ע”י הפקודה <“כתובת התמונה”=IMG SRC>
דוגמה:
<“IMG SRC=”picture.gif>
בדוגמה הזאת התמונה picture.gif נמצאת באותה ספריה שבה נמצא הדף. אם התמונה היתה
בספריה אחרת, gifs למשל הפקודה היתה נראת כך:
<“IMG SRC=”gifs/picture.gif>
ניתן לבצע שילוב של תמונה עם קישור (התמונה תשמש בתור קישור):
<A HREF=”page.htm”><IMG SRC=”picture.gif”></A>
כאשר נלחץ על התמונה picture הדפדפן יטען את העמוד page.
כמו בקישור רגיל גם לתמונה יש סימן שהיא קישור – מסגרת כחולה. ניתן לשלוט בעובי
המסגרת הכחולה ע”י שימוש במאפיין BORDER.
דוגמה:
<IMG SRC=”picture.gif” BORDER=0>
בדוגמה זו לא תהיה מסגרת מסביב לתמונה.
כאשר נשלב תמונה עם טקסט, הטקסט יופיע בחלקה התחתון של התמונה ובמידה ויגלוש
שורה, השורה החדשה תתחיל מתחת לתמונה.
לדוגמה:
the line will be here as default
.and will continue here if it is to long
ניתן לקבוע היכן הטקסט יופיע ע”י המאפיין ALIGN.
הצגת הטקסט
הערך
הטקסט ימוקם בחלקה העליון של התמונה
TOP
הטקסט ימוקם במרכז התמונה
MIDDLE
הטקסט ימוקם בחלקה התחתון של התמונה
(ברירת מחדל)
BOTTOM
דוגמה:
החלק הכתוב<“IMG SRC=”picture.gif” ALIGN=”MIDDLE>
ישנה דרך נוספת לקבוע את מיקום הטקסט ביחס לתמונה וגם היא ע”י המאפיין ALIGN.
לצורה זו קוראים התמונה הצפה. מיקום הטקסט יתחיל תמיד מחלקה העליון של התמונה אבל
ניתן לקבוע האם התמונה תהיה מצידו השמאלי של הטקסט או מצידו הימני.
דוגמה:
אם נרצה שהטקסט “יגלוש” מצידה הימיני של התמונה נכתוב:
החלק הכתוב<“IMG SRC=”picture.gif” ALIGN=”LEFT>
ואם נרצה שהטקסט “יגלוש” מצידה השמאלי של התמונה נכתוב:
החלק הכתוב<“IMG SRC=”picture.gif” ALIGN=”RIGHT>
ניתן גם לקבוע את מרחק הטקסט מהתמונה ע”י המאפיינים VSPACE ן- HSPACE.
המאפיין VSPACE מגדיר את המרווח מעל ומתחת התמונה והמאפיין HSPACE מגדיר את
המרווח מצידי התמונה. המאפיינים מגדירים את המרווחים משני צידי התמונה, כלומר, אם
נכתוב VSPACE=2 הרווח מעל התמולה יהיה 2 וגם הרווח מתחת לתמונה יהיה 2.
דוגמה:
החלק הכתוב<IMG SRC=”picture.gif” ALIGN=”RIGHT” HSPACE=2>
ניתן לשלוט גם במאפייני הגובה והרוחב של התמונה בעזרת מאפייני WIDTH ן- HEIGHT.
במידה ונוסיף את המאפיינים האלו לתמונה, הדפדפן ישמור לתמונה מקום בדף, יטען קודם
את הכתוב ורק בסוף יוסיף את הקובץ הגרפי. בצורה כזו הקורא יכול לעיין במסמך בזמן
שהתמונה נטענת. (דבר שלפעמים יכול לקחת הרבה זמן)
דוגמה:
<IMG SRC=”picture.gif” HEIGHT=100 WIDTH=50>
לא כל דפדפן יכול לקרוא גרפיקה ולכן ניתן לשים טקסט שיחליף את התמונה במידה
והדפדפן אינו גרפי, הדבר מתבצע באמצעות הפקודה ALT.
דוגמה:
<“פה צריכה להיות התמונה שלי”=IMG SRC=”picture.gif” ALT>
רקעים
ישנם שני סוגי רקעים לדף HTML
ניתן להוסיף רקע של צבע אחד ע”י שימוש בפקודה <??????#=BGCOLOR BODY>
דוגמה:
<BODY BGCOLOR=#0000FF>
יוסיף למסמך רקע בצבע כחול.
ניתן להוסיף רקע של תמונה ע”י שימוש בפקודה
<“שם תמונה”=BODY BACKGROUND>
דוגמה:
<“BODY BACKGROUND=”pictur.gif>
ישנן שלוש דרכים להוסיף תמונת רקע
תמונה מרובעת שגודלה קטן מגודל המסך – התמונה תשוכפל לרוחב
ולאורך המסך.
1. תמונה מלבנית שאורכה כאורך המסך – התמונה תשוכפל לרוחב המסך.
2. תמונה מלבנית שרוחבה כרוחב המסך – התמונה תשוכפל לאורך המסך.
טפסים
שילוב טפסים באתר יאפשר למשתמש להיות חלק פעיל באתר שלנו. בעזרת הטפסים
המשתמש יוכל “לדבר” עם האתר.
הפקודה המשמשת לפתיחת טופס היא <FORM> והפקודה המשמשת לסגירת הטופס היא
<FORM/>. אם נכתוב פקודת טופס מחוץ לפקודת הפתיחה והסגירה של הטופס
הדפדפן יתעלם ממנה. ניתן לשלב מספר טפסים באותו מסמך.
לפקודה <FORM> יש מספר מאפיינים:
מאפיין ה ACTION: מאפיין זה מכיל את כתובת ה URL שאליה ישלח המידע
שהוכנס לטופס. מאחר ושפת ה HTML איננה יודעת לבצע פעולות עם טפסים יש
לשלוח את המידע לכתובת אחרת שבה יש תוכנית שיודעת להשתמש במידע שבקובץ.
תוכניות אלו כתובות בשפות ה CGI. ישנה דרך נוספת להשתמש במידע שמוכנס
לטופס בעזרת פקודות ה SCRIPT. פקודות אלו כתובות בתוך תוכנית ה HTML.
שפות ה SCRIPT יכולות לבצע פעולות מידיות על טפסים כגון בדיקת נתונים או
חישובים בעזרת נתונים אבל הן אינן יכולות לכתוב מידע לקובץ או לקרוא מידע
מקובץ. כמו כן שפות אלו אינן שפות גרפיות.
במידה ולא נכתוב את מאפיין ה ACTION נתוני הטפסים ישלחו לכתובת ה URL
של דף ה HTML.
מאפיין ה METHOD: מאפיין זה מכיל את השיטה שבה יועברו נתוני הטופס.
ישנן שתי אפשרויות להעברת נתוני הטופס: GET ו- POST.
הפקודה GET מגבילה את כמות הנתונים הנשלחים לפחות מקילובייט אחד, אך היא
פשוטה יותר לשימוש באמצאות הוראות ה CGI, הפקודה POST יכולה לשלוח כמות
בלתי מוגבלת של נתונים.
גם בפקודה זו אין חובה להשתמש.
דוגמה: בקרוב:
<“FORM METHOD=”POST>
<FORM/>
בדוגמה: בקרוב זו המידע ישלח בשיטת ה POST לכתובת ה URL של הדף עצמו.
דוגמה: בקרוב:
<“/…FORM ACTION=”HTTP://WWW.SERVER.COM/FORMS>
.<FORM/>
בדוגמה: בקרוב זו המידע ישלח לכתובת הרשומה.
ישנן שלושה סוגי פקודות שמאפשרות להכניס מידע לטופס:
פקודות ה – <TEXTAREA> ו- <TEXTAREA/> מאפשרות למשתמש להכניס טקסט של
יותר משורה אחת. כל מה שיהיה כתוב בין פקודת הפתיחה ופקודת הסגירה יוצג
כברירת המחדל בתוך שדה הקלט. לא ניתן לכתוב פקודות HTML בין פקודת
הפתיחה ופקודת הסגירה.
לפקודה יש מספר מאפיינים:
NAME – שמו של השדה יוצמד לתוכן השדה בזמן העברת הנתונים לתוכנית אחרת.
COLS – משתנה זה יקבע את רוחב חלון הטקסט. (ברירת מחדל 20)
ROWS – משתנה זה יקבע את גובה חלון הטקסט. (ברירת מחדל 1)
גודל חלון הטקסט נקבע לפי מספר תווים. אם נרצה חלון ברוחב של 30 תווים, ערך
המשתנה COLS יהיה 30.
ערכי גודל החלון יקבעו רק את גודל אזור התצוגה ולא את כמות הנתונים שניתן
להכניס למשתנה הקלט.
דוגמה: בקרוב:
<ROWS=10 COLS=50 “שם שדה”=TEXTAREA NAME>
כיתוב ברירת המחדל
.
<TEXTAREA/>
בדוגמה: בקרוב זו יפתח חלון טקסט ברוחב של 50 תווים ובאורך של 10 תווים.
פקודות ה – <SELECT> ו- <SELECT/> מאפשרות למשתמש לבחור נתון, אחד או
יותר, מתוך רשימה.
כל נתון בתוך הרשימה ייוצג באמצעות פקודת ה – <OPTION>.
לפקודת ה SELECT יש שלושה מאפיינים:
NAME – שמו של השדה יוצמד לתוכן השדה בזמן העברת הנתונים.
SIZE – משתנה זה יקבע את גודלו של חלון התצוגה. (את מספר הנתונים שהמשתמש
יראה באותו הזמן). ברירת המחדל היא נתון אחד (יפתח חלון נשלף)
MULTIPLE – משתנה זה יקבע אם ניתן יהיה לבחור נתון אחד או יותר. למשתנה זה
אין ערך. אם הוא רשום ניתן יהיה לבחור יותר ממשתנה אחד.
לפקודת ה OPTION יש שני מאפיינים:
VALUE הערך שרשום במשתנה זה יועבר בצרוף שם השדה וכך תוכנית ה CGI תדע
איזה משתנה נבחר. ניתן לזהות איזה משתנה נבחר גם בלי ערך זה ולכן הוא לא חייב
להופיע.
SELECTED משתנה זה יקבע את הנתון כברירת מחדל, כלומר, הנתון יוצג מסומן
כברירת מחדל. למשתנה זה אין ערך.
דוגמה: בקרוב:
<SIZE=3 “שם משתנה”=SELECT NAME>
גרוע<OPTION>
בינוני<OPTION>
טוב<OPTION>
מצויין<OPTION SELECTED>
<SELECT/>
בדוגמה: בקרוב זו יפתח חלון גלילה בגודל שלוש שורות, (ישנם 4 משתנים ולכן ניתן יהיה
לגלול) כאשר ניתן יהיה לבחור רק אפשרות אחת, והאפשרות מצויין תהיה ברירת
המחדל.
פקודת ה – <INPUT > מאפשרת מספר שיטות להכנסת/בחירת נתונים.
סוג השיטה נקבע ע”י מאפיין ה – TYPE.
הכנסת שורת קלט:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה TYPE=”TEXT”) .TEXT)
בניגוד לפקודת ה TEXTAREA, פקודה זו מאפשרת הכנסה של שורת קלט אחת בלבד.
לפקודה זו יש מספר מאפיינים שעוזרים למשתמש לשלוט בנתוני שדה הקלט:
NAME – שמו של השדה יוצמד לתוכן השדה בזמן העברת הנתונים.
SIZE – מציין את רוחב אזור התצוגה (בתווים גודל ברירת המחדל הוא 20 תווים).
MAXLENGHT – מספר התווים המקסימאלי שיכול להכיל השדה. (לא קשור לגודל אזור
התצוגה)
VALUE – הטקסט שיוצג באזור התצוגה כברירת מחדל. (אם לא נשתמש במשתנה זה לא
יוכנס כברירת מחדל שום ערך)
דוגמה: בקרוב:
<“INPUT TYPE=”TEXT” NAME=”address” MAXLENGHT=”100″ SIZE=”30>
לשדה הקלט הזה קוראים address, מספר התווים שמוצגים על המסך הוא 30, מספר
התווים המקסימאלי שיכול להכיל המשתנה הוא 100.
הכנסת סיסמה:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה PASSWORD.
מאפייני השיטה הזו זהים למאפייני השיטה TEXT רק שבשיטה זו במקום לראות את
האותיות שהמשתמש מקליד, הוא יראה כוכביות.
הכנסת שדה שם קובץ: (מתאים רק ל NETSCAPE)
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה FILE.
גם מאפייני שיטה זו זהים למאפייני השיטה TEXT אך בשיטה זו המשתמש צריך
להכניס שם קובץ (במסלולו המלא) והדפדפן יודע לגשת אליו. בנוסף הדפדפן מוסיף
מצד ימין של שדה הקלט כפתור BROWES שמאפשר למשתמש לראות את תוכן
הכוננים ולבחור את הקובץ אליו הוא רוצה להגיע.
אפשרות בחירה של נתון אחד מבין מספר נתונים:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה RADIO.
על מנת שמספר לחצני בחירה יכללו באותה הקבוצה, ניתן להם את אותו השם. בצורה
זו המשתמש יוכל לבחור רק באחד מהלחצנים. במידה ולחצן אחד לחוץ והמשתמש יבחר
לחצן אחר, הלחצן שהיה מסומן “ייכבה” והלחצן החדש יסומן.
לפקודה זו יש מספר מאפיינים:
NAME – שמו של השדה יוצמד לתוכן השדה בזמן העברת הנתונים. (לכל הלחצנים
אותו השם)
VALUE – הערך שיועבר עם שם המשתנה במידה והלחצן ייבחר.
CHECKED – למאפיין זה אין ערכים והוא קובע איזה לחצן ישמש כברירת מחדל. רק
לחצן אחד יכול להיות מסומן במאפיין זה. במידה ואף לחצן לא יהיה מסומן
במאפיין זה, אף לחצן לא יהיה מסומן כברירת מחדל.
דוגמה: בקרוב:
גדול<INPUT TYPE=”RADIO” NAME=”pizza” CHECKED>
בינוני<“INPUT TYPE=”RADIO” NAME=”pizza>
קטן<“INPUT TYPE=”RADIO” NAME=”pizza>
בדוגמה: בקרוב זה נוכל את גודל הפיצה כשברירת המחדל היא גדול.
אפשרות בחירה של מספר נתונים:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה CHECKBOX.
בניגוד לפקודת ה RADIO, בפקודה זו כל לחצן עומד בפני עצמו (גם מקבל שם
שונה) והמשתמש יכול לבחור אם הוא רוצה לסמן אותו.
לפקודה זו יש מספר מאפיינים:
NAME – שמו של השדה יוצמד לתוכן השדה בזמן העברת הנתונים.
VALUE – הערך שיועבר עם שם המשתנה במידה והלחצן ייבחר.
CHECKED למאפיין זה אין ערך. במידה והוא יצורף לפקודה, מצב הלחצן יהיה
מסומן כברירת מחדל.
דוגמה: בקרוב:
קוקה קולה<INPUT TYPE=”CHECKBOX” NAME=”cola” CHECKED>
ספרייט<“INPUT TYPE=”CHECKBOX” NAME=”sprite>
מיים מינרלים<“INPUT TYPE=”CHECKBOX” NAME=”water>
בדוגמה: בקרוב זו ישנן 3 אופציות שהמשתמש יכול לבחור בכל אחת מהן. האופציה “קוקה
קולה” מסומנת כברירת מחדל ושתי האופציות האחרות לא מסומנות.
כפתור אתחול נתונים:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה RESET.
פקודה זו יוצרת כפתור שלחיצה עליו תחזיר את כל שדות הטופס לערכי ברירת
המחדל שלהם.
לפקודה זו יש רק את מאפיין ה VALUE שקובע את הטקסט שיהיה כתוב על הכפתור.
דוגמה: בקרוב:
<“לחץ כאן לאתחול כל שדות הנתונים”=INPUT TYPE=”RESET” VALUE>
כפתור שליחת הנתונים:
כדי להשתמש בשיטה זו ערך מאפיין ה TYPE יהיה SUBMIT.
פקודה זו יוצרת כפתור שלחיצה עליו תשלח את ערכי השדות של הטופס לכתובת ה
URL שכתובה במשתנה ה ACTION של ה FORM.
לפקודה זו יש רק את מאפיין ה VALUE שקובע את הטקסט שיהיה כתוב על הכפתור.
דוגמה: בקרוב:
<“לחץ כאן לשליחת הנתונים”=INPUT TYPE=”SUBMIT” VALUE>
טבלה
כל המידע לגבי הטבלה, וכן התוכן שלה, יופיעו בין התגים הללו:
<table>…….</table>
הפרמטרים הבאים יכולים להופיע בתג הפותח את הטבלה בלבד
<כלומר כולם יוגדרו בתוך התג ……..table>
קובע את קיום הקו התוחם את הטבלה, ואת עוביו. =border
אם אינו מוגדר – שווה ערכו ל 0
קובע את כמות ה”רווח הלבן” בין התוכן של =cellpadding
התא בטבלה (אם קיים), לבין קירות התא.
אם אינו מוגדר – שווה ערכו ל 1
קובע את המרווח בפיקסלים בין התאים בטבלה. =cellspacing
אם אינו מוגדר – שווה ערכו ל 2
קובע את רוחב הטבלה בפיקסלים, %|width=pixels
או את אחוז המרחב
שתתפוס הטבלה מסך כל רוחב חלון הדפדפן
קובע את גובה הטבלה בפיקסלים, %|height=pixels
או את אחוז המרחב
שתתפוס הטבלה מסך כל גובה חלון הדפדפן
הצמדת הטבלה כולה לימין או לשמאל align=left|right
הצמדת הטקסט בתוך הטבלה valign=left|right|center
לימין או לשמאל, או מרכוזו.
קובע את צבע הרקע לטבלה bgcolor=#rrggbb|color name
אם לא נקבע – רקע הטבלה
יהיה כצבעו של רקע הדף
קובע את צבע קווי הטבלה bordercolor=#rrggbb|color name
(מחייב הפעלת הפרמטר border)
קווי הטבלה הופכים תלת מימדיים, והצבע הבהיר bordercolorlight=#rrggbb|color name
מבין השניים המוגדרים בפרמטרים
bordercolor, bordercolorlight
יופעל כצילו של הצבע העיקרי בצורה אוטומטית
(מחייב הפעלת הפרמטר border)
מפעיל את אותו אפקט, אבל הופך את הצבעים bordercolordark=#rrggbb|color name
קובע תמונה שתוצג ברקע הטבלה “background=”URL of image
ללא גבולות חיצוניים לטבלה. frame=void
יוצגו גבולות עליונים בלבד. frame=above
גבולות תחתונים בלבד. frame=below
גבולות עליונים ותחתונים בלבד. frame=hsides
גבולות שמאליים בלבד. frame=lhs
גבולות ימניים בלבד. frame=rhs
גבולות שמאליים וימניים בלבד frame=vsides
קופסה תוחמת את הטבלה frame=box
*הפרמטר frame מחייב הפעלת הפרמטר border
ואינו נתמך ע”י נטסקייפ
תא בטבלה שפרמטר זה מאופשר בו, ימנע מחלון nowrap
הדפדפן להיות צר יותר מרוחב התא עצמו
ובכך תמנע “שבירת” הטקסט המוצג בו.
התג <tr> מצהיר על התחלת כל שורה חדשה בטבלה
יש לו כמה פרמטרים :
קובע היכן ימוקם הטקסט בתוך תאי השורה הנוכחית. align=left|right|center
אם אינו מוגדר – שווה ערכו ל left
קבע את צבע הרקע של השורה הנוכחית. אם אינו bgcolor=#rrbbgg|color name
מוגדר – שווה ערכו לערך שנקבע בתוך התג <table>
קובע את התמונה שתהווה רקע לשורה הנוכחית. “background=”URL of image
אם אינו מוגדר – תוצג התמונה שהוגדרה בתוך התג <table>
——————————————————————————–
התג <td> מצהיר על התחלת תא חדש בשורה
גם לו יכולים להיות פרמטרים שונים :
קובע את מיקום הטקסט בתוך התא. align=left|center|right
אם אינו מוגדר – הטקסט ימוקם לפי ההגדרה בתוך התג <tr>
קובע את רוחב התא בפיקסלים, או את אחוז המרחב %|width=pixels
שיתפוס התא מסך כל רוחב הטבלה
קובע את גובה התא בפיקסלים, או את אחוז המרחב %|height=pixels
שיתפוס התא מסך כל גובה הטבלה
מונע שבירת השורות בתוך התא nowrap
קובע אם רוחב התא ישתרע על פני כמה טורים colspan
קובע אם גובה התא ישתרע על פני כמה שורות rowspan
קובע את צבע הרקע של התא bgcolor=#ddbbgg|color name
אם לא נקבע – הצבע יהיה כפי שנקבע בתג <tr>
קובע תמונה שתוצג ברקע התא “background=”URL of image
אם לא נקבעה – תישאר התמונה שקבענו בתג <tr>
——————————————————————————–
התג <th> קובע תא מיוחד שהוא כותרת השורה או הטור
הפרמטרים שלו הם אותם פרמטרים כמו של התג <td>
כותרת הטבלה <caption>
הכותרת נכתבת למעשה מחוץ לטבלה והיא בעלת הפרמטרים:
התוצאה הקוד ב- HTML
הכותרת תוצג מעל הטבלה, ותוצמד לקצה הימני align=right
מעל הטבלה, בקצה השמאלי align=left
מעל הטבלה, במרכז align=center
מעל הטבלה, במרכז align=top
מתחת לטבלה, במרכז align=bottom
מתחת לטבלה, בצד ימין align=right valign=bottom
מתחת לטבלה, בצד שמאל align=left valign=bottom
<table bgcolor=white border=1 bordercolor=black>
<tr>
<td>
םיאת ינש תלעב הלבטל
<td/>
<td bgcolor=black>
<font color=yellow size=2>
תיסיסב המגוד
<td/>
<tr/>
<table/>
הטבלה הבאה תאפשר לכם להכיר את התכונות של colspan & rowspan.
<table border=5 cellspacing=1 cellpadding=2>
<tr align=center>
<td><td>2</td><td>3</td><td>4</td/>תא זה רוחבו כשל טור אחד<td>
<tr/>
<tr align=center>
<td><td>3</td><td>4</td/>תא זה הוא ברוחב שני טורים<td colspan=2>
<tr/>
<tr align=center>
<td><td>4</td/>תא זה הוא ברוחב שלושה טורים<td colspan=3>
<tr/>
<tr align=center>
<td/>תא זה הוא ברוחב 4 טורים<td colspan=4>
<tr/>
<tr align=center>
<td colspan=4 bgcolor=silver><hr size=3 width=300></td>
<tr/>
<tr align=center>
<td/>תא זה הוא בגובה 2 שורות<td>1</td><td rowspan=2>
<td/>תא זה הוא בגובה 3 שורות<td rowspan=3>
<td/>תא זה הוא בגובה 4 שורות<td rowspan=4>
<tr/>
<tr align=center>
<td>1</td>
<tr/>
<tr align=center>
<td>1</td><td>2</td>
<tr/>
<tr align=center>
<td>1</td><td>2</td><td>3</td>
<tr/>
<table/> |
