Hello! HTML5 and CSS3 available now
Early access to HTML5 in Action available now
Additions:
=====First steps in HTML=====
This is a simple introduction to ""<acronym title="HyperText Markup Language">HTML</acronym>"". After reading this tutorial you should be able to construct a simple web page.
You need tags to describe elements, and elements make up the structure of your HTML document - they describe your document to the web browser. You can describe headings and paragraphs and links and the web browser can then display your HTML appropriately (you will here this referred to as 'rendering' - the browser renders your HTML).
Tags usually come in pairs. A pair of tags and their contents make an element. You have an opening tag, then the contents of the element, and a closing tag. For example, a paragraph looks like this:
%%(html4strict)
<p>A paragraph</p>
%%
You can see that the closing tag is just the same as the opening tag except that is has a slash after the first angle bracket. Here are some examples of other simple elements:
%%(html4strict)
<h1>A major heading</h1>
<h2>A sub-heading</h2>
<strong>Strong (bold) text</strong>
<em>Emphasised (italic) text</em>
<title>A Page Title</title>
%%
===One tag elements===
There are some tags which don't have opening and closing tags, the entire element is just one tag. The common ones for text display are the line break and the horizontal rule. Neither of these requires any text content so they are described by just a single tag:
%%(html4strict)
<br> Line break
<hr> Horizontal rule
%%
You may also see a single element tag written like this:
%%(xml)
<br /> Line break
<hr /> Horizontal rule
%%
The difference is a subtle distinction in the type of HTML document, for now you don't need to worry about it as long as you are consistent throughout your page - if the document already has single tag elements of the first type continue to use the same ones.
====How do elements fit together?====
In the examples above, our elements just contained text. The key thing about HTML is that elements can also contain other elements:
%%(html4strict)
<p>A paragraph with an <strong>important</strong> word.</p>
%%
This is a paragraph element which contains a ##strong## element. We can say the ##strong## element is a child of the paragraph element. An element can have many children:
%%(html4strict)
<p>A paragraph with an <strong>important</strong> word and an <em>emphasised</em> word.</p>
%%
A child element element can have children of it's own:
%%(html4strict)
<p>A paragraph with an <strong><em>important and emphasised</em></strong> word.</p>
%%
It is important to remember that the parent element must always fully contain it's children. If you put an opening tag inside another element, you must remember to put the closing tag for the child element before the closing tag of the parent element. Think of it like boxes, the paragraph is a box, if you put ##strong## box inside then you have to put the whole box in, if some of the ##strong## box is left out then you have to break the box to do it. Here are some examples:
%%(html4strict)
<p>This is <strong>wrong.</p></strong>
<p>This is <strong>correct</strong>.</p>
<p>This is <strong><em>wrong</strong></em>.</p>
<p>This is <strong><em>correct</em></strong>.</p>
%%
===My browser displays things just fine with the wrong examples above, why should I bother?===
It displays just fine because the browser guesses what you really mean and changes your document before it displays it. This will work for the simple examples we've seen so far, but if you make the browser guess then sometimes it is going to guess wrong and you'll end up with something that isn't what you want. Also, different browsers make different guesses, so your page will render as you expect in one browser but not in another. For the same reason, you must also always remember to put both opening and closing tags for the elements that require them:
%%(html4strict)
<p>This is <strong>wrong</strong>.
<p>This is <strong>correct</strong>.</p>
%%
If you don't put the closing tags in, the browser will guess where to put them, and sometimes this will not be where you expect them to go.
Before we get to your first page you have to learn some 'structural markup'. This is elements which are not directly displayed but are used to structure your document. The first of these is the ##html## element itself:
%%(html4strict)
<html></html>
%%
An html element has exactly two children, the ##head## and the ##body## element:
%%(html4strict)
<html>
<head></head>
<body></body>
</html>
%%
The ##head## element contains //metadata// - information about your document. The ##body## element contains the actual elements which the browser will render. Into the ##head## element we put a ##title## element, and in the ##body## element we can put some of the elements above:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
</body>
</html>
%%
Copy the text above and paste it into a text editor, save it to your desktop as ##hello.html## (if you're using Notepad in Windows, make sure you change the drop down selector to say 'All Documents' when you're saving, otherwise the document will be saved as ##hello.html.txt## which won't work, if you're having trouble try [[http://www.irchelp.org/irchelp/security/trojanext.html turning on file extensions]]). You should now be able to double click on the file to have it open up in a web browser.
Currently your document is using the default browser styles so it looks a little bland, if you want to smarten it up a bit go to the [[CSSFirstSteps introductory CSS tutorial]].
If you'd rather learn about more complex elements, adding lists, links and pictures to your page, got to the [[HTMLBeginners beginners HTML tutorial]].
This is a simple introduction to ""<acronym title="HyperText Markup Language">HTML</acronym>"". After reading this tutorial you should be able to construct a simple web page.
You need tags to describe elements, and elements make up the structure of your HTML document - they describe your document to the web browser. You can describe headings and paragraphs and links and the web browser can then display your HTML appropriately (you will here this referred to as 'rendering' - the browser renders your HTML).
Tags usually come in pairs. A pair of tags and their contents make an element. You have an opening tag, then the contents of the element, and a closing tag. For example, a paragraph looks like this:
%%(html4strict)
<p>A paragraph</p>
%%
You can see that the closing tag is just the same as the opening tag except that is has a slash after the first angle bracket. Here are some examples of other simple elements:
%%(html4strict)
<h1>A major heading</h1>
<h2>A sub-heading</h2>
<strong>Strong (bold) text</strong>
<em>Emphasised (italic) text</em>
<title>A Page Title</title>
%%
===One tag elements===
There are some tags which don't have opening and closing tags, the entire element is just one tag. The common ones for text display are the line break and the horizontal rule. Neither of these requires any text content so they are described by just a single tag:
%%(html4strict)
<br> Line break
<hr> Horizontal rule
%%
You may also see a single element tag written like this:
%%(xml)
<br /> Line break
<hr /> Horizontal rule
%%
The difference is a subtle distinction in the type of HTML document, for now you don't need to worry about it as long as you are consistent throughout your page - if the document already has single tag elements of the first type continue to use the same ones.
====How do elements fit together?====
In the examples above, our elements just contained text. The key thing about HTML is that elements can also contain other elements:
%%(html4strict)
<p>A paragraph with an <strong>important</strong> word.</p>
%%
This is a paragraph element which contains a ##strong## element. We can say the ##strong## element is a child of the paragraph element. An element can have many children:
%%(html4strict)
<p>A paragraph with an <strong>important</strong> word and an <em>emphasised</em> word.</p>
%%
A child element element can have children of it's own:
%%(html4strict)
<p>A paragraph with an <strong><em>important and emphasised</em></strong> word.</p>
%%
It is important to remember that the parent element must always fully contain it's children. If you put an opening tag inside another element, you must remember to put the closing tag for the child element before the closing tag of the parent element. Think of it like boxes, the paragraph is a box, if you put ##strong## box inside then you have to put the whole box in, if some of the ##strong## box is left out then you have to break the box to do it. Here are some examples:
%%(html4strict)
<p>This is <strong>wrong.</p></strong>
<p>This is <strong>correct</strong>.</p>
<p>This is <strong><em>wrong</strong></em>.</p>
<p>This is <strong><em>correct</em></strong>.</p>
%%
===My browser displays things just fine with the wrong examples above, why should I bother?===
It displays just fine because the browser guesses what you really mean and changes your document before it displays it. This will work for the simple examples we've seen so far, but if you make the browser guess then sometimes it is going to guess wrong and you'll end up with something that isn't what you want. Also, different browsers make different guesses, so your page will render as you expect in one browser but not in another. For the same reason, you must also always remember to put both opening and closing tags for the elements that require them:
%%(html4strict)
<p>This is <strong>wrong</strong>.
<p>This is <strong>correct</strong>.</p>
%%
If you don't put the closing tags in, the browser will guess where to put them, and sometimes this will not be where you expect them to go.
Before we get to your first page you have to learn some 'structural markup'. This is elements which are not directly displayed but are used to structure your document. The first of these is the ##html## element itself:
%%(html4strict)
<html></html>
%%
An html element has exactly two children, the ##head## and the ##body## element:
%%(html4strict)
<html>
<head></head>
<body></body>
</html>
%%
The ##head## element contains //metadata// - information about your document. The ##body## element contains the actual elements which the browser will render. Into the ##head## element we put a ##title## element, and in the ##body## element we can put some of the elements above:
%%(html4strict)
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>My page</h1>
<p><strong>Hello</strong> world!</p>
</body>
</html>
%%
Copy the text above and paste it into a text editor, save it to your desktop as ##hello.html## (if you're using Notepad in Windows, make sure you change the drop down selector to say 'All Documents' when you're saving, otherwise the document will be saved as ##hello.html.txt## which won't work, if you're having trouble try [[http://www.irchelp.org/irchelp/security/trojanext.html turning on file extensions]]). You should now be able to double click on the file to have it open up in a web browser.
Currently your document is using the default browser styles so it looks a little bland, if you want to smarten it up a bit go to the [[CSSFirstSteps introductory CSS tutorial]].
If you'd rather learn about more complex elements, adding lists, links and pictures to your page, got to the [[HTMLBeginners beginners HTML tutorial]].
Deletions:
This is intended to be a simple introduction to ""<acronym title="HyperText Markup Language">HTML</acronym>"" (when it's finshed...).
Paragraphs, headings, oh my... Boxes within boxes within boxes
====How tags fit together====
Heads, bodies, titles... Bigger boxes.
So now we're ready to write your first page...
Now it's time to smarten things up a little, go to the [[CSSFirstSteps introductory CSS article]].
Additions:
=====Beginning HTML for Web Pages=====
====What is HTML?====
HTML is a Markup Language used to describe content, an HTML file is a text file with a specific structure. A web browser can take the HTML and render it graphically, this is happening all the time as you browse the web. You can easily see the HTML the web browser is using to render any page by right clicking on it and selecting 'View Source' (in Firefox, 'View Page Source') - try it now. You should see something like this:
{{image class="center" alt="Screenshot of view page source in Firefox" title="View Source in Firefox" url="/images/viewsource_a.png"}}
You'll see a lot of angled brackets (less than and greater than), these delimit 'tags' - so a tag is a less than bracket, followed by some text and then a greater than bracket, and the tags describe the structure of the HTML document.
====Why do I need tags?====
Paragraphs, headings, oh my... Boxes within boxes within boxes
====How tags fit together====
Heads, bodies, titles... Bigger boxes.
====Your first HTML page====
So now we're ready to write your first page...
====What now?====
Now it's time to smarten things up a little, go to the [[CSSFirstSteps introductory CSS article]].
====What is HTML?====
HTML is a Markup Language used to describe content, an HTML file is a text file with a specific structure. A web browser can take the HTML and render it graphically, this is happening all the time as you browse the web. You can easily see the HTML the web browser is using to render any page by right clicking on it and selecting 'View Source' (in Firefox, 'View Page Source') - try it now. You should see something like this:
{{image class="center" alt="Screenshot of view page source in Firefox" title="View Source in Firefox" url="/images/viewsource_a.png"}}
You'll see a lot of angled brackets (less than and greater than), these delimit 'tags' - so a tag is a less than bracket, followed by some text and then a greater than bracket, and the tags describe the structure of the HTML document.
====Why do I need tags?====
Paragraphs, headings, oh my... Boxes within boxes within boxes
====How tags fit together====
Heads, bodies, titles... Bigger boxes.
====Your first HTML page====
So now we're ready to write your first page...
====What now?====
Now it's time to smarten things up a little, go to the [[CSSFirstSteps introductory CSS article]].