diff options
| -rw-r--r-- | he-he/html-he.html.markdown | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/he-he/html-he.html.markdown b/he-he/html-he.html.markdown new file mode 100644 index 00000000..6e4421f7 --- /dev/null +++ b/he-he/html-he.html.markdown @@ -0,0 +1,166 @@ +--- +language: html +filename: learnhtml-he.html +contributors: + - ['Christophe THOMAS', 'https://github.com/WinChris'] +translators: + - ['Menachem Zeivald', 'https://github.com/MenachemZeivald'] +lang: he-he +--- + +HTML קיצור של Hypertext Markup Language כלומר זוהי שפה שמשתמשת בתגיות. + +זוהי שפה המאפשרת לנו לכתוב אתרי אינטרנט. +זוהי שפת תגיות והיא מאפשרת לנו לכתוב דפי אינטרנט באמצעות קוד +כדי לתת הוראות לדפדפן כיצד יש להציג טקסט ונתונים. +למעשה, קובצי HTML הם קבצי טקסט פשוטים. + +מהם התגיות? +זוהי שיטה לארגון מידע על ידי הקפתו בתגיות פתיחה וסגירה. +התגית משמשת כדי לתת משמעות לטקסט שהיא מקיפה. +ל-HTML יש גרסאות רבות. כאן נדבר על HTML5. + +**הערה:** אתה יכול לבדוק את התגים והאלמנטים השונים תוך כדי קריאת המדריך +באתר כמו [codepen](http://codepen.io/pen/) כדי לראות את ההשפעות שלהם, +להבין איך הם עובדים ולהכיר את השפה. +מאמר זה עוסק בעיקר בתחביר של HTML וכמה עצות שימושיות. + +```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 אינה שפת תכנות** + +## לקריאה נוספת + +- [Wikipedia](https://he.wikipedia.org/wiki/HTML) +- [HTML Tutorial (EN)](https://developer.mozilla.org/en-US/docs/Web/HTML) +- [W3Schools (EN)](http://www.w3schools.com/html/html_intro.asp) |