קישורים ותמונות

חלק מאוד אינטגרלי באתרי אינטרנט הוא תמונות וקישורים, הם המרכיבים העיקריים בכל אתר אינטרנט ובלעדים לא יהיה ניתן לקשר לדפים שונים באתר. כך למשל אם יש לכם שני קבצי HTML ואתם מעוניינים לקשר בין אחד לשני אז הדרך היחידה לעשות זאת היא בעזרת לינק, תג <a> או תמונה עם תג ה-<img>.

יצירת קישורים

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

בקישור יש שני אלמנטים חשובים המילה המקשרת שלה אנחנו נקרא Anchor שזה ה"עוגן"מילה שעליה ילחצו והיא תוביל את המשתמש לדף אחר באתר או מחוץ לאתר. החלק השני הוא הכתובת שאליה אנחנו רוצים לקשר או אתר או דף אינטרנט אצלנו. וזה נכנס באפשרות של href="link" הלינק יהיה במילה "link", כשתראו את הדוגמא תבינו את זה טוב יותר.

דוגמא לקוד:

<a href="http://www.webmasters.co.il">אתר מדריכי בניית אתרים</a>

הקוד הבא יניב תוצאה פשוטה, המילה "אתר מדריכי בניית אתרים" יתפקד כקישור אל האתר שלנו (עלינו לרשום http:// וגם www כדאי כדי ליצור את הקישור.

אם נרצה לקשר לתת דף באתר נכתוב כך:

<a href="http://www.webmasters.co.il/contact.php" title="דף יצירת קשר">דף יצירת קשר</a>

שימו לב שכאן הוספנו את האפשרות "title" ובה כתבנו "דף יצירת קשר" (בדומה ללינק) זה אומר שכאשר המשתמש ירחף עם הסמן של העכבר מעל הלינק אז זה הטקסט שיופיע לו בחלון קטן מעל לטקסט.

* את הקישורים ניתן לעצב עם אלמנטים שראינו במדריכים קודמים באתר. למשל תג <b> או <u> ועוד, אתם מוזמנים לנסות.

הצגת תמונות

בכדי להציג תמונה יש צורך בכתובת מלאה לתמונה וסוג התמונה, הסוגים הנפוצים הם gif/jpeg/png. הנה דוגמא לקוד תגית של תמונה:

<img src="http://www.webmasters.co.il/uploads/html-design-text.gif" alt="תאור התמונה">

תוכלו לראות שהתחלנו את התג img ואז התחלנו עם src="" שבתוכנו אנחנו מכניסים את הכתובת של התמונה שבסופה סיומת gif. אבל מה, בנוסף יש לנו את ה-alt שלו הגדרנו את המילים "תאור התמונה" וזה מה שהוא עושה. כאשר הגולש ירחף עם הסמן של העכבר על התמונה אז הוא יראה ריבוע עם הטקסט שמתאר את התמונה.

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

		<img src="http://www.webmasters.co.il/uploads/html-design-text.gif" alt="תאור התמונה" height="100px" width="100px">

כפי שתראו הוספנו בסוף התג IMG גם גובה וגם רוחב שהם 100 פיקסלים (PX), ותוכלו להתנסות ולראות שהתמונה אכן יוצאת מעוותת.

שילוב של שניהם

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

		<a href="http://www.webmasters.co.il/contact.php" title="דף יצירת קשר">
			<img src="http://www.webmasters.co.il/uploads/html-design-text.gif" alt="תאור התמונה" height="100px" width="100px">
		</a>

קודם כל אנחנו מתחילים בתג a ואז מכניסים לערך href את הכתובת שאליה אנחנו רוצים להפנות. אבל, ופה מגיע ההבדל במקום טקסט בין שני תגי ה-a אנחנו נכתוב קוד של תמונה. ולבסוף נסגור בעזרת תג ה-a עם סלאש.

אם תנסו ללחוץ על התמונה היא תתפקד כקישור!

יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!