Transcript Slide 1
Characteristics of web pages
• 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
RELATIVE LINKS & SOURCES
Both files on same level:
filename.ext
For Example:
<img src= "banner.jpg" alt="my banner">
Folder on same level as your file:
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>
Link to a folder one level up:
../foldername/filename.htm
For Example:
<a href="../chapter11/canvas.html">Example</a>
Mini Review of Cascading Style Sheets
Syntax & example for inline style:
<element style="property: value">
<blockquote style="color: #cc99ee" >
Syntax & example for other CSS:
selector {property: value";}
p {line-height: 140%}
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.
Link to external CSS file:
<link rel="stylesheet" href="yourfile.css">
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.
Practice for Chapter 3: Assume that you are a freelance web designer and
need to create a website for your company.
Steps to begin:
1. Don’t go it alone; find a code buddy for this week-long practice
exercise.
2. Create folder called “freelance”
3. 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:
nav, footer, and link to CSS.
4. I will discuss “HTML5 Structural Elements”; then show you how to
add them.
Practice for Chapter 3 (continued)
1. Use dummy text from www.blindtextgenerator.com to
create 3 pages for:
Home | About Us | Portfolio
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 from
https://kuler.adobe.com/explore
All of what you’ve done so far is from Chapter 2. In the next stage, we
will work with CSS.
• To get reacquainted after our quick introduction on Jan. 30, we will
create a few embedded styles in template.htm.
• Then we will create and link a file called freestyles.css to all of the
web pages.