Basics of HTML

 

Getting Started with HTML: Essential Elements and Examples

HTML (Hypertext Markup Language) is the foundation of web development. It provides the structure and layout of web pages and helps to define elements like headings, paragraphs, links, and images. In this blog post, we’ll explore the essential HTML elements with example code to help you start building your own web pages.

1. Basic Structure of an HTML Document

Every HTML document has a standard structure, beginning with the <!DOCTYPE html> declaration and followed by html, head, and body tags. Here’s the basic structure of an HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to HTML Basics</h1>
    <p>This is a paragraph on my first webpage.</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html>: The root element that wraps all HTML content.
  • <head>: Contains meta-information, like the page title, which is shown in the browser tab.
  • <title>: Sets the title of the page.
  • <body>: Contains all the content displayed on the web page.

2. Headings (<h1> to <h6>)

Headings are essential for organizing content. HTML provides six heading tags, from <h1> (most important) to <h6> (least important).

<h1>This is a Main Heading</h1>
<h2>This is a Sub-heading</h2>
<h3>This is a Sub-sub-heading</h3>

3. Paragraphs (<p>)

The <p> tag is used for adding paragraphs.

<p>This is a paragraph. HTML paragraphs are automatically separated by a small margin.</p>

4. Links (<a>)

Links are created using the <a> tag, which has an href attribute to define the URL.

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

5. Images (<img>)

The <img> tag displays images on a webpage. The src attribute specifies the image source, and the alt attribute provides alternate text.

<img src="image.jpg" alt="A descriptive text for the image">

6. Lists

HTML supports both ordered (<ol>) and unordered (<ul>) lists. Each list item is wrapped in <li> tags.

Unordered List (bulleted list):
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
Ordered List (numbered list):
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

7. Divisions (<div>) and Spans (<span>)

  • <div>: A block-level container, often used for layout purposes.

<div>
    <h2>Section Title</h2>
    <p>This is a section of content.</p>
</div>
<span>: An inline container for text or small groups of elements, often used to style specific portions of text.
<p>This is a <span style="color: blue;">blue text</span> inside a paragraph.</p>

8. Tables (<table>)

Tables are used to display data in rows and columns.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
    </tr>
</table>
  • <table>: Defines the table.
  • <tr>: Defines a row.
  • <th>: Defines a header cell (bold and centered).
  • <td>: Defines a standard cell.

    • 9. Forms (<form>)

    Forms allow users to submit data. Here’s an example with text and submit inputs.

    <form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <input type="submit" value="Submit">
    </form>

    10. Comments

    Comments in HTML are written within <!-- -->. They’re not displayed in the browser but help document the code.

    <!-- This is a comment -->
    <p>This is a paragraph.</p>

    Example:
    <!DOCTYPE html>
    <html>
    <head>
        <title>My Simple Web Page</title>
    </head>
    <body>

        <!-- Header Section -->
        <header>
            <h1>Welcome to My Web Page</h1>
            <p>This is a simple webpage using basic HTML elements.</p>
        </header>

        <!-- Navigation Section -->
        <nav>
            <a href="#about">About</a> |
            <a href="#services">Services</a> |
            <a href="#contact">Contact</a>
        </nav>

        <!-- Main Content Section -->
        <main>
            <section id="about">
                <h2>About Me</h2>
                <p>Hello! I am a web development enthusiast learning HTML. This section contains some basic information about me.</p>
            </section>

            <section id="services">
                <h2>My Services</h2>
                <ul>
                    <li>Web Design</li>
                    <li>Content Creation</li>
                    <li>SEO Optimization</li>
                </ul>
            </section>
        </main>

        <!-- Contact Section -->
        <section id="contact">
            <h2>Contact Me</h2>
            <p>You can reach me at <a href="mailto:example@example.com">example@example.com</a>.</p>
        </section>

        <!-- Footer Section -->
        <footer>
            <p>&copy; 2024 My Simple Web Page</p>
        </footer>

    </body>
    </html>


    Comments

    Post a Comment

    Popular posts from this blog

    Foundations Of Computing: From Hardware Essentials To Web Design GXEST203 2024 scheme Dr Binu V P

    About Me  - Dr Binu V P Syllabus Scheme and Assessments Reference Invitation to Computer Science   G. Michael Schneider, Judith Gersting The Architecture of Computer Hardware, Systems Software, & Networking: Irv Englander Linux For Developers   William Rothwell Teach Yourself HTML, CSS and JavaScript   Julie C. Meloni Jennifer Kyrnin Module-1 Module-2 Module-3 Introduction to computer system software- operating systems Familiarization of basic linux commands ( visit my IT workshop blog for more) Familiarization of basic windows commands Computer Communications     LAN, MAN and WAN      Client/Server Networks      Peer-to-Peer Networks     Network  Topologies     IP Address     DHCP     NAT     Network Security ( Desktop and Perimeter)     DNS     VPN     Routers     Client Server      Internet   ...
    Read more

    Introduction to Computer System Software and Operating Systems

      Introduction to Computer System Software and Operating Systems 1. Introduction to System Software System software is a type of computer program designed to manage hardware and provide a platform for running application software. It acts as an intermediary between the computer hardware and the user applications, ensuring smooth and efficient operation of the system. Types of System Software: Operating Systems (OS): The most essential software that manages computer hardware and software resources. Utility Programs: Software designed to help in system maintenance and optimization (e.g., antivirus, disk cleanup tools). Device Drivers: Programs that allow the operating system to communicate with hardware components (e.g., printer drivers, graphics card drivers). Firmware: Low-level software embedded in hardware components, providing essential control functions. 2. What is an Operating System? An Operating System (OS) is the primary system software that manages all the hardware a...
    Read more