פורום אטרף - בית ספר לתכנות, שיעור 2-HTML.

בשיעור הקודם למדנו מספר דברים:

מהו 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>

לאחר שעשיתם זאת, תסתכלו בספויילר. אמור לצאת לכם אותו דבר:

ספוילר:

אמור לצאת אותו דבר, לא אמור להיות משהו שגוי. אבל אם כן כנראה שבשמירה של הקובץ היה משהו פגום.
לדוגמה יצא קובץ בשם X.html.txt (בד"כ בסביבת חלונות). אם כן תעשו עוד פעם את מה שהסברתי בשיעור הראשון.

ירידת שורה ופסקאות.
כפי שכבר ראיתם, אי אפשר לרדת שורה בעורך טקסט וזה ירד גם שורה בדפדפן, או לעשות כמה רווחים נכון?
בשביל זה.
לדוגמה אם נרשום את הקוד הבא בתגית ה-<body>:

קוד HTML:

זוהי השורה הראשונה.
זוהי השורה השנייה (לא נכון).
<p>
זוהי השורה השלישית.
</p>
זוהי השורה הרביעית

עשה פסקה רק איך שרשמנו את התג ונגמרה הפסקאה איך שסגרנו את התג .

אבל אם אני לא רוצה לעשות פסקאה? רק לרדת שורה?
בשביל זה יש את התג (שימו לב, אין לו תג סוגר ובסוף התג יש מקף "/").
נרשום את זה כך:

קוד 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, כלומר:
אם פתחתם את התג ראשון אז תסגרו אותו אחרון. דוגמה א':
טוב:
TEXT
לא טוב:
TEXT

דוגמא ב':
טוב:
TEXT
לא טוב:
TEXT

הבנתם את העיקרון כן?

סימנים מיוחדים
אם למשל תרצו לרשום: ? זה לא יציג לכם את זה, כי זה יחשוב שאתם רוצים להראות תג.
בשביל זה יש תגים מיוחדים.

להלן רשימה:

הסימן	מספר הסימן	שם הסימן
>	& #060;	& lt;
<	& #062;	& gt;
רווח קשיח	& #160;	& nbsp;
©	& #169;	& copy;
®	& #174;	& reg;

שימו לב, רשמתי את הסימן "&" ואז רווח, כי בלי הרווח זה יציג את התו.
וכשרשמתי "מספר הסימן" ו"שם הסימן" זה לא משנה מה מהם תרשמו, התוצאה היא אותה תוצאה.
וכשרשמתי "רווח קשיח" הכוונה הייתה לכך שזה יעשה רווח.(זוכרים שאמרתי שאי אפשר לעשות יותר משני רווחים?
אפשר לרשום את הקוד הזה במקום רווח וזה יעשה!)

וזהו!

ש.ב

תרשמו לי את הטקסט הזה בקוד HTML ותשלחו לי בפרטי:
כל הזכויות שמורות לאטרף ©
(במקום הסימן © תרשמו את הקוד ה"מיוחד" של זה)

לשיעור הקודם - שיעור מס' 1 לחצו כאן.
שאלות על HTML בפורום שפות צד לקוח.

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

שיעור מס\' 2 - HTML

הודעת מערכת

עוד באטרף

תג פותח	תג סוגר	תוצאה
<b>	</b>	טקסט מודגש
<i>	</i>	טקסט נטוי
<u>	</u>	טקסט עם קו תחתון
<code>	</code>	יציג טקסט בצורת מונוספייס