HTML Tutorial for Beginners

on

 

HTML Tutorial for Beginners

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure of a webpage and is the foundation of all websites.

html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Basic HTML Structure

Every HTML document has these essential components:

  1. <!DOCTYPE html> - Declares the document type

  2. <html> - The root element of an HTML page

  3. <head> - Contains meta information about the document

  4. <title> - Specifies a title for the document

  5. <body> - Contains the visible page content

Common HTML Elements

Headings

html
Copy
Download
Run
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Third-level heading</h3>
<!-- Goes up to h6 -->

Paragraphs and Text Formatting

html
Copy
Download
Run
<p>This is a paragraph.</p>
<p>This text is <strong>bold</strong> and this is <em>italic</em>.</p>
<p>This is <u>underlined</u> and this is <s>strikethrough</s>.</p>

Links

html
Copy
Download
Run
<a href="https://www.example.com">Visit Example.com</a>
<a href="page2.html">Go to Page 2</a>
<a href="#section2">Jump to Section 2</a> (internal link)

Images

html
Copy
Download
Run
<img src="image.jpg" alt="Description of image" width="200" height="150">

Lists

Ordered List:

html
Copy
Download
Run
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Unordered List:

html
Copy
Download
Run
<ul>
    <li>Item</li>
    <li>Another item</li>
</ul>

Tables

html
Copy
Download
Run
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Forms

html
Copy
Download
Run
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
    
    <input type="submit" value="Submit">
</form>

Semantic HTML5 Elements

Modern HTML includes semantic elements that describe their meaning:

html
Copy
Download
Run
<header>Page header content</header>
<nav>Navigation links</nav>
<main>Main content of the document</main>
<section>A section of content</section>
<article>Independent, self-contained content</article>
<aside>Content aside from the main content</aside>
<footer>Page footer content</footer>

HTML Attributes

Most elements can have attributes that provide additional information:

html
Copy
Download
Run
<a href="https://example.com" target="_blank" title="Visit Example">Link</a>
<img src="photo.jpg" alt="Description" width="500">
<p class="intro" id="first-paragraph">Text</p>

Comments

html
Copy
Download
Run
<!-- This is a comment that won't be displayed -->
<p>Visible content</p>

Complete Example Page

html
Copy
Download
Run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#home">Home</a> |
            <a href="#about">About</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the home section content.</p>
            <img src="welcome.jpg" alt="Welcome image">
        </section>
        
        <section id="about">
            <h2>About Us</h2>
            <p>Learn more about our company.</p>
            <ul>
                <li>Founded in 2020</li>
                <li>10 employees</li>
                <li>Based in New York</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Comments

Post a Comment