Fless

Come join us for our next workshop

Thursday 16th March

Register your interest

HTML Resources

Part one: HTML basics exercises

In this section, you will be looking at a series of exercises to cover the basics of HTML while building your first page by yourself.

  • Create and open your first HTML empty file called exercises.html from your terminal.See the answer
    touch exercises.html
    open exercises.html
  • Add to your exercises.html webpage a body tag that prints your name to the screen (Hint: Rememeber that to see the changes on your page, you need to run open exercises.html from your terminal).See the answer
    <html>
        <body>This is my name</body>
    </html>
  • Set the title to your webpage to be "This is my own first webpage".See the answer
    <html>
        <title>My first webpage</title>
        <body>This is my name</body>
    </html>
  • Add a paragraph in the body of your webpage with some info.See the answer
    <html>
        <title>My first webpage</title>
        <body>This is my name
            <p>This is an image I really like </p>
        </body>
    </html>
  • Create an unordinated list in the body of your webpageSee the answer
    <html>
        <title>My first webpage</title>
        <body>This is my name
            <p>This is an image I really like </p>
            <ul>
                <li>First list item</li>
                <li>Second list item</li>
            </ul>
        </body>
    </html>
  • Import an image you like into your page (hint: you should take the image from somewhere in the internet to start with)See the answer
    <html>
        <title>My first webpage</title>
        <body>This is my name
            <p>This is an image I really like </p>
            <img src="https://fless.co.uk/img/first-session.Jll_j.jpg" alt="an image I really like"/>
            <ul>
                <li>First list item</li>
                <li>Second list item</li>
            </ul>
        </body>
    </html>
  • Embed a YouTube video in your page.See the answer
    <html>
        <title>My first webpage</title>
        <body> This is my name
            <p>This is an image I really like </p>
            <img src="https://fless.co.uk/img/first-session.Jll_j.jpg" alt="an image I really like"/>
            <p>This is a video I really like </p>
            <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k">
            </iframe>
            <ul>
                <li>First list item</li>
                <li>Second list item</li>
            </ul>
        </body>
    </html>
  • Add an ID to your video and a CLASS to your imageSee the answer
    <html>
        <title>My first webpage</title>
        <body> This is my name
            <p>This is an image I really like </p>
            <img class="images" src="https://fless.co.uk/img/first-session.Jll_j.jpg" alt="an image I really like"/>
            <p>This is a video I really like </p>
            <iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k">
            </iframe>
            <ul>
                <li>First list item</li>
                <li>Second list item</li>
            </ul>
        </body>
    </html>

If you got this far, well done! You have now covered some basic HTML markup exercises and your are probably ready to move to the next HTML assesment. You should now have a play with this QUIZ from w3schools.com.

Do not worry if you don't get everything right or if something does not make much sense, we will try and cover every question in the quiz with a video about HTML foundations and recaps.