בפרקים הקודמים למדנו כיצד לעצב ולסגנן דף אינטרנט. בחלק זה של המדריך הבסיסי ל-HTML נלמד כיצד להוסיף קישורים ומדיה לדף האינטרנט שלנו
כאשר אנו מתבוננים בדף אינטרנט טיפוסי, ניתן להבחין מיד שהוא מלא בקישורים לדפים אחרים, או קישורים פנימיים לדפים אחרים בדף עצמו.
כמו כן, ניתן להבחין כי קיימים לעתים קטעי מולטימדיה באתר כגון תמונות, תמונות מונפשות, סרטונים, קטעי קול וכו'.
במאמר זה נלמד כיצד להוסיף קישורים ומדיה לדף האינטרנט שלנו.
Hyperlink – קישור HTML
קישורים מכילים כתובת של יעד אחר, למשל לחלק אחר באותו הדף, לדף אחר באותו האתר, לדף באתר אחר ועוד.
למשל אם תלחצו כאן תועברו לפרק הקודם של המדריך, או אם תלחצו כאן תעברו לאתר עכשיו בטכנולוגיה.
התגית <a> היא תגית הקישורים, כאשר המאפיין href (ראשי תיבות: Hypertext Reference) נועד ליצור קישורים המפנים ליעד אחר.
על מנת ליצור קישור פנימי פשוט נציין בכתובת הקישור את שם העמוד, לקישור חיצוני – נציין את כתובת האתר שאליו נרצה ליצור לינק.
במאפיין "target="blank נוכל להשתמש על מנת לפתוח קישור בלשונית חדשה.
שימו לב לדוגמא הבאה:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
</p>
</body>
</html>
תפריט ניווט הוא מעין "פס" אופקי או אנכי שיש בו קישורים לדפי האתר העיקריים.
אנו זקוקים לקישורים על מנת שנוכל לארגן את האתר בכמה דפים מחולקים לקטגוריות ולקשר ביניהם בקלות ובצורה מסודרת אשר נתפסת כסטנדרט על ידי המשתמש.
הוספת תמונות לדף האינטרנט שלנו
- התגית img (ראשי תיבות: Image) משמשת להוספת תמונה לדף אינטרנט.
- במאפיין src (ראשי תיבות: source) נשתמש על מנת לציין את מקור התמונה.
- המאפיין alt (קיצור של המילה: Alternative) משמש למקרה שיש תקלה בטעינת התמונה, אז יוצג למשתמש טקסט אלטרנטיבי.
- נוכל להשתמש ב-style על מנת לשלוט בגובה וברוחב, לשם כך קיימים המאפיינים height ו-width שלהם ניתן ערכים לפי פיקסלים (px) או אחוזים.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1>this is an example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example of link, click <a href="https://www.technow.co.il">here</a>
<br/>
<br/>
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
</p>
</body>
</html>
שימו תמונה משלכם באותה התיקייה של דף האינטרנט ונסו להוסיף אותה בקוד שלכם על מנת לקבל תוצאה דומה:
הצגת תמונה כקישור
כפי שראינו, אלמנטים מסוימים יכולים להכיל אלמנטים אחרים.
נוכל למשל להציג תמונה כקישור:
this is my image:
<br/>
<br/>
<a href="https://www.g4a.co.il/">
<img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
</a>
<br/>
כלומר שאם נלחץ על התמונה נעבור לקישור שהגדרנו בשורה 15.
הוספת וידאו ואודיו לדף האינטרנט שלנו
נוכל להוסיף לדף האינטרנט שלנו וידאו באמצעות התגית Video.
נגדיר בתגית עצמה רוחב וגובה שהסרטון יתפוס. width="500" height="300".
אם תרצו שהסרטון יופיע במרכז המסך תוכלו להשתמש בתגית center.
כמו כן נוסיף את הפקדים של השליטה בסרטון: עצירה, הגברת והנמכת ווליום והורדה באמצעות הפקודה controls.
בפנים נרשום ב-source את הנתיב שבו נמצא קובץ הווידאו שלנו. וב-type נרשום "video/mp4" שזה סוג הפורמט של הווידאו.
בנוסף, הוספנו עוד הגדרה מעניינת autoplay כדי לגרום לסרטון להתנגן ישר עם ההגעה לדף ללא צורך בהפעלה ידנית.
<h1><u>Video</u></h1> <video width="1280" height="720" controls autoplay> <source src="https://www.g4a.co.il/wp-content/uploads/2022/06/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> </video>
כמו שעשינו עם ווידאו גם כאן נרשום ב-source את הנתיב שבו נמצא קובץ השמע שלנו.
ב-type נרשום את הפורמט "audio/mpeg" שזהו הפורמט המייצג את קבצי השמע ו-Mp3.
<h1><u>Audio</u></h1> <audio controls> <source src="https://www.g4a.co.il/wp-content/uploads/2022/06/file_example_OOG_1MG.ogg" type="audio/mpeg"> </audio>
ניתן להאזין לקובץ השמע דרך הנגן:
הצורה הוויזואלית של הנגן היא דיפולטיבית כפי שתוכלו לראות כאן.
קבצי SVG
SVG הם ראשי תיבות של הביטוי Scalable Vector Graphics שבתרגום חופשי מבטא "גרפיקה מבוססת וקטורים הניתנים להרחבה".
ראשית יש להקדים מהו ווקטור?
ווקטור זה קטע ישר בעל אורך מסוים המועבר מנקודה נתונה בכיוון מסוים במרחב האוקלידי (אוסף נקודות שהווקטור עובר דרכן מנקודה לנקודה).
זוהי בעצם מעין ישות מתמטית בעלת גודל מוגדר וכיוון תנועה מנקודה לנקודה.
כמו שניתן לראות בצורה פשוטה בתמונה הבאה:
ההבדל הפשוט בין תמונה רגילה ל-SVG הוא שתמונה מורכבת מכמות Data מוגדרת של פיקסלים ולכן ברגע שאנו נגדיל את התמונה יתר על המידה אנחנו נראה את התמונה כבר מטושטשת עם איכות ירודה יותר. ומה הסיבה לכך?
המחשב שלנו מנסה להציג כמות Data זהה על פני רזולוציה גבוהה יותר ללא כל שינוי ועדכון של ה-Data ולכן איכות התמונה נפגמת.
יתרונות השימוש ב-SVG:
- ניתן ליצור ולערוך קבצי SVG עם כל עורך טקסט שקיים.
- את קבצי SVG ניתן למצוא בחיפוש, להשתמש כאינדקס או כסקריפט וכן לדחוס, בצורה קלה.
- תמונות SVG ניתנות להרחבה (ניתן להגדילן בזום) והן שומרות על איכות גבוהה בכל רזולוציה, ללא אובדן איכות.
כעת נשתמש בתגית המוגדרת ל-SVG וניצור מספר צורות מעניינות: עיגול, מלבן ומגן דוד.
כדי ליצור עיגול נשתמש בתגית של SVG ובתוכה בתגית המתאימה לעיגול: circle.
בתוך התגית נגדיר את המאפיינים של העיגול: cx ו-cy מציינים את נקודת המיקום של ציר ה-x וציר ה-y של מרכז העיגול ו-r את גודל הרדיוס שלו.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="pink" stroke-width="4" fill="blue" /> </svg>
כדי ליצור מלבן נשתמש בתגית rect:
<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg>
את המגן דוד שבנוי מ-2 משולשים אחד ישר ואחד הפוך ניצור באמצעות התגית polygon (מצולע).
התגית מציינת את מיקום הקודקודים של המצולע (כזוגות סדורים, ללא סוגריים) ומחברת אותם לפי סדר כתיבתם, ולבסוף, מחברת את נקודת הסוף (הנקודה האחרונה) אל נקודת ההתחלה הנקודה הראשונה.
כאן למשל, כדי להציג מגן דוד המורכב מ-2 משולשים נצטרך לציין 6 קואורדינטות.
לציון כל קודקוד זוג מספרים המציינים את הגדרת המיקום בציר x ובציר ה-y ולכן כדי להציג כל משולש (המורכב תמיד מ-3 קודקודים) נצטרך לרשום 6 נקודות מיקום.
<svg withd="250" height="310"> <polygon points="170,90 90,250 250,250" style="fill:none;stroke: rgb(67, 12, 233); stroke-width:10;"></polygon> <polygon points="250,130 170,300 100,130" style="fill:none;stroke: rgb(21, 105, 214); stroke-width:10;"></polygon> </svg>
ולסיום הלוגו של האתר כקובץ SVG שהקוד מאחוריו הרבה יותר מסובך – ראו כאן.
בחלק הבא של המדריך נלמד על התגית iframe.
