Embed Size (px)
Citation preview
Bare bones notes
Suggested organization for main folder.
REQUIRED organization for the 115 folder.
Upload and check your assignment page, which I plan to grade tonight.
• I have given you a 2-page handout with full instructions.
• The URL for you to check is: yourlogin.students.cofc.edu/115
• I will go over how to submit Chapter 2 Case Study on Wednesday. If you want to do it early, look at slide #14.
• 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- HTML5 Structural elements- View source codes- Description lists (see last slide if you run into problems on homework)
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.
Opening files in Windows (incase you missed it) - Right Click> Edit With Notepad- To view in browser, Run>Launch browser
Turn on extensions • In Windows 8, click VIEW/Options, Change Folder & Search
Options• In Windows 7, click Organize 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 styles• More control (more features) • Separate from structure• Can be re-used (applied to multiple pages;
multiple sites)• Smaller potentially• Easy to edit and maintain
Types of CSS • Inline• Embedded • External
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 websiteshttps://color.adobe.comhttp://paletton.com http://www.pictaculous.com (to choose colors based on a picture)
RELATIVE LINKSMore about this in Chapter 7, but…
Both 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.
We will create first page together….
Practice for Chapter 3 (continued)
1. If you finish early:- find a few pictures for your site, or - choose a color scheme as mentioned in slide #12
2. I will tell you when to create the other two pages.
3. Finally, we will create a stylesheet together.
Steps to begin:1. Create folder called “freelance”
2. Create the first page as index.html. 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.
3. The navigation is: Home | About Us | Portfolio
Link the nav items to: index.html, about.html, portfolio.html
4. Use dummy text from www.blindtextgenerator.com to fill the homepage.
Description Lists
An example of code for a description list is shown below.
<dl><dt>Internet</dt><dd> The global communication network that allowsalmost all computers worldwide to connect and exchange information. </dd>
<dt>World Wide Web Consortium</dt><dd>The W3C is an industry consortium which seeks to promote standards for the evolution of the Web.</dd>
</dl>
One of the things to watch out for in the homework is that the author asks you to place <br> tags here and there, but you must not place <br> after the ending </li>. Instead, you can put it before the </li>.
