Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.

Bare bones slide show

• The format is text files, with .htm or .html extension.• Hard returns, tabs, and extra spaces are ignored.• DO NOT use spaces in file names. • File names ARE CASE SENSITIVE. • Tags are not case sensitive, but the standard is

lowercase.• The first page in a web site should be named

index.htm or index.html

REASON: As the default filename, it nicely shortens your URL

example:www.cofc.edu

instead of:www.cofc.edu/ourhomepage.htm

Characteristics of web pages

Review & Finish Chapter 2

A few other items:

- Nesting rule- Blockquote- Div- Structural elements

What is difference?• Block display elements: normally start (and end) with a new line.• Inline elements: Displayed in line with text without creating a new

line.

Turn on extensions •In Windows 8, click VIEW, Options, Change Folder & Search Options•In windows 7, click that button on the left, then … •Mac OS, FINDER, Preferences

start CHAPTER 3

What is CSS?

A style sheet language used to describe the appearance and formatting of a HTML document. As with other types of styles, several formats can be included in one style.

Advantage of style•More control (more features) •Separate from structure•Can be re-used (applied to multiple pages; multiple sites)•Smaller potentially•Easy to edit and maintain

Selector {property: value; property: value; } h1 {text-align: center; color: #0000ff; }

Here is a visual of it:

Syntax

CSS Selector types1. HTML element

What is difference?2. class 3. id

A style is: A group of formats that are setup as a unit and can be applied repeatedly. (generic definition)

Advantages of CSS: •Easy to edit and maintain •More control (more features) •Separate appearance from structure•Can be stored and associated with web pages•Smaller pages, potentially

Types of CSS: Inline: Added as an attribute of an HTML tag and only applies to that individual element. Used to override others.

Embedded: Defined in the head area between <style> tags. Applies to the body of that document.

External: A separate file which is linked in the <head> section. Used for entire website.

Mini Review of Cascading Style Sheets

<element style="property: value">

<blockquote style="color: #cc99ee" >

Syntax & example for inline style:

selector {property: value";}

p {line-height: 140%}

Syntax & example for other CSS:

Link to external CSS file:

<link rel="stylesheet" href="yourfile.css">

Using Color: There are three ways of applying color. 1.Names: 17 safe color names; 140 including extended names

2.RGB: rgb(0,150,220) [the intensity of rgb from 0 – 255] 3.Hex: #9400BF -uses base 16. 0-9 and A-F to specify numeric value.-includes 3 pairs, 2 characters for each RGB Search “hex colors” to get chart, or go to http://w3schools.com/html/html_colors.asp Or http://webdevfoundations.net/color

Additional color siteshttps://color.adobe.comhttp://paletton.com http://www.colr.org (if you want to choose colors based on a picture)

RELATIVE LINKSBoth files on same level:

filename.ext

Folder on same level as your file: foldername/filename.htm

Link to a folder one level up: ../foldername/filename.htm

Therefore, if you named your files and folders as recommended, your link to Chapter 2 Case Study would be:

<a href="pacific/index.htm">Chapter 2 Case Study</a>

For Example: <img src="banner.jpg" alt="my banner">

For Example:

<a href="../chapter11/canvas.html">Example</a>

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Practice for Chapter 3 (continued)

1. Use dummy text from www.blindtextgenerator.com to create 3 pages for:

Home | About Us | PortfolioHINT: For each page, you will “save as”

2. Link the pages together if not done yet.

3. If you finish early:- find a few pictures from your site, or - choose a color scheme as mentioned in slide #11

4. Finally, we will create a stylesheet together.

Steps to begin:1.Create folder called “freelance”

2.Create the first page as template.htm. In addition to the basic HTML tags, the only other elements we’ll use on all pages are: div for the wrapper, nav, footer, and link to CSS.

Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.

Documents