מדריך איך לבנות משחקים או כלים שימושיים בקובץ HTML

  • הוסף לסימניות
  • #1
העיקרון הוא פשוט אנחנו מבקשים מה-AI לכתוב לנו קוד בשפה שנקראת HTML. זו השפה של דפדפני האינטרנט, וכל מה שצריך כדי להריץ אותה זה דפדפן (כמו כרום) וקובץ טקסט פשוט.
אז את האמת כל דבר שתרצו כמעט אבל הנה כמה רעיונות
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"

1. איך לבקש את הקוד מה-AI (פרומפטינג נכון)​

כדי לקבל תוצאה טובה בClaude, Gemini או ChatGPT, כדאי לעקוב אחרי המבנה הזה:
  • הגדרת המטרה "תבנה לי אפליקציית תרגום אנגלית בקובץ HTML אחד".
  • הגדרת פיצ'רים אני רוצה שיהיה כפתור השמעה, מקום להזין מילים ושמירה אוטומטית וכו".
  • הנחיה טכנית מומלץ לכתוב רכז את כל הקוד (HTML, CSS, JS) בקובץ אחד בלבד". זה יחסוך התעסקות עם הדבקה של כמה קודים.
  • בקשה לעיצוב: לבקש את הסגנון שאתם רוצים

2. איך לעבוד עם הכלים השונים​

א. עבודה ב-Claude (קלוד)​

קלוד נחשב כיום לטוב ביותר בכתיבת קוד למשתמשים ביתיים בזכות פיצ'ר ה-Artifacts והורדה של קובץ HTML מוכן!
  1. כתבו לו הנחייה (לפעמים הוא ישאל אתכם כמה שאלות)
  2. בתשובה ייפתח חלון לבן בצד ימין שם תראו את ה"אפליקציה" רצה בשידור חי.
  3. יש לו פשוט כפתור הורדה
  4. כדי לקחת את הקוד: לחץ על כפתור "Code" בתחתית החלון ואז על "Copy".
אז רציתי ליצור משחק זיכרון פשוט ביקשתי ממנו עם פירוט מה אני רוצה והנה התוצאה
צילום מסך 2026-03-19 030540.png
למטה
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף

ב. עבודה ב-Gemini (ג'מיני) ובChatGPT​

  1. בקשו את הקוד. הוא יכתוב אותו בתוך בלוקים.
  2. מעל כל בלוק קוד יש כפתור קטן של העתקה.
  3. לפתוח קובץ חדש של פנקס רשימות (מסמך טקסט) במחשב ולהדביק שם את הקוד
  4. לסגור את הקובץ בסיומת HTML ולבחור ב"שמור כסוג" כל הקבצים (שימו לב בברירת מחדל הוא שומר על txt).
  5. למי שיש VS Code אז זה כמובן הכי פשוט וקל.
צילום מסך 2026-03-19 101037.png

3. איך להריץ ולערוך​

כדי להפעיל פשוט ללכת לקובץ ששמרתם וללחוץ עליו פעמיים. הוא ייפתח בדפדפן ויעבוד כמו אתר אינטרנט אמיתי.

איך עורכים?

רוצים לשנות משהו? או שרוצים להרחיב את מאגר המילים שלו או איזה מאגר שעשיתם?
הדרך הקשה.
  1. לחצו קליק ימני על הקובץ ששמרתם בחר ב-"פתח באמצעות" (Open with) -> "פנקס רשימות".
  2. שנו את מה שאתה רוצים (או להדביק קוד חדש (או מאגר נתונים/מילים) שקיבלתם מה-AI).
  3. לחצו Ctrl + S (שמירה) ורענן את הדף בדפדפן כדי לראות את השינוי.
הדרך הקלה.
  1. הורידו את VS Code או לייתר דיוק את Visual Studio Code (חפשו בגוגל).
  2. תפתחו את הקוד באמצעות VS Code הוא יופיע לכם צבעוני והמבנה יהיה ברור יותר.
  3. שנו כרצונכם (בדרך כלל השמירה אוטומטית).
הסבר למי שרוצה לשנות או לערוך
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
קוד:
<!DOCTYPE html>
<html>
  <head>
    <style> /* CSS - איך זה נראה? */ </style>
  </head>
 
  <body>
    <div id="game">
       <h1>המשחק שלי</h1>
       <button>לחץ כאן</button>
    </div>

    <script>
      /* JavaScript - מה זה עושה? */
      // כשלוחצים על הכפתור, תעשה משהו...
    </script>
  </body>
</html>

בתקווה שהיה מספיק ברור, אשמח לתגובות😉.
 

קבצים מצורפים

  • משחק זיכרון משופר.html
    KB 28.1 · צפיות: 29
  • הוסף לסימניות
  • #2
המדריך המקוצר ליצירת אפליקציות רשת עם בינה מלאכותית:
  • הבקשה: הנחו את ה-AI לכתוב את כל הקוד (HTML, CSS, JS) לתוך קובץ אחד בלבד.
  • באיזה AI לבחור? Claude מומלץ ביותר בזכות תצוגה מקדימה והורדה ישירה. ב-Gemini וב-ChatGPT תצטרכו להעתיק את הקוד ל"פנקס רשימות" ולשמור בסיומת .html.
  • הרצה: פשוט ללחוץ על הקובץ ששמרתם פעמיים כדי לפתוח אותו בדפדפן.
  • עריכה: דרך פנקס רשימות או VS Code.
    • <style> לעיצוב.
    • <body> לטקסט ולמיקומים.
    • <script> לפונקציות ונתונים (טיפ: בקשו מה-AI מאגרי נתונים בנפרד כדי לא להעמיס עליו).
סורי.
הייתי חייב.
קצר.

קלאוד הכי טוב בקידוד.
פרקטית -
אפשר בכל בוט AI לבקש קוד מלא ולהריץ מקומית.
בלי לערוך כלום.

רק להעתיק הכול לקובץ.
כנ"ל לשינוי או עדכון.

אגב.
בניתי לעצמי כמה אפליקציות נחוצות בנושא.
פלטפורמה לאחסון קבצים ברשת, להטמעה.
פלטפורמה לאחסון קוד והרצה אונליין, כולל לינק לשיתוף.
ועוד.



יש גם שלל מודלים ליצירה עצמאית.
בייס 44, לאבבל, ריפליט.

יש גם קורסור, תוכנה להתקנה.
עם כל האייג'נטים בשוק.
בחינם/בתשלום/מפתח - תלוי במודל.
 
  • הוסף לסימניות
  • #4
קלאוד הכי טוב בקידוד.
פרקטית -
אפשר בכל בוט AI לבקש קוד מלא ולהריץ מקומית.
בלי לערוך כלום.

רק להעתיק הכול לקובץ.
כנ"ל לשינוי או עדכון.



יש גם שלל מודלים ליצירה עצמאית.
בייס 44, לאבבל, ריפליט.

יש גם קורסור, תוכנה להתקנה.
עם כל האייג'נטים בשוק.
בחינם/בתשלום/מפתח - תלוי במודל.
לא אמרתי שחייבים לערוך אבל כשרוצים משהו מורכב (לדוגמה עם בסיס נתונים של הרבה שאלות) אז גמיני וגיפיטי מסתבכים בזה ולכן ההמלצה שלי לערוך את זה לבד אצרף בהמשך דוגמא למשהו שנתתי לקלוד לשפר ואת התוצאה הגרועה
לגבי היצירה עצמאית אני אישית ממש לא אהבתי אותם (קורסור לא עבד לי בנטפרי אז לא ניסיתי) בכל אופן אלה לא פלטפורמות ליצירת כלים אופליין או קלילים שמתאימים לכל אחד לעומת זאת HTML זה גם למי שלא מבין כלום
 
  • הוסף לסימניות
  • #5
העיקרון הוא פשוט אנחנו מבקשים מה-AI לכתוב לנו קוד בשפה שנקראת HTML. זו השפה של דפדפני האינטרנט, וכל מה שצריך כדי להריץ אותה זה דפדפן (כמו כרום) וקובץ טקסט פשוט.
אז את האמת כל דבר שתרצו כמעט אבל הנה כמה רעיונות
משחק 2048 עם משפטים מתחלפים וכו"
יומן משימות אישי
מלמד שפה אישי
מחליף מילים פשוט
עורך תמונה וכו" וכו"

1. איך לבקש את הקוד מה-AI (פרומפטינג נכון)​

כדי לקבל תוצאה טובה בClaude, Gemini או ChatGPT, כדאי לעקוב אחרי המבנה הזה:
  • הגדרת המטרה "תבנה לי אפליקציית תרגום אנגלית בקובץ HTML אחד".
  • הגדרת פיצ'רים אני רוצה שיהיה כפתור השמעה, מקום להזין מילים ושמירה אוטומטית וכו".
  • הנחיה טכנית מומלץ לכתוב רכז את כל הקוד (HTML, CSS, JS) בקובץ אחד בלבד". זה יחסוך התעסקות עם הדבקה של כמה קודים.
  • בקשה לעיצוב: לבקש את הסגנון שאתם רוצים

2. איך לעבוד עם הכלים השונים​

א. עבודה ב-Claude (קלוד)​

קלוד נחשב כיום לטוב ביותר בכתיבת קוד למשתמשים ביתיים בזכות פיצ'ר ה-Artifacts והורדה של קובץ HTML מוכן!
  1. כתבו לו הנחייה (לפעמים הוא ישאל אתכם כמה שאלות)
  2. בתשובה ייפתח חלון לבן בצד ימין שם תראו את ה"אפליקציה" רצה בשידור חי.
  3. יש לו פשוט כפתור הורדה
  4. כדי לקחת את הקוד: לחץ על כפתור "Code" בתחתית החלון ואז על "Copy".
אז רציתי ליצור משחק זיכרון פשוט ביקשתי ממנו עם פירוט מה אני רוצה והנה התוצאה צפה בקובץ המצורף 2207865למטה
אחר כך ביקשתי ממנו להוסיף זיכרון ואפשרות לשמור את התוצאות שיא והקובץ מצורף

ב. עבודה ב-Gemini (ג'מיני) ובChatGPT​

  1. בקשו את הקוד. הוא יכתוב אותו בתוך בלוקים.
  2. מעל כל בלוק קוד יש כפתור קטן של העתקה.
  3. לפתוח קובץ חדש של פנקס רשימות (מסמך טקסט) במחשב ולהדביק שם את הקוד
  4. לסגור את הקובץ בסיומת HTML ולבחור ב"שמור כסוג" כל הקבצים (שימו לב בברירת מחדל הוא שומר על txt).
  5. למי שיש VS Code אז זה כמובן הכי פשוט וקל.

3. איך להריץ ולערוך​

כדי להפעיל פשוט ללכת לקובץ ששמרתם וללחוץ עליו פעמיים. הוא ייפתח בדפדפן ויעבוד כמו אתר אינטרנט אמיתי.

איך עורכים?

רוצים לשנות משהו? או שרוצים להרחיב את מאגר המילים שלו או איזה מאגר שעשיתם?
הדרך הקשה.
  1. לחצו קליק ימני על הקובץ ששמרתם בחר ב-"פתח באמצעות" (Open with) -> "פנקס רשימות".
  2. שנו את מה שאתה רוצים (או להדביק קוד חדש (או מאגר נתונים/מילים) שקיבלתם מה-AI).
  3. לחצו Ctrl + S (שמירה) ורענן את הדף בדפדפן כדי לראות את השינוי.
הדרך הקלה.
  1. הורידו את VS Code או לייתר דיוק את Visual Studio Code (חפשו בגוגל).
  2. תפתחו את הקוד באמצעות VS Code הוא יופיע לכם צבעוני והמבנה יהיה ברור יותר.
  3. שנו כרצונכם (בדרך כלל השמירה אוטומטית).
הסבר למי שרוצה לשנות או לערוך
בקובץ HTML יש מבנה קבוע לפי הסדר הזה בראש הקובץ תגית <html> שעוטפת את הכל תגית <style> שבה נמצאים הגדרות העיצוב תגית <body> שבה נמצא מה שאנחנו רואים (הסדר של הכל) ו<script> שאחראי לפונקציות (קוד JavaScript) אז אם אתם רוצים לשנות את העיצוב תצטרכו בדרך כלל לשנות במה שנמצא בתגית ה<style> (סטייל) אם זה שינוי במיקום או בטקסט אז בתגית ה<body> וכן הלאה
הוספת שאלות או מאגר נתונים נמצא בתגית <script> בדרך כלל בזה הAI מתקשה לייצר כמות טובה או חומר איכותי כשהוא גם יוצר קוד אז כדאי לבקש בסיס ולהרחיב על ידי בקשה נוספת של מאגר.
קוד:
<!DOCTYPE html>
<html>
  <head>
    <style> /* CSS - איך זה נראה? */ </style>
  </head>
 
  <body>
    <div id="game">
       <h1>המשחק שלי</h1>
       <button>לחץ כאן</button>
    </div>

    <script>
      /* JavaScript - מה זה עושה? */
      // כשלוחצים על הכפתור, תעשה משהו...
    </script>
  </body>
</html>

בתקווה שהיה מספיק ברור, אשמח לתגובות😉.
אוקי.
הנה המשוב שלי.
א' שייך כיום גם בgpt אפשרות להריץ בhtml באתר עצמו.
פשוט בתוך הבלוק יש סמל של הרצה.
ב' לא כתבת כלום בנוגע לפרומפט.
אני מתכוון, מה הוספת בזה?
כאילו. כלום לא כתוב.
אין פה שום עיצה פרומפטית.
פשוט במקום כל המדריך הארוך יכולת לבקש מהבינה שתכתוב כך - תכתוב לי תגובה קצרה של איך ליצור קובץ html של משחקים ואפליקציות שימושיות.
הוא יכתוב לך תוך דקה.
האמת? - התאכזבתי.
 

פרוגבוט

תוכן שיווקי
פרסומת

פוסטים חדשים שאולי לא קראת....

סיכום אירועים: איראן בלהבות - מהמחאות ועד לסף עימות עולמי

הרקע וההתפרצות (סוף דצמבר 2025):

המחאות החלו ב-28 בדצמבר 2025 בטהראן, על רקע משבר כלכלי חריף וצניחה חדה בערך הריאל. מה שהחל כזעקת סוחרים ואזרחים על יוקר המחיה, הפך במהירות לגל הפגנות חסר תקדים ב-187 ערים הקורא להפלת המשטר.


הטבח והחשכת המידע (ינואר 2026):
  • דיכוי אלים: המשטר האיראני הגיב באכזריות יוצאת דופן. לפי נתוני ארגון זכויות האדם HRANA, נכון ל-23 בינואר, מספר ההרוגים המאומת עומד על למעלה מ-5,000 בני אדם, בהם 4,716 מפגינים ועשרות ילדים.
    יש דיווחים לא מאומתים מצד האופוזיציה האיראנית על מעל 60,000 הרוגים!

  • מעצרים המוניים: למעלה מ-26,500 בני אדם נעצרו, וקיים חשש כבד להוצאות להורג המוניות בבתי הכלא.

  • חסימת אינטרנט: החל מה-8 בינואר הוטל מצור דיגיטלי כמעט מוחלט על המדינה כדי למנוע זליגת תיעודים מהטבח.

המעורבות האמריקנית - "הארמדה של טראמפ":
הנשיא טראמפ, שחזר והזהיר את טהראן מפני המשך הטבח, הכריז ב-22 בינואר כי "ארמדה" אמריקנית (צי ספינות מלחמה, כולל נושאת המטוסים אברהם לינקולן) עושה את דרכה למפרץ הפרסי. טראמפ הבהיר כי ארה"ב בוחנת אפשרויות תקיפה ישירות נגד מטרות שלטוניות אם לא ייפסק הדיכוי. ולאחר הדלפות על ממדי הטבח, הכריז "העזרה בדרך".


הזווית הישראלית והאזורית:
  • כוננות שיא: ישראל נמצאת בדריכות עליונה מחשש שהסלמה אמריקנית תוביל לתגובה איראנית ישירה או באמצעות שלוחיה (פרוקסי).

  • איומי נתניהו: ראש הממשלה נתניהו הזהיר כי אם איראן תבצע "טעות" ותתקוף את ישראל, היא תפגוש עוצמה שטרם הכירה.

  • איומי טהראן: המשטר האיראני הודיע כי במקרה של תקיפה, בסיסים אמריקניים ויעדים בישראל יהיו "מטרות לגיטימיות".

באשכול זה נמשיך לעדכן סביב השעון בכל התפתחות, דיווחים מהשטח ופרשנויות ביטחוניות.
עודכן אדר תשפ"ד
ראשית, גופי הכשרות
ברוב אשכולות בנושא 'השקעות בשוק ההון' בפרוג, משתרבב עניין הכשרות.
למען הסדר באשכול זה נעלה עדכונים בנושא כשרות.
אני אשתדל לסכם ולתמצת ככל האפשר.

יש 4 גופי כשרות
  • בד"ץ העדה החרדית - על פי פסקי הרב יעקב בלוי זצ"ל שהיה בקיא גדול בתחום שוק ההון והוא שהביא את פסקיו ועל פי פסקים אלו נוהגים עד היום בגוף כשרות זה. היום הכשרות בראשות הרב שלמה זאב קרליבך.
  • גלאט הון - על פי פסקי רבי ניסים קרליץ והרב שמואל ואזנר. שסמכו ידיהם על הרב יעקב לנדו שמכיר את שוק ההון לעומקו. הרב משה שטרנבוך ראב"ד העדה החרדית הוא מרבני 'גלאט הון'.
  • תשואה כהלכה – הרב שמואל דוד גרוס, רב חסידי גור אשדוד ועוד רבנים מוכרים וידועים בכל שכבות הציבור החרדי.
  • כלכלה על פי ההלכה- הרב אריה דביר, על פי פסקי הרב יוסף שלום אלישיב.

היום בכל החברות יש מסלולים כשרים, שמאושרים לפחות ע"י אחת מהכשרויות.
בין החברות שנמצאת ברשותם תעודת כשרות אפשר למצוא את:
אלטשולר שחם, אינפיניטי, הפניקס, הראל, כלל, מגדל, מור, מיטב דש, מנורה.

רשימות קרנות כשרות:

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כג

אמִזְמוֹר לְדָוִד יי רֹעִי לֹא אֶחְסָר:בבִּנְאוֹת דֶּשֶׁא יַרְבִּיצֵנִי עַל מֵי מְנֻחוֹת יְנַהֲלֵנִי:גנַפְשִׁי יְשׁוֹבֵב יַנְחֵנִי בְמַעְגְּלֵי צֶדֶק לְמַעַן שְׁמוֹ:דגַּם כִּי אֵלֵךְ בְּגֵיא צַלְמָוֶת לֹא אִירָא רָע כִּי אַתָּה עִמָּדִי שִׁבְטְךָ וּמִשְׁעַנְתֶּךָ הֵמָּה יְנַחֲמֻנִי:התַּעֲרֹךְ לְפָנַי שֻׁלְחָן נֶגֶד צֹרְרָי דִּשַּׁנְתָּ בַשֶּׁמֶן רֹאשִׁי כּוֹסִי רְוָיָה:ואַךְ טוֹב וָחֶסֶד יִרְדְּפוּנִי כָּל יְמֵי חַיָּי וְשַׁבְתִּי בְּבֵית יי לְאֹרֶךְ יָמִים:
נקרא  8  פעמים
למעלה