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 Page 239
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
6414 Multimedia and Webpage Design Summer 2011 Unit B Page 245
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.
6414 Multimedia and Webpage Design Summer 2011 Unit B Page 252
3.02 Website Organization PowerPoint Notes Page 2
Linear Webbed Hierarchical
Website Structure and Navigation
6414 Multimedia and Webpage Design Summer 2011 Unit B Page 257
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
3.02 CSS Tutorial Notes Name _________________________________
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
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:
3.02 CSS Tutorial Notes Name _________________________________
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
� Text Indentation
Description/Use:
Example:
CSS Font Description/Use Example
� Font Family � Setting Font Family
Font Size � Set Using Pixels
Description: Example:
6414 Multimedia and Webpage Design Summer 2011 Unit B Page 292
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
6414 Multimedia and Webpage Design Summer 2011 Unit B Page 301
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