HTML Programming

From Wikibooks, the open-content textbooks collection

(Redirected from HTML)
Jump to: navigation, search

Contents

[edit] Introduction

HTML is a markup language designed for creating webpages. That is, information presented on the World Wide Web. Defined as a simple "application" of SGML, which is used by organizations with complex publishing requirements, HTML is not an Internet standard, but the recommendations maintained by the World Wide Web Consortium (W3C) are generally accepted as a de facto standard. The most recent version is HTML 4.01, and HTML 5 is under development. The move to XHTML has been put on hold, since the most frequently used browser, Microsoft's Internet Explorer, does not support XHTML (it accepts XHTML as HTML if the server presents it as such, but does not display it if it is correctly served as XML/XHTML).

HTML files are text files stored on computers connected to the Internet. These files contain markup, that is, instructions for the program on how to display or process the text in plain text format. HTML may be displayed by a visual web browser, aural browser (one that reads the text of the page to the user), Braille reader (converts pages to a braille format), email client, or a wireless device like a cellular phone.

[edit] Before we start

First you'll need a simple text editor such as Notepad, the editor native to Microsoft® Windows. If you are using Mac, you can use TextEdit. If you are running Linux or Unix there are a number of choices, see Linux text editors for a list. Do not, I repeat do not, use Microsoft Word or OpenOffice.org. It will get you into a big mess.

For something more powerful than notepad, you can try one of the many HTML editors or text editors available. These range from simple text editors with a few HTML features up to complex WYSIWYG editors with website project management and development environments.

If you're not afraid of spending a little cash, you can buy an HTML editor such as Adobe Dreamweaver, GoLive, HomeSite, Contribute or Microsoft FrontPage. There are also free(open source) HTML editors out there including Nvu (for Windows, Mac OSX, and Linux) and Quanta Plus (only Linux versions available). It is relatively simple to find these programs but it is usually better to have a basic knowledge of HTML using a code-based HTML editor before delving into the WYSIWYG editors (i.e. Dreamweaver, GoLive, Contribute, Frontpage, Nvu, and Quanta+).


Secondly, you'll also need a web browser to preview your documents. It is important to test your documents in several browsers as HTML is interpreted differently by different browsers. Microsoft Internet Explorer is the most widely used browser, currently holding about 58% of the market share. Other common browsers include Mozilla Firefox, Safari, Opera, and Lynx. Later, if you want to make sure that your documents are understandable in a text only environment, Lynx is a good place to test them. A good Windows version of Lynx is available at http://csant.info/lynx.htm.

[edit] A simple document

Let's start with a simple document. Write this code in your editor, or copy-and-paste it, and save it as index.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <title> Simple document </title>
 </head>
 <body>
  <p>The text of the document goes here.</p>
 </body>
</html>

Now open the document in your browser and see the result. From the above example, we can deduce certain essentials of a HTML document:

  • The first line of a valid HTML document must state which version of HTML the document uses. This example uses the strict variant of HTML version 4.01.
  • The HTML document begins with a <html> tag and ends with its counterpart, the </html> tag.
  • Within the <html></html> tags, there are two main pairs of tags, <head></head> and <body></body>.
  • Within the <head></head> tags, there are the <title></title> tags which enclose the textual title to be shown in the title bar of the web browser.
  • Within the <body></body> is a paragraph marked by a <p></p> tag pair.
  • Most tags must be written in pairs between which the effects of the tag will be applied.
    • <em>This text is emphasized</em> – This text is emphasized
    • This text includes <code>computer code</code> – This text includes computer code
    • <em>This text is emphasized and has <code>computer code</code></em> – This text is emphasized and has computer code
  • HTML tag pairs must be aligned to encapsulate other tag pairs, for example:
    • <code><em>This text is both code and emphasized</em></code> – This text is both code and emphasized
    • Don't do this – <em><code>This mark up is erroneous</em></code>

[edit] Validating HTML

There are fixed rules that define which tags may be used in an HTML document and where they can be placed. As your documents get larger it can be difficult to be sure that everything is correct. There are automated tools that will check your HTML for you. These tools are known as validators. Several validators are free to use, including

Try uploading the index.html file you created in the previous section to one of the validators listed above. Alternately both validators have options that let you enter HTML directly so you could cut and paste the example from this page into the validator.

It is good practice to validate each HTML document you create. Note that many visual design tools will let you create invalid webpages so it is important to check pages produced in these packages as well.

If the HTML document is valid it means that the webpage will display exactly as you programmed it to on stable W3C compliant browsers. In the case of text browsers such as Lynx, the text will format correctly so that it can be read easily by the consumer. Knowing HTML also means that you can edit the pages created using WYSIWYG programs manually, as these will without fail throw in unnecessary coding which clogs up and slows down the loading of your page.

[edit] Book Chapters

There are various chapters of this book under the topics below.

[edit] Basic HTML

The html, head and body elements denote the general outline of every HTML document. We will now examine the HTML elements in more detail.

[edit] "Advanced" HTML

Techniques that shouldn't be used:

[edit] Appendices

[edit] Other Wikibooks

[edit] Other Tutorials

Retrieved from "http://en.wikibooks.org/wiki/HTML_Programming"
Personal tools