While the content management system allows you to create and change web pages without knowledg of HTML, it also limits what you can change, and how much you can customize a page. If you want to really make your page look good, you'll need to know a little bit about the building blocks of HTML first.
The Tag
Any web page is nothing but
text. You can see this text in most web browsers by choosing "View
> Page Source" from the menu. Text is surrounded by a
series of instructions called tags.
The web browser interprets these tags to render the page as you see it.
This tutorial will work with a very small set of tags to get you
started.
Anatomy of an Element
All elements are made up of two tags, each element has a start and an end tag. Tags use angle brackets (< and >) to denote when they begin and end too differentiate themselves from text. An end tag is denoted with a solidus (forward-slash) after the first angle bracket.
| Start Tag | Tag Contents | End Tag |
|---|---|---|
| <tag> | text and elements inside tag | </tag> |
All tags have a similar
structure. They use angle brackets (< and >) to
denote
when they start and end. The p
tag in HTML denotes a paragraph; a p
tag would look like the
following:
<p>Text inside tag</p>
It would look like this in a browser:
Text inside tag
Tags can have text and other
tags inside them, but some tags have nothing inside them. These empty
tags look a little different.
An empty p tag would look like this:
<p />
Finally, tags can also supply
additional information to browsers with attributes. Attributes take the
fom of name="value", and are separated from each other by spaces. Attributes
are only inside side the start tag.
A p tag with a class attribute of "centered" and a
title
attribute of "Example Paragraph" would look like
this:
<p class="centered" title="Example Paragraph">Text inside tag</p>
And appear like this:
Text inside tag
Notice how the class attribute affected the tag? Also, if you place your mouse over the text, you'll see a tooltip with the text of the title attribute. That's all there is to it! Of course, there are many tags and many attributes, but we're only going to deal with the ones that will help make your pages more attractive.
Different tags do different things based on what the browser knows how to do with them. That's why most tags describe properties instead of behaviors. This lets web pages work in a variety of media: a tag that only makes things italic doesn't mean much to a browser for the visually impaired, but a tag denoting emphasis or a citation does. We'll be working with the following six tags, which are basic building blocks for a web page.
| Tag Name | Significance |
|---|---|
| p | Paragraph |
| div | Division or section |
| ul | Unordered List |
| table | Tabular Data |
| a | Hyperlink (aka Anchor) |
| img | Imag |
Next, we'll learn how to beautify pages with a little class.
