שלב ראשון: כלי כתיבה. בשביל לכתוב HTML אין צורך ביותר מעורך טקסט פשוט. הפנקס רשימות של חלונות (notepad) יהיה מצוין. העתיקו את הקוד במסגרת הכחולה אל הכתבן שלכם, ושמרו אותו בתור page.html שימו לב לשנות את סוג הקובץ בתיבת השמירה מ txt.* ל all files.
<html>
<head>
<title>.זוהי כותרת הדף</title>
</head>
<body>
זהו גוף המסמך.
כאן יבוא כל הטקסט
שנרצה להציג בדפדפן.
</body>
</html>
<html> <head> <title>.זוהי כותרת הדף</title> </head> <body> זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן. </body> </html>
עכשיו פתחו את הדפדפן שלכם, לכו לתפריט file, ופתחו את הקובץ. שימו לב, שאצלכם בדפדפן, שלושת השורות בגוף המסמך הפכו פתאום לשורה אחת. זה מפני ש HTML מתעלם מירידות שורה בקוד. בנוסף לזה, HTML מתעלם גם מכפילויות ברווחים, ומצמצם אותם לרווח אחד בודד. בכדי לרדת שורה על מסך הדפדפן, יש לציין את זה בתג HTML, שהוא <br>.
כעת פתחו את קובץ ה HTML שלכם, והוסיפו את התג <br> בכל ירידת שורה. שמרו את הקובץ ורעננו את הדפדפן. עכשיו תראו שהשורות הסתדרו. התג <br> הוא אחד מהתגים הבודדים ב HTML שאין לו תג סוגר. שלב שני: בדף הזה נלמד איך לעשות קו תחתי, איך לכתוב טקסט מוטה איך לכתוב טקסט מודגש וכו'... כל התגים שיוזכרו מעכשיו והלאה הם תגים מכילים, כלומר, הם דורשים תג סגירה. אם למשל מדובר על תג <u>, תג הסגירה שלו יהיה <u/>. בטבלה הבאה תוכלו לראות את התגים ואת השפעתם על הטקסט.
התג
הטקסט
<ins>
קו תחתי
<i>
נטוי
<b>
מודגש
<big>
מוגדל
<small>
מוקטן
<em>
מודגש
<strong>
מחוזק
<del>
מחוק
<tt>
מכונת כתיבה
<sub>
כתב תחתי
<sup>
כתב עילי
<address>
כתובת
זה המקום לציין שתגים צריכים להסגר בסדר מסוים. תג פנימי צריך להסגר לפני סגירה של תג חיצוני, לדוגמא:
<ins><b> תחביר כזה הוא לא חוקי </ins></b>
<ins><b> תחביר כזה הוא לא חוקי </ins></b>
הדרך הנכונה לכתוב את זה, היא זו:
<ins><b> התחביר הזה - הוא התקין </b></ins>
שלב שלישי:
התג <FONT>
עכשיו כשאתם יודעים איך לכתוב טקסט עם אפקטים, הגיע הזמן שנלמד איך צובעים אותו. בשביל לקבוע צבע לטקסט, משתמשים בתג <FONT>. התג הזה יותר מתוחכם מהתגים הקודמים שהצגנו. הוא מכיל שלושה מאפיינים: צבע, גודל, וסוג גופן.
כל אחד מהמאפיינים האלה הוא אופציונאלי. ניתן לכתוב תג font עם מאפיין אחד, שניים, או שלושה, כאשר הסדר שלהם גם כן אינו משנה.
המאפיין color מקבל ערכים בשמות צבעים, או במספרים שמהוים ערך (RGB (Red Green Blue. המספרים הם בבסיס הקסה-דצימאלי. כלומר, יש 16 ספרות אפשריות, מ-0 עד f. הערך אדום יראה כך: "#ff0000" או כך: "red".
המאפיין size מקבל כערך מספרים בין 1 ל-7, או לחילופין גודל יחסי לגודל הפונט הנוכחי, לדוגמא: +2.
המאפיין face מקבל שם של גופן כמו "arial" או "david". אם הגופן המצויין בתג לא נמצא במחשב של המשתמש, הדפדפן משתמש בגופן ברירת המחדל שמוגדר לו.
אפשר גם לתת מספר גופנים, מופרדים בפסיקים, והדפדפן יציג את הראשון שיש במחשב.
כותרות
בשביל לכתוב כותרות במסמך HTML משתמשים בתגים <H1> עד <H6>. דבר חשוב שצריך לשים לב אליו בכותרות, זה שאלו תגים שונים, ככה שתג <h1> חייב להסגר בתג <h1/>, ולא יכול להסגר ב <h2/>, לדוגמא. ככה זה נראה בדף:
<h1>כותרת</h1>
<h2>כותרת</h2>
<h3>כותרת</h3>
<h4>כותרת</h4>
<h5>כותרת</h5>
<h6>כותרת</h6>
המאפיינים שתגי הכותרת יכולים לקבל הם: align שאחראי על מיקום הכותרת ביחס לדף. הוא מקבל אחד משלושת הערכים left, center, right. dir שאחראי על כיווניות הכותרת, מקבל אחד משני ערכים: rtl (מימין לשמאל), או ltr (משמאל לימין). lang מקבל ערך שאומר לדפדפן על איזה שפה מדובר, he במקרה של עברית, או en במקרה של אנגלית. title מקבל ערך שאותו הוא מציג כאשר העכבר מרחף מעל הכותרת. class המאפיין הזה נועד לשימוש בגליונות סגנון (css), לכן כרגע לא נרחיב עליו את הדיבור. style גם הוא מאפיין שנועד לשימוש ב css, ולכן גם עליו לא נרחיב כעת. id גם זה מאפיין שנועד לשימושים מתקדמים, וגם עליו לא נרחיב כרגע. מספיק לומר שהמאפיינים class ו id מתאימים לכל התגים ב HTML.
פיסקאות
בכדי לא להכביד על הגולשים שלנו, הדף צריך להיות מעוצב בצורה נוחה לקריאה. והמשמעות היא חלוקה לפסקאות. לשם כך משתמשים בתג <P>. התג P מייצר רווח של שורה ריקה מעל ומתחת לפיסקה. המאפיינים שהתג P יכול לקבל הם: align שאחראי על מיקום הפיסקה ביחס לדף. הוא מקבל אחד משלושת הערכים left, center, right. dir שאחראי על כיווניות הפיסקה, מקבל אחד משני ערכים: rtl (מימין לשמאל), או ltr (משמאל לימין). lang מקבל ערך שאומר לדפדפן על איזה שפה מדובר, he במקרה של עברית, או en במקרה של אנגלית. title מקבל ערך שאותו הוא מציג כאשר העכבר מרחף מעל הפיסקה.
הפיסקה הזאת נמצאת קצת יותר פנימה בדף מהפיסקה הקודמת. כאן השתמשתי בתג שונה, שהוא <blockquote>. גם התג הזה מקבל את המאפיינים id ,class ,title ,style ,dir ו lang. בנוסף, ניתן להוסיף מאפיין cite, שמקבל ערך של כתובת אינטרנטית (URL) הוא משמש במידה והפיסקה הזאת מכילה ציטוט מאתר אינטרנט.
טקסט מעוצב מראש
יש דרך לגרום ל HTML להתייחס לצורה שבה נראה קוד המקור. את זה עושים באמצעות התג <pre>. כל מה שנכתב בתוך התג הזה, יוצג ב HTML ממש כמו שהוא כתוב במקור, עם הרווחים וירידות השורה. לצורך כך הדפדפן משתמש בפונט שונה מבדרך כלל, וככה זה נראה: הטקסט הספציפי הזה עטוף בתג pre. זו הסיבה שהפונט שלו נראה ככה. זו גם הסיבה שרואים רווחים כפולים בין המילים.
שלב רביעי :
תמונות
אפשר לשלב תמונות בדף ה HTML שלנו, בעזרת התג img. התחביר הוא כזה:
התג Img מקבל את המאפיינים הבאים: src שמכיל את הכתובת של התמונה. alt שמכיל תיאור קצר של התמונה, שיופיע במידה והתמונה לא מוצגת, או לחילופין כשהעכבר מצביע עליה.
המאפיינים הנ"ל הם מאפיינים שחייבים להיות בתג. המאפיינים הבאים הם אפשריים: height מציין את גובה התמונה בפיקסלים. מומלץ מאוד להשתמש בו תמיד. width מציין את רוחב התמונה בפיקסלים. מומלץ מאוד להשתמש בו תמיד. longdesc מכיל כתובת לדף אינטרנט שמכיל תיאור ארוך של התמונה. vspace מציין את המרחק בפיקסלים מעל ומתחת לתמונה. hspace מציין את המרחק בפיקסלים מימין ומשמאל לתמונה align מציין את היחס בין התמונה לטקסט הסובב אותה. הוא מקבל אחד מהערכים הבאים: top, bottom, center, left או right.
דוגמאות:
כשהמאפיין align מקבל top
כשהמאפיין align מקבל center
כשהמאפיין align מקבל bottom
כשהמאפיין align מקבל left
כשהמאפיין align מקבל right
רקעים
זוכרים את מסמך ה HTML הראשון? הנה הוא שוב, עם תוספת. עכשיו קבענו לו צבע רקע, בעזרת המאפיין bgcolor שהוספנו לתג body. כמו המאפיין color של התג font, המאפיין bgcolor יכול לקבל ערכים בשמות צבעים, או בערכי RGB.
<html>
<head>
<title>.זוהי כותרת הדף</title>
</head>
<bodybgcolor="#b4c5f8">
זהו גוף המסמך.
כאן יבוא כל הטקסט
שנרצה להציג בדפדפן.
</body>
</html>
<html> <head> <title>.זוהי כותרת הדף</title> </head> <body bgcolor="#b4c5f8"> זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן. </body> </html>
ניתן לקבוע תמונת רקע לדף שלנו, בעזרת המאפיין background של התג body. המאפיין הזה מקבל כתובת של תמונה שתשמש כרקע לדף. במידה והתמונה קטנה מגודל הדף, היא תשוכפל. אם רוצים שהרקע לא יגלל עם הדף, אלא ישאר קבוע, צריך להוסיף את המאפייןbgproperties="fixed".
שימו לב, שרקע צריך כמה שפחות להפריע לתוכן הדף. כמו כן מומלץ להשתמש ברקע אחיד לכל הדפים באתר. בנוסף, כמשתמשים בתמונת רקע, כדאי להוסיף גם צבע רקע דומה ככל האפשר לצבע התמונה, שישמש כרקע במידה והתמונה לא תוצג.
שלב חמישי:מפת תמונה היא תמונה שאזורים מסוימים בה הם קישורים. המבנה של מפת תמונה מתחיל בתג לתג הזה יש מאפיין אחד, והוא name, שמכיל את שם המפה. בין התג הפותח לתג הסוגר, יהיו תגי <area>
המאפיינים של תג הם:
alt מכיל תיאור קצר של הקישור. href מכיל את הכתובת שאליה מפנה הקישור. nohref במידה והאיזור לא צריך לקשר לשום מקום. target היכן יפתח הקישור. יכיל _blank בשביל לפתוח את הקישור בחלון חדש. shape יכיל את סוג הצורה של השטח, מקבל אחד מהערכים הבאים: circle (עיגול), rect (מרובע), poly (מצולע), default (כל השטח שלא מוגדר). coords מכיל את הקואורדינטות של השטח על המפה.
בשביל תמונה משתמשים בתג , שכבר הכרתם, אבל מוסיפים לו מאפיין שלא דיברנו עליו עד עכשיו, והוא usemap. usemap מקבל את שם המפה שמתאימה לתמונה. שימו לב שלפני השם צריך לבוא הסימן #.
קואורדינאטות של עיגול יהיו x של מרכז המעגל, y של מרכז המעגל, והרדיוס של המעגל. קואורדינאטות של מרובע יהיו left, top, right, bottom. קואורדינטות של מצולע יהיו x ו y של כל קודקוד במצולע. שלב שישי: כמעט בכל דף באינטרנט יש קישורים (links) שמובילים לדפים אחרים, ולפעמים לאיזור אחר באותו עמוד. קישוריות כותבים בעזרת התג <a>. התג הזה מקבל מאפיין href, שהוא מקבל את הכתובת אליה אנו רוצים לשלוח את הגולש.
<ahref="http://www.tapuz.co.il">זהו קישור לאתר תפוז</a>
<a href="http://www.tapuz.co.il">זהו קישור לאתר תפוז</a>
כמובן שניתן בתוך הקישור לכתוב לא רק טקסט, אלא לשים תמונה, לדוגמא.
<ahref="http://www.tapuz.co.il"><img.....></a>
<a href="http://www.tapuz.co.il"><img.....></a>
שימו לב, שקישור שלא יכיל את הקידומת http://, יחשב ע"י הדפדפן כקישור פנימי באתר. כלומר, אם האתר שלכם נמצא בכתובת http://www.url.co.il/mysite והקישור מוביל ל www.walla.co.il, הדפדפן ינסה למצוא אתר שכתובתו היא http://www.url.co.il/mysite/www.walla.co.il
התג <a> יכול להכיל עוד מספר מאפיינים: אם אנחנו רוצים לפתוח את הקישור בחלון חדש, נוסיף את המאפיין target="_blank" למאפיין target יש עוד שימושים, נלמד אותם בפרק שמדבר על מסגרות.
כדי לכתוב קישורית ממקום אחד בדף למקום אחר, יש תחילה להגדיר להיכן הקישורית תגיע. זה נקרא עוגן, ואת זה עושים בעזרת התג a, כשמצורף לו המאפיין name, ככה:
<aname="anchor"> ניתן לכתוב כאן טקסט, זו לא חובה</a>
<a name="anchor"> ניתן לכתוב כאן טקסט, זו לא חובה</a>
עכשיו אחרי שקבענו עוגן, אפשר לכתוב קישורית שתגיע אליו, ככה:
<ahref="#anchor">אל העוגן</a>
<a href="#anchor">אל העוגן</a>
הסימן # אומר לדפדפן שהכתובת הבאה היא בעצם שם של עוגן בדף. ניתן גם לשלב את שני סוגי הקישוריות, ולהגיע למקום ספציפי בדף אחר, ככה:
<ahref="someOtherPage.html#anchor">אל העוגן.</a>
<a href="someOtherPage.html#anchor">אל העוגן.</a>
ניתן לכתוב גם קישורים לדואר אלקטרוני, שבלחיצה עליהם יפעילו את תוכנת הדוא"ל של הגולש. הקישור הזה נכתב כך:
<ahref="mailto:myMail@server.com">שלח דוא"ל</a>
<a href="mailto:myMail@server.com">שלח דוא"ל</a>
מילת המפתח mailto: היא שגורמת לדפדפן לזהות שמדובר בקישור לדוא"ל, ולפתוח את תוכנת הדוא"ל של הגולש
שלב שביעי:ישנם שלושה סוגי רשימות ב-HTML: רשימה ממוספרת, רשימה לא ממוספרת, ורשימת הגדרות.
בשביל לכתוב רשימה ממוספרת משתמשים בתג <ol>. בשביל להכניס פריטים לרשימה משתמשים בתג <li>. כל פריט ברשימה גורם לירידת שורה אוטומטית, ככה שלא צריך להשתמש ב-BR בין פריטים. כמו כן, ניתן להגדיר כותרת לרשימה בעזרת התג <caption>.
המאפיינים שהתג <ol> מקבל הם: type אחראי על צורת מספור הרשימה. מקבל אחד מהערכים הבאים: A, a, i, 1 start אומר מאיזה ערך מתחילה הרשימה. ברירת המחדל היא אחד.
רשימה לא ממוספרת (רשימת תבליטים) נכתבת בעזרת התג <ul>. גם כאן, פריט ברשימה נכתב בעזרת התג <li>, וכותרת בעזרת <caption>. התג <ul> מקבל את המאפיין type, שיכול להכיל אחד מהערכים הבאים: circle, disc, square.
רשימת הגדרות היא רשימה לא ממוספרת, ואין לה תבליטים. היא נכתבת בעזרת התג <dl>. פריטים ברשימה הזאת מתחלקים לשני חלקים: הפריט עצמו וההגדרה שלו. בכדי להכניס פריט לרשימה משתמשים בתג <dt>. בשביל להכניס הגדרה לפריט משתמשים בתג <dd>.
לדוגמא, הקוד הזה:
<dl>
<dt>Guide</dt>
<dd>מדריך, מורה דרך, מנחה.</dd>
<dt>HTML</dt>
<dd>שפת סימון טקסט, בה משתמשים</dd>
<dd>בכדי לכתוב דפי אינטרנט.</dd>
</dl>
<dl> <dt>Guide</dt> <dd>מדריך, מורה דרך, מנחה.</dd> <dt>HTML</dt> <dd>שפת סימון טקסט, בה משתמשים</dd> <dd>בכדי לכתוב דפי אינטרנט.</dd> </dl> יראה ככה:
Guide
מדריך, מורה דרך, מנחה.
HTML
שפת סימון טקסט, בה משתמשים
בכדי לכתוב דפי אינטרנט.
שלב שמיני: הדרך הנפוצה לעצב דפי אינטרנט היא בעזרת טבלאות. טבלאות מאפשרות חפוש פעולה גדול וניצול טוב של המרחב בדף. מבנה בסיסי של טבלה נראה כך:
<tableborder="1">
<tr>
<th>תא ראשון</th>
<th>תא שני</th>
</tr>
<tr>
<td>שורה ראשונה, תא ראשון</td>
<td>שורה ראשונה, תא שני</td>
<tr>
<td>שורה שניה, תא ראשון</td>
<td>שורה שניה, תא שני</td>
</tr>
</table>
<table border="1"> <tr> <th>תא ראשון</th> <th>תא שני</th> </tr> <tr> <td>שורה ראשונה, תא ראשון</td> <td>שורה ראשונה, תא שני</td> <tr> <td>שורה שניה, תא ראשון</td> <td>שורה שניה, תא שני</td> </tr> </table> וככה זה נראה בדף: כותרת
תא ראשון
תא שני
שורה ראשונה, תא ראשון
שורה ראשונה, תא שני
שורה שניה, תא ראשון
שורה שניה, תא שני
התג <table> יוצר את הטבלה. התג <caption> יוצר כותרת לטבלה. התג <tr> יוצר שורה בטבלה. התג <td> יוצר תא בתוך השורה. התג <th> יוצר כותרת לעמודה. הוא מאוד דומה לתג <td>, רק שבו הטקסט מודגש ומיושר למרכז.
שימו לב שמספר התאים בשורות חייב להתאים, אחרת זה יראה ככה:
שורה ראשונה, תא ראשון
שורה ראשונה, תא שני
שורה שניה, תא ראשון
כמו כן, אסור להשאיר תאים ריקים בתוך טבלה, זה יצור את אותו האפקט בדיוק. במידה ויש צורך להשאיר תא שאין בו טקסט,יש להשתמש באלמנט האלמנט הזה יוצר תו רווח, ויגרום לטבלה להראות בסדר. שימו לב שרווח רגיל לא יעשה את זה.
מאפייני התג <table> הם:
border קובע את עובי הגבול של הטבלה, ומקבל ערך בפיקסלים. bordercolor קובע את צבע הגבול של הטבלה, מקבל ערכים בשמות צבעים או בפורמט RGB. bordercolordark קובע את הצבע הכהה של הגבול, מקבל ערכים בשמות צבעים או בפורמט RGB. bordercolorlight קובע את הצבע הבהיר של הגבול, מקבל ערכים בשמות צבעים או בפורמט RGB. bgcolor קובע את צבע הרקע של הטבלה, מקבל ערכים בשמות צבעים או בפורמט RGB. background קובע תמונה שתשמש כרקע לטבלה, מקבל, כמובן, נתיב לתמונה. align קובע את מיקום הטבלה על המסך, מקבל אחד מהערכים left, center או right. width קובע את רוחב הטבלה. מקבל ערכים בפיקסלים או באחוזים מרוחב הדף. height קובע את גובה הטבלה. מקבל ערכים בפיקסלים. cellpadding קובע רווח בין תוכן התא לגבול התא, מקבל ערכים בפיקסלים. cellspacing קובע רווח בין התאים, מקבל ערכים בפיקסלים.
מאפייני התג <tr> הם:
align קובע את מיקום הטקסט בתוך השורה, מקבל אחד מהערכים left, center או right. bgcolor קובע את צבע הרקע של השורה. bordercolor קובע את צבע הגבול של השורה. bordercolordark קובע את הצבע הכהה של גבול השורה. bordercolorlight קובע את הצבע הבהיר של גבול השורה. height קובע את גובה השורה. valign קובע את המיקום האנכי של טקסט בשורה, מקבל אחד מהערכים top, middle, bottom או baseline.
מאפייני התג <td> הם:
background קובע תמונת רקע לתא, מקבל נתיב של תמונה, כמובן. align קובע את מיקום הטקסט בתוך התא, מקבל אחד מהערכים left, center או right. bgcolor קובע את צבע הגבול של התא. bordercolor קובע את צבע הגבול של התא. bordercolordark קובע את הצבע הכהה של גבול התא. bordercolorlight קובע את הצבע הבהיר של גבול התא. width קובע את רוחב התא, מקבל ערכים בפיקסלים. height קובע את גובה התא, מקבל ערכים בפיקסלים. valign קובע את המיקום האנכי של טקסט בתא, מקבל אחד מהערכים top, middle, bottom או baseline. nowrap כשהמאפיין הזה מצוין, השורות בתא לעולם לא "ישברו" מחוסר מקום, אלא יפתח פס גלילה אופקי. המאפיין nowrap לא מקבל שום ערך, אלא מספיק שהוא מצויין בתג. colspan מקבל מספר תאים לרוחב הטבלה, שהתא הנוכחי יתפוס. rowspan מקבל מספר תאים לגובה הטבלה, שהתא הנוכחי יתפוס.א
בעזרת המאפיינים colspan ו rowspan, ניתן ליצור טבלאות מתוחכמות יותר. טבלה כזאת, לדוגמא, אפשרית רק בעזרת colspan:
שורה ראשונה, תא ראשון
שורה ראשונה, תא שני
שורה שניה, התא היחיד.
ככה נראה הקוד של הטבלה הזאת:
<tableborder="1">
<tr>
<td>שורה ראשונה, תא ראשון</td>
<td>שורה ראשונה, תא שני</td>
</tr>
<tr>
<tdcolspan="2"align="center">שורה שניה, התא היחיד</td>
</tr>
</table>
<table border="1"> <tr> <td>שורה ראשונה, תא ראשון</td> <td>שורה ראשונה, תא שני</td> </tr> <tr> <td colspan="2" align="center">שורה שניה, התא היחיד</td> </tr> </table> שלב תשיעי: מסגרות זה שיטה להכליל מספר דפי אינטרנט בעמוד אחד. השימוש במסגרות פשוט מחלק את מסך הדפדפן, כשבכל חלק מופיע דף אחר. בכדי ליצור מסגרות, יש צורך בדף שיכיל ת ההגדרות למסגרות, ובדפי תוכן. הגדרת המסגרות נעשית בעזרת התג <frameset>, כמו בדוגמא הבאה:
<html>
<head>
<title>.זוהי כותרת הדף</title>
</head>
<framesetrows="10%,*">
<framesrc="framesTop.html"name="topFrame">
<framesrc="frames.html"name="mainFrame">
</framset>
</html>
<html> <head> <title>.זוהי כותרת הדף</title> </head> <frameset rows="10%,*"> <frame src="framesTop.html" name="topFrame"> <frame src="frames.html" name="mainFrame"> </framset> </html> הקוד הזה הוא הקוד שיצר את המסגרת שאתם רואים כאן. לתג <framset> יש את המאפיין rows, שאחראי על החלוקה האופקית של המסך. הוא מקבל ערכים שמציינים את גובה המסגרות שיהיו בדף, מופרדים בפסיקים. הערכים האלה יכולים להיות קבועים בפיקסלים, או באחוזים, כמו בדוגמא הזאת. הערך * הוא ערך מיוחד, שאומר שהמסגרת שאליה הוא מתייחס תתפוס את כל השטח שנשאר.
באותה המידה, יכולנו לחלק את הדף בצורה אנכית, לו היינו משתמשים במאפיין cols במקום במאפיין rows. ברור שאין אפשרות להשתמש בשני המאפיינים האלו באותו ה frameset. ניתן, לעומת זאת, לקנן מסגרות, בצורה הבאה:
מאפייני חובה: src מציין את קובץ ה HTML שהמסגרת תכיל. name מציין את שם המסגרת.
מאפייני רשות: scrolling מציין האם המסגרת תקבל פס גלילה. מקבל את הערכים yes, no או auto. frameborder מציין האם להציג גבול מסביב למסגרת, מקבל או 0 או 1. noresize במידה והמאפיין הזה נמצא,גודל המסגרת יהיה קבוע. המאפיין הזה לא מקבל ערך. marginheight מציין את הריווח בין תוכן המסגרת לגבול העליון ולגבול התחתון שלה. מקבל ערך בפיקסלים. marginwidth מציין את הריווח בין תוכן המסגרת לגבול הימני ולגבול השמאלי שלה. מקבל ערך בפיקסלים.
זוכרים את המאפיין target של הקישורים? כאשר אנו רוצים שלחיצה על קישור במסגרת אחת תשנה את התוכן במסגרת אחרת, אנחנו משתמשים במאפיין target, שמקבל את השם של המסגרת שבה אנו רוצים שהקישור יפתח. כמו כן, המאפיין יכול להכיל את הערך _top, שאומר שהקישור יפתח במקום מערכת המסגרות. אם משתמשים במסגרות מקוננות, ניתן לפתוח קישור ברמה אחת מעל המסגרת שבה הוא נמצא, ע"י הערך _parent במאפיין target.
התג <noframes> יבוא לידי ביטוי בדפדפנים שלא תומכים במסגרות. אחרי סגירת התג framset, רצוי להוסיף תמיד את התג noframe, ולציין בו לגולש מה הוא יכול לעשות. במידה ודפדפן שלא תומך במסגרות ינסה להגיע לדף שיוצר כאן את המסגרות, הוא יקבל את ההודעה הבאה: הדף הזה משתמש במסגרות, שהדפדפן שלך לא תומך בהן. בכדי לקרוא את ההסברים בכל זאת, לחץ על הלינק הבא.
מסגרות פנימיות
יש אפשרות ליצור מסגרת פנימית בדף, בדפדפני אקספלורר, ובדפדפני נטסקייפ מגרסא 6. את זה עושים בעזרת התג <iframe>.
<iframe src="http://www.google.com" width="90%" height="70" frameborder="1"></iframe> וככה זה נראה:
המאפיינים של התג <iframe> הם:
src מציין את קובץ ה HTML שהמסגרת תכיל. name מציין את שם המסגרת. width מציין את הרוחב שהמסגרת תתפוס בדף, מקבל ערך בפיקסלים. height מציין את הגובה שהמסגרת תתפוס בדף, מקבל ערך בפיקסלים. scrolling מציין האם המסגרת תקבל פס גלילה. מקבל את הערכים yes, no או auto. frameborder מציין האם להציג גבול מסביב למסגרת, מקבל או 0 או 1. noresize במידה והמאפיין הזה נמצא, גודל המסגרת יהיה קבוע. המאפיין הזה לא מקבל ערך. marginheight מציין את הריווח בין תוכן המסגרת לגבול העליון ולגבול התחתון שלה. מקבל ערך בפיקסלים. marginwidth מציין את הריווח בין תוכן המסגרת לגבול הימני ולגבול השמאלי שלה. מקבל ערך בפיקסלים.
כמו שנאמר, נטסקייפ תומך ב iframe רק מגרסא 6, ככה שדפדפנים ישנים יותר לא יוכלו להראות את התוכן. הדרך להראות תוכן חלופי בדפדפנים שלא תומכים ב iframe היא לכתוב אותו בין התגים של ה iframe. שלב עשירי:לא פעם ולא פעמיים אנחנו רוצים לקבל אינפורמציה מהגולש, ואת זה עושים באמצעות טפסים. בכדי לכתוב טופס מתחילים בתג <form>
<form name="example" method="get" action="html_page13.html"> :שם פרטי <input type="text" name="firstname"> :שם משפחה <input type="text" name="lastname"> </form>יצור את זה:
המאפיין החשוב ביותר של התג form הוא action, שמציין לאן ישלח הטופס.
מאפיינים נוספים:
method מציין את שיטת שליחת הנתונים, מקבל אחד מהערכים get או post. ל get יש הגבלת אורך של 256 תווים. target מציין איפה יפתח הדף שאליו נשלח הטופס, מקבל את הערכים _blank, _top, _parent, או שם של מסגרת.
האלמנטים שטופס יכול להכיל הם תיבות טקסט, תיבות ססמא, תיבות סימון, כפתורי רדיו, אזורי טקסט, תיבות בחירה, תיבות בחירה מרובה, תיבות קובץ, וכפתורים.
התג <input> מאפשר לנו ליצור מגוון של תיבות קלט. המאפיין שאחראי על סוג תיבת הקלט הוא type. הוא מקבל אחד מהערכים הבאים: text, checkbox, radio, password, hidden, submit, reset, button, file, image. עוד מאפיין חשוב של התג input הוא name. המאפיין הזה קובע מהו שם האלמנט.
דוגמאות לתג input:
תיבת טקסט:
והקוד:
<inputtype="text"name="text1">
<input type="text" name="text1">
המאפיינים של תיבת טקסט הם:
name קובע את השם של תיבת הטקסט. זה יהיה מאוד משמעותי בהמשך. maxlength קובע את הגודל המקסימאלי של הקלט, מקבל מספר תווים. size קובע את הגודל של תיבת הטקסט, מקבל מספר תווים. value מקבל ערך התחלתי שיהיה כתוב בתיבת הטקסט readonly מציין האם תיבת הטקסט היא לקריאה בלבד. אין צורך לתת לו ערך, אלא רק לציין אותו. disabled מצייו האם תיבת הטקסט היא פעילה. גם כאן, מספיק רק לציין אותו. ההבדל בין readonly ל disabled הוא שאלמנט שהוא disabled לא ישלח עם הטופס, בעוד אלמנט שהוא readonly רק לא יהיה ניתן לשינוי.
תיבת סיסמא:
והקוד:
<inputtype="password"name="password1">
<input type="password" name="password1"> ההבדל בין תיבת ססמא לבין תיבת טקסט הוא שבתיבת ססמא כל הכיתוב יראה ככוכביות.
name קובע את השם של תיבת הסימון. checked במידה ומאפיין זה מצויין, תיבת הסימון תופיע מסומנת. disabled במידה ומאפיין זה מצויין, תיבת הסימון תהיה אפורה ולא נגישה למשתמש. value הערך שישלח לשרת אם תיבת הסימון תסומן.
name קובע את השם של כפתור הרדיו. checked במידה ומאפיין זה מצויין, כפתור הרדיו יופיע מסומן. disabled במידה ומאפיין זה מצויין, כפתור הרדיו יהיה אפור ולא נגיש למשתמש. value הערך שישלח לשרת אם כפתור הרדיו יסומן.
שימו לב שכאשר מציינים את אותו השם לקבוצה של כפתורי רדיו, אפשר לסמן רק אחד מהם, וברגע שמסמנים כפתור אחר, הסימון בכפתור הראשון מתבטל.
תיבת קובץ:
והקוד:
<inputtype="file"name="file1">
<input type="file" name="file1">
מאפיינים של תיבת קובץ:
name קובע את השם של תיבת הקובץ. disabled במידה ומאפיין זה מצויין, תיבת הקובץ תהיה אפורה ולא נגישה למשתמש. size קובע את הגודל של תיבת הקובץ, מקבל מספר תווים. accept מצייו איזה סוגי קבצים התיבה יכולה לקבל.
אלמנט מוסתר:
לא פעם אנו רוצים לשלוח ביחד עם הטופס דברים שהגולש לא צריך לראות. בשביל זה משתמשים באלמנט מוסתר.
והקוד:
<inputtype="hidden"name="hidden1">
<input type="hidden" name="hidden1"> מאפיינים של אלמנט מוסתר זהים למאפיינים של תיבת טקסט.
<input type="image" name="image1" src="/images/b.gif"> זה עוד אלמנט שאחראי על שליחת הטופס. הוא מקבל גם מאפיין src, שמציין את מיקום התמונה, ומאפיינים width ו height, שמציינים את רוחב וגובה התמונה.
name מציין את השם של איזור הטקסט. disabled במידה ומאפיין זה מצויין, איזור הטקסט יהיה אפור ובלתי נגיש לגולש. readonly במידה ומאפיין זה מצויין, איזור הטקסט יהיה בלתי ניתן לשינוי. rows מציין את מספר השורות של איזור הטקסט. cols מציין את הרוחב של איזור הטקסט, במספר תווים.
name קובע את שם התיבה disabled במידה ומאפיין זה מצויין, תיבת הבחירה יהיה אפורה ובלתי נגישה לגולש.
תיבת בחירה מרובה:
והקוד:
<selectname=select1size="3" multiple>
<optionvalue="1">אחד</option>
<optionvalue="2">שנים</option>
<optionvalue="3">שלוש</option>
<optionvalue="4">ארבע</option>
</select>
<select name=select1 size="3" multiple> <option value="1">אחד</option> <option value="2">שנים</option> <option value="3">שלוש</option> <option value="4">ארבע</option> </select > בדיוק כמו תיבת בחירה רגילה, רק שכאן הוספנו שני מאפיינים: size קובע את מספר האופציות שיוצגו לגולש. multiple מאפשר בחירה מרובה.
אפשר להשתמש ב size גם בלי להשתמש ב multiple. שלב אחד עשרה: עברית שפה קשה? לא יותר מדי, אם כי צריך לזכור כמה דברים. כמו שכולנו יודעים, עברית נכתבת מימין לשמאל, וזה מנוגד לכיון הכתיבה באנגלית. העניין הזה יצר כמה בעיות שהן יחודיות לשפות שנכתבות מימין לשמאל. יש מספר שיטות לכתוב עברית באינטרנט, אנחנו נתמקד בשתי שיטות: השיטה הויזואלית, והשיטה הלוגית.
עברית ויזואלית
עברית ויזואלית נכתבת הפוך. כלומר, אם נרצה שהדפדפן יציג את המילה "שלום", נצטרך לכתוב "םולש". אם נרצה להציג את המשפט "יום יפה היום", נכתוב "םויה הפי םוי". האותיות נכנסות לקובץ בדיוק בסדר ההקלדה שלהן. מכיון שהדפדפן מציג את הדף משמאל לימין, העברית "מתיישרת" לכיון הנכון שלה. מסמך HTML בסיסי בעברית ויזואלית יראה ככה:
<html> <head> <title>.זוהי כותרת הדף</title> <meta http-equiv="content-type" content="text/html; charset=iso-1988-i"> </head> <body> זהו גוף המסמך. כאן יבוא כל הטקסט נרצה להציג בדפדפן. </body> </html> לשיטה הויזואלית יש מספר חסרונות בולטים: קודם כל, קשה לעבוד איתה. אמנם לא חייבים לכתוב הפוך, כי יש תוכנות שהופכות את הכתב בשבילכם, אבל אם לדוגמא רוצים לערוך דף, זה יכול להיות ממש לא פשוט. בנוסף, יש בעיות עם עברית ויזואלית גם בזמן ההצגה שלה בדפדפן: במידה ושורה "נשברת" מחוסר מקום, היא תשבר בצורה כזאת, שתחילת המשפט תופיע בשורה התחתונה ביותר, וסוף המשפט יופיע בשורה העליונה. לדוגמא:
מה שלום כולם? בוקר טוב עולם,
כמו כן, עברית ויזואלית מעוררת בעיות בדפדפנים לבעלי מוגבליות ראיה. השיטה הויזואלית אינה תקנית, ומשמשת כדי לעבוד בעברית עם דפדפנים מיושנים, כמו, לדוגמא, .netscape 4.7 בהתחשב בעובדה שבעת כתיבת שורות אלה, הסטטיסטיקה אומרת שכחמישה אחוז מהגולשים בעולם משתמשים בדפדפן של netscape, ובארץ המספר עוד יותר נמוך מזה, ובהתחשב בעובדה שהגרסאות החדשות של netscape עובדות בעברית לוגית, אין ממש שימוש לשיטה הויזואלית.
עברית לוגית
השיטה התקנית לכתיבת עברית היא השיטה הלוגית. בשיטה הזו, העברית נכתבת בסדר הנכון שלה, לדוגמא, אם נרצה להציג את המילה "שלום", נכתוב "שלום" בקובץ, והדפדפן ידע להציג את המילה בצורה הנכונה. בשביל לכתוב עברית בשיטה הלוגית, יש לסמן לדפדפן שהמסמך הוא מימין לשמאל, ולא משמאל לימין. את זה עושים בעזרת הוספה של המאפיין dir עם הערך rtl לתגית ה body במסמך ה HTML. מסמך HTML בסיסי בעברית לוגית יראה ככה:
<html> <head> <title>.זוהי כותרת הדף</title> <meta http-equiv="content-type" content="text/html; charset=windows-1255"> </head> <body dir="rtl"> זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן. </body> </html> כמו שאפשר לראות, בשתי דוגמאות הקוד מופיע תג meta. התג הספציפי הזה אומר לדפדפן באיזה שיטה (קידוד) הדף כתוב. בדף הבא נדבר בהרחבה על תגי meta ומשמעותם. בנוסף, יכולות לצוץ בעיות בשילוב של כיווני כתיבה שונים, כמו שאפשר לראות במשפטים הבאים:
לפעמים, כשמנסים לכתוב עברית עם מספרים, לדוגמא - 03-5550000. המספר אמור להראות ככה: 03-5550000 כמו שאפשר לראות, במשפט למעלה המספר מתעוות סביב המקף, מה שלא קורה במשפט למטה. זה בגלל שבמשפט התחתון, עטפתי את המספר בתג מיוחד שנקרא bdo, שהוא מסמן לדפדפן כיווניות של קטע.
קוד המקור של המשפט התחתון הוא זה:
המספר אמור להראות ככה: <bdo dir=ltr> 03-5550000 </bdo>
צריך לזכור שכאשר עובדים בעברית לוגית, כיווניות המסמך היא מימין לשמאל, ואם רוצים לשלב טקסט שהכיווניות שלו הפוכה, יש לציין את זה לדפדפן. שילוב של עברית ואנגלית בדרך כלל יעבוד חלק, גם בלי שימוש בתג bdo, אבל למען הסדר הטוב ולמען המקרים שבהם הוא לא יעבור חלק, אני ממליץ להשתמש בתג bdo בכל פעם שיש שינוי בכיווניות של חלק ממשפט. שלב שתים עשר:'תגי מטה הם תגים מיוחדים. הם לא מציגים שום דבר ללקוח, אלא משמשים לתת מידע על הדף לדפדפן של הגולש, למנועי חיפוש, וכיוצא בזה. לתג מטה יש מאפיין חובה אחד, והוא content. הוא מקבל ערך טקסט שמשמעותו תלויה במאפיינים האחרים של התג.
המאפיינים האחרים שלו יכולים להיות או name - מקבל אחד מהערכים הבאים: author, description, keywords, generator, revised, others ובמקרה כזה, הערך של המאפיין content יכיל את של המחבר, תאור של הדף, מילות מפתח למנועי חיפוש וכו'.
מאפיין אפשרי נוסף לתג מטה הוא http-equiv, שמקבל אחד מהערכים הבאים: content-type, expires, refresh במקרה הזה, הערך של המאפיין content יכיל מידע על סוג הקובץ, עד מתי הדפדפן יכול לשמור את הקובץ בזכרון המטמון שלו, וכו'.
שימו לב - אי אפשר להשתמש בתג מטה אחד בשני המאפיינים name ו http-equiv.
השימושים לתגי מטה:
כמו שראינו בדף הקודם שדיבר על עברית, בעזרת תג מטה אנחנו אומרים לדפדפן באיזה שיטה אנחנו כותבים את העברית.
<meta http-equiv="content-type" content="text/html; charset=windows-1255"> שימושים נוספים - בעזרת תג מטה ניתן לקבוע מתי יפוג תוקפו של הדף מזכרון המטמון של הדפדפן. ברגע שפג התוקף, הדפדפן חייב לבקש את הדף מהשרת שוב, מה שמאריך את זמן הטעינה. לעומת זאת, אם נעשו שינויים בדף שבשרת, ולדפדפן יש עותק תקף בזכרון המטמון, הגולש יקבל את הדף מזכרון המטמון של הדפדפן ולא יראה את השינויים. כדי לקבוע את תוקף הדף משתמשים בתג מטה כך:
<metahttp-equiv="expires"content="seconds|date">
<meta http-equiv="expires" content="seconds|date"> בעזרת תג מטה אפשר לקבוע לדפדפן לרענן את הדף או לטעון עמוד חדש תוך x זמן מרגע סיום טעינת הדף הנוכחי:
<metahttp-equiv="refresh"content="url;seconds">
שלב שלוש עשרה:בשפת HTML ישנם תווים וסימנים מיוחדים, שבשביל להציג אותם בדפדפן צריך להשתמש ברצף של תווים. כמו לדוגמא, אם אנחנו רוצים להציג מילים עם יותר מרווח אחד ביניהן, אי אפשר פשוט להוסיף רווחים בין המילים, מכיוון שהדפדפן מצמצם אותם לרווח אחד. בשביל זה משתמשים ברצף התוים . גם סוגריים משולשים אפשר להציג רק בדרך הזו. בטבלה הבאה תוכלו לראות חלק מהסימנים המיוחדים ואת רצף התווים המשמש להצגתם בדפדפן.
כשהמאפיין align מקבל top 
