Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
17
Bare bones notes
-
Upload
toby-richard -
Category
Documents
-
view
217 -
download
0
Transcript of Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
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>.
