|<h1> Heading 1 size</h1>||
Heading 1 size
|<h2> Heading 2 size</h2>||
Heading 2 size
|<h3> Heading 3 size</h3>||
Heading 3 size
|<h4> Heading 4 size</h4>||
Heading 4 size
|<h5> Heading 5 size</h5>||
Heading 5 size
|<h6> Heading 6 size</h6>||
Heading 6 size
The NCSA Primer is a good place to further explore commonly used tags that can enhance the presentation of your page. We've included some basic ones here, with the HTML followed by an example of how it looks on the page.You can use physical or logical tags for emphasis.
<i>italics</i> italics, <b>bold</b> bold
<cite> cite </cite> cite,
<strong> strong </strong> strong,
<em> emphasis </em> emphasis
The ampersand (&) and semicolon (;) are used to create special characters:
© displays ©
" displays "
Some characters have special meanings in HTML and need special treatment:
& displays &Here's a full list of special characters supported in HTML 2.0.
< displays <
> displays >
Individual browsers may support specific tags in different ways. It is a good idea to view your page with different browsers to see how your tags are translated.
HTML flows all text together eliminating line spaces and paragraph breaks unless tags are inserted. To maintain paragraphing and create lists, special tags are used:
paragraph <p> </p>
line break <br>
Here's an unordered list followed by the HTML code to create it:
Here's an ordered (numbered) list and it's HTML code:
A descriptive list and its HTML code:
- topic 1
- topic 2
- definition 2
You will likely want to make a hypertext link to other pages. This is what makes the web so powerful and fun! To do so, you need to use the following tag:
<a href=" "> </A>The item or page that you want to link to must be within the quotes. The part of your text that you want underlined and linked should be within the tags.
Here is a link to <a href="http://www.walthowe.com"> Walt Howe's Home Page.</a>
On your page it looks like:
Here is a link to Walt Howe's Home Page.
Links may point to items on the same page, to other pages on same site, or to a remote page. Here we've put links within a descriptive list:
On your web page you will see:
<dt>Link to another local hypertext file in the same directory
<dd><a href="gg0.html">Graphics Guides</a>
<dt>Link to a remote file
<dd><a href="http://math.boisestate.edu/gas/"> Gilbert & Sullivan</a>
<dt>Link to a local graphic in the same directory
<dd><a href="images/wizhead.gif">Wizard Head</a>
<dt>Display a local graphic in the same directory
<dd><img src="images/wizhead.gif" alt="Wiz"></a>
<dt>Graphic used as a link
<dd><a href="/" ><img src="images/wizhead.gif" alt="Wiz"></a>
<dt>Link to a point in the same HTML file
<dd><a href="#point3">Third section</a>
<dt>And what's being pointed to in the same HTML file
<dd><a name="point3">Section 3</a>
- Link to another local hypertext file in the same directory
- Graphics Guides
- Link to a remote file:
- Gilbert & Sullivan
- Link to a local graphic in same directory
- Wizard Head
- Display a local graphic in the same directory
- Graphic used as a link
- Link to a point in the same HTML file
- Third section
- and what's being pointed to in the same HTML file
- Section 3
|Uniform Resource Locator||Explanation|
|http://www.eff.org/||Find the Electronic Frontier Foundation site on the World Wide Web.|
|http://mole.uvm.edu/whale/TableOfContents.html||Use http to connect to the University of Vermont World Wide Web server to find images, articles, and discussions about the discovery of bones of a whale in the fields of rural Vermont. Look in the whale directory to find the whale home page (whalehome.html).|
|http://www.walthowe.com/||Walt Howe's Internet Training Center begins at "index.html" (which, as a default, does not need to be listed).|
|http://www.hopetillman.com/findqual.html||Hope Tillman's presentation on Evaluating Quality on the Net is accessible from the "findqual.html" file. This Internet provider identifies user accounts as subdirectories of its /users directory, hence /users/hope/.|
|ftp://rtfm.mit.edu/pub/usenet/news.answers||Use ftp to connect to the rtfm site at MIT (rtfm.mit.edu). Follow the path to the pub directory, then the usenet directory, and then the news.answers directory to get to the Usenet frequently asked questions (FAQ) lists.|
|gopher:// info3.scs.unr.edu:8117/7-t1%20%20?sla||Use simple gopher to connect to Veronica server and search the word "sla" in gopherspace. There are a number of Veronica servers from which to choose; Veronicas have different schedules for updating and so you will not get identical results. Also many are being decommissioned, and the results tend to be to very old information.|
|telnet://firstname.lastname@example.org:3000||Go to the Geographic Name Server at the University of Michigan and be prompted to enter 02157 or Wellesley (or any zip code or city name) to get geographic information. Record includes: name, elevation, latitude, longitude, population, telephone area code, and zip codes.|
|news:soc.libraries.talk||Where supported on your site, this format will retrieve a list of articles currently available for the Usenet newsgroup, soc.libraries.talk, The soc hierarchy is for groups with a social focus. In March 1996 the soc.libraries.talk discussion includes postings on Communications Decency Act and libraries, use of DIALOG via TCP/IP, among other topics.|
|mailto:email@example.com||For those web browsers configured to send mail, this URL will bring up a message screen for you to send a message to the email address designated after the mailto, in this case to Walt Howe.|
This section describes when and how to use graphics on a page.
The majority of graphical web browsers in use today can only view .gif and .jpg files without launching helper applications. If you ask your viewers to obtain a different helper application, you will shut out a large portion of your target audience.
Because of the amount of time they take to load, graphic files can detract from the usefulness of your page. Minimizing file size should be considered when incorporating graphics in your page. Loading time depends on the size of the file, not the size of the picture.
Compare the size of your file in .gif or .jpg format and select the smallest file size providing the best picture size and quality on the screen.
Picking between .gif and .jpg:
Topics for further exploration include:
LView Pro is a very good graphic manipulation package for Windows available via the web, with versions for Windows 95 and Win 3.1
Here's an example of the use of table formatting on a web page.
Although we will not cover tables in this tutorial, many of the references mentioned at the beginning of this workshop such as the NCSA Primer offer details on creating them.
Not all browsers support tables, but they can be very useful in positioning text and graphics on a page.
A simple first home page
A home page showing some ways to organize
A home page with graphics
A home page using table formatting
For a library kiosk or individual to use as a starting home page
A resume home page
When you come across a page you like on the web, take a look at their source code to see how it was created. To do this, click VIEW on your toolbar and SOURCE in the pulldown menu.
Play, have fun, and learn!
|Go to Top||Go to Learning Tree|