HTML Lesson-1

Warm Up - MATH

Click HERE to get your math warm-up. Open in Notability, do NOT start until I say GO.

Email to Mr. P when finished - dprothero@waukesha.k12.wi.us

HTML Code - A Beginner's Guide to Coding

Welcome to the wonderful world of HTML Code.

Let's begin by creating a new HTML document. The program we will use for this is called "NOTEPAD", and it is installed on any PC with a Windows O.S. Notepad is a simple text editor style program. No formatting or special fonts, just straight-up text.

NOTEPAD is where we will do all of our CODING.

CHROME is where we will do all of our web page VIEWING.

Both of these programs will be open at the same time and you will be toggling between them. (A LOT!!!!)

Let's Begin...

Open up Notepad on your PC. You may need to search for it in your start menu (lower-left corner). You'll get a blank screen that looks something like this:

Every HTML Document starts by us telling the computer what language we are speaking...in this case, we are speaking HTML.

This HTML language needs to be told to the computer using something called a TAG. Most tags have a START and an END, enclosed in brackets like this < >. The difference between a start tag and an end tag is the use of a slash /

Here is an example of a start tag and an end tag: <bold> Hi </bold>

With this example, the word "Hi" would appear in bold when viewed in Chrome because it falls between the start and end tag for bold. Anything that falls between a start tag and an end tag is affected by the tag. Also note the difference between the start and end tags... its just a /

Let's Continue...

The first step in every HTML document is to tell the computer what language we are speaking by using a start-html-tag and an end-html-tag. Please type these tags now with a few blank lines in-between. It should look something like this:

Moving on to the body section of the HTML code by inserting a start-body-tag up top and an end-body-tag towards the bottom. It should look something like this:

Next we'll add a a title. Your title for this page should be "Sample-1". The title section comes before the body, but just after the html-start-tag. It should look something like this:

SAVE with a .html at the end, file type should be set to "All Files"

Save your document, and lets open/refresh the document in a web browser like Chrome or IE, or Firefox using a CTRL-O after the browser is open. When the file opens, what do you see? Anything? Where did the title go? Find it, it is there!!!

Now that we have located the title, we are going to continue to make our web page. We will use the same title, but this time place the code under the start-body-tag. It will look something like this:

Click File-Save in Notepad and refresh your browser. BAM! Notice how this time the word appeared on the screen? That happened because it is inside the body tags. Keep that in mind, and lets move on...

Now we're going to type an introduction to our webpages. Mine is shown here: Welcome to my web page! This is the very first page I have ever made using html code. Please follow my progress as I continue to work on building my website over the next few weeks. Go ahead and type yours now. Example shown below:

Uh Oh! What happened? It seems all of the words stuck together! We would have to do a line-break if we wanted to separate them. Lets do that. Insert a line break tag , and we'll watch the introduction start on the next line (line break).

SPACING

In other words, if you wish to start a new line, (line break), use a tag. It will look like this:

Using a tag will make text do this:

xxxxxxxxx

If you want to insert a blank line or double-space, use the paragraph tag It will look like this:

Using a tag will make text do this: (inserts a blank line)

xxxxxxxxx

***Neither of these tags have a start or end tag, they stand alone.

Bold, Italic, Underline

Lets go back and spice up our title a bit. The bold, italic, and underline tags are very easy to learn and understand. Each tag has a start-tag and an end-tag. Examples shown below:

xxx xxx xxx

Go ahead and fix your code to make your title bold, italic, and underline. Mine is shown below:

Save and refresh please. If you did this coding correctly, you'll notice that the "Sample-1" at the top of your page is now bold, italic, and underlined. If not, please go back and look at your code for errors...don't forget to save and refresh!

FONT COLORS

Changing Font Color is another way to make things stand out and jump off your website. Here is the code for how to change font colors in HTML4:

font color=red OR font color=blue

What is really neat about this is that the HTML4 language is pre-programmed to recognize basic font names. The rest are hex numbers. If you have a very specific color in mind, you can always get it off the hex chart shown below:

Even more specific color codes can be found here: https://htmlcolorcodes.com/color-chart/

FONT SIZES

Changing Font Size is another way to make things stand out and jump off your website, or make people squint really hard. Here is the code for how to change font colors in HTML4:

font size=7 OR font size=1

There are seven sizes of font. 1 is the smallest, 7 is the largest, and 3 is considered normal or default.

TINKER TIME!

It is time to experiment with the knowledge you have gained today. I would like you to create a sample web page using all of the skills we have learned so far. Start a fresh HTML document and practice all of the skills that we learned today. You have two options for the topic of your web page:

Option-1 - Your favorite food

Option-2 - Your least favorite food

Please finish this by the end of class today.