~ Basic Tags~ * : The root element. * : Contains meta-information (not displayed). * : Sets the page title (in the browser tab). * <body>: Contains the visible content. * <h1> to <h6>: Headings (different sizes). * <p>: Paragraphs. * <a>: Links (e.g., <a href="https://www.example.com">Visit Example</a>). * <img>: Images (e.g., <img src="image.jpg" alt="Description">). * <div>: A generic container. * <span>: An inline container. * Example: <!DOCTYPE html> <html> <head> <title>My First Webpage

Welcome!

This is a paragraph.

My Image Part 2: CSS - Styling Your Webpage * What is CSS? Cascading Style Sheets styles the HTML elements (colors, fonts, layout). ~ Ways to add CSS~ * Inline:

This is blue.

(Least recommended) * Internal: Inside

HTML Pretty Printer


Formatted HTML:



    



Explanation:
 * textarea#htmlInput: This is where the user will paste their unformatted HTML.
 * button#prettyPrintButton: This button will trigger the JavaScript function to format the HTML.
 * pre#output: This is where the formatted HTML will be displayed.
 * script src="script.js": This line links our JavaScript file.
Step 2: Create the JavaScript Logic (script.js)
document.getElementById('prettyPrintButton').addEventListener('click', function() {
    const htmlInput = document.getElementById('htmlInput').value;
    const outputElement = document.getElementById('output');

    try {
        const formattedHTML = prettyPrint(htmlInput);
        outputElement.textContent = formattedHTML;
    } catch (error) {
        outputElement.textContent = "Error: Invalid HTML";
        console.error("Pretty Print Error:", error);
    }
});

function prettyPrint(html) {
    let tab = '\t';
    let result = '';
    let indent = '';

    html.split(/>\s* {
        if (element.match(/^\s*$/)) {
          return;
        }

        if (element.match(/^<(\w+)\s*>/)) {
            result += indent + element + '>\n';
            indent += tab;
        } else if (element.match(/^<\/\w+>/)) {
            indent = indent.substring(0, indent.length - tab.length);
            result += indent + element + '>\n';
        } else {
            result += indent + element + (element.substr(element.length-1,1) === '>' ? '\n' : '>\n');
        }

    });
    return result.replace(/<([^\/][^>]+)><\/\1>/g, "<$1>");
}

Explanation:
 * Event Listener:
   * We add an event listener to the "Pretty Print" button.
   * When the button is clicked, the code inside the listener will execute.
 * Get Input:
   * We get the HTML from the textarea#htmlInput.
   * We also get the output element.
 * Error Handling:
   * The code is wrapped in a try catch block. If the prettyPrint function causes an error, the catch block will display "Error: Invalid HTML" and console log the error.
 * prettyPrint(html) Function:
   * This function takes the HTML as input and returns the formatted HTML.
   * It uses a simple logic:
     * Splits the HTML into elements.
     * Adds indentation based on opening and closing tags.
     * Removes empty tags.
   * It uses a very basic pretty printer. For more complex html you will need to find a more robust solution.
Step 3: Open the HTML File
 * Save both index.html and script.js in the same directory.
 * Open index.html in your web browser.
How to Use:
 * Paste your unformatted HTML into the text area.
 * Click the "Pretty Print" button.
 * The formatted HTML will appear in the pre element below.
Important Notes:
 * This is a basic HTML pretty printer. It may not handle all edge cases or complex HTML structures perfectly.
 * For a more robust pretty printer, consider using existing libraries or tools that specialize in HTML parsing and formatting. There are many Javascript libraries that will do a better job.
 * This code does not include any security measures. If you are going to use this in a production environment, be sure to sanitize the input to prevent XSS attacks.
 * This code is primarily for learning purposes.