Hello! HTML5 and CSS3 available now
Early access to HTML5 in Action available now
Wiki source for HTMLBeginners
=====Beginning HTML=====
This is a beginners guide to ""<acronym title="HyperText Markup Language">HTML</acronym>"". After reading this tutorial you should be able to construct a simple web site containing a few pages, each page using common HTML elements such as headings, paragraphs, lists, images and links. Before starting this tutorial you should be comfortable with the information presented in the [[HTMLFirstSteps HTML first steps tutorial]].
====Review of First Steps====
In the [[HTMLFirstSteps HTML first steps tutorial]] we covered the following topics:
~- HTML is a Markup Language used to describe content
~- HTML documents are made up of elements
~- Elements are made up of tags and text
~- Elements can contain other elements
We also ended up with the following page:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
</body>
</html>
%%
====Links====
The H in HTML stands for Hypertext, and the key feature of hypertext documents is that they can link to other hypertext documents (in a web - if you ever wondered where the name came from, now you know). In HTML, links are added with the anchor element - starting tag <a> and an ending tag </a>:
%%(html4strict)
<a>This is an anchor element</a>
%%
As a link the above example is completely useless, because it doesn't link to anything. An anchor element can be a link or it can be a target for another link (or both), to make it useful we need to use attributes. Attributes go inside the opening tag of an element, they consist of an attribute name, an equals sign and then an attribute value. Usually the attribute value is placed in double quotes, this is not always required but it's a good habit to get into as you will encounter situations where the values have to be in quotes for your page to work. To make the anchor a link target use the name attribute:
%%(html4strict)
<a name="first_link">This is the first anchor</a>
<a name="second_link">This is the second anchor</a>
%%
To make an anchor element link to a target, use the href attribute:
%%(html4strict)
<a href="#first_link">This links to the first anchor</a>
<a href="#second_link">This links to the second anchor</a>
%%
The '#' indicates to the browser that the link is internal in the document. Note that you can have both targets and links on the same anchor element:
%%(html4strict)
<a name="first_link" href="#second_link">This is the first anchor which links to the second anchor</a>
<a name="second_link" href="#first_link">This is the second anchor which links to the first anchor</a>
%%
Don't worry if this is starting to make your head spin, an example should make things more clear. Have a look at [[http://www.boogdesign.com/linkexample.html this example page]]. Click on the links at the top of the page and notice how your browser scrolls to the anchors further down the page, right click and select 'View Source' (in Firefox, 'View Page Source') and examine how the anchors are constructed as both links and targets. Now save this page to the same directory as your hello.html page from the [[HTMLFirstSteps HTML first steps tutorial]] (if you did 'View Source' in Internet Explorer you can save the page direct from Notepad in the same way as you saved the hello.html page before) - you should end up with a directory which contains both hello.html and linkexample.html. Now we are going to add an anchor in hello.html which links to linkexample.html. To add a link to another file in the same directory all you need to do is put the file name in the href attribute of the anchor element:
%%(html4strict)
<a href="linkexample.html">This links to another page</a>
%%
Add the above code into your hello.html file, it can go anywhere inside the <body> element, if you like put it inside a new paragraph. Open hello.html in your browser and check your link takes you to the new page, if it doesn't work check and make sure you saved the linkexample.html file to the correct place and that it's still called linkexample.html (and not linkexample.html.txt). For the next step, we're going to link to a specific paragraph in the linkexample.html file from the hello.html file. The code to do this is a simple combination of the links you're already familiar with:
%%(html4strict)
<a href="linkexample.html#third">This links to the third paragraph on another page</a>
%%
Add this new link into your hello.html file, you should end up with something like this:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
<p><a href="linkexample.html">This links to another page</a></p>
<p><a href="linkexample.html#third">This links to the third paragraph on another page</a></p>
</body>
</html>
%%
Finally, we're going to add a link to another website. To link to another website you create an anchor with an href attribute which has as it's value the <acronym title="Uniform Resource Identifier">URI</acronym> of the site you want to link to. The <acronym title="Uniform Resource Identifier">URI</acronym> of a website is simply what appears in the address bar of the browser when you visit the site, usually it begins with 'http':
%%(html4strict)
<a href="http://www.boogdesign.com/">This links to another website</a>
%%
Add the above anchor into your hello.html page and try it out. Try adding links to Google or Yahoo!, or your favourite website.
----
CategoryWebDesign
This is a beginners guide to ""<acronym title="HyperText Markup Language">HTML</acronym>"". After reading this tutorial you should be able to construct a simple web site containing a few pages, each page using common HTML elements such as headings, paragraphs, lists, images and links. Before starting this tutorial you should be comfortable with the information presented in the [[HTMLFirstSteps HTML first steps tutorial]].
====Review of First Steps====
In the [[HTMLFirstSteps HTML first steps tutorial]] we covered the following topics:
~- HTML is a Markup Language used to describe content
~- HTML documents are made up of elements
~- Elements are made up of tags and text
~- Elements can contain other elements
We also ended up with the following page:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
</body>
</html>
%%
====Links====
The H in HTML stands for Hypertext, and the key feature of hypertext documents is that they can link to other hypertext documents (in a web - if you ever wondered where the name came from, now you know). In HTML, links are added with the anchor element - starting tag <a> and an ending tag </a>:
%%(html4strict)
<a>This is an anchor element</a>
%%
As a link the above example is completely useless, because it doesn't link to anything. An anchor element can be a link or it can be a target for another link (or both), to make it useful we need to use attributes. Attributes go inside the opening tag of an element, they consist of an attribute name, an equals sign and then an attribute value. Usually the attribute value is placed in double quotes, this is not always required but it's a good habit to get into as you will encounter situations where the values have to be in quotes for your page to work. To make the anchor a link target use the name attribute:
%%(html4strict)
<a name="first_link">This is the first anchor</a>
<a name="second_link">This is the second anchor</a>
%%
To make an anchor element link to a target, use the href attribute:
%%(html4strict)
<a href="#first_link">This links to the first anchor</a>
<a href="#second_link">This links to the second anchor</a>
%%
The '#' indicates to the browser that the link is internal in the document. Note that you can have both targets and links on the same anchor element:
%%(html4strict)
<a name="first_link" href="#second_link">This is the first anchor which links to the second anchor</a>
<a name="second_link" href="#first_link">This is the second anchor which links to the first anchor</a>
%%
Don't worry if this is starting to make your head spin, an example should make things more clear. Have a look at [[http://www.boogdesign.com/linkexample.html this example page]]. Click on the links at the top of the page and notice how your browser scrolls to the anchors further down the page, right click and select 'View Source' (in Firefox, 'View Page Source') and examine how the anchors are constructed as both links and targets. Now save this page to the same directory as your hello.html page from the [[HTMLFirstSteps HTML first steps tutorial]] (if you did 'View Source' in Internet Explorer you can save the page direct from Notepad in the same way as you saved the hello.html page before) - you should end up with a directory which contains both hello.html and linkexample.html. Now we are going to add an anchor in hello.html which links to linkexample.html. To add a link to another file in the same directory all you need to do is put the file name in the href attribute of the anchor element:
%%(html4strict)
<a href="linkexample.html">This links to another page</a>
%%
Add the above code into your hello.html file, it can go anywhere inside the <body> element, if you like put it inside a new paragraph. Open hello.html in your browser and check your link takes you to the new page, if it doesn't work check and make sure you saved the linkexample.html file to the correct place and that it's still called linkexample.html (and not linkexample.html.txt). For the next step, we're going to link to a specific paragraph in the linkexample.html file from the hello.html file. The code to do this is a simple combination of the links you're already familiar with:
%%(html4strict)
<a href="linkexample.html#third">This links to the third paragraph on another page</a>
%%
Add this new link into your hello.html file, you should end up with something like this:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
<p><a href="linkexample.html">This links to another page</a></p>
<p><a href="linkexample.html#third">This links to the third paragraph on another page</a></p>
</body>
</html>
%%
Finally, we're going to add a link to another website. To link to another website you create an anchor with an href attribute which has as it's value the <acronym title="Uniform Resource Identifier">URI</acronym> of the site you want to link to. The <acronym title="Uniform Resource Identifier">URI</acronym> of a website is simply what appears in the address bar of the browser when you visit the site, usually it begins with 'http':
%%(html4strict)
<a href="http://www.boogdesign.com/">This links to another website</a>
%%
Add the above anchor into your hello.html page and try it out. Try adding links to Google or Yahoo!, or your favourite website.
----
CategoryWebDesign