הקדמה- מה עושים התגים <b>, <u>, <i> ו-<code> ושיש להם תגים מחליפים עם אותה פעולה.
- איך עושים שורות.
- איך עושים פסקאות.
- איך לעשות סגירת תגים נכונה.
- סימנים מיוחדים.
מתחילים
עברית
אם קרה לכם שניסיתם לכתוב משהו בתגית ה-body ויצא לכם בעברית תפעלו ע"פ ההוראות הבאות:- בתגית ה-<head> רשמו
קוד HTML:
<meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-8" />
זה ישים קידוד טוב למה שאנו לומדים. - במקום תגית ה-<body> תרשמו:
קוד HTML:
<body dir="rtl">
זה אומר לשים את כתיבת הטקסט מימין לשמאל.
עכשיו יהיה לנו דף בשפה שלנו.
כותרות
אנחנו כותבים הרבה דברים ואנחנו רוצים לחלק אותם לחלקים, איזה דרך טובה יותר להפריד ביניהם עם כותרות?
בשביל זה יש את התגים <h1>, <h2>, <h3>, <h4>, <h5> ו-<h6>. (יש תג סוגר)
התגים מחולקים מהגדול לקטן, כלומר <h1> הוא הכי גדול ו-<h6> הוא הכי קטן.
אתם מזומנים לנסות ע"פ הדוגמה:
קוד HTML:
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
קל לא?
התג <pre>
בשיעור הקודם הסברתי שאי אפשר לרדת שורה בלי התג <br /> או שאי אפשר לעשות כמה רווחים בלי & nbsp; נכון?
בשביל זה יש את התג <pre> (יש תג סוגר) שאומר לעשות עיצוב איך שאנחנו רושמים. דוגמה:
קוד HTML:
<pre>
Text Text
Text Text
</pre>
ואתם יכולים כבר לנחש מה זה יציג.
קווים אופקיים
אם שמתם (או לא שמתם) לב יש לנו תמיד את הקו הזה:
^ קו פשוט שעושה הפרדה בין דברים.
דוגמה:
קוד HTML:
First row
<hr />
Second row
כפי ששמתם לב ל-hr כמו ל-br אין תג סוגר, אז רושמים " / ".
HTML ו-CSS
פעם, בתקופת HTML 4 לא היינו צריכים לדעת CSS(Cascading Style Sheets)g בכדי לעצב קטעי טקסט.
אלה מה? כיום, התקנים השתדרגו וצריך לעצב טקסט עם CSS.
אנו משתמשים ב-CSS בכדי:- לשים צבעים בטקסט
- לשנות פונט(סוג כתב)
- לשנות גודל של טקסט
- ועוד הרבה דברים
בשביל להוסיף קטע CSS לקוד HTML, צריך להוסיף את המאפיין Style לתג שבוא נו רוצים לעצב.
בשביל זה הכי מומלץ לכתוב קוד CSS, על התג <span> (יש תג סוגר) שהוא בעצם תג ריק. נועד בכדי עיצוב CSS.
נשתמש בזה כך:
קוד HTML:
<span style="CSS Code">There is a text</span>
כפי שראיתם, הוספתי אחרי הקטע "<span" (עדיין לא סגרתי את תחילת התג) קטע, שזה נקרא "מאפיין".
כל "מאפיין" צריך סימן שווה ואז ערך, כלומר:
קוד HTML:
<tag parameter="value">Text..</tag>
תבנית פשוטה ^
אז אם נרצה לדוגמה לעשות צבע כחול נצטרך לרשום כך:
קוד HTML:
There is a <span style="color: Blue;">Blue</span> text!
ויצא כחול למה שהגדרנו!
שימו לב שרשמנו בתוך הפרמטר "color: Blue;".
שאומר מה לעשות ואז את הערך, כלומר:
קוד HTML:
<tag style="parameter: value;">Text</tag>
אז זה יעשה בכחול.
באותה מידה אפשר גם לעשות קוד RGB במקום לרשום "Blue" או כל צבע אחר. (עדיף קוד RGB, על שם).
איך משנים גודל כתב ב-CSS?
בשביל זה נכתוב כך:
קוד HTML:
<span style="font-size: 18pt;">Text</span>
וזה יציג את הכתב כך:
Text
רשמנו "font-size: 18pt;"
אז:
אומר שמתחילה פקודה לשינוי גודל טקסט
גודל הטקסט
סוג הגודל(נקודות)
סיום פעולת CSS
להלן טבלה עם סוגי גדלים:
| שם הגודל |
ערך |
| pt |
Points - נקודות |
| px |
Pixels - פיקסלים |
אם נרצה להגדיר שני דברים במקביל?
זאת לא אמורה להיות בעיה, אם נרצה למשל לרשום טקסט כחול בגודל של 16 נקודות נרשום כך:
<span style="color: #0000FF; font-size: 16pt;">Text</span>
די ברור לא?
להלן טבלה של אפשרויות (כמו font-size), הערכים שלהם (pt וכ'ו) ולמה זה משמש (גודל טקסט):
| אפשרות |
ערך |
שימוש |
| font-size |
מספר |
גודל כתב |
| color |
קוד RGB או שם צבע |
שינוי צבע הטקסט |
| font-weight |
bold |
נכתוב את הערך לכתב מודגש |
| font-family |
Font |
נכתוב את שם הפונט במדויק בכדי לשנות סוג כתב |
| text-decoration |
underline |
נכתוב underline בערך בשביל לעשות כמו <u> |
| text-align |
center |
נכתוב center בערך בשביל למרכז את הטקסט |
הבאתי רק את החיוניים.
רשימות
יש לכם דברים ארוכים באתר ואתם רוצים לעשות אותו יותר מסודר?
בשביל זה יש רשימות!
לדוגמה כל רשימה מתחילה בתג <ol> ובתוכו הפרמטרים.
דוגמה:
קוד HTML:
<ol>
<li>One</li>
<li>Two</li>
</ol>
יצא:- One
- Two
אפשר גם להגדיר את זה שזה יהיה עם אותיות במקום מספרים עם נוסיף את הפרמטר type כך:
<ol type="a">
<li>One</li>
<li>Two</li>
</ol>
רשמנו a ויצא לנו אותיות קטנות.
טבלת ריכוז לפרמטרים:
| Type (סוג) |
מתכונת המספר |
דוגמה |
| 1 |
מספר סטנדרטי, ברירת מחדל. |
1, 2, 3 |
| a |
אותיות קטנות. |
a, b, c |
| A |
אותיות גדולות. |
A, B, C |
| i |
מספר לטיני באותיות קטנות. |
i, ii, iii |
| I |
מספר לטיני באותיות גדולות. |
I, II, III |
מאפיין נחמד שאפשר להוסיף זה start שאומר ממה להתחיל לדוגמה, נכתוב שזה יתחיל מ-24:
קוד HTML:
<ol type="A" start="24">
<li>One</li>
<li>Two</li>
</ol>
זה עובד בכל סוג(Type) בחרתי ב-A רק לדוגמה, זה לא משנה מה תרשמו.
רשימות עם תבליטים
למדנו איך לעשות ממוספר עם אותיות וכ'ו. אבל אם אני רוצה לעשות עם תבליטים, כמו זה:בשביל זה במקום <ol> נרשום <ul>, נשתמש בזה כך:
קוד HTML:
<ul>
<li>One</li>
<li>Two</li>
</ul>
ויצא איך שרצינו.
שינוי סוג התבליט
התבליטים נחמדים, אך אתה רוצה משהו אחר? גם לזה יש מאפיין type וגם בזה משתמשים אותו דבר!
קוד HTML:
<ul type="type">
<li>One</li>
<li>Two</li>
</ul>
להלן טבלה של כל הדברים שאפשר לכתוב ב-type:
| Type (סוג) |
מתכונת הצורה |
| disc |
בצורת תקליטור, ברירת מחדל. |
| circle |
עיגול ריק. |
| square |
ריבוע. |
ש.ב
1) עשו את שיעורי הבית מהשיעור הקודם.
2) תרשמו את הטקסט משיעור קודם בעזרת CSS.
לשיעור הקודם - שיעור מס' 2 לחצו כאן.
שאלות על HTML ו-CSS בפורום שפות צד לקוח.
[שיעור מס' 3] HTML ו-CSS
ציטוט ההודעה
נכתב במקור על ידי ExcluSive
