יום ראשון, 22 במרץ 2009

1. הקדמה - HTML

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

HTML- ראשי תיבות של Hyper Text Markup Language

.זוהי שפת תגיות (markup language) המוגדרת כיישום SGML פשוט, המכילה הוראות לדפדפנים (Internet Browsers) ליצירה ועיצוב עמודי אינטרנט. HTML היא כיום תקן ברשת האינטרנט, וחוקיה מוגדרים על ידי ארגון תקינה בינלאומי, הW3C-. הגרסה הנוכחית של התקן היא HTML 4.01

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

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

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

לאתר ארגון התקינה הבינלאומי w3c

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

הפקודות ב HTML נכתבות בתוך סוגריים משולשים (<>), והן נקראות תגים או תגיות HTML [ראו הרחבה בפרק 3].

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

מה צריך לדעת כדי ללמוד HTML?

מדריך זה אינו דורש ידע קודם כלל.


באמצעות אילו כלים כותבים HTML?

כל עורך טקסט פשוט, כדוגמת notepad, מספיק כדי למלא את המשימה. עורכים נוספים, המספקים מעט יותר פונקציונליות הם TextPad ו-EditPlus.

► הקודם הבא ◄



פורסם על ידי Digital Training team ב- 6:12 0 תגובות
תוויות: ,

2.1 מבנה מסמך הHTML

בשביל לכתוב HTML אין צורך ביותר מעורך טקסט פשוט. פנקס הרשימות של חלונות (notepad) יהיה מצוין.


























הדבר הראשון שתצטרך לעשות הוא לומר לדפדפן שלך שאתה "תדבר" איתו בשפת HTML. את זה אתה עושה עם התג <html> (לא ממש מפתיע). 
לכן לפני שאתה עושה דבר כלשהו, כתוב "<html>" בשורה הראשונה של המסמך שלך ב-Notepad.

כפי שאתה לבטח זוכר, <html> הוא תג פותח וחייב להסגר בתג סוגר בסיום כתיבת מסמך ה-HTML. לכן, כדי לוודא שלא תשכח את התג הסוגר למסמך, הקלד "<html/>" מספר שורות מתחת וכתוב את יתר המסמך בין התגים <html> ו- <html/>.

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

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

מבנה מסמך HTML בסיסי נראה כך:
<html>

<head>

     <title>כותרת</title>

</head>

<body> (או:) <frameset>

     תוכן הדף

</body> (או:) </frameset>

</html>


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

1.        תגית ה-html> >    התגית הראשית, שבתוכה נכתב מסמך ה- HTML.

2.        תגית ה- <head>   התגית שמסמלת את ראש המסמך. תגית זו מיועדת לכותרת דף ה-HTML, למידע כללי על הדף, וגם לחלק מהעיצובים והסקריפטים.

3.        תגית ה- <body>   היא התגית שמסמלת את גוף המסמך. בתגית זו מכניסים את תוכן המסמך.

במקום תגית ה-<body>, ניתן לעשות שימוש בתגית <frameset>, המשמשת להכנסת דפי אתרים אחרים לתוך דף מסוים ומיקומם בדף.



► הקודם הבא ◄





פורסם על ידי Digital Training team ב- 6:11 0 תגובות
תוויות: ,

2.2 כתיבת מסמך HTML

העתיקו את הקוד המוצג למטה אל פנקס הרשימות שלכם, ושמרו אותו בתור MyNewPage.html (שימו לב לשנות את סוג הקובץ בתיבת השמירה מ-txt.*  ל-all files).






















<html>
<head> 
     <title>my first html page</title> 
</head> 

<body> 
     זהו גוף המסמך. 
     כאן יבוא כל הטקסט 
     שנרצה להציג בדפדפן. 
</body> 

</html> 
פתחו את הדפדפן שלכם, לכו לתפריט file, ופתחו את הקובץ ששמרתם. 

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

מעבר לשורה חדשה בטקסט

בכדי לרדת שורה על מסך הדפדפן, יש לציין את זה בתג  </ br>.

כעת פתחו את קובץ ה HTML בכתבן שלכם, והוסיפו את התג 
</ br> בכל ירידת שורה. 
הקובץ אמור להראות כעת כך:

<html> 

<head> 
     <title>my first html page</title> 
</head> 

<body> 
     זהו גוף המסמך. <br />
     כאן יבוא כל הטקסט <br />
     שנרצה להציג בדפדפן. <br />
</body> 

</html> 

שמרו את הקובץ ורעננו את הדפדפן באמצעות מקש [5F]. עכשיו תראו שהשורה האחת הפכה ל-3 שורות. 
התג </ br> הוא אחד מהתגים הבודדים ב- HTML שאין לו תג סוגר.



◄ הקודם הבא ►



פורסם על ידי Digital Training team ב- 6:10 0 תגובות
תוויות: , , , ,

2.3 Doctype

לפי תקן w3.org, צריך לרשום בתחילת דף ה-HTML, (לפני תגית ה-HTML עצמה), הצהרה של גרסת ה-HTML של הדף.

דוגמה למשפט כזה:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


במירכאות הראשונות שב-Doctype, צריך לכתוב את גרסת ה-HTML של הדף לפי הקוד המתאים, ובמירכאות השניות יש לציין את קובץ ה-DTD (Document Type Definition) של הגרסה.

מרבית עורכי ה- HTML, יוצרים את הצהרת גרסת ה- HTML באופן אוטומטי.

► הקודם הבא ◄


פורסם על ידי Digital Training team ב- 6:09 0 תגובות
תוויות: , ,

3.1 חלוקת התגיות

ניתן לחלק את התגיות לארבע קבוצות:

 

1.         תגיות מבניות המתארות את תפקיד המלל במסמך. לדוגמה:

<h1>כלבי הים </h1>


פירושו עבור הדפדפן - הצג את המלל "כלב ים" ככותרת ראשית.

 

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

<b>מודגש</b>


יגרום לדפדפן להציג מלל מודגש.

 

3.         קישורים, שתפקידם לקשר אובייקט במסמך למסמך אחר. לדוגמה:

<a href="http://he.wikipedia.org"> ויקיפדיה </a>


יצור קישור כזה:  ויקיפדיה.

 

4.         שיבוץ אובייקטים שונים שאינם מלל. לדוגמה:

<img src="img.png" />

יציג את התמונה img.png בתוך המסמך

.

 

► הקודם הבא ◄


פורסם על ידי Digital Training team ב- 6:08 0 תגובות
תוויות: ,

3.2 מבנה התגיות

1.        מבנה של תגית עם תוכן שכתוב בתגית עצמה הוא:

  1. <tag property="value" method>תוכן</tag>

התגית נפתחת תמיד ב <> שביניהם מופיע שם התגית (tag), ולפעמים גם תכונות נוספות, באמצע מופיע התוכן (אם יש), וסוף התגית הוא <tag/> (במקום "tag" יש לכתוב את שם התגית).

 

במידה שתגית היא תגית שאין לה תגית סוגרת כגון תגיות  <input>,<img>,<br> אז אין צורך להוסיף את הסימן /  בסוף התגית. לדוגמה: <br>

 

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

 

·           ה-property  שמופיע במבנה, הוא בעל ערך (ה-value).

·           ה-method  הוא תכונה בוליאנית, שערכה בעצם ציונה או אי-ציונה.

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

 

2.        מבנה של תגית חסרת תוכן שכתוב בתגית עצמה הוא:

<tag properties & methods />
 

*    הערה: ה - "properties & methods" משמש רק כאן לקיצור של המאפיינים והשיטות, שנכתב עליהם לעיל. אין אפשרות להכניס "properties & methods" בדף ה- HTML עצמו.




► הקודם הבא ◄


פורסם על ידי Digital Training team ב- 6:07 0 תגובות
תוויות: ,
הירשם ל- רשומות (Atom)