Wednesday, November 12, 2025

ttt

<!DOCTYPE html>
<html lang="mr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>मराठी / English Typing Practice — 7 मिनिट</title>
<style>
  :root{
    --primary1:#4a00e0;
    --primary2:#8e2de2;
    --accent:#00bcd4;
    --card:#ffffff;
    --muted:#666;
  }
  *{box-sizing:border-box}
  body{
    margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    background: linear-gradient(135deg,#f0f6ff,#f5eefb);
    color:#222;
  }
  header{
    background: linear-gradient(90deg,var(--primary1),var(--primary2));
    color:white;
    padding:18px 12px;
    text-align:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
  }
  header h1{margin:0;font-size:20px}
  header p{margin:6px 0 0 0;opacity:0.95;font-size:13px}

  nav{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px;background:rgba(0,0,0,0.02);
  }
  .nav-btn{
    background:transparent;border:0;padding:10px 12px;border-radius:8px;font-weight:600;cursor:pointer;
    transition:all .18s;color:#222;
  }
  .nav-btn:hover{background:rgba(0,0,0,0.06)}
  .nav-btn.active{background:linear-gradient(90deg,var(--primary1),var(--primary2));color:white;box-shadow:0 6px 18px rgba(138,43,226,0.16)}

  main{max-width:1100px;margin:20px auto;padding:18px;border-radius:12px;background:var(--card);box-shadow:0 6px 20px rgba(0,0,0,0.06)}
  .top-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
  .select-wrap{display:flex;gap:8px;align-items:center}
  select, button{font-weight:700}
  select{padding:10px;border-radius:8px;border:1px solid #ddd;background:white}
  button{padding:10px 14px;border-radius:8px;border:0;cursor:pointer}
  .start{background:linear-gradient(90deg,#2ecc71,#27ae60);color:white}
  .submit{background:linear-gradient(90deg,#2196f3,#1e88e5);color:white}
  .reset{background:#f5f5f5;color:#333;border:1px solid #e0e0e0}

  .layout{display:flex;gap:16px}
  .col{flex:1;min-width:280px;background:#fbfbff;padding:14px;border-radius:10px;border:1px solid #eee;box-shadow:inset 0 0 6px rgba(0,0,0,0.02)}
  .col h3{text-align:center;margin-top:0}
  .question{line-height:1.7;color:#333;padding:8px;border-radius:6px;background:linear-gradient(180deg,#ffffff,#fbfbff);min-height:160px;white-space:pre-wrap}
  textarea{width:100%;min-height:240px;padding:12px;border-radius:8px;border:1px solid #ddd;font-size:15px;resize:vertical}
  .meta{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px}
  .timer{font-weight:800;color:#b71c1c}
  .result{margin-top:14px;padding:12px;border-radius:8px;background:linear-gradient(90deg,#f9fbff,#fff9fb);border:1px solid #eee;text-align:center}

  /* lists inside result */
  .lists { display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;justify-content:center }
  .list-box { flex:1 1 320px; min-width:260px; background:#fff;border-radius:8px;padding:10px;border:1px solid #eee; text-align:left; max-height:240px; overflow:auto; }
  .list-box h4{margin:0 0 8px 0;font-size:14px}

  footer{margin-top:18px;padding:12px;text-align:center;color:#444;font-size:13px}
  @media(max-width:900px){ .layout{flex-direction:column} .meta{flex-direction:column} .lists{flex-direction:column} }
</style>
</head>
<body>

<header>
  <h1>Typing Practice — 7 मिनिट परीक्षा</h1>
  <p>मराठी आणि English पेपर्स — 40 गुण (Pass = 16) — 7 मिनिटे</p>
</header>

<nav id="menu">
  <button class="nav-btn active" data-section="home">🏠 Home</button>
  <button class="nav-btn" data-section="mr30">🇲🇷 मराठी 30</button>
  <button class="nav-btn" data-section="mr40">🇲🇷 मराठी 40</button>
  <button class="nav-btn" data-section="en30">🇬🇧 English 30</button>
  <button class="nav-btn" data-section="en40">🇬🇧 English 40</button>
  <button class="nav-btn" data-section="en50">🇬🇧 English 50</button>
  <button class="nav-btn" data-section="about">ℹ️ About</button>
  <button class="nav-btn" data-section="contact">📞 Contact</button>
  <button class="nav-btn" data-section="privacy">🔒 Privacy</button>
</nav>

<main id="mainContent">

  <!-- Home / About / Contact / Privacy sections -->
  <section id="home" class="page" style="display:block">
    <h2>Welcome — मुख्यपृष्ठ</h2>
    <p>ही वेबसाईट वेग आणि अचूकतेसाठी सराव करण्यासाठी तयार केली आहे. वरच्या मेनूमधून श्रेणी निवडा आणि पेपर निवडा — Start दाबा आणि 7 मिनिटांत टाइप करा.</p>
  </section>

  <section id="about" class="page" style="display:none">
    <h2>About / आमच्याविषयी</h2>
    <p>हे एक साधे टायपिंग-प्रॅक्टिस टूल आहे — उद्देश: नियमित सरावाद्वारे वेग आणि अचूकता सुधारणे.</p>
  </section>

  <section id="contact" class="page" style="display:none">
    <h2>Contact / संपर्क</h2>
    <p>ईमेल: contact@yourdomain.com</p>
  </section>

  <section id="privacy" class="page" style="display:none">
    <h2>Privacy Policy / गोपनीयता धोरण</h2>
    <p>ही साइट कोणतीही व्यक्तिगत माहिती संग्रहित करत नाही; सर्व डेटा स्थानिक ब्राउझरमध्येच राहतो.</p>
  </section>

  <!-- Typing UI area (shared for all paper-categories) -->
  <section id="exam" class="page" style="display:block;margin-top:18px">
    <div class="top-row">
      <div class="select-wrap">
        <label style="font-weight:700;margin-right:8px">Current Section:</label>
        <div id="currentSectionDisplay" style="min-width:140px;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid #eee">Home</div>
      </div>

      <div class="select-wrap">
        <label style="font-weight:700;margin-right:8px">Paper:</label>
        <select id="paperSelect">
          <option value="">-- पेपर निवडा --</option>
        </select>
        <button class="nav-btn reset" id="previewBtn">Preview</button>
      </div>

      <div style="display:flex;gap:8px;align-items:center">
        <button id="startBtn" class="start" disabled>Start Test</button>
        <button id="submitBtn" class="submit" disabled>Submit</button>
        <button id="clearBtn" class="reset">Reset</button>
      </div>
    </div>

    <div class="layout">
      <div class="col">
        <h3>📄 प्रश्नपत्रिका</h3>
        <div id="questionPaper" class="question">पहिल्यांदा वरचा मेनू वापरून श्रेणी/पेपर निवडा.</div>
      </div>

      <div class="col">
        <h3>✍️ उत्तरपत्रिका</h3>
        <textarea id="answerArea" placeholder="इथे टाइप करा..." disabled></textarea>
        <div class="meta">
          <div class="timer">वेळ: <span id="timer">07:00</span></div>
          <div id="progress" style="color:var(--muted)">—</div>
        </div>
        <div id="result" class="result" style="display:none"></div>
        <!-- lists of wrong & missed -->
        <div id="listsContainer" class="lists" style="display:none"></div>
      </div>
    </div>
  </section>

</main>

<footer>© 2025 Typing Practice — सर्व हक्क राखीव</footer>

<script>
/* ====== papers data (20 per category) ====== */
const PAPERS = {
  mr30: [ /* 20 sample Marathi ~short */ 
`पहिला पेपर: ही मराठी पॅसेज आहे ज्याचा उद्देश टायपिंगचा सराव करणे आहे. सात मिनिटांत अचूकपणे टाइप करा.`,
`दुसरा पेपर: मराठी भाषेतील सामान्य वाक्ये टाइप करून तुमची गती आणि अचूकता तपासा.`,
`तिसरा पेपर: सराव केल्याने बोटांची वेगवेगळी हालचाल सुलभ होते आणि गती वाढते.`,
`चौथा पेपर: आजचे छोटे वाक्ये इकडे तिकडे टाइप करून सराव करा आणि चुका कमी करा.`,
`पाचवा पेपर: वेळेवर लक्ष देऊन टाइप करा कारण वेळ संपल्यावर ऑटो सबमिट होईल.`,
`पॅपर 6: लेखनात विरामचिन्हांचे स्थान महत्वाचे असते, त्याकडे लक्ष द्या.`,
`पॅपर 7: नियमित सरावाने टायपिंगमध्ये सुधारणा होते आणि आत्मविश्वास वाढतो.`,
`पॅपर 8: शिकण्याची प्रक्रिया सुसंगत ठेवून दैनंदिन सराव करावा.`,
`पॅपर 9: छोट्या छोट्या चाचण्यांनी मोठी सुधारणा साधता येते.`,
`पॅपर 10: कीबोर्डचा योग्य वापर हे गती वाढवण्याचे मुख्य साधन आहे.`,
`पॅपर 11: बोटांची योग्य स्थिती ठेवून टाइपिंग करणे फायदेशीर असते.`,
`पॅपर 12: चुकांवर लक्ष घालून ती गोळी करून पुढे सराव करा.`,
`पॅपर 13: नियंत्रणाने आणि थोड्यावेळात आपण जास्त शब्द टाइप करू शकतो.`,
`पॅपर 14: उत्तम टायपिंगसाठी डोळ्यांनी स्क्रीन व कीबोर्डवर लक्ष ठेवा.`,
`पॅपर 15: दररोज थोडे सराव केल्यास परिणाम लवकर दिसतो.`,
`पॅपर 16: साबरपणाने सराव करत रहा आणि चुका सुधारत रहा.`,
`पॅपर 17: वेगाने पण अचूकतेने टाइप करणे महत्त्वाचे आहे.`,
`पॅपर 18: छोटे वाक्य नियमितपणे टाइप करुन सराव करा.`,
`पॅपर 19: मन शांत ठेवून टाइपिंग केल्यास अचूकता वाढते.`,
`पॅपर 20: प्रयत्न करत रहा — टायपिंग मध्ये प्राविण्य येते.` ],
  mr40: [ /* 20 sample Marathi ~longer */
`प्रश्नपत्र 1: ही मराठी प्रश्नपत्रिका थोडी लांब आहे. वाक्यांना लक्ष देऊन अचूक टाइप करा आणि सात मिनिटात जास्तीत जास्त शब्द पूर्ण करा.`,
`प्रश्नपत्र 2: टायपिंगचा सराव करताना विरामचिन्ह आणि स्पेस योग्य ठिकाणी वापरणे आवश्यक आहे.`,
`प्रश्नपत्र 3: बोटांच्या हालचालीमुळे गती वाढते, म्हणून योग्य पद्धत अवलंबा आणि ठराविक सराव करा.`,
`प्रश्नपत्र 4: छोट्या वाक्यांचा अभ्यास करून ती वेगाने टाइप करण्याचा प्रयत्न करा आणि चुका कमी करा.`,
`प्रश्नपत्र 5: स्क्रीनवर वरील मजकूर नीट वाचा आणि मग टाइप करा — इतके लक्ष केंद्रित ठेवा.`,
`प्रश्नपत्र 6: शब्दांची जुळवाजुळव बघून टाइप करा; अनेकदा स्पेलिंगच्या चुका वेळ घालवतात.`,
`प्रश्नपत्र 7: सरावात सातत्य ठेवल्यास टायपिंगची अचूकता व गती सुधारते.`,
`प्रश्नपत्र 8: हातांची आणि मनाची स्थिती व्यवस्थित ठेवून टाइपिंग करा.`,
`प्रश्नपत्र 9: वेळेचे व्यवस्थापन करून टाइप करतांना अधिक शब्द आपण पूर्ण करू शकतो.`,
`प्रश्नपत्र 10: लेखनातील स्वर आणि शैली लक्षात ठेऊन टाइप करा.`,
`प्रश्नपत्र 11: शब्दांचे विभाजन नीट करा, स्पेस आणि विराम यावर भर द्या.`,
`प्रश्नपत्र 12: कर्तृत्वात सुधार करण्यासाठी रोज सराव करणे उपयुक्त ठरते.`,
`प्रश्नपत्र 13: चुकीच्या शब्दांची संख्या कमी करण्याचे उद्दिष्ट ठेवा आणि त्यावर काम करा.`,
`प्रश्नपत्र 14: छोट्या विरामांनी ब्रेक घेऊन परत सराव करणे फायदेशीर आहे.`,
`प्रश्नपत्र 15: एकाच पद्धतीने सराव न करता विविध प्रकारचे वाक्ये वापरा.`,
`प्रश्नपत्र 16: प्रयत्न आणि सातत्याने तुमची गती निश्चितपणे वाढेल.`,
`प्रश्नपत्र 17: शब्दांची नेमकी पद्धत लक्षात ठेवा आणि टाइपिंग करा.`,
`प्रश्नपत्र 18: धैर्याने आणि नियोजनाने आपण चांगले परिणाम मिळवू शकतो.`,
`प्रश्नपत्र 19: छोटे छोटे धडे घेत अभ्यास करा आणि पुढे जा.`,
`प्रश्नपत्र 20: सात मिनिटांचा वेळ व्यवस्थित वापरा आणि पूर्ण प्रयत्न करा.` ],
  en30: [ /* 20 English short */
`Paper 1: This short English passage helps you practice typing speed and accuracy within seven minutes.`,
`Paper 2: Regular practice improves finger movement and typing fluency over time.`,
`Paper 3: Focus on accuracy first, then gradually increase your typing speed as confidence grows.`,
`Paper 4: Small daily drills can lead to large improvements in typing performance.`,
`Paper 5: Keep your fingers relaxed and try to maintain a steady rhythm while typing.`,
`Paper 6: Learn proper finger placement to reduce errors and increase speed.`,
`Paper 7: Short sentences practiced repeatedly help build muscle memory.`,
`Paper 8: Maintain good posture and keep your eyes on the screen while typing.`,
`Paper 9: Watch spacing and punctuation to avoid simple mistakes during tests.`,
`Paper 10: Time management matters—try to allocate a minute per paragraph and keep moving.`,
`Paper 11: Use consistent practice sessions of fifteen minutes a day for steady gains.`,
`Paper 12: Focus on frequently used words to increase overall typing efficiency.`,
`Paper 13: Build accuracy first; speed will follow with regular repetition and care.`,
`Paper 14: Typing short passages quickly requires both focus and rhythm.`,
`Paper 15: Monitor your errors and correct them during practice to improve recall.`,
`Paper 16: Try to type without looking at the keyboard to increase speed over time.`,
`Paper 17: Break long sessions into small chunks to avoid fatigue and maintain precision.`,
`Paper 18: Keep practicing proper technique to ensure long-term improvement.`,
`Paper 19: Aim for fewer mistakes rather than only typing very fast.`,
`Paper 20: Stay calm and steady; consistent effort will deliver better results.` ],
  en40: [ /* 20 English medium */
`Paper 1: This English passage is slightly longer and designed to test both speed and accuracy. Read carefully and type with attention to punctuation.`,
`Paper 2: Practice regularly to develop muscle memory and improve touch typing with fewer errors.`,
`Paper 3: Keep your wrists relaxed and ensure comfortable posture for sustained typing sessions.`,
`Paper 4: Pay attention to the placement of commas and periods to keep your sentences clear and correct.`,
`Paper 5: Typing practice should focus on both frequently used words and less common vocabulary.`,
`Paper 6: Try timed drills where you increase the number of words per minute gradually.`,
`Paper 7: A calm and focused mind helps maintain accuracy during longer typing exercises.`,
`Paper 8: Use short breaks to reduce fatigue and preserve concentration throughout practice.`,
`Paper 9: Building accuracy first makes it easier to increase speed without accumulating errors.`,
`Paper 10: Regular review of typed errors will help you remember correct spellings and forms.`,
`Paper 11: Include a mix of simple and complex sentences in your practice routine each day.`,
`Paper 12: Consistent practice over weeks will noticeably improve your typing performance.`,
`Paper 13: Accurate typing is more valuable than merely fast typing with many mistakes.`,
`Paper 14: Aim to type cleanly and then gradually push the speed boundary without sacrificing quality.`,
`Paper 15: Use short challenges with immediate feedback to correct mistakes quickly.`,
`Paper 16: Mark commonly misspelled words and practice them repeatedly to reduce errors.`,
`Paper 17: Try to maintain a natural rhythm and avoid sudden bursts of speed that cause mistakes.`,
`Paper 18: A focused practice schedule yields steady progress and better results overall.`,
`Paper 19: When preparing for tests, practice with real sample passages under timed conditions.`,
`Paper 20: Remain patient, track your progress, and celebrate small improvements each week.` ],
  en50: [ /* 20 English longer */
`Paper 1: This longer English passage gives a thorough test of both endurance and accuracy under a timed condition. Read the full passage carefully before beginning to type.`,
`Paper 2: A balanced approach includes accuracy drills and speed-building exercises with measured increases.`,
`Paper 3: For longer passages, maintain steady breathing and a relaxed posture to avoid strain while typing.`,
`Paper 4: Include punctuation practice in your drills since errors there can significantly affect scoring.`,
`Paper 5: Timed practice with detailed error review often leads to faster improvement than untimed repetition.`,
`Paper 6: Track your words per minute and accuracy over time to spot trends and focus your training.`,
`Paper 7: Typing longer sections helps build endurance but ensure you take short rests to preserve focus.`,
`Paper 8: Use progressive difficulty in passages to gradually challenge both vocabulary and typing speed.`,
`Paper 9: Maintaining a regular schedule, even short daily sessions, delivers consistent improvement.`,
`Paper 10: Emphasize clean typing first, then raise the target speed in small increments each week.`,
`Paper 11: Reflect on common mistakes and practice them deliberately to reduce recurrence in tests.`,
`Paper 12: Alternate between short-speed drills and longer accuracy-focused passages for balance.`,
`Paper 13: Keep track of WPM and accuracy after each session to measure what works best for you.`,
`Paper 14: Healthy ergonomics and wrist posture help prevent injury during repeated practice sessions.`,
`Paper 15: Pace yourself: steady, accurate typing often outperforms hurried but error-prone attempts.`,
`Paper 16: Break bigger passages into smaller chunks to practice continuity without losing accuracy.`,
`Paper 17: A variety of content types—narrative, descriptive, instructive—improves adaptability.`,
`Paper 18: Regular assessment under timed conditions builds confidence for real examinations.`,
`Paper 19: Practice commonly used phrases to enhance fluid typing in real-world contexts.`,
`Paper 20: Continue gradual, consistent practice; this is the most dependable path to mastery.` ]
};

/* ====== UI & Logic ====== */
let currentSection = 'home'; // 'mr30','mr40','en30','en40','en50'
const sectionDisplay = document.getElementById('currentSectionDisplay');
const menuButtons = document.querySelectorAll('.nav-btn');
const pages = document.querySelectorAll('.page');

const paperSelect = document.getElementById('paperSelect');
const questionPaper = document.getElementById('questionPaper');
const answerArea = document.getElementById('answerArea');
const startBtn = document.getElementById('startBtn');
const submitBtn = document.getElementById('submitBtn');
const clearBtn = document.getElementById('clearBtn');
const timerEl = document.getElementById('timer');
const resultBox = document.getElementById('result');
const previewBtn = document.getElementById('previewBtn');
const progressEl = document.getElementById('progress');
const listsContainer = document.getElementById('listsContainer');

let selectedPaperText = '';
let timerInterval = null;
let timeLeft = 420;
const TOTAL_MARKS = 40;

function showSection(id){
  currentSection = id;
  menuButtons.forEach(b=> b.classList.toggle('active', b.dataset.section===id));
  pages.forEach(p=> p.style.display = (p.id===id) ? 'block' : 'none');
  // exam area always visible; update currentSectionDisplay
  let label = '';
  switch(id){
    case 'home': label='Home'; break;
    case 'mr30': label='मराठी 30'; break;
    case 'mr40': label='मराठी 40'; break;
    case 'en30': label='English 30'; break;
    case 'en40': label='English 40'; break;
    case 'en50': label='English 50'; break;
    case 'about': label='About'; break;
    case 'contact': label='Contact'; break;
    case 'privacy': label='Privacy'; break;
    default: label=id;
  }
  sectionDisplay.innerText = label;
  if(['mr30','mr40','en30','en40','en50'].includes(id)){
    populatePapers(id);
    document.getElementById('exam').style.display='block';
  } else {
    // clear dropdown and disable controls
    populatePapers('');
  }
}

function populatePapers(cat){
  paperSelect.innerHTML = '';
  const placeholder = document.createElement('option');
  placeholder.value=''; placeholder.text='-- पेपर निवडा --';
  paperSelect.appendChild(placeholder);
  if(!cat || !PAPERS[cat]){ startBtn.disabled=true; questionPaper.innerText=''; selectedPaperText=''; return; }
  PAPERS[cat].forEach((p,i)=>{
    const opt=document.createElement('option');
    opt.value=i; opt.text=`Paper ${i+1}`;
    paperSelect.appendChild(opt);
  });
  startBtn.disabled=false;
  questionPaper.innerText = 'पेपर निवडा...';
  selectedPaperText = '';
  answerArea.value=''; answerArea.disabled=true;
  submitBtn.disabled=true; resultBox.style.display='none'; listsContainer.style.display='none';
  timerEl.innerText='07:00'; progressEl.innerText='—';
}

menuButtons.forEach(b=>{
  b.addEventListener('click', ()=> showSection(b.dataset.section));
});

paperSelect.addEventListener('change', ()=>{
  const idx = paperSelect.value;
  const cat = currentSection;
  if(idx==='' || !PAPERS[cat]){ questionPaper.innerText='पेपर निवडा...'; selectedPaperText=''; return; }
  selectedPaperText = PAPERS[cat][+idx];
  questionPaper.innerText = selectedPaperText;
  resultBox.style.display='none'; listsContainer.style.display='none';
  answerArea.value=''; answerArea.disabled=true; submitBtn.disabled=true;
});

previewBtn.addEventListener('click', ()=>{
  if(!selectedPaperText){ alert('कृपया पेपर निवडा.'); return; }
  questionPaper.scrollIntoView({behavior:'smooth',block:'center'});
});

startBtn.addEventListener('click', ()=>{
  if(!selectedPaperText){ alert('कृपया पेपर निवडा.'); return; }
  answerArea.disabled=false; answerArea.value=''; answerArea.focus();
  startBtn.disabled=true; submitBtn.disabled=false; resultBox.style.display='none'; listsContainer.style.display='none';
  clearInterval(timerInterval); timeLeft = 420; updateTimerDisplay();
  timerInterval = setInterval(()=>{
    timeLeft--; updateTimerDisplay();
    if(timeLeft<=0){ clearInterval(timerInterval); finalizeTest(); }
  },1000);
});

submitBtn.addEventListener('click', ()=>{
  clearInterval(timerInterval); finalizeTes

Saturday, March 25, 2023

How to use HTML Hyperlinks tag

 

HTML hyperlinks are used to create clickable links that allow users to navigate between different pages on the web. To use HTML hyperlinks, you can follow these steps :-

 

1.   First, open a text editor such as Notepad or Sublime Text and create a new HTML file with the extension ".html".

2.   Inside the HTML file, create an anchor tag by typing <a> followed by the text that you want to display as the hyperlink. For example, <a>Click here to go to Google</a>.

3.   Next, you need to specify the URL that the hyperlink should link to. To do this, add the href attribute to the anchor tag and set it equal to the URL. For example, <a href="https://www.google.com">Click here to go to Google</a>.

4.   Save the HTML file and open it in a web browser. You should now be able to click on the hyperlink and be taken to the specified URL.

Here's an example of an HTML hyperlink that links to Google's homepage :-

<!DOCTYPE html>

<html>

<head>

          <title>HTML Hyperlink Example</title>

</head>

<body>

          <a href="https://www.google.com">Click here to go to Google</a>

</body>

</html>

 

When the hyperlink is clicked, the user will be taken to Google's homepage.

Friday, March 24, 2023

How to use HTML headings tag

 

HTML headings are used to define the hierarchy and structure of a webpage's content. They are typically used to indicate the main headings and subheadings of a page, and are denoted by the <h1> to <h6> tags.

Here's a brief overview of the different HTML headings tags:

<h1> :- Defines the most important heading on the page. It should be used sparingly and only once per page.

<h2> :- Defines a second-level heading on the page, typically used to separate major sections of content.

<h3> to <h6> :- Defines third-level to sixth-level headings respectively. These are typically used for subheadings within sections.

Here's an example of how headings can be used in HTML :

 

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <h1>Main Heading</h1>

    <p>This is the main content of the page.</p>

    <h2>Section One</h2>

    <p>This is the first section of the page.</p>

    <h3>Subheading One</h3>

    <p>This is a subheading within the first section.</p>

    <h3>Subheading Two</h3>

    <p>This is another subheading within the first section.</p>

    <h2>Section Two</h2>

    <p>This is the second section of the page.</p>

    <h3>Subheading Three</h3>

    <p>This is a subheading within the second section.</p>

  </body>

</html>

 

In this example, the <h1> tag is used to define the main heading of the page, followed by two <h2> tags for major sections of content. Within the first section, two <h3> tags are used to define subheadings. The second section also has one <h3> tag for a subheading.

(Note :- Copy this code and paste it in notepad and then save it as filename.html and then open the file in any browser.)

Monday, March 20, 2023

How to use HTML
Tag in the code

 

    The HTML <details> tag is used to create a disclosure widget in a web page. The widget consists of a summary and a details element. When a user clicks on the summary, the details element is revealed or hidden.

Here's an example of how to use the <details> tag :-


<details>

  <summary>Click to expand</summary>

  <p>These are the detail that are revealed when the summary is clicked.</p>

</details>


    In the example above, the summary element contains the text "Click to expand". When the user clicks on this text, the details element containing the paragraph element is revealed.

    You can add any type of content inside the details element, including images, videos, lists, and more.


(Note :- Copy this code and paste it in notepad and then save it as filename.html and then open the file in any browser.)

Tuesday, March 14, 2023

What is HTML and HTML basics explained?

 

HTML (HyperText Markup Language) is a programming language used to create web pages and other types of documents that can be displayed on the World Wide Web. HTML is used to define the structure and content of web pages, as well as the layout and formatting of text and other elements.

HTML consists of a series of markup tags that are used to specify the structure and content of a web page. These tags are enclosed in angle brackets (< >) and are placed within the body of an HTML document.

Some common HTML tags include :-

<html> :- This tag indicates the start of an HTML document.

<head> :- This tag contains information about the document, such as the title and metadata.

<body> :- This tag contains the main content of the document.

<h1>, <h2>, <h3>, etc. :- These tags are used to indicate headings of various levels.

<p> :- This tag is used to indicate a paragraph of text.

<a> :- This tag is used to create a hyperlink to another web page or resource.

<img> -: This tag is used to insert an image into the document.

HTML is an essential component of web development and is often used in conjunction with other programming languages, such as CSS and JavaScript, to create interactive and dynamic web pages.