HTML + bootstrap

HTML

דף HTML מורכב משלושה סוגי תגיות

קונסטרטורלי (מבני) – כותרות \ פיסקה\ רשימות  לניהול הסדר בדף

style (עיצובי) – stile (לא בשימוש) כל העיצוב היום
מתנהל בשפה אחרת

סימנטי – הגדרת אזרים טבלה \ מקטע

Mata – מידע על הדף

·         name – שם התכונה

·         content  - תוכן התכונה

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

רווחים \ שורות

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

·         לירידת שורה נשתמש בתג </br>   כל תג יוריד שורה

·         לרווח נשתמש ב nbsp&

dir - כיוון הטקסט בדף   dir = "rtl"

Symbol – סמל

ניתן להציג אלפי סימנים \אייקונים שאינם מופיעים במקלדת באמצעות & + קוד

אפשר למצוא ברשת טבלאות קודים לחיצים\תווים מתמטיים \ אייקונים

Form

ללא התגית Form רשת האינטרנט הייתה בסך הכל מאגר דפי  תצוגה לקריאה-בלבד

ללא אפשרות חיפוש\קניה\הרשמה

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

אלמנטי הקלט בטופס הם שמאפשרים למשתמש להזין מידע לדף ולמסור (submit) מידע לשרת.

2 התגיות החשובות ביותר של ה Form – action (פעולה) method (שיטה)

·         Action לאן ישלח הטופס

·         מציין את שיטת שליחת הנתונים, מקבל אחד מהערכים get או post.

bootstrap

ל- Bootstrap יש אוסף ענק של מחלקות  JS / CSS, שמתאימות לסיטואציות נפוצות באתרי אינטרנט.

לעיצוב הדף באופן רספונסיבי

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

Container

הגדרת מיכל דינאמי להצגת מידע במרכז המסך - .container-fluid  יציג לארוך כל המסך

כל אלמנט ניתן להגדרה בפקודות CSS  רגילות או מקוצרות של Bootstrap

לדוג' margin שמגדיר את המרווח של האלמנט מהאלמנטים שלידו  פקודה מקוצרת mt/mr/ml/mb

<div class="container p-1 mt-1 bg-dark text-white">

מיכל עם מרווח של אחד מבפנים (מגבול האלמנט לטקסט שבפנים) מרווח אחד מהאלמנט שלפניו רקע שחור וטקסט לבן

Grid

 פונקציה שמחלקת את המסך לעד 12 חלקים (עמודות) – במידה ונחלק לפחות נקבל חלוקה שווה

או להגדיר שעמודה אחת תקבל מס' חלקים והשאר יתחלקו ביתרה. גם כאן ניתן להוסיף הגדרות עיצוב

<div class="row">

    <div class="col" style="background-color:lavender;">.col</div>

    <div class="col" style="background-color:lavender;">.col</div>

      <div class="col-sm-5" style="background-color:orange">.col-sm-3</div>

  </div>

Jumbotron

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

בתוך ה Jumbotronניתן להכניס כמעט כל אלמנט של HTML כולל עיצוב css / Bootstrap

Alert

הודעה שאמורה להפנות את צומת הלב – משהו מודגש

table

Table-reaponsive – טבלה שמתרחבת באופן דינאמי ובמידה והמסך קטן תהיה אפשרות גלילה

 Table-bordered - טבלה עם גבולות

Navigation Bars – סרגל ניווט שממוקם בראש הדף

בתוך הסרגל נכניס רשימת קישורים – עובדים עם רשימה ע"מ שהקישורים יעמדו בשורה רצופה וכן שהיו ריספונסיבים

# קישור למקום בדף באמצעות זיהוי אלמנט

·         את הסרגל ניתן לעצב כמו שאר האלמנטים ב Bootstrap גודל\צבעים\ dropdown\הוספת תמונה

<nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>