שלום לכולם
בפרק הקודם דיברנו על קובץ הcss ואפשרויות העיצוב שבו. למדנו על צבע טקסט וצבע רקע, גודל פונט ועיצוב פונט וקינחנו בהוספת מסגרת לטקסט.
היום נלמד עוד על איך להוסיף תמונה לקובץ הhtml ואיך לעצב אותה ואת המסגרת שלה דרך קובץ הcss.
ראשית נבחר את תמונה מסוימת, בשביל הדוגמא ניקח את התמונה הזאת:
[image: 1770559160911-abfec74f-3086-4791-9b30-c507e3a73d63-image.jpg]
נשים אותה באותה תיקיה של קובץ הHTML והCSS ולצורך הדוגמא נקרא לה image. חשוב לזכור את הסיומת שלה גם לדוגמא jpg
נפתח את קובץ ה-HTML עם עורך הטקסט ונוסיף את התמונה
דבר ראשון ניצור בתחילת הbody תגית IMG שתאחסן בתוכה את התמונה.
<img>
בתוך התגית נוסיף את הקישור של התמונה.
אחרי IMG נכתוב =SRC ואחריו את שם הקובץ עם הסיומת בתוך גרשיים לדוגמא
<img src="image.jpg">
ככה זה נראה בקובץ שלנו:
קובץ HTML
<!DOCTYPE html>
<html dir="rtl">
<head>
</head>
<body>
<img src="image.jpg">
<h1>הפרויקט שלי</h1>
<p>שלום לכולם</p>
<a href="https://mitmachim.top/">קישור לפורום</a>
<br> <br>
<input type="text" placeholder="input">
<button>שלח טופס</button>
</body>
</html>
(שימו לב שהתגית IMG היא בלי תגית סוגרת כמו כן לשים לב לשם התמונה המדויק)
עכשיו נשמור את הקובץ ונפתח אותו בדפדפן.
אם הכל יעבוד כשורה נראה את התמונה בדף
אבל רגע... התמונה גדולה מידי! לכן אנחנו נלמד לעצב אותה..
נפתח את קובץ הCSS בעורך הטקסט.
כדי להגדיר גובה ורוחב למדנו כבר זה ההגדרה width ו height והערך הוא הגודל בפיקסלים px.
כדי ליצור מסגרת נשתמש בהגדרה border ובערך solid.
כדי להגדיר רווח בין התמונה עצמה למסגרת שלה נשתמש בהגדרה padding ובערך של הגודל בפיקסלים לדוגמא 10px.
כדי לעגל את הפינות נשתמש בהגדרה border-radius ובערך בפיקסלים לדוגמא 100px.
כדי להגדיר ריווח בין התמונה והמסגרת לבין תמונות אלמנטים אחרים בדף נשתמש בהגדרה margin ובערך בפיקסלים לדוגמא 10px.
ישום:
קובץ CSS
img {
Height: 200px;
Width: 200px;
Border: solid;
Border-radius: 0px 100px 0px 100px;
Padding: 10px;
margin: 10px;
}
אם עשיתם הכל כשורה כך תיראה לכם התמונה
[image: 1770560060127-f7cf7aca-c688-4eda-91ac-f4664a0c94e7-image.png]
שימו לב! בהגדרת ה-border-radius, padding, margin ישנה אפשרות להגדיר רק פינה אחת או צבע אחד.
יש לכתוב תחילה את ההגדרה ואז בערך לכתוב ארבע ערכים עם ריווח ביניהם.
כגון בדוגמא למעלה בהגדרת BORDER-RADIUS הערך הראשון תקף לפינה השמאלית למעלה, השני לימנית למעלה, השלישי לימנית למטה, והרביעית לשמאלית למטה.
כמו כן בpadding וmargin הערך הראשון מתיחס לצד העליון, השני לצד ימין, השלישי לצד התחתון, והרביעי לצד שמאל. אמנם בזה כתבנו רק ערך אחד והוא תקף לכל הפינות ורק שנכתוב את ארבע הערכים באותו ערך אז הוא יחול על הערכים הנבחרים דווקא.
נוסיף את מה שלמדנו לקובץ css שלנו ונשמור אותו.
נפתח את קובץ הHTML בדפדפן. אם הכל יעבוד כשורה הדף צריך להיראות כך:
[image: 1770560631340-a518358e-a660-457f-b8cb-fbb061beab11-image.png]
בשיעור הבא אנחנו נסכם את כל מה שלמדנו עד עכשיו ונתחיל לבנות את הפרויקט הראשון שלנו: דף נחיתה!
עד אז תכתבו לי (בתגובות)[https://mitmachim.top/topic/93025/עזרה-תגובות-ל-מדריך-המדריך-למתכנת-המתחיל-javascript]...
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}