Special HTML Effects for Web Pages


Hyper Text Markup Language (HTML) is a language used in web page design. Even though it is a simple language your web pages do not have to be simple. Use some of the special effects from the list to enhance your web page.

Each HTML command or effect has a start tag and an end tag. A start tag looks like <HTML> and an ending tag looks like the start tag but has a forward slash in front of the tag </HTML>. Below is the basic code needed to set up a web page using HTML. All of the fun stuff goes between the beginning and ending <Body> tags.


&lt;Title>Will display your web page name &lt;/Title>
This is where you design your page.


To test your new HTML code, copy the HTML code from above and paste it into notepad. Insert your new code between the body tags. Save the new code as an HTML file (file_name.HTML). Then open the new file in your browser window to view your new code.

Background color and sound

  • Use the background color tag to give your page some color. The color tag is added to the <Body> tag.
    <Title>Will display your web page name </Title>
    <Body bgcolor="#0000ff">
    Color #0000FF is defined as a hexadecimal value. The actual color values can be found throughout the web.

    You can also add sound to your page by using the background sound tag.
    <Bgsound src="mymusic.mp3" LOOP="2>
    Bgsound src is the name and location for your music file. Loop is the number of times that you want your sound to be played. If you leave the loop attribute off the sound will loop nonstop.

Setting Up Text

  • There are many different ways to set up the text on your web page. A simple way to make text stand out is to use the heading tags. The <h1> tag has the largest heading size, while the <h6> tag is the smallest.
    <h1>Heading 1 </h1>
    <h2>Heading 2 </h2>
    <h3>Heading 3 </h3>
    <h4>Heading 4 </h4>
    <h5>Heading 5 </h5>
    <h6>Heading 6 </h6>

    To separate text with a horizontal line, use the <hr> tag.
    <hr width=50%" color="0000ff" size="8"> </hr>
    Width is how far across the page the line should extend. The starting point is centered in the page and will extend across 50% of the page.

    To make your text italicised use the <em> tag.
    <em>This is the emphasized tag</em>
    You can also use <i>text</i>

    To make your text bold use the <strong> tag.
    <strong>This is the strong tag</strong>.
    You can also use <bold>text</bold>.

    To make your text really stand out
    <em><strong>Text that is italics and bold<strong><em>

Marquee Scrolling

  • To scroll your text across the web page. Use the <Marquee> tag.
    Hello World
    This will scroll Hello World across the web page. The default scroll direction is right to left. To change scroll direction use <Marquee Direction=Right>.

Other Features

  • To place an image on your web page use <img src> or image source.
    <img src="my image.jpg" alt="this is what is displayed when you mouse over the image" Align = right>. This will place the image on the right side of the web page.

    Use the <href> tag to add a link to you web page.
    <A href="www. some_new_webpage.html"> This is the underlined text that the use will click.</A>

    There are two types of list that can be added to the web site, unordered list and ordered lists.
    An unordered list is bulleted list. Use the <ul> tag to create the list.
    <lh> This is the title of your list</lh>
    <li> This is your the first line item in your list </li>
    <li> This is the second line item in the list</li>

    An ordered list lets you list items in a sequence such as 1,2,3 or a,b,c. Use the <ol> tag to create an ordered list. The attribute Type, lets you define the sequencing of the list. In this example the list will be lettered with capital letters starting at A. You can also choose between a lower case a and the number 1 or for Roman numerals, you can use I or i. The default value is a number list starting at 1.
    <ol type=A>

     &lt;lh>Why my web page is great!!!&lt;lh>
    &lt;li> Reason number 1&lt;/li>
    &lt;li> Reason number 2&lt;/li>


Related Searches


  • Photo Credit background with binary data image by Pedro Nogueira from Fotolia.com
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

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

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