בפרק זה נכיר תגי 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"
, או אחרת הדף לא יעבור אימות.