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

620

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

4 Answers

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.

9 months ago by petr

Open a text editor: You can use any text editor like Notepad (Windows), TextEdit (Mac), or Sublime Text.
Create a new file: Save the file with an .html extension, for example, myfirstwebpage.html.
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

Headings: Use <h1>, <h2>, <h3>, etc. to create headings.

<h1>Welcome to My First Webpage</h1>

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.

8 months ago by Abhigyan Pandey

index.html

<!DOCTYPE HTML

8 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>

3 days ago by Rushi Chohla