HTML basic tags summary

Introduction to Digital Media , ARS 162
Instructor: Barbara Lattanzi

HTML Basic Tags - Summary Reference sheet

Here are some of the tags which we are learning.

You should use lower case letters only for XHTML tags, with the exception of the very first DOCTYPE tag and anything within quotation marks.

Visual presentation will be more flexibly handled by combining HTML with CSS (cascading style sheets), described with an example at the bottom of this page.

Here are some more tags we have used, plus some additional tags to try within the BODY of your document (between the "body" tags):

Put these hyperlink tags around any text or around any picture on your webpage that will be clicked on to connect to another webpage. You can use an 'absolute' web address (a whole url) or a 'relative' address (one of your own other webpages)

Here is the tag for embedding an image into your page:

You can combine the hyperlink tag and the image tag to make your image a hyperlink to click on:

You can change the ATTRIBUTES (qualifying information) of certain tags by just adding some information within the tag:

<body bgcolor = "#FFFFFF">
Check what color this code (#FFFFFF) indicates, then try experimenting with others.

Just like changing the background color, you can also change the color of your text and hyperlinks by adding parameters to your body tag. This example changes the default blue color of links by setting a new link color as well as a different color for visited links:

Here is away to vary your images size and proportions - just by changing the height and width parameters to whatever size (measured in pixels) that you want. A pixel is a minimum unit of a digital image, like the screen dots of a printed image.

or try distorting the image by changing the relative height and width:

CENTER your images and texts with the div tag, indicating its position by means of an alignment parameter

<div align="center" > your text or image...</div>

You can break a line into two lines (or as many lines as you want) with the break tag:

my first line of text goes here and then <br / >
there is my second line of text and then <br / >
I type yet another line of text <br / >

You can position your images on the page by using the break tag and the center tag too:

You can emphasize your text with the <em> tag: your <em>text goes </em> here...

you can bold your text with the <strong> tag: your <strong>text goes</strong>here...

You can <strong><em> both bold and emphasize your text </em> </strong> together at once.

You can make a paragraph space between blocks of text by using this paragraph tag: <p>

You can use "heading" tags to make your text much larger or much smaller than the font parameter of "size" will allow.

<H1>the largest </H1> (not illustrated here)
<H7> the smallest </H7> (not illustrated here)

How can you put some STYLE into your text?

<font face="verdana" color = "#FF3333" size="5"> your text goes here... </font>
Note that with this "size" parameter you can change the size of your font, indicating a number between 1 and 7.

Later we will have much greater flexibility with fonts sizes, leading, and other characteristics when we use CSS (cascading style sheets).

How can you put some STYLE into your text?

Instead use CSS Style Sheets to design your text. Also you can use CSS styles for every aspect of your html pages.

There are a number of ways to use CSS (Cascading Style Sheets). This is only one way.

Within the HEAD tags, place all your CSS syle "rules" between style tags. A CSS "rule" can be used to define how any tag will look. Here is how you can define the look of some text by defining the style and look of the "p", for example.. The "p" (paragraph) tag can be used to surround most text.

Here are the rules that we will give to an "h" (headline) tag. Since "h" tags are a set of tags from h1 to h6, ths example will define the style rules for the h2 tag.

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

color: #FF0000;

background-color:#999999;

font-size:40px;

line-height:46px;

}

</style>

The use of CSS allows much greater flexibility in the way things appear on your webpage.

Here is how text looks when placed within <h2> </h2> tags:

Here is how the text looks when it is conforming to the CSS rules that were made for any text on this webpage that uses the h2 tag. (check the source-code for this page)