Masonic and Freemasonry related sites and information on GoMasonry Masonic and Freemasonry related information worldwide on GoMasonryMasonic and Freemasonry related information worldwide on GoMasonry
Home Email Help spacer Submit a site Newly added sites Top 10 Random Link
spacer
spacer
spacer       GoMasonry QuickSearch >

Edit your listing | Tell a friend | Starting page | Link back | Other searches | Webmasters
Most accessed sites | GoMasonry Top 10 sites | Disclaimers | Text Only Version

spacer

GoMasonry HTML Tutorial   —   Advanced HTML

Index:

Top of Page

Images


There are two kind of images - pictures at the end of anchors, and pictures embedded in the text.
There are many different formats of images.
GIFs and JPGs are the standards for the web.

The tag for an image is a <IMG SRC="url">.
Url would be the "link" to the image.


   This is a test image 
<IMG SRC="http://www.gomasonry.com/images/gosnc3.gif">
Displays as:

This is a test image


What happens
  • The file specified by the SRC URL is fetched over the network.
  • If the file is a valid image file (in one of the many different formats), then the image is displayed at the location of the <IMG> tag.

There are several optional tags that can be used inside an <IMG>.

ALIGN:
Alignments vary the position of the picture relative to the text. There are three alignments defined:

  • <IMG SRC="url" ALIGN=TOP> Aligns image at the top
  • <IMG SRC="url" ALIGN=MIDDLE> Centers the image
  • <IMG SRC="url" ALIGN=BOTTOM> Aligns image to bottom
ALT
Images pose a problem for people with text mode browsers or using their browsers "Text Only" mode. Pictures are shown as [Image] or not at all. In order to help them make sense of pictures, there is a textual alternative tag that tells the browser what to display when there are no graphics available.

The general form is <IMG SRC="url" ALT="text">

The text for the ALT tag is displayed if needed.

<IMG SRC="http://www.gomasonry.com/images/gosnc3.gif" ALT="Gomasonry Icon">

This displays as:

Gomasonry Icon

In a text browser we get:

[Gomasonry Icon]

Top of Page

Buttons

Buttons are links containing a picture instead of text. Instead of a text button like this:
[ <- Back ]

we can do it with an <IMG> tag where the text normally goes:

   <A HREF="http://www.gomasonry.com"><IMG 
   SRC="http://gomasonry.com/images/gosnc3.gif"
   ALT="Go to Homepage"></A>

This Displays as:
Go to Homepage

A few things to be aware of:

  • Always provide an ALT string!
  • Try to use the same navigation graphics over and over so with every page loaded, the navigation graphics are already loaded.
  • Set your image borders to 0. This eliminates the "border" around the image.
    <A HREF="http://www.gomasonry.com"><IMG SRC="
    http://gomasonry.com/images/gosnc3.gif" ALT="Go to Homepage" border="0"></A>
Top of Page

Named Anchors

A named anchor is another way of marking a section of the document. Unlike normal links, the named anchor names a target so that a link can refer to it.

This means that other documents can now refer to particular parts of this document directly. This is quite useful to be able to do.

The tag to do this is the <A NAME="name"> pair. The closing tag is </A>. The way to refer to a named anchor is to prefix the name with a # (hash mark).

The section title for this part of the document is defined like this:


   <H1>
   <A NAME="Anchors">Anchors</A>
   </H1>
To refer to this section we use a normal HREF anchor and append a # hash mark and the anchor name, like this:
<HREF="url#name">

For example, the following refers to the above section name Images.


   The <A HREF="http://www.gomasonry.com/webmasters/
AdvancedHTML.html#Images"> Images Topic</A> here.
Note that the URL above is broken for readability only. It should really appear as a single unbroken line.


The Buttons Topic here.

We can even do away with the document name entirely, if we are referring to another part of the same document: <A HREF="#Images">...</A>

You can also name a section and link it to another document at the same time:


  This is <A HREF="tutorial.html" NAME="TEST">
  a test section</A> in the advanced
  HTML document
Top of Page


spacer
GoMasonry! spacer

Submit a site | What´s new | Random link | About | Email
Tell a friend | Link back | Other Searches | Disclaimers

Copyright 1999 Martin Barbedor — All rights reserved