העוגן באתר שימושי מאוד אם תרצו שהמאמרים באתר שלכם יעברו מעבר נוח בין פריטי הרשימה. הם הופכים את הדף לנקודה הרצויה או פותחים את הדף הרצוי, ועוזרים למשתמש למצוא במהירות את המידע הדרוש לו.
אם אתה כותב אתר משלך, היית צריך לחשוב כיצד להפוך את הניווט באתר שלך לנוח יותר. כדי שהמשתמש לא יצטרך לחפש את המידע הדרוש לו בין כל דפי האתר שלך, עדיף להשתמש בטכניקת "עוגן". זה ייצור קישור לכל מידע או מסמך בכל מקום באתר שלך.
תֵאוֹרִיָה
כדי ליצור עוגן, אתה צריך שני אלמנטים:
- החלק של הקוד, המציין את הקישור לעוגן שלנו, נותר בחלק אחר של האתר.
- כל חלק מהקוד בו ניתן לציין מזהה הוא העוגן שלנו.
ראשית עליך ליצור את החלק הראשון של העוגן - קישור אליו. לקישור עוגן שני חלקים: קישור לדף וקישור עוגן.
- צור תג "a" או כל תג אחר התומך במאפיין "href"
- בתג זה צור את התכונה "href"
- ציין קישור לדף האתר בערך התכונה.
- לאחר הקישור, ציין את הקישור לעוגן באמצעות סמל "#" וכל שם לעוגן (כתוב יחד, למשל: "# עוגן")
אם תדלג על נקודה 3 ולא תציין קישור לדף האתר, תחפש את העוגן בדף הנוכחי. כלומר, אם ברצונכם ליצור קישור לעוגן הנמצא באותו עמוד, תוכלו להשמיט את הקישור לדף עצמו.
נותר ליצור את החלק השני של העוגן - המזהה. הכוונה היא לכל תג בקוד האתר התומך במאפיין id. כדי ליצור עוגן, אתה צריך:
- צור מאפיין "מזהה" בתג הנדרש.
- במאפיין "id", ציין את הערך של שם העוגן שצוין בשלב הקודם. (דוגמא:)
לאחר שני השלבים הללו מופיע קישור באתר שייקח אתכם לעוגן שצוין.
תרגול
בואו ניקח בחשבון כיצד ליצור עוגן בעזרת דוגמה ספציפית.
יש לנו דף פשוט כזה:
יש לנו טקסט בחלק העליון והתחתון של הדף, הרבה תגי "br" שיוצרים רווח בין הטקסטים. עלינו ליצור עוגן כדי שנוכל להסתכל במהירות על הטקסט בתחתית.
לשם כך יש ליצור תג חדש - "a" אחרי הכיתוב "טקסט למעלה". בה אנו יוצרים את התכונה "href". כדי להפוך את העוגן לנוח יותר, נכתוב "למטה" בקישור.
כעת אנו מציינים את הערך "#yakor" במאפיין - זה יהיה קישור לשם העוגן.
החלק הראשון של העוגן - הקישור אליו - מוכן. כעת נותר רק ליצור את העוגן עצמו. אנו עוברים לחלק הרצוי של הדף. במקרה זה מדובר ב"טקסט בתחתית ". מכיוון שמדובר בטקסט פשוט ללא תג, עלינו ליצור אותו. לשם כך, צרף את הטקסט ב"פסקה "- תג" p ".
בתג זה אנו יוצרים את התכונה "id" ומכניסים לתוכה את הערך "yakor". הערך "yakor" תואם את שם העוגן שצוין בקישור.
עכשיו העוגן שלנו עובד כמו שצריך.
