Special character, bold, italics, underline and marquee


First I will like us to look at this triplet (BOLD, UNDERLINE and ITALICS) and to connect with the last exercise let’s apply this three.
Reach to the “BIT website” folder and edit the “index.htm” web page as usual; to look like the one below.

<body>
<p align="center"> <i>BIT is an IT company who specializes in delivering web solution </i> </p>

<b> <u> OUR SERVICES </u> </b> <br> 
We have recorded a huge success in: <br> 
Designing Website <br> 
Deploying Web-Portal <br> 
Developing Web-based software <br> 
Web / IT consultation services <br> 
Web Management
</body>


Below is the preview below

I believe this it’s quit explainable, except for where we have two tag nested <b> <u> OUR SERVICES </u> </b> this apply the both bold and underline to the text within.


MARQUEE

Now let’s take a look at the interesting marquee. Marquee are use to add some scrolling effect to a text or image. Marquee has so many attribute, but we will be taking a look at some of the basic and common use of marquee.

<marquee> This is the message in a marquee </marquee>
This is the use of marquee in its simplest form, you can simply add this line of code in between the body tag of your HTML page, and watch the text in between the marquee tag, scroll from the right to the left side of the screen.
 
Marquee delay
You can also increase or reduce the speed of the text, in between the marquee by add a scroll delay, as shown below.

To make the text move slow
<marquee scrolldelay="500"> This text will move very slow </marquee>

To make the text move fast.
<marquee scrolldelay="5"> This text will move very fast </marquee>

Marquee behavior
You can also add some other behavior to the marquee such as:
Slide: text move from one end and stop at the other end, instead of continues scrolling.
The line below shows an example.
<marquee scrolldelay="5" behavior="slide"> move once </ marquee >

Alternate: text move from one end touch the other end and return, repetitively.
The line below shows an example.
<marquee scrolldelay="5" behavior=" alternate ">
Bounce from one side to the other
</ marquee >

Marquee direction
Using the marquee direction attribute you can specify the direction you want the text or image in between the marquee to move. See examples below
LEFT
<marquee scrolldelay="1" direction=" left ">text here</marquee> 
This is the default movement.
RIGHT
<marquee scrolldelay="1" direction=" right ">text here</marquee> 
DOWN
<marquee scrolldelay="1" direction=" down ">text here</marquee> 
UP
<marquee scrolldelay="1" direction=" up ">text here</marquee> 

 

FROM MY CODE PROJECT
It is always interesting to know how what we called common such as marquee could have so much impact when it is required or needed.
For a very long time I never really use a marquee until a client of mine demanded; only what I knew could really be best done, with a marquee.

A BLOG PROJECTS
The project was to show a series of news, scrolling from down to up and when a user point his/her mouse the scrolling pause, probably so that they could read and when the mouse is moved away, the scrolling continues. Let’s see the code below.

<html>
<head>
<title> Bengallery Info. Tech. (BIT) the leading web solution developer </title>
</head>
<body>
<marquee behavior="scroll" align="left" direction="up" scrollamount="2" scrolldelay="10" onmouseover="this.stop()"
onmouseout="this.start()" width="600" height="250">

<p>
<b>About Web-based software</b>
<br />
Unlike the desktop-based software, over the years the web-based software is quickly gaining popularity this is due to its outstanding features and benefits, which include:
<br />
<b>System Independent</b>: as compare to desktop-based software, end-users  need not to worry about the operating system or other hardware support when  using web-based software because all that is required to use web-based software  is only a web browser which can be found on almost every computer and can even  downloaded for free on the internet.<br />
<br />
<b>Central data management:</b> in a scenario where data migration and  management is essential or where more than one user need to update and make use  of a data from a single source, no doubt web-based software out shine its  desktop counterpart also.
<br />
<b>Solution upgrading: </b>Web-based software makes it easy to update the entire solution from one source (central server) while in the case of desktop software you will need to install the update on every computer that uses the solution.<br />
<br />
<b>Security of data: </b> Web-based software often makes it possible to host your database on a separate computer (central server) different from the end-user computer therefore reducing the risk of security threat on data.
<br />
<b>Concurrent user access :</b> web-based software can be access by more than one user at a time.
</p>
 
</marquee>
</body>
</html>

The screenshot below is illustrated to show you what this looks like, but you need to implement the code to see the effect better.

I’ve tried to explain the core path of the code here.
<marquee behavior="scroll" align="left" direction="up" scrollamount="2" scrolldelay="10" onmouseover="this.stop()"
onmouseout="this.start()" width="600" height="250">

onmouseover="this.stop()" this simply tell the browser (e.g. Internet explorer) to stop or pause the marquee, while onmouseout="this.start()" does the opposite, that is for the scrolling to continue and  width="600" height="250" specify the space the marquee will occupy in pixels.
Marquee can be of great importance when you need to:

  1. To draw the website visitor’s attention to the text or images contain within it.
  2. To display a lot of information within a limited or small space.

Note: in as much as marquee is cool to use, you must try to avoid packing too many images within the marquee as it can slow down the downloading time as the user browse your website.

 

Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »