@שיהיה
אם יהיה לי כח אולי אני יעלה מדריך מפורט יום אחד בכל אופן כרגע מה
שאני יכול לעזור לך ,
ישנם מספר אלמנטים ברירת מחדל שכדאי שתכתוב בדף שלך.
<!DOCTYPE html>
אתה כותב בדוגמא שלי זו גירסה 5 HTML זה אלמנט שאומר לדפדפן באיזו גירסת
שים לב שזהו אלמנט ללא סגירה כלומר שלא כותבים אחריו שוב את סוג האלמנט עם סלש
לא כותבים <!DOCTYPE html/>
<html>
זהו אלמנט שעוטף את כל האלמנטים בדף שלך שים לב שהוא מסתיים רק בסוף הדף
<head>
מלשון ראש , head אלמנט זה נקרא
הוא עוטף (כלומר שבין הפתיחה לסגירה שלו כותבים)
כל מיני אלמנטים שקשורים להגדרות של הדף
כותבים זאת כאן javascript או כשמייבאים קובץ CSS למשל כשמייבאים עיצוב מקובץ
הנה למשל כמה אלמנטים שנכתבים ב-head
<"meta charset="UTF-8>
זהו קידוד התומך בעברית UTF-8 , זהו אלמנט שמודיע לדפדפן על סוג הקידוד של הדף
<title>
באלמנט זה כותבים את מה שרוצים שיופיע בכרטיסיה בדפדפן כך:
<title/>כאן כותבים מה שיופיע בראש הכרטיסיה בדפדפן <title>
באלמנט הבא בוחרים איזו תמונה תופיע בראש הכרטיסיה
במקום השלוש נקודות לשנות למיקום התמונה שלכם כמו באלמנט מסוג תמונה <img> וכד'
<link rel="shortcut icon" href="..."/>
ולא לשכוח לסגור את haed
<head/>
<body>
מלשון גוף כי כאן מתחיל גוף הדף שלך body
אלמנט זה עוטף את שאר האלמנטים שתרצה שיופיעו בדף שלך
כאן יופיע התוכן שלך
לא לשכוח לסגור את אלמנט body
</body>
ואת אלמנט html
</html>
לסיכום :
<html>
<head>
<meta charset="UTF-8">
<title>כאן כותבים מה שיופיע בראש הכרטיסיה בדפדפן </title>
<link rel="shortcut icon" href="..." />
</head>
<body>
כאן מגיע תוכן הדף שלך
</body>
</html>
הערות נוספות שיוכלו לעזור לך:
- לכתוב הערה בין שורות הקוד כלומר שהדפדפן לא יריץ את השורה הזו כותבים כך <-- --!>
<!-- כאן ניתן לכתוב הערות -->
-
קיצור דרך ליישר את הקוד וליצור הזחות ( שורות נכנסות ) = shift + Alt + F
קיצורים נוספים ניתן למצוא כאן
-
open-in-browser תוסף שמאפשר להריץ את הקוד בדפדפן ישר מ-Visual Studio Code
באמצעות הקשה על ALT+ B או מתפריט ימני .
ניתן להתקין ישר מvs- code בחלון- Extensions הקלד open-in-browser ולחץ על התקן.
שים לב שעליך לשמור את השינוים (ctrl+s) בכדי שיריץ גם אותם .
-
מומלץ לשנות את ההגדרות כדי שבלחיצה על (ctrl+s) ישמרו השינוים בכל הדפים הפתוחים בתוכנה
ולא דוקא בדף בו לחצת ,
וזאת מכיון שבד''כ עובדים על מספר קבצים בשביל פרוייקט אחד , קובץ אחד מכיל את העיצוב השני את ה-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}