Sheerpower®
A Guide to the Sheerpower Language
Previous Contents Index

9.4.3.5 UNORDERED LIST

<ul>...</ul>

The UNORDERED LIST tag introduces an unordered (bulleted) list, which is made up of List Item (LI) tags.

Example 9-28 <ul >... </ul > tag 

  blist$ = '<form>' 
  blist$ = blist$ + '<ul>' 
  blist$ = blist$ + '<li>This is the first item' 
  blist$ = blist$ + '<li>This is the second item' 
  blist$ = blist$ + '<li>This is the third item' 
  blist$ = blist$ + '<li>This is the fourth item' 
  blist$ = blist$ + '</ul>'
  blist$ = blist$ + '</form>' 
  input dialogbox blist$: example$ 
  end

9.4.3.6 HORIZONTAL RULE

<hr>

The HORIZONTAL RULE tag causes a horizontal line to be drawn across the screen. There is no </hr> tag.

Example 9-29 <hr > tag 

  form$ = '<form>' 
  form$ = form$ + '<center><h2>Horizontal Rule Illustration</h2></center>'  
  form$ = form$ + '<p><hr width=50%><p>' 
  form$ = form$ + '<p><hr width=75% size=5><p>' 
  form$ = form$ + '<p><hr size=10><p>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: ans$ 
  end

9.4.3.7 INLINE IMAGE

<img>

The INLINE IMAGE tag displays an image referred to by a URL. It must contain at least an SRC attribute.

Example 9-30 <img > tag 

  image$ = '<form>' 
  image$ = image$ + '<img src="c:\sheerpower\samples\bluejay.jpg"><p>' 
  image$ = image$ + '<font color=blue>Can you name this bird?</font>' 
  image$ = image$ + '<input type=text name=birdname>' 
  image$ = image$ + '</form>' 
  input dialogbox image$: source$ 
  end

INLINE IMAGE TAG ATTRIBUTES

Table 9-5 INLINE IMAGE Tag Attributes
Attribute Function
src="URL" URL identifies the image source
width="number" number specifies the width of the image in pixels
height="number" number specifies the height of the image in pixels
border="number" number is the border thickness in pixels
align="alignment" alignment left or right for horizontal alignment; top, texttop, middle, center, bottom and baseline for vertical alignment

Example 9-31 <img > Attributes Tag 

// A simple quiz program 
 
  woodpecker$ = 'sheerpower:samples\woodpecker.jpg' 
  
  quiz_form$ = '<sheerpower persist><title>Quiz</title><form>' + 
               '<center><h3>Skill Testing Question</center></h3>' + 
               '<img src="' + woodpecker$ + '" border=3 align=middle>' 
  quiz_form$ = quiz_form$ + '<font color=green> ' + 
               '<b>What type of woodpecker' + 
               ' is in this photograph?</b></font><p>' 
  quiz_form$ = quiz_form$ + '<input type=radio name=birdname ' + 
               'value="Pileated Woodpecker"> ' + 
               '<i>Pileated Woodpecker<p>'  
  quiz_form$ = quiz_form$ + '<input type=radio name=birdname ' + 
               'value="Hairy Woodpecker"> Hairy Woodpecker<p>' 
  quiz_form$ = quiz_form$ + '<input type=radio name=birdname ' + 
               'value="Redheaded Woodpecker"> ' + 
               'Redheaded Woodpecker</i></b>'  
  quiz_form$ = quiz_form$ + '<p><input type=submit name=submit value="Submit">' + 
                            '<input type=submit name=exit>' + 
                            '</form>' 
  correct$ = 'Hairy Woodpecker' 
  good$ = '<sheerpower width=400 height=170 color=green>' + 
          '<form><h1>Congratulations!!  ' + 
          correct$ + ' is the correct answer!!</h1>' + 
          '<p><input type=submit></form>'    
      
  do
    input dialogbox quiz_form$: ans$ 
    if _exit then stop
    value$ = element$(ans$, 2, '=')  
    if value$ = correct$  then exit do
    message error: "Sorry, this is not a ";value$ 
  loop
  input dialogbox good$: ans$ 
  end

9.4.3.8 DIVISION

<div>...</div>

The DIVISON tag is used to divide a document up into different sections, such as chapters, sections, abstract, and appendix. The CLASS attribute specifies what section this is. The ALIGN attribute can be one of LEFT, RIGHT, or CENTER.

Example 9-32 <div >... </div > tag 

  form$ = '<div align=right><form>' 
  form$ = form$ + 'Please enter your comments below: <p>' 
  form$ = form$ + '<textarea name=comment cols=30 rows=15></textarea>' 
  form$ = form$ + '</form></div>' 
  input dialogbox form$: comment$ 
  end

9.4.4 Text Formatting Tags

9.4.4.1 FONT

<font>...</font>

The FONT tag defines text with a smaller or larger font than usual. The normal font size corresponds to 3; smaller values of number will produce a smaller font, and larger values of number will produce a larger font.

FONT Tag Attributes

Table 9-6 FONT Tag Attributes
Attribute Function
color specifies the color of the font

Example 9-33 <font >... </font > tag 

  form$ = '<form>' 
  form$ = form$ + '<font color=red>' 
  form$ = form$ + 'Place a check in this box to receive future mailings from us. ' 
  form$ = form$ + '<input type=checkbox name=yesmail></font>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: reply$ 
  end

Note
The COLOR ATTRIBUTE to the font tag allows you to utilize hexadecimal color values the same as HTML.

9.4.4.2 HEADINGS

INPUT DIALOGBOX supports 6 levels of HEADINGS, H1 through H6. H1 is the largest heading size. H6 is the smallest heading size.

<h1>...</h1>

The H1 tag defines a level 1 heading (the largest heading size).

Example 9-34 <h1 >... </h1 > tag 

  form$ = '<form>' 
  form$ = form$ + '<h1>Level 1 Heading Tag</h1><br>' 
  form$ = form$ + 'Empty field: <input type=text name=field size=30>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: entry$ 
  end

<h2>...</h2>

The H2 tag defines a level 2 heading.

Example 9-35 <h2 >... </h2 > tag 

  form$ = '<form>' 
  form$ = form$ + '<h2>Level 2 Heading Tag</h2><br>' 
  form$ = form$ + 'Empty field: <input type=text name=field size=30>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: entry$ 
  end

<h3>...</h3>

The H3 tag defines a level 3 heading.

Example 9-36 <h3 >... </h3 > tag 

  form$ = '<form>' 
  form$ = form$ + '<h3>Level 3 Heading Tag</h3><br>' 
  form$ = form$ + 'Empty field: <input type=text name=field size=30>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: entry$ 
  end

<h4>...</h4>

The H4 tag defines a level 4 heading.

Example 9-37 <h4 >... </h4 > tag 

  form$ = '<form>' 
  form$ = form$ + '<h4>Level 4 Heading Tag</h4><br>' 
  form$ = form$ + 'Empty field: <input type=text name=field size=30>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: entry$ 
  end

<h5>...</h5>

The H5 tag defines a level 5 heading.

Example 9-38 <h5 >... </h5 > tag 

  form$ = '<form>' 
  form$ = form$ + '<h5>Level 5 Heading Tag</h5><br>' 
  form$ = form$ + 'Empty field: <input type=text name=field size=30>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: entry$ 
  end

Previous Next Contents Index