[שיעור מס' 4] HTML

[-Smoxer-]

הקדמה

בשיעור הקודם למדנו מספר דברים:

• איך להפוך את הדף לעברית.
• כותרות (<h1> - <h6>).
• קו חוצץ (<hr />).
• ירידת שורה (<br />).
• שילוב בין CSS ל-HTML עם התג <span>.
• פקודות עיצוב ב-CSS.
• איך לעשות רשימות עם תבליטים ורשימות ממוספרות.

תמונה אחת שווה אלף מילים - הוספת תמונה
עד עכשיו עשינו רק מלל, מלל ומלל.
אם נרצה לגוון עם תמונה?

זה ממש פשוט! נשתמש בתג <img> (אין תג סוגר) בתבנית הבאה:

<img src="The source" alt="The Alt" />

התבנית פשוטה:

<img

אומר שזוהי תמונה.

src="The source"

אומר מאיפה נמצאת התמונה, במקום The source נרשום את מיקום התמונה.

alt="The Alt"

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

בוא נעשה דוגמה, בוא נוסיף תמונה לאתר. ניקח לדוגמה את התמונה הזאת:

אם נכנס לפה דרך הדפדפן נראה רק תמונה בצד שמאל.

בשביל להוסיף את התמונה נרשום כך ע"פ התבנית:

<img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="iatraf.co.il" />

ומה זה יציג?
נעשה דוגמה, נרשום כך:

<img src="http://www.iatra.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="iatraf.co.il" />

אם שמתם לב בקישור לתמונה (src) רשמנו לינק שבור:

http://www.iatra.co.il

חסרה f בסוף, במקרה כזה מאפיין ה-alt יבוא לעזרתנו ויציג את המלל iatraf.co.il (מוזמנים לנסות ולראות מה קורה).

עד כה הוספנו תמונות מוכנות, לא תמונות שלנו.
אם אני רוצה לעשות תמונה ולשים אותה באתר?
זה ממש פשוט, ניקח תמונה. לדוגמה נקרא לתמונה "MyPic.png" (שימו לב לפורמט).
נשים את התמונה בתיקייה שבוא נמצא הקובץ HTML שלנו וב-src נרשום כך:

<img src="MyPic.png" alt="My Pic!" />

נפתח דרך הדפדפן, ומה יצא?

צריך לרשום את שם התמונה "MyPic", נקודה "." ואז את שם הפורמט "png". ברור שזה יכול להשתנות, תלוי בתמונות.

אם אנחנו רוצים להיות יותר מסודרים ולהוסיף תיקייה רק של תמונות, נגיד שקוראים לתיקייה "images" ושם נמצאת התמונה שלנו.
נגדיר את זה כך:

<img src="images/MyPic.png" alt="My Pic!" />

שמתם לב מה הוספתי?
הוספתי לפני שם התמונה את שם התיקייה (images) וסלאש ( / ) שאומר שזה נמצא בתוך התיקייה.

שימו לב
אם קראתם לתמונה A.png, אתם לא יכולים "לקרוא" לה "a.png" בשרתים מסויימים התמונה תחשב כלא נמצאה. אז עדיף לרשום את השם במדויק.


ברור?

רשימה לפורמטים(png וכ'ו) הנפוצים ביותר:

• jpg, jpeg - שניהם אותו דבר, זה לא משנה
• gif
• bmp - רק לבעלי ווינדוס
• pcx
• tift
• dib
• eps
• tga

תזכרו - בגלל של-img אין תג סוגר אז אנחנו רושמים לפני הסגירה את הסלאש ( / )!

הגדרת אורך ורוחב לתמונה
יש לכם תמונה, אלה מה? היא גדולה מידי! (או קטנה מידי) ואתם רוצים לשנות את זה לגודל מסויים.
בשביל זה יש את המאפיינים width ו-height, נשים אותם בקוד כך:

<img src="Source" alt="ALT" width="Image Width" height="Image Height" />

נראה לי שמובן לא?

אפסר לרשום בשדות אך ורק מספרים, וערך מספר. כלומר יחידות מידה.
היחידות מידה שאפשר לשים:

• px - פיקסלים, אורך(או רחב) מדויקים.
• cm - סנטימטרים, אורך(או רחב) מדויקים.
• % - אחוז, כמה מאורך(או רוחב) הדפדפן.

אז פשר לרשום כך:

<img src="images/MyPic.png" alt="My pic!" width="200px" height="200px" />

יעשה את התמונה 200 על 200 פיקסלים.

פשוט לא?

הוספת קישורים לאתר
עד כה, יש לנו תמונות. מלל יפה.
אבל מה עם קישורים? יש לנו רק דף אחד!

בשביל לעשות קישור, נצטרך להשתמש בתגית <a> (יש תג סוגר)
נשתמש בה כך:

<a href="http://www.SomeWebsite.com">webSite</a>

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

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

לדוגמה קישור שייכנס לגוגל:

<a href="https://www.google.co.il/">Google</a>

ויקיפדיה:

<a href="http://he.wikipedia.org/wiki/%D7%A2%D7%9E%D7%95%D7%93_%D7%A8%D7%90%D7%A9%D7%99">wikipedia</a>

אטרף:

<a href="http://www.iatraf.co.il/">Atraf</a>

נראה לי שברור

נעשה דוגמה, ניצור עוד קובץ HTML נקרא לו "test.html" (כמו שעשינו בשיעור הראשון).
נשים אותו בתיקייה של הקובץ הראשי וניצור בקובץ הראשי קישור אליו.
בשביל זה נרשום כך:

<a href="test.html">test</a>

די ברור לא?

אותו דבר אפשר גם בתמונות, לדוגמה נעשה קישור לתמונה כך:

<a href="images/MyPic.png">MyPic</a>

ואם נלחץ נגיע לתמונה!

הוספת קישור לתמונה

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

אם נלחץ על התמונה נגיע לאטרף ^
זה פשוט מאוד בשביל זה נרשום כך:

<a href="http://www.iatraf.co.il"><img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="atraf" /></a>

ברור?


קישור למייל
כנראה שאם אתם גולשים הרבה באינטרנט, רציתם לראות איך עושים קישור למייל, לדוגמה זה:
Mail@explame.com
אם תלחצו זה יפתח את ה-Outlook Express.
בשביל דבר כזה נכתוב:

<a href="mailto: Mail@explame.com">My Mail</a>

רשמנו בקישור "mailto:" ואחרי זה כתובת המייל.
זה פשוט אומר לפתוח את האימייל על הכתובת שבחרנו.
פשוט מאוד

טריק נחמד
אולי לא תשתמשו בזה הרבה, אבל כמו שעשינו שליחה למייל, אפשר גם עם סקייפ:

<a href="Skype: UserName">Skype</a>

וזה יתקשר למנוי "UserName"
תוצאה:
skype: UserName

הפעם אין שיעורי בית!

לשיעור הקודם - שיעור מס' 3 לחצו כאן.
שאלות על HTML ו-CSS בפורום שפות צד לקוח.

[זוהר]

אחלה הסבר, למרות שכבר ידעתי! חבל שאין שיעורים זה היה מעביר לי את הזמן

[toorbo]

אחלה הסבר, למרות שכבר ידעתי! חבל שאין שיעורים זה היה מעביר לי את הזמן

+1 ולדעתי האמייל לא ממש חיוני לא משתמשים בזה וגם הסקייפ חח אבל אחלה שיעור חבר שאין שיעורי בית

[-Smoxer-]

+1 ולדעתי האמייל לא ממש חיוני לא משתמשים בזה וגם הסקייפ חח אבל אחלה שיעור חבר שאין שיעורי בית

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

תודה על הפרגון!

[toorbo]

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

תודה על הפרגון!

סתם שאלה יש לך אתר משלך ? אם כן אתה יכול לפרסם אותו ?

ואמייל לדעתי לא חיוני כי כמעט אף אחד לא משתמש בזה יותר נוח לשלוח מהאתר של האמייל GMAIL NANA WALLA YAHOO וכו' .. הסקייפ כמעט ואף פעם לא ראיתי באתרים או שלא שמתי לב חחח שיעור 5 יהיה מחר ?

[-Smoxer-]

סתם שאלה יש לך אתר משלך ? אם כן אתה יכול לפרסם אותו ?

ואמייל לדעתי לא חיוני כי כמעט אף אחד לא משתמש בזה יותר נוח לשלוח מהאתר של האמייל GMAIL NANA WALLA YAHOO וכו' .. הסקייפ כמעט ואף פעם לא ראיתי באתרים או שלא שמתי לב חחח שיעור 5 יהיה מחר ?

כן, יש לי אתרים משלי שבניתי לעסקים.
אך לא אוכל לפרסם אותם.

[toorbo]

כן, יש לי אתרים משלי שבניתי לעסקים.
אך לא אוכל לפרסם אותם.

אה חח תודה רבה מחכה לשיעור החמישי

[Mr. Bean]

אני מתקדם

[LikeANoob]

שיעור טוב .
ועצה
כל שיעור תעשה שיעורי בית ככה אפשר ללמוד הרבה יותר
תגיד להנהלה (:

[ExcluSive]

אחלה שיעור עמרי!
יש לי שאלה, בקוד פה:

<a href="http://www.iatraf.co.il"><img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="atraf" /></a>

למה לא רשמת >Atraf< אחרי ששמת את הקישור של אטרף?

[-Smoxer-]

אחלה שיעור עמרי!
יש לי שאלה, בקוד פה:

למה לא רשמת >Atraf< אחרי ששמת את הקישור של אטרף?

במקום לרשום סתם מלל שמתי תמונה, תריץ את הסקריפט תראה מה ייצא.

למי שמתעניין יצא שיעור חמישי.

[men25]

תודה

[.Ferrari]

במקום לרשום סתם מלל שמתי תמונה, תריץ את הסקריפט תראה מה ייצא.

למי שמתעניין יצא שיעור חמישי.

אהבתי את הקטע של הסקייפ
יש עוד כאלה למשל MSN וכו?

[-Smoxer-]

אהבתי את הקטע של הסקייפ
יש עוד כאלה למשל MSN וכו?

כן. רק צריך לרשום את הפרוטוקול.

[גלוש123]

מדריך מעולה.