מבוא ל-HTML

צעדים ראשונים בעולם פיתוח האינטרנט

איזה כיף שהצטרפתם למסע המרתק שלנו לעולם ה-HTML! בואו נגלה יחד איך בונים את הבסיס לכל אתר אינטרנט.

HTML

שפת סימון להצגת תוכן באינטרנט

תג

אלמנט בסיסי ב-HTML המגדיר מבנה או תוכן

← אינדקס

הבלוג הראשון של דני

[smiles] דני רוצה להקים בלוג אישי, אבל אין לו מושג איך להתחיל. בואו נעזור לו ליצור את הדף הראשון שלו!

1. מהו התג הנכון ליצירת כותרת ראשית בHTML?

</span> </label> <label class="opt"> <input type="radio" name="q0" value="<h1>" onchange="recordAnswer('q0', '<h1>', true)"> <span style="margin-right:10px"><h1></span> </label> <label class="opt"> <input type="radio" name="q0" value="<header>" onchange="recordAnswer('q0', '<header>', false)"> <span style="margin-right:10px"><header></span> </label> <label class="opt"> <input type="radio" name="q0" value="<main>" onchange="recordAnswer('q0', '<main>', false)"> <span style="margin-right:10px"><main></span> </label> </div> </div> <div class="nav-buttons-container"> <button class="btn-secondary" onclick="go(0)">← חזרה</button> <button class="btn-nav" style="flex:2" onclick="go(2)">לסיכום והגשה ←</button> </div> </div> <div class="section" id="s2"> <div style="text-align:center; margin-bottom:40px;"> <h2 style="font-size:2.2rem; font-weight:900;">🚀 סיכום המדריך הקצר</h2> <p style="color:#64748b">ניתן להזין מזהה תלמיד לצורך מעקב, או להמשיך באופן אנונימי</p> </div> <form id="insightForm"> <div class="form-section"> <div class="field"> <label>מזהה תלמיד במערכת <span style="color:#64748b; font-weight:normal">(אופציונלי)</span></label> <input type="text" id="student_id" placeholder="לדוגמא: 6948d5ea..." oninput="syncPortalLink()"> <small style="color:#64748b; display:block; margin-top:8px">ניתן למצוא את המזהה בכתובת הפרופיל האישי שלך, או להשאיר ריק להמשך אנונימי</small> </div> <div class="field"> <label>כיצד השיעור שינה את הבנתכם לגבי בניית אתרי אינטרנט?</label> <textarea id="refl" rows="4" placeholder="שתף אותנו בתובנות שלך מהפרק..."></textarea> </div> </div> <div class="nav-buttons-container"> <button type="button" class="btn-secondary" onclick="go(1)">← חזרה</button> <button type="button" class="btn-submit" style="flex:2" id="submitBtn" onclick="submitFinal()">✅ שלח ושמור התקדמות</button> </div> </form> </div> <div class="section" id="s3"> <div style="text-align:center; padding:50px 0;"> <div style="font-size:5rem; margin-bottom:25px">🏆</div> <h2 style="font-size:2.5rem; font-weight:900">כל הכבוד! סיימת!</h2> <p style="font-size:1.2rem; color:#475569; max-width:500px; margin: 0 auto 40px auto">התשובות שלך נשלחו בהצלחה. המטלה נשמרה בתיק האישי שלך.</p> <div class="nav-buttons-container" style="max-width:550px; margin: 0 auto"> <a href="index.html" class="btn-secondary">← אינדקס</a> <a id="portalLinkBtn" href="https://edu-manage.org" class="portal-btn">סיום וחזרה לפורטל האישי 👤</a> </div> <div style="margin-top:40px; border-top:2px dashed #e2e8f0; padding-top:40px"> <p style="font-weight:800; margin-bottom:15px; color:#1e293b">רוצה להעמיק בנושאים נוספים?</p> <a href="https://bdnhost.net/Resources/" target="_blank" class="resources-footer-btn">📂 מעבר למאגר המדריכים והמשאבים המלא</a> </div> </div> </div> </div> </div> <script> const API_URL = 'https://edu-manage.org/api/functions/submitGuideForm'; const quizLog = {}; // Audio paths for different file locations const audioPaths = { welcome: ["ch1/assets/task_ch1_welcome/audio_ch1_welcome.mp3","assets/task_ch1_welcome/audio_ch1_welcome.mp3","/ch1/assets/task_ch1_welcome/audio_ch1_welcome.mp3","../ch1/assets/task_ch1_welcome/audio_ch1_welcome.mp3","task_ch1_welcome/audio_ch1_welcome.mp3","media/1/audio/audio_ch1_welcome.mp3","audio/audio_ch1_welcome.mp3","/Resources/mdrykh-javascript-lmtchylym/ch1/assets/task_ch1_welcome/audio_ch1_welcome.mp3"], case: ["ch1/assets/task_ch1_case/audio_ch1_case.mp3","assets/task_ch1_case/audio_ch1_case.mp3","/ch1/assets/task_ch1_case/audio_ch1_case.mp3","../ch1/assets/task_ch1_case/audio_ch1_case.mp3","task_ch1_case/audio_ch1_case.mp3","media/1/audio/audio_ch1_case.mp3","audio/audio_ch1_case.mp3","/Resources/mdrykh-javascript-lmtchylym/ch1/assets/task_ch1_case/audio_ch1_case.mp3"], summary: ["ch1/assets/task_ch1_summary/audio_ch1_summary.mp3","assets/task_ch1_summary/audio_ch1_summary.mp3","/ch1/assets/task_ch1_summary/audio_ch1_summary.mp3","../ch1/assets/task_ch1_summary/audio_ch1_summary.mp3","task_ch1_summary/audio_ch1_summary.mp3","media/1/audio/audio_ch1_summary.mp3","audio/audio_ch1_summary.mp3","/Resources/mdrykh-javascript-lmtchylym/ch1/assets/task_ch1_summary/audio_ch1_summary.mp3"] }; const labels = ["פתיחה", "משימה", "סיכום"]; const mediaTypes = ["welcome", "case", "summary"]; window.onload = () => { const sid = new URLSearchParams(window.location.search).get('base44StudentId'); if(sid) { document.getElementById('student_id').value = sid; syncPortalLink(); } // Try first audio path loadAudio(0); }; // Better media loading function function loadAudio(idx) { const mediaType = mediaTypes[idx] || "welcome"; const paths = audioPaths[mediaType] || []; tryLoadAudioSource(paths, 0, idx); } // Try alternative audio paths if primary fails function tryLoadAudioSource(paths, pathIndex, audioIndex) { if (!paths || pathIndex >= paths.length) { console.warn("Failed to load audio type " + mediaTypes[audioIndex]); return; } const audio = document.getElementById('audio'); const source = document.getElementById('aSrc'); source.src = paths[pathIndex]; // Error event - try alternative path source.onerror = function() { if (pathIndex + 1 < paths.length) { console.log("Trying alternative audio path: " + paths[pathIndex + 1]); tryLoadAudioSource(paths, pathIndex + 1, audioIndex); } }; audio.load(); } function syncPortalLink() { const sid = document.getElementById('student_id').value.trim(); const btn = document.getElementById('portalLinkBtn'); if(btn) { if(sid) btn.href = 'https://edu-manage.org/PublicView?type=student&id=' + sid; else btn.href = 'https://edu-manage.org'; } } function go(idx) { document.querySelectorAll('.section').forEach(s => s.classList.remove('active')); const target = document.getElementById('s'+idx); if(target) target.classList.add('active'); loadAudio(idx); document.getElementById('audioLabel').innerText = labels[idx] || "נגן"; if(idx === 3) syncPortalLink(); window.scrollTo({ top: 0, behavior: 'smooth' }); } function playAudio() { const a = document.getElementById('audio'); const b = document.getElementById('pBtn'); // אם האודיו הסתיים, נחזיר אותו להתחלה if (a.ended || a.currentTime >= a.duration) { a.currentTime = 0; b.innerText = '▶'; } if(a.paused) { a.play().catch(e => console.error("Error playing audio:", e)); b.innerText = '⏸'; } else { a.pause(); b.innerText = '▶'; } // הוספת אירוע שמתרחש כשהאודיו מסתיים a.onended = function() { b.innerText = '▶'; // שינוי הכפתור חזרה ל-play a.currentTime = 0; // החזרת האודיו להתחלה }; } function recordAnswer(qid, text, correct) { quizLog[qid] = { answer: text, isCorrect: correct }; } async function submitFinal() { const sid = document.getElementById('student_id').value.trim(); // Student ID is now optional const btn = document.getElementById('submitBtn'); btn.disabled = true; btn.textContent = '⏳ שולח נתונים...'; try { const res = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ student_id: sid, guide_name: "מדריך HTML למתחילים", guide_chapter: "מבוא ל-HTML", anonymous: sid ? false : true, form_data: { reflection: document.getElementById('refl').value, quiz: quizLog } }) }); if(res.ok) { go(3); } else { throw new Error(); } } catch(e) { alert('שגיאה בשמירת המטלה. נסה שוב.'); btn.disabled = false; btn.textContent = '✅ נסה שוב'; } } </script> </body> </html>