Get Adobe Flash player
דף הבית בסיס השפה עקרונות ותחביר

 

HTML - עקרונות

 

כתיבת HTML

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

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

  • שמות הקבצים - קובצי HTML, קובצי תמונה, וידאו,שמע Flash ואחרים, נכתבים תמיד באנגלית, תמיד באות קטנה ובמילה אחת בלבד. אם יש צורך להפריד לשתי מילים עשו זאת באמצעות מקף תחתי. למשל: my_site.
  • כל הפקודות ב HTML ייכתבו באותיות קטנות (זוהי תקנה חדשה שהופיע עם הופעת XHTML)
  • רצוי ככל הניתן להרבות בתיעוד מובנה לתוך הקוד. בפרק "כלים נוספים" תמצאו הסברים להוספת הערות לקוד.

מרכיבים בסיסיים לתכנות ב HTML

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

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

קריאה לקובץ HTML מתוך הדפדפן, גורמת לסדר הפעולות הבא:

  1. מגיעה הוראת ביצוע. ההוראה נקראת ע"י הדפדפן (תכנת האינטרנט – אינטרנט אקספלורר של מיקרוסופט, FireFox, Google Chrome וכו')
  2. מגיע הטקסט המלווה (או האובייקט - תמונה וכו').
  3. הטקסט או האובייקט מוצגים על המסך בהתאם להוראה שהקדימה אותו (צבע, גודל, מיקום וכו').
  4. קריאת הוראת הביצוע הבאה, וחוזר חלילה.

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

משפט הוראה בנוי משלושה מרכיבים:

  • תג (Tag) - המילה הראשונה בהוראה. שם התג הוא מהות הפקודה, הוא המילה הראשונה בהוראה, והוא צמוד תמיד לפתיחת הסוגרים המשולשים. תג <font> למשל, הוא התג המגדיר את תכונות הגופן שבטקסט
  • תכונה (Attribute) – תכונת התג. התכונות נכתבות בתוך ההוראה מיד אחרי שם התג. לתג <FONT> למשל, יש תכונות הקובעות את תכונות הגופן (גודלו, צבעו או סוגו)
  • ערך התכונה – הגדרת הצבע עצמו, הגדרת הגודל או קביעת שם הגופן. ערך התכונה נכתב בצמוד לכל תכונה בנפרד

הוראה למתן צבע כחול למשל, תראה כך:

<font color="blue">

בפקודה (הוראה) שבדוגמא זו 2 חלקים. החלק הראשון הוא התג עצמו (במקרה זה – Font) המגדיר את מושא ההוראה.

החלק השני מורכב מהתכונה (Color) ומהערך הנלווה (Blue). התכונה תופיע אחרי התג, ואינה יכולה להיכתב באופן עצמאי כאילו היתה תג. הערך יופיע תמיד אחרי סימן שוויון =, ויושם בתוך "גרשיים".

תג יכול להכיל יותר מתכונה אחת, ולעיתים אף תכונות רבות. הוראה לגופן מסוג Arial בצבע אדום תראה כך:

<font color="red" face="Arial">

תחביר להוספת תכונות לתגים

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

<font color="red" size="4">

 

התגים מתחלקים לתגים רגילים ותגי מכולה

תג רגיל הוא תג המספק הוראה חד-פעמית כגון "רד שורה", "מתח קו סרגל", "שים תמונה" וכו'.

 

תג מכולה: תג הנותן הוראה לפתיחת מקטע במסך שעליו חלה ההוראה. בדוגמא שלמעלה, הגדרנו הוראה למתן צבע כחול לטקסט. הוראה זו תחול עד לביטולה. ביטול ההוראה נעשה ע"י ציון מחדש של התג אך בלווי לוכסן- /.

ההוראה הבאה

<font color="green">טקסט דוגמא</font>טקסט רגיל

תגרום למילים "טקסט דוגמא" להופיע בירוק. המילים "טקסט רגיל" לעומת זאת יופיעו בשחור (ברירת המחדל של המחשב).

 

כללי כתיבת קובץ XHTML לעומת HTML

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

התג המורה בשפת HTML על ירידת שורה הוא <BR>

ב XHTML או ב- HTML5, הוא ייכתב כך: <br />

לכללים והסברים מורחבים, ראה בפרק XHTML לעומת HTML

 

קינון תגים

תג מכולה יכול להכיל בתוכו תגים נוספים במב שמכונה "תגים מקוננים".

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

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

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

בדוגמא הבאה, הטקסט "אנו מאחלים" ייכתב בשחור ובאות ברירת המחדל של המחשב. המילים "יום טוב" ייכתבו בכחול, המילים "לכל התלמידים" ייכתבו בכחול אך גם באות גדולה יותר (גודל 5). המילים "בקורס זה, ייאבדו מגודלן והטקסט "והמשך עבודה מוצלחת", יאבד גם את הצבע הכחול:

אנו מאחלים <font color= "blue"> יום טוב <font size= "5">לכל התלמידים</font>בקורס זה </font> והמשך עבודה מוצלחת

והתוצאה: אנו מאחלים יום טוב לכל התלמידים בקורס זה והמשך עבודה מוצלחת

 

כאשר התג המקונן מגדיר תכונה זהה אך בערך שונה, הערך החדש יהיה כמובן זה שייקבע, עד אשר התג יבוטל ונחזור להגדרת התג החיצוני. בדוגמא הבאה המילים הראשונה כתובה בשחור (לפני התג הראשון), השניה באדום, השלישית בכחול 0בתוך התג המקונן), הרביעית חוזרת לאדום והאחרונה - בשחור, ברירת המחדל:

שחור <font color= "red"> אדום <font color= "blue"> כחול </font> חזרה לאדום </font> חזרה לשחור

והתוצאה: שחור אדום כחול חזרה לאדום חזרה לשחור

אל השיעור הבא