HTML in its modern form is a type of XML (similar to SVG and RSS that
we've covered in other chapters, see the RSS page for more
details). It has only a few required types, and a bunch more that
are optional and give it various properties.
Here's an example page:
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Introduction</h1>
<p>Some text that makes up a
<b>paragraph</b></p>
<img src="exampleImage.png">
<p>Some more text with a link to <a
href="http://www.google.com">Google</a></p>
</body>
</html>
When your web-browser gets this HTML, it will process it and the result
will look something like this:
You can see it on its own page by following this link.
Here's what the various tags in the above example represent:
<html>...</html> - That all the text within these tags
should be used by the web browser as the code for the page.
<head>...</head> - The header of the page. This area can
contain information about the page such as the title or other items
that aren't actually displayed within the page.
<title>...</title> - The title of the page, this is usually
displayed in the top of the browser window (or in the tab) while the
page is being viewed.
<body>...</body> - The main portion or body of the page.
This is where the code that is being displayed will go.
<h1>...</h1> - Level 1 Header, this is used to make the
start of a text section with a large font. You can use any number from
h1 through h6 for progressively smaller headers.
<p>...</p> - A paragraph of text. Put your writing
(and images, links, formatting, etc. inside here.
<b>...</b> - Makes the text bold. Other formatting options are <u> for underline and <i> for italics.
<img src="ImageName.jpg"> - Puts an image on the page. There are
a lot of other options that can be used to modify the image that can be
added on, but this is all you need to display the image.
<a href="OtherPage.html">text...</a> - Creates a link to
another page. The part in the quotes after the href= is the link
to the other page. It can be a complete link such as
"http://media-intro.teeks99.com/Web/ExamplePage.html" or it can be a
link that is relative to where the current page is in the directory
hiarchy of the server. If the other page is in the same folder,
it could be just "ExamplePage.html". If it is in a subfolder it
could look like "FolderName/ExamplePage.html", if it is in a folder
higher up it would be "../ExamplePage.html". The text that comes
between the closing bracket (>) and the end of the link (</a>)
is the text that will appear blue and underlined on the page.
With just these few simple tags, you can make huge and complex web
sites. There's a lot more useful features (line breaks, tables,
forms, audio, video, and more) that are also part of HTML that you can
check out once you get these basics down.
Beyond simple HTML there are HTML styles and Cascading Style Sheets
(CSS). These are used to control the look of pages and even whole sites
in greater detail. Then to add functionality to sites, so that
something can happen on the page when you click a button, there is a
programming language called Java Script that is immensely powerful.
Because of their complexity, these topics won't be covered here,
instead we will concentrate on the basics above so that we can create
simple but useful web-pages.
