How to: HTML
What is HTML?
HTML is a standardized language for writing webpages, and the letters of the acronym stand for HyperText Markup Language. Being a markup language means that it is integrally different from Matlab, Python, Java, C, and others traditionally considered programming or scripting languages. In HTML, the designer's goal is to take text and categorize it into different elements, such as paragraphs, links, and headers, rather than make functions or scripts that "run."
While no one is the official boss or owner of HTML, an organization called W3C (World Wide Web Consortium) publishes well respected standards. Web Browsers that follow these guidelines closely are called "Standards Compliant". No browser is perfectly standards compliant, and professional designers must keep that in mind at all times.
To learn more about the general concept of HTML, Wikipedia's HTML article may provide some insight.
Learning to write HTML
Often, the simplest way to understand HTML is to look at pre-existing code (often called source code, or just source) and try to understand how and why it does what it does.
To view the source of this page, in most modern browsers, right click (ctrl-click on Mac) and choose "View Source" or "View Page Source".
You should immediately realize that pages don't have to have incredibly complicated code to look decent.
HTML is structured with sets of opening and closing "tags." <body> is an opening body tag, and </body> is a closing body tag.
<p> is an opening paragraph tag, and </p> is a closing paragraph tag. Most tags will have separate opening and closing tags.
However, there are a few tags that open and close in the same tag, like the line break tag, <br />, and the horizontal rule (horizontal line), <hr />, tag.
You MUST close every tag that you open. This is an opened and closed italics tag, <i>Italicized</i>, and this is an opened and closed image tag,
<img src="mypicture.jpg" alt="My Picture" />.
One of the most useful tools any developer has as a resource is a search engine. Rather than buying an expensive book, bugging your friends, or having to wait on a response
from your TA, you can find the answer to 99% of your questions just by searching. Suppose you want to
make an image into a link,
create a bulleted list, or even
create a form, you will probably have the best luck searching the
internet for it.
See the HTML Resources Section for more advice.
A Note
While everything is this lab will refer to what you are writing as HTML, we are technically teaching you XHTML (EXtensible HyperText Markup Language). The differences between the two are subtle, but according to current standards, HTML is being phased out, and XHTML is being phased in. The main differences include the forced closing of any opened tags, and the addition of self-closing tags. You can read more about XHTML's differences in the HTML Resources Section.
Analyzing some sample code
Let's start with a simple example. Sample Code (Opens in a new window). We'll go through this code piece by piece to see what each part does.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This line is called the DOCTYPE declaration. DOCTYPEs determine which method browsers use to render webpages. Only advanced users really need to concern themselves
with what this does exactly, but some browsers will go haywire without this line, so make sure to have it.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This line tells the browser that everything between here and the </html> tag is HTML and to render it as such. Again, unless you have knowledge of the inner
workings of browsers, you don't need to change any of these settings.
<head>
This is an opening head tag. Everything between here and </head> is considered the head of the document. The head is the best place to put everything
that determines how the body of the document should look, and it's also storage for a few things that don't need to be shown on screen. For example, if you were to
put keywords for search engines to find this page, you'd put them here. Also, most CSS style information will go here. Finally, JavaScript, a browser programming
language that we will not be looking at, would go here as well.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
This is a meta tag. They come in many flavors, such as content type, search engine keywords, web site description, and a few others. This one is clearly of the
content type variety. It tells the browser which character set to use. If we wanted Japanese or Hebrew letters, for instance, we might consider using a different
character set. While it's not necessary to put this, you can't pass validation without it. Notice that this tag closes itself.
<title>Web Page Title Here</title>
Here we have the page title. Everything that goes between the opening and closing tags will appear at the top of the browser window in what is aptly named the "Title Bar."
The one on this page is CS 1371 - Lab 2 :: How to: HTML. Keep looking up until you see it (You don't need to scroll up, though).
<link rel="stylesheet" type="text/css" media="screen" href="cssSampleReal.css" />
This is a link tag. They allow you to reference things like stylesheets (CSS files) for your HTML to use. These are NOT the kind of links you click to visit
another page. When someone says "Link to an external stylesheet", this is what they mean. Make sure to put href="mystyle.css" or href="howmypagelooks.css" or whatever
you decide to name your CSS file. Remember, you can name files anything you want (except index.html). If you want the page to look different when you print (i.e. no
background image and regular text colors) you could put a second one of these with media="print".
</head>
This is the end of the head tag. Nothing should go between here and the opening body tag.
<body>
This is the opening body tag. As you probably guessed, everything between here and the </body> tag is the body of the document. All of the text,
images, and pretty much everything else you want the viewer to see will go in here. Here is where you have the freedom to do what you want.
Current conventions
(unofficial standards) say that you shouldn't put colors, fonts, font-sizes, or any of the "Presentational" aspects of the page in the code itself, except for
<b></b> (bold), <i></i> (italic), and <u></u> (underline).
Instead, you should put all that in your CSS files and save the HTML just to structure your document.
<h1>This is a Big Heading</h1>
H1 tags, as you can see from the rendered sample (Opens in a new window), create large
headings. Headings range from H1 to H7, H1 being the largest, H4 being about the equivalent of bold text, and H7 being rather tiny. Because of their smaller size, H4-H7
are rarely used by developers. Remember, you can change the properties of the headings with your CSS. All heading tags have a blank line after them.
<p>
This is a paragraph tag. As such, it groups text into a block-like unit. By default, they have a space below them, so putting multiple paragraphs one after
another will leave a blank line between paragraphs.
This is a generic paragraph.
This text will appear on the same line as the previous text.
<br />
This text will appear a line down from the previous text.
The first two lines, as they themselves state, will be on the same line when shown in the webpage because html only knows how to deal with one whitespace character
without special instructions, and that is the space. If you press enter to make a new line, use a tab, or even use two spaces, the browser will show a single space.
When you actually want a new line, you will either have to close and open a new paragraph, or use the line break tag, <br />.
</p>
This is the closing paragraph tag. Remember, after this tag we get a blank line.
<h3>This is a medium sized heading Heading</h3>
Like the H7, this is another heading tag. It is slighlt larger than the default text size, so it makes for good sub headings. There is a blank line after the end of it.
<p class="special">
This is an opening paragraph tag, quite similar to the previous one. However, the big difference is that we've given it a class of special. The reason it looks different
from the previous one when show in the web page is because in our CSS file, we made a line that said .special { that add new properties to anything with this
class.
<table>
We'll skip down to this line. This is an opening table tag. Everything between here and </table> should be part of the table. Tables consist of rows
and data, as you'll see below.
<tr>
This is the opening of a Table Row, hence tr. Inside of it goes data. The rows go down, and the data go to the right.
<td>This is the top left table cell</td>
<td>This is the top right table cell</td>
These are table data cells. Every one of these opened within the same row is in the column to the right of the one before it. So, since we know we're only opening two,
the first one will be in the top left cell, and the second one will be in the top right cell. If we had a third one, the second one would be the top middle cell, and the
last one would be the top right cell.
</tr>
This is the end of the table row. If we open another table row after this, it will be below this one, and all the columns will automatically line up.
<td colspan="2">This is a big cell that takes up the whole bottom row</td>
The next significant line is this one. The only thing different between this table data cell and the others is that we've specified that colspan="2".
This means that rather than taking up a single column it will take up 2. If we were to put another cell in this row, it would go to the third column.
<a href="http://www.google.com" title="This is a tooltip. Hover to see it.">
This is a link to Google</a>
This is probably the second most important thing to the internet next to web browsers themselves. This is the anchor tag, but you probably know it as a hyperlink,
or link for short. The href, meaning hyperlink reference, is the location you want to send the person who clicks on it to. The title is an attribute that you can
actually give to any element (like tables, paragraphs, or anything really) displays a tooltip when the user hovers the mouse over that element.
</body>
</html>
These last two lines obviously end the body of the document and the document as a whole, respectively. It's very easy to leave them off of your pages because web
browsers don't need them, so the pages show up fine without them. However, if you leave these lines off, you shall not pass the validation.
In addition to this code, you will need to learn how to use images (with the <img /> tag), form elements, and CSS.
You can find some additional resources for learning HTML on the HTML Resources page.