HTML - תגיות פלט
# עם אותו ID מעביר את הגולש אליה. דוגמה לכך היא כפתור "חזור למעלה".להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: HTML - תגיות פלט
תמלול ההרצאה: HTML - תגיות פלט
הטקסט המלא של הדקות הראשונות בהרצאה «HTML - תגיות פלט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
מה שאנחנו הולכים לראות היום זה סדרת תגיות שנקראות תגיות פלט. מה שמשותף לכל התגיות האלה זה שהן מציגות מידע למשתמש.
אז בואו נפתח קובץ חדש, נלך ל-File, New, File. הקובץ שאנחנו רוצים זה אותו קובץ, HTML, ונבצע לו Open.
מה שאנחנו הולכים לכתוב כרגע זה דף עם תגיות פלט, כלומר אנחנו הולכים להציג מידע למסך. עדיין אנחנו לא הולכים לקלוט מידע מהמשתמש, את זה אנחנו נראה בשלב מאוחר יותר.
אוקיי, אז המסך שאנחנו הולכים לראות כרגע זה בעצם מסך ששייך לאתר שמוכר בעלי חיים, חנות חיות. ראשית, נכתוב את הכותרת. אתר חיות המחמד הגדול בארץ.
נשמור את זה. נאתר את הקובץ לאחר ששמרנו. בואו קודם נשמור אותו על הדסטופ. זה הולך להיות דף הבית, לכן נקרא לו homepage.htm ואני רוצה לראות מה עשינו עד עכשיו.
בשביל לאתר את הקובץ ניתן ללחוץ מקשי ימני על הכותרת Homepage ו-Open Containing Folder. זה פותח לי את התיקייה בה שמור הקובץ ומסמן לי את הקובץ.
עכשיו אני יכול ללחוץ עליו דאבל קליק ולהריץ אותו. ניתן לראות שכרגע יש לי דף ריק ורק הכותרת מוכנה למעלה בעברית. אוקיי, בואו נחזור בחזרה לוויז'ל סטודיו ונתחיל לראות אילו תגיות פלט או תגיות מידע קיימות.
התגית הראשונה שאנחנו הולכים לראות זו תגית שנקראת h1. תגיות h הן תגיות כותרת, h זה קיצור של header. ניתן לשים לב שישנן בעצם שש תגיות כאלה.
בואו נסתכל עליהן. אנחנו רואים שיש לי פה h1, h2, h3, h4, h5 ו-h6. h1 זאת הכותרת הגדולה ביותר, h6 זאת הכותרת הקטנה ביותר, כל היתר הם גדלים מותאמים, כאשר h2 קצת יותר קטנה מ-h1, h3 קצת יותר קטנה מ-h2 וכו'.
אנחנו נבחר כרגע את הכותרת הגדולה ביותר, כלומר h1. בואו נקרא על הכותרת הוואות אתר חיות המחמד שלי. מה שחשוב לעשות זה ברגע שכתבתי קוד מסוים ב-HTML, א', לשמור אותו, ב', לחזור לדף שאמור להיות פתוח ולבצע רפרש בכדי לראות איך זה נראה.
אני רואה שהוא טוען אותו ומציג לי את הכותרת אתר חיות המחמד שלי. אבל ניתן לראות שהיא מוצמדת לצד שמאל, מפני שכברירת מחדל האתר מותאם לאנגלית. אני רוצה שהאתר שלי יהיה מותאם לעברית, כלומר יציג לי את הכל מצד ימין.
כדי לבצע את זה ראינו שניתן לבצע אטריביוט, כלומר לתת תכונה מסוימת לתגית. התכונה שאנחנו רוצים לתת היא עבור תגית ה-Body ונקראת דיר, וערך שאני רוצה לתת לתכונה הזאת, RTL, כלומר right to left.
איך שביצעתי שינוי מסוים, שוב פעם אני שומר, חוזר לדפדפן שהוא תמיד פתוח אצלי אני לא סוגר אותו ומרפרש את הדף ורואה אם הצלחתי לבצע את מה שרציתי ואני רואה שהכל מותאם לימין כרגע כלומר מותאם לעברית.
בואו נחזור לוויז'ל סטודיו לפני שנעבור לתגית הבאה הערה קלה בקשר לכל מה שקשור לעיצוב למרות שביצעתי את זה דרך html דרך איזשהו אטריביוט של תגית כל מה שקשור לעיצוב כלומר מיקומים גדלים גופנים, צבעים, צבעי רקע וכולי שייך לשפה מיוחדת שהתפקיד
שלה זה לעצב דפי HTML שנקראת שפת CSS. הקיצור CSS זה Cascading Style Sheet בעברית גיליון עיצוב מדורג. תפקיד השפה הזאת זה לבצע עיצוב לדפי HTML.
לכן במציאות אנחנו לא היינו עושים dir שווה rtl אלא נותנים את העיצוב הזה על ידי שפת css. בהמשך אנחנו נלמד שפת css. אז כרגע השתמשנו בשיטה הישנה של עיצוב על ידי תגיות ואטריביוט של html.
בואו נעבור לתגית הבאה. התגית הבאה שרציתי להראות זו תגית שנקראת hr. תגית hr זו תגית ריקה ולכן אני סוגר אותה על ידי slash וסגירת סוגריים משולשות.
בואו נשמור ונראה מה הדבר הזה יצר לי. נחזור לדפדפן ונבצע רפרש. שימו לב שנוצר לי פה קו hr, בקיצור של הוריזונטל רואו, כלומר קו אופקי, תגית מאוד פשוטה, תפקידה לבצע איזשהו קו לרוחב המסך.
כעת אני רוצה שיהיה לי איזשהו תפריט מסוים. אני רוצה שיהיה תפריט שהמשתמש יוכל דרכו להגיע לדף הבית, הוא יוכל להגיע לדף חיות, בוא נניח הוא יוכל להגיע לדף צור קשר.
איך אני מבצע תפריט? תפריט בסופו של דבר זה לינקינג. כשהמשתמש לוחץ על לינק הוא רוצה להגיע לדף אחר. לינק מתבצע על ידי תגית שנקראת A. ניתן לראות אותה כתגית הראשונה בחלון שקופץ.
תגית A זאת תגית שיש לה פתיחה וסגירה. בתוכה אני רושם את המידע שאני רוצה שהמשתמש יראה עבור הלינק. לדוגמה לינק ראשון הוא עבור דף הבית ואני צריך לציין לתגית הזאת מה קורה כשלוחצים עליה.
זה מתבצע שוב פעם על ידי אטריביוט שנקרא href לכן אני רושם href שווה כל האטריביוט חייבים לבוא בגרשיים כמו שדיברנו על זה ואני כותב לאן בדיוק אני רוצה שהוא יצביע.
בואו נבחר את הדף הנוכחי home page אם לוחצים עליי אני רוצה להגיע לדף הבית ויש לי פה את home page. בואו נבנה לינק נוסף.
הלינק הבא יצביע לדף חיות. שוב, יש לנו את ה href כאטריביוט. אני מזכיר, אטריביוט תמיד בא בחלק של תגית הפתיחה, לא בחלק של תגית הסגירה.
אז יש לנו href שווה, ונמציא איזשהו דף שנקרא animals.htm. עכשיו, ויז'ואל סטודיו מזהה שהדף הזה לא קיים לי, ולכן אני רואה שיש לי מעין הערה מתחת לכתובת של animals.htm. בואו נשמור את זה ונראה איך זה יצא בדפדפן.
נבצע רפרש ואני רואה שיש לי פה שני לינקים בתפריט. ברגע שאני לוחץ על דף הבית אני כמובן מופנה לדף הנוכחי שלי. אני יכול לראות כאן שבכתובת ה-url כתוב לי homepage.htm.
אם אני לוחץ על דף החיות שלנו או על לינק החיות שלנו, אני אמור לגלוש לדף שנקרא animals.htm כפי שכתבתי מקודם, ואכן אני רואה שכאן מופיע לי animals.htm אבל הדפדפן כמובן לא מצא את הדף הזה ולכן אני מקבל שגיאה, שגיאה מאוד נפוצה שנקראת error 404 page not found.
בואו נחזור בחזרה וכעת נלך לוויז'ואל סטודיו וכן נבנה את דף animals.htm בכדי לראות שברגע שאני לוחץ על הלינק אכן אני מגיע לדף הזה. בואו נחזור לוויז'ואל סטודיו, נלך לפייל, פייל, נבחר שוב html page, open, נכתוב איזושהי כותרת עבור הדף כדי לראות שבאמת זה הדף שאנחנו גולשים אליו, נצבע את הצבע רקע של הדף באיזשהו צבע רקע
אחר כדי לראות את ההבדלה. שימו לב שבמציאות רצוי להגדיר את צבע רקע על ידי css כפי שציינו מקודם. כעת נשמור את הדף, חשוב שזה יהיה באותה תיקייה כמובן, נחזור לדפדפן ונראה מה קורה אם עכשיו אני לוחץ על לינק החיות שלנו.
אני רואה שעכשיו הוא כן הצליח למצוא את דף animals.htm שכמובן קיים באותה התיקייה. בואו נחזור חזרה, נחזור לvisual studio וניתן לבגור כרגע את animals.
בואו נכתוב עוד לינק אחד בתפריט שלנו, וור דף contact us htm. על הלינק יהיה צור קשר, שוב פעם אני רואה שיש לי פה איזושהי הערה כי visual studio מזהה שהדף הזה לא קיים לי, בואו נוסיף אותו במהירות בכדי למנוע את ההערה.
נלך לפייל, ניו, פייל, שוב נבחר html page, נבצע אופן, נציין פה איזושהי כותרת, נבצע שמירה ואפשר לסגור כרגע את דף קונטקט אס וחשוב תמיד תמיד תמיד לבדוק האם מה שביצענו, מה שכתבנו אכן עובד.
נחזור לדפדפה, נבצע רפרש. הנה הלינק צור קשר, בואו נלחץ עליו והגענו לדף קונטקט אס,