שלום לכולם
בפרק הקודם דיברנו על קובץ הcss ואפשרויות העיצוב שבו. למדנו על צבע טקסט וצבע רקע, גודל פונט ועיצוב פונט וקינחנו בהוספת מסגרת לטקסט.
היום נלמד עוד על איך להוסיף תמונה לקובץ הhtml ואיך לעצב אותה ואת המסגרת שלה דרך קובץ הcss.
ראשית נבחר את תמונה מסוימת, נשים אותה באותה תיקיה של קובץ הHTML והCSS ולצורך הדוגמא נקרא לה image. חשוב לזכור את הסיומת שלה גם לדוגמא jpg
נפתח את קובץ ה-HTML עם עורך הטקסט ונוסיף את התמונה.
ישום:
קובץ HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<img src="image.jpg">
<p>hello world</p>
</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;
}
שימו לב! בהגדרת ה-border-radius, padding, margin ישנה אפשרות להגדיר רק פינה אחת או צבע אחד.
יש לכתוב תחילה את ההגדרה ואז בערך לכתוב ארבע ערכים עם ריווח ביניהם.
כגון בדוגמא למעלה בהגדרת BORDER-RADIUS הערך הראשון תקף לפינה השמאלית למעלה, השני לימנית למעלה, השלישי לימנית למטה, והרביעית לשמאלית למטה.
כמו כן בpadding וmargin הערך הראשון מתיחס לצד העליון, השני לצד ימין, השלישי לצד התחתון, והרביעי לצד שמאל. אמנם בזה כתבנו רק ערך אחד והוא תקף לכל הפינות ורק שנכתוב את ארבע הערכים באותו ערך אז הוא יחול על הערכים הנבחרים דווקא.
נשמור את הקובץ ונפתח את קובץ הHTML באמצעות הדפדפן.
 { 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}