בשיעור הקודם למדנו על טקסט, איך כותבים טקסט ב html ואיך מעצבים אותו, ולמדנו מספר דברים חשובים שכדאי לדעת בhtml, והיום נלמד על קישורים

מה נלמד היום?

1. html שפת תכנות או עיצוב?
2. קישור מהו?
3. איך יוצרים קישורים לדפים אחרים באתר שלי?
4. איך יוצרים קישורים לאתרי אינטרנט אחרים?
5. מהו עוגן ואיך יוצרים אותו?

Html שפת תכנות או עיצוב?
בשיעורים הקודמים עשיתי טעות והגדרתי את html כשפת עיצוב ולא כשפת תכנות, שזו טעות חלקית כי Html היא לא שפת תכנות ולא שפת עיצוב, שפת תכנות היא שפה שמתכנתת את מה שאנחנו יוצרים בhtml או לפעמים מה שאנחנו יוצרים בשפת התכנות, זאת אומרת אם אנחנו יוצרים טופס הרשמה בhtml אז הטופס עצמו עם התיבות טקסט של ה שם משתמש וסיסמא נוצר ב Html ולעומת זאת לתכנת אותו כך שישלח לטבלה שיצרנו בשביל זה מתוכנת על ידי שפת תכנות כמו לדוגמא php, asp וכו'....
מצד שני שפת html היא גם לא שפת עיצוב מכיוון שאתה גם לא מעצב בה ממש, זאת אומרת שיש בה אפשרויות עיצוב (שדרך אגב לאט לאט הולכות ונעלמות ככל שמתפתח ה html ) אבל ב html אתה לא יכול לעצב כל מה שתרצה, אלא רק מספר דברים בודדים, בשביל עיצוב מושקע ובשביל תבנית עיצוב משתמשים בשפות עיצוב כגון css.
אז מהו html? Html היא שפת תמליל בשפה הזאת אנחנו בעצם מחליטים מה אנחנו נציג בדף, ולאחר מכן בעזרת שפות אחרות מתכנתים את הדברים האלו להיות אטרקטיביים ומעצבים אותם יפה.

קישור מהו?
ההיפרקישור (hyperlink ) או בקיצור קישור (link) כשמו כן הוא מקשר בין דפים או בין מקומות בדף, קישור יכול להיות בין דפים באתר שלך, בין אתרי אינטרנט שלא קשורים אחד לשני, ואפילו בין מקום אחד בדף למקום אחר, את כל אלה נלמד היום בשיעור שלנו, הקישור הוא אם חושבים על זה התכנות היחיד ב html, הוא הדבר האטרקטיבי שבאמת עושה משהו ולא סתם נראה לעין היחיד ב html, קישור יכול לבוא בתור תמונה, בתור טקסט או בכל דרך יצירתית שתחשבו עליה.

איך יוצרים קישורים לדפים אחרים באתר שלי?
הגענו לחלק שמאוד ישמש אותכם בהכנת האתר שלכם אם כמה שהוא פשוט, אז קבלו בתופים ובמחולות את הקישורים בין הדפים באתר שלכם.
נתחיל מזה שבשביל פישוט העניין כל התמונות של האתר שלכם וכל הדפים באתר שלכם יהיו באותה התיקייה (התיקייה שפתחנו ממש בתחילת השיעור הראשון אם אתם זוכרים), כדי שיהיה לכם יותר נוח לקשר בין הדפים באתר שלכם. ועכשיו בשביל לקשר תחילה אנחנו צריכים שני דפים חדשים לאתר שלכם.

ועכשיו נסו בעצמכם: כתבו שני דפי html פשוטים שלאחד קוראים try ובו כתוב hello world ולשני קוראים try2 ובו כתוב my name is asaf (שוב אפשר לשנות את השם כמובן). עכשיו אני לא כותב לכם איך זה אמור לצאת, בתור מתכנתים מתחילים אתם אמורים כבר לדעת לעשות את זה, ואם אתם עדיין לא יודעים לעשות את זה לבד חיזרו לשני המאמרים הקודמים ותדעו את זה טוב טוב ובעל פה (ובלי להציץ במאמרים הקודמים) ואז חיזרו לכאן!

המבנה של קישור בין הדפים שלכם הוא כזה (אני מקשר מ try ל try2):

קוד:
<a href="try2.htm">go to try2</a>
A מסמל על קישור href אומר לאן אנחנו מקשרים, ואז אחריו כותבים שווה ובתוך גרשיים את הדף שאליו אנחנו רוצים לקשר אם הדף לא נמצא באותה התיקייה אנחנו צריכים לעשות את כל הדרך עד לתיקייה הזאת מהמחשב שלי, לדוגמא אם הדף נמצא בתיקייה asaf שנמצאת בכונן c והדף נמצא במקום אחר אז אנחנו צריכים לכתוב:

קוד:
<a href="my computer/c:/asaf/try2.htm">go to try2</a>
ואם try2 נמצא בתוך תיקייה שנמצאת בתוך התיקייה של try אז אפשר פשוט לכתוב את שם התיקייה הפנימית (או כל התיקיות הפנימיות עד שמגיעים אל הקובץ) ואז את שם הקובץ, לדוגמא אם הקובץ try נמצא בתיקייה asaf והקובץ try2 נמצא בתוך התיקייה atarim שבתוך התיקייה asaf אז הקישור יהיה כך:

קוד:
<a href="atarim/try2.htm">go to try2</a>
כפי ששמתם לב אנחנו סוגרים את הקישור בתגית הסוגרת:
קוד:
</a>
ולמה זה? כי Href הוא מאפיין בתוך התגית a (אם אתם לא יודעים מה הוא מאפיין חיזרו לשיעור הקודם וקראו עוד בנושא).
בין התגית הסוגרת לתגית הפותחת נמצא מה שהאנשים רואים באתר ועליו לוחצים בשביל להגיע לאן שאתם קישרתם אותם, זה יכול להיות תמונה (שעל אפשרות זו נלמד בשיעור הבא) וזה יכול להיות כמו במקרה כאן טקסט פשוט, הטקסט בקישור יהיה תמיד בצבע כחול עם פס מתחתיו אלא אם כן תשנו את זה בעזרת שפת עיצוב, אבל כרגע אל תתעסקו עם זה תשאירו את זה כך.
חשוב לציין שחובה לכתוב את הסיומת לאחר השם של הקובץ (כמו במקרה הזה try2.htm זה כדי שהדפדפן יידע לאיזה סוג קובץ אתם מתכוונים, אם זה תמונה אם זה קובץ php או קובץ מוסיקה או וידאו וכו'....

ועכשיו נסו בעצמכם: כנסו לדף try שברגע זה פתחתם רדו שורה (ב html כמובן לא באנטר) מתחת לHello world וקשרו את הדף לדף try2 שפתחתם, הקישור יהיה טקסט שבו כתוב the link.

הקוד שיצרתם אמור להיראות כך:
קוד:
<html>
<head>
<title>
Try
</title>
</head>

<body>
Hello world
<a href="try2.htm"> the link</a>
</body>
</html>
איך יוצרים קישורים לאתרי אינטרנט אחרים?
קישורים לאתרי אינטרנט אחרים מאוד דומים לקישורים בין הדפים באתר האינטרנט שלך, ההבדל היחיד הוא שבמקום שם הדף רושמים את כתובת האתר לדוגמא בקישור הבא אני שולח אתכם לפורום בטטה:

קוד:
<a href="http://www.ba***************">batata's forum</a>
חשוב מאוד לציין שחובה לשים את כתובת האתר בתוך גרשיים, וחובה לכתוב את הקידומת: http:// לפני כל אתר (זה גם מה שכתוב בכתובת המקורית באינטרנט כמובן).



מהו עוגן ואיך יוצרים אותו?

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

יצירה של עוגן היא פשוטה, ואני אראה איך יוצרים עוגן כאן אבל לא אדגים, תוכלו לנסות בעצמכם כשיהיה לכם דף יותר ארוך, או אם אתם רוצים לכתוב המון המון פעמים <br> באתר שלכם ואז לשים את העוגן אחרי כולם!
הקוד לעוגן, כלומר המקום שאליו נגיע כאשר נלחץ על הקישור הוא: (כמובן תוכלו לכתוב במקום Ogen כל שם אבל תזכרו אותו כי תצטרכו להשתמש בו)

קוד:
<a name="ogen">my text</a>
והקוד של הקישור שמפנה אותך לעוגן שקבעת הוא:

קוד:
<a href="#ogen">my ogen</a>
זה לא משנה כפי שכתבתי כבר מה אתם כותבים אחרי הname בעוגן אבל אתם חייבים לזכור אותו כי תצטרכו לכתוב את זה לאחר מכן בקישור לעוגן עם הסימן # שמסמל לדפדפן שזהו קישור לעוגן!

אתם יכולים כמובן לכתוב קישור לעוגן בדף אחד, ולקשר אותו לדף אחד, אבל לא לתחילת הדף כמו לקישור רגיל, אלא לכל מקום אחר בדף, לדוגמא לאמצע הדף, את זה עושים עם אותו קוד של עוגן בדף אחד, אבל הקוד של הקישור יהיה:

קוד:
<a href="try2.htm#ogen">my ogen to try2</a>
חשוב לציין שאי אפשר לרשום שני עוגנים בעלי אותו שם מכיוון שאז הדפדפן לא יידע לאיזה עוגן לשלוח איזה קישור, ולכן אם יש מספר עוגנים שימו אותם בשמות אחרים (עדיף בכלל שבאתר לא יהיה עוגנים אם אותו שם, כי גם אם אתם עושים עוגן מדף אחד לדף אחר אז בשני הדפים אסור שיהיו עוד עוגנים אם אותו השם)

לסיכום:
היום בשיעור למדנו המון אודות קישורים, איך לקשר בכל מיני צורות לכל מיני מקומות החכמנו קצת ולמדנו גם איזה מין שפה היא html.

בשיעור הבא:
בשיעור הבא נלמד על רקעים ותמונות, וכן נלמד לעשות קישורים בעזרת התמונות.

מקווה שנהניתם מהשיעור ולהתראות בשיעור הבא
אסף לוי

כל הזכויות שמורות לאסף לוי, אין להעתיק את המידע ללא אישור מפורש בכתב ממני