אתי בר - לימוד html

הדרכה מקצועית
ויחס אישי

דף הבית

פרופיל

קורסים

חוגים לילדים

קישורים

סוגי אתרים

ממליצים

טיפים

דרושים

פורום

צרו קשר

לימוד html

קבצים להורדה

דף html ריק

דף עם טבלה של 2 עמודות

דף עם טבלה של 3 עמודות

דף עם טבלה של שורת תפריט עליון

word

מערך השיעורים לבניית אתר ב- Html

שיעור שלישי

קישורים links

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

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

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

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

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

קישור לכתובת דואר אלקטרוני 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 =“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 בטבלה פנימית

אתי בר - הדרכה ותוכנה

[דף הבית] [פרופיל] [קורסים] [חוגים לילדים] [קישורים] [סוגי אתרים] [ממליצים] [דרושים] [טיפים] [פורום ] [צרו קשר]

לפרטים etibar@atartov.com