Building Your First HTML Page with Forms

Your First HTML Page

HTML stands for HyperText Markup Language. It's not a programming language like Python or Java; rather, it's a markup language used to structure content and give it meaning. It tells the browser that "this is a heading," "this is a paragraph," or "this is an image."

HTML works using tags, which are keywords surrounded by angle brackets, like <h1>. Most tags come in pairs: an opening tag (<h1>) and a closing tag (</h1>). Everything between the pair is affected by the tag.

Let's get a development environment set up so you can write and view your own HTML. We'll use Visual Studio Code (VS Code), a popular free code editor.

The boilerplate code you generated creates the fundamental structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

• <!DOCTYPE html>: Declares that this document is an HTML5 document.
• <html>: The root element that wraps all the content on the page.
• <head>: Contains meta-information about the document, such as its <title>, which appears in the browser tab. This content is not displayed on the page itself.
• <body>: Contains all the visible content of the page, like headings, paragraphs, images, and forms.

Structuring Content with Common Tags

Now that you have a basic page, let's add more content. Different tags are used to structure different types of content, such as text, lists, and images.

As you can see, by combining these tags, you can create a well-structured document. This is the foundation of every webpage you visit.

A Hacker's View of HTML: Images and Links

From a security perspective, things get interesting when HTML elements can load external resources or execute code. The <img> (image) and <a> (anchor/link) tags are classic examples.

These tags introduce attributes, which are extra pieces of information added to an opening tag, like src (source) for an image. They are always specified as name="value".

These examples give you a first glimpse into the mind of a bug bounty hunter. You're not just seeing HTML tags; you're seeing potential opportunities to inject code and control the behavior of the browser.

The Main Attack Surface: HTML Forms

The single most important area for a bug bounty hunter to understand in HTML is the <form> element. Forms are how users send data to the server. They contain input fields for usernames, passwords, search queries, comments, and more. Nearly every injection-style vulnerability, from XSS to SQL Injection, starts with an input field in a form.

The video you've been watching provides a great initial look at forms from a security angle.

To build on this, let's explore the wide variety of form controls you will encounter. A different resource provides a more detailed, developer-focused overview of the different input types.

Practice: Build a Login Form

Now it's time to put this all together. Using what you've learned, you can construct a simple but functional login form. Create a new index.html file (or clear your existing one) and use the following code as a template.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>

    <h1>Please Log In</h1>

    <form action="/login" method="post">
        <p>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </p>
        <p>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </p>
        <p>
            <button type="submit">Log In</button>
        </p>
    </form>

</body>
</html>

Let's break this down:

• We have a <form> that would (in a real app) send the data to a /login endpoint on the server.
• We use <label> for each input. The for attribute of the label links it to the id of the input, which is good for accessibility.
• We have an <input type="text"> for the username. The name attribute ("username") is the key that the server will use to identify this piece of data.
• We have an <input type="password"> which masks the user's typing.
• Finally, a <button type="submit"> creates the button that, when clicked, will send the form data to the server.

Save this file and open it in your browser. You've now built your first HTML form, a structure you will spend countless hours analyzing and testing as a bug bounty hunter.

Conclusion

In this lesson, we transitioned from the abstract client-server model to the concrete language of the web, HTML. You've learned how to structure a webpage and, most importantly, how to build the forms that serve as the primary interface between a user and a server's application logic.

Key Takeaways:

• HTML uses tags like <h1>, <p>, and <img> to give structure and meaning to web content.
• A standard HTML document is split into a <head> for metadata and a <body> for visible content.
• Forms (<form>) and their input elements (<input>, <textarea>, <select>) are how users submit data. For a security researcher, these are the primary points of interest on a page.
• Even simple tags like <img> and <a> can be abused to execute malicious code if user input is not handled securely, leading to vulnerabilities like XSS.

So far, our page is static. It has structure, but it doesn't do anything on its own. In our next lesson, we will introduce JavaScript, the language that breathes life into web pages. You'll learn how it can manipulate HTML on the fly, respond to user events, and why it is the key to understanding and executing most client-side attacks.