Thursday 23rd November, 2017    Search:
      Not logged in
Welcome to the Tag examples page!

This is divided into a standard features section, an extended features section and a 'plug-ins' section.

Extensions of standard features provide you with very useful capabilities.

Plug-ins are mostly complete systems that we give you easy access to.



Standard Features
Alignments, Marquee - scrolling display, Blink attribute, Text enhancements, Tables - rows and cells, Boxes

Here is a display of the three primary alignments available - but note the line gap forced by HTML between each element even though they have been written as one line. You will have to use a table to gain control

[left]left aligned[/left][center]center aligned[/center][right]right aligned[/right]


left aligned
center aligned
right aligned


This is a marquee display - which will not work properly in Netscape. The marquee can be combined with other features, such as the aphorisms

[marquee]text for the scrolling marquee which can be very long so that it does not fit into a normal screen width like this[/marquee]


text for the scrolling marquee which can be very long so that it does not fit into a normal screen width like this

[center][box width="200"][marquee][aphorism][/marquee][/box][/center]




This is a blink display - which will not work properly in MS IE, only in Netscape

[blink]blinking text - now deprecated by all but Netscape[/blink]


blinking text - now deprecated by all but Netscape

This shows the simple text enhancements

[b]Bold text[/b] [i]Italic text[/i] [u]Underlined text[/u]

[b][i]Bold and italic[/i][/b] [b][u]Bold and underlined[/u][/b]

[color red][size 12pt]Red size 12point type face[/size][/color]

[color yellow][size 20pt]Yellow and large(20point) [/size][/color]

[color white][size small]Small text[/size] [size large]Large text[/size][/color]


Bold text Italic text Underlined text

Bold and italic Bold and underlined

Red size 12point type face

Yellow and large(20point)

Small text Large text

This shows more simple text enhancements

[font size="16pt"][color red]Red 16 pt type[/color][/font]
[font face="Arial" color="black"]black type in Arial[/font][font size="2em" color="#0000ff" face="verdana"]Verdana
[font size="5em"]5em blue type[/font][/font]


Red 16 pt type
black type in ArialVerdana
5em blue type


This is a table display - without internal borders and without controlling the width of the three columns

[table width="100%" border-style="ridge" border-colour="red" border-size="5"][row][cell][left]This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. [/left][/cell][cell][center]center aligned[/center][/cell][cell][right]right aligned[/right][/cell][/row][/table]


This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text.
center aligned
right aligned


This is a table display - this time with internal borders and with a dotted outer border and with all three columns forced to be equal

[table width="100%" border="1" border-style="dotted" border-colour="yellow"][row][cell width="33%"][left]This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. [/left][/cell][cell width="34%"][center]center aligned[/center][/cell][cell width="33%"][right]right aligned[/right][/cell][/row][/table]


This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text. This is left aligned text to demonstrate that variable amounts of long text can be accommodated as easily as short text.
center aligned
right aligned


This is a table display - this time demonstrating rowspan and colspan features, and the specific backgrounds overwriting the generic background

[table border-size="5" border="1" border-color="blue"]
[row background="red"]
[cell width="200"]r1
c1[/cell]
[cell background="yellow"]r1 c2[/cell]
[/row]
[row]
[cell]r2

c1[/cell]
[cell]r2 c2[/cell]
[/row]
[row background="magenta"]
[cell colspan="2"]o o o o o o o o o[/cell]
[/row]
[/table]

r1
c1
r1 c2
r2

c1
r2 c2
o o o o o o o o o


Here is an image positioned in a cell of the table with text to the left

[table width="100%" border="1"][row][cell][center][font face="Comic Sans MS" size="1.5em"]This text will be somewhere related to the image that is to the right of this text[/font][/center][/cell][cell][right][image file="http://models.build-a.com/explicit-images/faces/natasha1.jpg"][/right][/cell][/row][/table]


This text will be somewhere related to the image that is to the right of this text


[box width="150"]Some stuff in as simple box without any borders but constrained to be only 150 pixels wide[/box]


Some stuff in as simple box without any borders but constrained to be only 150 pixels wide


[pre]this is preformatted
text[/pre]


this  is  preformatted
text


[tt]This is preformatted
text in the
tt style [/tt]


This is preformatted
text in the
tt style


This is a box display - without any internal borders. It is used to put a border around an object and to determine the background within the box area

[box color="white" background="red" border-size="5" border-style="dashed" border-color="yellow" width="100%" padding="10" height="100"]Hello world! (this is a box)[/box]


Hello world! (this is a box)


Extended Features
Mailforms, Date and time display, Drop-down lists

Here is a mailform - specified in a box which defines the background image inside the box which has a border as defined. The colour of the text is separately defined (as black). The emailform itself dictates the requirement for a user to enter their name and email address and a message. The form will always be sent to the specified email address entered by the designer. The message area can be specified in terms of rows (default 6) and cols (default 40)

[box color="black" background="http://models.build-a.com/explicit-images/lana/body5.jpg" border-color="yellow" border-size="10" border-style="groove"][emailform email="chris@build-a.com" rows="20"][/box]




These are variations of the date and time display, notice that those letters or characters not being interpreted as date/time indicators are being displayed just as they are typed in - which includes GMT, UT, BST, : and - . Note that the time is the time taken from our own server, not from the user's own system

[date E D O Y] or [date E D O Y at 0h:0m:0s BST]

This is today [date e 0d/0n/y] : time [date h:m:s] at the moment


Thursday 23rd November 2017 or Thursday 23rd November 2017 at 16:02:18 BST

This is today Thur 23/11/17 : time 16:2:18 at the moment
Note that the time shows when the page was first shown - it is not active

This is a drop-down list to allow users to see more details using less screen space - selecting any entry has no effect other than to leave that entry visible

[droplist list="black, white, red, orange, yellow, green, blue, violet, indigo"]
Or using a different than standard comma as the delimiter:
[droplist list="a number of black items; shining white examples; red apples & pears; oranges, grapes & bananas; yellow budgies; green marine animals; blue skies; violet, indigo and other colours in the rainbow" delimiter=";"]


ooo
oooooo
ooo


This is a bulletted list to allow users to see more details

This is a bulletted list of sub-details
[bulletted][item]First sub-detail
[item]Second sub-detail
[item]Third sub-detail[/bulletted]


This is a bulletted list of sub-details
  • First sub-detail
  • Second sub-detail
  • Third sub-detail


This is a numbered list to allow users to see more details

This is a numbered list of sub-details
[numbered][item]First sub-detail
[item]Second sub-detail
[item]Third sub-detail[/numbered]


This is a numbered list of sub-details
  1. First sub-detail
  2. Second sub-detail
  3. Third sub-detail


This is a specially positioned list of sub-details using the style parameter (margin-left 25px, margin-top 5px)

Specially positioned list[list style="margin-left: 25px; font-family: verdana; margin-top: 5px; color: blue" type="bulleted"][item]First sub-detail
[item]Second sub-detail
[item]Third sub-detail[/list]


Specially positioned list
  • First sub-detail
  • Second sub-detail
  • Third sub-detail


Plug-ins
Aphorisms, Sayings, Flash file display, Imagemaps, Weather forecasts, BBC News in brief

Here are three aphorisms, the 1st by itself. The 2nd is a box, specifying the width only, put around the aphorism, The 3rd is a box, specifying borders and colours, put around the aphorism, the 4th is created in two separate parts

[aphorism]

[box width="500"][aphorism][/box]

[box color="yellow" background="#8080ff" border-style="ridge" border-color="blue" border-size="8"][aphorism][/box]







Here is a flash image, aligned to the right

[flash file="http://build-a.com/images/datasharp/phone_fade.swf" align="right" width="150" height="125"]









Here is an example display of the imagemap facility - there are three areas, a rectangle, a circle and a polygon on the girls image - around her face - that will respond to a mouse click. You will see the cursor change into a hand shape when an area is able to be clicked.

[center][map name="map1"]
[area link="contact" text="Goto Contact us" shape="rect" coords="6,116,97,184"]
[area link="http://w3c.org" text="Show w3c.org site" shape="circle" coords="251,143,47"]
[area window="index" text="New window!" shape="poly" coords="150,217, 190,257,150,297,110,257"]
[/map]
[image file="http://models.build-a.com/explicit-images/faces/natasha1.jpg" text="map of GH site" width="300" usemap="#map1"][/center]


Goto Contact usShow w3c.org siteNew window!
map of GH site


Here is the weather forecast - aligned to the left

[left][weather][/left]




Here is the BBC News - in brief

[center][bbcnews][/center]


BBC News regarding: UK   World   Sport


Here is a web cam viewer - for customer support - it will allow the camera of selected named individuals at the client to be viewed by the users. The client's details are pre-defined and assigned and the support staff member will normally be selected by name from a dropdown list. So the tag - when implemented - may not look quite like this! With the associated textchat tag providing communication you will be able to offer more than standard customer support

[left][webcam "chris"][/left]


Sorry, your browser doesn't support Java(tm).

Here are a number of images of the same girl but with different constraints put on the picture formats. The first is natural size, the second is with the width constrained to 100 pixels, the third is with the height constrained to 100 pixels, the last is with both the width and the height constrained to 100 pixels - which distorts the image.








[box color="black" background="silver" width="75%" border-style="outset"]This is an iframe example of this entire page - which you can see is active and usable. Note that the example in the iframe does not and can not provide infinite recursion!

Build-a ServicesSite authors: Nightingale Services