NSU HTML Help

World Wide Web Home Page Construction

Linda West - NSU Webmaster

October 1996

Basic Tags | Headings | Text Styles | Line and Page Breaks | Lists | Creating Links | Graphics and Images | Font Size, Color, Backgrounds | Advanced Topics
My Page Examples

This is a basic guide to making web pages using HTML. With each set of tags there is a MYPage Example. Use View
Document Source
to see the coding and then use the back button to return to this guide.

BASIC TAGS

<html> Begins every html document

<head> Information for the browser not printed on page

<title> Identifier of contents for browsers and bookmarks

TIP: - Make titles distinctive, NSU College Republicans - not College Republicans

</title> Title end tag

</head> Head end tag

<body> Begin body, or information printed on page

* see later for attributes of the body tag

TIP: Notice these tags start every page. It is important to close every tag and make sure they are nested in matching pairs.

Index

HEADINGS

TIP: - Heading tags work like an outline. Don't skip numbers and don't use just to make text different sizes. *see <font> tag later for sizes of text.

Index

Text Styles

TIP: Note differences between style of type and category. Category tags are preferred to style of type tags.

<i> Makes text italic</i> - Style - My Page Example

<b> Makes text bold </b> - Style - My Page Example

<strong> Usually translated as bold </strong> - Category

<em> Emphasis, usually translated as italic </em> - Category

Index

Line and Page Breaks and Decoration

TIP: These tags do not usually have matching end tags, however see later for attributes of the <p> tag

<br> Puts a line break at the end without a space between lines

<p> Starts a new paragraph, puts a space in between paragraphs

<hr> Horizontal Rule -- This creates a visual page break by putting a line on the page - My Page Example

ATTRIBUTES:

<hr size=4 width=50% align="center"> also shade or noshade - My Page Example

<li> Marks a line in a list - starts the line with a bullet

ATTRIBUTES:

<li type="circle"> also square and disc

Index

LISTS:

Ordered <ol><li> Puts a number in front of each line

<li>second line

<li>third line</ol> - My Page Example

Unordered <ul><li>No number in front of each line just an indent

<li>second line

<li>third line </ul> - My Page Example

Definitions <dd> Use this to indent a line without leaving spaces above and below it.

NOTE: This is not "pure" html, but is a way to get things to look ` right. There are many more kinds of lists, see html editing guides.

Index

Creating Links

Three types of Links:

External:

<a href="http://www.nsuok.edu">Northeastern State University</a> - My Page Example

<a href="http://www.craft.com/menu.html">A World of Crafts</a>

Internal:

<A name="xxxxxxxx"> Creates the target for the link to find

<a href="#xxxxxxx">Name of the Internal link</a>

TIP: remember that UNIX is case sensitive. Internal links work better if they are short and one word only.

Relational:

<a href="/directory/filename">This is a link to another document</a>

*We'll see this link better when we work with graphics.

Index

GRAPHICS and IMAGES

TIPS: Images do not reside on pages, they are called up by browsers and displayed on pages. Two types of images may be displayed: gifs - usually line art, can be made transparent jpg - usually photographs, cannot be made transparent - usually square

You may link to images on NSU's Web. Official logos of the University are restricted in use - see the NSU Style Guide.

Look at NSU images at:

http://www.nsuok.edu/gifs/

<img src="/gifs/dogcats2.gif"> -

<img src="/gifs/crafts.gif"> - My Page Example

Index

Align text with images

right middle top bottom left

<img src="/gifs/dogcats2.gif" align="middle">

TIP: Alt attribute. Use the alt attribute to tell a user of a nongraphics browser, like lynx, what the image is. <img alt="dogs and cats" src="/gifs/dogcats2.gif">

Aligning text and pictures and headers on the page:

There are two ways to center text:

Using Netscape extensions:
<center>Text to center</center>

or:

Use the <p> tag to center, right, left - works with Netscape 2.0 and above.

<p align="center"><img src="/gifs/dogcats2.gif"></p>

<h1><p align="center">Headers center differently</p></h1> - My Page Example

Index

FONT SIZE AND COLOR, BACKGROUNDS

You can make your text difference colors and sizes, You may also make the background of your page a different color or use a tiled (wallpaper like) image in the background.

<font color="#004400" size="5"> - My Page Example

Sizes

1-7

one is very small, 7 is very large

can be defined as + or - the base font (usually 3)

TIP: To make textured backgrounds, you must use the body tag. Only one body tag per document.

<body bgcolor="#736f6e"> - My Page Example or;

<body background="/gifs/gray2.gif"> - My Page Example

To Change the color of text and hypertext links:

<body text="#000000" link="#004400" vlink="#b93b8f" alink="ff0000">

text= text color -- default black

link= link color -- default blue

vlink= visited link color -- default magenta

alink= active link color (changes for a few seconds as clicked) -- default red

Index

COLOR CHART:
Red ff0000
Blue 0000ff
White ffffff
Yellow ffff00
Black 000000
Green 00ff00
Orange f87a17
Brown 980517
NSU Green 004400
Navy 150567
Violet 8d38c9
Ivory ffffee
Cyan 00ffff
Gray 736f6e
Magenta ff00ff
Pink faafbe
Plum b93b8f
Purple 8e3tef

Index

Advanced Topics:

Editors - There are many software packages to help make html coding faster and easier. A list of my favorites is included in the bookmark file.

Transparent Gifs - The Giftrans program is helpful.

Command line for changing a white background:

giftrans.exe -t #ffffff filename.gif > newfile.gif

htm vs html - This common question involves filenames. .htm filenames are housed on PC based web machines. .html filenames are housed on UNIX based web machines. It is important to type the addresses just as they appear.

NSU Style Guide - The NSU guide includes some guidelines for personal and official web pages on the NSU web.

mailto -making your name link a return mail address:

<a href="mailto:userid@cherokee.nsuok.edu">Put user name here to be highlighted</a> - My Page Example

Index

Other html and web page topics - links are included in the tools file for these topics.

Tables | Forms | Frames | Animated gifs | Java

Keep practicing!

NSU Web Style Guide

NSU HomeAbout NSUAcademicsStudents
Who/WhatServicesInternet

Send comments to: webmaster@cherokee.nsuok.edu
Last updated: November 17, 1996