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

הקדמה

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

מה עושים התגים <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;"
אז:

font-size:

אומר שמתחילה פקודה לשינוי גודל טקסט

גודל הטקסט

סוג הגודל(נקודות)

;

סיום פעולת 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 בערך בשביל למרכז את הטקסט

ברור שזה מצומצם יחסית למה ש-CSS מציעה לנו.
הבאתי רק את החיוניים.

רשימות
יש לכם דברים ארוכים באתר ואתם רוצים לעשות אותו יותר מסודר?
בשביל זה יש רשימות!
לדוגמה כל רשימה מתחילה בתג <ol> ובתוכו הפרמטרים.
דוגמה:

קוד HTML:

<ol>
<li>One</li>
<li>Two</li>
</ol>

יצא:

אפשר גם להגדיר את זה שזה יהיה עם אותיות במקום מספרים עם נוסיף את הפרמטר 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

הודעת מערכת

עוד באטרף