Tutorial/Building a simple site

Weaving your web
The feature of HTML which makes the World Wide Web possible as a "web" of information is known as hyperlinking. By using hyperlinks in addition to the above, you can write any number of pages which link to each other, but they will be very plain. A hyperlink consists of a bit of text and a URL; when it is followed (typically by a click to the text) the URL is accessed. The element is the one for this job:

It's about time that we explain attributes to you. In this example, an attribute named href has a value of "http://htmlcss.wikia.com/wiki/Tutorial". In both examples the tag has http-equiv and content attributes. Attributes are only placed in opening tags, never in closing ones, and are separated from the tag's name ("a" and "meta" in these cases) and any other attributes by spaces. An attribute must have a value which is enclosed in double quotes and separated from the attribute's name by = (an equals sign).

Images
Now for another cool thing: images. That's right, you can embed a picture anywhere in your HTML document. This is useful not only for photos of family and beautiful landscapes; images can communicate things about a page in a more visually-appealing manner than simple text. However, you should always somehow include text for all of your meaningful images and other visual cues which is appropriate for replacing them, communicating the same things to the visually impaired (via voice or Braille) and users of search engines. See accessibility for more information.

Images are included in a similar way to links, except the text goes in the alt attribute rather than between the tags. The URL, which goes in the src attribute, is automatically followed by the browser and, if the resulting file can be displayed as an image, it is positioned according to the tag's placement in the HTML source.

Notice that the img tag has that weird ending forward slash, like the meta tag you've seen so many times. That means it's a self-closing tag and doesn't require a closing tag like most other opening tags do. Like a pair of matching tags, it still produces an element - but this one is called a void or empty element. Only a few types of elements may be void, and every one should have this forward slash in its single tag, with a space just before.

Many images should have some text in the alt attribute, to represent the image to programs that can't process it - such as search engines and screen-readers. However, a textual representation of this particular image is simply clutter and should be left out; the user knows where s/he is and doesn't need to be informed of the image's presence.

Building a menu
The two major display modes for HTML elements are inline and block; block elements normally force later ones onto separate lines while inline ones do not, and inline elements must not contain block elements. Vertical menus are difficult because they need to be block-level, yet they also need to be beside the content. This can be managed, but let's do a horizontal menu first.