HTML Tutorial
There is a fairly large set of “tags” that can be used to create a web page. Every tag follows this basic structure:
<tag attribute="value">value</tag>
Although sometimes the attribute(s) are always optional, and the closing tag sometimes optional. For example:
<tag />
Let's take a look a the most basic HTML page and the tags within it. It does nothing more than display “hello world” in the browser window's title bar, and write “hello world” again followed by “this text is bold”, a link to this website and an image in the page body.
|
Line #
|
Paste the contents of this column into index.html and save
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello world</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
Hello world. <span class="spanExample">This text is bold</span>.
<br />
<a href="http://www.adeointernetmarketing.com" id="lnkAdeo">Web design</a>
<img src="picture.jpg" />
</body>
</html>
|
Let's break down this file line by line:
-
The first line defines the “doctype” for the page. In other words, it tells the browser what standard to use when parsing and rendering the page. In this case it says “HTML 4”. Failing to specify the doctype will make cross-browser compatibility difficult.
-
Opening html tag that wraps all web documents
-
Opening head tag that contains some meta data (background information) about the web page
-
The title tag defines the text that will appear in the blue title bar of the browser window and search results on Google etc.
-
A reference to a CSS file (more on this later)
-
Closing head tag
-
Opening body tag. Tags within this bloc are part of the visible page design
-
A span tag is just a wrapper around text, similar to a label. By default it does nothing, but the stylesheet will make it distinct from the rest of the text.
-
Line break
-
Link to http://www.adeointernetmarketing.com with anchor text “web design”. The id attribute is being set as an example for the CSS tutorial.
-
An image that points to a file called “picture.jpg”
-
Closing body tag
-
Closing html tag
For a complete list of tags, visit the W3C site element reference.