מה זה HTML
| HTML-ראשי תיבות של HyperText Markup Language |
| HTML-היא שפת תגיות מוסכמות, לבניית עמודי אינטרנט (זוהי שפה מרכזית ומוסכמת בעולם האינטרנט) |
| HTML-משמש לבניית ה"שלד" והתוכן של האתר (לא העיצוב) |
| תפקיד התגיות לתת הוראות מסודרות לדפדפנים איך להציג את האתר עבור הגולש. |
| הבסיס של מרבית עמודי האינטרנט בנויים על זה שפת התוכן : HTML |
סוגי תגיות
שפת HTML נכתבת בתגיות מוסכמות בתוכנות עזר המיועדות לכך כמו VISUAL STUDIO, WEBSTORM, ATOM או בכתבן.
תגיות ראשיות ומבנה בסיסי של התבנית איתה עובדים
ישנה תבנית בסיסית איתה מתחילים לבנות קוד (לפי דרישות בינלאומיות ושל מנועי החיפוש בעיקר גוגל)
המבנה הבסיסי נראה כך:
DOCTYPE! מסמן לדפדפנים שאלה תגיות ו-html מסמן שמדוcר ב html5
html dir הכוונה לכיוון כתיבת האתר בעברית מימין לשמאל.
lang הכוונה לשפה : "he" עברית.
"meta "UCF-8 האתר תומך בכל השפות
meta name = viewport האתר תומך ברספונסיביות (התאמה לגדלי מסכים שונים)
מבנה התגיות
תגית פותחת וסוגרת
| תגית פותחת נכתבת בסוגריים משולשים : <h1> תגית סוגרת נכתבת עם סלאש וסוגריים משולשים : <h1/> בין התגיות יופיע התוכן שאותה תגית מייצגת לדוגמה: <h1>welcome to my website</h1> רוב התגיות המכילות תוכן תהיה להם תגית פותחת ותגית סוגרת |
תגיות כותרת-תגיות בלוק
תגיות בלוק הן תגיות שיוצרות אחריהן תמיד רווח שורה
| כותרת ראשית תופיע רק פעם אחת בכל עמוד | <H1/>ברוכים הבאים לאתר ההדרכות<H1> |
| כותרת ברמה 2 | <H2/>כאן תקבלו ידע רב בחינם בנושאים הבאים:<H2> |
| כותרת ברמה 3 | <H3/><H3> |
| כותרת ברמה 4 | <H4/><H4> |
| כותרת ברמה 5 | <H5/><H5> |
| כותרת ברמה 6 | <H6/><H6> |
| כותרות h1-h2 ו- p נוצר אחריהן תמיד רווח שורה לאחרונה כותרות ברמה 5 ו 6 אינן נסרקות ע"י גוגל כי הו לא נגישות ולכן כדאי פחות להשתמש בהם |
תגיות בלוק נוספות <div> <p>
אלמנט בלוק תמיד יצור שורה רווח ותופס את מלוא רוחב המקום (נמתח מימין לשמאל או שמאל לימין)
| מגדיר כתיבת פיסקה | <p/><p> |
| מגדיר מקטע, חלוקה (בלוק) | <div></div> |
| מבנה פסקאות מאוד חשוב לדירוג האתר בגוגל לכן יש לרשום פסקאות כך: <p></p> <p></p> ולא כך: <p></p> <br> <br> <p></p> |
תגיות בתוך שורה inline
תגיות inline זורמות עם הטקסט ולא יוצרות מרווח שורה כלפי מטה.
| הדגשה | <b></b> |
| בולט | <strong></strong> |
| מעבר שורה בודד (אין תגית סוגרת) | <br> |
| מפריד שורה (קו הפרדה) | <hr> |
| מגדיר מקטע כללי בתוך שורה | <span></span> |
| הערה שלא תוצג | <–כתוב כאן הערה–!> |
| סימון קו חוצה על טקסט | <del></del> |
| סימון קו תחתון לטקסט | <ins></ins> |
| הגדרת משתנה | <var></var> |
| הגדרת קו | <em>welcome</em> |
קישוריות-links
| הגדרת קישור | <a></a> |
| תפריט ניווט | <nav></nav> |
| קישור מהאתר לדף חיצוני | <link></link> |
