HTML/סיכום למתחילים

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
קפיצה לניווט קפיצה לחיפוש

תזכורת[עריכה]

מבנה המסמך[עריכה]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">
  <head>
    <title>כותרת משמעותית למסמך שמעידה על תוכנו</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="he" />
  </head>
  <body>
    ...
  </body>
</html>


עיצוב טקסט[עריכה]

<h2>
  כותרת משנית
</h2>
<p> פסקה ראשונה</p>
<p> פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה 
שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה 
שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה  </p>
<p>  טקסט רגיל  </p>

  <hr />
<p>
  <b>טקסט להדגשה</b> <br />
  <i>טקסט להטייה</i> <br />
  <sub>טקסט להנמכה</sub> <br />
  <sup>טקסט להגבהה</sup> <br />
  <big>טקסט להגדלה</big> <br />
  <small>טקסט להקטנה</small> <br />
  <tt>טקסט ברוחב אחיד</tt> <br />
</p>

<p> רשימת כוכביות  </p>
<ul>
  <li> פריט אחד </li>
  <li> פריט שני </li>
  <li> פריט שלישי </li>
</ul>

<p> רשימת ממוספרת  </p>
<ol>
  <li> פריט אחד </li>
  <li> פריט שני </li>
  <li> פריט שלישי </li>
</ol>

<p> רשימת הגדרות </p>
<dl>
  <dt> HTML </dt>
  <dd> פורמט ליצירת דפי אינטרנט </dd>

  <dt> CSS </dt>
  <dd> פורמט לעיצוב דפי HTML </dd>

  <dt> Javascript </dt>
  <dd> שפת תסריטים להעשרת דפי אינטרנט </dd>
</dl>


פלט:

כותרת משנית

פסקה ראשונה

פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה פסקה שניה

טקסט רגיל


טקסט להדגשה
טקסט להטייה
טקסט להנמכה
טקסט להגבהה
טקסט להגדלה
טקסט להקטנה
טקסט ברוחב אחיד

רשימת כוכביות

  • פריט אחד
  • פריט שני
  • פריט שלישי

רשימת ממוספרת

  1. פריט אחד
  2. פריט שני
  3. פריט שלישי

רשימת הגדרות

HTML
פורמט ליצירת דפי אינטרנט
CSS
פורמט לעיצוב דפי HTML
Javascript
שפת תסריטים להעשרת דפי אינטרנט




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="he" xml:lang="he" dir="rtl">

 <head>
   <title>כותרת משמעותית למסמך שמעידה על תוכנו</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="content-language" content="he" />
 </head>
 <body>
   ...
 </body>

</html>

תמונות וקישורים[עריכה]

<p> 
  תמונה של פרפרים: 
  <img src="http://upload.wikimedia.org/wikibooks/he/5/52/Polygonia c-album DePanne.jpg" alt="פרפרים" /> 
</p>
<p>
  <a href="http://he.wikibooks.org">
    קישור לאתר ויקיספר
  </a>
</p>
<p>
  קישור לתמונה
  <a href="http://he.wikibooks.org">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/70/Wikibooks-logo-he.png" alt="ויקיספר העברי" />
  </a>
</p>


רשימת האלמנטים שנלמדו[עריכה]

XHTML10STRICT - ספר המפרט של XHTML 1.0 STRICT. תמיד חזרו להשתמש בו כאשר אתם לומדים אלמנט חדש.

אלמנטים של מבנה המסמך:

אלמנטים של עיצוב טקסט:

אלמנטים של רשימות

קישור

תמונה

טבלאות

טפסים

למי מותר להיות בן של מי?[עריכה]

אלמנטים מסוג גוש:

  • p
  • h1-h6
  • ul, ol, dl
  • hr
  • fieldset
  • table

אלמנטים מסוג שורה:

  • a
  • br
  • img
  • עיצוב טקסט: tt, i, b, big, small sub, sup,
  • רכיבי טופס: input, select, textarea


טבלת אבות ובנים:

שם האב html head body p h1-h6 ul,ol dl table tr td, dd, li form fieldset
רשימת בנים:

head
body

title
meta

גוש
form

טקסט פשוט
שורה

טקסט פשוט
שורה

li

dt
dd

tr

td

טקסט פשוט
גוש
שורה
form

גוש

טקסט פשוט
גוש
שורה
form

  • טבלה זו מכילה רק את האלמנטים שנלמדו בחלק המיועד למתחילים.

דגשים ותזכורות לכתיבה נכונה[עריכה]

  • השתמשו במבנה המסמך!
  • השתמשו בכותרת משמעותית בתוך אלמנט title!
  • השתמשו באלמנטים meta ובמאפיינים xml:lang, lang ו- dir על מנת להציג שפה כפי שצריך!
  • השתמשו בקידוד utf-8 על ידי שמירה נכונה של המסמך, וציינו זאת באלמנט meta!
  • אין לכתוב טקסט ישירות בתוך אלמנט body אלא רק בתוך אלמנט p ודומיו.
  • השתמשו בטבלת האבות כדי להכיל בצורה נכונה אלמנטים וטקסט זה בזה.
  • למדו CSS והמנעו משימוש באלמנטים b, i, big, small, sub ,sup, tt כדי להפריד עיצוב מתוכן.

לאן להמשיך מכאן?[עריכה]

  • HTML מתקדם לכיוון של הוצאת כל האלמנטים הקשורים לעיצוב מתוך המסמך. כשזה יקרה המסמכים שלכם עלולים להיות משעממים מאוד וחסרי עיצוב. ההמלצה הראשונה היא להתחיל ללמוד CSS שהוא פורמט לעיצוב מסמכי HTML.
  • ל-HTML אפשרויות רבות שלא נלמדו בחלק זה שמיועד למתחילים. המשיכו ללמוד HTML למתקדמים.
  • הוסיפו דינאמיות לדפי האינטרנט שלכם, שפרו את ממשק הטפסים, צרו משחקים לאינטרנט ועוד על ידי שפת צד הלקוח הנפוצה ביותר Javascript, אך היזהרו ממנה! היא אינה נתמכת על ידי כל הדפדפנים, ואנשים שדואגים מפני פרצות אבטחה לא משתמשים בה!
  • צרו דפים באופן אוטומטי, למדו לשלוח מידע מדף לדף, צרו אתרים מאובטחים על ידי שם משתמש וסיסמה, והתכוננו לעבודה עם מסדי נתונים: למדו שפות צד שרת! PHP היא הנפוצה מביניהן, והיותר חזקה. תוכלו ללמוד גם ASP, שהיא שפת צד השרת של מיקרוסופט.
  • למדו להעלות את הדפים שיצרתם לאינטרנט, ולמצוא שירות לאירוח אתרים בחינם: אחסון אתרים באינטרנט.

ניווט[עריכה]

הפרק הקודם:
איסורים חשובים!
סיכום למתחילים
תרגילים
הפרק הבא:
HTML