HTML Tutorial for Special Effects

Save

HTML allows for embedding of images and objects that can be used for interactivity. HTML works well with JavaScript that can be used to affect the behavior of web browsers. In addition to JavaScript, Cascading Style Sheets (CSS) can also be integrated to affect the layout and display of content. When used decently, the effects can provide functionality and enhance user experience and make a website stand out. To be effective, the special effects should not slow the browser or irritate the visitors.

Scrolling Text

  • Fire up your Notepad application and type the basic HTML tags as shown below:

    html>
    <head>
    <title> This is my eHow page</title>
    </head>
    <body>
    This is a Scrolling Text
    </body>

  • Save the file above as index.html on your desktop and double-click it to run. You will notice that only a static text "This is a Scrolling Text" appears.

  • Go back to your Notepad application and add the text below under the "<body>" tag:

    <body>
    <marquee> This is a Scrolling Text </marquee>

    The entire code should now read as shown below:

    <html>
    <head>
    <title> This is my eHow page</title>
    </head>
    <body>
    <marquee>This is a Scrolling Text</marquee>
    </body>

Scrolling Images

  • Locate the image you want to scroll on a web page and right click, go to "Properties" and find the log address. Use "View Page Source" when using other browsers like Firefox and navigate to the logo address.

  • Copy the link page to the logo and go back to your HTML document and paste it as shown below:

    <html>
    <head>
    <title> This is my eHow page</title>
    </head>
    <body>
    <marquee><img src="http://www.google.com/images/logo.gif>&lt;/marquee>
    </body>
    </html>
    This is just an example and may not work properly. Use a real link that references a real image.

  • Save the file, go back to your document and view. You can change the size, scrolling length and other details as well.

Mouse-Over Button

  • Copy or create two images, preferably those that look like buttons, to a folder. Name the images "one" and "two".

  • Open your Notepad application and type the code below:

    <html>
    <head>
    <title> This is my eHow page</title>
    </head>
    <body>
    <img src="one.gif" onmouseover="src= 'two.gif'" onmouseout="src= 'one.gif'" >
    </body>
    </htnl>

  • Save the file as image.html in the same folder that you save the images.

Alert Script

  • Fire up your Notepad and type the code below:

    <html>
    <head>
    <title> This is my Pop Up Page</title>
    </head>
    <body>
    <a href="http://Google.com"
    onMouseOver="alert('This is a Pop Up);return true;">Click PopUp</a>
    </body>
    </html>

  • Add your own popup message, link text and the website that you want the link to reference.

  • Save the file as pop.html and double-click to run.

Tips & Warnings

  • The scrolling text can be define to scroll a certain length using the "width=%" tag as shown below:
  • <marquee width="30%"> This is my Scrolling Text </marquee>
  • You can make the image mouse over more interactive by adding more arguments into the code. Some of these include:
  • onmousedown= "src= 'image path'"
  • onmouseup= "src= 'image path'"
  • onmouseout= "src= 'image path'"

References

  • Photo Credit light effects image by cloud1971 from Fotolia.com
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!