HTML Tutorial: First Steps

on

 

Introduction

HTML (HyperText Markup Language) is the foundation of web development. It structures web pages by using elements and tags. This tutorial will guide you through the basics of HTML, helping you create your first webpage.


What is HTML?

HTML is a markup language used to structure content on the web. It consists of a series of elements represented by tags. These tags tell the browser how to display the content.

Basic Structure of an HTML Document

An HTML document follows a specific structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

Explanation:

  • <!DOCTYPE html>: Declares the document type.

  • <html>: The root element.

  • <head>: Contains meta-information and the page title.

  • <title>: Sets the title of the webpage.

  • <body>: Contains the content displayed on the webpage.

  • <h1>: A heading tag.

  • <p>: A paragraph tag.


Common HTML Elements

Headings

HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

Paragraphs and Text Formatting

<p>This is a paragraph.</p>
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>

Links

Links allow navigation between web pages:

<a href="https://www.example.com">Visit Example</a>

Images

You can add images using the <img> tag:

<img src="image.jpg" alt="Description of image">

Lists

Ordered List

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Unordered List

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

Tables

Tables organize data in rows and columns:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
</table>

Forms

Forms allow user input:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

This tutorial covered the basics of HTML. You now know how to structure a webpage, use headings, paragraphs, lists, tables, and forms. To further enhance your webpages, consider learning CSS and JavaScript next!

Happy coding!

Comments

Post a Comment