Week 13 | Web II

Lists Within Lists

  • OPEN and Unordered List
  • CREATE a line in the list BUT do not close the li
  • OPEN the Ordered List
  • CREATE several lines in the list
  • CLOSE the Ordered List
  • CLOSE the line and keep going

SEE THE CODE BELOW

LISTS WITHIN LISTS

<ul>

<li>Interests
<ol>
<li>Golf</li>
<li>Sleep</li>
<li>Lasers</li>
</ol>
</li>
<li>Favorite Teams</li>
</ul>

<ul>
<li>Interests
<ul>
<li>Golf</li>
<li>Sleep</li>
<li>Lasers</li>
</ul>
</li>
<li>Favor


DO NOW | CODE ACADEMY

HTML Structure: Using Lists
Social Networking Profile – Exercises 1-7


TABLES

  • Tables are  a way to store tabular data so it is easy to read.
  • It’s a way to present information neatly in a table with rows and columns.

 

  • To create a table, you have to start with the tag below:

<table>

  • To add rows of information, use the tag below.

<tr>  This tag tells each row how many cells to have. 

Add a single <td>(“table data”) cell to the first row, which creates a single column. See below:

single column table<table >
<tr>
<td>One</td>
</tr>

<tr>
<td>One</td>
</tr>

<tr>
<td>One</td>
</tr>


TO ADD TWO COLUMNS TO A TABLE SEE THE CODE BELOW:

2 Column Table

<table>

<tr>
<td>King Kong</td>
<td>1897</td>
</tr>

<tr>
<td>Dracula</td>
<td>1897</td>

</tr>

<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>

</tr>

</table>


DO NOW | CODE ACADEMY

HTML Basics III
Tables
Lessons 6-10


DIV AND SPAN TAGS

DIV and SPAN tags are “structure tags”.

<div></div>

Short for “division,” <div> the div tag allows you to divide your page into containers (that is, different pieces).

<span> </span>

The span tag lets you to control styling for smaller parts of your page, such as text. If for instance you always want the first word of your paragraphs to be red, you can wrap each first word in<span></span> tags and make them any color you want.

DO NOW | CODE ACADEMY

HTML Basics III
Lessons 11-15


HTML: INSERTING IMAGES
IMAGE FILE FORMATS: Review

There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way. NOTE: .PSD, .AI and .INDD files will NOT show up on your website.

REVIEW FROM PHOTOSHOP
Jpeg 

Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.

Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Resize your images in Photoshop PRIOR to uploading them on the web.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.


SAVING IMAGES

Saving Images Out of Photoshop or Illustrator  

Both Photoshop and Illustrator have excellent options for optimizing images for the Web, via the “Save for Web” menu. It is better to use this option rather than “Save As” or “Export” options, as you will have more control over the output settings and the final file size will be smaller because no preview image is saved with the file.

Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: FIRST, save the file type as a Photoshop or .PSD file. This will save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. THEN, save as a .jpg, .png or .gif which compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.

***Here’s a great reference for “save for web”.


3 Ways you can Retrieve Images to Place onto your Website

Use a third party image hosting site like Flickr.

Flickr:

Upload your image to your Flickr account and copy the image URL. To get the direct URL of an image on Flickr do the following:

Upload your own image or search and find an image already on Flickr. One you’ve got the image you want to use, right click on the image and then click on “view all sizes”. Choose your size and click on it. You’ll see the image with various image sizes listed above it. Choose your size and click on it. Right click on the image and choose “copy image URL”. NOTE: you need the direct url to image with a files extension of .jpg, .gif or .png.

 <img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>

Use a direct URL to a website.

Find your image anywhere on the web. Click on the image and then click on “full-size image”. Copy the URL and place the full URL into your HTML file.

 <img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>

Upload your own image via FTP to your own web hosting space.

Log into your web hosting space via FTP and upload your images. It’s good practice to place them inside a folder called: images.

 <img src=”images/dog.jpg”>

Here’s a great resource for finding images released under Creative Commons.


ADDING IMAGES TO YOUR PAGES

Images are displayed on the web using the image tag:

<img>

This is the basic syntax for using the image tag:

<img src=”images/dog.jpg”>

You MUST upload the image to your ftp site for the web browser to find it. Use JPGs for photographs, and GIFs or PNGs for line art or most screenshots.

Create a subfolder on you FTP site called “images.” Whatever images you want to show on your web pages, upload them to this “images” folder.

The “alt” attribute is used for the text that will display if an image does not load in the browser, and in some browsers is visible when you hover over the image with the mouse:

<img src=”images/dog.jpg” alt=”Spot the Beagle” />

The image tag also allows you to input a numeric value for the height and width of an image. It is a good idea to specify the height and width, as this allows the browser to render the page faster.

<img src=”images/dog.jpg” alt=”Spot the Beagle” height=”400px” width=”200px”>

You can try it out on W3Schools.


Pulling an Image from the Web

If you’re pulling in an image from the web, view its properties to grab the absolute URL. If you are pulling in an image from a folder on your a server, call to it correctly:

Examples:

  • <img src="http://www.url.com/nameofimage.jpg" alt="Name of Image">This image is located somewhere else on the web.
  • <img src="images/dog.jpg" alt="Spot the Beagle">This image is located within a folder called images on my server.

Images as Links

You can use an image to link to another document by simply wrapping an image tag in a link tag:
<a href="filename.html”><img src=”image/dog.jpg“ alt="Spot the Beagle"></a>

You can see an example on W3Schools here.


DO NOW | CODE ACADEMY

HTML Structure: Tables, Divs, and Spans | IMAGES
No. 6 | Clickable Photo Page – Exercises 1-7


Background Images

You can set an image as a background in any page element. The properties of background images are detailed here:

****Here’s a great link several sites that generate backgrounds for you. You can create gradients, stripes, tartans, tiles and patterns.

Putting it All Together: Images and CSS

<!DOCTYPE html>
<html>
<head>
<title>HTML Images Tutorial</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>

<h1>
HTML Images Tutorial
</h1>

<h3>
There are three way to place <i>images</i> onto your HTML page.
</h3>

<ol>
<li>Use a third party web hosting space.</li>
<li>Link to an image already on the web.</li>
<li>Upload an image to your web hosting space using FTP.</li>
</ol>

<p>
Use a direct link to pull this image from <b>Flickr</b>or another image hosting site.
</p>

<div align=”left”>
<img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>
</div>

<p>
Upload an image to your site by <b>linking</b> to an image anywhere on the web.
</p>

<div align=”left”><img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>
</div>

<p>Or, you can <b>upload</b> an image to your web hosting space using<strong>FTP.</strong>
<div align=”left”>
<img src=”images/dog.jpeg”>
</div>
</p>

<p>
You can even use an image as a link to a <b>URL</b> anywhere on the web.
</p>

<p>Create a link of an image:
<a href=”http://www.blogcdn.com/www.urlesque.com/media/2008/11/23-pooch11.jpg”>
<img src=”images/Blinky_Dog.gif” alt=”dog gif”></a>
</p>

</body>
</html>
If you use the HTML above, you can see what the site looks like in the screenshot below.

You can see the FULL HTML page here. The HTML was upload to web space using FTP.


Image Spacing and Alignment

Let’s see how it looks when you add text. Type in “This is one crazy dog!” directly after the close of the img tag. The text will bump up against the edge of the image and wraps around the bottom of the image (depending on how much text you’ve written). To make the text wrap correctly, add an “align” attribute to the image. It’s your choice whether you want to align it to the right or left by using align=”left/right”.

In the image below I’ve added the attribute align=”left” – see the full code here: <img src=”images/dog.jpeg” align=”left” />


A Simple Thumbnail Gallery

This method creates a flexible grid of thumbnail images and captions that dynamically fills rows based on the browser width. This is what it looks like in action:

Each thumbnail and caption is part of an unordered list (ul) with the id “thumbnails”. The list items (li) are set to display:inline and float:left and have background, margin and padding set to create the white boxes around them.


Rounded Corners

It seems like the trend nowadays are images that have rounded corners. If you don’t want to manually do it in photoshop or illustrator, use this online service called RoundPic.

View the links below to learn more about rounded corners and background images.


Embedding Multimedia

Playing Quicktime and Flash Movies
The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

With the object element, code that will play a QuickTime movie can easily be added to a web page. The object can be set to automatically install a QuickTime player if it is not already installed on the users computer.

If you use a third-party service like YoutubeVimeoGoogle, or blip.tv, you can just copy their embed code and paste it into your .html file.

  • Choose video
  • Choose share
  • Choose embed
  • Copy code

<iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/rmTg-qHcGs4″ frameborder=”0″ allowfullscreen></iframe>


EMBEDDING AUDIO

There are several different types of music formats that are used…so which one do we use for the web?

The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.

ADDING INLINE SOUND
When sound is included in a web page, or as part of a web page, it is called inline sound.

If you plan to use inline sounds in your web applications, be aware that many people find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.

My best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.

So if you insist… you just need to use the tag.

<embed src="beatles.mid" />

HYPERLINKING SOUND
If a web page includes a hyperlink to a media file, most browsers will use a “helper application” to play the file.

The following code fragment displays a link to a music file. If a user clicks on the link, the browser will launch a helper application and play the music file.

<a href="nameofyoursong.wav">Play this tune</a>

Play this tune


HOMEWORK | WEEK 13

CODE ACADEMY  |  SOCIAL MEDIA NETWORKING
If you haven’t already done so, complete the social media networking section under the course.
HTML Structure: Using Lists. It’s listed as number 4.


CODE ACADEMY  |  LIST WITHIN LIST
On one of your pages create a list within a list using ordered and ordered list.


CODE ACADEMY  | TABLES
On one of your pages create three tables.

  • One table with one column and three items.
  • One table with two columns and three items.
  • One table with three columns and three items.

CODE ACADEMY  | Clickable Photo Page
HTML Structure: Tables, Divs, and Spans
No. 6 | Clickable Photo Page

Create a NEW html page called portfolio.html and create a clickable photo pages using images you created from the Photoshop and/or Illustrator section of the class. Upload it to you site.


Rounded Pictures 

Add at least three rounded photos on your portfolio page.


EMBED VIDEO

Add a video to any page on your website.


EMBED AUDIO
Go to Sound Cloud and find any sound, copy the source code and embed it on any page.

27 thoughts on “Week 13 | Web II”

Comments are closed.