bare bones slide show. the format is text files, with.htm or.html extension. hard returns, tabs, and...
TRANSCRIPT
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.