I'm new to this, how can i write a HTML code?

825

The new file button doesn't let me write and just make a new Hello World HTML program

5 Answers

10 months ago by

You should be able to navigate to https://onecompiler.com/html directly where you get 3 files by default. One for HTML one for CSS and one for JS.
You can erase the content and write HTML there.

I'm not sure what you mean by "Hello World HTML program".
HTML is a markup language not a programming language, thus it is not designed to create programs a C++ as JavaScript could.

10 months ago by petr
  1. Open a text editor: You can use any text editor like Notepad (Windows), TextEdit (Mac), or Sublime Text.
  2. Create a new file: Save the file with an .html extension, for example, myfirstwebpage.html.
  3. Write basic HTML structure: Copy and paste the following code:
<html> <head> <title>My First Webpage</title> </head> <body bgcolor="yellow" text="red"> </html> ```

Understanding the Code

  • <html>: The root element of the HTML document.
  • <head>: Contains metadata about the document, such as the title.
  • <title>: Sets the title of the webpage, which appears in the browser's title bar.
  • <body>: Contains the content of the HTML document.

Adding Content

  1. Headings: Use <h1>, <h2>, <h3>, etc. to create headings.
<h1>Welcome to My First Webpage</h1>
  1. Paragraphs: Use <p> to create paragraphs.
<p>This is my first webpage, and I'm excited to learn more about HTML!</p>
 *Links*: Use `<a>` to create hyperlinks.


 *Images*: Use `<img>` to add images.
<img src="image name.jpg" > ``` Saving and Viewing 1. *Save the file*: Save your HTML file with the changes you've made. 2. *Open the file in a browser*: Double-click the file to open it in your default web browser.

Congratulations! You've just created your first HTML webpage!

Keep practicing, and soon you'll become proficient in HTML.

10 months ago by Abhigyan Pandey

index.html

<!DOCTYPE HTML
10 months ago by Kajal Rajput
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GMIU Logo with Animated Map</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #001f3f 0%, #0a2a45 100%);
        color: white;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        overflow-x: hidden;
    }
    
    .container {
        max-width: 1000px;
        width: 100%;
        text-align: center;
    }
    
    h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        color: #ffffff;
    }
    
    .description {
        font-size: 1.2rem;
        margin-bottom: 2.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
        color: #e0e0e0;
    }
    
    .animation-container {
        position: relative;
        width: 100%;
        height: 500px;
        margin: 0 auto 2rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        background: #002B5B;
    }
    
    .map-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.7;
    }
    
    .world-map {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.4;
    }
    
    .logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        height: 220px;
        z-index: 20;
        filter: drop-shadow(0 0 15px rgba(249, 168, 37, 0.7));
        animation: pulse 4s infinite ease-in-out;
    }
    
    .connections {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .connection-line {
        position: absolute;
        background: rgba(249, 168, 37, 0.7);
        transform-origin: 0 0;
        height: 2px;
        border-radius: 2px;
        box-shadow: 0 0 10px #F9A825, 0 0 20px #F9A825;
    }
    
    .glow-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #F9A825;
        box-shadow: 0 0 10px 2px #F9A825;
    }
    
    .controls {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    
    button {
        padding: 12px 25px;
        border: none;
        border-radius: 50px;
        background: #002B5B;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    button:hover {
        background: #F9A825;
        color: #002B5B;
        transform: translateY(-2px);
        box-shadow: 0 7px 20px rgba(249, 168, 37, 0.4);
    }
    
    .output-formats {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        flex-wrap: wrap;
    }
    
    .format {
        background: rgba(255, 255, 255, 0.1);
        padding: 15px 25px;
        border-radius: 8px;
        font-weight: 600;
        min-width: 120px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    @keyframes pulse {
        0% { transform: translate(-50%, -50%) scale(1); }
        50% { transform: translate(-50%, -50%) scale(1.05); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }
    
    @keyframes glow {
        0% { opacity: 0.3; }
        50% { opacity: 1; }
        100% { opacity: 0.3; }
    }
    
    @keyframes dash {
        to { stroke-dashoffset: -100; }
    }
    
    @keyframes zoom {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    @media (max-width: 768px) {
        h1 { font-size: 2rem; }
        .description { font-size: 1rem; }
        .animation-container { height: 400px; }
        .logo { width: 180px; height: 180px; }
    }
    
    @media (max-width: 480px) {
        h1 { font-size: 1.8rem; }
        .animation-container { height: 300px; }
        .logo { width: 150px; height: 150px; }
    }
</style>
</head> <body> <div class="container"> <h1>GMIU Global Connectivity</h1> <p class="description">Animated map effect showcasing GMIU's global reach and connections across continents with a dynamic glowing network.</p> 
    <div class="animation-container">
        <div class="map-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/World_map_blank_without_borders.svg" alt="World Map" class="world-map">
        </div>
        
        <div class="connections" id="connections"></div>
        
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/800px-Google_2015_logo.svg.png" alt="GMIU Logo" class="logo">
    </div>
    
    <div class="controls">
        <button id="play">Play Animation</button>
        <button id="pause">Pause Animation</button>
        <button id="zoomIn">Zoom In Effect</button>
        <button id="zoomOut">Zoom Out Effect</button>
    </div>
    
    <div class="output-formats">
        <div class="format">Lottie JSON</div>
        <div class="format">MP4</div>
        <div class="format">GIF</div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const connectionsContainer = document.getElementById('connections');
        const mapContainer = document.querySelector('.map-container');
        const playBtn = document.getElementById('play');
        const pauseBtn = document.getElementById('pause');
        const zoomInBtn = document.getElementById('zoomIn');
        const zoomOutBtn = document.getElementById('zoomOut');
        
        // Create connection lines and dots
        function createConnections() {
            // Clear previous connections
            connectionsContainer.innerHTML = '';
            
            // Create 10-15 random connection lines
            for (let i = 0; i < 15; i++) {
                const startX = Math.random() * 100;
                const startY = Math.random() * 100;
                const endX = Math.random() * 100;
                const endY = Math.random() * 100;
                
                // Calculate distance and angle
                const dx = endX - startX;
                const dy = endY - startY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                
                // Create line element
                const line = document.createElement('div');
                line.className = 'connection-line';
                line.style.width = `${distance}%`;
                line.style.left = `${startX}%`;
                line.style.top = `${startY}%`;
                line.style.transform = `rotate(${angle}deg)`;
                line.style.animation = `glow ${2 + Math.random() * 2}s infinite ease-in-out`;
                line.style.animationDelay = `${Math.random() * 2}s`;
                
                connectionsContainer.appendChild(line);
                
                // Create start and end dots
                createDot(startX, startY);
                createDot(endX, endY);
            }
        }
        
        function createDot(x, y) {
            const dot = document.createElement('div');
            dot.className = 'glow-dot';
            dot.style.left = `${x}%`;
            dot.style.top = `${y}%`;
            dot.style.animation = `glow ${1.5 + Math.random() * 1.5}s infinite ease-in-out`;
            dot.style.animationDelay = `${Math.random() * 2}s`;
            
            connectionsContainer.appendChild(dot);
        }
        
        // Initialize connections
        createConnections();
        
        // Add zoom effects
        zoomInBtn.addEventListener('click', function() {
            mapContainer.style.animation = 'zoom 4s ease-in-out';
            setTimeout(() => {
                mapContainer.style.animation = '';
            }, 4000);
        });
        
        zoomOutBtn.addEventListener('click', function() {
            mapContainer.style.transform = 'scale(1.2)';
            mapContainer.style.transition = 'transform 3s ease-in-out';
            
            setTimeout(() => {
                mapContainer.style.transform = 'scale(1)';
            }, 3000);
        });
        
        // Play/pause functionality
        playBtn.addEventListener('click', function() {
            const lines = document.querySelectorAll('.connection-line');
            const dots = document.querySelectorAll('.glow-dot');
            
            lines.forEach(line => {
                line.style.animationPlayState = 'running';
            });
            
            dots.forEach(dot => {
                dot.style.animationPlayState = 'running';
            });
        });
        
        pauseBtn.addEventListener('click', function() {
            const lines = document.querySelectorAll('.connection-line');
            const dots = document.querySelectorAll('.glow-dot');
            
            lines.forEach(line => {
                line.style.animationPlayState = 'paused';
            });
            
            dots.forEach(dot => {
                dot.style.animationPlayState = 'paused';
            });
        });
        
        // Re-generate connections every 8 seconds for variety
        setInterval(createConnections, 8000);
    });
</script>
</body> </html>
1 month ago by Rushi Chohla
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Community Problem Solver - Demo (Fixed)</title>
  <style>
    :root{--accent:#2563eb;--bg:#f6f8fb;--card:#ffffff}
    body{font-family:Inter, system-ui, Arial, sans-serif; margin:0; background:var(--bg); color:#111}
    header{background:linear-gradient(90deg,#0ea5e9, #2563eb); color:white; padding:14px 20px; display:flex;align-items:center;justify-content:space-between}
    header h1{margin:0;font-size:18px}
    .container{max-width:1000px;margin:18px auto;padding:0 16px}
    .grid{display:grid;grid-template-columns:1fr 360px;gap:16px}
    .card{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
    .btn{background:var(--accent);color:white;padding:8px 12px;border-radius:6px;border:none;cursor:pointer}
    .muted{color:#666;font-size:13px}
    .input, textarea, select{width:100%;padding:8px;border-radius:6px;border:1px solid #e2e8f0;box-sizing:border-box}
    textarea{min-height:90px}
    .problem-item{display:flex;gap:12px;padding:10px;border-bottom:1px solid #f0f3f7}
    .problem-meta{font-size:12px;color:#444}
    .status-open{color:green}
    .status-solved{color:gray;text-decoration:line-through}
    .small{font-size:13px}
    .flex{display:flex;gap:8px;align-items:center}
    .tags{display:flex;gap:6px;flex-wrap:wrap}
    img.thumb{height:64px;width:64px;object-fit:cover;border-radius:6px}
    .answers{margin-top:12px}
    .answer{padding:8px;border-radius:6px;border:1px solid #edf2f7;margin-bottom:8px}
    .accept{background:linear-gradient(90deg,#10b981,#059669);color:white;padding:6px 8px;border-radius:6px;border:none}
    .topbar{display:flex;gap:8px;align-items:center}
    .right-column .card{position:sticky;top:18px}
    footer{padding:18px;text-align:center;color:#666}
    .hidden{display:none}
  </style>
</head>
<body>
  <header>
    <h1>Community Problem-Solver (Demo)</h1>
    <div class="topbar">
      <span id="who" class="muted">Not signed in</span>
      <button id="btnLogin" class="btn">Sign In / Up</button>
    </div>
  </header>

  <div class="container">
    <div class="grid">
      <main>
        <!-- Post Problem -->
        <div class="card" style="margin-bottom:12px">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <strong>Post a Problem</strong>
            <small class="muted">Share your issue; community will help</small>
          </div>
          <form id="postForm" style="margin-top:10px">
            <input id="title" class="input" placeholder="Problem title" required />
            <div style="display:flex;gap:8px;margin-top:8px">
              <select id="category" class="input" style="width:170px">
                <option value="general">General</option>
                <option value="plumbing">Plumbing</option>
                <option value="electrical">Electrical</option>
                <option value="tutoring">Tutoring</option>
                <option value="legal">Legal</option>
                <option value="health">Health (non-medical)</option>
                <option value="other">Other</option>
              </select>
              <input id="location" class="input" placeholder="Location (optional)" />
            </div>
            <textarea id="description" class="input" placeholder="Describe the problem"></textarea>
            <div style="display:flex;gap:8px;margin-top:8px;align-items:center">
              <input id="image" type="file" accept="image/*" />
              <button type="button" id="btnUseGeo" class="btn" style="background:#06b6d4">Attach my location</button>
              <button type="submit" class="btn">Post</button>
            </div>
          </form>
        </div>

        <!-- Feed -->
        <div class="card" style="margin-bottom:12px">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <strong>Problems Feed</strong>
            <div class="flex">
              <input id="search" class="input" placeholder="Search..." style="width:220px" />
              <select id="filterCategory" class="input" style="width:150px">
                <option value="all">All categories</option>
                <option value="plumbing">Plumbing</option>
                <option value="electrical">Electrical</option>
                <option value="tutoring">Tutoring</option>
                <option value="legal">Legal</option>
                <option value="health">Health</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>
          <div id="feed" style="margin-top:10px;max-height:520px;overflow:auto"></div>
          <div id="emptyFeed" class="muted hidden">No problems yet.</div>
        </div>
      </main>

      <aside class="right-column">
        <div class="card">
          <strong>Your Profile</strong>
          <div style="margin-top:8px">
            <div id="profileBox" class="muted">Sign in to manage profile</div>
            <div id="myPostsBox" class="hidden" style="margin-top:8px">
              <button id="btnMyPosts" class="btn" style="background:#7c3aed">My Posts</button>
            </div>
          </div>
        </div>
        <div class="card" style="margin-top:12px">
          <strong>How it works</strong>
          <ol style="padding-left:18px;margin:8px 0">
            <li>Post a problem</li>
            <li>Community answers</li>
            <li>Accept best answer to mark solved</li>
          </ol>
        </div>
      </aside>
    </div>
  </div>

  <!-- Detail Modal -->
  <div id="detailModal" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px">
    <div class="card" style="width:900px;max-height:90vh;overflow:auto">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <h3 id="detailTitle" style="margin:0">Problem</h3>
        <button id="closeDetail" class="btn" style="background:#ef4444">Close</button>
      </div>
      <div id="detailMeta" class="muted small" style="margin-top:8px"></div>
      <div id="detailImage" style="margin-top:8px"></div>
      <p id="detailDesc" style="white-space:pre-wrap"></p>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px">
        <strong>Answers</strong>
        <button id="btnRefresh" class="btn" style="background:#10b981">Refresh</button>
      </div>
      <div id="answersList" class="answers"></div>
      <div id="answerFormBox" style="margin-top:8px">
        <textarea id="answerText" class="input" placeholder="Write your answer..."></textarea>
        <div style="display:flex;gap:8px;margin-top:8px;align-items:center">
          <button id="btnAddAnswer" class="btn">Submit Answer</button>
          <button id="btnCloseProblem" class="btn" style="background:#ef4444">Report/Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Login Modal -->
  <div id="loginModal" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px">
    <div class="card" style="width:380px">
      <h3 style="margin:0">Sign In / Sign Up</h3>
      <input id="inputName" class="input" placeholder="Enter your name" style="margin-top:8px" />
      <input id="inputPhone" class="input" placeholder="Phone or email (optional)" style="margin-top:8px" />
      <div style="display:flex;gap:8px;margin-top:8px">
        <button id="btnDoLogin" class="btn">Continue</button>
        <button id="btnLogout" class="btn" style="background:#ef4444">Sign out</button>
      </div>
    </div>
  </div>

  <footer>Demo app — localStorage only</footer>

  <script>
    const STORAGE_KEY = 'cps_demo_v2'
    function loadState(){ try{ return JSON.parse(localStorage.getItem(STORAGE_KEY))||{users:[],currentUserId:null,problems:[]} }catch(e){return {users:[],currentUserId:null,problems:[]}} }
    function saveState(s){ localStorage.setItem(STORAGE_KEY,JSON.stringify(s)) }
    let state = loadState()
    function uid(p='id'){return p+'_'+Math.random().toString(36).slice(2,9)}
    function now(){return new Date().toISOString()}
    function currentUser(){return state.users.find(u=>u.id===state.currentUserId)}

    function signIn(name, contact){
      let u=state.users.find(x=>x.name===name)
      if(!u){u={id:uid('u'),name,contact,created_at:now()};state.users.push(u)}
      state.currentUserId=u.id;saveState(state);return u
    }
    function signOut(){state.currentUserId=null;saveState(state)}

    // Render who
    function renderWho(){
      const u=currentUser()
      if(u){document.getElementById('who').textContent=u.name;document.getElementById('profileBox').innerHTML=`<b>${u.name}</b>`;document.getElementById('myPostsBox').classList.remove('hidden')}
      else{document.getElementById('who').textContent='Not signed in';document.getElementById('profileBox').textContent='Sign in to manage profile';document.getElementById('myPostsBox').classList.add('hidden')}
    }

    // --- EVENTS ---
    document.getElementById('btnLogin').onclick=()=>{document.getElementById('loginModal').classList.remove('hidden')}
    document.getElementById('btnDoLogin').onclick=()=>{
      const name=document.getElementById('inputName').value.trim()
      const contact=document.getElementById('inputPhone').value.trim()
      if(!name){alert('Enter a name');return}
      const user=signIn(name,contact)
      if(user){
        document.getElementById('loginModal').classList.add('hidden')
        document.getElementById('inputName').value=''
        document.getElementById('inputPhone').value=''
        renderWho()
      }
    }
    document.getElementById('btnLogout').onclick=()=>{signOut();document.getElementById('loginModal').classList.add('hidden');renderWho()}

    // Click outside to close
    document.getElementById('loginModal').addEventListener('click',e=>{if(e.target.id==='loginModal')document.getElementById('loginModal').classList.add('hidden')})
    document.getElementById('detailModal').addEventListener('click',e=>{if(e.target.id==='detailModal')document.getElementById('detailModal').classList.add('hidden')})

    renderWho()
  </script>
</body>
</html>
19 days ago by Mr Tom