קישורים ותמונות הם שניים מהמשאבים הנפוצים ביותר שתוסיף לדפי האינטרנט שלך, לכן חשוב לדעת כיצד לטפל בהם בצורה נכונה.
קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.
כל אתר צריך להפנות למשאבים מסוימים, בין אם הם תמונות, קבצים או דפי אינטרנט אחרים. ההחלטה כיצד לקשר לקבצים אחרים חשובה ביותר כדי להבטיח שדפדפנים מאתרים אותם בצורה נכונה.
אתה יכול לקשר למשאבים באמצעות כתובת URL יחסית או מוחלטת. זה חל הן על קבצים מקומיים במחשב והן על כתובות URL מבוססות פרוטוקול שאליהם ניתן לגשת דרך האינטרנט.
כיצד להשתמש בנתיב URL מוחלט
כתובת URL מוחלטת מכילה את כל הנתיב למיקום קובץ מסוים. דוגמאות לכך כוללות את הנתיב המלא לקבצים במחשב שלך:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
דוגמה נוספת כוללת כתובת URL מלאה של פרוטוקול, שבה אתה יכול להשתמש כדי לזהות משאב לשליחה דרך האינטרנט. לרוב, אלה מתחילים ב-"https" או "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
כתובת האתר המוחלטת מכילה את כל המידע הנדרש כדי לאתר את הקובץ או המשאב שאליו אתה מנסה לגשת. זה נדרש אם אתה מקשר לאתר חיצוני.
- בניית אתר פשוט ב-HTML על ידי יצירת תיקיה חדשה והוספת שני קבצים חדשים בשם index.html ו styles.css.
- ב index.html, הוסף קוד HTML כדי ליצור אתר בסיסי:
<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<כותרת> האתר שלי </title>
<מטא תווים ="UTF-8">
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1">
<קישור rel="גיליון סגנונות" href="styles.css" />
</head>
<גוּף>
<div class="מְכוֹלָה">
<h1> האתר שלי </h1>
<ע> ברוך הבא לאתר האינטרנט שלי. </p>
</div>
</body>
</html> - ב styles.css, הוסף קצת סטיילינג לדף האינטרנט.
גוף {
משפחת גופנים: Arial, Helvetica, sans-serif;
}.מְכוֹלָה {
תצוגה: flex;
flex-direction: עמודה;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - ב index.html, הוסף תג בתוך ה-container div, והוסף את כתובת האתר המוחלטת לאתר הראשי של גוגל ( https://www.google.com).
<a href="https://www.google.com" class="mb28">Google.com</א> - אתה יכול גם לגשת לתמונות באופן מקוון באמצעות הנתיב המוחלט המלא לקובץ המאוחסן. אתה יכול גם לנקוט בצעדים נוספים כדי להבטיח שהוספת תמונות רספונסיביות ל-HTML שלך עמוד אינטרנט.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&אוטומטי=פורמט&להתאים = לחתוך&w=3870&q=80" alt="תמונת ציפור חמודה" class="mb28" רוחב="900" גובה="600"> - הקלק על ה index.html קובץ כדי לפתוח אותו בדפדפן ולהציג את התמונה שאוחזרה ממיקומה החיצוני.
- מתיקיית השורש של האתר שלך, צור תיקיה חדשה לאחסון תמונות, הנקראת תמונות. בתוך התיקיה, הוסף תמונה חדשה ותן לה שם, כגון CuteBird.jpg.
- זהה את הנתיב המוחלט לקובץ התמונה שזה עתה הוספת. אתה יכול לעשות זאת על ידי מציאתו בנתיב הניווט של אפליקציית מנהל הקבצים של מערכת ההפעלה שלך. תצטרך גם להוסיף את שם הקובץ לסוף הנתיב. לדוגמה, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- ב index.html, החלף את תג התמונה שלך בתמונה חדשה המשתמשת בנתיב המוחלט המצביע אל CuteBird.jpg קובץ המאוחסן במחשב שלך. זכור להוסיף את הקידומת file:// כדי לציין משאב של מערכת קבצים מקומית. ב-Unix וב-macOS, לאחר מכן תוכל להוסיף את הנתיב המוחלט שזיהית בשלב הקודם. ב-Windows, יהיה עליך להחליף לוכסן אחורי באלכסון קדימה ולהוסיף לוכסן קדימה לפני אות הכונן, לדוגמה:
- הקלק על ה index.html קובץ כדי לפתוח אותו בדפדפן ולהציג את התמונה המאוחסנת במחשב שלך.
כיצד להשתמש בנתיב URL יחסי
כתובת URL יחסית מאחסנת רק חלק מכתובת האתר או הנתיב, ובדרך כלל היא יחסית למיקום הקובץ או הקטע הנוכחי של אתר אינטרנט.
בדוגמה לעיל, כדי לגשת Logo.ico מ index.html באמצעות כתובת URL יחסית, תשתמש בנתיב "Images/Icons/Logo.ico". דוגמאות אחרות כוללות:
- Pages/Bird1.html
- Images/CuteBird.jpg
- styles.css
כאשר אתה משתמש באותו מבנה תיקיות במחשב אחר, האתר עדיין יוכל לאחזר את הקובץ. בעת ניתוב דרך האינטרנט, במקום להשתמש בקישור המלא כגון " https://example.com/about", אתה יכול להשתמש בניתוב יחסי במקום זאת:
- /about
- /contact
- /projects/local-clients
אתה יכול להשתמש בכתובת URL יחסית כדי ליצור קישורים או להתייחס לתמונות בתוך דף האינטרנט שלך ב-HTML.
- בתוך השורש של ספריית האתר שלך, צור תיקיה חדשה בשם דפים.
- בתוך תיקיית הדפים החדשה, צור קובץ חדש בשם Bird1.html.
- לְאַכלֵס Bird1.html עם קוד HTML כדי ליצור את הדף.
<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<כותרת> ציפור 1 </title>
<מטא תווים ="UTF-8">
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1">
<קישור rel="גיליון סגנונות" href="../styles.css" />
</head>
<גוּף>
<div class="מְכוֹלָה">
<h1> קפה </h1>
<ע> קפה הוא ציפור מתוקה שאוהבת למשחק! </p>
</div>
</body>
</html> - בתוך ה-container div, הוסף תג תמונה והשתמש בכתובת URL יחסית כדי לקשר אל CuteBird.jpg תמונה.
<img src="../Images/CuteBird.jpg" alt="תמונת ציפור חמודה" class="mb28" רוחב="900" גובה="700"> - בתוך ה index.html קובץ, הסר את התוכן הקיים בתוך ה-container div. החלף אותו בסינגל א תג שמשתמש בקישור יחסי כדי לפתוח את Bird1.html קוֹבֶץ.
<div class="מְכוֹלָה">
<h1> האתר שלי </h1>
<ע> ברוך הבא לאתר האינטרנט שלי. </p>
<a href="Pages/Bird1.html" class="mb28">ציפור 1: קפה</א>
</div> - הקלק על ה index.html קובץ כדי לפתוח אותו בדפדפן, ולחץ על הקישור החדש כדי לנווט אליו Bird1.html.
כעת אתה יכול לקבוע את ההבדל בין כתובות URL מוחלטות ויחסיות. כעת אתה יכול לנקוט משנה זהירות כדי להבטיח שהמשאבים שלך תמיד יאושפו.
כמו כן, עליך לוודא תמיד שכל הקישורים שהמשתמשים שלך יכולים לגשת אליהם בטוחים ומאובטחים.
