A2 - HTML Intro

Setup

• From the Microsoft Store, search for and install Visual Studio Code
• When installed, open it up and install the Live Preview extension (I'll show you where to find this). Install the one with the BLUE icon.
• Run the update.bat file in your T: drive to get the required files for the assignment
• In Visual Studio Code, choose File --> Open Folder. Open:

  T:\<our_course>\<your_username>\Local\HTML
  

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

Explore

Open html-intro-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:

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.

Assignment Concepts

In our lesson we will talk about HTML tags, the general format of an HTML file, and then look at a few specific tags.

All the concepts you need to use are demonstrated in the html-intro-demo.html file. For more detailed explanation, here are a few links applicable to this lesson at the W3 Schools Website:

• HTML Introduction
• HTML Basic
• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Formatting
• HTML Lists

Your Task

Open the html-intro-assignment.html. Create your own webpage that includes the features listed below. The topic of the webpage can be anything of your choice, or it can be about nothing at all (just random words sentences!).

• The following structural tags: <p> and <h1>, and optionally <h2> through <h6> for subheadings
• The following formatting tags: <em> and <strong>
• The following list tags: <ul>, <ol> and <li> - remember <li> tags should only be found within <ul> or <ol> tags. You could optionally try nested lists.
• The following empty elements (ie, ones that only have a start tag): <br> and <hr>