HTML (Images and Video)

• <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.

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

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.

• Universal access. Americans with Disabilities Act (ADA) Section 508 requires websites to be usable and to convey equal information to those with disabilities
  • Required for federal and state government websites
• https://mcachicago.org/Exhibitions [see bottom right and turn on Image descriptions"]
• use for machine learning data (what is this image of?)

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

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

<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

• Table inside a table
• Cells that span more than one row/column

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

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

1. Click on the "Share" button right below the video
2. Then click on the "Embed" button that appears below
3. 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>
   

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

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

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)

• HTML 5 <video> tag
  

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

Sounds simple huh...

• 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>
 

   
 <video control>
        <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>
 

   
 <video autoplay>
        <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>