Basic HTML coding

Troubleshooting your Web page
Putting images on your Web page

The building blocks of an HTML document

Every page MUST have the following:

Opening HTML tag: <HTML>

Opening head tag: <HEAD>

Title: <TITLE>Kathy Olson's Home Page</TITLE> (no more than six or so

words)

Closing head tag: </HEAD>

Body tag:

Simple version: <BODY>

Fancy version: <BODY BGCOLOR=“white” text =“blue” link=“green” vlink="#FF0000" alink="#00FF00">

(for more on this tag, see “Backgrounds,” below)

Main text of your document with images, links, etc. goes here

Closing body tag: </BODY>

Closing HTML tag: </HTML>

The <Head> tag

Put your title between the <head> and </head> tags. The title is the word or phrase that will be seen in the blue bar at the top of the screen in Netscape. Use paired tags:

<head>

<title>My homepage</title>

</head>

The <body> tag

The pair of body tags (<body> and </body>) delimit the area in which you will put your text, images and HTML tags.

The <body> tag is also where you can set some default characteristics for your page, including the background color or pattern, the color of your text and the color of your links.

Body colors and backgrounds

To change the background of your page, you can use either solid colors or images (which will be "tiled," or repeated over and over across the page).

To use an image for your background, save the image in the same folder or directory as the HTML page.

Change the <body> tag to read:

<BODY BACKGROUND=”picture.gif”> where “picture.gif” is an image in the .gif file format. The image “picture.gif” will be “tiled” repeatedly as a background across your page.

Any image can be used as a background, but you should keep the image fairly small so it loads quickly.

To make your background a solid color, you can use hexadecimal codes or words for the color you want. Instead of “background,” use “bgcolor”:

<BODY BGCOLOR="white"> = white background, or

<BODY BGCOLOR="#ffffff"> = white background

If you want a color other than your basic red, green, etc., you'll need to find out the

“hexadecimal code” for that particular color.

You can include both a background image and a solid color in your <body> tag. The browser will show the solid color while it loads the image. For example:

<BODY BGCOLOR="white" BACKGROUND=“image.gif”>

You can also change the color of your text, your links, and your visited links using the

following commands within the <BODY>command:

TEXT="red" (text will be red)

LINK="green" (links will be green)

VLINK="yellow" (visited links will be yellow)

ALINK="#000000" (when clicked, the link will flash black)

As always, you can use either the hexadecimal code or the word (for basic colors).

Remember, all of these attributes go within the one <body> tag. A <body> tag with all the attributes would look like this:

<BODY BGCOLOR="white" BACKGROUND=“image.gif” TEXT="red" LINK="green" VLINK="yellow" ALINK="#000000">

After the word “body,” the order of the codes doesn’t matter in the <body> tag.

HTML coding

HTML = "Hypertext Markup Language"

HTML uses "tags" (e.g., <b>) as code to:

position text
alter the appearance of text
link to another document
insert images
access animation, sound files, etc.

Paired HTML tags

Many HTML tags are actually pairs of tags: an opening tag <B> (where B tells the browser how to change the text; in this case, B means bold) and a closing tag </B> (the slash tells the browser to “turn off” that particular code). Most of the coding that changes the appearance of your text is used in pairs. “Bookend” the bracketed tag around the text that you want to change, e.g. <B>This sentence should be bold.</b>

Paired HTML tags that changes the look of your text:

Bold (B):

<B>Editing 13</B> = Editing 13

Italics (I):

<I>Editing 13</I> = Editing 13

Underline (U):

<U>Editing 13</U> = Editing 13

Blinking (BLINK):

<blink>Editing 13</blink> = Editing 13

(Note: Internet Explorer does not recognize the <blink> command.)

Typewriter text (fixed-width font) (TT):

<TT>Editing 13</TT> = Editing 13

Nesting coding

You can "nest" more than one type of coding. Try to keep it consistent, from the inside

out. Thus, <b><i>Editing 13</i></b> = Editing 13

Headlines

You can use the <H1>, <H2>, <H3>, and <H4> paired tags for headlines or other text you want set apart from the rest. These tags do three things: They bold the text, they make it larger than the default text size, and they put a line of space above and below the headline.

<H1> is the largest headline size. Use <H1> for top headlines and either <H3> or <H4> for subheads. Remember to “turn them off” with the </H1>, </H2>, </H3>, or </H4> tag.

<H1>Headline size H1</H1> =

Headline size H1

<H2>Headline size H2</H2> =

Headline size H2

<H3>Headline size H3</H3> =

Headline size H3

<H4>Headline size H4</H4> =

Headline size H4

Changing the font characteristics:

Changing font size (FONT SIZE=+ or - x):

<Font size=+2>Editing 13</font> = Editing 13

<Font size=-1>Editing 13</font> = Editing 13

Changing font color (Font color=):

To change the color of text, use <font color="white">Editing 13</font>

Or use hexadecimal codes: <font color=“#FFFFFF”>Editing 13</font>

Changing the font face (Font face=):

You can also change the actual font using this command.

<font face="arial">Editing 13</font> = Editing 13

If you list more than one font, the browser will use the first one it can support:

<font face="arial,garamond">Editing 13</font> will look like:

Editing 13 (in garamond if the browser can support garamond)

Editing 13 (in arial if the browser can’t support garamond but supports arial)

You can combine these font attributes, for example:

<font face=“arial” size=+1 color=“green”>Editing 13</font> = Editing 13 (in green)

You can only combine font attributes this way, however. If you want to add bolding, you must use the separate bold tags. Be sure to nest them correctly:

<font face=“arial” size=+1 color=“green”><B>Editing 13</b></font> = Editing 13 (in green)

Positioning text on the page

Line break tags

<P> and <BR> are the primary line break tags. <BR> is like one carriage return (hitting enter on Word); the text starts again on the next line. <P> is like returning twice; it puts in an extra blank line.

***You can use multiple <BR> tags to add extra lines of space between paragraphs or anywhere else you want extra lines of space.***

<BR clear=all> will put in space all the way down until there is nothing in the way on either the left or the right hand side of the page. This is used for design reasons such as creating space around photos. (See Images, at p. **)

Centering and aligning text

To center a headline or image, use a pair of <center> tags. So, the following code:

<center>This should be centered!</center>

will look like the following:

This should be centered!

You can nest this coding as well, e.g.:

<center><H1>This should be centered!</H1></center>

will look like the following:

This should be centered!

You can also indent an entire block of text on both sides by using the <blockquote> tags. So the following code:

<blockquote>It was a dark and stormy night. The winds were howling as young Victor made his way across the yard. The moon looked like a magnificent orb in the distance; like a jewel waiting to be plucked.</blockquote>

will look like this:

It was a dark and stormy night. The winds were howling as young Victor made his way across the yard. The moon looked like a magnificent orb in the distance; like a jewel waiting to be plucked.

You can use more than one <blockquote> tag to leave more white space. The following code:

<blockquote><blockquote>It was a dark and stormy night. The winds were howling as young Victor made his way across the yard. The moon looked like a magnificent orb in the distance; like a jewel waiting to be plucked.</blockquote></blockquote>

will look like this:

It was a dark and stormy night. The winds were howling as young Victor made his way across the yard. The moon looked like a magnificent orb in the distance; like a jewel waiting to be plucked.

(Remember to “turn off” both <blockquote> tags or the rest of your page will remain partly indented.)

Aligning a paragraph

Ordinarily the <BR> and <P> tags stand alone; you don’t need </br> or </P>. The only exception is if you want to align a paragraph left, right or center. You can do this with the following tags:

<P ALIGN=CENTER> or

<P ALIGN=left> or

<P ALIGN=right>

If you use this tag to align a paragraph, however, you must use the </P> tag in the code at the place where you want to STOP that particular alignment.

Hyperlinks

You can link within one file, between files on your own server, or to other Web pages.

(You can also link to a particular part of a page; this involves anchor tags which are not discussed here.) The basic format of a hyperlink is this:

<a href="wheretolinkto">text to be linkable</a>

You need to provide the correct pathname within the <a href=" "> code, so the browser can find the file or Web site you're linking to.

You can link to another Web site:

<a href="http://www.lehigh.edu">Lehigh homepage</a> = Lehigh homepage

This tag will take you to the Lehigh homepage (don’t forget to include the http://).

You can link to another page in your own Web site:

<a href="victor.html">Victor pictures</a> = Victor pictures

This code will take you to the page named “victor.html” in the same Web site (directory).

<a href="cat/morepix.html">More Victor pictures</a> = More Victor pictures

This code will take you to the page named “morepix.html” in your Web site (directory) that resides in a folder named “cat.”

Notice that the "cat/" part of the pathname means that the file "morepix.html" exists within a folder or directory called "cat" - I have to tell the computer to find the folder/directory called "cat," and then within that folder, find the file "morepix.html”

-- the URL for that Web page on the Lehigh server would be http://www.lehigh.edu/cat/morepix.html

Images

Inserting an image is a little like inserting a link -- you set up a place for the image and

then tell the browser where to find the image and how to arrange the text around it.

The browser will read the code below to find the image file "victor.jpg" and will display it wherever you inserted the tag on your page.

<IMG SRC=“victor.jpg”>

gives you the following:

You can add a variety of image attributes to your <IMG SRC> tag. ALL image tags should also include the following:

ALT="Description of picture" -- used to describe the image for those who have

turned off image or are visually impaired.

HEIGHT=x

WIDTH=x

(where "x" is the height or width in pixels of the photo). This is done to create a "place holder" of the proper size while the page loads, and to maintain formatting if images are turned off.

So…. the Victor image tag, properly done, would look like this:

<img src="victor.jpg" alt="Victor the Cat" height=102 width=150>

Another attribute you can add in the <IMG SRC> tag is a border.

BORDER=x

(where “x” is the thickness of the border you want. E.g., Border=1 will give you a hairline border. Images will not have a border unless you specify one in the <IMG SRC> tag.

You can also use the <img src> tag to place your image in a certain position so the text on your page flows around it. Inside the <img src> tag, use the following:

ALIGN=left or

ALIGN=right

(Where "ALIGN=right" puts your image on the right, “align=left” puts the image on the left.)

The “align” tag allows the text on the page to wrap around the image. Place your <img src> tag (<IMG SRC="picture.jpg" ALIGN=right>) in front of your text in your HTML file, and the text will wrap around the picture.

You can also put the tag <BR CLEAR=all> to control how much of the text wraps around the picture and how much is "pushed down" below the photo. <BR clear=all> will put in space all the way down until there is nothing “in the way” on either the left or the right hand side of the page. Thus, if you put it immediately after the <img src> tag, it will create white space next to the image and the text will not resume until below the bottom of the image.

Finally, to create a "gutter" of white space around the photo to separate it from text or other images, use

HSPACE=x

VSPACE=x

(Where "x" is the number of pixels of space you want to insert.) HSPACE will put space in on either side of the image (horizontal space), and VSPACE will put space in on the top and bottom of the image (vertical space).

All of these commands go inside the <IMG SRC> code, for example:

Images as hyperlinks

Just as you can make a word or phrase into a hyperlink, you can make an image into a hyperlink, so that by clicking on the image, the user is taken to another page. Instead of putting the <a href=" "> command and the </a> command around words, then, you would put them around the <IMG SRC> code for the image.

The image will show up with a border around it in the color you have specified for links. For example,

<a href="victor.html"><img src="victor.jpg" alt="Victor" height=150 width=102></a>

This code will give you a picture of Victor the Cat which serves as a link to the "victor.html" page. The border around the picture will change from the LINK color to the VLINK color after the picture is clicked on. Remember to include the </a> command after the <IMG SRC> tag to “turn off” the hyperlink.

To eliminate the border or control its width, use the command:

BORDER=x

(Where x is the number corresponding to the thickness you want.) Border=0 will eliminate the border, but the image will still be linkable.

Other useful HTML tags

E-mail link

An e-mail link is like a hyperlink, but instead of taking the user to a new Web site or page, the e-mail link opens up an e-mail message addressed to the e-mail address specified.

The only difference in the code is the insertion of “mailto:” in the <a href> tag. For example,

This code will make the words "E-mail me!" a hyperlink, which when clicked, makes an e-mail template pop up with the e-mail address “kko2@lehigh.edu” already inserted.

Comments

Comments are notes that cannot be seen in the browser (although they can be seen in a

person views the document source). Use this coding:

<!—xxxxxxx-->

Where “xxxxxxx” is the text you want to keep from being seen by the browser. You can comment out words or sentence or even whole sections of code, by putting it inside the comment code. The exclamation point and the hyphens on each side are required in order to make the comment invisible to the browser.

Horizontal rules

The <HR> tag (horizontal rule) creates a line across your page.

The line will stretch across the entire width of your document unless you specify a different length using a proportional command (<HR width=50%>, where 50% is 50% of your page width) or an absolute command (<HR width=50>, where 50 is 50 pixels).

You can also determine how thick the line will be by changing the size coding to <HR size=6> or some other number. (If you don't otherwise specify, the size=2 pixels)

You can right or left align the line, as well: <HR width=50% size=6 align=right> -- Otherwise the line will be centered.

<HR> will look like:

<HR size=20> will look like:

<HR size=6 width=50%> will look like:

<HR size=6 width=50> will look like:

<HR width=50% size=6 align=right> will look like:

(the lines look more 3-dimensional online)

Lists

HTML supports unnumbered and numbered lists. You can also nest lists. Be careful to “turn off” each list before starting another.

Bulleted lists (Unnumbered Lists)

To make an unnumbered, bulleted list,

1. Start with an opening list <UL> (for unnumbered list) tag

2. Enter the <LI> (list item) tag followed by the individual item (note that no closing </LI> tag is needed)

3. End the entire list with a closing list </UL> tag.

So this code:

<UL>
<LI> AC/DC
<LI> Dokken
<LI> Judas Priest
</UL>

Will look like this:

AC/DC
Dokken
Judas Priest

To change the look of your bullets, you can include attributes within your <LI> tags. If you do, you need to use an ending tag. (</LI>)

<LI type=disc>

<LI type=square>

<LI type =circle>

For example:

<UL>

<LI type=disc>AC/DC</LI>
<LI type=square>Dokken</LI>
<LI type=circle>Judas Priest</li>

</ul>

would look like:

· AC/DC

§ Dokken

o Judas Priest

Ordered lists

To number a list, use the <OL> tag.

<OL>

<LI>AC/DC

<LI>Dokken

<LI>Judas Priest

</OL>

would look like:

AC/DC
Dokken
Judas Priest

Special characters

These use the ampersand (&) and semicolon (;) keys to denote coding. They start with the ampersand and end with the semicolon and are used for accent marks, symbols, mathematical signs, etc.

For example, the coding on the left corresponds to the symbols on the right. (The coding should be typed as all one word, without any spaces.)

HTML code will look like …

 = “ (beginning curly quotes)

 = “ (ending curly quotes)

 = ’ (curly apostrophe)

ñ = ñ (n with tilde)

  = a space (this code puts in an

extra space)