HTML Basics

HTML Basics

What Is a Web Page?

A web page is not a special kind of file. In fact, a web page is the plainest, most ordinary kind a file: a plain text file. Any word processor or text editor can make a web page.

A web page usually has a file name with the suffix (extension) of ".html" or ".htm" (either is OK, but ".html" is more common).

When you create a web page, it starts out as a text file. When you save it, it could be called "webpage.txt". You have to make sure the suffix is changed to ".html" so that it will work as a web page.

How Does a Web Page Work?

A web page contains special HTML commands (also called "HTML Tags"). An HTML tag tells a browser what to do.

Command = Tag

HTML tags are easy to make. Just put any HTML tag inside angle brackets: <html>

Tags are always in angled brackets < >

When the browser sees the brackets, it knows that what is inside is a command.

Any text in angled brackets < > is a command (tag);

Any text not in brackets will appear as text on the web page.

HTML commands are "case insensitive," meaning that they will work if they are in UPPERCASE or in lowercase. However, lowercase is considered good style.

On this page, you will learn some basic rules about HTML. Later, you will learn how to apply this information--how to structure web pages, for example. Don't worry if you don't understand web pages 100% after reading this. This page is just to introduce you to some basic ideas so we can do more interesting stuff later on.

What Do HTML Tags Do?

HTML tags tell the browser what to do. The <title> tag tells the browser what name to put into the title bar. The tag tells the browser to go down one line. The <blockquote> tag tells the browser to indent by 1/2 inch. The <img> tag tells the browser to find a picture file and put it on the web page in a certain location. The <a> tag tells the browser to make a link to another page.

There are many, many HTML tags, but you only need to remember a few dozen to make a good web page.

How Do I Type an HTML Tag?

There are two kinds of tags:

most tags have two parts: a beginning and an ending; everything between the two tags is affected by the command.
a few tags have only one part. These commands do things in one specific location; they do not 'start' or 'end.'

For example, let's say that you want to make some bold text. The command is simple: 

However, bold text always begins at one point and ends at another point. So there must be an ending tag, which is the same as the beginning tag, except it has a back-slash before the command--for example:  If you forget the ending tag, then the change you made will continue until the end of the web page, and could cause other problems.

Therefore, in a web page, if you type:

You must always try to have fun with computers.

It will appear like this in a browser:

You must always try to have fun with computers.

Live HTML Exercise

Test this out! In the space below, you will see two areas: a pink area at the top, and a blank area below it. When you type in the pink area, the web page output will appear below.

In the PINK area, click BEFORE the last two words ("play with") and type in the command "". Notice that when you do this, all the text after the command turns bold. That's because you gave a starting command but did not tell the browser to finish.

So, AFTER the words "play with," type the ending command for bold, which is "". Once you finish, you will see the rest of the text go normal again, and just the words inside the and commands will be bold.

There are many more commands. Here are a few; you may want to try them in the live test box above:

<em> </em>	italics
<h1> </h1>	Title (large and bold)
<h6> </h6>	Small Title (small and bold)
<center> </center>	Center Align
<blockquote></blockquote>	Left Indent 1/2"
<hr>	Horizontal Rule (line)

Note that the last one, "<hr>", has no end command--none is needed, because the item (a line) does not "start" and "end" between certain locations in the text. It is in "one place," and so there is just the command to place the line. Some HTML commands are like this.

Attributes

Many HTML tags have more features which can be activated. For example, there is a command called . The FONT command by itself does nothing. However, by adding extra command information, you can use the FONT command to change the color and size of certain text. However, you must say what color, and what size.

In order to give this information, you need to use Attributes. An attribute is a secondary command which comes after the main command. The attribute introduces special information ("values") about colors, sizes, locations, addresses and so forth. The value is usually in quotes; though the attribute can work without quotes, using quotes is considered good style. The attributes are separated by spaces; there are no spaces inside an attribute. Therefore, a command with attributes looks like this:

A specific example would be:

Remember:

Attributes must be formed by:

(1) a space
(2) an attribute name
(3) an equal sign
(4) a value (in quotes)

_attribute="value"

Some commands have no attributes. Others have only one or two attributes. Some commands have many possible attributes.

Important: Attributes and their information ONLY appear in the BEGINNING tags, and NEVER in the ENDING tags. This is shown in the examples above. The ending tag with the back-slash must ONLY have the main command only.

Some commands with attributes:

Command	Attribute #1	Attribute #2	Explanation
<font	size="+3"	color="green">	font size & color
<hr	width="300"	size="10">	line sizes
<p	align="right"	style="line-height:24px;">	paragraph format
<marquee	scrollamount="20"	direction="right">	animated text

A few notes:

I provide two attributes for each command just for examples; you can have one, three, or often no attributes, if you want. Exactly two are not necessary.
"font" is the only command here that requires attributes; all others can work without them.
"p" and "hr" are both commands which do not need an ending command. HOWEVER, if you add attributes to the "p" command, then you SHOULD include an ending command.
The <marquee> command is cute and fun... the first few times. It can be VERY annoying if used often.
While numbers do not NEED quote marks, it doesn't hurt to add them anyway.
Note the second attribute I gave to the "p" command; this is a special type of code called "CSS" which we will not learn in this class. CSS allows you to add a lot of extra styles and formatting to your web site--but it is too complex to learn in this basic course. If you would like a primer to study on your own, then find it here; however, you should finish the whole section on HTML here before trying it.

Live HTML Exercise (Attributes)

Try out some of the attributes above in the live text window below. If they don't appear correctly, check your spelling and HTML syntax carefully for errors. Even a small error can "break" the page!

Strange Things

When you are writing HTML, there are some special concepts you must remember. They will seem strange to you because they are different from your usual experiences with computers.

For example, writing a web page is NOT like writing something in a word processor. Word processors have many tricks that help you type more easily. For example, in a word processor, if you want to make a word bold, you just select the word and then click on the BOLD button in the toolbar. In HTML, you must use the commands in the angle brackets to give the "B" command to make the word bold.

Another example is making new lines (called "line breaks"). In a word processor, you just hit the ENTER key, and you have a new line. This does not work in HTML. You can hit ENTER a lot of times, and you will see the new lines in your text editor, but the browser will not see them!

For example, in an HTML file, if you type this:

Hello.
I am a student.
I am writing a web page.
Do you like it?

That will appear in the browser like this:

Hello.I am a student.I am writing a web page.Do you like it?

This is because the browser does not see ENTER. You could tupe the ENTER key 100 times, but the browser will not show any of them when it displays the web page. Therefore, you must type the command:

Hello. I am a student. I am writing a web page. Do you like it?

That will appear in the browser like this:

Hello.
I am a student.
I am writing a web page.
Do you like it?

Rule:

When typing in HTML, the "Enter" key does nothing that will appear on the browser.

Use "Enter"s only for making things look more clear while typing HTML.

Notice that when I was typing the HTML, I did not bother to use the ENTER key. I could if I wanted to, and many people use it just so the HTML page appear more organized. But as you can see abover, it is not necessary for the web page to look nice in the browser.

If you want to make a new paragraph, you can use the command. The BR tag only goes down to the next line, single-spaced. The P goes down two lines, like a double-space. See the difference:

Hello.I am a student.I am writing a web page. Do you like it?

That will appear in the browser like this:

Hello.

I am a student.

I am writing a web page.

Do you like it?

*By the way, notice that the and commands shown here do not have an ending tag. The does not take an end tag, but the tag could take both attributes and and end tag in some circumstances.

It is similar for spaces (the SPACE bar on the keyboard). A web browser will only see one space at a time. Make two spaces in a row, and the browser will show only one. If you type twenty spaces in a row, the browser will still only show one on the web page. Therefore, when you type this:

Hello! I am putting a lot of spaces here!

That will appear in the browser like this:

Hello! I am putting a lot of spaces here!

Rule:

When typing in HTML, only one space at a time will render on the browser; more than one space in a row will not appear except for the first space only.

It is possible to put more than one space together in a row, but you must use a special character. Special characters always begin with an ampersand (&) and end with a semicolon (;).

The special character for a space is   which stands for "non-breaking space." There are many such special characters.

If this is all too confusing, you can always use the <pre> command, which is for pre-formatted text. Any text within the <pre> and </pre> tags will appear exactly as you typed it--all ENTERs and SPACEs will be visible. (However, all the angle-bracketed HTML commands will be visible too! So don't use the PRE command except in special cases.)

• browsers do not "see" ENTERs

• browsers do not see more than one space

Now You Know

Now you know some of the basic points of the HTML document. You are ready to start studying the structure of a web page.

colors