זכויות יוצרים © 2008 Shlomi Fish
This document was written by Shlomi Fish and is available under the terms of either the:
-
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.
-
The Creative Commons Attribution License (CC-by) version 3.0 (or at your option any later version of the same license.)
-
The MIT X11 License.
| היסטוריית גירסאות | ||
|---|---|---|
| גירסה 2780 | 27 April 2008 | shlomif |
| Started working on this document after forking the template of an older one. | ||
תוכן העניינים
מדריך זה בא לענות על החוסר במדריכים לכתיבת דפי ואתרי ווב בעברית שהינם:
-
מסבירים כיצד לכתוב קוד תקני וסמנטי.
-
תחת רשיון מתירני מספיק.
-
בעברית.
מכיוון שאני מפתח וובב מנוסה וכותב קוד תקני וסמנטי, החלטתי לקחת את היוזמה ולכתוב מדריך כזה. הידע הנדרש הוא:
-
ידע בסיס בעריכת טקסט פשוט. לא מדובר בשימוש ב-וורד, אלא בעורך טקסט כמו Notepad. מומלץ בחום שימוש בעורך טקסט מתקדם יותר כמו Notepad++ או תחליף אחר הולם לסביבת העבודה החביבה עליכם.
-
ידע בסיסי באנגלית, משום שיש לכתוב קוד באנגלית, גם אם רוב הדף הוא בעברית או בשפה אחרת.
-
אמביציה, רעב לידע ונכונות ללמוד.
תוכן העניינים
בפרק זה נלמד כיצד לכתוב HTML בסיסי.
HTML הינו למעשה טקסט פשוט רק עם הוראות שמסבירות כיצד יש לפרש את הטקסט. את המסמך הראשון ניתן לכתוב למשל כך:
Hello, World! This is my first HTML Document.
This is the second line.
אם תשמרו מסמך זה לתוך קובץ עם סיומת
.html
ותפתחו אותו באמצעות הדפדפן, אז תקבלו משהו
כזה בדפדפן:
ניתן לראות שהדפדפן התעלם משבירת השורה השנייה. מה קורה אם נשבור פסקאות? שמרו טקסט
זה לתוך קובץ עם סיומת .html:
First Paragraph: my web-page is your web-page.
Second paragraph: this is the second paragraph.
שוב פעם נקבל את הכל בשורה אחת:
מה שקרה הוא שבעוד שהטקסט הוא טקסט, הדפדפן זקוק לתגיות HTML (HTML Tags) כדי לדעת כיצד פרמט אותו. אנו נראה מספר תגיות HTML בסיסיות בחלק הבא.
תגיות HTML בד"כ באות כתגית פותחת ובתוחה טקסט או תגיות נוספות
ותגית סוגרת. התגית הפותחת המתחילה בסימן "קטן
מ" )<( ואחריה מזהה התגית, ואחריו
תכונות )"Attributes"( הבאות כמזהה, כסימן שווה וכערך הבא בתוך
מרכאות. לבסוף באה סוף התגית הפותחת כסימן גדול-מ
)>( .
תגית סוגרת הינה פשוט
</tag-identifier> .
הנה דוגמה להמחשה באמצעות התגית
<p> המייצגת פיסקה
(“Paragraph”):
<p>
First paragraph - for real this time.
</p>
<p>
Second paragraph - La la la la la.
</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" סומן כקישור, כאשר הקישור מצביע למה שבתוך תכונת ה-"href". ראוי לציין שכאשר יש לסגור מספר תגים יש לסגור אותם בסדר הפוך מהסדר בו הם נפתחו, באופן כזה שיהיה לנו עץ מקונן.
לסיום החלק הזה, אנו נשחק במספר תגיות נוספות לשם עיצוב הדף:
-
<b>- לשם הפיכת טקסט למעובה. ("bold") -
<i>- לשם הפיכת טקסט למוטה. ("italics")
הנה הדוגמה:
<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>
היא נראית כך:
עכשיו למספר הסברים בנוגע לדוגמה:
-
הצהרת ה-"DOCTYPE" בהתחלה מצהירה שסוג המסמך הוא "XHTML 1.0 Transitional". יש לשם הצהרה כזאת בהתחלה כדי שאפשר יהיה לזהות על פי איזה תקן המסמך נכתב.
-
ניתן להבחין שמהסמך מתחיל מתגית פתיחה
<html>ומסתיים בתגית</html>במסמך XML יש לכלול את כל התוכן בתוך תגית פתיחה ותגית סיום. במקרה של מסמך HTML מדובר בתגית<html>. -
לתגית
<html>מקבלת מספר תכונות. הראשונה שבהן היא "xmlns" המצהירה על מרחב-השמות של ברירת המחדל של המסמך. במסמכי XHTML ניתן לכלול מרחבי שמות אחרים, המאפשרים שילוב של תגיות של תחבירי XML אחרים. כרגע לא צריך להתעמק בזה יותר מדי.התכונות האחרות ("lang") מצהירות על שפת המסמך, במקרה שלנו אנגלית אמריקאית. ראוי לציין שכדאי שהן lang והן xml:lang תקבענה ביחד.
-
האלמנט
<head>מכיל כותר למסמך ומכיל מעט מטה-מידה הקשור אליו. -
האלמנט
<title>שחייב להימצא בתוך<head>מכיל טקסט (מחוסר תיוג) המהווה כותרת למסמך - ניתן לראות שהוא מופיע בכותר החלון של הדפדפן.רצוי מאוד לתת כותרת בעלת משמעות למסמך כדי שאנשים ותוכניות מחשב (כמו מנועי חיפוש) יוכלו לדעת מייד מה תכליתו.
-
מטרת תגית ה-
<meta>המסוימת הזאת היא להצהיר שקידוד המסמך הוא "utf-8". יש שימושים אחרים לתגיות "meta" ואת חלקם נראה בהמשך.ניתן גם לראות שהקו הנטוי ("/") בסוף התגית אומר למפענח שהתגית סוגרת את עצמה. זה כמו לומר:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
אבל מאפשר תאימות טובה יותר לדפדפנים ישנים.
-
האלמנט
<body>מכיל את גוף הטקסט של המסמך ומה שיוצג למשתמש. -
האלמנט
<h1>מכיל כותרת המוצגת בגוף הטקסט. יש גם את<h2>,<h3>עד<h6>. מומלץ לחלק את המסמך לחלקים על-ידי הכותרות כך שידעו מה משמעות כל חלק.
כדי לוודא שהמסמך שכתבתם (או חוללתם) הוא תקין, רצוי לבצע לו אימות (Validation) באמצעות מאמתים מקוונים:
חשוב לבצע אימות כדי לוודא שטעויות בדפים אינן גוררות התנהגות לא רצויה של הדפדפנים השונים. עוד על המוטיבציה לאימות, ניתן למצוא בדפים הבאים:
-
תכן לתאימות - מהרצאה שכתבתי.
במידה שדף ה-HTML זמין באינטרנט בפומבי, ניתן לשלוח קישור אליו למאמת. אחרת, ניתן להעלות את התוכן המקומי למאמת כדי לקבל עליו דו"ח.
ככה נראה אימות של דף כתקין בעזרת המאמת:
בפרק זה נכיר תגי HTML נוספים ושימושיים.
ראינו כבר את הכותרת <h1>, אבל יש גם את
<h2> וכן הלאה עד <h6>. ככל
שהמספר גדול יותר כך הכותרת פחותה יותר בערכה. רצוי לחלק
את מסמך ה-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>Mission Statement</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Mission Statement</h1>
<h2>Introduction</h2>
<p>
This is a mission statement for the Hebrew HTML tutorial.
</p>
<h2>The Objective</h2>
<p>
The objective is simple: teach whoever read the document - HTML.
</p>
<h2>Constraints</h2>
<p>
Here are some constraints:
</p>
<h3>#1: Valid HTML</h3>
<p>
Teach using Valid HTML.
</p>
<h3>#2: In Hebrew</h3>
<p>
Teach using
<a href="http://en.wikipedia.org/wiki/Hebrew_language">Hebrew</a>.
</p>
</body>
</html>
וכך זה נראה:
כפי שניתן לראות הכותרות בעלות המספר הגבוה יותר, קטנות יותר ובכך פחותות בחשיבותן.
ניתן להשתמש בתגית <br /> )תגית העומדת בפני
עצמה ואינה מקבלת פרמטרים( כדי לשבור את
השורה, ולהתחיל שורה חדשה באמצע פיסקה. לא רצוי להשתמש בה
פעמיים בשביל להפריד בין פסקאות, וכן רצוי להימנע משימוש מיותר
בתגית זאת.
ניתן להשתמש בתכונה "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 לתוים מיוחדים כמו
&, < >
וכו.
הנה דוגמה קטנה:
<!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>
אחד הדברים שניתן לשים ב-head הוא קישורים גלובליים או מה שהם ליתר דיוק, בטרמינולגיה שלי, שיוכים (associations). בניגוד לקישוריי ה-HTML הרגילים שמשויכים רק עם חלק מהמסמך וניתנים ללחיצה בתוך גוף המסמך, הרי שהקישורים הגלובליים משפיעים על כך המסמך או משייכים לו משאב אחר ברשת.
לדוגמה, אם נרצה לשייך גליון סגנון (stylesheet) מסוג CSS (= Cascading Style Sheets) (אנו נלמד CSS מעט בהמשך) הרי שנוכל לעשות זאת על-ידי כתיבת הקוד הבא בתוך אלמנט ה-head:
<link rel="stylesheet" href="style.css" type="text/css" />
ניתן גם לכלול הוראות 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 טוב להתנסות, רצוי שלא לעשות בה שימוש בקוד הסופי. זאת מפני ששימוש בגליון סגנון נפרד מאפשר יותר בקלות להחיל עיצוב אחיד לכל העמודים באתר, וכן חוסך בתעבורה וגורם לטעינת הדפים הבאים באתר להיות מהירה יותר.
בכל מקרה, אם ברצונכם עדיין להשתמש בתגית זאת, זכרו לכלול את
התכונה type="text/css", או אחרת
הדף לא יעבור אימות.