המושג HTML הינו קיצור עבור Hyper Text Markup Language – שפת סימון יתר למלל. כלומר, בעזרת שפת תוכנה פשוטה זו ניתן לסמן מלל כתוב ביותר אפשרויות מאשר אפשר היה עד כה בעזרת שפות תוכנה אחרות. צורך זה נולד עם הופעת האינטרנט. בדף אינטרנט המכיל מלל רב נרצה להציג על המסך קטעי מלל שונים בצורות שונות. למשל, להדגיש כותרות, להבליט מילים מסוימות והכי חשוב לאפשר מעברים (קישורים) מקטע אחד לקטע אחר או מדף אינטרנט אחד לדף אינטרנט אחר בעזרת הקלקה על קטע מלל מסוים בעזרת חץ סימון העכבר. פעולה זו נקראת הפניית קישור ומהווה את אחד מאבני הבניין החשובים של השפה.

שפת HTML הנה פשוטה ביותר ללמידה ושימוש.
כמעט ולא נמצא שפה קלה ללמידה ממנה.

מבנה דף אינטרנט בסיסי

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

אז כיצד נראית תגית?

נתחיל בדוגמא פשוטה של דף אינטרנט המציג על המסך את המשפט:

Hello World!

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

הערה: לרוב התגיות יש תגיות סיום אך כפי שנראה בהמשך לא לכולן.

את משמעותה של כל תגית נסביר בעזרת הטבלה הבאה:

תגית	משמעות
<html> … </html>	הגדרת קטע בקובץ המכיל קוד הכתוב בשפת HTML.
<head> … </head>	הגדרת קטע "ראש" בתוך אזור ה- HTML. קטע זה יכיל הגדרות שונות עבור המחשב עליהן נלמד בהמשך.
<body> … </body>	הגדרת קטע "גוף" בתוך אזור ה- HTML. קטע זה יכיל את תוכן דף האינטרנט שיוצג על המסך.

נעיר כבר כעת כי שפת HTML הנה גמישה מאוד וסבילה מאוד לחוסרים וטעויות. למשל, ניתן להשמיט מהמבנה הבסיסי את תגיות הסיומת של <body/> ואף של <html/> ועדיין הקובץ יהיה קריא עבור המחשב ותוכן האתר יוצג כהלכה על המסך. אך מאוד מומלץ לכתוב כראוי ואף חובה אם רצוננו שהקובץ יהיה קריא עבור כל דפדפן אינטרנט וגם בגלישה מטלפון סלולרי.

ניתן לכתוב את התגיות גם תוך שימוש באותיות גדולות, למשל <HEAD> ו- <BODY>. כיום רוב הדפדפנים תומכים גם בכתיבה באותיות גדולות וגם באותיות קטנות. אך התקינה האחידה שתתקבל בעתיד תקבע תמיכה רק באותיות קטנות, ולכן מומלץ כבר כעת להיצמד לשימוש באותיות קטנות בלבד בכתיבת התגיות.

עריכת דף אינטרנט והצגתו

דף האינטרנט כתוב בתוך קובץ. עבור דף אינטרנט הכתוב בשפת HTML יהיה הקובץ בעל סיומת של html או htm (שריד למגבלה היסטורית שאינה קיימת יותר של אורך סיומת שם קובץ לעד 3 אותיות). זהו קובץ טקסט פשוט ולא נדרשת תוכנה מיוחדת או עורך תמלילים מיוחד כדי לכתוב בקובץ, לערוך בו שינויים ולשמור אותו. למשל, ניתן להשתמש בתוכנה הפשוטה של "פנקס הרשימות" (notepad) בכדי לפתוח את הקובץ ולערוך אותו.

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

תגיות עיצוב מלל

כעת נרצה לעצב את המלל המוצג על המסך. לשם כך, קיימות התגיות הבאות:

תגית	משמעות
<h1> … </h1> <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> … </h6>	הגדרת קטע מלל ככותרת ברמה ראשונה. הגדרת קטע מלל ככותרת ברמה שנייה. הגדרת קטע מלל ככותרת ברמה שלישית. הגדרת קטע מלל ככותרת ברמה רביעית. הגדרת קטע מלל ככותרת ברמה חמישית. הגדרת קטע מלל ככותרת ברמה שישית.
<p> … </p>	הגדרת קטע מלל כפסקה.
<br />	שבירת שורת מלל וירידה לשורה חדשה.
<bdo dir="rtl/ltr"> … </bdo>	הגדרת כיוון המלל.
<pre> … </pre>	מעבר לגופן חסר עיצוב בעל ריווח קבוע, שמירה על גודל רווחים ועל מעברי שורה.
<tt> … </tt>	מעבר לגופן בעל רוחב זהה לאותיות ולרווחים.
<b> … </b>	הגדרת קטע מלל בעל הדגשה.
<strong> … </strong>	הגדרת קטע מלל בעל הדגשה (ברוב הדפדפנים התוצאה תהיה זהה לשימוש בתגית <b>).
<i> … </i>	הגדרת קטע מלל בעל הטיה אלכסונית.
<em> … </em>	הגדרת קטע מלל בעל הבלטה (ברוב הדפדפנים התוצאה תהיה זהה לשימוש בתגית <i>).
<big> … </big>	הגדרת קטע מלל בעל כתב גדול יותר.
<small> … </small>	הגדרת קטע מלל בעל כתב קטן יותר.
<del> … </del>	קו חוצה למלל מחוק
<ins> … </ins>	קו תחתון למלל חדש
<u> … </u>	הגדרת קטע מלל בעל קו תחתון.
<sub> … </sub>	הגדרת קטע מלל ככתב תחתי.
<sup> … </sup>	הגדרת קטע מלל ככתב עילי.
<abbr title="[text]"> … </abbr>	הוספת תיבת ביאור לשם מקוצר
<acronym title="[text]"> … </acronym>	הוספת תיבת ביאור למילה שהיא ראשי תיבות
<span> … </span>	עיצוב CSS מקומי

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

שימוש בתגיות <h1> עד <h6>:

This is headline #1

This is headline #2

This is headline #3

This is headline #4

This is headline #5

This is headline #6

שימוש בתגיות <p> ו- <br>:

This is a paragraph that contains some text in it. This paragraph may be long and may appear over few lines on your computer's screen display. When this paragraph ends and another paragraph begins you will see that it starts from a new line.

This is a new paragraph.

However we can always break a line.
Inside a paragraph or elsewhere.

And use empty line(s) as a space.

שימוש בתגיות <pre>, <bdo> ו- <tt>:

text direction is left to right
text direction is right to left

This font is equal in spaces and sizes
and is naked of any style.

This font also has equal spaces and sizes.

שימוש בתגיות <i>, <strong>, <b> ו- <em>:

Some words can be bold,
and some can be strong.
Some may have an italic look,
and some can be emphesized.

שימוש בתגיות <sup>, <small>, <big> ו- <sub>:

Some words can be bigger,
while others smaller.
Some can be placed as ^superscript,
And some as _subscript.

שימוש בתגיות <abbr> ו- <acronym>:

Have a tooltip for abbreviated words like ISR.
Have a tooltip for acronyms like UFO.

note: the <abbr> tag doesn't work in IE6 or earlier !

שימוש בתגית <span>:

We can define a text section with its own style. More on this in the CSS chapter.

תגיות הוספת קישורים ותמונות

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

בעזרת התגית <img> ניתן להוסיף תמונות לדף האינטרנט. התמונה נמצאת בקובץ נפרד והשיוך אליה מתבצע בעזרת הגדרת מיקום קובץ התמונה במאפיין src. ניתן להציג את התמונה בשונה מגודלה המקורי בקובץ על-ידי הגדרת המאפיינים width ו- height.

ניתן להגדיר את התמונה כולה כבעלת הפנייה למיקום אחר על-ידי עטיפתה בתגית <a>. אם נרצה להגדיר אזורים שונים בתוך התמונה כבעלי הפניות למיקומים שונים נצטרך להשתמש בתגיות <map> ו- <area>.

<a href=""> … </a> ... <a id=””> … </a>	הגדרת קטע מלל (ואו תמונה) כבעל הפנייה מקשרת. href – הפנייה למקום אליו יוקפץ הדף. למקום בתוך דף יש לציין שם id של התגית שאליה יש לקפוץ כשלפניו #. לדף אחר יש לציין את מיקום הדף ושמו. כדי להגדיר עוגן בתוך הדף אליו תתבצע הקפיצה ניתן להשתמש בתגית <a> (ללא href) ונשתמש במאפיין id כדי לתת שם ללא התו #. אם כבר קיימת תגית באזור בדף אליו רוצים לקפוץ ניתן להגדיר בו את המאפיין id.
<img src="" width="" height="" />	הוספת תמונה מתוך קובץ. src – הפנייה לקובץ המכיל את התמונה. width – ניתן להגדיר במספר פיקסלים כמו 200px או כאחוז מרוחב החלון בו היא נמצאת. אם לא מוגדר תוצג התמונה ברוחבה האמיתי. height – גובה התמונה. מוגדר כמו width.
<img src="" usemap="#[text]" /> <map name="[text]"> <area shape="rect/circle/poly" coords="" href="" alt="[text]" /> </map>	הוספת תמונה מתוך קובץ והגדרת אזורים בה כקישורים. src – הפנייה לקובץ המכיל את התמונה. usemap ו- name – שם המפה שתשמש לקישורים. shape – צורת האזור במפה שישמש לקישור: מרובע, עיגול או מצולע. coords – למלבן יש לתת 2 זוגות של נקודות ציון, של x ואחריו y, המהוות את פינתו השמאלית העליונה והימנית התחתונה. לעיגול את מרכזו ואת הרדיוס. למצולע את זוגות נקודות הציון של כל קודקודיו. כל המספרים הם ביחידות של פיקסלים ומופרדים בפסיק. href – הפנייה לנקום אליו יוקפץ הדף. alt ו- title – הערה שתופיע כשסמן העכבר עובר מעל לתחום המוגדר כקישור. הערה: יש להגדיר את שניהם כי חלק מהדפדפנים תומכים באחד ולא באחר וחלק להיפך.

להלן דוגמה המכילה את התגיות <a>, <img>, <map> ו- <area> המשמשות להפניות וקישורים:

<br />
You can either go to <a href="">a different internet page</a> or to jump to <a href="#link1a">a specific text location</a> in this page or to <a href=""> do both</a>.<br />
<br />
Here is  a picture <img src="picture.gif" /> added to the internet page.<br />
<br />
A picture <a href="#link1b"><img src="picture.gif" width="20%" alt="A picture of House, Pool & Sun" title="Jump into the house" /></a> can also be used as a link.<br />
<br />
If the picture <a href="#link1c"><img src="picture2.gif" width="20%" alt="A picture of House, Pool & Sun" title="Jump into the house" /></a> is not available then the alt parameter's text is presented instead <br />
<br />
And also the picture can be divided into specific ranges each with its own link:<br />
<img src="picture.gif" usemap="#my_map" /><br />
   <map name="my_map"><br />
   <area shape="rect" coords="135,104, 211,132" href="#link1b" alt="Pool" title="Jump into the Pool" /><br />
   <area shape="circle" coords="199,22,20" href="#link1c" alt="Sun" title="Jump into the Sun" /><br />
   <area shape="poly" coords="90,16, 127,37, 127,100, 91,136, 15,136, 15,73, 53,35" href="#link1a" alt="House" title="Jump into the House" /><br />
   </map>
<br />
<a id="link1a">House - this is the first link<br /></a>
<br />
<a id="link1b">Pool - this is the second link<br /></a>
<br />
<a id="link1c">Sun - this is the third link<br /></a>
<br />

You can either go to a different internet page or to jump to a specific text location in this page or to do both.

Here is a picture added to the internet page.

A picture can also be used as a link.

If the picture is not available then the alt parameter's text is presented instead

And also the picture can be divided into specific ranges each with its own link:

House - this is the first link

Pool - this is the second link

Sun - this is the third link

תגיות לרשימות

בשפת HTML ישנן תגיות מיוחדות המאפשרות הצגה של רשימות. ניתן להציג רשימות בשלושה אופנים שונים:

בעזרת התגית <dl> ניתן לבנות רשימת הגדרות למושגים. כל מושג יוצג בעזרת התגית <dt> וכל הגדרה המצורפת מייד אחריו תוצג בעזרת התגית <dd>.

בעזרת התגית <ul> ניתן לבנות רשימה לא ממוספרת. כל פריט ברשימה יוצג בעזרת התגית <li>.

בעזרת התגית <ol> ניתן לבנות רשימה ממוספרת. כל פריט ברשימה יוצג בעזרת התגית <li>.

<dl> <dt> … </dt> <dd> … </dd> </dl>	רשימת הגדרות – Definitions List כותרת ההגדרה – Definition Title תיאור ההגדרה – Definition Description
<ul> <li> … </li> </ul>	רשימה לא ממוספרת – Unordered List פריט ברשימה – List Item
<ol> <li> … </li> </ol>	רשימה ממוספרת – Ordered List פריט ברשימה – List Item

להלן דוגמה המכילה את התגיות המשמשות לרשימות:

Here is a Definition List of some nouns:

car: private transportation vehicle
bus: public transportation vehicle

Here is an Unordered List:

onion
cucumber
tomato
garlic

Here is an Ordered List:

onion
cucumber
tomato
garlic

תגיות לטבלאות

לבניית טבלאות קיימות תגיות נוספות. את קיומה של טבלה מגדירים בעזרת התגית <table>. בעזרת התגית <caption> ניתן לתת כותרת לטבלה. התגית <thead> מגדירה את האזור בו יוגדר ראש הטבלה – המכיל את כותרות העמודות. התגית <tbody> מגדירה את האזור בו יוגדר גוף הטבלה – הערכים עצמם. התגית <tfoot> מגדירה את האזור בו יוגדר סוף הטבלה – המכיל על פי רוב סיכום של ערכי העמודות למשל. הטבלה מורכבת משורות ומעמודות. תחילה יש להגדיר את השורות, שורה אחרי שורה, בעזרת התגית <tr> בתוך כל שורה נגדיר את העמודות, עמודה אחרי עמודה. בראש הטבלה יוגדרו כותרות העמודות בעזרת התגית <th>. בגוף הטבלה יוגדרו העמודות המכילות נתונים בעזרת התגית <td>.

<table width="[pixels/%]" border="[pixels]" frame="void/border/box/ above/below/ hsides/vsides/lhs/rhs" rules="all/none/ rows/cols/groups" cellpadding="[pixels]" cellspacing="[pixels]" summary="[text]"> <caption> … </caption> <thead> <tr align="right/left/center/justify/char" valign="top/middle/bottom/baseline" char="[character]" charoff="[number]"> <th colspan="[number]" rowspan="[number]" align=" right/left/center/justify/char " valign=" top/middle/bottom/baseline " char="[character]" charoff="[number]" abbr="[text]" axis="[category-name]" scope="col/colgroup/row/rowgroup"> … </th> </tr> </thead> <tbody> <tr> <td colspan="[number]" rowspan="[number]" align=" right/left/center/justify/char " valign=" top/middle/bottom/baseline " char="[character]" charoff="[number]" abbr="[text]" axis="[category-name]" scope="col/colgroup/row/rowgroup" headers ="[header's id]"> … </td> </tr> </tbody> <tfoot> <tr> <td> … </td> </tr> </tfoot> </table>

להלן דוגמה המכילה את התגיות המשמשות לרשימות:

<table width="80%" border="2px" frame="border" rules="rows" cellpadding="10px" cellspacing="5px" summary="example of a table">
   <caption>Name’s Database</caption>
   <thead>
   <tr align="left" valign="middle">
      <th align="left" valign="middle" axis="name">
      Name </th>
       <th align="left" valign="middle" axis="age">
      Age </th>
      <th align="left" valign="middle" axis="phone">
      Phone# </th>
   </tr>
   </thead>
   <tbody>
   <tr align="left" valign="middle">
      <td align="left" valign="middle" axis="name">
      Avner </td>
       <td align="left" valign="middle" axis="age">
      24 </td>
      <td align="left" valign="middle" axis="phone">
      480581 </td>
   </tr>
   <tr align="left" valign="middle">
      <td align="left" valign="middle" axis="name">
      Amir </td>
       <td align="left" valign="middle" axis="age">
      25 </td>
      <td align="left" valign="middle" axis="phone">
      479320 </td>
   </tr>
   <tr align="left" valign="middle">
      <td align="left" valign="middle" axis="name">
      Osnat </td>
       <td align="left" valign="middle" axis="age">
      25 </td>
      <td align="left" valign="middle" axis="phone">
      479173 </td>
   </tr>

</tr>
   </tbody>

</table>

Name’s Database
Name	Age	Phone#
Avner	24	480581
Amir	25	479320
Osnat	25	479173

תגיות לטפסים

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

בעזרת התגית <form> נגדיר טופס. בתוך הטופס ניתן להגדיר שדות ואלמנטים שונים.

בעזרת התגית <input> נוכל להגדיר בתוך הטופס:

לחצן

בחירה רבת אפשרויות

בחירה חד-אפשרית

תיבה לכתיבת מלל

תיבה לכתיבת סיסמא

לחצן לשליחת הטופס

לחצן לפתיחת חלון חיפוש קובץ

שדה מוסתר

הוספת תמונה כלחצן לסיום מילוי הטופס ושליחתו

לחצן לאיפוס הטופס

התגית <label> מאפשרת לעטוף מלל השייך לבחירת רב אפשרית או חד-אפשרית (checkbox או radio) כך שהקלקה עם העכבר על המלל יסמן את הבחירה המקושרת אליו. הקישור בין המלל לבין הבחירה מתבצע על-ידי מתן שם זהה במאפיין for של תגית ה <label> למאפיין id של התגית <input>.

עם התגית <select> נוכל לבנות תפריט הנפתח מטה. אפשרויות בחירה בתפריט נוסיף בעזרת התגית <option>.

עם התגית <textarea> נוכל להקצות בטופס שטח לכתיבת מלל על-ידי המשתמש.

עם התגית <button> נוכל להוסיף לחצני פעולה שונים.

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

להלן טופס לדוגמה המשתמש בחלק מהתגיות המשמשות ליצירת טופס:

<form>
   <fieldset>
   <legend>My example Form</legend>
   <br />

1. Me and HTML:<br />
   <label for="love">I love HTML</label>
   <input type="radio"
              value="love_html"
              checked="checked"
              name = “me_and_html”
              id="love" /><br />
   <label for="hate">I hate HTML</label>
   <input type="radio"
              value="hate_html"
              name = “me_and_html”
              id="hate" /><br />
   <br />

2. I also plan to learn:<br />
   <label for="CSS">CSS</label>
   <input type="checkbox"
              value="more_lang_CSS"
              checked="checked"
              name = “more_lang”
              id="CSS" /><br />
   <label for="JS">JavaScript</label>
   <input type="checkbox"
              value="more_lang_JS"
              name = “more_lang”
              id="JS" /><br />
   <label for="ASP">ASP</label>
   <input type="checkbox"
              value="more_lang_ASP"
              name = “more_lang”
              id="ASP" /><br />
   <br />

3. My next language to learn is:
   <select>
      <option>HTML</option>
      <option>CSS</option>
      <option>JS</option>
      <option>ASP</option>
   </select><br />
   <br />

4. My comments for this site are:<br />
   <textarea cols="24" 
                rows="6" 
                name="comments">
   </textarea><br />

<br />

5. I have completed this form:<br />
   <button name="submit_my_form"
             type="submit"
             value="submit_the_form">
   Submit the Form
   </button>
   or 
   <button name="reset_my_form"
             type="reset"
             value="reset_the_form">
   Reset the Form
   </button><br />
   <br />
   
   Thanks.<br />

</fieldset>
</form>

סיכום ו- CSS

למדתם את שפת HTML והנכם יכולים כעת לבנות דפי אינטרנט. אך לפני שתתחילו בכך חובה להכיר, ללמוד וליישם את העיצובים בעזרת שפת CSS.

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

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

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

לא ניתן לשנות את עיצוב האתר בקלות. היה צורך לעבור על כל הגדרות העיצוב החבויות בו ושחוזרות על עצמן בתגיות זהות.

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

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

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

שפת CSS הינה פשוטה מאוד ללימוד ושימוש ומהווה רק הגדרות עיצוב. דף אינטרנט שכתוב טוב מכיל את הגדרות העיצוב שלו בנפרד בקובץ CSS.

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

ב ה צ ל ח ה

בחזרה למעלה