Search Alma: > Log-in to my Alma


HTML Baby Steps

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.

The Element
Start Tag Tag Contents End Tag
<tag>text and elements inside tag</tag>

All tags have a similar structure. They use angle brackets (&lt; 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.

The six tags you can't (maybe) live without
Tag Name Significance
pParagraph
divDivision or section
ulUnordered List
tableTabular Data
aHyperlink (aka Anchor)
imgImag

Next, we'll learn how to  beautify pages with a little class.

 

Alma is one of seven Michigan colleges and universities to hold membership in the Omicron Delta Kappa Society, the national leadership society that recognizes and encourages superior scholarship, leadership and exemplary character. The College also has 19 other national departmental honor societies.

 

Student Profile

Terra Teague

Terra Teague
Graduation: 2008
Major: Business Administration
From: Monroe
Interests: Business Simulations, Athletics

Terra’s Spring Term experience in China is a tremendous help understanding the relationship the U.S. has with one of its largest trading partners. The business administration major from Monroe has seen first hand the economic effects on southeast Michigan of low-cost imports and Chinese monetary policies.