Web Pages are elements of the Internet.
The Internet is all the computers in the world which are connected under Internet rules. The World Wide Web is only one part of the Internet. Other parts include email, IRC chat, USENET, FTP and so on.
It might help to think of it like a "tube." Your computer is one slice of this "tube."
Each computer connected to the Internet has the technology to connect to each part of the Internet.
The World Wide Web is a collection of all web pages and web sites in all the domains.
A domain is the name of one specific area on the World Wide Web, with a main address which usually looks like "www.something.com". Each domain can hold one web site or many web sites.
A web site is a collection of web pages (though it is possible for a web site to have only one page).
A web page is one part of a web site. The main web page of a web site is called the home page.
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). The ".html" is used instead of ".txt" to tell the computer that this should be opened by a browser.
How Is a Web Page Different from a Regular Text File?
A web page is different from a normal text file because it 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.
Anything NOT in brackets is regular text, and will be shown somewhere in the page on the browser. Anything IN the brackets is a command and so it will not appear on the page with the text.
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 <br> 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: <B>
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: </B> 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 <b>have fun</b> with computers.
It will appear like this in a browser:
You must always try to have fun with computers.
Is That All?
Well, no. There is more.
Some HTML tags are more complicated. For example, there is a command called <font>. The FONT command allows you to change the color and size of certain text. However, you must give extra information in the command. 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:
<command attribute="value" attribute="value"> </command>
A more specific example would be:
<font size="+2" color="red"> </font>
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 show in the examples above. The ending tag with the back-slash must ONLY have the main command only.
|
• attributes are separated by spaces
• attributes are followed by ="value" • number values do not need quote marks • end tags do not contain attributes |
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 choose the BOLD command from the FORMAT menu. 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. 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 <BR> command:
| Hello.<br>I am a student.<br>I am writing a web page. <br>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? |
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 <p> 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.<p>I am a student.<p>I am writing a web page. <p>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 <br> and <p> commands shown here do not have an ending tag. The <br> does not take an end tag, but the <p> 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! |
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.
