Inroduction to HTML  

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

 

הקדמה

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

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

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

קשה גם לשנות את התצוגה בשלב יותר מאוחר . עקב כך הפתרון לבעיה זו היה ב style sheets  שיטה זוהיתה ידועה עוד לפני תחילת הפרויקט של WWW

קצת אחרי תחילת הקמתו של W3C , התגבשה נוסחא לשימוש ב style sheets , וחברות חלוצות בתחום כמו ARENA   , EMACS -W3 שחררו לשוק בתחילת 1995 דפדפנים התומכים בשיטה זו . חברות אחרות כמו IIRC , Navipress , Panorama וכמה חברות מסחריות אחרות הוציאו לשוק באותה תקופה דפדפנים \ עורכי תמלילים שתומכים בשיטה זו. הדפדפן המסחרי הראשון בהיקף גדול שתמך בשיטת  style sheets הוא MSIE בשנת 1996 .

למרות היכולת "למתוח" את מאפייני HTML  על מנת לתת תצוגה ראויה , המגמה היא שהיבט זה עובר לכיוון style sheets .

Elements , Tags and Attributes  ( אלמנטים , תגים ותכונות )

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

<h2>      Tags and Attributes      </h2>

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

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

אם תרצה לדוגמא להפוך חלק מ header בכתב italics  :

<h2>
      Tags <i>and</i> Attributes
</h2>

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

ישנם אנשים שחושבים ששפת HTML  שפה לא קריאה . אני חושב שזה לא כך .הכל תלוי אם כותבים את המסמך באופן ברור .כדאי לך לעיין בקבצי המקור של אתרים ידועים , בכדי ללמוד מהם איך כותבים "נכון" . בדפדפן explorer אפשר להגיע לקבצי המקור ע"י בחירת View ואז Source .

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

מבנה המסמך

מסמך HTML  מורכב משני חלקים עיקריים Head  , Body   .

המבנה הבסיסי של המסמך נראה כך :

<HTML>

<Head> ... </Head>

<Body> ... </Body>

</HTML>

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

לא נרחיב את הדיבור על תג Head כאן , אלא במקום אחר  .האלמנט החשוב שצריך לדעת שקיים ב Head  הוא תג <TITLE> .

TITLE  כלומר כותרת , חייבת להופיע בכל מסמך . זו הכותרת שמופיעה בראש הדפדפן.  

ברגע שגולש ישמור BOOKMARK  למסמך זה , או יסתכל ב HISTORY  , זה הטקסט שיראה .  

דאג לבחור בכותרת הולמת את אופי המסמך . Introduction לא כותרת מספקת למסמך זה , אך Introduction to HTML בהחלט כן !

כותרת מסמך זה נכתבה בתוך אלמנט Head  כאמור , כך ,

<Title>A Basic Introduction to HTML</Title>

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

כך נראה מסמך HTML יותר מציאותי :

 

1:<HTML>

2:<Head>

3:  <Title>A Simple Document</Title>

4:  <Meta Name  = "Keywords"

5:      Content = "Hypertext">

6:</Head>

7:<Body>

8:... This stuff is

      what the user sees ...

9:</Body>

10:</HTML>

 

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

1.הצהרה שזהוא מסמך HTML .

2.Head מכיל אלמנטים על המסמך .

3.Title בשביל הכותרת שבראש הדפדפן .

4.Meta   כאמור לעיל

5.רוב מנועי החיפוש משתמשים במילות מפתח אלו .

6.תג סוגר ל <Head> .

7.Body מכיל את תכולת המסמך .

8. בלה בלה בלה ...

9. תג סוגר ל <Body> .

10. תג סוגר ל <HTML> .

  HTML תומך גם בטפסים אינטראקטיביים interactive forms  , מיפוי תמונות ,

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

Headers

הכותרת לעיל  היא Header , כלומר כותרת לקטע חדש במסמך .יש שישה גודלי Headers

H1, H2, H3, H4, H5, H6 

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

 

Anchors and Links

 

מאפיין יסודי שמעניק עוצמה ל WWW  הוא קישורים בתוך הטקסט  . התג שיוצר את אותו קישור הוא תג העוגן או anchor tag  <a> . שימוש נפוץ שלו הוא ע"י המאפיין HREF אשר מציין את היעד אליו יש את הקישור .

IMAGES  תמונות

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

 

 

<Img      src     = "/Icons/graphics.gif">

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

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

<a      href    = "../../Graphics/">

<Img      src     = "/Icons/graphics.gif"

      width   = 108

      height  = 44

      border  = 0

      hspace  = 16

      alt     = "Graphics"

      align   = left

      ></a>

מאפייני סגנון – Character Styles

  כעת נראה איך מדגישים טקסט

Let's see how to <em>emphasise</em> some text..

EM   נקרא מאפיין סגנון לוגי : אתה מדגיש מה אתה מנסה לעשות , בניגוד ל "איך לעשות זאת " מאפיין נוסף הוא STRONG

Another one is <strong>STRONG</strong>. 

בדר"כ מדגישים ע"י italics

Emphasis is usually indicated with <i>italics</i>.

הדגשת Strong  מדגישים גם ע"י bold

'Strong' is usually rendered as <b>bold</b>.

מאפיין SAMP דומה למאפיין teletype .

 

<samp>SAMP</samp> is rendered as

<tt>teletype</tt> font.

אם אתה מעוניין שמשהו יופיע בדיוק כמו שאתה מקליד אותו , השתמש בתג PRE

   

And if you want something to appear

      exactly as you typed it, use PRE.

שים לב לכך שתגי HTML  תקפים בתוך PRE כך שאם תרצה שיופיע במסמך ה HTML שלך סוגרים , או תגי HTML   תשתמש ב &lt;  בשביל >  או ב &gt; בשביל <

או לחלופין השתמש בתג XMP   למרות שהשימוש בו לא מומלץ כיוון שכנראה הוא יצא מהתקן בקרוב .

תג FONT  יכול לתת לך יותר ...

And the FONT tag lets you do more..

<font size=5 color=red>

      And the FONT tag lets you do more..

</font>

PARAGRAPHS AND LINE BREAKS

כמו שצוין לעיל דפדפני ה WEB  מתעלמים מרווחי ושורות חדשות  , אלא אם כן הם מצויינים ע"י תגי מיוחדים . אם אתה מעוניין בקפיצה לשורה חדשה , השתמש ב <br>

אם אתה מעוניין ברווח פיסקא , השתמש ב <p>

 לתג זה יש תג סוגר (אופציונלי ) </p>

LISTS

  יש כמה סוגי רשימות .שלושה סוגים חשובים הם 

1.                             ORDERED

2.                             UNORDERED

3.                             DEFENITIONED

 

רשימה שהיא ORDERED  , פריטיה ממוספרים . מממשים זאת ע"י :

 

<ol>

<li>Ordered.

<li>Unordered.

<li>Definition.</ol>

כדי לבצע אותה רשימה , ללא המספרים :

יש להשתמש ב

<ul>

<li>Ordered.

<li>Unordered.

<li>Definition.</ul>

רשימת DEFENITION נראת כך :

Ordered Lists.

The list items are ordered, e.g. by numerals.

Unordered Lists.

The list items aren't ordered particularly.

Definition Lists.

The list items have two parts: a title DT and a description DD.

  הסינטקס לכך הוא

<dl>

<dt>      Ordered Lists.

<dd>      The list items are ordered,

            e.g. by numerals.

<p>

<dt>      Unordered Lists.

<dd>      The list items aren't ordered.

<p>

<dt>      Definition Lists.

<dd>      The list items have two parts:

      a title DT and a description DD.

</dl>

TABLES

עקוב אחרי הלינק לעיל על מנת לקבל מידע מפורט לגבי טבלאות . TABLES מכילים שורות המכילות HEADERS  וגם DATA CELLS  

   

Name

Tag

Typical Appearance 

Table

TABLE

A table like this  

Row  

TR

A row like this  

Head

TH

Bold, centered 

Data

TD

Plain, left aligned

הסינטקס לזה הוא :   

<table      border=2 cellpadding=8 bgcolor=white>

<tr><th> Name      </th><th> Tag</th>

      <th>      Typical Appearance </th></tr>

 

<tr><th> Table      </th><th> TABLE</th>

      <td>A table like this     </td></tr>

 

<tr><th> Row      </th><th> TR </th>

      <td>    A row like this     </td></tr>

<tr><th> Head      </th><th> TH </th>

      <td>      Bold, centered         </td></tr>

<tr><th> Data      </th><th> TD </th>

      <td>      Plain, left aligned</td></tr>

</table>

מאפייני תג TABLE  הם :

BGCOLOR  צבע הרקע של ה TABLE . אפשר להשתמש במאפיין זה גם בתוך ה CELLS BORDER  קובע את עובי המסגרת של ה TABLE  ביחידות של PIXELS CELLPADDING  קובע כמה רווח יהיה בין המסגרת לבין התוכן של ה CELL

חזרה לדף הראשי