CLOSE

HTML Beginner Tutorial: Conclusion

You should now have a basic understanding of HTML structure, tags, attributes, elements and more. Below is a mixture of everything covered in this tutorial. Familiarize yourself with different tags, attributes and elements by creating your own pages with what you've learned.

<!DOCTYPE html>
<html>
    <head>
        <title>This is my page title.</title>
    </head>
    
    <body>
        <h1>My First Web Page</h1>
        
        <h2>What is this?</h2>
        <p>This is a page put together using HTML.</p>
        
        <h2>My favorite car brands</h2>
        <ul>
            <li>
                Honda and Models:
                
                <ol>
                    <li>S2000</li>
                    <li>Accord</li>
                    <li>Civic</li>
                </ol>
                
            </li>
            <li>Nissan</li>
            <li>Chevy</li>
        </ul>
        
        <h2>Where can I find all the information in the world?</h2>
        <p>Go to <a href="http://www.google.com">Google</a></p>
        
        <h2>OooO Planets</h2>
        <table>
            
            <tr>
                <th>Planet Name</th>
                <th>Planet Image</th>
                <th>Planet Link</th>
            </tr>
            
            <tr>
                <td>Earth</td>
                <td><img src="http://blog.softwareadvice.com/wp-content/uploads/2012/07/Earth-Thumbnail.png" alt="Earth"></td>
                <td><a href="https://en.wikipedia.org/wiki/Earth">Earth Information</a></td>
            </tr>
            
             <tr>
               	<td>Mars</td>
                <td><img src="http://realworldglobes.com/assets/images/thumbnails/2012_mars-a_01m_thumbnail.jpg" alt="Mars"></td>
                <td><a href="https://en.wikipedia.org/wiki/Mars">Mars Information</a></td>
            </tr>
            
             <tr>
                <td>Jupiter</td>
                <td><img src="https://s-media-cache-ak0.pinimg.com/236x/4b/e5/b9/4be5b9ae2b6674027cb0a7151b50cf42.jpg" alt="Jupiter"></td>
                <td><a href="https://en.wikipedia.org/wiki/Jupiter">Jupiter Information</a></td>
            </tr>
            
        </table>
        
        <h2>Table With Colspan</h2>
        <table border="1">
            <tr>
                <td colspan="2">This expands through columns 1 and 2</td>
                <td>Column 3</td>
            </tr>
            <tr>
                <td>Colum 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </table>
        
        <h2>Table With Rowspan</h2>
        <table border="1">
            <tr>
                <td rowspan="2">This expands into the second row</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
            <tr>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </table>
        
        <h2>Nested Table</h2>
        <table border="1" cellpadding="10">
            <tr>
                <td rowspan="2">
        
                Table 1 Col 1 Rowspan 2 with Nested Table 
                    <table border="1">
                        <tr>
                            
                            <td>Table 2 Row 1 Col 1</td>
                            <td>Table 2 Row 1 Col 2</td>
                            
                        </tr>
                        <tr>
                            
                            <td>Table 2 Row 2 Col 1</td>
                            <td>Table 2 Row 2 Col 2</td>
                            
                        </tr>
                    </table>
                </td>
                <td>Table 1 Row 1 Col 2</td>
                <td>Table 1 Row 1 Col 3</td>
            </tr>
            <tr>
                <td>Table 1 Row 2 Col 2</td>
                <td>Table 1 Row 2 Col 3</td>
            </tr>
        </table>
    </body>
</html>
Expand

Share This Tutorial

Link To This Tutorial

Tutorial URL
https://stepbystephtml.com/tutorial/15/html-beginner-tutorial

HTML Link

Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Amount

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.

HTML Link

Copyright 2019 Step By Step HTML. All Rights reserved.