Fandom

HTML & CSS Wiki

Tutorial/Building a simple site

< Tutorial

648pages on
this wiki
Add New Page
Comments0 Share

Weaving your webEdit

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 <a> element is the one for this job:

<!DOCTYPE html>
<html>
    <head>
        <title>Linking</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p>This <a href="http://htmlcss.wikia.com/wiki/Tutorial">link</a> brings you back to this page.</p>
    </body>
</html>

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 <meta /> 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[1] which is enclosed in double quotes[2] and separated from the attribute's name by = (an equals sign).

ImagesEdit

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 <img /> tag's placement in the HTML source.

<!DOCTYPE html>
<html>
    <head>
        <title>Images</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p><img src="http://htmlcss.wikia.com/wiki/Wiki.png" alt="" /></p>
    </body>
</html>

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,[3] with a space just before.[4]

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 menuEdit

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.

Notes on inline versus block-levelEdit

[5] [6] [7] [8]

ReferencesEdit

  1. Actually HTML syntax allows the omission of values for certain attributes, but this is an unnecessary complexity for a tutorial and incompatible with XHTML anyway.
  2. Again, HTML has exceptions to this; single quotes may be used or quotes may be omitted altogether if the value only consists of a certain limited set of characters. But omitting them is a bad idea, as it decreases the page's maintainability.
  3. In HTML syntax both the slash and the space may be omitted; in older versions the slash actually added a newline after the element, but now it is just ignored.
  4. The space is not actually required by XHTML syntax, but is necessary for compatibility with older browsers.
  5. Block-level and inline elements in HTML 4.01
  6. HTML 4 Block-Level Elements
  7. HTML 4 Inline Elements
  8. Bock-Level vs. Inline Elements

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.