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

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

תוכן עניינים

1 תזכורת
2 רשימת האלמנטים שנלמדו
3 למי מותר להיות בן של מי?
4 דגשים ותזכורות לכתיבה נכונה
5 לאן להמשיך מכאן?
6 ניווט

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

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

<!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>

פלט:

כותרת משנית

פסקה ראשונה

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

טקסט רגיל

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

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

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

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

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

רשימת הגדרות

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

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

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

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

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

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

תוכן עניינים

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

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

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

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

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

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

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

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

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

צפיות

כלים אישיים

ניווט

קהילה

חיפוש

תיבת כלים

הדפסה/ייצוא