HTML Tutorial

Step 1: Basic Structure of an HTML Document

The first thing in any HTML document is the DOCTYPE declaration, followed by the basic structure:

                
                  <meta charset="UTF-8">

                  <title>Your Page Title</title>

                  <h1>Welcome to My Page!</h1>

Step 2: Adding a Header

The <header> tag is used to create a header section:

                <header>

                  <h1>Welcome!</h1>

                  <p>This is my first website.</p>

                </header>

The "href" parameter is for linking files and other websites, so it directly takes information from there, or sends the user there.

Step 3: Creating Links

Use the <a> tag to create hyperlinks:

<a href="https://example.com">Click here</a>

Step 4: Adding a Footer

The <footer> tag is used to display information at the bottom of the page:

                <footer>

                  <p>Created with ❤️ by You</p>

                </footer>

Step 5: Adding Images

Use the <img> tag to display images:

The "src" parameter you give to the tag and much more, specifies the url which the information will be gotten from.

Step 5: Adding Images

Use the <img> tag to display images:

Step 6: Adding Lists

Lists are a great way to organize content. Here's how you can create ordered and unordered lists:

            <ul>

              <li>HTML Basics</li>

              <li>CSS Basics</li>

              <li>JavaScript Basics</li>

            </ul>

            <ol>

              <li>Step 1: Learn HTML</li>

              <li>Step 2: Learn CSS</li>

              <li>Step 3: Learn JavaScript</li>

            </ol>

Step 7: Adding Forms

Forms allow user interaction with your site. Here's an example:

            <form action="/submit" method="post">

              <label for="name">Name:</label>

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

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

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

              <button type="submit">Submit</button>

            </form>

Step 8: Adding Tables

Tables are used to display data in a structured format:

            <table border="1">

              <tr>

                <th>Name</th>

                <th>Age</th>

                <th>Occupation</th>

              </tr>

              <tr>

                <td>John</td>

                <td>25</td>

                <td>Developer</td>

              </tr>

              <tr>

                <td>Jane</td>

                <td>30</td>

                <td>Designer</td>

              </tr>

            </table>

Step 9: Adding Multimedia

Adding audio and video can make your website more engaging. Here's how:

            <audio controls>

              <source src="audio.mp3" type="audio/mpeg">

              Your browser does not support the audio element.

            </audio>

            <video controls width="300">

              <source src="video.mp4" type="video/mp4">

              Your browser does not support the video element.

            </video>

Step 10: Adding Inline Styles

Inline styles allow you to add quick, specific styles to elements:

<p style="color:blue; font-size:20px;">This is a styled paragraph.</p>