Basic Layout Tags and Attributes

The basic layout tags include

• IMG
• BR
• CENTER

• ALIGN=
• CLEAR=
• WIDTH=
• HEIGHT=
• ALT=

This will align Description on the top along side the image.

Resuming Text after a Graphic

• Using ALIGN=LEFT and ALIGN=RIGHT causes text to flow between the two images.
• To keep the center space blank, use the CLEAR=attribute inside a break tag.
• Text will flow alongside the image until the break tag is encountered.
• As the CLEAR=attribute has the value right, the next bit of text will be positioned on the next line that has a clear right-hand margin.
• With a right-aligned graphic, the next text will go beneath the graphic. Right-justified text formatted as a header gives a caption under the graphic.
• If the graphic conveys essential content, this can be a real problem.

• If the graphic is purely cosmetic, a text-based reader isn’t missing much.
• In either case, courtesy requires that you say something about what the user can’t see.
• The ALT= attribute inside an image tag is used for this purpose, taking a quoted text string as its value. A text-based browser displays that string in lieu of the graphic image.
• Lynx users will see the insert “[INLINE]” whenever an image doesn’t include an ALT = attribute.

• It is much better to have some idea of what a missing image depicts.
• When you add an ALT = attribute, always remember to include square brackets so that the missing image will be readily identifiable as such to all lynx users.
• Without brackets, an ALT = string looks just like a short text segment. In fact, the best way to make an ALT-string stand out is to use square brackets, start your string with an INLINE: prefix, and use uppercase letters throughout.

  <IMG SRC=”iggy.gif” ALIGN=right WIDTH=200pt HEIGHT=200pt >

  ALT=”[INLINE: A CARTOON IG]”>