IT 117 - Introduction to Website Development

Welcome!

Welcome to Unit 4!

Fonts, Lists, and Accessibility

This week’s reading: PDF file Formatting and CSS

Textbook Reading for this Unit:     

Review lesson 3 in the textbook and review the labs.

Introduction

In this unit, you will practice the use of the <ol></ol>, <ul></ul> tag pairs to assist in creating lists and division within documents. You will also begin looking at the use of CSS on your web pages to ensure a standard for the rest of the projects introduced within class.

To-Do-List

Review Key Terms On the Reading page Read Assigned Text On the Reading page Respond to the Discussion Board

30 PointsLists, Cascading Style Sheets, and Deprecated Tags         

Complete the unit project and upload to assignment dropbox for grading50 PointsOn the Assignment page

Attend the Weekly Seminar or complete the FLA quiz 20 PointsLog in from Student's Home page

Readings Overview

In learning XHTML, the important items to understand right away include the use of various tag pairs to help manipulate a basic outcome on a web page. In this unit, you will be looking at tag pairs that create ordered and unordered lists as well as how to create a division within a document. This will enable you to better manipulate the elements on our web page in a more organized fashion.  

You will also begin using CSS on your web pages so that all of your pages from this point forward consist of a standard look and feel. CSS is a best practice and should be used where possible in any web project.

Readings Overview

Textbook Reading Summary:

Early in this chapter, you will see references to CSS layout templates. We will not be using these as we will be learning to create our own templates. The rest of the chapter is great preparation for what lies ahead.

Seminar Overview

This week’s Seminar session is about Lists and CSS. We will discuss the various options and when it is appropriate to use CSS.

HTML Review

Lists HTML lists are one of the most useful tools for

organizing the text on your page. This Page Resource.com website also contains an excellent explanation of HTML lists. Follow the directions below to read the article entitled “Using HTML Lists.”

Go to http://www.pageresource.com/html/listhelp.htm. Read the article title “Using HTML Lists.”

HTML Review

HTML Unordered Lists – what tags would we use?

HTML Review

HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with

the <li> tag.

The list items are marked with bullets (typically small black circles). <ul>

<li>Coffee</li><li>Milk</li></ul>

How the HTML code above looks in a browser: Coffee Milk

HTML Review

HTML Ordered Lists – what tags would we use?

HTML Review

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol><li>Coffee</li><li>Milk</li></ol>

How the HTML code above looks in a browser:

1. Coffee

2. Milk

CSS Review

What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

CSS Review

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p>

CSS Review

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

CSS Review

A CSS rule has two main parts: a selector, and one or more declarations:

h1 {color:blue; font-size:12px;}

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each

property has a value.

CSS Review

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

What is the difference between them?

CSS Review

The id Selector The id selector is used to specify a style

for a single, unique element. The id selector uses the id attribute of

the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1“:

CSS Review

The id Selector Example:

#para1{text-align:center;color:red;}

CSS Review

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

CSS Review

The class Selector Example:

In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

CSS Review

Three Ways to Insert CSS:

External style sheet Internal style sheet Inline style

CSS Review

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

CSS Review

External Style Sheet

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension.

CSS Review

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

CSS Review

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Project 4

Outcomes addressed in this activity:

 

Unit Outcomes: Create an ordered list. Create an unordered list. Employ the use of CSS

Course Outcome: IT117-2: Create websites using web page building blocks.  IT117-4: Create cascading style sheets for Websites.

Project 4

Remember: All of your Web pages should include the DOCTYPE statement above the opening html tag, like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 

All your Web pages are also required to contain the <title> tag pair within the head section, like this: 

<html>

<head>

<title>Your Name, Career Information</title>

Project 4

Project Instructions:

The project for this week includes two parts:

Part 1: Create a new web page named career.htm Part 2: Edit and revise the external CSS file named

externalstylesheet.css

Project 4

Part 1: Create a Web page 

Create a Web page and name it career.htm and make sure it includes the Doctype statement, basic html tags; html, head, title, and body.

Use the <h1> tag for the heading at the top of the Web page. (e. g. “My Career Future”) and use <h2> tags for subheadings.

Create an ordered list to apply to the following:

At least two possible career choices Potential salary scale for each career

Project 4

Create an unordered list to apply to the following: Skills and education you already possess to work in your

chosen field Skills you plan to learn in the future. Conduct a search for job

titles such as web designer, web developer, etc. Choose either a nationwide search or one specific to your region. We recommend starting your search for career information at the US government's Occupational Outlook Handbook at http://www.bls.gov/oco/oco1002.htm#comp Computer-related careers can be found in the "Professional" category. (links are listed in the assignment).

Project 4

Add a link to externalstylesheet.css in the head section of career.htm. (hint: Just like you did in bio.htm and index.html)

Use h1 tag for the name at the top of the Web page. (e. g. “My Career Future”)

Use the following tags where appropriate: <p> paragraph <br /> line break

Save and close career.htm Upload career.htm to your Web space In your browser, type the complete URL to view career.htm

live on the Web.

Project 4

Part 2: Revise externalstylesheet.css  Open “externalstylesheet.css” in Notepad. Edit and modify values of the CSS body rule to change

the formatting for each property. Remember, the values follow the colon. For example, #ffdfd0 is the color that will be assigned to the body background property. Change these values to your own choices.

body {

background-color: #ffdfd0;

font-family: Times New Roman, Garamond, Serif;

font-size: 18px;

color: #00008b; }

Project 4

Next, do the same thing to the H1 CSS rule. Change at least 2 of the 3 property values.

h1 {

text-align: center;

font-family: Arial, Verdana, Sans-Serif;

color: #0000ff;

} Save your changes to externalstylesheet.css. Make sure

to change the ‘Save as Type’ to ‘All Files’ so the .txt file extension is not appended to the end of the file name.

Project 4

Upload your modified externalstylesheet.css file to your Web space.

View career.htm live on the web again and note the differences the modified CSS file made to the appearance. Also view index.html and bio.htm live on the Web and note the changes. Since externalstylesheet.css is linked to all three files, all will have the same style attributes.

Project 4 - Grading Rubrics

1. Revised externalstylesheet.css as specified : 0-10 2. Created a new web page named career.htm which

includes: 0-15 Possible career choices. How much each career choice may pay. Skills and education you already possess to work in your

chosen field. Skills you plan to learn in the future to better prepare you. Any other information that may help you to prepare for

your career future The 4 basic html tags; html, head, title and body.

Project 4 - Grading Rubrics

3. Applied the h1 tag somewhere within the career.htm file. :  

0-5 4. career.htm includes one properly formatted unordered list :

0-10 5. career.htm includes one properly formatted ordered list :  

0-10

Thank you!

Feel free to contact me with any questions!

emartignon@kaplan.edu

Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!