Class 2 Notes for Web Publishing II

Learning Objectives:

You will be able to create a homework page

You will be able to modify the homework page with CSS

Homework:

Post: Updated homework page (take the page we did in class and "jazz it up" or customize the page

Review: W3schools on CSS

 

Topics Covered:

 

HTML5 offers new semantic elements that define different parts of a web page:

Layout of HTML Document
html Identifies the document as being a webpage
title Describes the Content of the Page
head Background information - CSS and Scripts
body Contains the content viewable inside the browser window
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
aside Defines content aside from the content (like a sidebar)
footer Defines a footer for a document or a section

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:

 

FTP login
 

 

Host: e-commerce.paradisevalley.edu

Username: Use your first initial plus last name

Password: Password you entered in class

Port: 990

Connection: FTPS

Click: Connect

Your homework must be linked to your homework.html file in your webs pace

Try downloading the FTP Program

Our Webs pace is at http://e-commerce.paradisevalley.edu

Check out the FTP tutorials WS FTP for Windows.

 

 

FileZilla

 

 

 

You can also use FileZilla!

Filezilla's settings are the same just inputed to a different location

Host: e-commerce.paradisevalley.edu

Username: Use your first initial plus last name

Password: Password you entered in class

Port: 990

Click: Quickconnect

 

 

 

The CSS Box Model

CSS Box Method

This model defines how the Style will impact the content.

Content is the information you provide between the tags.

Padding is the space between the border and the content.

Border is a line you can place around the content.

Margin is the space between the border and the end of the screen

 

 

 

CSS: Adding Style to the Web

CSS at w3schools

Best Practices for CSS

Reset your Browser to avoid conflicts in browser design.

3 ways to attach a style sheet! Internal, External, and in-line (avoid if possible) Style Sheets

Format for Internal and External Styles:

selector {property: value}

Example: h3 {color: #FF0000}

This changes all h3's font color to Red (#FF0000)
You can apply multiple styles at once by separating them with a ; (semi colon)

Example:

h3 {
color: #FF0000;
font-family: Arial;
}

Internal Styles use the style tag inside the head section of your webpage

Example changes the color of the h3 text and size of the font (text) inside a p tag

<style type="text/css">
h3 {color: #FF0000}
p { font-size: 150%}
</style>

External Styles are called by using the Link tag

Example: <link rel="stylesheet" type="text/css" href="file-name_of_stylesheet.css" />

Inline styles are placed inside the tag (element) as an attribute!

Example: <p style="font-family: arial, 'lucida console', sans-serif">

 

 

Your homework must be linked to your homework.html file in your webspace!

FTP Settings

 

FTP login
 

 

Note: The FTP host address is

e-commerce.pvc.maricopa.edu

Use your first initial plus lastname & Password

 

Try downloading the FTP Program

 

Our Webspace is at
http://e-commerce.pvc.maricopa.edu

.

links

 

 

 

 

Http:// goes to the Web

 

jon.html goes to a file in the webspace

mailto: goes to e-mail

# goes to an location inside the Webpage

 

Terms:

FTP, CSS, Inline Style, Internal Style & external Style Sheet, Block Elements

CSS Layout and HTML CSS Layout

Homework:

The Resume will be graded for its sophistication and use of proper coding. Include a graphic for the resume.

W3schools Style Web Page, CSS Web Examples, CSS Library

 

Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.