HTML & CSS Handout · ⁨חומרי עזר: HTML ו-CSS⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨הורד הפניה⁩ 2-up · ⁨2-על גיליון⁩

1 HTML basics · ⁨בסיסי HTML⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
1.1
הדף הראשון שלך

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

עברית
HTML מתאר דף אינטרנט באמצעות תגיות. תגית היא מילה בתוך סימני סוגריים, כמו <p>. רוב התגיות באותן זוגות — תג פתיחה <p> ותג סיום </p> חוברים ביניהם תוכן כלשהו. שילוב של תג ושל התוכן שלה מהווה אלמנט.

<p>Hello, world!</p> <p>This is my first web page.</p>

הדפדפן מציג את כל מה שנמצא בין התגיות.

תגית שאיפת לסגור או שכתבת בשגיאה עשויה לא להופיע נכון.

אלמנט אחד = תג פתיחה + תוכן + תג סיום
1.2
כותרות ופרגרפים

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

עברית
כותרות נעות מ <h1> (הגדול ביותר) מטה ל <h6> (הקטן ביותר). פסקה היא <p>. השתמש בדיוק ב-<h1> לכותרת הראשית של הדף.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
עיצוב טקסט

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

עברית
הדגש טקסט עם <strong> וטייטוק עם <em>. שורת חדשה היא <br> — אין לה תג סיום.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

שגיאות נפוצות

רוב התגים מגיעים בזוגות — <p>...</p>. שכחת תג הסיום שוברת את העיצוב מתחתיו.

התגית נכתבת בתוך סימני סוגריים; הטקסט שנראה על המסך מופיע בין תג הפתיחה לתג הסיום.

הכותרות נעות ממידת <h1> (הגדולה ביותר) ועד למידת <h6> — אין לבחור כותרת רק בגלל גודלה.
2 Lists, links & images · ⁨רשימות, קישורים ותמונות⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
2.1
Lists

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

עברית
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul for bullets, ol for numbers; each item is li
2.2
Links

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

עברית
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

Add target="_blank" to open the link in a new tab.
2.3
Images

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

עברית
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.
3 Page structure · ⁨מבנה הדף⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
3.1
עמוד שלם

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

עברית
דף אמיתי יש לו שלד קבוע. <!DOCTYPE html> אומר שהוא HTML5. הכל יושב בתוך <html>. ה-<head> מכיל מידע על הדף; ה-<body> מכיל את מה שאתה רואה.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

עמוד הוא עץ: הראש מתאר את העמוד, הגוף מכיל את מה שרואים

ה-<title> מופיע בלשונית הדפדפן.

<meta charset="utf-8"> מאפשר לדף להציג כל שפה.
3.2
הערות והתפתלות

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

עברית
תגית  היא הערה שהדפדפן מתעלם ממנה. תגיות נרדפות זו בתוך זו; הוואה כל רמה כדי שהמבנה יישאר ברור. סגור את התגיות בסדר הפוך לפתיחתן.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

שגיאות נפוצות

התגים חייבים להיות משולבים ולא לחלוף זה על גבי זה: ⟨<b><i>text</i></b>⟩, לעולם לא ⟨<b><i>text</b></i>⟩.

דף זקוק ל-<html>, ל-<head> (כדי להגדיר כותרת וקישורים) ול-<body> (כדי להציג מה שראוי לראות).

הערה היא ⟨⟩; הדפדפן מתעלם ממנה.
4 Tables & forms · ⁨טבלאות וטפסים⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
4.1
Tables

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

עברית
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr rows → th/td cells
4.2
Forms

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

עברית
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.
5 Boxes & sections · ⁨תיבות וחלקים⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
5.1
div, span & חלקים סמנטיים

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

עברית
קופסת <div> היא קופסת בלוק גנרית המכנסת תוכן בשורות נפרדות. קופסת <span> היא קופסת אינליין גנרית בתוך שורת טקסט. משתמשים בהם כדי לקבץ דברים כדי שניתן יהיה לעצב או למקם אותם.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

תגיות סמנטיות מתארות את התפקיד שלהן, מה שעוזר לקוראי מסך ומנועי חיפוש. עדיף להשתמש בהן על פני <div> רגילות כאשר זה מתאים: <header>, <nav>, <main>, <section>, <article>, <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

שגיאות נפוצות

<div> הוא בלוק (מתחיל שורה חדשה); <span> הוא אינליין (נשאר בטקסט).

השתמש בתגיות סמנטיות כמו <header>, <nav> ו-<footer> כאשר זה מתאים, ולא ב-<div> לכל דבר.

אל תשתמש בתג רק בגלל המראה הרגיל שלה — עצב אותה עם CSS במקום זאת.

div הוא תיבת בלוק; span עוטף טקסט אינליין

6 CSS basics · ⁨בסיסי CSS⁩

reference.pdf.he 2-up · ⁨2-על גיליון⁩

6.1

הוספת CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

עברית

CSS מעצב HTML. הדרך הפשוטה ביותר היא בלוק <style> בתוך ה-<head> (אתר גדול יותר משתמש בקובץ .css נפרד עם <link>). כלל CSS מורכב ממבחר (selector), ואז זוגות { property: value; } הנקראים הצהרות (declarations).

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Link a stylesheet so CSS rules style HTML elements

6.2

מבחרים: class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

עברית

Class מעצב מספר אלמנטים: הוסף class="..." ב-HML וכתוב .name ב-CSS. ID מעצב אלמנט אחד בלבד: id="..." ו-#name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

המבחרים שתפגוש הכי הרבה, במקום אחד:

מבחר	בוחר
`p`	כל אלמנט `<p>`
`.note`	הכל עם `class="note"`
`#title`	האלמנט היחיד עם `id="title"`
`h1, h2`	מספר מבחרים בו-זמנית
`nav a`	כל `<a>` בתוך `<nav>`
`.btn:hover`	מצב אחד של אלמנט (ראו נושא 10)

שגיאות נפוצות

סלקטור קלאס מתחיל ב-. וסלקטור id מתחיל ב-#.
קשר את סטיילשית ב-<head>, או הוסף כללים בתוך בלוק <style>.
קלאס יכול להיות מושב לשימוש חוזר על מספר אלמנטים; id צריך להופיע פעם אחת בדף.

7 Colours & text · ⁨צבעים וטקסט⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
7.1
צבעים רקע

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

עברית
גדור את צבע הטקסט עם color ואת הרקע עם background-color. צבע יכול להיות שם (red), קוד הקסאדצימלי (#ff0000), או rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

CSS צבעים: שמות, הקסאדצימלי, ו rgb()
7.2
עיצוב טקסט

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

עברית
מאפייני טקסט נפוצים: font-size, font-weight (למשל bold), font-family, text-align (left / center / right), ו line-height למרווחים.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

שגיאות נפוצות

color מגדיר את צבע הטקסט; background-color מגדיר את הרקע.

צבע יכול להיות שם, קוד הקסאדצימלי #rrggbb, או rgb(...).

סיים כל הצהרה בתוך הסוגריים המעוגלים עם נקודה-פסיק ; — היא מפרידה בין זוגות property: value (הנקודה-פסיק לאחר ההצהרה האחרונה היא אופציונלית). הכלל עצמו מסתיים בסוגריים סגורים }.
8 The box model · ⁨מודל הקופסה⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
8.1
דגם תיבה

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

עברית
כל אלמנט הוא תיבה בעלת ארבע שכבות, מבפנים החוצה: התוכן, הפדינג (מרווח בתוך הגבול), הגבול, והמרג'ין (מרווח מחוץ לגבול).

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

דגם תיבה: תוכן, פדינג, גבול, ומרג'ין
8.2
מרג'ין ופדינג

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

עברית
padding מוסיף מרווח בתוך הגבול, דוחף את התוכן פנימה. margin מוסיף מרווח חוץ, דוחף תיבות אחרות הרחק. ניתן לתת ערך אחד לכל הצדדים, או ארבעה (על ימין תחתון שמאל).

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
תצוגה

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

עברית
המאפיין display קובע כיצד הקופסה זורמת. block תופס שורה שלמה; inline ממוקם בתוך שורת טקסט; none מסיר את הקופסה לחלוטין; flex סדר את הילדים בשורה (נושא הבא).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

שגיאות נפוצות

הפיז' (Padding) נמצא בתוך הגבול; המרג'ין (Margin) הוא השטח מחוץ לו.

box-sizing: border-box גורם להגדרת רוחב כוללת פאדינג וגבול — לרוב מה שתרצה.

display: none מחביא אלמנט לחלוטין; visibility: hidden משאיר את המקום שלו.
9 Layout · ⁨סידור⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
9.1
רוחב ויישור אמצע

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

עברית
הגדר את הwidth של קופסה. כדי ליישר בלוק באמצע, תן לו רוחב והוסף margin: 0 auto — auto חלק את השאריות במרחק שווה משני הצדדים.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
פלקסבוקס

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

עברית
פלקסבוקס מסדר את הילדים בשורה (או בעמודה). הגדר את display: flex על ההורה — המיכל. gap מוסיף רווח בין הילדים; flex: 1 גורם להם לחלק את הרוחב.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

מיכל פלקסבוקס מסדר את הפריטים לאורך ציר הראשי; gap מוסיף רווח ביניהם
9.3
מיזם קטן: כרטיס פרופיל

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

עברית
שלב קופסאות, צבעים, טקסט ומרווחים למרכיב קטן אחד.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

שגיאות נפוצות

מרכז בלוק עם רוחב קבוע באמצעות margin: 0 auto.

פלקסבוקס דורש display: flex על המיכל, לא על הפריטים.

רוחב ב% הוא יחסי להורה, ולכן בדוק גם את הרוחב של ההורה.
10 Going further · ⁨מעבר לרמה הבאה⁩
reference.pdf.he 2-up · ⁨2-על גיליון⁩
10.1
Hover וקטגוריות פסאודו

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

עברית
קטגוריית פסאודו מעצבת אלמנט במצב ספציפי אחד. :hover חל בזמן שעכבר נמצא מעל האלמנט. הוסף transition כך שהשינוי יתבצע בצורה חלקה במקום לקפוץ.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

קטגוריות פסאודו נוספות שימושיות: :focus (שדה קלט שבו משתמש לחץ) ו:first-child.

:hover מעצב אלמנט בזמן שמחווה נמצא מעליו
10.2
מיקום

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

עברית
התאמת מיקום מזיזה קופסה מהמיקום הרגיל שלה. relative גוררת את הקופסה (ועושה אותה נקודת עגינה לילדיה); absolute מניחה קופסה בדיוק, במדידה מההורה הממוקם הקרוב ביותר; fixed מקבעת אותה למסך גם כאשר הדף גולל.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left אומרים עד כמה להזיז — הם פועלים רק על קופסאות שממוקמות.
10.3
שאלות מדיה ועיצוב רספונסיבי

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

עברית
דף רספונסיבי מתאים לגודל המסך. שאלת מדיה חלה על כלליה רק כל עוד תנאי מסך נתון מתקיים, כמו max-width.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

עיצוב מובייל-פירסט: כתוב סטיילים לטלפון קודם, ואז הוסף כללי @media (min-width: ...) למסכים גדולים יותר.

רוחב באחוזים וmax-width מאפשרים לקופסאות להתכווץ יחד עם המסך.

שגיאות נפוצות

:hover נדבק לבחירה שלו ללא רווח: .btn:hover, לא .btn :hover.

position: absolute נמדד מההורה הממוקם הקרוב ביותר — תן להורה הזה position: relative.

שאלת מדיה כוללת כללים שלמים: @media (max-width: 600px) { .a { ... } }.