@איש-פשוט-מאוד אני יותר חיפשתי משהו פשוט ומובן בגרסה ניידת
אבל כל אחד ומה שהוא אוהב
מ
מייבין במקצת
@מייבין במקצת
-
מדריך | לימוד html מא' עד ת' - חלק ראשון - הקדמה והסבר על תגיות -
מדריך | לימוד html מא' עד ת' - חלק ראשון - הקדמה והסבר על תגיותבמדריך הזה אני יסביר מה זה שפת html ואיך מתחילים לכתוב איתה
לפני שנתחיל כדאי שתורידו את תוכנת notepad++.exe
זה גרסה ניידת
אפשר גם להשתמש בתוכנת פנקס רשימות שיש כמעט בכל מחשב
אבל התוכנה הזאת יותר נוחה ומציגה את הקוד באופן יותר ברורהקדמה
שפת HTML היא שפה שמיועדת לבניית אתרים
ביחד עם השפות CSS וJavaScript
שבהמשך נסביר מה התפקיד של כל אחת מהםאז אנחנו לא נתחיל עם אתר ממש עם דומיין וכו'
אלא עם קובץ על המחשבלמי שרוצה להפוך את הקובץ הזה לאתר עם קישור
יש את המדריך שלי פהאת הקובץ נשמור בסיומת html
קבצים בסיומת html נפתחים על ידי הדפדפןלבניית אתר צריך להשתמש בשפות css ,html, וJavaScript,
התפקיד של שפת html הוא לדוגמא לקבוע שיהיה כאן טקסט
התפקיד של שפת css הוא לדוגמא לצבוע את הטקסט להוסיף לו זוהר ואפקטיםאו בקיצור: לעצב
התפקיד של שפת JavaScript הוא לדוגמא לחשב את הגימטרייה של הטקסט
אני יתמקד במדריכים בשפות html וcss בלבד
איך כותבים קוד בhtml - הסבר על תגיות
תגיות הם בעצם הוראות לדפדפן איך להציג את התוכן שבדף
לדוגמא התגית h1 היא תגית של כותרת ראשית
והיא בעצם אומרת לדפדפן להציג כאן כותרת ראשיתדוגמא לכותרת ראשית:
<h1>כותרת ראשית</h1>לרוב התגיות יש מבנה קבוע שנראה ככה:
<סוף תגית/> תוכן <תחילת תגית>יש לנו שתי סוגי תגיות:
1: תגית שבנויה מזוג תגיות - המבנה של רוב התגיות בנוי מזוג של תגיות
תגית פותחת ותגית סוגרת
שביחד הם מרכיבות את התג
התגית הפותחת מורכבת משם התג ממוקם בין סוגריים משולשים לדוגמא:<h1>אחרי התגית הפותחת יופיע התוכן שנמצא בתגית
ואחריו התגית נסגרת עם תגית נוספת שזהה לתגית הפותחת בתוספת לוכסן לדוגמא:</h1>2: תגית שבנויה מתגית בודדת - חלק קטן מהתגיות בhtml לא מורכבות מזוג תגיות אלא מתגית בודדת
התגיות האלו הם תגיות שלא מכילות תוכן אלא התגית בעצמה היא התוכן
התגיות האלה בנויות משם התגית שנמצא בין סוגריים משולשות
בחלק מהתגיות האלה לפני הסוגר המשולש שסוגר את התגית יופיע לוכסן לדוגמא:<br/>תגית שמשמשת לירידת שורה באמצע טקסט
ובחלק מהתגיות האלה התגית תופיע כתגית בודדת לדוגמא:
<img>שמשמשת לקישור לתמונה להצגה
מבנה בסיסי של דף html
המבנה הבסיסי של דף html הוא:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </title>כותרת הדף<title> </head> <body> <h1>זה כותרת ראשית</h1> <p>זה פסקה כאן נכתוב את הטקסט שלנו</p> </body> </html>הסבר:
השורה הראשונה התגית DOCTYPE חייבת לפתוח כל דף html
התפקיד שלה הוא להודיע לדפדפן באיזו גרסת html כתוב הדף שהוא הולך לקרוא
<DOCTYPE html!> זה צורת ההגדרה לhtml5 חשוב לשמור על אותיות גדולות וקטנות כמו בדוגמאהשורה השנייה התגית <html> מורה לדפדפן לפתוח מסמך מסוג html
התגית הזאת היא התגית הראשית במסמך
ובין התגית הפותחת שלו לתגית הסוגרת שלו ימוקמו כל תגי הhtml האחריםהשורה השלישית התגית <head> התגית הזאת משמשת אותנו בכדי להגדיר את אזור ראש הדף
head = ראש
בתוך תגית הhead יהיו רק תגים שמתארים את הדף וקובעים את התצורה שלו
חוץ מהתגית <title> שאר התגיות שימוקמו בתוכה הם לא תגיות של אלמנטים בדף
אלא לרוב הם תגיות שמכילות מידע שאינו מוצג במסך אבל משמשות להגדרת הדף על ידי מנועי החיפושהתגית <title> משמשת להגדרת כותרת הדף כותרת הדף תוצג בראש הדפדפן בלשונית הכרטיסייה
התגית הזאת תהיה באופן קבוע בתוך תגית הheadתגיות <meta> הם תגיות מיוחדות הם לא מציגות דבר בדף
אלא משמשים להעברת מידע על הדף לדפדפן של הגולש למנועי חיפוש וכיוצא בזהנרחיב עליהם במדריך אחר
המאפיין charset מגדיר את אופן קידוד התווים בדף
קידוד התווים שקבענו בתגית הmeta בדוגמא הוא קידוד תווים עבור דף html
UTF-8 הוא בעצם קידוד שמגדיר את הדף שלנו לעבוד עם טקסטים לועזיים וטקסטים בעברית ביחד
אם לא נגדיר את זה הדפדפן יכול להציג לפעמים את האתר שלנו בג'יבריש במקום מה שרצינוהתגית <body> הוא גוף הדף
body = גוף
בתוכו ימוקמו כל התגים האחרים המוצגים בדף שזה בעצם אומר כל התוכן שיש בדף
התגיות <h1> ו<p> הם תגיות שמציגות תוכן נרחיב עליהם במדריך אחר....
עקרון ההזחה
כדי שיהיה לנו יותר נוח להתנהל עם הקוד נסדר את התגיות בצורה כזאת:
התגיות הראשיות מוצמדות לצד השמאלי של המסך
ותגיות המוכלות בתוך תגיות אחרות – נדחפות קצת פנימהלדוגמא:
שימו
️ בכתיבת קוד html כל תו ותו חשוב ביותר החסרה או הוספה של תו אחד
עלולה לשבש את האופן שבו הדפדפן קורא את הדף והוא לא יציג את הדף באופן הנדרשבכתיבת קוד html צריך לכתוב את שמות התגיות והמאפיינים באותיות קטנות
למעט תגית הDOCTYPE
איך משתמשים בתוכנת הnotepad
דבר ראשון מגדירים בתפריט בלשונית Language את השפה שאנחנו כותבים בה
במקרה שלנו HTML
בוחרים באות H ואז בשפת HTML
דוגמא:
כותבים את הקוד ושומרים בלחיצה על Ctrl + s
בהצלחה!
-
המלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות@יום-הדין כתב בהמלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות:
האם התוספים האלו פתוחים בנטפרי?
כן
-
המלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות@לאצי כתב בהמלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות:
אפשר פירוט?
זה בעצם שתי תוספים משולבי AI
שאתה יכול להעתיק להם את הטקסט ששלחו לך במייל לבחור אורך תשובה וסגנון תשובה
ולקבל מהם תשובה שתוכל להעתיק למייל
@לאצי כתב בהמלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות:
אתה בנית אותם?
לא
@לאצי כתב בהמלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות:
מה הם נותנים?
כמו ש @Doctor-AI אמר הם נותנים לך גישה למודל שפה שיענה לך תשובה למייל שקיבלת
רק בפחות לחיצותול @Doctor-AI רוב התוספים בימינו באים לחסוך לך לחיצות
אבל אתה בהחלט צודק
חוץ מזה שבמודל שפה אני יכול להתאים את המייל אישית הרבה יותר מאשר בתוסף -
המלצה | שתי תוספי AI לכתיבת מיילים להורדה ולהתקנה מהחנות -
בירור | נטפרי חסמו לGPT את אפשרות החיפוש באינטרנט?@ארפכשד יש את זה בעוד צ'אטים? איזה?
-
בירור | נטפרי חסמו לGPT את אפשרות החיפוש באינטרנט?@יוסף-אלחנן ומה הכוונה שהוראות הסינון לא מופעלות?
זה משהו טכני? או שהכוונה שהיא אפשר לשמור עליהם? -
בירור | נטפרי חסמו לGPT את אפשרות החיפוש באינטרנט?@ארפכשד גם אצלי
@יוסף-אלחנן מה זה אומר "מצב Search"
-
שיתוף | צ'אט ג'מיני חמוד@פלמנמוני עכשיו אני רואה שיש אפשרות ליצוא צ'אט גם בתפריט
-
שיתוף | צ'אט ג'מיני חמודבעצם לגבי הסמל והשאלות המוכנות לא בטוח שזה בכלל בעיה
-
שיתוף | צ'אט ג'מיני חמוד -
המלצה | ✨חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם✨@לאצי למדתי משהו...
-
המלצה | ✨חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם✨@פרוזי כתב בהמלצה | 🧠 שדרגו את הדפדפן שלכם עם AI Suite Pro – חבילת ה-AI האולטימטיבית לגלישה! 🧠:
ש לנו בעיה טכנית
-
בעיה | gemini לא עונה לשאלות "מומלץ לבדוק את החיבור לאינטרנט ולנסות שוב"@א.מ.ד. כתב בבעיה | gemini לא עונה לשאלות "מומלץ לבדוק את החיבור לאינטרנט ולנסות שוב":
לפעמים עוזר פשוט ריענון העמוד
ניסיתי הרגע
זה לא עזר -
בעיה | gemini לא עונה לשאלות "מומלץ לבדוק את החיבור לאינטרנט ולנסות שוב"@בנימינה כתב בבעיה | gemini לא עונה לשאלות "מומלץ לבדוק את החיבור לאינטרנט ולנסות שוב":
אבל אצלי זה ככה ממוצאי שבת
גם אצלי
חוץ מזה אני גם לא רואה את היסטוריית השיחות שלי
תמונה:
-
להורדה | תוסף חדש לכרום "מה זה AI"@שאול-208 כתב בלהורדה | תוסף חדש לכרום "מה זה AI":
@מוטי-מהיר חזק ביותר הוא בוט טלגרם שמספק הורדות מהירות של סרטונים וקבצי אודיו ממגוון רחב של פלטפורמות. הוא ידוע ביכולות ההורדה המהירות שלו ובפשטות השימוש.
חזק ביותראבל אולי יש ל @מוטי-מהיר בוט בטלגרם על שמו?
במחשבה שנייה עם היכולות שהוא הפגין כאן לא בטוח שזה כל כך רחוק מהמציאות
-
להורדה | תוסף חדש לכרום "מה זה AI"@שאול-208 כתב בלהורדה | תוסף חדש לכרום "מה זה AI":
תרצה שאהרוס לך ואגלה עכשיו?
סליחה שאני עונה במקומו
אבל אני נמצא בתוך עיסה ענקית של מתח פחד וסקרנות
והתמונה לא נפתחת בנטפרי
אז יש מצב שאתה מעלה את התמונה לדרייב? -
להורדה | תוסף חדש לכרום "מה זה AI"@ע-ה-דכו-ע אבל בשתי הפעמים הוא אמר שזה בן אדם
ו @שאול-208 כתב בלהורדה | תוסף חדש לכרום "מה זה AI":
אתה אנושי?
אני חשבתי שהוא סימן את מוטי מהיר והAI ענה לו משהו שהוא בדיוק הפוך מהמושג "אנושי"
במיוחד אחרי ש @שאול-208 כתב בלהורדה | תוסף חדש לכרום "מה זה AI":
לכשתראה, תבין...
אז לכאורה טעיתי
-
להורדה | תוסף חדש לכרום "מה זה AI"@ע-ה-דכו-ע אז טעיתי לכאורה
-
להורדה | תוסף חדש לכרום "מה זה AI"@שאול-208 כתב בלהורדה | תוסף חדש לכרום "מה זה AI":
קושיא חדא מתרצת חברתה...
תן לי לנחש
אני בלי התוסף כרגע
סימנת את המילים "מוטי מהיר"?
 { 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}