HTML #6

Image Formats

GIF	Only 256 colors. Mostly for logos and line art. Not suitable for photographs. Animation and transparency.
JPEG	Lossy compression (works really well for photographs but not for line-art and logos with sharp edges)
PNG	Nonlossy and fullcolor. Use for non-photographic images instead of GIF. (GIF use historical/inertia). Transparency.

Notes

Including images in HTML

<img> tag. - Has no closing tag
Use the src attribute to specify the image file.

Sample file


   <img src="photo.jpg" />
   <img src="../photo.jpg" />
   <img src="http://www.reed.edu/assets_secondary/images/secondary_image_bgnd.jpg" />

   <img src="images/studentwork.jpg" alt="student work" height="100px" width="100px" align="right" />

align attribute for the <img> tag has been dropped from HTML5 in favor of using CSS. Most browsers in use today still support this tag.

Notes

Alternative Text for Images

The web is increasingly becoming visual but there are people who browse without graphics.
You may use images for buttons that indicate direction.
Universal access

The alt attribute of img tag


   <img src="photo.jpg" alt="photo of sunset" />
   <img src="buttonright.jpg" alt="right button" />
   <a href="go_right.html"> <img src="buttonright.jpg" alt="right button" /> </a>

Note that the image serves as a link on the last example.

Notes

Other Image Related Features

Image maps (aka clickable maps). Example of an image map [here].
Using image as a background. (Uses CSS)

Notes

Tables

NEW STUDENTS (FALL)
	2001	2002	2003
First-Year	355	314	301
Transfers	43	33	30

Start tables with the <table> tag. Tables have the following elements

tr: table row
th: table headings
td: table data

The above table uses the following elements:

<table>

<caption></caption>
<tr>	<td></td>	<th></th>	<th></th>	<th></th>	</tr>
<tr>	<th></th>	<td></td>	<td></td>	<td></td>	</tr>
<tr>	<th></th>	<td></td>	<td></td>	<td></td>	</tr>

</table>

in HTML:

<table>
<caption>NEW STUDENTS (FALL)</caption>
<tr> <td></td>            <th>2001</th>  <th>2002</th>  <th>2003</th> </tr>
<tr> <th>First-Year</th>  <td>355</td>   <td>314</td>   <td>301</td>  </tr>
<tr> <th>Transfers</th>   <td>43</td>    <td>33</td>    <td>30</td>   </tr>
</table>

You can change how the table looks (border width, color, alignment) using CSS. You may want to consult w3schools for advanced structuring of tables such as

Notes

Embedding video (youtube)

Let's say you wanted to embed a video on youtube you found here:

   
   http://www.youtube.com/watch?v=eU7V4GyEuXA

Click on the "Share" button right below the video
Then click on the "Embed" button that appears below
Cut and paste the HTML code into your page.

   
   <iframe width="560" height="315" src="http://www.youtube.com/embed/eU7V4GyEuXA" 
   frameborder="0" allowfullscreen></iframe>

* Note that the HTML snippet Youtube gives you seems to be missing http: before the server name. (This may be a bug).

Notes

IFRAMES

Use <iframe> to embed another document within the current document. Use CSS to change the width/height and the scrolling properties.


<iframe src="http://www.reed.edu"> </iframe>

Notes

Using video hosting services

Youtube, Vimeo ..etc

Storage free. Reduces bandwidth to your server.
Limit on the length of video.
Supports a wide variety of video formats and quality.
Video player (versatile, mobile support, some design/aesthetic limitations)

Notes

Hosting your own video

Flash
HTML 5 <video> tag

   
	  <video src="great_video.mp4"> </video>

Sounds simple huh...

Notes

Web Broswer and Video Format

Video Formats:

codec format - how the video is encoded/decoded (H.264, Theora, VP8)
container format - the container file that encapsulates the video ( MP4, Ogg, WebM)

Use H.264/MP4 (for most browsers except older versions of Firefox)
- Converting videos to H264 - Handbrake
Use Ogg Theora (for Firefox)
- Converting videos to Ogg Theora - Firefogg add-on for Firefox
- or VLC

Using the source element

   

 <video>
        <source src="movie.webm" type="video/webm" />
        <source src="movie.ogg" type="video/ogg" />
        <source src="movie.mp4" type="video/mp4" />
        <p>This is fallback content</p>
 </video>

Notes