שיעור תשיעי- html

פרק 9 - html

מקווה שאתם זוכרים את מה שדיברנו על html.

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

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

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

נעבור כעת על האלמנטים הבסיסיים נראה קצת תכונות שלהם.

heading – כותרות

בשביל ליצור אלמנט מסוג כותרת נשתמש בתגיות <h1> עד <h6>.

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

נראה את הקוד הבא לדוגמא:

מה שנראה על הדף זה הדבר הבא:

Paragraphs – פסקאות

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

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

נזכר בדוגמא פשוטה שראינו כבר:

כעת בא נראה עוד דוגמא:

נראה מה המחשב ידפיס:

אנו רואים שהדפדפן מתעלם מהרווחים שלנו ורושם הכל באותו שורה.

br – קפיצת שורה.

כדי להתגבר על בעיה זה יש לנו אלמנט שאומר למחשב לרדת שורה, ועל מנת ליצור אותו נשתמש בתגית <br>. התגית היא פקודה בעלת תגית פתיחה בלבד. (br זה קיצור של break)

נתבונן שוב בדוגמא רק שהפעם הוספנו <br> בכל סוף שורה.

נסו בעצמכם ותראו מה הדפדפן מראה כעת.

יש עוד אלמנט שיכול להיות שימושי כאשר מעצבים דף – אלמנט שיוצר קווי רוחב. נראה דוגמא ממש עוד רגע. כדי ליצור את האלמנט נשתמש בתגית <hr>.

לדוגמא:

ונתבונן במה שיוצג בדף:

עיצוב טקסט

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

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

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

<b> – מדגישה את הטקסט שנמצא בין התגיות.

<i> – כותב את הטקסט בפונט אחר.

<small> – כותב את הטקסט בקטן

<mark> – ׳ממרקר׳ את הטקסט.

משימה:

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

דוגמא לשימוש בהם:

אלמנט הimg

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

הנה דוגמא לאיך נגדיר תמונה בתוך הhtml.

src – קיצור של source שזה המקור של התמונה.(כלומר הקישור)

שימו את התמונה בתוך התיקייה של הקובץ html.

width hegiht – אתם מכירים.

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

button

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

נסו זאת! בהמשך נראה איך נגרום לכפתור ׳לעבוד׳, כלומר שנגדיר לכפתור מה לעשות בעת לחיצה עליו.

div

אלמנט אחרון שנלמד בפרק זה הוא אלמנט הdiv.

div הוא קצת שונה מהאלמנטים שלמדנו עד כה – הוא אלמנט כללי.

למדנו שהדף מורכב מאלמנטים – כאשר כל אלמנט מייצג משהו ספציפי. כשנרצה לכתוב פסקה נייצר אלמנט של פסקה וכו׳.. מתי נייצר אלמנט של div? כאשר נרצה ׳לשמור׳ שטח מסוים בדף. מה הכוונה?

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

למה שנרצה להכניס לתוך אותו מסגרת כמה אלמנטים?

נרצה לרוב לעשות זאת כאשר יש ביניהם איזשהו קשר, שעל ידי האיחוד שלהם לתוך הdiv,

במקום לטפל בכל אחד בפני עצמו, אני אטפל בכולם ביחד.

רגע ניקח דוגמא מהחיים:

נניח שיש לכם גינה, ובגינה יש עציץ אחד, אז בשביל להשקות אותו פשוט תמלאו כלי במים – ותשקו.

אם בגינה יש 10 עציצים, איך תשקו? תחפשו דרך יותר קלה, לדוגמא תחברו צינור מים לברז, תעבירו אותו בכל העציצים כך שבכל עציץ תשימו טפטפת, ומה שיישאר לכם זה רק לפתוח את הברז..

אבל מה יקרה אם מתוך 10 העציצים, 5 עציצים צריכים השקיה כל יום, ו5 עציצים שצריכים השקיה פעם בשבוע? ברור שהם צריכים טיפול אחר אחד מהשני, ולא נוכל להשקות אותם מאותו צינור! הפתרון הוא כנראה יהיה לחבר 2 צינורות, כאשר צינור אחד יעבור בעציצים שצריכים השקיה כל יום, ונפתח אותו כל יום, והצינור השני, לשאר העציצים ונפתח אותו פעם בשבוע.

אם נחזור לדף html – לפעמים בונים המון אלמנטים, ולפעמים יקרה מצב שלחלקם יהיו את אותם הצרכים, כמו מיקום על הדף/רקע ועוד, ולכן אנו נרצה ׳לחבר אותם לאותו צינור׳

לכך נשתמש בdiv. הוא מאפשר לנו להכניס לתוכו כמה אלמנטים, ואז נוכל לטפל פשוט בdiv וזה ישפיע על שאר האלמנטים.

בוא נראה דוגמא:

בדוגמא שמנו בתוך הdiv, גם כותרת וגם פסקה.

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

ברגע שנלמד את הדברים האלה אז נראה גם דוגמאות שבו ניצור div, ונוכל לראות זאת בעיניים.

נעשה סיכום ביניים:

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

תכונות של אלמנטים

לכל אלמנט אפשר להוסיף תכונות.

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

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

זהות של אלמנטים

לכל אלמנט אני יכול לתת ׳תעודת זהות׳ משלו.

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

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

לדוגמא:

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

משימה:

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

פרק הבא – CSS.

פרק 9 - html

כל הזכויות שמורות לבנימין טק

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

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)