הדרכה מקצועית
 ויחס אישי

לימוד html

קבצים להורדה

דף html ריק

בניית אתר אינטרנט

word

מערך השיעורים לבניית אתר ב- Html


תוכנית לימודים לסדנת בניית אתרים ב- html

  1. מבוא והכרת תגיות html בסיסיות, פקודות עיצוב
  2. שילוב תמונות, טקסט בתנועה
  3. בניית קישורים, בניית טבלאות
  4. הגדרת פיסקאות ורשימות, דפי מסגרת
  5. יצירת טפסים, שילוב מוסיקה באתר
  6. העלאת האתר לרשת האינטרנט עם ftp

שיעור ראשון

התגיות

  • קובץ html מכיל תגים
  • התגים אומרים לדפדפן  איך להציג את הדף
  • קובץ html חייב בסיומת  .html או .htm
  • קובץ html ניתן ליצור בעזרת פנקס הרשימות Notepad

כללי תחביר HTML

פתח את ה- Notepad ורשום את הטקסט הבא:
שמור את הקובץ  בשם test.html .

קוד html

  • פתח את הדפדפן  וגש לתפריט קובץ - פתיחה, לחץ על הכפתור "עיון"  ובחר את הקובץ ששמרת (test.html)  ופתח.
    כעת יוצג הדף שיצרת בדפדפן.
  • התג הראשון <html> מציין לדפדפן שזוהי ההתחלה של קובץ html התג האחרון סוגר את הקובץ.
  • התג <head> מציין לדפדפן שכעת יופיע המידע על כותרת הדף. בד"כ מה שרשום בין התגים <head> ו- </head> הוא מידע למנועי החיפוש על הדף, תאור קצר, מילות מפתח, שם הדף וכו'. מידע זה לא מוצג על גבי דף האינטרנט.
  • התג <title>, שנמצא בתחום ה- head, מציין את שם הדף. התאור שמופיע ב- title יופיע בכותרת החלון של הדפדפן (הכותרת הכחולה).
  • התג <body> מציין לדפדפן שכעת יופיע תוכן הדף. בין התגים <body> ו- </body> יופיעו הטקסטים, התמונות וכו'.

חשוב!

התגיות <html> <head> <title> <body> חייבות להופיע בכל דף באתר . תגיות אלה מופיעות רק פעם אחת בדף.

סוגי תגים

התוים > ו- < משמשים כתוחמי התגיות. קיימים שני סוגי תגיות:
  • תגיות מכילות Container tags
    יש להן תגית פותחת ותגית סוגרת, כדי לציין את תחילתו וסופו של הקטע שעליו תחול התגית.
  • תגיות שומר מקום Placeholder
    מציבים אותן במקום בו רוצים שהדפדפן יכניס משהו, כמו תמונה, שורה חדשה וכו לתגיות אלו אין תגית סוגרת

שורות כותרת בדף

התגים <h1> עד <h6> הם תגים לעיצוב טקסט לכותרות, כאשר <h1> היא הכותרת הגדולה ביותר ו- <h6> היא הכותרת הקטנה ביותר.
לכותרת נוספת שורת רווח לפני ואחרי הטקסט.

<h1>שורת כותרת 1</h1>
<h2>שורת כותרת 2</h2>
<h3>שורת כותרת 3</h3>
<h4>שורת כותרת 4</h4>
<h5>שורת כותרת 5</h5>
<h6>שורת כותרת 6</h6>

הפרדת שורות

התג <br> מציין לדפדפן שהטקסט שיבוא אחריו יהיה בשורה נפרדת.
br הוא תג שומר מקום placeholde, אין לו תג סוגר.
שים לב!  שורות חדשות או רווחים המופיעים במסמך ה- html בעורך הטקסט, לא ישפיעו על המראה בדפדפן.

פקודות עיצוב

התג <font> משמש לעיצוב הטקסט. ניתן להגדיר בו את סוג הגופן, הצבע וגודל הגופן.

<font size="5" color=”red” face=”arial”>  שלום לכולם </font>

תכונות התג:

  • Size – גודל בערכים של 1 עד 10

  • Color – צבע -בערכי RGB (Red Green Blue) , 6 תווים בערכי הקסדצימלי. #33cc66  לטבלת הצבעים

  • Face – סוג הגופן

פקודות עיצוב נוספות:

<b>שלום לכולם </b> הדגשת טקסט
<i> שלום לכולם </i> הטית טקסט
<u> שלום לכולם</u> קו תחתי לטקסט

מאפיינים / תכונות לתג

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

<body bgcolor=“red” >

מאפיינים המוכלים על כל המסמך, יש למקם בתוך התג <body>

  • Bgcolor - צבע רקע הדף

  • Text – צבע הטקסט בכל הדף

כמו לדוגמה:  צבע טקסט לבן על רקע כחול, בכל הדף

<body bgcolor=“blue” text=”white”>

מאפיינים המוכלים על קטע טקסט, יש למקם בתוך התג <font>
לדוגמה: צבע טקסט אדום בגודל 6

<font color=“red” size=”6”>

קינון תגיות

הצבת תגית אחת בתוך השניה. כאשר רוצים להכיל לאותו טקסט תכונות שונות.
כלל: התג האחרון שנפתח הוא הראשון שיסגר.

<b>

    <i>

        טקסט מודגש ונטוי

    </i>

</b>

עברית בדף

  • Dir=rtl כיוון הדף מימין לשמאל: תכונה של תג ה- <html>

<html dir="rtl">

  • הודעה לדפדפן שהאתר בשפה העברית:
    תופיע אחרי התג <head> ולפני התג הסוגר </head>


<meta http-equiv="Content-Language" content="he">
 

 

 

    

אתי בר - הדרכה ותוכנה

[דף הבית]  [פרופיל]  [קורסים]  [חוגים לילדים]  [קישורים] [סוגי אתרים] [ממליצים] [דרושים] [טיפים] [פורום ]  [צרו קשר]

כל הזכויות שמורות © לאתי בר- הדרכה ותוכנה