Web: Lesson 2

Overview
In this lesson we will begin to look at the HTML (HyperText Markup Language) programming language.

Where to go?
To begin with, we will be using http://htmledit.squarefree.com . I have found this one to be pretty good overall, so it will be a nice place to test-out the basics.

Whenever you open this page, just delete everything that is in the editor at the top and plan on copying whatever you been working on to a text document on your computer when you are done.

Tags
Basically all of HTML is built on things called tags. These tags (almost) always come in pairs with some text between them like such:

STUFF

Congratulations, you now know almost everything there is to know! Anyhow, continuing with what I just mentioned, the majority of what you will do in HTML is learn where and how to use specific types of tags. Notice the forward slash in the latter of the two tags; this is present in every tag pair. The compiler uses this to tell when to end a pair. Think of them like parentheses in math where every '(' must have a ')'.

DOCTYPE and Tag
I have to at least tell you to begin EVERY HTML document you will write. That is <!DOCTYPE html>

There isn't anything else I will add to that for now. I will explain a bit more later.

The html tag is the first one I want to show you. It is how every html file begins (after DOCTYPE) and ends. For now, remember to begin every file as and end every file as.

and Tags
Most HTML documents will follow a format like this: Information about page

The content of the page

The and tags are used to partition the page to make it easier to read for both humans and computers. For now, I just want you to know their general purposes because I have not yet explained what exactly goes inside of them.

Writing
You can think of HTML at the base level as a word processor. You can type whatever you want into it and format it to your needs. To see this, run this script: <!DOCTYPE html>

TYPE WHATEVER YOU WANT! It will display it!

As you can see, it displayed what I typed. HTML documents will display most everything not inside < >. (There are a few cases when it does not but those are for later :))

You are probably thinking right now: "Well, this is mildly interesting. (*￣m￣)  " and I would agree. If this were all there were to do, it would get boring fast! So, I am going to show you a whole bunch of cool things you can do with it.

Typing Related Tags
Foreword: all the tag pairs work the same way as other tag pairs
 * Bold:      
 * Italics:      
 * Paragraph:   you can do this around every paragraph OR you can just put  at the beginning of each paragraph in a long chain of paragraphs but end the last one with.


 * Alignment:     There are more uses for div than this and secondly, you can change "center" to "left", "right", etc

Font
Another very useful tag for typing is font. It can change just about anything about text's appearance. Just like for div, font works by putting several statements inside the first tag. With font you can change the color, size, and face (this is the style or font of the text).  Test me!

For these statements, you can put as many or as few as you want in it. You can also put them in any order.

Size
In the size parameter, you can put integers(and maybe half-integers) in it to adjust the size. You can also put something like "+2" or "-3" to adjust the size relative to standard size.

Color
There are two ways to represent colors. One way is the way that I used where you enter in the name of the color i.e. "green","red","blue",etc.

The other way is by using hexadecimal (which is a base-16 number representation): "#3C68B8"

Face
Another amazing utility of font is that you can change the style of the text. There are all kinds of ones you can use. Here is a list of all of them.

N.B.  is not used in HTML5(newest version)

Headings
One important thing to use in html is headings. They are nice and stylish things to use. They work the same way as bold or italics and use the tags:, , ... They go in decreasing size.

Hypertext
A very important tool of HTML is the ability to add hypertext to a webpage. Hypertext is what is more colloquially called a "web link". They allow the user to click on them and take them to a different page. Hypertext uses the tag:  . Links are defined this way:  STUFF YOU WANT USER TO SEE 

Tables, Lists, etc.
I will introduce you to a few of the other more random topics of basic HTML programming.

Tables
Tables are very useful structures in programming. In web development, you will see them EVERYWHERE (@.@). This use for tables will be entirely visual, but there are plenty of others that I will explain later. Tables use the tags:

As you can see, I just made a table with two peoples' first name, last names, and grade. The tag is a heading for tables. It can be used in rows and columns and functions very similarly to.

There are quite a few nice stylizing things you can do with tables like borders, colors, spacing, and more but that will wait until the next lesson when I introduce CSS.

Lists
Lists function almost identically to tables but they work in only one direction. There are two main types of lists unordered and ordered.

Unordered Lists
Unordered lists use these two tags:  and . The  starts the list and  starts every element (both of these need closing tags too).

Ordered Lists
Ordered lists use these two tags:  and . The  starts the list and <li> starts every element (both of these need closing tags too). The one difference with ordered lists is that you can decide how to order them. You do this by or some other labelling metric. You can use 1,A,a,I, and i.

Horizontal Rule
The  tag creates a horizontal line across the whole page. That is all.