שיעורי HTML5

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

ראשית, אסביר מהי שפת HTML?

  • HTML זה ראשי תיבות של: Hyper Text Markup Language
  • HTML אינה שפת תיכנות, אלא שפת הגדרה המורכבת מתגיות. שפה כזאת נקראת גם שפת קידוד
  • HTML משתמשת בתגיות כדי ליצור ולהגדיר דפי אינטרנט.


כתיבה בשפת HTML

    ניתן לכתוב בHTML בתוכנת notepad++ , אנו קוראים לכל התוכנות בהן אנו מתכנתים גם "סביבות עבודה". התוכנה חינמית וניתן להורידה בלחיצה כאן.
    כל הכתיבה בHTML מתבצעת על פי תגיות. תגית פותחת למשל וגם תגית סוגרת למשל עם סלאש. למעשה, התוכנה לא תכיר את התגית tal, אבל אם תכתבו בתוכה למשל P , DIV , H1 ועוד תגיות - היא כן תזהה. יש תגיות שיצרו עבורינו מראש. זה הזמן שלכם - להוריד את התוכנה , לכתוב בתוכה תגיות שונות כמו שפירטתי לעיל ולראות מה מופיע על גבי הדפדפן. שימו לב - תצטרכו לשמור את הקובץ שלכם בתור סיומת HTML (זוהי הסיומת של אתרי אינטרנט). מצב ברירת המחדל של התוכנה הוא טקסט. כלומר, היא שומרת תמיד בdefault שלה כטקסט.



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


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

תמיד כל דף html - ייפתח וייסגר בתגית html פותח וhtml סוגר.

בתוך הhtml יש שתי תגיות שמחלקות את הדף שלנו. התגיות הן:
head - "ראש" - תגית שמכילה כל מיני תגיות בהגדרות של הדף, ודברים לא גלויים לעין אבל חשובים מאוד מאחורי הקלעים.
body - "גוף" - תגית שמכילה את כל התגיות הויזואליות שלנו...כל מה שנראה וגלוי לעין. תמונות, טקסטים ועוד...

למעשה, שלד כלל האתרים זהה ונראה כך:
<html>
<head>
<⁄head>
<body>
<⁄body>
<⁄html>






בתוך כל תגית body יש לנו תגיות שונות הגלויות לעין... למשל, התגית H1 מכילה עיצוב של גודל מסוים. נסו בעצמיכם. כיתבו בתוכנה את הקוד הבא:
<h1>שלום לכולם<⁄h1>
תרגיל - כמו תגית הh1 יש עוד כמה.. למשל, h2,h3 ועוד... בידקו כמה תגיות H יש?

ישנה תגית בשם p מכילה עיצוב של מרחק מסוים ממי שמעליה וממי שמתחתיה. תגית P מייצגת פסקה. כיתבו בתוכנה את הקוד הבא:
<p>שלום לכולם<⁄p>

ישנה תגית בשם Span זוהי תגית אשר נבלעת בתוך תגיות אחרות. למשל, אם תכתבו:
<p>My Name Is <span>Tal<⁄span><⁄p>
נראה שתגית הspan לא יורדת שורה, לא מבדילה את עצמה מתגית הP שמכילה אותה... כך ניתן להבין כי אפשר לעשות תגית בתוך תגית ואם רוצים שינויים בתוך התגית אפשר להשתמש בspan. בהמשך כאשר נלמד על הענקת תכונות לתגיות, נוכל לצבוע למשל אות אות בתוך משפט...כאשר נעטוף כל אות בspan.


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



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

תכונות התמונה הן:

ראשית, את התגית עצמה אנו פותחים וסוגרים בעת ובעונה אחת - <img />
בנוסף התכונות הן:
  • גובה - תמיד נכתוב בפיקסלים. כמו בדוגמא: <img height="100px"/>
  • רוחב - תמיד נכתוב בפיקסלים. כמו בדוגמא: <img width="100px"/>
  • מקור - כמו שפירטתי לעיל, אם התמונה באותה התקייה פשוט נקרא לה. כמו בדוגמא:
    <img src="tal.png"/>

  • במידה והתמונה נמצאת בתקייה אחת מעל התיקייה של קובץ הhtml שבו אתם כותבים, נצטרך לכתוב כך: <img src="../tal.png"/> נקודותיים וסלאש מסמנות - לך לתקייה אחת מעל.

    בנוסף לתמונות, אסביר גם כיצד ניתן לבצע לחיצה על אלמנטים שונים ותגיות שונות.
    כל שעליכם לעשות הוא לקחת את התגית שיצרתם, למשל את תגית הH1 ולעטוף אותה מסביבה בתגית a. קרי הדוגמא.
    לתגית הa נוסיף תכונה של href אשר מסמנת את אתר היעד אליו צריך להגיע בעת הלחיצה.

    <a href="http://tal-web.co.il"><h1>click me!<⁄h1><⁄a>

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



    לאחר שהבנו כי יש לנו שני חלקים לכל הhtml שלנו (head, body) וראינו שיש תגיות עם תכונות ויזואליות שונות שיצרו עבורינו מראש, נעבור גם ללמוד על חלק הhead המשמעותי. לbody נחזור גם בשיעור 5 וגם בשיעור 6 ובכלל כל שלב הCSS (עיצוב תגיות).

    בעולם הhead נזין שלל תגיות שונות אשר נוגעות ל"מאחורי הקלעים", קרי תגית הtitle שמשנה את כותרת המסמך (הטקסט שמופיע בלשונית למעלה בדף). את תגית הtitle נזין רק בhead.
    <title>האתר שלי<⁄title>

    מה עוד נוכל לשים בתוך הhead? נוכל לשים שם גם מילים שמנועי החיפוש (גוגל) מאוד מתקשרים איתם. הדבר נקרא "קידום אתרים" (SEO) והוא נעשה בHTML בתוך הHEAD על ידי תגית הMETA.
    ישנן מספר תגיות Meta המכילות תכונות שונות ואת כולן גוגל קורא ומאתר את המילים הכתובות בהן:


    <meta name="description" content="Free Web tutorials"/>
    <meta name="keywords" content="HTML,CSS,JavaScript,Android,Java"/>
    <meta name="author" content="Tal Gnainsky"/>






    לתגית הmeta משמעות נוספת והיא קידוד. קידוד כלומר התאמת האתר שלנו לשפה העברית למשל. לא משנה באיזה מחשב נגלוש, מאיזה מקום בעולם, תמיד תהיה תמיכה בשפה העברית. זאת על מנת שלא נראה פתאום סימנים משונים במקום הטקסט שלנו...זה קורה לפעמים... גם פה תגית הmeta בתוך הhead והמאחורי הקלעים שימושית מאוד...
    זו הדרך לבצע קידוד והתאמה לשפה העברית:
    <meta charset="UTF-8"/>



    בשיעור זה אסביר לכם על טפסים (form) וכתיבה נכונה שלהם בHTML. תחילה אפרט על תגיות טופס רגילות ולאחר כן אפרט על התגיות החדשות שהתווספו בHTML5.

    ראשית, התגיות הקיימות עד כה הן: כפתור, שדה טקסט, radio-button, checkbox ועוד...
    יש את תגית הכפתור וכל השאר תגיות input כאשר הן מקבלות תכונות שונות. כמו למשל סוג (type) ולמשל בשדה טקסט יש כיתוב בצבע אפור שמנחה מה על המשתמש להזין (placeholder). ראו בדוגמא.


    <button>Click Me!!!<⁄button>
    <input type="text" placeholder="Enter Your Text"/>
    <input type="checkbox"/>CheckMe!
    <input type="radio"/>RadioButton!









    CheckMe!
    RadioButton!






    את כל אלה עוטפים בתוך תגית פותחת form ולבסוף תגית סוגרת form ובכך קיבלנו טופס ראשוני.

    חלק מהinputs החדשים שהתווספו אלינו בשלב הHTML5 הם: בחירת צבע (type="color") , בחירת תאריך ופתיחת לוח שנה (type="date") , יצירת email שממש בודק האם יש שטרודל וכדומה (type="email") ועוד כמו number (למספרים בלבד) , tel (למספרי טלפון) ועוד... כעת כשאתם יודעים בעצמכם היכן למקם את הtype ואיך ליצור, בנו טופס משלכם. בהצלחה.



    מפתחי הHTML שמו לב כי אתרים שלמים בנויים כולם על ידי divs או כל מיני תגיות ללא שום הקשר. הכל בנוי עם אותה התגית. עתה, הם שינו את הקונספט והוסיפו תגית לכל אזור בדף. אמנם עדיין יש שימוש בdiv,p,h1 וכדומה אך כעת יש ממש הגדרה ברורה בתוך הbody תגית לכל חלק...

    למשל, עבור כותרת ראשית יש את התגית החדשה <header><⁄header> ובתוכה אנו מזינים את כל התגיות הרלוונטיות לכותרת שלנו... או תפריט עם גלישה לאתרים שונים למשל...


    תגיות נוספות ומשמעותן מופרטות לעיל:

    <article><⁄article> - מיועדת לאזור בו תזינו מאמרים שלכם באתר.
    <nav><⁄nav> - מיועדת לאזור בו תזינו רשימת לינקים וקישורים באתרכם.
    <main><⁄main> - מיועדת לאזור בו תזינו את התוכן הראשי של האתר.
    <section><⁄section> - מיועדת לאזור בו תזינו קטע מסוים באתרכם.
    <footer><⁄footer> - מיועד לאזור הכותרת התחתונה באתרכם.

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



    🔝