0.2 HTML basics

Rashmin's photo
Rashmin
·

3 min read

0.2 HTML basics

Welcome back, fellow coders! 🎉 In this blog, we're diving headfirst into HTML basics – the language that gives structure and meaning to your web content. Before we jump into coding our simple Zerodha-inspired interface, let's grasp two essential jargons: tags and attributes.

Tags: The Building Blocks

In HTML, everything is wrapped in tags. Tags are like containers that define the structure of your content. They come in pairs – an opening tag and a closing tag. Here's a simple example:

<p>This is a paragraph.</p>

In this snippet, <p> is the opening tag, and </p> is the closing tag. The content – "This is a paragraph" – is enclosed between them.

Attributes: Adding Extra Information

Attributes provide additional information about an HTML element. They are always included in the opening tag. Let's look at an example using the <img> tag:

<img src="image.jpg" alt="A beautiful landscape">

In this case, src and alt are attributes. They tell the browser the image file to display (src) and provide alternative text (alt) for accessibility.

Let's Code: Setting Up Our Workspace

  1. Create a Folder: Make a new folder on your machine. Let's call it "Zerodha-Interface."

  2. Open in VSCode: Open Visual Studio Code, and go to File > Open Folder.... Select the "Zerodha-Interface" folder.

Exploring Essential Tags

Now, let's understand a few fundamental HTML tags we'll be using for our Zerodha-inspired interface:

  • <!DOCTYPE html>: Declares the document type and version of HTML.

  • <html>: The root element of an HTML page.

  • <head>: Contains meta-information about the HTML document.

  • <title>: Sets the title of the page (what appears on the browser tab).

  • <body>: Contains the content of the HTML document.

  • <div>: A container that groups other HTML elements.

  • <img>: Embeds an image.

  • <a>: Creates hyperlinks.

Your Code Challenge

Check out the code with these basic HTML elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zerodha Landing</title>
</head>
<body>
    <div>
        <img width=200 src="https://zerodha.com/static/images/logo.svg" alt="zerodha logo">
        <span>Signup</span>
        <span>About</span>
        <span>Products</span>
        <span>Pricing</span>
        <span>Support</span>
    </div>
    <br></br>
    <br></br>
    <br></br>
    <center>
    <img style="width: 60%; height: auto;" src="https://zerodha.com/static/images/landing.png" alt="Landing page image">
    </center>
    <br></br>
    <br></br>
    <br></br>
    <center>
    <h1>Invest in everything</h1>
    <h3>Online platform to invest in stocks, derivatives, mutual funds, and more</h3>
    <br></br>
    <button>Sign up now</button>
    </center>
</body>
</html>

But here's the ugly truth: this HTML file is the structure of Zerodha in the ugliest way possible. What's the problem? It looks bad. How to make it look good? Well, that's where CSS comes in! In our next blog, we'll transform this bland page into a visually appealing Zerodha-inspired interface using CSS. Get ready to make it look good! Stay tuned, and happy coding!

0.3 CSS basics - https://rashmin.hashnode.dev/dev-0-3

Home article - https://rashmin.hashnode.dev/dev

HTMLCSSfull stack