שפת HTML

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

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

מה נלמד במסגרת השיעור?

מבוא:

  • מהי שפת HTML ועל מה אחראית?
  • מהם יתרונות השפה?
  • מהם כלי עבודה הבסיסיים? מהו דפדפן? מהו כתבן?
  • האם יש לי Chrome? האם יש לי VS-Code?
  • מהם תגיות? כיצד ניתן לזהות אותן? למה משמשות?
  • מהם המאפיינים? כיצד ניתן לזהות אותם? למה משמשים?
  • מהי מבניות בסיסית של מסמך html?
  • למה משמשות התגיות html, head, body, title, doctype html?
  • למה משמשות התגיות meta? מהי תגית meta עם charset="utf-8"?
  • מהן התגיות h1, h2, h3, h4,h5, h6, p ? כיצד הן מסייעות למנועי חיפוש?
  • האם הצלחתי לכתוב מאמר? (בנושא ישראל)

שימוש בתגית  iframe:

  • מהי תגית iframe?
  • כיצד להטמיע סרטון מ- YouTube ?
  • כיצד להטמיע מפה מ Google Maps?

 

מאפיין style

  • מהו מאפיין style?
  • כיצד להגדיר צבע לגופן?
  • כיצד להגדיר צבע לרקע אלמנט?
  • כיצד להגדיר סוג גופן?
  • כיצד להגדיר גודל לגופן?
  • כיצד להגדיר לבנות את המסמך מימין לשמאל?
  • כיצד ליישר טקסט (ימין, מרכז, שמאל)?

 

תגית div:

  • למה משמשת תגית div?
  • מתי נשתמש ב- div ומתי לא?

 

התנהגויות של אלמנטים:

  • מסמך html נקרא ונבנה מלמעלה למטה ומשמאל לימין.
  • למקש Enter לא יוצר אפקט של ירידת שורה ולכן נשתמש בתגית br.
  • ליותר מרווח אחד אין משמעות במידת הצורך ניתן להשתמש ב-  
  • לאלמנטים יש הגדרות ראשוניות שהדפדפן נותן להם.
  • חוק קינון אלמנטים – תגית תפתח ותיסגר באותו האזור.

 

סימוני טקסט:

  • מהי תגית strong?
  • מהי תגית em?
  • מהי תגית ins?
  • מהי תגית span ולמה משמשת?

 

קישורים:

  • מהי תגית a ?
  • מהו מאפיין href?
  • כיצד ליצור קישורים פנימיים?
  • מהו המאפיין target="_blank"?
  • כיצד ליצור יצירת קישורים חיצוניים?
  • כיצד ליצור קישור להתקשרות?
  • מהו תפריט ניווט ולמה צריך קישורים?

 

תמונות:

  • מהי תגית img?
  • מהו מאפיין src?
  • כיצד להוסיף תמונה?
  • מהו מאפיין alt? למה משתמש ומתי מוצג למשתמש?
  • כיצד לעצב ולשלוט על רוחב וגובה של תמונה? (ב- px וב- %)
  • כיצד לצור תמונה שהיא קישור?

 

רשימות:

  • מהי התגית ol ומהי התגית li?
  • כיצד ליצור רשימה מסודרת?
  • מהי התגית ul ומהי התגית li?
  • כיצד ליצור רשימה לא מסודרת?
  • מה הקשר בין רשימות לתפריטי ניווט?
  • כיצד לשנות את עיצוב הרשימה ומהי פקודת העיצוב list-style-type?
  • מה הקשר בין רשימות לתפריטי ניווט?

 

טפסים:

  • מהי תגית form ולמה משמשת?
  • מהי תגית label ולמה משמשת?
  • מהי תגית input ולמה משמשת?
  • מהו מאפיין type ועל מה משפיע?
  • איזה ערכים מאפיין type יודע לקבל?  (text, number, submit)
  • מהן התגיות select + option ולמה משמשות?
  • מהי תגית textarea ולמה משמשת?
  • מהו מאפיין rows ולמה משמש?
  • כיצד ליצור טופס?

 

כפתורים:

  • מהי תגית button ולמה משמשת?
  • מה ההבדל בין כפתור וקישור?
  • מהו מאפיין onclick ולמה משמש?
  • מהו מאפיין ondblclick ולמה משמש?
  • מהי הפקודה alert? באיזה שפה היא? ולמה משמשת? alert('Hola Class')

 

שילוב 3 שפות יחד

  • יצירת מסמך הכולל שילוב של שלושת השפות: HTML + CSS + JS

גרסת HTML5 והתגיות החדשות

  • הכרות עם מבניות מסמך HTML5 בהשוואה לגרסאות קודמות.
  • מה מטרת התגיות החדשות? וכיצד מסייעות למנועי חיפוש.
  • הכרות עם התגיות החדשות: header, footer, main, nav, section, article, aside, figure, figcaption,