3.02 web development standards powerpoint...

6414 Multimedia and Webpage Design Summer 2011 Unit B Page 237

3.02 Web Development Standards PowerPoint Notes

Web Development Standards

What are they? What is the W3C?

Advantages

� � � � �

Section 508 Amendment to Rehabilitation Act

6414 Multimedia and Webpage Design Summer 2011 Unit B 39

3.02 Web Standards and the W3C

Directions: Fill in the blanks as you read the chapters on Web Standards and the W3C on the W3Schools website http://www.w3schools.com/site/site_standards.asp

http://www.w3schools.com/w3c/w3c_intro.asp

1. Web standards ensure that everyone has access to ___________________________________________________________________. 2. Future use of the web will not be possible without _________________________.

3. Standard web documents are easier for ______________________________________ and easier to ________________________________________________________________.

4. _______________________________ is an important part of the HTML standard.

5. W3C stands for ____________________________________________________. 6. W3C was created in _____________________ by ________________________. 7. W3C is working to make the web accessible to all users despite differences in _________________________________________________________________.

8. W3C is hosted by three universities: ___________________________________________

___________________________________________

___________________________________________

9. Some well known members of the W3C are: ___________________________________________

___________________________________________

___________________________________________

3.02 Authoring Languages and Text Editor Notes

Authoring Languages

HTML

XML

XHTML

3.02 Authoring Languages and Text Editor Notes - Page 2

Style Sheets and Text Editors

Style Sheets

Advantages

Disadvantages

Text Editors


3.02 Authoring Languages

Directions: Match the language with the appropriate characteristic. You may use each language more than once. Word Bank: HTML, XML, XHTML, CSS

Language Characteristic ______________ 1. Gives web developers more control over layout and page

formatting. ______________ 2. First and primary language for webpage development. ______________ 3. Can alter the ability of some devices to display pages. ______________ 4. Allows the author to define the tags that will be used. ______________ 5. Combination of HTML and XML. ______________ 6. Uses author-defined tags to identify data so it can be

easily imported into other applications. ______________ 7. Uses embedded tags to define the layout and appearance

of the webpage. ______________ 8. Uses stricter and cleaner code. ______________ 9. Can control formatting for an entire site. ______________

10. Designed to carry data, not display it.


3.02 Website Organization PowerPoint Notes Page 2

Linear Webbed Hierarchical

Website Structure and Navigation


3.02 Website Structures

Directions: Answer the following questions by indicating the type of site structure.

1.

2.

3.

4. Contains many categories and subcategories.

5. Links to next page and back to previous page only.

6. Use with a few interrelated pages where viewing order is not

important.

7. Allows users to jump to any page on site from any page.

8. Best way to organize complex bodies of information.

9. Looks like a family tree.

10. Use for step-by-step learning.

3.02 HTML Overview Notes

HTML Tags

Purpose

Using HTML Tags

HTML vs. XHTML

3.02 HTML Overview Notes Page 2

Nesting HTML Tags

Adding Attributes to tags

Multiple Attributes

Creating and

Saving HTML Files

3.02 Basic HTML Tag Notes Work the HTML tutorial at the W3Schools website http://www.w3schools.com/html/html_intro.asp to find the correct HTML tag and an example (including closing tags) for each tag in the chart below. Complete the tutorial through the HTML Quick List, omitting Tables and Forms.

Type of Tag HTML Tag Example Function

Structure Structure Tags – Must appear on every page!!

HTML Tells WWW that this is an HTML document.

Head Add info that will not appear on page

Title Places title of page in (blue) browser bar

Body

Encloses section of page that will be displayed in the browser

Content Add organization and interest to a webpage.

Headings Increase/decrease text size

Paragraph (double space)

Separates sections by adding a blank line

Line Break (single space)

Creates a new line as if using the ENTER key; no extra space

Unordered List

Creates a bulleted list

• Monday

• Tuesday

• Wednesday

Ordered List

Creates a numbered list

1. Monday 2. Tuesday 3. Wednesday

Type of Tag HTML Tag Example Function

Horizontal Rule Creates horizontal lines on page

Bold Creates bold text

Italics Creates italicized text

Image Embeds an image in an HTML page

Linking Creates a link to another document

Comment

Inserts a comment that appears in the HTML code but is not displayed in the browser.

Write the four HTML tags that are required for a webpage.

3.02 XHTML Tutorial Activity Visit the W3Schools XHTML Tutorial, http://www.w3schools.com/xhtml/xhtml_intro.asp, to complete the questions below.

1. XHTML is almost identical to HTML ______________.

2. XHTML is HTML defined as an _____________________ application.

3. XHTML is a _______________ recommendation.

4. XHTML is a ___________________ and ____________________ version of HTML.

5. XHTML 1.0 became a W3C recommendation in _____________.

6. Why would a web designer code in XHTML?

7. In looking at the HTML 4.01 Reference Chart, what tags have been deprecated?

8. What does deprecated mean?

9. List the four most important differences between HTML and XHTML and give an example of each.

1)

2)

3)

4)

10. What is the basic XHTML document structure?

3.02 XHTML Tutorial Activity Page 2

11. List five XHTML Syntax Rules and give an example of each

1)

2)

3)

4)

5)

12. What is the most common DOCTYPE Declaration? ________________________

13. What are the three XHTML DTDs?

1)

2)

3)

14. Which DOCTYPE should be used for really clean markup, free of presentational clutter?

_____________________________________

15. What are the five steps to convert an HTML document to XHTML?

1)

2)

3)

4)

5)

16. How can an XHTML document be validated?

17. What must be input in order to validate an XHTML document with the W3C Validator?

3.02 CSS Tutorial Notes Name _________________________________

Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.

� Cascading Order

Rules for Cascading—Lowest to highest priority 1.

2. 3. 4.

� CSS Syntax

Three Parts of Syntax—name and description

Example

� If value is more than one word

Rule

Example

� If more than one property is specified

Rule

Example

� Grouping Selectors

Rule

Example

� CSS Comments Use and Rule



Example

Inserting Style Sheets

Type of Sheet Description/Use Example

� External

� Internal

� Inline Styles

CSS Text � Text Color Set by: Description/Use Example �

�

�

� Text Alignment Description/Use: Example: Example:



� Text Indentation

Description/Use:

Example:

CSS Font Description/Use Example

� Font Family � Setting Font Family

Font Size � Set Using Pixels

Description: Example:


3.02 Basic CSS Properties Notes Basic Tags

Inline Style Creates an inline style. Code is placed inside the opening tag of the desired tag. style=”property: value” Example: <p style=”color:red”>

Internal Style Sheet Creates an internal style sheet. Code is placed in the <head> section. <style type=”text/css”> hr {color: red;} </style>

External Style Sheet Links the webpage to an external style sheet. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

Body Styles

background-color:yellow; Sets the background color.

background-image:url('paper.gif'); Sets the background to an image.

Text Styles

color:red; Changes the text color. Values: name, hexadecimal (#ff0000), rgb(255,0,0).

text-align:center; Aligns the text horizontally. Values: left, right, center, justify.

text-decoration:underline; Underlines text..

text-indent:50px; Indents text from the left.

text-transform:uppercase; Controls capitalization. Values: none, capitalize, uppercase, lowercase.

Font Styles

font-family:arial; Sets the typeface for text. Typefaces with multiple words in their name should be enclosed inside quotes. Values: font name, generic name (serif, sans-serif, cursive, fantasy, monospaced)

font-size:100%; Sets the font size. Values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %

font-style:normal; Sets the font style for paragraphs. Values: normal, italic, oblique.

Link Styles

a:link {color:#FF0000;} Sets color for an unvisited link. a:visited {color:#FF0000;} Sets color for an visited link. a:hover {color:#FF0000;} Sets color for a mouse over link. a:active {color:#FF0000;} Sets color for the selected link.

List Styles

list-style-image:url(“image.gif”); Sets list item marker to an image.

list-style-type: Sets the item marker type. Values: none, circle, disc, square, decimal, lower-alpha, lower-greek, lower-lating, lower-roman, upper-alpha, upper-latin, upper-roman

A list of CSS properties can be found online at: http://www.w3schools.com/css/css_reference.asp


3.02 Website Components Notes

Website Components

Splash Page

Navigational Links or Menus

About Us Page

Contact Us Page

Privacy Policy Page

Site Map

Home Page (Index Page)

Uses

•

•

•

•

Should be Named

•

Website Components

Must Contain

•

Should Contain

•

•

• May Contain

•

•

3.02 Publishing a Website Notes

Before Publishing

Check site in multiple browsers.

Validate source code.

Check Spelling. Check relative and absolute links.

Choose a Web Host

Free Shared/Virtual Web Hosts

Dedicated Web Hosts

Advantages

Disadvantages

Advantages

Disadvantages

Advantages

Disadvantages

3.02 Publishing a Website Notes Page 2

Comparing Web Hosts

Cost

Storage

Reliability

Traffic

File transfer technology

Obtain a Domain Name

Register a unique name

Publish!

Web Host Site too large?

Use an assigned name

3.02 web development standards powerpoint...

Documents