Get the code: learnhtml.txt
HTML קיצור של Hypertext Markup Language כלומר זוהי שפה שמשתמשת בתגיות.
זוהי שפה המאפשרת לנו לכתוב אתרי אינטרנט. זוהי שפת תגיות והיא מאפשרת לנו לכתוב דפי אינטרנט באמצעות קוד כדי לתת הוראות לדפדפן כיצד יש להציג טקסט ונתונים. למעשה, קובצי HTML הם קבצי טקסט פשוטים.
מהם התגיות? זוהי שיטה לארגון מידע על ידי הקפתו בתגיות פתיחה וסגירה. התגית משמשת כדי לתת משמעות לטקסט שהיא מקיפה. ל-HTML יש גרסאות רבות. כאן נדבר על HTML5.
הערה: אתה יכול לבדוק את התגים והאלמנטים השונים תוך כדי קריאת המדריך באתר כמו codepen כדי לראות את ההשפעות שלהם, להבין איך הם עובדים ולהכיר את השפה. מאמר זה עוסק בעיקר בתחביר של HTML וכמה עצות שימושיות.
<!-- הערות לקוד כתובות בצורה הזאת -->
<!--
הערות
יכולות
להתפרס
על פני
מספר
שורות
-->
<!-- #################### התגיות #################### -->
<!-- לפנינו קובץ HTML לדוגמא עם הסברים. -->
<!DOCTYPE html>
<html>
<head>
<title>האתר שלי</title>
</head>
<body>
<h1>שלום עולם!</h1>
<a href="http://codepen.io/anon/pen/xwjLbZ">
בואו נבדוק את הקישור הזה
</a>
<p>זוהי פסקה.</p>
<p>זו עוד פסקה.</p>
<ul>
<li>זה פריט ברשימה לא ממוספרת</li>
<li>זהו פריט נוסף</li>
<li>וזה הפריט האחרון ברשימה</li>
</ul>
</body>
</html>
<!--
קובץ HTML מתחיל תמיד בציון לדפדפן שהדף הוא HTML.
-->
<!DOCTYPE html>
<!-- לאחר מכן, מתחילים בפתיחת תג <html>. -->
<html>
<!-- שיסגר בסוף העמוד עם התג </html>. -->
</html>
<!-- שום דבר לא אמור להופיע אחרי התג הסופי הזה. -->
<!-- בפנים (בין תגי הפתיחה והסגירה <html></html>), אנו מוצאים: -->
<!-- כותרת המוגדרת על ידי <head> (יש לסגור אותה עם </head>). -->
<!--
הכותרת מכילה תיאור ומידע על העמוד שאינם
מוצגים, זה מטא נתונים.
-->
<head>
<!--
התג <title> מציין לדפדפן את הכותרת להצגה בדפדפן
שורת הכותרת ושם הכרטיסייה של החלון.
-->
<title>האתר שלי</title>
</head>
<!-- אחרי הקטע <head>, אנו מוצאים את התג - <body> -->
<!-- עד לנקודה זו, שום דבר לא יופיע בחלון הדפדפן. -->
<!-- עלינו למלא תוכן בתוך ה - <body>. -->
<body>
<!-- התג h1 יוצר כותרת. -->
<h1>שלום עולם</h1>
<!--
יש גם תתי כותרת בגדלים שונים, מהגדול (h2) לקטן (h6)
-->
<!-- קישור לכתובת של אתר ניתנת על ידי התכונה href="" -->
<a href="http://codepen.io/anon/pen/xwjLbZ"> בואו נבדוק את הקישור הזה </a>
<!-- התג <p> מאפשר לנו לכלול טקסט בדף ה-html. -->
<p>זוהי פסקה.</p>
<p>זו עוד פסקה.</p>
<!-- התג <ul> יוצר רשימה לא ממוספרת. -->
<!--
כדי לקבל רשימה ממוספרת נשתמש ב-<ol>.
-->
<ul>
<li>זה פריט ברשימה לא ממוספרת</li>
<li>זהו פריט נוסף</li>
<li>וזה הפריט האחרון ברשימה</li>
</ul>
</body>
<!-- וזהו, יצירת קובץ HTML יכולה להיות פשוטה. -->
<!-- אבל אפשר להוסיף הרבה סוגים נוספים של תגי HTML. -->
<!-- התג <img /> משמש להוספת תמונה. -->
<!--
מקור התמונה מצוין באמצעות התכונה src=""
המקור יכול להיות כתובת URL או אפילו נתיב לקובץ במחשב שלך.
-->
<img src="http://i.imgur.com/XWG0O.gif" />
<!-- אפשר גם ליצור טבלה. -->
<!-- אנו פותחים אלמנט <table>. -->
<table>
<!-- <tr> מאפשר לנו ליצור שורה. -->
<tr>
<!-- <th> מאפשר לנו לתת כותרת לעמודת טבלה. -->
<th>כותרת ראשונה</th>
<th>כותרת שנייה</th>
</tr>
<tr>
<!-- <td> מאפשר לנו ליצור תא טבלה. -->
<td>שורה ראשונה, עמודה ראשונה</td>
<td>שורה ראשונה, עמודה שנייה</td>
</tr>
<tr>
<td>שורה שנייה, עמודה ראשונה</td>
<td>שורה שנייה, עמודה שנייה</td>
</tr>
</table>
HTML נכתב בקבצים המסתיימים ב-.html או .htm.
HTML אינה שפת תכנות
Got a suggestion? A correction, perhaps? Open an Issue on the GitHub Repo, or make a pull request yourself!
Originally contributed by Christophe THOMAS, and updated by 2 contributors.