Week 3 – HTML Structure – Intro to CSS

Creating an internal Link on your Webpage:

internal link



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.


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.

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


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.


Image tag
Images are displayed on the web using the image tag:


This is the basic syntax for using the image tag:

<img src=”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:


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

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>
<title>HTML Images Tutorial</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>

HTML Images Tutorial

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

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

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

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

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

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

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

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

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

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.

More CSS Image Techniques

Thinking through your images:

Foreground vs. Background Images. The best way to think about this is as a picture and a frame. Background images are the frame, foreground images are the picture. Background images should be restricted to interface elements, foreground images to content.

Live Text vs. Graphic Text. In order to keep your pages as semantic and machine readable as possible, not to mention keeping download time to a minimum, it is important to use as much “live” text as possible. However, there are times when you don’t want to be limited to the web safe fonts. Today we’re going to explore a few ways that you can get the best of both worlds.

You can see a great example of image rollover on the Apple website.

See a great example of image replacement rollover.

<div id=”nav”>
<ul id="navlinks">
   <li id="home"><a href="#">Home</a></li>
   <li id="navprojects"><a href="#">Projects</a></li>
   <li id="navclients"><a href="#">Clients</a></li>
   <li id="navevents"><a href="#">Events</a></li>
   <li id="navabout"><a href="#">About</a></li>
   <li id="navcontact"><a href="#">Contact</a></li>
  • Image replacement CSS The key to this technique is to use a single image, containing all the navigation menu items and all of their states.

Then, set up a unordered list of links in your html page. This is a nice semantic way to represent navigation:

Make sure that you give the ul and each li unique ids.

Then, in your CSS, you can use link states (a, a:hover, a:active, a:visited) and background position to reveal the appropriate section of the background image.

CSS Positioning. A great resource to check out.

There are three techniques displayed in this example:

  • Image with background color rollover
  • Head tag replacement
  • Single Image Navigation Rollover

 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.

This is the code required to play a QuickTime movie:

quicktime html code

You can also display a flash animation as an object:

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.


Youtube (Third-Party Video Service)


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.

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.

Our 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" />

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


Introduction to CSS

CSS adds styles to your web pages: it’s the skin over the bones of HTML. This tutorial will teach you how to style our webpages.

  • Cascading Style Sheets (CSS) are a standard developed to allow designers control over presentational elements of a Web page and effectively separate content from presentation.
  • A style is a group of attributes that are called by a single name.
  • A style sheet is a group of styles.
  • The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation. It also means that different applications of CSS can be applied to a page in order of precedence: inline, embedded, external and default.


1. What’s CSS?

The basics: what CSS is, how it works, and why we separate form from function.



The CSS syntax is a little different from the tag and attribute format of HTML. A CSS style is made up of a selector, which is the HTML element or class name you wish to define rules for, and a set of properties and values. A property and its value are separated by a colon (:). You can define multiple properties for a style, separating them with a semi-colon(;). Property/value sets are enclosed in brackets{}.

For example, if you wanted to redefine all HTML in your <p> tags to look like this, then your style would look like this:

p {
color: #00CC00;
font-size: 13px;
font-family: "Courier New", Courier, monospace;
font-weight: bold; text-decoration:none;

The order of properties doesn’t matter, as long as you separate them with a semi-colon. Property values that have multiple words are surrounded by double quotes: “Courier New”.

You can apply the same style to multiple selectors by grouping them:

h1, h2, h3, h4 {

color: #00CC00

There is a full CSS reference and extensive code examples at:

W3 Schools CSS Tutorial

also at: http://www.barelyfitz.com/screencast/html-training/css/positioning/


2. CSS Syntax

Now that you know what CSS is, it’s time to learn how to use it.

Sizing in CSS

There are a number of different measurement schemas within xHTML / CSS. Which one to use depends on context, and you can mix and match them.

  • px – number of pixels, relative to the screen size. This is the most consistent across machines, browsers, monitors
  • % – percentage of the total width or height
  • em – size relative to the em size of the base font

We will go into when it is appropriate to use the various schemes in later weeks. For now, use the px units in your stylesheets.


3. Details, Details

You’ve got basic CSS under your belt—now we’ll cover some of the finer aspects.


The three types of HTML elements to apply styles to:

An important concept to understand is that there are basically three types of HTML tags: block-level elements, inline elements, and replaced tags.

  1. Think of block-level elements as boxes that have a line break before and after. Block-level elements are the ones you will spend most of your time applying style rules to, or manipulating with scripting. They include h1-h6, p, div, ul, ol, blockquote.
  2. Inline elements on the other hand, don’t have line breaks before and after. Inline elements are used in the middle of another element, and include a, b, strong, italic, em, span
  3. The third kind of HTML tag is called a replaced tag. What it means is simply that these elements have a set width and height. The most-used replaced tag is the <img> tag, which you must specify a height and width for.

If an element is not explicitly defined, it is known as an anonymous element.You will not be able to style this element directly.


Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:

<div id="navigation">


There is one key difference between a classes and ids:

  • IDs can only be applied to one element per page
  • Classes can be applied to multiple elements per page

When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:

<ul id = "navigation">

is better than this:

<ul id = "top">

The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.


<link rel=”stylesheet” type=”text/css” href=”style.css” />

There are three methods of accessing style sheets from your HTML:

  1. Inline as part of an HTML tag.
  2. Embedded in the <head> section of your page between <style></style> tags
  3. In an external document that is linked to the page

Here is an example of a page that uses inline and embedded styles:

We are going to focus primarily on using external style sheets. The are a couple of advantages to this. First, you can apply the same styles to some or all pages of your site. Second, you can make a change on the external style sheet and all the pages it is linked to will change. And last, with a simple change to your code, you can switch style sheets and completely alter the look of your page.

Style sheets work in 4.x or later browsers (but still not consistently) such as Navigator 4.5 or 6 and IE 4 or 5. Most earlier browsers ignore them.

A good place to see style sheets in action, and to really understand how powerful they are, is the CSS Zen Garden.


An external style sheet is a plain text document containing all the style declarations you wish to apply to the linked pages. It does not have the structural tags (html, head, body) that your HTML documents have.
Once you have created your style sheet, you can associate it with your page using the link tag in your HTML, placed between the <head> tags:

<link href="styke.css" rel="stylesheet" type="text/css"/>

Code Academy Review



CSS Classes and IDs

This tutorial covers how to group CSS selectors into classes or identify a single selector by ID.

CSS Selectors: 23 exercises



There is an excellent suite of Firefox and Google Chrome add-ons that will help you in your site development. We’re going to install them now, and I highly recommend that you install them on your home machine:

If you’re using Google Chrome, download this Web Developer Add-On.

As the course goes on, we are going to learn to use the various tools included in the suite.


It is essential to make sure that you are writing valid xHTML code. Improperly formatted code can cause your pages to render in unpredictable ways or not at all in various browsers.

The W3C offers a free validator that you can run any html page through:

You can also access the validator through the “Tools” menu in the Web developer toolbar.


  1. If you have any outstanding validation errors in your bio and resume HTML, resolve them. Also, if you receive any comments from me today in class, or via email in the following week, incorporate them into your pages.
  2. Using all the properties we have covered today, create a single, external stylesheet and apply it to both your bio and your resume pages.
  3. Post the new work and link it to your homework page.
  4. Go back into your index.html, artist.html, resume.html and contact.html pages and add div’s.
  5. Create a style.css page in Text Wrangler and link it to your index.html, artist.html, resume.html and contact.html pages. Add the div names in your css page and STYLE them including font, color, size and any other attributes you want to use.
  6. Take any 12 images. They can be photos, illustrations, your artwork, anything you have. If you do not have anything you can pull images from Google images or create different colored boxes and use those as images. Create two different sizes of these images, one thumbnail image and one full size image. The full size image should not exceed 800×600 pixels. Use the “Save for Web” process to optimize the images, saving them in the file format most appropriate for each image. Save these images to the “images” folder you created in week two.
  7. Create HTML / CSS using the thumbnail size of the images that duplicates the functionality of the thumbnail gallery that we went over in class today. Take the thumbnail gallery one step further – link each thumbnail to its full sized image. Post the files and images to your server and put the link to the gallery on your blog.
  1. Embed a video on one of your pages.
  2. Add a background image.
  3. Make one of your images link to another website.
  4. Add at least one image that has rounded corners.
  5. Add ALT, HEIGHT & WIDTH properties to all  your images.
  6. Add a border to one of your pages.
  7. Complete 1-5 on CSS in Code Academy


15 thoughts on “Week 3 – HTML Structure – Intro to CSS

    1. admin Post author

      There is NO opening and closing break tag. You use the break tag at the end of a line and you write it

      br /

      with the brackets around it.

      When you create a list for your main navigation you need to put .html at the end of the name.

      Do you have a web hosting space?

    1. admin Post author

      Keep your links to home (index.html), resume.html, artist.html and contact.html on ALL of your pages at the top. That way the navigation stays consistent and you can move back and forth from page to page.

      The coding on your resume is solid. Good job.

      You need to stay on top of tagging sites in Delicious. It will be a great reference for you.

Comments are closed.