Beginning HTML
A Template
Copy this code into a file called template.html and open it with a web browser.<!doctype html5 lang="en"> <html> <head> <meta charset="utf-8"> <title> Document Title </title> <meta name="author" content="Seb"> <meta name="description" content="HTML Course"> </head> <body> <h1>Web Page title</h1> <h2>Web Page Sub-title</h2> <article> <h1>Article Heading</h1> <section> <h1>Section 1 heading</h1> <p> Some text </p> </section> <section> <h1>Section 2 heading</h1> </section> </article> </body> </html>
You should see
this.
HTML Editors
If you use an editor which knows about it may make things easier for you. These editors help you to write
correct HTML and give you hints about what to do next. Some people find Bluefish
quite useful for this. You can install Bluefish on your computer. Here is a list of HTML editors that you can choose from.
Try some of these out.
The Structure of an HTML Document
An HTML document is made up of elements.
Elements
- Normal Elements : These elements can contain other elements.
- Text Elements : These elements do not contain other elements. They are just text.
- Void Elements : These elements do not contain other elements. They contain nothing. For example IMG .
The bits in angled brackets < and > are called tags . When we write elements, all except the void elements have a start tag and an end tag.
The html code, above, has an HTML element which starts with the start tag:
<HTML>and ends with the end tag:
</HTML>The HTML element, above has two children:
- A HEAD element.
- A BODY element.
Again, we see the HEAD element which starts with the start tag:
<HEAD>and ends with the end tag:
</HEAD>and the BODY element which starts with the start tag:
<BODY>and ends with the end tag:
</BODY>
Continuing, further, the HEAD element, above, has four children, a META element, followed by a TITLE element and then two more META elements.
Then BODY element has three children: an H1 element, follwed by an H2 element and finally an article element.
META elements are examples of Void Elements : These elements do not contain other elements. They contain nothing. Since META elements contain nothing they do not have an end tag.
Element Attributes
Some elements are written like this:
<meta name="author" content="Seb">Inside the start tag for elements we can have lists of attributes each of which can have a value. This meta element above has two attributes: name and content which have the values "author" and "Seb" respectively.
Another example of an element with attributes is the A element that is used for links (we will explore this later).
<a href="http://www.google.co.uk">click here</a>This one has one attribute href with value "http://www.google.co.uk".
The HTML Document Tree
The HTML above gives rise to the following strucure:
html
/ \
------------------ ---------------
| |
| |
head body
/ | | \ / | \
/ | | \ / | \
/ | | \ / | \
meta title meta meta h1 h2 --------------\
| / | \
| / | \
"Document Title" "Web Page title" "Web Page Sub-title" article\
/ | \
/ | -----\
/ | \
h1 section section
/ | \ \
/ | \ \
/ | \ \
"Article Heading" h1 p h1
| \ \
| \ \
"Section 1 heading" "some text" "Section 2 heading"
This structure is called the document tree. Trees have a root which is the element at the top and a (possibly empty) list of children. Each child itself is a tree. Notice, we have not included the attributes in the tree.
Trees are very important in computer science. If you would like to read more aout trees please see here.
If you would like to read more about the formal structure of elements please see www.w3.org/TR/html5/syntax.html#elements-0.
-
<html> <head> <meta charset="utf-8"> <title> Starts and Stripes </title> <meta name="author" content="Freddy"> </head> <body> <h1>Fish Fingers</h1> <article> <h1>Article Heading</h1> <section> <h1>Section 1 heading</h1> <p>Chips</p> </section> </article> </body> </html>
-
<html> <head> <meta charset="utf-8"> <title> Document Title </title> <meta name="author" content="Seb"> <meta name="description" content="HTML Course"> </head> <body> <article> <h1>Article Heading</h1> <section> <h1>one</h1> <p>click <a href="bla"> here</a></p> </section> <section> <h1>two</h1> </section> <section> <h1>three</h1> </section> </article> </body> </html>
Checking the Syntax of you HTML
You can check your HTML for valid syntax here. Always check your HTML code before completing it.
Adding Images (Pictures) to your Web Pages
To add images to a web page we use the IMG element. This is an example of a void element. It does not need an end tag since it doesn't have any children. Here is an example:This displays:
assuming you have got an image called flea-1.jpg in the images sub-directory (folder) of the directory containing your HTML document. If you don't have the image in the right place you will see:
which means your browser cannot find the image.
You can also display images that exist somewhere else on the Web. For example
Will Display:
Changing the Displayed Size of your Image
Now try:
You will see the smaller flea:
We have added a width attribute to this IMG element and given it the value 100.
- Here is more of an explanation of the IMG element. Experiment with all the other (non-deprecated) attributes to display your images differently.
- If you don't know already, find out what deprecated means.
Style
Now look at:
<!doctype html5 lang="en">
<html>
<head>
<meta charset="utf-8">
<title> Document Title </title>
<meta name="author" content="Seb">
<meta name="description" content="HTML Course">
<style type="text/css">
h1{
color:red;
}
</style>
</head>
<body>
<h1>Web Page title</h1>
<h2>Web Page Sub-title</h2>
<article>
<h1>Article Heading</h1>
<section>
<h1>Section 1 heading</h1>
</section>
<section>
<h1>Section 2 heading</h1>
</section>
</article>
</body>
</html>
<style type="text/css">
h1{
color:red;
}
</style>
body{
background-image: url(silly4.jpg);
}
body > h1{
text-align:center;
}
body > h2{
text-align:center;
}
article > h1{
color:red;
}
section > h1{
color:blue;
exercise:before
{content: "Exercise: ";}
diagram{
display:block;
text-decoration:none;
border: 5px double;
color: #ffffff;
background-color: #404090;
margin: 5px 5px 9px 5px;
padding: 15px 0;
position: relative;
}
exercise{
display:block;
text-decoration:none;
border: 5px double;
color: #ffffff;
background-color: green;
margin: 5px 5px 9px 5px;
padding: 15px 0;
position: relative;
}
