=====First steps in HTML===== This is a simple introduction to ""HTML"". After reading this tutorial you should be able to construct a simple web page. ====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?==== 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)
A paragraph
%% 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)A paragraph with an important word.
%% 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)A paragraph with an important word and an emphasised word.
%% A child element element can have children of it's own: %%(html4strict)A paragraph with an important and emphasised word.
%% 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)This is wrong.
This is correct.
This is wrong.
This is correct.
%% ===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)This is wrong.
This is correct.
%% 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. ====Your first HTML page==== 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) %% An html element has exactly two children, the ##head## and the ##body## element: %%(html4strict) %% 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)Hello world!
%% 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. ====What now?==== 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]]. ---- CategoryWebDesign