Html2

‫‪[email protected]‬‬

‫ניר אדר‬ ‫גירסה ‪9.1.2005 – 2.00‬‬ ‫גירסה ‪26.7.2006 – 2.01‬‬

‫שפת ‪ - HTML‬חלק שני‬ ‫ניר אדר‬

‫מסמך זה הורד מהאתר ‪.http://underwar.co.il‬‬ ‫אין להפיץ מסמך זה במדיה כלשהי‪ ,‬ללא אישור מפורש מאת המחבר‪.‬‬ ‫מחבר המסמך איננו אחראי לכל נזק‪ ,‬ישיר או עקיף‪ ,‬שיגרם עקב השימוש במידע המופיע במסמך‪ ,‬וכן‬ ‫לנכונות התוכן של הנושאים המופיעים במסמך‪ .‬עם זאת‪ ,‬המחבר עשה את מירב המאמצים כדי לספק את‬ ‫המידע המדויק והמלא ביותר‪.‬‬ ‫כל הזכויות שמורות לניר אדר‬ ‫‪Nir Adar‬‬ ‫‪Email: [email protected]‬‬ ‫‪Home Page: http://underwar.co.il‬‬ ‫אנא שלחו תיקונים והערות אל המחבר‪.‬‬

‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-1-‬‬

‫‪[email protected]‬‬

‫ניר אדר‬

‫תוכן עניינים‬ ‫תוכן עניינים‪2....................................................................................................................................‬‬ ‫קישורים‪3.........................................................................................................................................‬‬ ‫אלמנטים נוספים שניתן לשלב בדף‪7......................................................................................................‬‬ ‫‪7..........................................................................................................................................................‬‬ ‫תמונות‬ ‫‪8.........................................................................................................................................................‬‬ ‫רשימות‬ ‫עיצוב הדף ‪ -‬המשך ‪10.........................................................................................................................‬‬ ‫‪10...............................................................................................................‬‬ ‫מאפיינים נוספים של תג ה‪BODY-‬‬ ‫‪12.......................................................................................................................................................‬‬ ‫רשימות‬ ‫‪13.........................................................................................................................................‬‬ ‫מאפיינים נוספים‬ ‫טבלאות‪14........................................................................................................................................‬‬ ‫‪14....................................................................................................................................................‬‬ ‫מוטיבציה‬ ‫‪17................................................................................................................................‬‬ ‫יצירת טבלאות ‪ -‬תחביר‬ ‫‪( FRAMES‬מסגרות)‪20......................................................................................................................‬‬ ‫‪20..............................................................................................................................................‬‬ ‫יצירת ‪FRAMES‬‬ ‫‪23........................................................................................................................................‬‬ ‫קישור בין ‪FRAMES‬‬

‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-2-‬‬

[email protected]

‫ניר אדר‬

‫קישורים‬ ‫ סימון מילים בקו‬,‫ הדגשת מילים‬,‫ הגדרת צבעים‬:‫בשיעור הקודם למדנו פעולות עיצוב בסיסי על דף‬ .‫ למדנו כיצד לקחת טקסט ולעצב אותו כדף שיכול להופיע באינטרנט‬.'‫וכדו‬ ‫ אתרי אינטרנט מורכבים בדרך כלל ממספר דפים המקושרים‬.‫ כתבנו דף בודד בלבד‬,‫ עד כה‬,‫אולם‬ .‫ביניהם‬ .‫ נלמד כיצד לקשר בין דפים שונים‬,‫לפני שנמשיך ללמוד דרכים נוספות כיצד לעצב דף בודד‬ file1.html, file2.html ‫ וניקרא להם‬,‫ ניצור שלושה דפים‬,‫כדי להדגים את תהליך הקישור‬ ‫ יימצא בתת‬file3.html ‫ ואילו‬,‫ ימוקמו באותה ספרייה‬file2.html-‫ ו‬file1.html ‫ הקבצים‬.file3.html-‫ו‬ .my ‫ספריה בשם‬

file1.html <TITLE>Welcome to page 1 This is file 1
After a little change, if you will click here, you will jump to page 2.


file2.html <TITLE>Welcome to page 2 This is file 2
After a little change, if you will click here, you will jump to page 3.
my\file3.html UnderWarrior Project

http://underwar.livedns.co.il -3-

[email protected]

‫ניר אדר‬

<TITLE>Welcome to page 3 This is file 3


:‫ ונדגים את השימוש בתג‬file1.html ‫ נשנה את‬.>A HREF< ‫קישור בין דפים שונים נעשה על ידי התג‬ file1.html <TITLE>Welcome to page 1 This is file 1
After a little change, if you will click here, you will jump to page 2.
:‫כך‬

UnderWarrior Project

‫התוצאה תיראה‬

http://underwar.livedns.co.il -4-

‫‪[email protected]‬‬

‫ניר אדר‬

‫נשים לב לפקודה שכתבנו‪:‬‬ ‫>‪hereA‬לתג ה<‪ >A/‬הופיע‬ ‫בצבע כחול עם קו מתחתיו – קישור‪ .‬כאשר נלחץ על קישור זה‪ ,‬נעבור אל הכתובת שהוגדרה בתוך תג‬ ‫ה‪.HREF-‬‬ ‫נניח שהקבצים ‪ page1.html‬ו‪ page2.html-‬נמצאים בכונן ‪ D‬בספריה ‪.html‬‬ ‫היינו יכולים לכתוב את הקוד עבור הקישור גם כך‪:‬‬ ‫>‪here‪here
‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-5-‬‬

‫‪[email protected]‬‬

‫ניר אדר‬

‫הפתרון הנכון‪:‬‬ ‫‪file2.html‬‬ ‫>‪‪‪<TITLE>Welcome to page 2‪‪‪This is file 2here, you will‬‬ ‫>‪jump to page 3.‪‪‪Yahoo‪Yahoo
‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-6-‬‬

‫‪[email protected]‬‬

‫ניר אדר‬

‫אלמנטים נוספים שניתן לשלב בדף‬

‫תמונות‬ ‫מלבד טקסט וקישורים‪ ,‬נוכל לשלב בדף גם תמונות‪ .‬שילוב תמונה נעשה בעזרת התג <‪."‪
‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-7-‬‬

‫‪[email protected]‬‬

‫ניר אדר‬

‫רשימות‬ ‫אלמנט נוסף שניתן לשלב בדף הוא רשימות‪ .‬רשימות הינן פרטי טקסט‪ ,‬המחולקים לפי פריטים‪.‬‬ ‫ניתן ליצור רשימות ממוספרות ורשימות לא ממוספרות בדפים שלנו‪.‬‬ ‫דוגמא לרשימה ממוספרת‪:‬‬ ‫‪1. Banana‬‬ ‫‪2. Apple‬‬ ‫‪3. Coca Cola‬‬ ‫דוגמא לרשימה לא ממוספרת‪:‬‬ ‫‪•1 An element‬‬ ‫‪•2 Another element‬‬ ‫‪•3 The last element‬‬

‫על מנת להתחיל רשימה ממוספרת‪ ,‬נשתמש בתגית <‪ .>OL‬על מנת לסיים את הגדרת הרשימה נשתמש‬ ‫בתגית <‪ .>OL/‬פריט ברשימה מתחיל בתגית <‪ >LI‬ומסתיים <‪ .>LI/‬לדוגמא‪:‬‬ ‫>‪Choose your destiny:‪‪

Page 1‪

Page 2‪
‫‪UnderWarrior Project‬‬

‫‪http://underwar.livedns.co.il‬‬ ‫‪-8-‬‬

[email protected]

‫ניר אדר‬

.

ומסתיימת ב‬UL<-‫רשימה לא ממוספרת מתחילה ב‬ .
• ומסתיים‬LI< : ‫פריט ברשימה לא ממוספרת מתחיל כך‬ :‫דוגמא‬
  • First Item
  • Second Item
  • Third Item
  
  
  : ‫והתוצאה‬ •1 First Item •2 Second Item •3 Third Item
  
  UnderWarrior Project
  
  http://underwar.livedns.co.il -9-
  
  ‫‪[email protected]‬‬
  
  ‫ניר אדר‬
  
  ‫עיצוב הדף ‪ -‬המשך‬ ‫להרבה תגים בשפת ‪ HTML‬ניתן להוסיף מאפיינים שונים‪ ,‬על מנת לקבל אפקטים מגוונים‪ .‬מעט‬ ‫מאפיינים כבר ראינו‪ ,‬כאשר השתמשנו בתוך ה‪ BODY-‬במאפיינים שאפשרו לנו לקבוע את צבע הכתב‪,‬‬ ‫צבע הרקע וכדו'‪ .‬פרק זה יציג מאפיינים נוספים בתגים אותם ראינו במסמך זה ובמסמך הקודם לו‬ ‫בסדרה‪.‬‬
  
  ‫מאפיינים נוספים של תג ה‪BODY -‬‬ ‫התג הראשון עליו נרחיב הוא ‪.BODY‬‬ ‫במסמך הקודם ראינו את הפרמטרים ‪ TEXT, BGCOLOR‬ו‪ ,LINK-‬הקובעים את צבע הטקסט‪ ,‬צבע‬ ‫הרקע וצבע הקישורים בהתאמה‪.‬‬ ‫פרמטרים נוספים שניתן לשים הם‪:‬‬ ‫•‪ - VLINK‬צבע הקישורים אשר בכתובת שלהם כבר ביקרנו‪.‬‬ ‫•‪ - ALINK‬צבע הקישורים בזמן הלחיצה עליהם‪.‬‬ ‫•‪ - BACKGROUND‬תמונה שתהיה רקע לדף הנוכחי‪.‬‬ ‫הדוגמא הבאה תבהיר את השימוש בתגיות אלו‪:‬‬ ‫>‪‪‪<TITLE>Background‪”‪This text is in pink...‪This text is in red...‪This text is in purple...‪This text is in blue...‪This text is in green...‪This text is in yellow...‪This text is in beige...
  ‫‪http://underwar.livedns.co.il‬‬ ‫‪-10-‬‬
  
  ‫‪[email protected]‬‬
  
  ‫ניר אדר‬
  
  ‫>‪This text is in white...‪‪This is link‪This is a visited link‪‪‪‪
  ‫התמונה ‪ jpg.282‬נטענה בתור תמונת רקע‪.‬‬ ‫לאחר מכן כתבנו מספר שורות בצבעים שונים‪ ,‬ולאחר מכן שמנו שני קישורים‪.‬‬ ‫בגלל שהגדרנו את צבע הקישורים כצהוב‪ ,‬הקישור הראשון הוא בצבע צהוב‪ .‬הקישור השני הוא בצבע‬ ‫וורוד מכיוון שקודם לכן ביקרנו באתר ‪ hotmail.com‬אליו מקשר קישור זה‪.‬‬
  
  ‫‪UnderWarrior Project‬‬
  
  ‫‪http://underwar.livedns.co.il‬‬ ‫‪-11-‬‬
  
  [email protected]
  
  ‫ניר אדר‬
  
  ‫רשימות‬ :‫נביט בדוגמא הבאה‬ <TITLE>Lists
  1. Item 1
  2. Item 2
  3. Item 3
  .OL ‫הדוגמא מראה מאפיינים חדשים של התג‬ .‫" אומר שאנו רוצים שהשיטה בה יוצגו המספרים היא בצורת ספרות יווניות‬TYPE = "I ‫המאפיין‬ .1 ‫" פירושו שהמספר ההתחלתי יהיה‬START ="1 ‫המאפיין‬
  
  UnderWarrior Project
  
  http://underwar.livedns.co.il -12-
  
  ‫‪[email protected]‬‬
  
  ‫ניר אדר‬
  
  ‫מאפיינים נוספים‬ ‫ניתן לקבוע את צבע הקו שיווצר בעזרת התג ‪ .HR‬נשתמש בפרמטר ‪:COLOR‬‬ ‫>"‪

  ---

  . ומסתימת ב‬TR< ‫ שורה מתחילה בתג‬.>TD/<-‫> ומסתיים ב‬TD<-‫תא של טבלה מתחיל ב‬ :‫נביט כעת בדוגמא מלאה של טבלה‬ UnderWarrior Project
  
  http://underwar.livedns.co.il -17-
  
  [email protected]
  
  ‫ניר אדר‬
  
  

  	center text
  		right text

  
  
  UnderWarrior Project
  
  http://underwar.livedns.co.il -18-
  
  [email protected]
  
  ‫ניר אדר‬
  
  :‫התוצאה תהיה‬ center text right text
  
  .‫ שקובע את יישור הטקסט באותה שורה‬ALIGN ‫> הגדרנו את המאפיין‬TR< ‫נשים לב כי בתוך התג‬
  
  UnderWarrior Project
  
  http://underwar.livedns.co.il -19-
  
  ‫‪[email protected]‬‬
  
  ‫ניר אדר‬
  
  ‫‪( Frames‬מסגרות)‬ ‫הנושא האחרון במסמך זה הוא ‪ Frames. Frames‬זוהי הרחבה במובן מסוים של רעיון הטבלאות‪.‬‬ ‫‪ Frames‬מאפשרים לך לחלק את הדף למספר חלקים שונים‪ ,‬שאחד החלקים יכול להשתנות בלי קשר‬ ‫לחלקים האחרים‪.‬‬ ‫יש לציין כי השימוש ב‪ frames-‬הולך ונעלם מהעולם‪ .‬בעבר השימוש ב‪ frames-‬היה מקובל מאוד‬ ‫לעיצוב וסידור המידע באתרים‪ .‬כיום הגישה היא להשתמש בטבלאות על מנת לעצב את האתר‪ .‬הסיבות‬ ‫לנטישת ה‪ frames-‬הן גרימה לחוסר התאמה של האתר למנועי חיפוש‪ ,‬פגיעה באפשרות המשתמש‬ ‫לקשר לדף מסוים באתר ועוד‪ .‬מצד שני – עבור המתכנת – קל לשלוט על אתר בו קיימים חלקים קבועים‬ ‫וחלקים משתנים (לדוגמא – תפריט קבוע ותוכן משתנה) על ידי שימוש ב‪.frames-‬‬ ‫כל הדוגמאות שקשורות ל‪ Frames-‬מורכבות ממספר קבצים‪.‬‬ ‫אנו עובדים עם מספר "חלונות" שונים‪ ,‬המציגים קבצי ‪ HTML‬שונים בכל אחד מהם‪.‬‬
  
  ‫יצירת ‪frames‬‬ ‫נתחיל מדוגמא פשוטה‪ ,‬המורכבת משלושה קבצים‪:‬‬ ‫‪Frames.html‬‬ ‫>‪‪‪<TITLE>My Pages‪ "* ‪ ‫ נמצאים באותה ספריה כמו‬welcome.html -‫ ו‬logo.html, Pindex.html ‫נצא מתוך הנחה שהקבצים‬ :‫ התוצאה תראה כך‬.Frames-‫הקובץ המכיל את ה‬
  
  logo.html
  
  welcome.html
  
  Pindex.html
  
  UnderWarrior Project
  
  http://underwar.livedns.co.il -22-
  
  ‫‪[email protected]‬‬
  
  ‫ניר אדר‬
  
  ‫נשים לב למספר דברים החדשים בדוגמא‪:‬‬ ‫•נשים לב לחלוקה של ‪ Frame‬לתת ‪ Frames -‬שמופיעה בקוד זה‪ Frameset :‬אחד מופיע‬ ‫בתוך ‪ Frameset‬שני‪ .‬חילקנו למעשה את הדף ל‪ -2‬חלקים‪ ,‬ואז חילקנו את אחד החלקים‬ ‫הנ"ל לשני חלקי משנה‪.‬‬ ‫•מספר מאפיינים חדשים‪:‬‬ ‫‪o‬המאפיין ‪ ROWS‬מגדיר חלוקה בכיוון מאוזן של החלון‪.‬‬ ‫‪o‬המאפיין ‪ BORDERCOLOR‬קובע את צבע המסגרת‪.‬‬ ‫‪o‬המאפיין ‪ NORESIZE‬קובע שאי אפשר לשנות את גודל המסגרת‪.‬‬
  
  ‫קישור בין ‪frames‬‬ ‫לאחר שלמדנו לבנות ‪ ,Frames‬ולחלק את האתר שלנו למספר חלקים שונים שאינם קשורים אחד לשני‪,‬‬ ‫נרצה ליצור קישורים בין המסגרות השונות‪ .‬כלומר‪ ,‬שכאשר נלחץ על קישור במסגרת אחת‪ ,‬ישתנה‬ ‫‪ Frame‬אחר לכתובת הקישור עליו לחצנו‪.‬‬ ‫כבר ביצירת המסגרות‪ ,‬הגדרנו מסמך התחלתי שייכנס למסגרת‪ ,‬בתג ‪ .Frame‬הכרנו את פרמטר‬ ‫ה‪ SRC-‬ששימוש למטרה זו‪:‬‬
  
  ‫> "‪ "‪Free Email Service

‫ יכנס עמוד הפתיחה של‬,Free Email Service ‫ כאשר ילחץ הגולש באתר על הקישור‬: ‫התוצאה‬ .main ‫ ששמה‬Frame-‫ לתוך ה‬Hotmail .‫ על מנת להבין בצורה מלאה את הנושא‬,‫מומלץ להקליד את הקוד הנ"ל ולראות אותו בפעולה‬

UnderWarrior Project

http://underwar.livedns.co.il -24-