למה HTML? HTML (HyperText Markup Language) היא שפת הסימון הסטנדרטית ליצירת דפי אינטרנט. היא מגדירה את המבנה והתוכן של עמודי הווב באמצעות תגיות. בלעדיה, לא היה לנו דרך להציג טקסט, תמונות, קישורים או טפסים בדפדפן.
הצהרה זו תמיד ממוקמת בראש מסמך ה-HTML ומיידעת את הדפדפן באיזה תקן HTML להשתמש (HTML5 במקרה זה).
<!DOCTYPE html>
עוטף את כל תוכן ה-HTML בדף. מאפיין `lang` מגדיר את שפת התוכן.
<html lang="he"> <!-- תוכן הדף כאן --> </html>
מכיל מידע על הדף שאינו מוצג ישירות למשתמש, כמו קידוד תווים, כותרת הדף, וקישורים לקבצי CSS ו-JavaScript חיצוניים.
<head> <meta charset="UTF-8"> <title>שם הדף</title> </head>
מכיל את כל התוכן הגלוי של דף האינטרנט, כמו טקסט, תמונות, קישורים וטפסים.
<body> <p>זהו תוכן שמוצג למשתמש.</p> </body>
מגדיר כותרות שונות בגודלן, כאשר <h1> היא החשובה ביותר ו-<h6> היא הפחותה. משמשות לארגון תוכן היררכי.
<h1>כותרת ראשית לדף</h1> <h3>כותרת משנה בסקשן</h3>
ליצירת פסקאות טקסט רגיל. כל תוכן טקסט שאינו כותרת או רשימה בדרך כלל ייכנס לפסקה.
<p>זוהי פסקה קצרה המכילה מידע כלשהו על הנושא הנלמד.</p>
ליצירת קישורים (היפר-קישורים) המפנים לדפים אחרים או לאתרים חיצוניים. המאפיין `href` מגדיר את כתובת היעד.
<a href="https://www.wikipedia.org/" target="_blank">ויקיפדיה</a>
להצגת תמונות. מאפיין `src` מציין את נתיב התמונה, ו-`alt` מספק טקסט חלופי חשוב לנגישות.
<img src="https://placehold.co/300x200/4CAF50/ffffff?text=תמונה+ירוקה" alt="תמונה ירוקה מלבנית">
ליצירת רשימות. <ul> (לא ממוספרת) ו-<ol> (ממוספרת) מכילות פריטים <li>.
<ul> <li>פריט ראשון</li> <li>פריט שני</li> </ul>
תגית נפוצה המשמשת כמיכל (container) לאלמנטים אחרים. אין לה משמעות סמנטית כשלעצמה, ומשמשת בעיקר לעיצוב באמצעות CSS.
<div style="background-color: #444; padding: 10px; border-radius: 5px;"> <p>תוכן בתוך DIV.</p> </div>
אלמנט קובי (inline) המשמש לסימון קטע טקסט קטן בתוך פסקה או כותרת לצורך עיצוב או סקריפטינג, ללא שבירת שורה.
<p>זהו טקסט עם <span style="color: yellow; font-weight: bold;">קטע מודגש</span> בתוכו.</p>
ליצירת שדה קלט בטופס. המאפיין `type` מגדיר את סוג הקלט (text, password, email, number, checkbox ועוד).
<label for="username">שם משתמש:</label> <input type="text" id="username" name="username" placeholder="הקלד כאן" style="background-color: #555; border: 1px solid #777; color: white; padding: 8px; border-radius: 4px;">
ליצירת כפתור שניתן ללחוץ עליו כדי להפעיל פעולה ב-JavaScript או לשלוח טופס.
<button type="button" onclick="showMsg('נלחץ!')" style="background-color: #04AA6D; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer;">לחץ עלי</button>
ליצירת טופס אינטראקטיבי לקבלת קלט ממשתמשים.
<form action="/submit-form" method="post"> <label for="email_form" style="color: #ddd;">אימייל:</label> <input type="email" id="email_form" style="background-color: #555; border: 1px solid #777; color: white;"> <button type="submit" style="background-color: #04AA6D; color: white;">שלח</button> </form>
ליצירת טבלאות נתונים. <table> מכיל <tr> (שורת טבלה), אשר מכילה <th> (כותרת עמודה) או <td> (תא נתונים).
<table border="1" style="width:100%; border-collapse: collapse; background-color: #444; color: #f8f8f8;">
<tr>
<th style="padding: 8px; border: 1px solid #666;">שם</th>
<th style="padding: 8px; border: 1px solid #666;">עיר</th>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #666;">יוסי</td>
<td style="padding: 8px; border: 1px solid #666;">תל אביב</td>
</tr>
</table>
ליצירת שבירת שורה בודדת (מעבר לשורה חדשה) בתוך טקסט.
<p>שורה ראשונה.<br>שורה שנייה.</p>
ליצירת קו אופקי המציין הפסקה תמטית בתוכן.
<p>חלק ראשון.</p> <hr style="border-top: 1px dashed #666; margin: 20px 0;"> <p>חלק שני.</p>
תגיות סמנטיות ב-HTML5 שמציינות את אזור הכותרת העליונה ואת אזור הכותרת התחתונה של הדף או סקשן.
<header> <h1>לוגו האתר</h1> </header> <footer> <p>זכויות יוצרים ©</p> </footer>
להטמעת קבצי וידאו ישירות בדף האינטרנט.
<video width="320" height="240" controls style="border-radius: 8px;"> <source src="movie.mp4" type="video/mp4"> הדפדפן שלך אינו תומך בוידאו. </video>
לקישור קובץ CSS חיצוני לדף ה-HTML לצורך עיצוב.
<link rel="stylesheet" href="styles.css">
להטמעת קוד JavaScript ישירות בדף או לקישור לקובץ JavaScript חיצוני.
<script src="script.js"></script>
לספק מטא-מידע על מסמך ה-HTML, כמו קידוד תווים, תיאור הדף, ומילות מפתח.
<meta name="description" content="מדריך שפות תכנות">
מקשרת טקסט לשדה קלט בטופס, משפרת נגישות.
<label for="input_field" style="color: #ddd;">שדה קלט:</label> <input type="text" id="input_field">
ליצירת רשימה נפתחת שבה המשתמש יכול לבחור אפשרויות.
<select id="items" style="background-color: #555; border: 1px solid #777; color: white; padding: 5px; border-radius: 4px;"> <option value="item1">פריט 1</option> <option value="item2">פריט 2</option> </select>
ליצירת שדה קלט גדול יותר המאפשר הזנת טקסט במספר שורות.
<textarea id="message" rows="3" cols="20" style="background-color: #555; border: 1px solid #777; color: white; padding: 8px; border-radius: 4px;"></textarea>
לכתיבת הערות בתוך קוד ה-HTML. הערות אינן מוצגות בדפדפן.
<!-- זוהי הערה ב-HTML -->
למה CSS? CSS היא שפת עיצוב המשמשת לשליטה על המראה והפריסה של מסמכי HTML. היא מאפשרת להפריד בין התוכן (HTML) לעיצוב, מה שהופך את האתרים לקלים יותר לתחזוקה ולרספונסיביות.
קובע את צבע הטקסט של אלמנט.
p {
color: #ADD8E6; /* כחול בהיר */
}
קובע את צבע הרקע של אלמנט.
div {
background-color: #555;
}
מגדיר את משפחת הגופנים.
body {
font-family: 'Verdana', sans-serif;
}
קובע את גודל הטקסט.
h1 {
font-size: 2em;
}
קובע את עובי הגופן (normal, bold, או ערך מספרי).
strong {
font-weight: bold;
}
מיישר טקסט בתוך אלמנט (left, right, center, justify).
h2 {
text-align: center;
}
מגדיר רווח מסביב לאלמנט.
img {
margin: 10px;
}
מגדיר רווח בתוך האלמנט.
button {
padding: 8px 12px;
}
מגדיר גבול סביב אלמנט.
div {
border: 1px solid #777;
}
מעגל את פינות האלמנט.
img {
border-radius: 5px;
}
מוסיף צל לאלמנט.
div {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
קובעים את מימדי האלמנט.
img {
width: 100px;
height: auto;
}
קובע כיצד אלמנט יוצג (לדוגמה, block, inline, flex).
.container {
display: flex;
}
קובע את שיטת המיקום (static, relative, absolute, fixed).
.fixed-element {
position: fixed;
top: 10px;
left: 10px;
}
קובע את רמת השקיפות (בין 0 ל-1).
img:hover {
opacity: 0.6;
}
מאפשר ליצור אנימציה חלקה בין מצבים שונים של מאפיין CSS.
button {
background-color: blue;
transition: background-color 0.3s ease;
}
button:hover {
background-color: darkblue;
}
מאפשר לבצע טרנספורמציות (הזזה, סיבוב, שינוי קנה מידה).
div:hover {
transform: scale(1.05); /* הגדלה קלה */
}
מאפשר ליישם סגנונות שונים בהתאם למאפייני המכשיר (לדוגמה, רוחב מסך).
@media (max-width: 600px) {
body {
background-color: #444; /* רקע שונה במסכים קטנים */
}
}
מאפשר לעצב אלמנטים כאשר העכבר מרחף מעליהם.
a:hover {
text-decoration: underline;
}
קובע את הכיוון של פריטים בתוך מיכל flex (row, column).
.container {
display: flex;
flex-direction: column;
}
מיישר את הפריטים לאורך הציר הראשי ב-flexbox.
.container {
display: flex;
justify-content: center; /* מרכוז */
}
מיישר את הפריטים לאורך הציר המשני ב-flexbox.
.container {
display: flex;
align-items: center; /* מרכוז */
}
מגדיר את סמן העכבר שיופיע מעל אלמנט (pointer, default, text).
a {
cursor: pointer;
}
קובע קישוטים לטקסט (none, underline, overline, line-through).
a {
text-decoration: none;
}
קובע את סוג התבליטים עבור פריטי רשימה (none, disc, circle, square).
ul {
list-style-type: none; /* הסרת תבליטים */
}
קובע מה יקרה כאשר התוכן של אלמנט חורג מהמימדים שלו (visible, hidden, scroll, auto).
.scroll-box {
width: 150px;
height: 80px;
overflow: auto;
}
למה JavaScript? JavaScript היא שפת התכנות שהופכת את אתרי האינטרנט לאינטראקטיביים ודינמיים. היא רצה בדפדפן, ומאפשרת לשלוט על אלמנטים ב-HTML, לשנות עיצוב, לטפל באירועים ולבצע חישובים.
מדפיסה הודעות, משתנים או תוצאות לקונסול של המפתחים (כלי דיבוג).
<script>
console.log("שלום עולם!");
let myVar = 123;
console.log("הערך הוא:", myVar);
</script>
מילות מפתח להצהרה על משתנים. `let` ו-`const` עדיפים בדרך כלל על `var`.
<script> let name = "אליס"; const PI = 3.14; console.log(name, PI); </script>
JavaScript תומכת בסוגי נתונים: String, Number, Boolean, Array, Object, null, undefined.
<script> let text = "Text"; // String let num = 42; // Number let isReady = true; // Boolean let list = [1, 2]; // Array </script>
לביצוע פעולות חשבוניות (+, -, *, /), השוואות (==, ===, >, <), ולוגיות (&&, ||).
<script> let x = 10, y = 5; console.log(x + y); // 15 console.log(x > y); // true </script>
בלוקים של קוד שניתן להפעיל שוב ושוב. מאפשרות ארגון ושימוש חוזר בקוד.
<script>
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
</script>
מאפשרים לבצע בלוקי קוד שונים בהתאם לתנאים.
<script>
let age = 15;
if (age >= 18) {
console.log("מבוגר");
} else {
console.log("קטין");
}
</script>
חוזרת על בלוק קוד מספר קבוע של פעמים.
<script>
for (let i = 0; i < 3; i++) {
console.log(i);
}
</script>
חוזרת על בלוק קוד כל עוד תנאי מסוים נכון.
<script>
let counter = 0;
while (counter < 2) {
console.log(counter);
counter++;
}
</script>
אוספים של פריטים מסודרים, נגישים באמצעות אינדקסים.
<script> let colors = ["red", "green", "blue"]; console.log(colors[0]); // "red" </script>
`push()` מוסיף לסוף; `pop()` מסיר מהסוף.
<script> let nums = [1, 2]; nums.push(3); // [1, 2, 3] nums.pop(); // [1, 2] console.log(nums); </script>
אוספים של זוגות מפתח-ערך (properties), לייצוג ישויות.
<script>
let car = { make: "Ford", model: "Focus" };
console.log(car.make); // "Ford"
</script>
לגישה לאלמנט HTML ספציפי לפי ה-ID שלו.
<div id="myDiv">טקסט</div>
<script>
let div = document.getElementById("myDiv");
div.innerHTML = "טקסט חדש!";
</script>
מחזירה את האלמנט הראשון שמתאים לסלקטור CSS.
<p class="item">פריט.</p>
<script>
let p = document.querySelector(".item");
p.style.backgroundColor = "lightgray";
</script>
יוצר אלמנט HTML חדש בזיכרון.
<div id="parentDiv"></div>
<script>
let newEl = document.createElement("p");
newEl.textContent = "נוצר עכשיו.";
document.getElementById("parentDiv").appendChild(newEl);
</script>
מוסיפה אלמנט קיים כילד לאלמנט אחר.
<div id="cont"></div>
<script>
let parent = document.getElementById("cont");
let child = document.createElement("span");
parent.appendChild(child);
</script>
מסירה אלמנט מה-DOM.
<button id="remBtn">הסר</button>
<script>
document.getElementById("remBtn").addEventListener("click", function() {
this.remove();
});
</script>
מצרפת פונקציה שתופעל כאשר אירוע מתרחש (לדוגמה, click).
<button id="clickMe">לחץ</button>
<script>
document.getElementById("clickMe").addEventListener("click", function() {
showMsg("נלחץ!");
});
</script>
`setTimeout()` מבצע פונקציה פעם אחת. `setInterval()` מבצע באופן חוזר.
<script>
setTimeout(function() {
console.log("לאחר 1 שניה.");
}, 1000);
</script>
מאפשר לטפל בשגיאות שעלולות להתרחש בקוד.
<script>
try {
let result = unknownVar;
} catch (error) {
console.error("שגיאה:", error.message);
}
</script>
לביצוע בקשות רשת (HTTP) לטעינת נתונים.
<script>
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data));
</script>
תחביר מקוצר להגדרת פונקציות.
<script> const multiply = (a, b) => a * b; console.log(multiply(4, 2)); // 8 </script>
ליצירת מחרוזות בקלות, כולל הטמעת משתנים (` `` ` ו-`${}`).
<script>
const item = "כוס";
const msg = `יש לי ${item}.`;
console.log(msg);
</script>
למה Python? פייתון היא שפה רב-תכליתית ופופולרית מאוד בזכות הסינטקס הפשוט והקריא שלה. היא משמשת במגוון רחב של תחומים: פיתוח ווב, ניתוח נתונים, בינה מלאכותית, אוטומציה ועוד.
הפונקציה הבסיסית ביותר להדפסת טקסט או ערכים למסך.
print("שלום, פייתון!")
מאפשרת לקבל קלט טקסט מהמשתמש דרך הקונסול.
name = input("שם: ")
print(f"שלום, {name}!")
לשמירת נתונים בזיכרון. אין צורך להצהיר על סוג.
num = 10 text = "ABC" is_active = True
int, float, str, bool, list, tuple, dict, set.
x = 5 # int s = "word" # str lst = [1, 2] # list
חשבוניים (+, -, *, /), השוואות (==, !=, >, <), ולוגיים (and, or, not).
a = 8; b = 4 print(a + b) # 12 print(a > b) # True
לביצוע בלוקי קוד שונים בהתאם לתנאים.
score = 80
if score >= 90:
print("מצוין")
elif score >= 70:
print("טוב")
לחזרה על בלוק קוד מספר פעמים או על איברים באוסף.
for i in range(3):
print(i)
מבצעת בלוק קוד כל עוד תנאי מסוים מתקיים.
i = 0
while i < 2:
print(i)
i += 1
להגדרת בלוק קוד שניתן להפעיל שוב ושוב.
def greet(n):
print(f"שלום, {n}!")
greet("בן")
להחזרת ערך מפונקציה וסיום ביצועה.
def multiply(a, b):
return a * b
res = multiply(2, 6)
print(res) # 12
מבנה נתונים מסודר וניתן לשינוי.
my_list = [10, 20, "hi"] print(my_list[0]) # 10
מבנה נתונים מסודר ובלתי ניתן לשינוי.
my_tuple = (1, "a", 3) print(my_tuple[1]) # "a"
מבנה נתונים בלתי מסודר של זוגות מפתח-ערך.
my_dict = {"name": "Max", "age": 30}
print(my_dict["name"]) # "Max"
מבנה נתונים של פריטים ייחודיים (ללא כפילויות).
my_set = {1, 2, 2, 3} # יכיל רק {1, 2, 3}
print(my_set)
לטיפול בטקסט (upper(), lower(), strip(), split()).
text = " Python " print(text.strip()) # "Python"
מחזירה את אורך של אובייקט (מחרוזת, רשימה וכו').
my_list = [1, 2, 3] print(len(my_list)) # 3
ליצירת סדרה של מספרים, נפוצה בלולאות `for`.
for i in range(2, 5): # 2, 3, 4
print(i)
לכלול פונקציונליות מקבצים אחרים או ספריות מובנות.
import math print(math.pi) # 3.14159...
לטפל בשגיאות שעלולות להתרחש בקוד.
try:
result = 1 / 0
except ZeroDivisionError:
print("אסור לחלק באפס!")
לפתיחה, קריאה וכתיבה לקבצים.
# כתיבה
with open("test.txt", "w") as f:
f.write("שלום קובץ!")
# קריאה
with open("test.txt", "r") as f:
content = f.read()
print(content)
ליצירת תבנית לאובייקטים (Object-Oriented Programming).
class Dog:
def __init__(self, name):
self.name = name
def bark(self):
print(f"{self.name} נובח!")
my_dog = Dog("בוב")
my_dog.bark()
דרך קצרה ליצירת רשימות חדשות.
squares = [x**2 for x in range(3)] print(squares) # [0, 1, 4]
משלבת מספר איטרטורים לטאפלים.
l1 = [1, 2]; l2 = ['a', 'b']
for n, char in zip(l1, l2):
print(n, char)
מפעילה פונקציה על כל פריט באיטרטור.
nums = [1, 2, 3] doubled = list(map(lambda x: x*2, nums)) print(doubled) # [2, 4, 6]
בונה איטרטור מפריטים שעבורם פונקציית תנאי נכונה.
nums = [1, 2, 3, 4] evens = list(filter(lambda x: x % 2 == 0, nums)) print(evens) # [2, 4]