Elijah's Intro Elijah's Intro


Intro to web design

How to make a webpage with HTML

How to make marquees

You can make a marquee by typing <marquee> (Input text here) </marquee>

(input text here)

To make a marquee with an image or GIF in it you would put <marquee> <img> src=(put gif or image name here)</img>

How to use pictures

To use a picture on your website you can use <img src="testimage.png" > The image will have to be in your project folder.

You can also embed a link in a picture so that if someone clicks on that picture it will redirect them to whatever page you have embeded in the picture.

To put a link in a picture type <a href="put full link here"> <img src="put picture here"></a>

Click me! >>>>>>> Nyan cat xD

Random stuff

Use <B> to bold text use <i> to make text italicized

This is bold

This is italic

To make a table type <table border="1"> Then type to make a row and <td> to add data to a row also making columns. Type </tr> to end a row.

<td> Table data </td> <td> Table data </td> <td> Table data </td>
<td> Table data </td> <td> Table data </td> <td> Table data </td>
<td> Table data </td> <td> Table data </td> <td> Table data </td>

Ordered, Unordered & Descriptive Lists

You can make ordered, unordered and descriptive. Ordered lists add number bullets next to the list items. Unordered lists add bullet points to the list items. Descriptive lists allow you to add a description to each list item.

To make an ordered list type <ol> then type <li>List item</li> Do this for every new list item you want to add. To make an unordered list type <ul> and do the same thing as you did for the ordered list to add items. To make a descriptive list type <dl> and type <dt> to make a term and <dd> to add a description to that term. Don't forget to close each term and description. Always close your list with the </ol>, </ul> or </dl>.

Unordered list

Ordered list

  1. List item 1
  2. List item 2
  3. Lsit item 3

Descriptive list

Term 1
Description of Term 1
Term 2
Description of Term 2
Term 3
Description of Term 3

Advanced Marquee Functions

To make a standard word marquee, simply type the following code:
<marquee>TEXT</marquee>
This will make the text do this:
TEXT


You can add color attributes to your text, along with bold, size, italic, etc.
Using this code:
<marquee><font color=red size=3><b>TEXT</b> </font></marquee>
Will make the marquee text do this:
TEXT


If you do not want your marquee text/image to scroll the entire length of the page, you can assign a WIDTH attribute to the code.
Using a width attribute such as this one:
<marquee width=200>TEXT</marquee>
Will make the marquee text do this:
TEXT


Again, you can assign other text attributes.
Entering in this code:
<marquee width=200><font color=red><b> <i>TEXT</i></b></font></marquee>
Will make the marquee text do this:
TEXT
You can set the width to how ever long you want it to scroll. In this example, i used 200 as the width.


By changing TEXT to an IMAGE, you can make an image do the same things in your marquee.
Using this image code:
<marquee><img src="spidey_caught.gif"></marquee>
Will make the marquee image do this:



You can set a width attribute for image marquee's too. Using this code:
<marquee width=200><img src="spidey_caught.gif"></marquee>
Will make the image marquee do this:



You can also change the direction a marquee will go by simply adding a direction attribute.
This: <marquee direction=left>TEXT</marquee>
Will give you this:
TEXT


This: <marquee direction=right>TEXT</marquee>
Will give you this:
TEXT


This: <marquee width=200 direction=left>TEXT</marquee>
Will give you this:
TEXT


This: <marquee width=200 direction=right>TEXT</marquee>
Will give you this:
TEXT


Again, you can add your own code for color, size, bold, etc.


If you'd like to make an image marquee scroll the direction you want it to, then use the following codes:
This: <marquee direction=left><img src="spidey_caught.gif"></marquee>
Will give you this:



This: <marquee direction=right><img src="spidey_caught.gif"></marquee>
Will give you this:



This: <marquee width=200 direction=left><img src="spidey_caught.gif"></marquee>
Will give you this:



This: <marquee width=200 direction=right><img src="spidey_caught.gif"></marquee>
Will give you this:



You can make text or image marquees go back and forth by using a behavior attribute. The behavior attribute that will make text or images go back and forth is the ALTERNATE code. You will place this code in your marquee command as well.
Using this: <TEXT</marquee>
Will make the text do this:
TEXT


It works best by using the width attribute:
<marquee width=200 behavior=alternate>TEXT</marquee>
Will give you this:
TEXT


You can use the behavior attribute with images as well.
This: <marquee behavior=alternate><img src="spidey_caught.gif"></marquee>
Will give you this:



and this: <marquee width=200 behavior=alternate><img src="spidey_caught.gif"></marquee>
will give you this:



You can use a background color that your image or text will marquee across by simply adding a background attribute to the marquee code.
This: <marquee bgcolor=orange>TEXT</marquee>
Will give you this:
TEXT


This: <marquee bgcolor=orange><img src="spidey_caught.gif"></marquee>
Will give you this:



This: <marquee width=200 behavior=alternate bgcolor=orange>TEXT</marquee>
Will give you this:
TEXT


This: <marquee width=200 behavior=alternate bgcolor=orange><img src="spidey_caught.gif">< /marquee>
Will give you this:



You can also make a marquee go up and down, and not only right or left. Simply by using the UP or DOWN code in the direction attribute.
This: <marquee direction=up>TEXT</marquee>
Will give you this:
TEXT


This: <marquee direction=down>TEXT</marquee>
Will give you this:
TEXT


Now, if you think that the height of the up or down marquee is too big or too small, then simply add a HEIGHT attribute to the code, just like you did the width attribute.
This: <marquee height=50 direction=down>TEXT</marquee>
Will give you this:
TEXT


This: <marquee height=50 direction=up>TEXT</marquee>
Will give you this:
TEXT


Again, the same applies for images.
This: <marquee height=50 direction=up><img src="spidey_caught.gif"></marquee>
Will make this:



This: <marquee height=50 direction=down><img src="spidey_caught.gif"></marquee>
Will make this:



Want it to go up and down?
Then do this: <marquee height=50 behavior=alternate direction=up>< img src="spidey_caught.gif"></marquee>
To make this:



Or this: <marquee height=50 behavior=alternate direction=up>TEXT</marquee>
To make this:
TEXT


Marquees run at a standard speed. You can also make the image or text move as fast or as slow as you'd like it to by simply adding a SCROLLAMOUNT attribute to the marquee code. The higher you set the scrollamount, the faster your marquee will scroll.
This: <marquee scrollamount=2>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=4>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=7>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=15>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=25>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=35>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=50>TEXT</marquee>
Will give you this:
TEXT


This: <marquee scrollamount=75>TEXT</marquee>
Will give you this:
TEXT


You can combine different attributes and marquees to make up one really nifty marquee, which would resemble a bouncing or floating text/image. But you have to be careful not to give the back to back marquees confusing attributes, or your marquee will look all funky.
Using this: <marquee behavior=alternate direction=up width=200 height=50><marquee behavior=alternate direction=right>TEXT </marquee></marquee>
Will give you this:
TEXT


And this: <marquee behavior=alternate direction=up width=200 height=50><marquee behavior=alternate direction=right> <img src="spidey_caught.gif"></marquee></marquee>
Will give you this:



You can combine marquees back to back in order to make weird effects.
The splitting effect:
<marquee width=100 direction=left>TEXT</marquee><marquee width=100 direction=right>TEXT </marquee>
TEXTTEXT


The crashing effect:
<marquee width=100 direction=right>TEXT</marquee><marquee width=100 direction=left>TEXT </marquee>
TEXTTEXT


The splitting effect with color:
<marquee width=100 direction=left bgcolor=orange>TEXT</marquee><marquee width=100 direction=right bgcolor=pink>TEXT</marquee>
TEXTTEXT


The crashing effect with color:
<marquee width=100 direction=right bgcolor=orange>TEXT</marquee><marquee width=100 direction=left bgcolor=pink>TEXT</marquee>
TEXTTEXT


And the same goes with images...
The splitting effect:
<marquee width=100 direction=left><img src="spidey_caught.gif"></marquee> <marquee width=100 direction=right><img src="spidey_caught.gif"></marquee>



The crashing effect:
<marquee width=100 direction=right><img src="spidey_caught.gif"></marquee> <marquee width=100 direction=left><img src="spidey_caught.gif"></marquee>



The splitting effect with color:
<marquee width=100 direction=left bgcolor=orange><img src="spidey_caught.gif"></marquee> <marquee width=100 direction=right bgcolor=pink><img src="spidey_caught.gif"></marquee>



The crashing effect with color:
<marquee width=100 direction=right bgcolor=orange><img src="spidey_caught.gif"></marquee> <marquee width=100 direction=left bgcolor=pink><img src="spidey_caught.gif"></marquee>