המדריך העברי ל-HTML תקני

This document was written by Shlomi Fish and is available under the terms of either the:

  1. The Public Domain/CC0 1.0 Universal (or at your option any later version) as defined by the Creative Commons project or your local jurisdiction.

  2. The Creative Commons Attribution License (CC-by) version 3.0 (or at your option any later version of the same license.)

  3. The MIT Expat License.

היסטוריית גירסאות
גירסה 278027 April 2008shlomif
Started working on this document after forking the template of an older one.

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

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

  1. ידע בסיס בעריכת טקסט פשוט. לא מדובר בשימוש ב-וורד, אלא בעורך טקסט כמו Notepad. מומלץ בחום שימוש בעורך טקסט מתקדם יותר כמו Notepad++ או תחליף אחר הולם לסביבת העבודה החביבה עליכם.

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

  3. אמביציה, רעב לידע ונכונות ללמוד.

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

תגית סוגרת הינה פשוט </tag-identifier> .

הנה דוגמה להמחשה באמצעות התגית <p> המייצגת פיסקה (Paragraph):


<p>
First paragraph - for real this time.
</p>

<p>
Second paragraph - La la la la la.
</p>


ואנו מקבלים את:

שתי פסקאות ללא תגיות P

כפי שניתן לראות הפעם קיבלנו שתי פיסקאות נפרדות. זאת משום שהדפדפן זיהה את התגית <p> כתוחמת של פיסקה. כל מה שבין התגית הפותחת לסוגרת נחשב כתוכן של הפסקה.

עכשיו בו נכיר תגית נוספת המאפשרת לנו לסמן טקסט כקישור. לתגית קוראים "a" (קיצור של "Anchor") והיא מקבלת תכונה בשם href כפרמטר. הבא נראה אותה בפעולה:


<p>
Here is a link: <a href="http://www.w3.org/">The World-Wide-Web Consortium</a>.
</p>

<p>
And here is another link - <a href="http://en.wikipedia.org/wiki/HTML">the
    English Wikipedia Article about HTML</a>.
</p>


דוגמה לתגית "a"

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

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

הנה הדוגמה:


<p>
<i>Alice</i> was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do: once or twice she had peeped
into the book her sister was reading, but it had no pictures or
conversations in it, "and what is the use of a book," thought Alice,
"without <b>pictures</b> or <b>conversation?</b>"
</p>

<p>
From <a href="http://www.gutenberg.org/etext/11">Alice's
    Adventures in Wonderland - Chapter 1</a>.
</p>



דוגמה לגופן מעובה ונטוי

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

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

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


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Excerpt from the Three Musketeers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>Excerpt from the Three Musketeers</h1>

    <p>
A young man--we can sketch his portrait at a dash. Imagine
to yourself a Don Quixote of eighteen; a Don Quixote without
his corselet, without his coat of mail, without his cuisses;
a Don Quixote clothed in a woolen doublet, the blue color of
which had faded into a nameless shade between lees of wine
and a heavenly azure; face long and brown; high cheek bones,
a sign of sagacity; the maxillary muscles enormously
developed, an infallible sign by which a Gascon may always
be detected, even without his cap--and our young man wore a
cap set off with a sort of feather; the eye open and
intelligent; the nose hooked, but finely chiseled. Too big
for a youth, too small for a grown man, an experienced eye
might have taken him for a farmer's son upon a journey had
it not been for the long sword which, dangling from a
leather baldric, hit against the calves of its owner as he
walked, and against the rough side of his steed when he was
on horseback.
    </p>

    <p>
    Taken from <a
        href="http://www.gutenberg.org/etext/1257">the
    Project Gutenberg page</a>.
    </p>

</body>
</html>


היא נראית כך:

דוגמה מלאה מספר 1

עכשיו למספר הסברים בנוגע לדוגמה:

  1. הצהרת ה-"DOCTYPE" בהתחלה מצהירה שסוג המסמך הוא "XHTML 1.0 Transitional". יש לשם הצהרה כזאת בהתחלה כדי שאפשר יהיה לזהות על פי איזה תקן המסמך נכתב.

  2. ניתן להבחין שמהסמך מתחיל מתגית פתיחה <html> ומסתיים בתגית </html> במסמך XML יש לכלול את כל התוכן בתוך תגית פתיחה ותגית סיום. במקרה של מסמך HTML מדובר בתגית <html>.

  3. לתגית <html> מקבלת מספר תכונות. הראשונה שבהן היא "xmlns" המצהירה על מרחב-השמות של ברירת המחדל של המסמך. במסמכי XHTML ניתן לכלול מרחבי שמות אחרים, המאפשרים שילוב של תגיות של תחבירי XML אחרים. כרגע לא צריך להתעמק בזה יותר מדי.

    התכונות האחרות ("lang") מצהירות על שפת המסמך, במקרה שלנו אנגלית אמריקאית. ראוי לציין שכדאי שהן lang והן xml:lang תקבענה ביחד.

  4. האלמנט <head> מכיל כותר למסמך ומכיל מעט מטה-מידה הקשור אליו.

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

    רצוי מאוד לתת כותרת בעלת משמעות למסמך כדי שאנשים ותוכניות מחשב (כמו מנועי חיפוש) יוכלו לדעת מייד מה תכליתו.

  6. מטרת תגית ה-<meta> המסוימת הזאת היא להצהיר שקידוד המסמך הוא "utf-8". יש שימושים אחרים לתגיות "meta" ואת חלקם נראה בהמשך.

    ניתן גם לראות שהקו הנטוי ("/") בסוף התגית אומר למפענח שהתגית סוגרת את עצמה. זה כמו לומר:

    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    
    

    אבל מאפשר תאימות טובה יותר לדפדפנים ישנים.

  7. האלמנט <body> מכיל את גוף הטקסט של המסמך ומה שיוצג למשתמש.

  8. האלמנט <h1> מכיל כותרת המוצגת בגוף הטקסט. יש גם את <h2>, <h3> עד <h6>. מומלץ לחלק את המסמך לחלקים על-ידי הכותרות כך שידעו מה משמעות כל חלק.

כדי לוודא שהמסמך שכתבתם (או חוללתם) הוא תקין, רצוי לבצע לו אימות (Validation) באמצעות מאמתים מקוונים:

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

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

ככה נראה אימות של דף כתקין בעזרת המאמת:

אימות של הדף

בפרק זה נכיר תגי HTML נוספים ושימושיים.

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


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Page with Table-of-Contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>Page with Table-of-Contents</h1>

<ul>
<li><a href="#alice">Alice in Wonderland</a></li>
<li><a href="#gulliver">Gulliver's Travels</a></li>
<li><a href="#treasure">Treasure Island</a></li>
<li><a href="#musketeers">The Three Musketeers</a></li>
<li><a href="#looking_glass">Through The Looking Glass</a></li>
</ul>

<h2 id="alice">Alice in Wonderland</h2>

<p>
Alice in Wonderland is a book by <a
href="http://en.wikipedia.org/wiki/Lewis_Carroll">Lewis Carroll</a>, which was
the pen name of Charles Lutwidge Dodgson.
</p>

<h2 id="gulliver">Gulliver's Travels</h2>

<p>
Gulliver's Travels is a novel by Jonathan Swift. While not intended as
Children's literature, it became popular as such.
</p>

<h2 id="treasure">Treasure Island</h2>

<p>
Treasure Island is a novel by Robert Louis Stevenenson about pirates.
</p>

<h2 id="musketeers"><a href="http://en.wikipedia.org/wiki/The_Three_Musketeers">The
Three Musketeers</a></h2>

<p>
This is a historical fiction novel by Alexandre Dumas, père.
</p>

<h2 id="looking_glass">Through The Looking Glass</h2>

<p>
The follow-up to <a href="#alice">Alice in Wonderland</a>.
</p>

</body>
</html>


מטרת התגית <head>...</head>, שכבר ראינו בדוגמאות קודמות היא לספק מטה-מידע (meta-data) עבור המסמך. ניתן בעזרתה לקבוע קישורים גלובליים למסמך (כמו גליון-סגנון, המסמך הבא, המסמך הקודם, הזנות ווב של RSS או Atom, ) וכו לשייך סגנונות היחודיים לדף. בו נעבור על מה שניתן לעשות.

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

מומלץ מאוד לקבוע לכל מסמך תגית title משמעותית משום שמנועי חיפוש מציגים אותה בקישור, מה שמלמד על תוכנה, וכן היא מוצגת בכותרת של חלון הדפדפן. ראוי לציין שבתגית ניתן רק להכניס טקסט פשוט ולא תגיות נוספות של ׁHTML . ניתן להכניס בתוכה SGML entities במידת הצורך, אבל בכל מקרה עדיף להשתמש בתווים של UTF-8 במידת האפשר ולהגביל את השימוש ב-entities לתוים מיוחדים כמו &amp;, &lt; &gt; וכו.

הנה דוגמה קטנה:


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>This title was intentionally left blank.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <h1>Excerpt from the Three Musketeers</h1>

    <p>
A young man--we can sketch his portrait at a dash. Imagine
to yourself a Don Quixote of eighteen; a Don Quixote without
his corselet, without his coat of mail, without his cuisses;
a Don Quixote clothed in a woolen doublet, the blue color of
which had faded into a nameless shade between lees of wine
and a heavenly azure; face long and brown; high cheek bones,
a sign of sagacity; the maxillary muscles enormously
developed, an infallible sign by which a Gascon may always
be detected, even without his cap--and our young man wore a
cap set off with a sort of feather; the eye open and
intelligent; the nose hooked, but finely chiseled. Too big
for a youth, too small for a grown man, an experienced eye
might have taken him for a farmer's son upon a journey had
it not been for the long sword which, dangling from a
leather baldric, hit against the calves of its owner as he
walked, and against the rough side of his steed when he was
on horseback.
    </p>

    <p>
    Taken from <a
        href="http://www.gutenberg.org/etext/1257">the
    Project Gutenberg page</a>.
    </p>

</body>
</html>


ניתן גם לכלול הוראות CSS נפרדות באמצעות תגית ה-style שבאה בתוך תגית ה-head, לדוגמה באופן הבא:


<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>This title was intentionally left blank.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    body { color: green; }
</style>
</head>
<body>
    <h1>Excerpt from the Three Musketeers</h1>

    <p>
A young man--we can sketch his portrait at a dash. Imagine
to yourself a Don Quixote of eighteen; a Don Quixote without
his corselet, without his coat of mail, without his cuisses;
a Don Quixote clothed in a woolen doublet, the blue color of
which had faded into a nameless shade between lees of wine
and a heavenly azure; face long and brown; high cheek bones,
a sign of sagacity; the maxillary muscles enormously
developed, an infallible sign by which a Gascon may always
be detected, even without his cap--and our young man wore a
cap set off with a sort of feather; the eye open and
intelligent; the nose hooked, but finely chiseled. Too big
for a youth, too small for a grown man, an experienced eye
might have taken him for a farmer's son upon a journey had
it not been for the long sword which, dangling from a
leather baldric, hit against the calves of its owner as he
walked, and against the rough side of his steed when he was
on horseback.
    </p>

    <p>
    Taken from <a
        href="http://www.gutenberg.org/etext/1257">the
    Project Gutenberg page</a>.
    </p>

</body>
</html>


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

דוגמה לשימוש בתגית style

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

בכל מקרה, אם ברצונכם עדיין להשתמש בתגית זאת, זכרו לכלול את התכונה type="text/css", או אחרת הדף לא יעבור אימות.