Getting started with HTML


Slides

An attempt will be made to provide slides for each lecture: Today's Lecture

Additional Info

In Class Exercises (ICEs)

Part 1: Adding HTML Tags - Instructor Walkthrough

NOTE: Before starting it is HIGHLY RECOMMENDED that you create a BIT116 folder to save your work on a USB Thumb Drive, an External Portable Hard Drive, or your own personal Laptop or Notebook computer. After creating this folder, open it an create another folder called Lecture01. Your should save all your work in this BIT116 folder in sub-folders named after the current Lecture (e.g., Lecture01, Lecture02, Lecture03, and so on). You will also be storing your Assignments in this folder.

The instructor will walk you through these first couple of exercises - you should watch what the instructor is doing and then do the following (after the instructor has demonstrated the work).

  1. Examine and download the 'starter file' for this exercise
    1. Click on the ICE FILE #1 link here to open it in a browser.
      You'll notice that the only thing you see is the word 'Hiya'.
    2. Right-click on the blank browser page and select either View Page Source (Firefox, Chrome) or View Source (Internet Explorer). You'll see that there is very little code in this file. You're going to change that!
    3. Right-click on the ICE FILE #1 link here and save the file locally (using either Save Link As... or Save Target As...) to your BIT116 work folder (see note above).
  2. Adding a couple of elements to the file using Brackets.io
    1. First, start the Brackets.io program.  You should see something that looks like this (although you may not have anything in your left-hand panel:
    2. Open the ice01_html01.html file using the File >> Open menu item in Brackets.io (or other text editor of your choice).
    3. Next, open that same file in a web browser of your choice (we'll be using Chrome in this class). 
      You can do this by double-clicking on the .HTML file in Windows/Mac/Linux.
      At this point, things should look more-or-less like this:
    4. Once you've got the web page open in both Brackets and your web browser, make sure that you can see both the Brackets.io window and the Chrome window.
    5. In Brackets: try changing the word 'Hiya!' to something else (maybe 'Hello') AND THEN SAVE THE FILE
    6. In your web browser: Refresh / Reload the page.   You can do this by clicking on the 'reload' button, typically located right next to the address bar:
      Reload/refresh button is to the left of the web browser's address bar
      1. On Windows, the 'F5' key typically does a 'soft refresh (reload)', meaning that it will ask the web server if the files have changed.  Sometimes the server/browser can get confused about what files have changed, and then fail to reload the files even though they have, in fact, changed.

        Holding down the Control key and pressing F5 (typically written as Control+F5, or Ctl+F5) will do a 'hard refresh', which will force the browser to reload all the files from the server no matter what.  In general this is the better route to go, in order to ensure that you have the most recent copy in your browser.

        tl;dr: Press Control+F5 to make sure that you've reloaded the web page.
    7. In this class you will modify your web pages (including the JavaScript parts of the web pages) by first editing the file in Brackets.io, then viewing the updated page in your web browser.
    8. In between the <title></title> tags, add Lecture 01 Ice 01.
    9. In the <body> add the following elements:
      • <h1>Heading 1</h1>
      • <p>Paragraph</p>
    10. You'll notice in Brackets.io that it offers a popup menu feature that offers you various tag selections depending on what letters you started to type in. It will also Auto-Complete your closing tags. In the long run, these features can save you a lot of time and work!
      • Remember that the quizzes and exams are on paper, only.
        As you know, paper does not support the Auto-Complete feature (this is one of the reasons why the exams are given on paper - the instructor wants to know how much you know, not just how well you can use the software you've got).

        Make sure that you can do this all on your own - definitely use the AutoComplete to help figure out things, to help you remember things, and to make your work go faster, but make sure to practice writing out stuff yourself, by hand, without the help of AutoComplete.
    11. Remember to Save your work in Brackets by clicking the File >> Save menu option, or by using the keyboard shortcut (Control+S on Windows), then hard refresh and the page in the web browser to see your work!
  3. One last warning

This first walkthrough covered the topic of 'How to edit an HTML page using Brackets.io' in A LOT of detail.
Normally these walkthroughs will NOT cover the material in this much detail.
Typically the instructor will cover some of the material in class, and you will be expected to experiment with stuff on your own in order to determine which questions to ask so that you'll learn the material that you need to learn.

Part 1-A: Using the 'LivePreview' feature in Brackets

  1. The Brackets editor has this nice feature which shows you changes in your web page immediately, as you're making changes to the source code.  This is called 'LivePreview'. In the image below you'll see three big, bright, red arrows pointing at something that looks a little bit like a lightning bolt (or the letter N, maybe).  Click on that and Brackets will launch the Chrome web browser and show you what your web page will look like when it's rendered by a browser.

    1. You will need to install Chrome in order for this to work. Click here to download and install chrome: https://www.google.com/chrome/browser/desktop/index.html
  2. Once you click the 'Lightning Bolt' symbol you should see something like the picture below.  Specifically, you will see Brackets.io AND you will see a Chrome web browser window.
    Notice that the lightning arrow is now orange (which tells you that Brackets is doing it's Live Preview right now). 
  3. Try changing the HTML in Brackets - change 'Hiya!' to be 'Hello!'
    As you make the changes, you should see the web page in Chrome change at the same time. 
    This is nice because you don't need to go through the steps of saving the page in Brackets, switching the browser, and then reloading the page in the browser to see the changes.
    1. If you can move Brackets to one side of your screen and the web browser to the other side then you can easily see both at the same time.
  4. It's great practice to take a moment and look at the HTML source code, look at the resulting page in the browser, and see how much you can figure out what part of the course code produces what part of the in-browser page.
  5. WARNING: Sometimes LivePreview doesn't work right.  It's not always clear what the problem is, and sometimes you can Google for an answer and sometimes you can't. 
    tl;dr: Make sure that you can edit your web pages using the 'normal' save-in-Brackets, reload-in-the-browser workflow explained above.

Part 2: Recreate this (Completion) - H1, P

  1. Start this exercise by examining the the image below.  Your job will be to re-create that web page.  In this version of the exercise you will be given a starter file which contains some, but not all, of the solution.
  2. Download and save a copy of the ICE FILE #2 file. 
    If you don't remember how to do this off the top of your head then please review the prior exercise, then practice this step a couple of times (because we'll be using this technique a lot in this course).
  3. Start by opening up the file, examining the contents of the file, and viewing that file in a web browser.  Next, you should figure out what you need to change, add, or remove from that file in order to create a web page which looks like the image above.
  4. Finally, you can check your solution against the following instructor-provided solution: ice01_html02_SOLUTION.html

Part 3: Recreate this - H1, P

  1. Examine the the image below.  Your job will be to (re)create a web page that looks the same as the one pictured below.
  2. Next, save a new copy of the ICE FILE #1 file.
    I recommend naming it something new (so that you can save your work from the prior part) and including "Part_3"  in the name so that you can find it again later to study from, show that you've done the work for today, etc, etc).
  3. Your job is to add, modify, and remove anything that you need to so that the starter file (ICE FILE #1) looks like the above image when you view the page in a web browser.
    You'll notice that this starter file contains almost none of the above structure.  It has the basic html tag, the head and the body defined, but everything else is up to you. 
  4. Make sure that you can do this from memory by the start of the next class!  While it's tempting to look at the solution (in the next step) in order to get the answer, and while it's possible to hack something together by just looking up everything that you need please remember that next class the teacher will assume that you can do this quickly and correctly in order to cover the new material for the next class.  In order to do this quickly and correctly you NEED to have this stuff in your head (and only look up a few things here and there, occassionally).
    The way to get this into your head is to go home and practice this.  Try doing this exercise 2 or 3 times in a row, at least twice a day, until the next lecture.
  5. Once you've done your best to recreate the above image, check your work by examining the web page that was used to generate the image.