Getting started with HTML
An attempt will be made to provide slides for each lecture:
- Go here to get Brackets.io for
Windows, Mac, or Linux
While you will be shown the basics
of using Brackets, you will largely be expected to figure out
Brackets.io on your own.
- This is a great time to use (or develop) your
Google/Bing skills. Adding "Brackets.io" to your query
helps tell Google what to focus on. There's not a ton of
pages out there, but you can find some nice stuff, like
- If you like watching helpful videos,
10 minutes and it's a pretty good overview of Brackets.io.
The author uses an HTML table as an example (which we haven't seen
yet), and he also makes a couple of minor mistakes
(he confuses the file size with the amount of RAM that the
program will use, he keeps mispronoucing indentatio as
"in-den-shun" instead of "in-den-tay-shun").
However, he does show
the nice color picker feature, and does a good job showing off the Live Preview feature (right
around 9:30 - 9 minutes and 30 seconds)
- Warning: You may see references to
Komodo Edit instead of Brackets.io. Komodo Edit was used in a prior quarter.
see something that talks about Komodo Edit please alert your instructor so that the teacher can change that to Brackets.io
- The workflow that
you'll use to edit web pages
This page gives a brief but helpful outline
files, etc) on your computer.
What's nice about them is that they're quick and
focused. They're also very basic. My advice is to use
these to get oriented to the basics and then look for more
detailed web pages if you need to / want to.
couple of specific tutorials that you might find useful:
- Udemy has
some pre-recorded videos that explain some basic HTML elements.
I watched the one on lists and it seemed reasonable (I
haven't watched the others).
In order to watch these
you'd need to sign up for a free Udemy account, and then sign up
for this free course. There are lots of course that you
could pay for, but I'd recommend avoiding them (there's lots of
free material available online, and we'll be covering what you
need in this course)
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).
- Examine and download the 'starter file' for this exercise
- 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'.
- 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!
- 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).
- Adding a couple of elements to the file using Brackets.io
- 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:
- Open the ice01_html01.html file using
the File >> Open menu item in
Brackets.io (or other text editor of
- 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.
point, things should look more-or-less like this:
- 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.
- In Brackets: try changing the
word 'Hiya!' to something else (maybe 'Hello') AND THEN SAVE THE FILE
- 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:
- 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.
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.
- In this class you will modify your web pages (including the
Brackets.io, then viewing the updated page in your web browser.
- In between the <title></title> tags, add
Lecture 01 Ice 01.
- In the <body> add the following
- <h1>Heading 1</h1>
- 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
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.
- Remember to Save your work in Brackets by clicking the File >> Save
or by using the keyboard shortcut (Control+S on Windows), then hard
refresh and the page in the web browser to see your work!
- One last warning
This first walkthrough covered the topic of 'How to
edit an HTML page using Brackets.io' in A LOT of detail.
walkthroughs will NOT cover the material in this much detail.
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.
1-A: Using the 'LivePreview' feature in Brackets
- 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.
- You will need to install Chrome in order for this to
work. Click here to download and install chrome:
- 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).
- 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.
- 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.
- 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.
- 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.
Make sure that you can edit your web pages using the 'normal'
save-in-Brackets, reload-in-the-browser workflow explained above.
2: Recreate this (Completion) - H1, P
- 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.
- Download and save a copy of the
ICE FILE #2
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
- 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.
- Finally, you can check your solution against the following
3: Recreate this - H1, P
- Examine the the image below. Your job will be to (re)create
a web page that looks the same as the one pictured below.
- 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).
- 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.
- 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.
- 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.