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 />
  <sup>טקסט להגבהה</sup> <br />
  <sub>טקסט להנמכה</sub> <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>

פלט:

כותרת משנית

פסקה ראשונה

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

טקסט רגיל

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

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

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

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

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

רשימת הגדרות

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

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

<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. תמיד חזרו להשתמש בו כאשר אתם לומדים אלמנט חדש.

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

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

h1, h2, h3, h4, h5, h6
p
br
hr
b
i
sub
sup
big
small
tt

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

ul
ol
li
dl
dd
dt

קישור

a

תמונה

img

טבלאות

טפסים

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

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

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