Media :: HTML Reference

Here is the html and css code to put colors, images, and moving things into your web pages. (I don't actually know how to make the movies and flash and animated gifs — that's a whole other line of work!)

See the web colors page for colors and codes.

HOW TO PUT IN YOUR WEB PAGE:

text effects: blink <blink>
sideways sliding <marquee>
link rollover <marquee>
images: image <img>
backgrounds: background image <style="background-image: url(IMAGE);">
background color <style="background-color: COLOR;">
media: show a movie, flash, or sound – <object> and <embed>
text effects

top ↑

blinking text

<blink> </blink>
Starts and ends the blink.

example:

Here is the code for blinking:

<blink> This is really annoying </blink>

And here is how it looks:

This is really annoying

You can combine font colors, backgrounds ... any text formatting, with the blink tag.

example:

<blink style="color: #cc0000; background-color: #660000;"> <img src="images/new.gif" alt="new" /> Ouch! This is even more annoying! </blink>

new Ouch! This is even more annoying!

But you can't make an image blink with this tag. To do that, you need to make an animated gif in your image program (such as Photoshop, ImageReady, ... )

marquee

A "marquee" in html is a way to make something that scrolls, or moves, across the web page. ("Marquee" is actually a french word, and it is prononced "mar-kay".)

<marquee> </marquee>
Starts and ends the marquee.

example:

Here is the code for a simple marquee:

<marquee> My Big Web Page </marquee>

This will look (more or less :) like this:

My Big Web Page

Again, you can combine font colors, backgrounds, anything.

example:

<marquee style="color: #006633; background-color: #ffcccc;"> <img src="new.gif" alt="new" /> Click <a href="./">here</a> — if you can! <img src="new.gif" alt="new" /> </marquee>

new Click here — if you can! new

attributes

Look in any html reference for other things you can do with marquee: Make it go from left to right, change the speed, etc.


images

top ↑

More about showing an image

(For the basics of the <img> tag, see the graphics section of 2-html_tutorial-basics.html.)

<img src="LOCATION" />

Attributes for the 'img' tag

Here are attributes for the 'img' tag. You can use any of all of them, but of course you always have to use the 'src' attribute also – or you won't see any picture!

width and height:

Using the 'width', 'height' attributes will make the browser load the image faster.

width="NUMBER"     height="NUMBER"
Tells how wide and tall the image is, in pixels. Always use this – it helps the browser make the page faster.

The 'alt' attribute:

alt="TEXT"
'alt' = "alternate". This supplies some alternate text, which will display if for some reason the image doesn't.
It can be used by non-graphical browsers, to tell the user something about what would be there.
And it is used by search engines.

So - always put something in the 'alt' attribute.

align="ALIGN"
["left" or "right"]
align doesn't mean the same thing for an image, as it does for text tags. The img tag is an "inline" tag, and align places the image in relation to the text around it.
Sorry — there is no align="center"!

example code:

<p> <img src="images/dalai_lama-sm.jpg" align="right" /> Here is a picture of His Holiness ... </p>

result in web page:

Here is a picture of His Holiness the Dalai Lama, standing in the hills near McLeod Ganj.

We are using this to demonstrate how we align a picture with some text. By using 'align=right', we tell the browser to put the picture on the right, and wrap the text to the left around the picture.

Try using the same code, and change align="right" to align="left".



example code:

<p> <img src="images/dalai_lama-sm.jpg" width="199" height="126" align="right" border="8" alt="his holiness and the himalayas" /> Here is a picture of His Holiness ... </p>

result in web page:

his holiness and the himalayas Here is a picture of His Holiness the Dalai Lama, standing in the hills near McLeod Ganj.

The border attribute makes a black border. We can use CSS language to change the border color, make background color, and many other interesting things.

border="BORDER"     ("BORDER" is in pixels)
Sets width of border around an image, in pixels.
When your image is a link, it will have a small blue border. So if you don't want the border to show, you can say 'border="0"'.


no border on link — example code:

<a href="somewhere/else/"> <img src="images/b_login.gif" /></a> <a href="somewhere/else/"> <img src="images/b_login.gif" border="0" /></a>

result in web page:


Backgrounds

top ↑

background-color (see the CSS tutorial for how to use this code)

in your stylesheet, head style, or tag style

div { background-color: COLOR; }
span { background-color: COLOR; }

See the web colors page for colors and codes.

code example

body { background-color: #ffcccc; color: #990000; } span { background-color: #ffffff; }
<p> Here is some <span>text</span> with a <a href="./">link</a>. </p>

result in web page:

Here is some text with a link.


See the html reference and tutorial in this directory for more about the table tags.

table with different background colors in cells and spans:

The code for the this table is not really that complicated, but it takes up too much space for this little demo. So i didn't display the code here – i will let you 'view source' to see the code.

animals we like
sheep In asia sheep are small and wooly. In america sheep are very fat and wooly, and really really stupid. Goats everywhere look intelligent, but maybe they aren't. Yak and dri live only in Tibet, because they are very intelligent.
goats
yak
dri

The background of the large right-hand cell is actually a small background image that repeats. The next section explains how to display background images.

background images

in your stylesheet, head style, or tag style

background-image: url(PATH/FILENAME);

You can put background images in the page, as a style for the <body> tag, or in a table, a table cell, a div or p or span ... any block or inline tag!

page with repeating background image:

body { background-image: url(images/grid.gif); color: #336666; }

blue grid ← Here is the actual image that makes the background.

The image repeats over and over in the page to make the background.


page with one background image:

body { background-image: src(images/dalai_lama.jpg); background-repeat: no-repeat; color: #000066; } a { color: #ffffff; }

You can make the image not to repeat, only in css language. Be careful with text and link colors!

table with a background image:

table { background-image: src(images/kalm-valley.jpg); }

This is one of james' homes. It is called the Kalmiopsis, in southern Oregon. The animals of james' home are:
eagle
hawk
owl
elk
deer
wolf

Same as with a background image in a page – if the image is smaller than the table or the cell, it will repeat. In css language, you can make the image not to repeat, or to repeat only horizontally or only vertically.

See the end of the background color section for an example of using a repeating image to make a pattern.

putting it all together with style

Here's an example putting together the things we learned above.

(Learn more about CSS in the CSS tutorial.)

code example:

<div style="display: table; padding: 0 12px; background-image: url(images/grid.gif);"> <p> <img src="images/dalai_lama.jpg" width="200px" style="padding: 8px; margin: 0 12px; background-color: #ffff99; border: 5px double #cc0000; float: right;" alt="his holiness and the himalayas" /> Here is a picture of His Holiness ... </p> </div>

his holiness and the himalayas Here is a picture of His Holiness the Dalai Lama. We are using it to also demonstrate how we use stylesheet language to make a background color and border for the picture. We also use css to make the "padding" (space between the picture and the border), and the "margin" (space between the border and the text).


Media

top ↑

Embedding media in your web page is a little tricky.
The code below works for Flash, Quicktime, RealPlayer, ShockWave, Java or Windows Media Player files. (But it is not recommended to use Windows Media Player files on a website, since they don't work everywhere.)

<embed> - the embed tag. embeds a flash, movie, or sound on the web page.

The basic embed code is:
<embed src="FILE"> </embed

Remember that the movie or sound is still a separate file. It does not become part of your html file.

It is recommended to always use the 'width' and 'height' attributes. These will make the browser load the video faster.

width="NUMBER"     height="NUMBER"
Tells how wide and tall the video should be, in pixels. Even if you are using the video at the same size, always use this tag. It helps the browser make the page faster.

alt="TEXT"
'alt' - "alternate". This supplies some alternate text, which will display if for some reason the video doesn't. Also it can be used by non-graphical browsers, to tell the user something about what would be there.

Below are other attributes for the 'embed' and 'object' tags. You can use any of all of them, but of course you always have to use the 'src' attribute also – or you won't see any video/audio player!

Sorry - coming soon ...

Putting it all together with style

Just like with an image, put your media code inside of a div tag, and give it border, position, background-color, etc.

code example:

<object width="280" height="170"> <param name="movie" value="Files4pages/tibetan_olympics.swf" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="Files4pages/tibetan_olympics.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="280" height="170"> </embed> </object>

result on web page:

Learn more about media

  • Flash embedded in HTML – How-to
  • Quicktime movies in HTML – How-to

More gory details

more


Spoiling the Fun

top ↑

Now i have to tell you something. These cool things are all fun, but — they can also be annoying, or even make it hard to use the website at all. When that happens, we have another name for them: "Stupid Web Tricks".

It takes a real artist to use these Tricks in a way that adds to the site, rather than making it annoying.

So go ahead and play with them all, and have fun! Then when you are making a real website, try to see the website as if you are the user of the site, who has never seen the site before. And then ask yourself, does this marquee, or bright color, or background image, help me use the site ... or does it get in the way?


copyright / license

top ↑

Q: Can i copy this file? Can i give to other people?

Answer:

Sure, you can give it to anyone, according to the terms of the license below. It is copyright © 2004 James Walker.

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts. A copy of the license is included here.

If not found, find it at www.fsf.org - the Free Software Foundation.


translation

top ↑

It would be very useful to have translations of this document in any language. Most preferred would be Tibetan and Chinese. Please contact me if you can do a translation for us.


contact

top ↑

Was this helpful? Is it clear, or confusing? I would be happy to hear anything about how to make this better. You can contact me at the email address i have given you, or at http://www.webwalker.to/contact.php

5-media_tutorial.html
Revised 14 January 2011