Basic HTML

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:

    <title>Example Page</title>
    <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="">Google</a></p>

When your web-browser gets this HTML, it will process it and the result will look something like this:


Some text that makes up a paragraph

Some more text with a link to Google

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 "" 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.