שעור שלישי

קישורים links

הוספת קישור:
התג <a> (עוגן –
 anchor) מציין הפנייה לקישור לאתר
אחר, לדף אחר, לקובץ, לתמונה, למוסיקה, לוידאו וכו’.

<a href=”url”>קישור לאתר</a>

המאפיין
href (hypertext reference) משמש לציון כתובת האתר או
הקובץ שאליו נקושר.
הטקסט שיופיע בין התג <a> הפותח לבין התג
</a> הסוגר, הוא הטקסט שיופיע בדף (באתר).
ברירת המחדל היא, שהטקסט יופיע בצבע שונה ועם קו תחתון.

  • רשום בכתובת ה-
    url את הכתובת המלאה של האתר אליו אתה
    רוצה לקשר (מה-http://www וכו’).

  • אם ברצונך לקשר לדף מהאתר
    שלך, אין צורך לרשום את הכתובת המלאה (http וכו’), אלא, רק את שם
    הקובץ (שם קובץ ה-html של הדף). יש לדאוג לכך שקיבצי ה-html ישבו
    באותה תיקיה.

קישור לאתר בחלון חדש
המאפיין
target מציין את החלון שבו יפתח דף הקישור.
_blank מציין שהדף יפתח בחלון חדש.

<a href=”lastpage.htm” target=”_blank“>Last
Page</a>

קישור לכתובת דואר אלקטרוני
Email:
יש לרשום את המילה mailto:
ואחריה את כתובת הדואר האלקטרוני, אליה רוצים לקשר, אחרי כן רושמים
?subject= (סימן שאלה) ואת נושא המכתב.
בשדה העליון “טקסט שיוצג”, רשום את הטקסט שברצונך להציג בדף האינטרנט
שלך.

<a href=”mailto:ploni@gmail.com?subject=Lesson”>Email
</a>

קישור פנימי (סימניות)
סימניה היא קישור לקטע תוכן הנמצא באותו דף.
המאפיין name משמש לציון שם היעד של
הקישור.
ניתן ליצור קישור המפנה אל השם שהגדרנו והוא יביא את הגולש לקטע המתאים
בדף.

<a name=“tips“>טיפים</a>

בכדי לקשר אל הסימנייה
tips נרשום את התג href
ונוסיף את הסימן # לפני שם הסימנייה :

<a href=“#tips”>אל הטיפים</a>

יצירת קישור מתמונה
במקום טקסט נרשום את התג <img> לתמונה.

<a href=”page.htm”> <img
src=”button.gif”> </a>

קישור לקובץ תמונה

<a href =“photo.jpg”> לתמונה 
</a>

קישור לוידאו או קובץ
מוסיקה

<a href =”film.wav” > click
here </a>

 

קביעת צבעים להיפר-קישור

ניתן להגדיר את מאפייני הצבע של הקישורים. הגדרות אלה נרשמות
כמאפיינים בתג <body> והן חלות על כל
הדף. המאפיינים הם:

1. המאפיין link המציין
את צבע הטקסט של הקישור.
2. המאפיין vlink  (visited
link) מציין את צבע הטקסט של הקישור לאחר
הפעולה (לאחר שביקרת בקישור).
3. המאפיין alink (active link) מציין את צבע הקישור בזמן הפעולה (כאשר היד
מופיעה).

<body link=”#800000″ vlink=”#FFFF00″ alink=”#00FF00″>

טבלאות

מומלץ להכניס את תוכן הדף לתוך טבלאות, לצורך אירגון הטקסט והתמונות בדף.
את גבולות הטבלה יש להפוך לשקופים.

יצירת טבלה

התג <table> מציין פתיחת טבלה,
</table> סוגר את הטבלה.
התג <tr> מציין פתיחת שורה בטבלה,
</tr> סוגר את השורה.
כל שורה מחולקת לעמודות. התג <td>
מציין פתיחת עמודה בטבלה,
  </td> סוגר את העמודה. העמודה יכולה להכיל
טקסט, תמונות, רשימות, פיסקאות, טבלה פנימית וכו’.

לדוגמה, הגדרת
טבלה של שתי שורות ושתי עמודות:

<table border=”1″>
<tr>
<td>עמודה 1 בשורה 1</td>
<td>עמודה 2 בשורה 2</td>
</tr>
<tr>
<td>עמודה 1 בשורה 2</td>
<td>עמודה 2 בשורה 2</td>
</tr>
</table>

התוצאה שנקבל היא:
 

עמודה 1 בשורה 1 עמודה 2 בשורה 1
עמודה 1 בשורה 2 עמודה 2 בשורה 2

מאפייני טבלה

  • המאפיין border שבתג
    <table>     מציין את עובי גבול המסגרת
    לטבלה . border=0 מציין שהטבלה
    תהיה ללא גבולות. אם לא צויין המאפיין border
    ברירת המחדל תהיה 1.
  • המאפיין bordercolor מציין את
    צבע המסגרת.
  • המאפיין bgcolor מציין את צבע
    הרקע לטבלה. (אפשר לרשום מאפיין זה גם בעמודה או בשורה).
  • המאפיין background מאפשר הצגת תמונת רקע לטבלה.
  • המאפיינים width ו-
    height מציינים את גובה ורוחב
    הטבלה. ניתן לציין באחוזים.
  • המאפיין align מציין את מיקום הטבלה ביחס לטקסט שמסביבה right או left.
  • המאפיין cellpadding מציין את
    הרווח בפיקסלים, מסביב לכל עמודה.
  • המאפיין cellspacing 
    מציין את הרווח בפיקסלים, בין העמודות.

ניתן לאפיין כל שורה או תא בנפרד.
רוב המאפיינים של התגים
<tr> ו-
<td> זהים למאפייני הטבלה. אם לא נרשם המאפיין, התג יקבל
את תכונות המאפיין של הטבלה.

מאפיינים הייחודיים לתא:

nowrap – לא מאפשר שבירת שורות
בתא.

valign – ישור אנכי של
הטקסט בתא top, middle, bottom, baseline.

align – ישור אופקי של הטקסט בתא
right, left, center.

colspan – מיזוג תאים. תאים המשתרעים על יותר מתא אחד.

מיזוג של שני תאים
  תא 1        תא 2    

 

 <tr>
   
<td
colspan=2 >
         
מיזוג של שני תאים

   
</td>

</tr>
<tr>
 

rowspan – מיזוג שורות. שורות
המשתרעות על יותר משורה אחת.

 

מיזוג של שתי
שורות		   שורה 1 
   שורה 2

 

<tr>
   
<td
rowspan=2 >
         
מיזוג של שתי שורות

   
</td>

</tr>

טבלה מקוננת

ניתן ליצור טבלה
מקוננת. – טבלה בתוך טבלה. הטבלה תוגדר בתחום העמודה החיצונית. יש
לדאוג לסגירת הטבלה הפנימית לפני סגירת העמודה החיצונית.

<table border=2
bordercolor=blue>
<tr>
<td>עמודה 1 בטבלה חיצונית</td>
<td>
<table border=2 bordercolor=red>
<tr>
<td> עמודה 1 בטבלה פנימית </td>
<td>עמודה 2 בטבלה פנימית</td>
</tr>
</table>
</td>
</tr>
</table>

עמודה 1 בטבלה חיצונית
עמודה 1 בטבלה פנימית עמודה 2 בטבלה פנימית

חזרה לראש הדף

לשעור הבא