Skip to content

A1 - Intro to HTML

This assignment will give you a gentle introduction to HTML - the foundation of all websites.

Setup

  • In your Google Drive folder for this class, double click on the update file, which will download the required files for this assignment.
  • From the Windows Start menu, search for and open Visual Studio Code. If it's not installed, you can install it from the Company Portal or the Microsoft Store. I can help you with this if needed.
  • Once Visual Studio Code is open, install the Live Preview extension (I'll show you where to find this). Install the one with the BLUE icon.
  • From the File Menu in Visual Studio code, open the following: 
    T:\<our_course>\<your_username>\Local\Unit 2 - Web Design\A1

There should be two files you can open: a1-demo.html and a1.html.

Explore

Open a1-demo.html. You'll see a bunch of code which you probably won't understand. This is HTML code which is interpreted by the web browser. To see how the page will be rendered by the browser, click the preview icon near the top right of the screen. It looks like this: Preview Icon

If you have this all working properly, you should now be able to edit code on the left side of the screen, while seeing it being rendered on the right side. Feel free to play around with this file if you'd like. If you want to revert to the original, just delete the file and run the update again.

A Quick HTML Primer

When you write text in an HTML file, your browser will display it unformatted, even ignoring any line breaks you have inserted into the file. To format the text, we use HTML tags. Any section of text we want formatted needs to go between a set of HTML start tags and end tags.

A start tag looks like this: 

<some_instruction>

An end tag looks like this: 

</some_instruction>

The only different between the two is the slash in the end tag.

We will learn the following sets of tags:

  • <p>Paragraph text</p> - starts and ends a paragraph
  • <h1>Header text</h1> - starts and ends a heading
  • <strong>Bold text</strong> - starts and ends bold text
  • <em>Italic text</em> - starts and ends italic text

We will also look at the <br> tag, which inserts a line break. Unlike the other four, this one doesn't require an end tag.

Take a moment to look for these tags within the a1-demo.html file, and try to make sense of how they affect the rendered document.

Your Task

As you may have noticed, the demo file contains a set of song lyrics. Your task will be to create a file containing a set of song lyrics of your choice, mimicking the structure of the demo file.

Step 1 - Change the header

In a1.html, change the text within the <h1></h1> tags to the title of the song you be using.

Step 2 - Paste in the lyics, unformatted

Find the lyrics of the song you chose online, and copy them. In a1.html, paste the lyrics where indicated.

Step 3 - Create <p> tags

Surround each section of lyrics (for example, each verse, chorus, etc) with a set of <p></p> tags. This should cause each section to appear in its own paragraph.

Step 4 - Add line breaks

At the end of every line, except for the last line in each paragraph, add a <br> tag. The lines should now be properly laid out in the rendered version.

Optional Extension

At the end of the demo, both a link and an image have been added. See if you can do the same on your page. Your image file will need to be in the same folder as your HTML file. For more information see: