קהילות פורומים, הורדות, יעוץ ותמיכה


  • בית ספר לתכנות, שיעור 4 - HTML


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

    זה ממש פשוט! נשתמש בתג <img> (אין תג סוגר) בתבנית הבאה:
    קוד HTML:
    <img src="The source" alt="The Alt" />
    התבנית פשוטה:
    <img
    אומר שזוהי תמונה.
    src="The source"
    אומר מאיפה נמצאת התמונה, במקום The source נרשום את מיקום התמונה.
    alt="The Alt"
    זהו מאפיין חשוב (נוסף חובה בתקנים האחרונים), צריך להוסיף לכל תמונה את המאפיין הזה אם התמונה לא נמצאה.
    כלומר אם התמונה לא נמצאה אז זה יציג מה שכתוב.

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

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

    בשביל להוסיף את התמונה נרשום כך ע"פ התבנית:
    קוד HTML:
    <img src="http://www.iatraf.co.il/attachment.php?attachmentid=13682&d=1349026594" alt="iatraf.co.il" />
    ומה זה יציג?
    נעשה דוגמה, נרשום כך:
    קוד HTML:
    <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 נרשום כך:
    קוד HTML:
    <img src="MyPic.png" alt="My Pic!" />
    נפתח דרך הדפדפן, ומה יצא?

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

    אם אנחנו רוצים להיות יותר מסודרים ולהוסיף תיקייה רק של תמונות, נגיד שקוראים לתיקייה "images" ושם נמצאת התמונה שלנו.
    נגדיר את זה כך:
    קוד HTML:
    <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, נשים אותם בקוד כך:
    קוד HTML:
    <img src="Source" alt="ALT" width="Image Width" height="Image Height" />
    נראה לי שמובן לא?

    אפסר לרשום בשדות אך ורק מספרים, וערך מספר. כלומר יחידות מידה.
    היחידות מידה שאפשר לשים:
    • px - פיקסלים, אורך(או רחב) מדויקים.
    • cm - סנטימטרים, אורך(או רחב) מדויקים.
    • % - אחוז, כמה מאורך(או רוחב) הדפדפן.
    אז פשר לרשום כך:
    קוד HTML:
    <img src="images/MyPic.png" alt="My pic!" width="200px" height="200px" />
    יעשה את התמונה 200 על 200 פיקסלים.

    פשוט לא?

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

    בשביל לעשות קישור, נצטרך להשתמש בתגית <a> (יש תג סוגר)
    נשתמש בה כך:
    קוד HTML:
    <a href="http://www.SomeWebsite.com">webSite</a>
    כפי ששמתם לב, href מראה את לאן לקשר.
    בין שני התגים יוצג המלל, מה שילחצו עליו וזה ייכנס.

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

    לדוגמה קישור שייכנס לגוגל:
    קוד HTML:
    <a href="https://www.google.co.il/">Google</a>
    ויקיפדיה:
    קוד HTML:
    <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>
    אטרף:
    קוד HTML:
    <a href="http://www.iatraf.co.il/">Atraf</a>
    נראה לי שברור

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

    אותו דבר אפשר גם בתמונות, לדוגמה נעשה קישור לתמונה כך:
    קוד HTML:
    <a href="images/MyPic.png">MyPic</a>
    ואם נלחץ נגיע לתמונה!

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

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

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

    קוד HTML:
    <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.
    בשביל דבר כזה נכתוב:
    קוד HTML:
    <a href="mailto: Mail@explame.com">My Mail</a>
    רשמנו בקישור "mailto:" ואחרי זה כתובת המייל.
    זה פשוט אומר לפתוח את האימייל על הכתובת שבחרנו.
    פשוט מאוד

    טריק נחמד
    אולי לא תשתמשו בזה הרבה, אבל כמו שעשינו שליחה למייל, אפשר גם עם סקייפ:
    קוד HTML:
    <a href="Skype: UserName">Skype</a>
    וזה יתקשר למנוי "UserName"
    תוצאה:
    skype: UserName

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

    לשיעור הקודם - שיעור מס' 3 לחצו כאן.
    שאלות על HTML ו-CSS בפורום שפות צד לקוח.
    המאמר פורסם במקור באשכול בפורום: [שיעור מס' 4] HTML ופורסם ע"י -Smoxer- צפה בהודעה המקורית
    תגובות 8 תגובות
    1. האוואטר של danielgury
      danielgury -
      מעוהל תודה!
    1. האוואטר של digzip.software
      digzip.software -
      thanks bro
    1. האוואטר של ofir420
      ofir420 -
      תודה
    1. האוואטר של ofir420
      ofir420 -
      אחלה
    1. האוואטר של ido8780
      ido8780 -
      תודה
      על הפרסום
    1. האוואטר של roma4ka
      roma4ka -
      תודה על הפרסום, חבר!
    1. האוואטר של bneatar
      bneatar -
      תודה על הפרסום
  • עוד באטרף



כל הזמנים הם לפי GMT +3. השעה כרגע היא 07:26.
מופעל על ידי vBulletin™ © גרסה 4.1, 2011 vBulletin Solutions, Inc. כל הזכויות שמורות.
פעילות הגולשים
אומנות וגרפיקה
מוזיקה
ספורט
סדרות טלוויזיה
סרטים וקולנוע
קנייה ומכירה
רשתות חברתיות
הבורר 3
פורומי פנאי ובידור
סרטים
סדרות
משחקים
דיבורים
אקטואליה
בעלי חיים
בדיחות והומור
משחקי ספורט
הבורר
מחשבים וטכנולוגיה
תמיכה טכנית
חומרה ומודינג
תוכנות להורדה
סלולארי וגאדג'טים
רקעים למחשב
ציוד הקפי למחשב
אבטחת מידע
תכנות ובניית אתרים
כסף ברשת
אייפון
בריאות ואורח חיים
כושר ופיתוח גוף
דיאטה
צבא וגיוס
יעוץ מיני
מה שבלב
אומנות הפיתוי
יהדות
מיסטיקה ורוחניות
אתאיזם ודתות

נושאים: 1,780,171 | הודעות: 7,477,620 | משתמשים: 315,625 | המשתמש החדש ביותר: upizijoj | עיצוב גרפי: סטודיו עודד בביוף | קידוד: rellect