How HTML Works
How to write a simple web page
The whole World Wide Web, (WWW), is built around "Hyper Text Markup Language" ,(HTML). A web site is accessed with a program on your computer called a browser. The browser gets files from web sites and interprets them to display web pages on your screen. Web sites are made up of text files, and graphics files that reside on a computer called a web server. Each text file describes a page. The graphics files are pictures and other web page elements, that are called for by the browser, if they are named in the page description.
Part 1, the Name.
The browser finds it's way with a “Universal Resource Locator”, (URL). fancy
words that mean “address”. The address of this page is: “http://www.hyperwind.com/pages/” Web address’ go from general to specific. Breaking it down, “http://” means it’s a web page, “www.hyperwind.com” is the address of
the web site, “/pages”
is a folder on the web site, and the trailing “/” tells the web server to send your browser the “home” page for this folder.
Web sites are made up of many pages linked together, but they start from one page
known as the "home" page.
The actual name of the home page is set by the server's webmaster.
Common names are, “home.html”,
“index.html”, “default.html”,or “welcome.html”, but the home page name can be
anything the webmaster wants it to be. The trailing”/” is a convenience, you can
of course call a page explicitly. If I had named this page “krabopple.html” the slash at the end wouldn’t
work, but the URL, “http://www.hyperwind.com/pages/krabopple.html”, would.
So what do you name your “home” page? If you're not sure, contact your webmaster
and ask, “What should the name of my home page be?”
For this web site, at which, I am the webmaster, I have decreed
that “home.html” is the
name of the home page! But because I’m such a nice guy, you can also use, “index.html”, and “default.html.”
So start up your favorite text processor, create a new file, and name it “home.html”.
Make sure that when you save your file, you save it as plain text. Web servers can
only deal with plain text!
Part 2, the page
A simple web page is a plain old text document with “html tags” embedded in the text.
The tags themselves, are plain text, but when a browser runs across one like <center> instead of printing
it on the page, it interprets it as a command to center everything on the page from
here on, until it runs across the tag </center>. Most tags have a start, and end tag. the end tag is usually the start
tag with a “/” in the beginning.
The first tag in a web page is
<html>
this tells the browser that the following text is a web page description. the last
tag is of course
</html>
which tells the browser that this is the end of the page description.
I promised you a simple web page, so here it is.
<html>
<head>
</head>
<body>
Hello world
</body>
</html>
This page description will print “Hello world", in the top left hand corner
of the page. Leading spaces, and carriage returns are ignored by the browser. I just
indented it that way for clarity. In fact the following page description will yield
the exact same page
<html><head></head><body>Hello
world</body></html>
But it’s not as easy to read.
A page description has two main parts the header, and the body. The header contains
information about the page, like the title that appears in the top of the window.
The body contains the actual description of the page. Lets look at the page tag by
tag
<html> The start
of an html page
<head> The start
of the header
</head> The end
of the header
<body> the start
of the body
Hello world The text
and other elements you want on your page
</body> the end
of the body
</html> the end
of the html page
Part 3 Add a title
The <title> tag
tells your browser to place a title at the top of the window, it will also be the
name of the bookmark, (favorite) for this page. the title goes in the header portion
of the page, like this.
<html>
<head>
<title> The great Page</title>
</head>
<body>
Hello world
</body>
</html>
Part 4 More lines
As I said before, browsers ignore carriage returns, so the following page description
won't work right.
<html>
<head>
<title> The great Page</title>
</head>
<body>
Hello world
Hello Mars
</body>
</html>
You would get “Hello worldHello Mars” all on one line. in order to make a new line, you have to use the break
tag <br>. When
the browser encounters this tag, it substitutes a carriage return. Because the browser
inserts a character, instead of affecting the what characters are displayed it doesn’t
need and end tag. The following description will put the two lines under each other.
<html>
<head>
<title> The great Page</title>
</head>
<body>
Hello world<br>
Hello Mars
</body>
</html>
Part 5 Pictures
So now you can fill a page with anything you want to say. But hey, what's a web page
without spiffy graphics?
Pictures are NOT embedded in the page description. The page description contains
a tag that points to a file that contains your picture. So first you need a picture.
Save the picture to the same folder as your page. The picture should be saved out
in the “jpeg” format. For this example our picture in named “test.jpg”. In order to tell the browser to
place the picture on your page you would use the tag <img
src="test.jpg">. This page description will place
a picture between the two text lines on our page.
<html>
<head>
<title> The great Page</title>
</head>
<body>
Hello world<br>
<img src="test.jpg">.<br>
Hello Mars
</body>
</html>
Note that I added a <br> tag after the picture so the “Hello
Mars" line will be under it instead of next to it.
A word about picture size.
You can fit a whole lot of text in just a few hundred bytes of text., but a picture
can easily be hundreds of thousands or even millions of bytes. The bigger your pictures
are, the longer your page will take to load.. You must be nice to people with slow
modems. Do not use pictures that are larger than you need. Most computer screens
do not have a resolution better that 72 dots per inch. Your picture won’t look any
better at 600 DPI but it will take four times longer to load.
Part 6 HyperLinks to other pages
The core of the world wide web is the ability of one page to contain links to other
pages. These links are called "hyperlinks". Your browser doesn’t care if
the hyperlink you select points to a page on the same server, or a server on another
continent. On the web time and space are meaningless. If we add the line
To see more about <a href="mars.html">Mars</a>
just click<br>
to the page
<html>
<head>
<title> The great Page</title>
</head>
<body>
Hello world<br>
<img src="test.jpg">.<br>
Hello Mars
To see more about <a href="mars.html">Mars</a> just click
</body>
</html>
The browser will show the line, “To see more
about Mars just click”,
under the “Hello Mars”
line. The word “Mars”
will be in blue, because it's the hyperlink, Clicking on it will cause your browser
to request the page "mars.html" from the web server. Because we used a
partial address, the browser will contact the same server and request the page named
“mars.html” from the
same folder as the page that had the hyperlink for it.
A full address can point to anywhere. if we were to use the line,
To see more about <a href="http://www.wayfaraway.com/space/mars.html">Mars</a>
just click<br>
The browser will display the same line “To
see more about Mars just click”,
in the same place. But when you click on the word "Mars", your browser will request the page “Mars.html”, from the folder ”space”, from the server “www.wayfaraway.com”. and you’ve just surfed the web to another place entirely.
There are a lot more tags, this isn’t even a chip off the tip of the iceberg. But,
these very few, can make a whole web site.