מדריך בניית אתר בסיסי | שפת HTML
-
@צמא-לדעת אמר במדריך בניית אתר בסיסי | שפת html:
אני חושב שכדאי שתביא גם את התוכנה notepad++ להורדה
צודק, אפשר להוריד את זה מהקישור הזה: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.9.2/npp.7.9.2.Installer.x64.exe
-
@צמא-לדעת אמר במדריך בניית אתר בסיסי | שפת html:
אני חושב שכדאי שתביא גם את התוכנה notepad++ להורדה
צודק, אפשר להוריד את זה מהקישור הזה: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.9.2/npp.7.9.2.Installer.x64.exe
@מוטי-אורן אמר במדריך בניית אתר בסיסי | שפת html:
@צמא-לדעת אמר במדריך בניית אתר בסיסי | שפת html:
אני חושב שכדאי שתביא גם את התוכנה notepad++ להורדה
צודק, אפשר להוריד את זה מהקישור הזה: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.9.2/npp.7.9.2.Installer.x64.exe
אפשר גם מפה שזה נותן את כל הגירסאות -
@מוטי-אורן אמר במדריך בניית אתר בסיסי | שפת html:
@צמא-לדעת אמר במדריך בניית אתר בסיסי | שפת html:
אני חושב שכדאי שתביא גם את התוכנה notepad++ להורדה
צודק, אפשר להוריד את זה מהקישור הזה: https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.9.2/npp.7.9.2.Installer.x64.exe
אפשר גם מפה שזה נותן את כל הגירסאות -
@מוטי-אורן אמר במדריך בניית אתר בסיסי | שפת html:
@צמא-לדעת נכון, אבל אני פשוט נתתי לך קישור ישיר להורדה מאותו אתר, של הגירסא המעודכנת.
יש כאלה שהם צריכים גירסא יותר ישנה
-
@מוטי-אורן אמר במדריך בניית אתר בסיסי | שפת html:
@צמא-לדעת נכון, אבל אני פשוט נתתי לך קישור ישיר להורדה מאותו אתר, של הגירסא המעודכנת.
יש כאלה שהם צריכים גירסא יותר ישנה
@צמא-לדעת אמר במדריך בניית אתר בסיסי | שפת html:
@מוטי-אורן אמר במדריך בניית אתר בסיסי | שפת html:
@צמא-לדעת נכון, אבל אני פשוט נתתי לך קישור ישיר להורדה מאותו אתר, של הגירסא המעודכנת.
יש כאלה שהם צריכים גירסא יותר ישנה
אוקיי קיבלתי, צודק
-
@מוטי-אורן לאיפה אני מעלה את הקודים?
-
מדריך בניית אתר בסיסי בשפת HTML
--
בבניית אתרים, משתמשים (בצד הclient) בעיקר בשלושת השפות דלהלן: html, css, javascript.
שפת html הינה שפת תגים ומשמשת לכתיבת הגוף והתוכן של האתר.
שפת css לעומת זאת משמשת לעיצוב האתר.
ואילו שפת javascript (שאגב, היא שפת תכנות לכל דבר ועניין), משמשת להוספת פונקציונליות ועוד לאתר.המבנה של תגי ה – html נראה כך:
כפי שאנחנו רואים, יש את התג הפותח והסוגר שהוא קובע את סוג התוכן שלו. לדוגמה: התג p, מייצג paragraph (פיסקת טקסט) והתג img, מייצג image (תמונה).יש את התוכן, לדוגמה במקרה שלנו: איזה טקסט להציג ואיזו תמונה (במקרה של תמונה זה לא לגמרי נכון, אבל נראה על כך בהמשך).
ויש את האלמנט, שכולל את כולם גם יחד.כמעט שכחתי, אבל אתם צריכים סביבת עבודה מסודרת לכתיבת המסמך. המלצה שלי, notepad++, תוכנה נחמדה לעריכת טקסט (אני יודע שיש תוכנות הרבה יותר טובות כמו VSCode, intellijIDEA, Atom וכו' וכו'. אבל בשביל ההתחלה אני חושב שזה המומלץ). אז פשוט תורידו את התוכנה ותתקינו אותה (התקנה מאוד פשוטה), ובתוכנה הזאת תכתבו את המסמך. שימו לב שכשאתם שומרים את המסמך, תשמרו אותו עם סיומת html, ולא עם סיומת txt. בשביל שתוכלו לפתוח אותו בדפדפן.
אז נכתוב את הבסיס של האתר ונעבור עליו להבהיר קצת את העניינים:
<!DOCTYPE html> <html> <head> <title>html document</title> </head> <body> <h1>html document</h1> <p>this is my first html document</p> </body> </html>יש את השורה הראשונה, שבטח שמתם לב לכך שהיא אינה מכילה תג סוגר. השורה הזאת מצהירה על תקן ה-HTML שאנו משתמשים בו, במקרה שלנו – HTML-5.
קיימים מספר תקנים אבל אנחנו נדבר על התקן הזה, משום שהוא התקן הכי מעודכן.
שורה מספר 2:
תג פותח של מסמך ה – HTML. אם תשימו לב תראו שהוא גם נסגר בסוף המסמך.
בתוך האלמנט<html>, קיימים שני תגיות קבועות.<head>שהוא מכיל את ההגדרות של הדף, ו –<body>שמכיל את גוף המסמך. כל התוכן של הדף ייכנס ל – body. כל ההגדרות של הדף כגון התגית שרואים פה<title>, נכנסים ל – head.
תגית ה –<title>מגדירה את הכותרת שתופיע בלשונית של הכרטיסייה בדפדפן.
תגית ה –<h1>שאנו רואים ב – body, תפקידה הוא להגדיר כותרת בתוך המסמך. מהי הכותרת? מה שמופיע בין התגית הפותחת והסוגרת. קרי – html document. בדרך אגב, קיימים 6 גדלים של כותרות כמו <h1>, <h2>, <h3> וכו' וכו' עד <h6>. כותרת h1 היא הכותרת הכי גדולה, וכותרת h6 היא הכי קטנה מביניהם.
לאחר מכן אנחנו רואים את התגית<p>שדיברנו עליה קודם, שתפקידה הוא להכיל פסקאות טקסט. הפסקה שתופיע תהיה כמובן זאת שכתובה בין התגית הפותחת לתגית הסוגרת. קרי – this is my first html document.טוב. עד כאן להיום, ושיהיה בהצלחה! (בהמשך נדבר על עוד תגיות חשובות ב-html).
@מוטי-אורן תודה וכל הכבוד מחכים למדריך של השלב הבא.....
בפורום הנפלא הזה הידע הוא מוצר בכלל לא קשה להשגה רק תאסוף אותו בעדינות
-
@מוטי-אורן תודה וכל הכבוד מחכים למדריך של השלב הבא.....
@יהושע-זופניק אמר במדריך בניית אתר בסיסי | שפת html:
@מוטי-אורן תודה וכל הכבוד מחכים למדריך של השלב הבא.....
תודה רבה
. דרך אגב, מדריך נוסף כבר הועלה בקטגוריה הזאת של HTML. -
א אלישי העביר נושא זה מ-HTML5 ב-
 { 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}