הקדמה- מהו HTML, ולמה הוא טוב.
- מה טוב הגרסא החדשה של HTML(הגרסה הנוכחית היא 5) עדיפה על גרסאות ישנות יותר.
- איך ליצור דף HTML בסיסי ולשים לו כותרת.
מתחילים
ניקח את הקובץ שיצרנו שיעור קודם ונעשה:
קליק ימני -> פתח באמצעות -> Notepad.
אנגלית: קליק ימני -> Open With ->ע Notepad.
מי שמשתמש ב-Notepad++:
קליק ימני -> Edit With Notepad++.
כאמור יהיה לנו את הקוד שרשמנו שיעור קודם:
קוד HTML:
<!DOCOTYPE HTML><html> <head> <title>My First WebSite!</title> </head> <body> </body></html>
נכון?
בינתיים יש לנו רק דף ריק, עם כותרת שרשום שם "My First WebSite!" לא הרבה, נכון?
זוכרים שאמרתי מה ההבדל בין התג <head> לתג <body>?
<head>
תג ה-head אומר שזה כל הקטע של "מאחורי הקלעים", אפשר לשים שם דברים כמו כותרת הדף, הגדרת מילות מפתח, הגדרת מילות תיאור ועוד.
<body>
פה יהיה כל התוכן, כל מה שכתוב.
שימו לב
בשיעורי בית ראיתי כמה מגישים את השיעורים תוך כדי שהתגים על אותיות גדולות, כלומר במקום לרשום <html> הם רשמו <HTML>.
דבר האסור בתכלית האיסור, חוץ מ-"<!DOCOTYPE HTML>" אין לרשום תגים אחרים עם אותיות גדולות. הכל באותיות קטנות. (תקנים..)
אוקיי, אז עכשיו יש לנו קובץ HTML, אבל מה נעשה איתו? בשביל לרשום טקסט נרשום את המלל בתגית ה-<body>.
לדוגמה אם נרשום בעורך טקסט בתוך תגית ה-<body> לדוגמה "TEST". נפתח את הדפדפן (אם הוא כבר פתוח אז נלחץ על "רענן" או על F5) ונראה שפתאום רשום "TEST", אולי לא כ"כ יפה, אבל יש!
אז כבר הבנו שצריך לרשום טקסט בתוך תגית ה-<body>.[/LIST]משימה
את הדבר הבא אני רוצה שתעשו תוך כדי מה שרשום פה. זה יעזור לכם, מומלץ לעשות.
כל פעם אתן תג, תג סוגר ותג פותח. אני רוצה שתרשמו את זה בתגית ה-<body> תרשמו משהו בין שני התגים תשמרו ותראו מה יצא בפדפן.
ברור?
אז מתחילים:
| תג פותח |
תג סוגר |
| <b> |
</b> |
| <i> |
</i> |
| <u> |
</u> |
| <code> |
</code> |
לאחר שעשיתם זאת, תסתכלו בספויילר. אמור לצאת לכם אותו דבר:
| תג פותח |
תג סוגר |
תוצאה |
| <b> |
</b> |
טקסט מודגש |
| <i> |
</i> |
טקסט נטוי |
| <u> |
</u> |
טקסט עם קו תחתון |
| <code> |
</code> |
יציג טקסט בצורת מונוספייס |
אמור לצאת אותו דבר, לא אמור להיות משהו שגוי. אבל אם כן כנראה שבשמירה של הקובץ היה משהו פגום.
לדוגמה יצא קובץ בשם X.html.txt (בד"כ בסביבת חלונות). אם כן תעשו עוד פעם את מה שהסברתי בשיעור הראשון.
ירידת שורה ופסקאות.
כפי שכבר ראיתם, אי אפשר לרדת שורה בעורך טקסט וזה ירד גם שורה בדפדפן, או לעשות כמה רווחים נכון?
בשביל זה.
לדוגמה אם נרשום את הקוד הבא בתגית ה-<body>:
קוד HTML:
זוהי השורה הראשונה.זוהי השורה השנייה (לא נכון).<p>זוהי השורה השלישית.</p>זוהי השורה הרביעית
עשה פסקה רק איך שרשמנו את התג <p> ונגמרה הפסקאה איך שסגרנו את התג </p>.
אבל אם אני לא רוצה לעשות פסקאה? רק לרדת שורה?
בשביל זה יש את התג <br /> (שימו לב, אין לו תג סוגר ובסוף התג יש מקף "/").
נרשום את זה כך:
קוד HTML:
זוהי השורה הראשונה.<br />זוהי השורה השנייה.
כפי ששמתם לב, זה ירד שורה ולא עשה פסקאה.
ותשימו לב שוב, אין לזה תג סוגר!!! כל תג שאין לו תג סוגר נרשם בסוף עם סלש ( / ) ישנם עוד תגים בלי תג סוגר אך אפרט עליהם בהמשך
לתגיות הללו יש גם תגים מחליפים לדוגמה:
| שם התג |
התג המחליף |
| <b> |
<strong> |
| <i> |
<em> או <cite> או <address> |
| <code> |
<kbd> |
הפעולה שהם עושים הינה אותה פעולה, זה לא משנה מה תבחרו.
אם אני רוצה לעשות כמה עיצובים במקביל?
אם אתם רוצים לעשות טקסט נטוי, וטקסט מודגש ביחד. או טקסט נטוי ומונוספייס ביחד. או כל פעולה שתרצו זה פשוט מאוד.
אתם רק "מקוננים" את התגים.
דוגמה א':
קוד HTML:
<i><u>TEXT</u></i>
דוגמה ב':
קוד HTML:
<b><i>TEXT</i></b>
דוגמה ג':
קוד HTML:
<code><b>TEXT</b></code>
הבנתם את העיקרון לא?
שימו לב
אחד מהתקנים שאתם צריכים לדעת כבר עכשיו!
שאתם מקוננים תגים ביחד, כלומר שמים תג אחד בתוך השני אתם צריכים לשים את התגים בצורת j,hfv, כלומר:
אם פתחתם את התג <i> ראשון אז תסגרו אותו אחרון. דוגמה א':
טוב:
<i><u>TEXT</u></i>
לא טוב:
<i><u>TEXT</i></u>
דוגמא ב':
טוב:
<b><u>TEXT</u></b>
לא טוב:
<b><u>TEXT</b></u>
הבנתם את העיקרון כן?
סימנים מיוחדים
אם למשל תרצו לרשום: <i>? זה לא יציג לכם את זה, כי זה יחשוב שאתם רוצים להראות תג.
בשביל זה יש תגים מיוחדים.
להלן רשימה:
| הסימן |
מספר הסימן |
שם הסימן |
| > |
& #060; |
& lt; |
| < |
& #062; |
& gt; |
| רווח קשיח |
& #160; |
& nbsp; |
| © |
& #169; |
& copy; |
| ® |
& #174; |
& reg; |
וכשרשמתי "מספר הסימן" ו"שם הסימן" זה לא משנה מה מהם תרשמו, התוצאה היא אותה תוצאה.
וכשרשמתי "רווח קשיח" הכוונה הייתה לכך שזה יעשה רווח.(זוכרים שאמרתי שאי אפשר לעשות יותר משני רווחים?
אפשר לרשום את הקוד הזה במקום רווח וזה יעשה!)
וזהו!
ש.ב
תרשמו לי את הטקסט הזה בקוד HTML ותשלחו לי בפרטי:
כל הזכויות שמורות לאטרף ©
(במקום הסימן © תרשמו את הקוד ה"מיוחד" של זה)
[שיעור מס' 2] HTML
ספוילר:
ציטוט ההודעה
