HyperText Markup Language
HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like
<html>), within the web page content. HTML tags most commonly come in pairs like<h1>(opening tag) and</h1>(closing tag), although some tags, known as empty elements, are unpaired, for example<img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. [wikipedia]
HTML is often called a programming language but it is not. Programming languages are ‘Turing-complete’, or ‘computable’. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data structures. HTML is much easier than all of that. HTML is simply a ‘markup language’ used to define a logical structure rather than compute anything. Another common sloppy abuse of terminology is ‘alt tags’ – no such thing, but ‘alt’ is an attribute of the ‘img’ tag.
Tags, and Attributes
Tags specify structural elements in a document, such as headings:
<h2> Tags and Attributes </h2>
Tags begin with a left-angle bracket < and end with a right-angle bracket >. The first word between the angle brackets is the tag’s name. Any further words and characters are the attributes, e.g. align="right". A tag is therefore the basic ‘item’, and an attribute is some extra detail such as how to align the content. An element comprises three parts: a start tag, content, and an end tag. Most tags possess ‘closing tags’ such as </h2> which mark the place where the effect of the ‘opening’ tag should stop. Tags are case-insensitive. You can write them in small letters, big letters, or any mixture. A common convention is to write them in caps so they stand out from the rest of the document. Tags should nest properly: if you want for example to make a part of the header in italics:
<h2> Tags <i>and</i> Attributes </h2>
Also, HTML documents are free-format – you can use spaces and tabs anyhow you like, and break lines anywhere. White space and line breaks will not affect the document appearance in a browser except when used inside certain special tags which we’ll describe later. Some people find HTML can be hard to read. This need not be so if it’s written tidily. My own preference is to indent the text by one tab, so that the source has a left margin. Structural tags can then be placed in the margin, and it’s easy to read the source. Browsers allow a great deal of flexibility about which tags you need to put into a web page. If you are designing your pages for only one browser that may be fine, but as soon as you want to support several browsers then you might want to look into validation, which is the process of checking HTML documents against the standards.
Document Structure
An HTML document consists of two main parts: the head, and the body. The basic document structure is
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>
The head contains information about the document, such as links to pages that could be preloaded; and the body contains the document to be displayed. The main head element you need to know about is the <title> tag. Every document should have a title – it appears as a ‘label’ on the browser window, and when a user bookmarks it or looks in their history list – it’s the text they’ll see. Take care to make the title a good meaningful one. “Introduction” isn’t much help if the user can’t remember what was being introduced.
<title>A Basic Introduction to HTML</title>
Another useful Head tag is the <meta> tag if you want to optimise your pages for search engines. Here’s a slightly more realistic HTML document:
1:<!DOCTYPE html><html> 2:<head> 3: <title>A Simple Document</title> 4: <meta name = "Keywords" 5: content = "Hypertext"> 6:</head> 7:<body> 8:... This stuff is what the user sees ... 9:</body> 10:</html>
The numbers and colons are not part of the HTML file, but serve to associate the following comments with the lines above:
- Declares this to be an HTML document (version 5)
- The head contains items that are about the document.
- The title used in the browser title bar, bookmark lists, listings, etc.
- Meta tags can be used to add information not already specified in the HTML/HTTP system.
- Some search engines make use of these keywords, as well as those in the body.
- Closes the head.
- body contains the document’s displayable content.
- Text markup commands. View this document source for examples..
- Closes the body.
- Closes the HTML.
HTML also supports interactive forms, “hotspots” in pictures, more versatile formatting choices and styles, and formatted lists, as well as several other improvements, such as an e-mail URL, so hyperlinks can be made to send e-mail mechanically. For example, choosing an e-mail address in a portion of hypertext opens a mail application, ready to send e-mail to that address. Now we’ll move on to body tags. This is where the action is..
Headers
The line just above was a header, i.e. a title for a new section of the document. There are 6 headers: h1, h2, h3, h4, h5, and h6. H1 is the “main” header, usually used once at the top of the document. H6 is the “smallest” header and is rarely used, though it’s often abused to make small bold text (use the FONT tag or style sheets instead). One of the original philosophies about HTML was that it should be designed for software tools to extract useful information from HTML documents. The header tags were supposed to be useful for generating a ‘table of contents’.
Anchors (Links)
The fundamental feature of the WWW that makes it so powerful is of course, hypertext links. The tag that creates those links is called the anchor tag (A). It has one commonly used attribute: href, which specifies the URL of the target document.
Images
Images have made a profound difference in the way the web looks. Probably there would not have been the incredible explosion of interest in it if inline images had not been added..
<img src = "/Icons/graphics.gif">
The above example shows the simplest way to make an inline image. You can wrap it inside anchor tags and then it will be a clickable image:
<a href = "../../Graphics/"> <img src = "/Icons/graphics.gif"></a>
But it’s a good idea to specify the image dimensions (allows the browser to lay out the page sooner) and what to do if the browser doesn’t have image support or if the user has image loading turned off.
<a href = "../../Graphics/"> <img src = "/Icons/graphics.gif" width = "108" height = "44" border = "0" hspace = "16" alt = "Graphics" align = "left" ></a>
Character Styles
Let’s see how to emphasise some text..
Let's see how to <em>emphasise</em> some text..
em is called a logical style: you specify what you’re trying to do, rather than how to do it. Another one is strong.
Another one is <strong>strong</strong>.
Emphasis is usually indicated with italics.
Emphasis is usually indicated with <i>italics</i>.
‘Strong’ is usually rendered as bold.
'Strong' is usually rendered as <b>bold</b>.
And if you want something to appear exactly as you typed it, use pre.
And if you want something to appear exactly as you typed it, use pre.
Note that HTML tags are still obeyed inside pre. If you want to use angle brackets or HTML tags then either write < for < and write > for >. And the font tag lets you do more..
<font size="5" color="red"> And the font tag lets you do more.. </font>
Paragraphs and Line Breaks
As mentioned above – white space and line breaks are ignored by the browser except inside special tags. You have therefore to provide tags to indicate them. If you want a line break use
<br>
and if you want a paragraph break (i.e. line break and then an empty line between paragraphs) use
<p>
The paragraph tag has an optional closing tag </p>.
Lists
There are several kinds of lists. Three important ones are
- Ordered.
- Unordered.
- Definition.
An ordered list has numbered items. To make the above list:
<ol> <li> Ordered. <li> Unordered. <li> Definition. </ol>
To make it without numbered items:
- Ordered.
- Unordered.
- Definition.
A definition list looks like this:
- Ordered Lists.
- The list items are ordered, e.g. by numerals.
- Unordered Lists.
- The list items aren’t ordered particularly.
- Definition Lists.
- The list items have two parts: a title DT and a description DD.
A definition list is made like this:
<dl> <dt> Ordered Lists. <dd> The list items are ordered, e.g. by numerals. <p> <dt> Unordered Lists. <dd> The list items aren't ordered. <p> <dt> Definition Lists. <dd> The list items have two parts: a title dt and a description dd. </dl>
Tables
Tables consist of rows containing headers and data cells:
| Name | Tag | Typical Appearance |
|---|---|---|
| Table | table | A table like this |
| Row | tr | A row like this |
| Head | th | Bold, centered |
| Data | td | Plain, left aligned |
<table border="2" cellpadding="8" bgcolor="white"> <tr><th> Name </th><th> Tag</th> <th> Typical Appearance </th></tr> <tr><th> Table </th><th> table</th> <td>A table like this </td></tr> <tr><th> Row </th><th> tr </th> <td> A row like this </td></tr> <tr><th> Head </th><th> th </th> <td> Bold, centered </td></tr> <tr><th> Data </th><th> td </th> <td> Plain, left aligned</td></tr> </table>
The table tag attributes used here are
- bgcolor
- The table’s background color. You can also use this attribute in the table cells.
- border,
- specifies the width in pixels for the border (0 for no border);
- cellpadding
- How much space between the border and the cell contents.
Further Study
HTML Tutorial – (HTML5 Compliant)
With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn – You will enjoy it. This HTML tutorial contains hundreds of HTML examples. With our online HTML editor, you can edit the HTML, and click on a button to view the result.
HTML Beginner Tutorial
The HTML Beginner Tutorial assumes that you have absolutely no previous knowledge of HTML or CSS. It should be easy to follow if you work through each page and then, to celebrate, everything that’s covered is brought together at the end, before moving on to the CSS Beginner Tutorial. The primary thing to keep in mind, the supermagic key, is that HTML is used for meaning and CSS is used for presentation. HTML is nothing more than fancy structured content and the visual formatting of that content will come later when we tackle CSS. You might find different approaches elsewhere on the web but HTML Dog focuses on best practice from the outset and getting into the frame of mind of doing things the right way from the start will lead to much better results in the end.
Welcome to HTML.net
People often think it is extremely difficult to make a website. That is not the case! Everyone can learn how to make a website. Use our tutorials on HTML and CSS and PHP and JavaScript and start building your own website in about an hour.
