1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
44. 

HTML Examples: A Comprehensive Guide

Updated on 27/08/2024437 Views
Content

The modern world relies heavily on the internet for everything. Whether ordering groceries, looking up services, or seeking a doctor’s appointment, almost everything can be done online. This underscores the growing demand for web development jobs. As a web developer with over a decade of experience, I can guarantee that learning basic HTML is a crucial step to building a career in this sector. HTML examples can help you learn the language better and help you build interactive and well-organized websites. 

I’ve crafted this tutorial to help you navigate the basic concepts of HTML using HTML example programs. 

Font Color Change Example

To make your web page more visually engaging, you can opt to color your text. We will look at the different types of color codes you can use to color your text with the help of sample HTML examples.

font color change HTML examples

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Color Fonts Example</title>

</head>

<body>

    <h1 style="color: blue;">This is a heading in blue</h1>

    <h2 style="color: #89da98;">This is a heading in light green</h2>

    <h3 style="color: rgb(255, 3, 255);">This is a heading in pink</h3>

    <p style="color: #ab4411;">This is a paragraph in brown</p>

    <p style="color: rgb(255, 0, 255);">This is a paragraph in magenta</p>

    <p style="color: hsl(120, 100%, 50%);">This is a paragraph in lime</p>

</body>

</html>

All the headings and paragraphs use different types of color codes. The types of color codes used in the above example are:

  • blue: color: blue;
  • Light Green: color:  #89da98; (hex color code)
  • Pink: color: rgb(255, 3, 255); (RGB color code)
  • Brown: color: #ab4411; (hex color code)
  • Magenta: color: rgb(255, 0, 255); (RGB color code)
  • Lime: color: hsl(120, 100%, 50%); (HSL color code)

Table Example in HTML

Another important type of element commonly found in webpages is tables. They are commonly used when we want to showcase a lot of data in a systemic and concise manner. Here, we will look at some sample HTML examples of table usage.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Table Example</title>

    <style>

        table {

            width: 100%;

            border-collapse: collapse;

        }

        th, td {

            border: 1px solid #ccc;

            padding: 8px;

            text-align: left;

        }

    </style>

</head>

<body>

    <h2> HTML Table Example (Schedule of an Event) </h2>

    <table border="1" cellpadding="5" cellspacing="0">

        <caption>Monthly Expenses</caption>

        <thead>

            <tr>

                <th scope="col">Date</th>

                <th scope="col">Category</th>

                <th scope="col">Performaces</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>2023-01-05</td>

                <td>Rock</td>

                <td>Eagles</td>

            </tr>

            <tr>

                <td>2023-01-10</td>

                <td> Blues</td>

                <td> John Mayer</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="2" align="right">2023-01-11</td>

                <td> N.A. </td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

In this simple HTML example of a table, <tfoot> and <thead> tags are used for giving the footer and heading to the table.

Here, let me talk about the attributes used in this example:

  • border="1": Sets the border of the table cells to one pixel.
  • cellpadding="5" adds 5 pixels of padding to each cell.
  • cellspacing="0": Sets no spacing between cells.
  • CSS is used to style the table, including border collapse, cell borders, padding, and text alignment.

div tag in HTML example

The concept of div is very important in HTML. Here are some key pointers about it.

  • The <div> tag creates a division or segment in an HTML document.
  •  The <div> tag serves as a container for HTML elements, which are then decorated with CSS or changed using JavaScript.
  •  The <div> tag can be readily customized using the class or id attributes.
  • The <div> tag can include any type of material. 

Let me demonstrate <div> tag usage in HTML with an example.

div tag example in HTML

output

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Div Tag Example in HTML</title>

    <style>

        .container {

            width: 80%;

            margin: 0 auto;

            padding: 20px;

            background-color: #acf0f0;

            border: 1px solid #ccc;

        }

        .box {

            width: 100px;

            height: 100px;

            background-color: #ad0000;

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Div Tag Example</h1>

        <p>This is an example of using the div tag in HTML.</p>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </div>

</body>

</html>

Here, we have created one parent div, which inherits the properties of the class container. This div houses an h1 element, a paragraph element, and three div elements. The daughter elements inherit properties of the box class.

Registration Form HTML Example

I am sure you are accustomed to filling out registration forms online. Here, I will explain how to create one using this HTML example template.

Code:

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Registration Form</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            padding: 20px;

        }

        .container {

            max-width: 400px;

            margin: 0 auto;

            background-color: #ADD8E6;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .form-group {

            margin-bottom: 15px;

        }

        .form-group label {

            display: block;

            margin-bottom: 5px;

        }

        .form-group input {

            width: 100%;

            padding: 8px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

        .btn {

            background-color: #4CAF50;

            color: #fff;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        .btn:hover {

            background-color: #45a049;

        }

    </style>

</head>

<body>

    <div class="container">

        <h2>Registration Form Example</h2>

        <form>

            <div class="form-group">

                <label for="username">Username:</label>

                <input type="text" id="username" name="username" required>

            </div>

            <div class="form-group">

                <label for="email">Email:</label>

                <input type="email" id="email" name="email" required>

            </div>

            <div class="form-group">

                <label for="password">Password:</label>

                <input type="password" id="password" name="password" required>

            </div>

            <div class="form-group">

                <label for="confirm-password">Confirm Password:</label>

                <input type="password" id="confirm-password" name="confirm-password" required>

            </div>

            <div class="form-group">

                <label for="dob">Date of Birth:</label>

                <input type="date" id="dob" name="dob" required>

            </div>

            <div class="form-group">

                <input type="submit" value="Register" class="btn">

            </div>

        </form>

    </div>

</body>

</html>

In this example of registration form HTML example program, there are four fields where input is required from the user's side. They are username, date of birth, password, and email. We have styled the main div with CSS, giving it a nice light blue background color. We have also used a hover effect on the submit button where it changes color when the user's cursor is hovering over the button.

Hyperlink HTML Example

Hyperlinking basically means linking an HTML element to another web page. HTML elements like text, images, and GIFs can be hyperlinked. Now, let us look at how we can hyperlink HTML examples with source code for each element one by one.

Headings

Hyperlinking heading in HTML

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Heading Hyperlink Example</title>

</head>

<body>

    <h1><a href="https://www.example.com"> This Heading is Hyperlinked. Click here.</a></h1>

    <p> This is a paragraph below the heading which is not hyperlinked. </p>

</body>

</html>

The above code clearly shows that the heading element “This Heading is Hyperlinked” is hyperlinked to the website https://www.example.com.

Paragraph

Hyperlinking paragraphs in HTML

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Paragraph Hyperlink Example</title>

</head>

<body>

    <p>This is a paragraph which is not hyperlinked. <a href="https://www.example.com">This part is hyperlinked.</a></p>

    <p>Another paragraph below the hyperlink which is not hyperlinked.</p>

</body>

</html>

In the above HTML example website, it is evident that the part of the paragraph that says “This part is hyperlinked” is linked to https://www.example.com.

In Conclusion

HTML is definitely a valuable skill to have in your arsenal. Although the scope of HTML programming is vast, we can aim to study it effectively. HTML examples are a great place to learn from and improve your skills. We have discussed different HTML examples in this tutorial. However, you choose your own HTML examples for practice.

The HTML examples in this tutorial can be only used as a reference and while that helps, it is always better to learn the more complex topics from a certified course. I would recommend checking out courses from upGrad. Their courses are certified and are in collaboration with some of the best universities around the world. Their courses are curated by the best faculty around in this field. 

Frequently Asked Questions

  1. What is HTML with an example?

HTML, or HyperText Markup Language, is a coding language for creating web pages. It uses tags to organize content and define elements on a website. Here is a simple HTML example:

<!DOCTYPE html>

<html>

<head>

  <title> HTML Web page Example </title>

</head>

<body>

  <h1>Welcome to my website!</h1>

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

  <a href="https://www.example.com"> Click here to visit Example </a>

</body>

</html>

  1. Are there HTML example templates available?

There are many HTML sample templates available to help you get started on developing web pages. These templates provide pre-defined structures and styles that can be customized to meet your specific needs. 

  1. How to write code examples in HTML?

To create code examples in HTML. Use the <code> tag to insert code snippets into paragraphs. Use the <pre> tag to show preformatted code blocks with whitespace and line breaks retained.

  1. How to create a website using an HTML example?

Creating a website using an HTML example entails numerous steps, including establishing the HTML framework, adding content, styling with CSS, and potentially adding interaction with JavaScript. 

  1. Why are HTML examples important?

HTML examples are important because they help you learn coding in an easy and efficient manner. They serve as a template and show industry standard best practices.

  1. Where can I find HTML examples?

Short HTML examples can be found on websites such as W3Schools, MDN Web Docs, Bootstrap's documentation, GitHub repositories, and a variety of web development tutorials and forums.

  1. What are some common HTML examples?

Some common HTML examples include creating links, adding images, using headings, creating lists, inserting paragraphs, and adding forms.

  1. How can I use HTML examples to learn?

You can use HTML examples to start learning effectively. You can go see documentation, see how industry-standard code is written, and notice best practices.

Rohan Vats

Rohan Vats

Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...