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


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

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

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
   

  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.



You may not see anything here if this document is accessed via https

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



Change the code so that it is using https (since we are using https on this document)
   
   <iframe width="560" height="315" src="https://www.youtube.com/embed/eU7V4GyEuXA" 
   frameborder="0" allowfullscreen></iframe>
    




* Note that the HTML snippet Youtube gives you sometimes seems to be missing http: before the server name. (This may be a bug).
* Also note that the protocol used to access the web page (http or https) has to match the protocol used in iframe (http if http, and https if https) and this is enforced only when the files are on the server.
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="https://www.nyu.edu"> </iframe>







<iframe src="https://people.reed.edu/~miyos/F24/ILCP/ilcp_schedule_f24.html"> </iframe>





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



Browser Console Error message: Refused to frame 'https://www.reed.edu/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://rdc.reed.edu https://reed.cascadecms.com https://my2.siteimprove.com".

... www.reed.edu only allows to be in iframe if it is from rdc.reed.edu...etc but not if html from people.reed.edu

So I asked for people.reed.edu to be included. Now it works IF it is from people.reed.edu. => If it is not published on people.reed.edu, it will not work!!!
Notes

Using video hosting services

Youtube, Vimeo ..etc

Notes

Hosting your own video:

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

Sounds simple huh...

Notes

Web Broswer and Video Format

Video Formats:







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>
 
If you want video control,
   
 <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>
 
If you want autoplay
   
 <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>
 
Notes