Learning HTML is best done through practice and example. If you see a site that you like, you will learn best by looking at the source code there. You can do this with the "View Source" or "Page Source" option in the edit menu of your browser. That will bring up all of the HTML code for the current document. Some pages will be too complicated to understand, especially on big professional sites, but it's worth looking.
Tags generally work in any browser. The W3C (World Wide Web Consortium) sets standards for HTML which work in any browser. Some browsers add their own features. Anything that is browser specific will not be covered in this class, and you should avoid using it because a big portion of the world won't be able to see your pages.
<html>
Every tag has a corresponding end tag. That means, whatever attribute the tag started is then stopped. So, at the end of your document, there should be an end HTML tag to indicate the HTML is finished. Each end tag is also enclosed in < and > symbols. It has a / and then the name of the tag you are ending. Thus, to end your HTML document, you use
</html>
Let's look at some other basic tags. You must always start with the html tag and end with the /html tag. You have the option of inserting a header section into your document. This allows you to do some special functions. The only one we will be concerned with now is the "title" tag. This puts a title in the grey bar at the top of your browser window. On this page you're reading, the title is "INST671 - Web Programming". To make a header and Title, the code would look like this:
<html>
<head><title>This is my page title</title></head>
</html>
Notice that the actual title that you want to appear at the top of your document is sandwiched between a title and /title tag. No other tags can go in the title section; it has to be plain text.
The tags we've seen so far do not allow us to actually make a web page for people to see - all we can do is put up a title. To start inserting content, you need the "body" tag:
<body>
There is a corresponding end tag, and everything sandwiched in between is the body of the web page. The "body" tag also introduces us to the concept of attributes. Attributes are features that you may want to add to the thing you're creating with a tag. So, if we are creating the body, what attributes might we want to add? Since they are going in the body tag, they will generally affect the entire HTML document. Here are the ones you will probably be most interested in.
<body background=bg.jpg>
<body background=../bg.jpg>
To add an attribute to a tag, you must first put the name as usual. Then, you add in the attribute set equal to it's value. This is called a name-value pair. The name of the attribute is set equal to the value of that attribute.
<body bgcolor="white">
You may include as many attributes as you like. None are required. They are also case sensitive and should be lower case, though this was not always true. Back in the 1990s, the standards allowed HTML to be case insensitive. Since we don't want all those old pages to break, browsers will support tags with any mix of cases. Similarly, the values in attributes should be in quotes (double or single work), but that was not always required. Thus, you should use them, but if you leave them off (and I sometimes will forget them because I've been doing this for so long), it will still work.
Notice that, in the example above, I used "white" as a value for the background color. There is a set list of color names that you can use at http://www.w3schools.com/html/html_colornames.asp.
A better way to do colors is with hex codes. This requires a bit of a tangent into color theory, but it's interesting and well worth learning.
For convenience sake, we represent colors as three numbers respectively giving
the red, green, and blue values. So (255,180,0) gives an
orangy color (255 red, 180 green, and 0 blue). With that much known, we
can try to represent these colors in HTML. For example, if we want that orange
color for the background, we might say bgcolor=255,180,0. However, HTML doesn't
make it that easy. It works on a hex system, so each value is given in base 16
instead of base 10. To do that, we count like usual for 0 through 9, and then use
letters to go higher: 0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f. This gives 16 values in
one place. Once you get higher than 16, you carry over to the next place, and
start again. So if we were to keep counting:
0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f-10-11-12-13-14-15-16-17-18-19-1a-1b-1c-1d-1e-1f-20
and so on. Counting this way, we go from 00 (for 0) to ff (for 255). So to
represent our orange color, red is ff (for 255), green is b4 (remember 1 in hex
is equal to 11 (because it is 2 above 9) * 16 (which is our base) 11*16 = 176.
Then, we add on 4 to make it 180. b0 + 04 = b4. Blue is 00. Thus we have
ff,b4,00. In HTML, we remove the comas, so the final hex value is ffb400.
Thankfully, you don't really need to learn this system. There are lot of tools out there that just let you pick your color from the spectrum and then gives you the hex value. Here is one of them. Note that you will sometimes see hex values with a # in front of them (#ffffff vs. ffffff - for white). Either is correct, and you can use which ever system you prefer.
The "br" tag puts in a single line break
so text shows up on the immediate next
line just like this. <BR> does not
have a corresponding end tag. The standards require all tags to have matching end tags, though
so the way people get around this is to combine the tag with a / at the end. This is formally
correct XML (the language that underlies HTML) that indicates the start and end
of a tag: <br />. I'll often neglect to do this in my code because I've done it so long
without the ending /, but if you want formally correct code, you should include it!
The <p> tag is a paragraph mark. it puts in a line break and a blank like like those that separate every paragraph in this document.
Finally, there is the <pre> tag. Pre stands for preformatted text, and anything that is enclosed in a pre tag will show up with all of the white space you include. The drawback is that it shows up in a monospaced font like this:
This Is Pre Formatted t e x t . . . .
Tags like
By default, text aligns to the left. There are a couple ways you can change that. The most widely used is the <center> tag. It has a corresponding end tag and you can use it to center anything you want (text with formatting, pictures, links, etc).
<font color="orange">Pumpkin</font>
produces
Pumpkin
Finally, there are the Header tags. These allow you to put headings (bold text of different sizes) into your document. There are sized from 1 to 6.
These attributes can be used alone or together.
Now let's say you want to write the paragraph i just typed above to tell your students to type >. How do you get that to show up on the screen? You can't just type it, because if you do it will show a >. So, you need a special character string for the & which is &. Quiz: how do you do &??
There are a bunch of these special characters. The ones you need to know are the three listed above, and this one . This is a non-breaking space. When I said that HTML ignores white space, it really does it to the extreme. Not only won't it recognize a bunch of spaces in a row or a bunch of returns in a row, but it won't even recognize multiple <p> tags. If you put 5 <p> tags, it will only put in one blank line, as though you typed just one. If you want to get a lot of white space, you need to separate your spaces or your <p> or <br> tags with something. You can use this to do that.
To get this white space:
We type <p> <p> <p> <p>
Take a look at the source code for this document if you're curious.
Comments
The final useful item for the day is comments. You can comment out sections of HTML code to check for errors, or to temporarily remove them from showing up. The comment is really one big tag that contains the information you want to hide. You start with <!--, followed by the text to hide, and end with --> when you're done hiding: