HTML וכל מה שמסביב

מה זה HTML?

המבנה והמטרות של HTML

כל הדפדפנים בעולם משתמשים ב HTML כדי להציג תוכן.

HTML היא שפה שאומרת לדפדפן מה אנחנו רוצים להציג למשתמש.

השפה בנויה מתגיות (tags), כאשר כל תגית מוצגת בצורה הבאה:

<tag opt="Something"…> Content </tag>

או

<tag opt="Something"…/>

שימו לב שאם אין Content אז אפשר (וכדאי) להשתמש ברישום המקוצר של התגית.

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

לכל תגית יש אפשרות להוסיף תכונות (attributes), למשל תגית של היפרלינק (קישור לדף אחר) תיראה כך:

<a href="www.google.com"> Google site </a>

במקרה זה, ה attribute אומר לנו איזה אתר יוצג כאשר נלחץ על הלינק.

לכל attribute יש שם (במקרה שלנו href) וערך (במקרה שלנו http://www.google.com). הערך צריך להיות בתוך גרשיים.

במקרים רבים התגיות מקוננות אחת בתך השניה. למשל ברשימה (list) יש את תגית הרשימה ובתוכה יש תגיות של איברים ברשימה. כלומר זה נראה כך:

<ul>

<li>Item #1</li>

<li>Item #2</li>

<li>Item #3</li>

</ul>

שימו לב שהתגיות <li> מקוננות בתוך התגית <ul> ושלכל התגיות יש סוגר.

הערות ב HTML נראות כך:

<!– הערות –>

ההערות לא מוצגות למשתמש והן משמשות לתיעוד עבור מי שמפתח את הקוד.

הדבר האחרון שצריך לדעת בקשר ל HTML (והוא נמצא דווקא בתחילת קובץ HTML) הוא DTD או Document Type Definition. לא חובה לשים אותו אבל כדאי לשים אותו כדי למנוע בעיות בזיהוי ה HTML ע"י דפדפנים שונים.

אם ה DTD נמצא בקובץ ה HTML הוא מפיע בשורה הראשונה של הקובץ והוא נראה פחות או יותר כך:

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

שימו לב שזאת הגדרה של strict DTD, כלומר DTD שלא מאפשר פריימים ולא מפשר תגיות מיושנות. קיימים DTDs שמאפשרים תגיות מיושנות ופריימים.

איך עובדים עם HTML?

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

בשביל לעבוד עם HTML צריך 2 דברים:

  1. דפדפן אינטרנט – אני עובד עם פיירפוקס וכדאי גם לכם לעבוד אתו.
  2. עורך – אני ממליץ על ++Notepad.

בעזרת העורך יש ליצור את קובץ ה HTML. הקובץ יכול להיות עם סיומת htm  או html. בעבר הייתה הגבלה של 3 תוים ל extension של הקובץ (כלומר מה שבא אחרי הנקודה) אבל כיום אין הגבלה כזאת. את הקובץ שיצרנו יש לפתוח בעזרת הדפדפן ע"י File->Open File ובחירת הקובץ או ע"י הקשה כפולה (double click) על הקובץ.

אני קראתי לקובץ index.html והוא נראה כך:

זהו צילום מתוך ++Notepad.

אז מה יש לנו כאן? יש לנו תגית html שבתוכה יש תגיות head ו body.

תגית html אומרת שזה מסמך HTML.

תגית header היא הכותרת של המסמך ובתוכה אפשר לשים את הדברים הבאים:

  1. כותרת למסמך שתופיע בכותרת הדפדפן ובכותרת ה Tab. את הכותרת יש לשים בתוך תגית title.
  2. קוד כלשהו בשפת סקריפט בעזרת התגית script.
  3. תגית meta עבור meta data. זה קשור לשפת התצוגה, הצגה מימין לשמאל ועוד הרבה דברים.
  4. תגית base עבור לינקים.

תגית body עבור תוכן המסמך.

רוב תכנו של המסמך יהיה בתוך ה body.

תגיות נפוצות ב HTML

ל HTML יש מגוון גדול מאוד של תגיות. אני אסביר את הנפוצות שבהן ואדגים איך משתמשים בהן.

  1. רשימות. אפשר ליצור רשימה, ממוספרת או לא, בצורה הבאה:

    התגית ul היא עבור רשימה לא ממוספרת והתגית ol היא עבור רשימה ממוספרת.
  2. כותרות. אפשר ליצור כותרות גדולות, בינוניות או קטנות. זה מתחיל מ h1 (גדול) עד ל h6 (קטן):
  3. היפר קישור (hyperlink). זהו קישור לדף אינטרנט אחר:

    זהו דף הפניה לגוגל. שימו לב שצריך לכתוב //:http לפני כתובת האתר.
    אפשר להפנות גם למיקום אחר באותו דף, אבל אז צריך לתת גם מיקום בדף בעזרת <a name>.
  4. קו תחתון (underline), אותיות עבות (bold) ואותיות נטויות (italic):

    כמובן שאפשר לשלב בין התגיות, כלומר אם רוצים גם קו תחתון וגם אותיות נטויות, כותבים <u><i> (ולא לשכוח לסגור בסוף).
    אם ניסיתם להריץ את הדוגמא הזאת, בוודאי שמתם לב ש3 השורות מופיעות בעצם בשורה אחת. בשביל זה נעבור לקבוצה הבאה של תגיות.
  5. פיסקה, קו מפריד וירידת שורה:

    התגית p משמשת לפיסקה. בדוגמא הזאת לא תראו שום דבר שמיוחד לפסקאות אבל באופן כללי אפשר להשתמש ב style sheets כדי להציג פיסקה בצורה יפה ומעוצבת.
    קו מפריד נוצר ע"י התגית hr. שימו לב ש width היא תכונה ישנה ולא כדאי להשתמש בה. במקום זה כדאי להשתמש ב style sheets.
    ולבסוף כדי לרדת שורה משתמשים ב </br>.
  6. טבלאות. קיימות מספר תגיות עבור טבלאות:
    הקוד הזה יוצר טבלה בגודל 2X2 ללא header.
    התגית table מגדירה טבלה. התכונה border מגדירה את עובי המסגרת של הטבלה, וללא התכונה הזאת היינו מקבלים טבלה ללא מסגרת.
    התגית tr מגדירה שורה בטבלה.
    התגית td מגדירה תא בשורה.
    לטבלאות קיימות תגיות נוספות כגון th להגדרת header.
    אפשר להשתמש בטבלאות להגדרת מספר עמודות של טקסט, כמו בכתבה בעיתון.
  7. מסגרות (frames). אפשר לחלק את הדף למספר חלקים, למשל חלק אחד לכותרת, חלק שני ללוגו וחלק שלישי לתוכן טקסטואלי.
    למשל בדוגמא הבאה:
    חשוב מאוד: התגית frameset באה במקום התגית body. אני גיליתי את זה בדרך הקשה.
    התגית frameset משמשת להגדרת קבוצה של פריימים. התכונה rows אומרת כמה שורות יהיו ב frameset והתכונה cols אומרת כמה עמודות יהיו ב frameset.
    התגית frame ביחד עם התכונה src מפנות לקובץ HTML של ה frame.
  8. טפסים (forms). בתוך מסמך HTML אפשר להציב פקדים כגון תיבת טקסט, בחירה, רדיו ועוד. למשל בדוגמה הבאה:
    כל הטופס נמצא בתוך התגית form. בתוך הטופס יש פקדים והם נוצרים ע"י התגיות input, select, button ועוד. אני לא מפרט פה את כל הפקדים אבל אתם יכולים לנסות את הדוגמא הזאת להתרשמות.
    בנוסף, לטופס יש תכונות. אני לא מסביר אותן כאן כי זה חורג מההסברים על HTML.

סיכום

כמו שראיתם HTML היא שפה עשירה מאוד והיא מאפשרת מגוון אפשרויות לכתיבת דפים, וזה עוד לפני שנכנסים לתחמים כמו CSS ו JavaScript.

מראי מקום ללימוד יסודי על HTML:

  1. w3schools – אתר קל יחסית ללמוד HTML.
  2. W3C – האתר המקיף ביותר ללימוד HTML, אם כי הוא קשה יחסית.

להגיב »

עדיין אין תגובות.

RSS feed for comments on this post. TrackBack URI

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

יצירה של אתר חינמי או בלוג ב־WordPress.com.

%d בלוגרים אהבו את זה: