Web Technology Test Study guide

CSS border Property

Configures a border on the top, right, bottom, and left sides of an element Consists of border-width border-style border-color h2 { border: 2px solid #ff0000 } HEADING WITH BORDER

CSS padding Property Shorthand: four values

Four numeric values or percentages Configure top, right, bottom, and left padding h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px;

Rgba Color

Four values are required: red color, green color, blue color, and alpha(transparency) The values for red, green, and blue must be decimal values from 0 to 255. The alpha value must be a number between 0 (transparent) and 1 (opaque). Example: h1 { color: #ffffff; color: rgba(255, 255, 255, 0.7); font-size: 5em; padding-right: 10px; text-align: right;  font-family: Verdana, Helvetica, sans-serif; }

Reasons forInternet Growth in the 1990s

- Removal of the ban on commercial activity -Development of the World Wide Web by Tim Berners-Lee at CERN -Development of Mosaic, the first graphics-based web browser at NCSA -Personal computers were increasingly available and affordable -Online service providers offered low-cost connections to the Internet

HTTP - Hypertext Transfer Protocol

-A set of rules for exchanging files such as text, graphic images, sound, video, and other multimedia files on the Web. -Web browsers send HTTP requests for web pages and their associated files. Web servers send HTTP responses back to the web browsers.

Div Element

Configures a structural block area or "division" on a web page with empty space above and below. Can contain other block display elements, including other div elements <div>Home Services Contact</div>

CSS padding Property

Configures empty space between the content of the HTML element and the border set to opx by default h2 { border: 2px solid #ff0000; padding: 5px; } no padding propetty configured

HTML Image Element

Configures graphics on a web page src Attribute File name of the graphic alt Attribute Configures alternate text description height Attribute Height of the graphic in pixels width Attribute Width of the graphic in pixels

Web Client

Connected to the Internet when needed Usually runs web browser (client) software (such as Internet Explorer or Firefox) Uses HTTP (Hypertext Transfer Protocol) Requests web pages from server Receives web pages and files from server

Web Server

Continually connected to the Internet Runs web server software (such as Apache or Internet Information Server) Uses HTTP (Hypertext Transfer Protocol) Receives request for the web page Responds to request and transmits status code, web page, and associated files

Sources for Graphics

Create them yourself using a graphics application: GIMP Adobe Photoshop Adobe Fireworks Google's Picasa (http://picasa.google.com/) Download graphics from a free site Purchase/download professional-quality graphics Purchase a graphics collection on a CD Take digital photographs Scan your photographs Scan your drawings Hire a graphic designer to create graphics

Special Characters

Display special characters such as quotes, copyright symbol, etc. Character Code © &copy; < &lt; > &gt; & &amp; &nbsp;

HTML5 Progress Element

Displays a bar that depicts a numeric value within a specified range <progress value="5000" max="10000">5000</progress> Progress Towards Our Goal

Unordered List

Displays a bullet, or list marker, before each entry in the list.  <ul>Contains the unordered list <li>Contains an item in the list

Ordered List

Displays a numbering or lettering system to itemize the information contained in the list <ol>Contains the ordered list type attribute determines numbering scheme of list, default is numerals <li>Contains an item in the list

HTML5 Meter Element

Displays a visual gauge of a numeric value within a known range <meter value="14417" min="0" max="14417">14417</meter>14,417 Total Visits<br> <meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br> <meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet Explorer<br> <meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br> <meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br> <meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp; 312 Opera<br> <meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200 other<br>

Document Type Definition

Document Type Definition (DTD) doctype statement identifies the version of HTML contained in your document. placed at the top of a web page document

Images and Accessibility

Don't rely on color alone. Some visitors may have color perception deficiencies. Use high contrast between background and text color.  Provide a text equivalent for non-text elements. Use the alt attribute on your image elements If your site navigation uses image links, provide simple text links at the bottom of the page.

IP Address

Each device connected to the Internet has a unique numeric IP address. These addresses consist of a set of four groups of numbers, called octets.  173.194.116.72 will get you Google! An IP address may correspond to a domain name.

HTML Elements

Each markup code represents an HTML element. Each element has a purpose.Most elements are coded as a pair of tags:an opening tag and a closing tag. Tags are enclosed in angle brackets, "<" and ">" symbols.

DTD Examples

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

span Element Example

Embedded CSS: <style> .companyname { font-weight: bold; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; } </style> p>Your needs are important to us at <span class="companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>

E-mail Protocols

Sending E-mail SMTP Simple Mail Transfer Protocol Receiving E-mail POP (POP3) Post Office Protocol IMAP Internet Mail Access Protocol

Anchor Element

Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page. <a href="contact.html">Contact Us</a> href Attribute Indicates the file name or URL

CSS Descendant Selector

Specify an element within the context of its container (parent) element. AKA contextual selector The example configures agreen text color only for p tags located within an element assigned to the id named content Advantage of contextual selectors:Reduces the number of classes and ids you need to apply in the HTML

CSS Sprites

Sprite - an image file that contains multiple small graphics that are configured as background images for various web page elements Modern technique to optimize use of multiple icon or small images Saves overhead by reducing the number of http requests made by the browser. You'll use CSS Sprites in Chapter 7!

CSS Syntax

Style sheets are composed of "Rules" that describe the styling to be applied. Each Rule contain a selector and a Declaration selector= body declaration property= color declaration= blue

TCP/IPTransmission Control Protocol/Internet Protocol

TCP/IP has been adopted as the official communication protocol of the Internet.  TCP and IP have different functions that work together to ensure reliable communication over the Internet.

Domain Name System

The Domain Name System (DNS) associates Domain Names with IP addresses. use TCP/IP to sent http request Use TCP/IP to send HTTP Responseswith web page files & images

CSS padding Property Shorthand: two values

Two numeric values or percentages first value configures top and bottom padding the second value configures left and right padding h2 { border: 2px solid #ff0000; background-color: #cccccc; padding: 20px 10px;

Markup Languages (3

XHTML - eXtensible Hypertext Markup Language Developed by the W3C as the reformulation of HTML 4.0 as an application of XML.  It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML.

Markup Languages

XML - eXtensible Markup Language A text-based language designed to describe, deliver, and exchange structured information.  It is not intended to replace HTML - it is intended to extend the power of HTML by separating data from presentation.

Growth of the Internet

Year Percentage of Global Population  Using the Internet 1995 0.4% 2000 5.8% 2005 15.7% 2010 28.10% 2015 42.4%

thallasrasira

thallasrasira

CSS3 Multiple Background Images

body { background-color: #f4ffe4; color: #333333; background-image: url(trilliumgradient.png); background: url(trilliumfoot.gif) no-repeat bottom right, url(trilliumgradient.png); }

CSS3 Rounded Corners

border-radius property Configures the horizontal radius and vertical radius of the corner Numeric value(s) with unit (pixel or em) or percentage Example h1 { border-radius: 15px;

Using background-repeat

trilliumbullet.gif: h2{ background-color: #d5ed3; color: #5c743d; font-family: Georgis, "Time New Roman", serig; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no repeat; }

More CSS TEXT Properties

line-height Configures the height of the line of text (use the value 200% to appear double-spaced) text-align Configures alignment of text within a block display element text-indent Configures the indentation of the first line of text text-decoration Modifies the appearance of text with an underline, overline, or line-through text-transform Configures the capitalization of text letter-spacing Configures space between text characters word-spacing Configures space between words text-shadow Configures a drop shadow on text

Image Map

map element Defines the map area element Defines a specific area on a map Can be set to a rectangle, circle, or polygon href Attibute shape Attribute coords Attribute

Guidelines for Using Images

Reuse images Consider image file size with image quality Consider image load time Use appropriate resolution Specify dimensions Be aware of brightness and contrast

Horizontal Rule Element

Configures a horizontal line <hr> MEETING WITH BUSINESS NEEDS

Hexadecimal Color Values

# indicates a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color

Checkpoint 4.1

. Is it reasonable to try to code a web page that looks exactly the same on every browser and every platform? Explain your answer. 2. When a web page containing the style rules below is rendered in a browser, the border does not display. Describe what is incorrect with the following code: h2 { background-color: #ff0000 border-top: thin solid #000000 } 3. True or False? CSS can be used to configure visual elements such as rectangular shapes and lines on web pages.

Checkpoint 3.2

1. Describe a reason to use embedded styles. Explain where embedded styles are placed on a web page. 2. Describe a reason to use external styles. Explain where external styles are placed and how web pages indicate they are using external styles. 3. Write the code to configure a web page to use an external style sheet called "mystyles.css".

CSS3 opacity Property

Configure the opacity of the element Opacity range: 0 Completely Transparent 1 Completely Opaquehorizontal offset, vertical offset, blur radius, and valid color value Example: h1{ background-color: #FFFFFF; opacity: 0.6; }

Hyperlinks

Hands-On Practice home, services and contact

Example HTML5 Web Page

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title Goes Here</title> <meta charset="utf-8"> </head> <body> ... body text and more HTML5 tags go here ... </body> </html>

HTML5 Structural Elements

<body> <header> document headings go here </header> <nav> main navigation goes here </nav> <main> main content goes here </main> <footer> document footer information goes here </footer> </body>

Description List Example

<dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl>

CSS Embedded (Internal) Styles

Configured in the head section of a web page. Use the HTML <style> element Apply to the entire web page document Style declarations are contained between the opening and closing <style> tags Example: Configure a web page with white text on a black background

Favorites Icon - favicon

A square image associated with a web page Usually named: favicon.ico May display in the browser address bar, tab, or favorites/bookmarks list Configure with a link tag:

TLDTop-Level Domain Name

A top-level domain (TLD) identifies the right-most part of the domain name. Examples of generic TLDs:.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat, .jobs, .name, .biz, .mobi, .museum, .info, .coop, .post, .pro, .tel, .travel

Absolute & Relative Hyperlinks

Absolute link Link to a different website <a href="http://yahoo.com">Yahoo</a> Relative link Link to pages on your own site <a href="index.htm">Home</a>

The font-size Property

Accessibility Recommendation: Use em or percentage font sizes - these can be easily enlarged in all browsers by users TEXT VALUE EM UNITS PX UNITS PT UNITS PERCENTAGE

Ordered List Example

<ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>

Web Accessibility & The Law

Americans with Disabilities Act (ADA) Prohibits discrimination against people with disabilities Section 508 of the Rehabilitation Act Requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others http://www.section508.gov

Unordered List Example

<ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>

Web Color Palette

A collection of 216 colors Display the most similar on the Mac and PCplatforms Hex values: 00, 33, 66, 99, CC, FF Color Chart http://webdevfoundations.net/color

link Element

A self-contained tag Placed in the head section Purpose: associates the external style sheet file with the web page. Example:

FTPFile Transfer Protocol

A set of rules that allow files to be exchanged between computers on the Internet.  Web developers commonly use FTP to transfer web page files from their computers to web servers.  FTP is also used to download programs and files from other servers to individual computers.

IPInternet Protocol

A set of rules that controls how data is sent between computers on the Internet. IP routes a packet to the correct destination address. The packet gets successively forwarded to the next closest router (a hardware device designed to move network traffic) until it reaches its destination. http://www.tracert.com/cgi-bin/trace.pl

Thumbnail Image

A small image configured to link to a larger version of that image. <a href="big.jpg"><img src="small.jpg" alt="country road" width="200" height="100"></a>

E-Mail Hyperlink

Automatically launch the default mail program configured for the browser If no browser default is configured, a message is displayed <a href="mailto:[email protected]">[email protected]</a>

The "Cascade"

BROWER DEFAULTS EXTERNAL STYLES EMBEDDED STYLES INLINE STYLE HTML ATTRIBUTES

CSS Borders: Block / Inline Elements

Block display element Default width of element content extends to browser margin (or specified width) Inline display element Border closely outlines the element content

Blockquote Element

Blockquote element Indents a block of text for special emphasis <blockquote> ...text goes here... </blockquote> Block Display - Configures empty space above and below

Proper Nesting

CODE: <p><i>Call for a free quote for your web development needs: <strong>888.555.5555 </strong></i></p> BROWSER DISPLAY: Call for a free quote for your web development needs: 888.555.5555

CSS background-image Property

Configures a background-image By default, background images tile (repeat) body { background-image: url(background1.gif); }

Configuring Text with CSS

CSS properties for configuring text: font-weight Configures the boldness of text font-style Configures text to an italic style font-size Configures the size of the text font-family Configures the font typeface of the text

External Style Sheets - 1

CSS style rules are contained in a text file separate from the HTML documents. The External Style Sheet text file: extension ".css" contains only style rules does not contain any HTML tags

CSS Selectors

CSS style rules can be configured for an: HTML element selector class selector id selector descendant selector

Writing Valid HTML

Check your code for syntax errors Benefit: Valid code  more consistent browser display W3C HTML Validation Tool http://validator.w3.org

The Internet Client/Server Model

Client - Web Browser - browser request Server - Web Server - server respond

The Client/Server Model

Client/Server can describe a relationship between two computer programs - the "client" and the "server". Client requests some type of service (such as a file or database access) from the server. Server fulfills the request and transmits the results to the client over a network

Using Color on Web Pages

Computer monitors display color as intensities of red, green, and blue light RGB Color The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values.

CSS Syntax Sample

Configure a web page to display blue text and yellow background. body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; }

CSS3 box-shadow Property

Configure the horizontal offset, vertical offset, blur radius, and valid color value Example: #wrapper { box-shadow: 5px 5px 5px #828282; } Optional keyword: inset

Configuring Color with Inline CSS (2)

Example 2: configure the red text in the heading configure a gray background in the heading Separate style rule declarations with ; <h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

Using an External Style Sheet

External Style Sheet color.css body { background-color: #0000FF; color: #FFFFFF To associate the external style sheet called color.css, the HTML code placed in the head section is:<link rel="stylesheet" href="color.css">

Browser Display Can Vary

FIREFOX INTERNET EXPLO default none same display as double groove firefox ridge solid dashed dotted

Head & Body Sections

Head SectionContains information that describes the web page document <head> ...head section info goes here </head> Body SectionContains text and elements that display in the web page document<body> ...body section info goes here </body>

Heading Element

Heading Level 1 Heading Level 2 Heading Level 3

CSS3 Gradients

Gradient: a smooth blending of shades from one color to another Use the background-image property linear-gradient() radial-gradient() Example: body { background-color: #8FA5CE; background-image: linear-gradient(#FFFFFF, #8FA5CE); }

Types of Graphics

Graphic types commonly used on web pages: GIF JPG PNG

Graphic types commonly used on web pages: GIF JPG PN

Graphics Interchange Format Best used for line art and logos Maximum of 256 colors One color can be configured as transparent Can be animated Uses lossless compression Can be interlaced

CSS Advantages

Greater typography and page layout control Style is separate from structure Styles can be stored in a separate document and associated with the web page Potentially smaller documents Easier site maintenance

Markup Languages (4)

HTML 5 The next version of HTML4 and XHTML http://www.w3.org/html/

What is HTML?

HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.

Making Color Choices

How to choose a color scheme? Monochromatic http://meyerweb.com/eric/tools/color-blend Choose from a photograph or other image http://www.colr.org Begin with a favorite color Use one of the sites below to choose other colors http://colorsontheweb.com/colorwizard.asp https://color.adobe.com/create/color-wheel http://paletton.com

HSLA Color hue, saturation, light, alpha

Hue is a value between 0 and 360 Saturation: percent Lightness: percent Optional alpha: from 0 to 1

Internet Standards & Coordination 1

ICANN - The Internet Corporation for Assigned Numbers & Names Non-profit organization Main function is to coordinate the assignment of: Internet domain names -IP address numbers -Protocol parameters -Protocol port numbers.

Internet Standards & Coordination

IETF - Internet Engineering Task Force The principal body engaged in the development of new Internet protocol standard specifications. RFC - Requests for CommentsA formal document from the IETF that is drafted by a committee and subsequently reviewed by interested parties IAB - Internet Architecture BoardProvides guidance and broad direction to the IETF. Responsible for publications for RFCs.

More About Images

Image Map Favorites Icon CSS Sprites Sources for Graphics Guidelines for Using Images Accessibility & Visual Elements

Optimize An Image for the Web

Image Optimization Reduce the file size of the image Reduce the dimensions of the image to the actual width and height of the image on the web page. Image Editing Tools: GIMP (free!) Adobe Fireworks Adobe Photoshop http://pixlr.com/editor (free!)

Learning Outcomes

In this chapter, you will learn how to . . . Describe the evolution of style sheets from print media to the Web List advantages of using Cascading Style Sheets Use color on web pages Create style sheets that configure common color and text properties Apply inline styles Use embedded style sheets Use external style sheets Configure element, class, id, and contextual selectors Utilize the "cascade" in CSS Validate CSS

Learning Outcomes

In this chapter, you will learn how to ... Create and format lines and borders on web pages Apply the image element to add graphics to web pages Optimize an image for web page display Configure images as backgrounds on web pages Configure images as hyperlinks Configure visual effects with CSS3 including multiple background images, rounded corners, box shadow, text shadow, opacity, and gradients Configure RGBA and HSLA color with CSS3 Use HTML5 elements to caption a figure Use the HTML5 meter and progress elements Find free and fee-based graphics sources Follow recommended web design guidelines for graphics on web pages

Configuring Color with Inline CSS

Inline CSS Configured in the body of the web page Use the style attribute of an HTML tag Apply only to the specific element The Style Attribute Value: one or more style declaration property and value pairs Example: configure red color text in an <h1> element: <h1 style="color:#ff0000">Heading text is red</h1>

Types of Cascading Style Sheets

Inline Styles Embedded Styles External Styles Imported Styles

Cascading Style Sheets

Inline Styles body section HTML style attribute apply only to the specific element Embedded Styles head section HTML style element apply to the entire web page document External Styles Separate text file with .css file extension Associate with a HTML link element in the head section of a web page Imported Styles Similar to External Styles We'll concentrate on the other three types of styles

Internet Infrastructure

Internet Backbone A high capacity communication link that carries data gathered from smaller links that interconnect with it. Maps of the Internet Backbone http://www.google.com/search?q=global+internet+backbone+map+images

Intranet & Extranets

Intranet A private network contained within an organization or business used to share information and resources among coworkers. Extranet A private network that securely shares part of an organization's information or operations with external partners

JPEG

Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent Progressive JPEG - similar to interlaced display

Networks

LAN - Local Area Network Usually confined to a single building or group of buildings WAN - Wide Area Network Usually uses some form of public or commercial communications network to connect computers is widely dispersed geographical areas.

Checkpoint 3.1

List three reasons to use CSS on a web page. When designing a page that uses colors other than the default colors for text and background, explain why it is a good reason to configure style rules for both text color and background color. Describe one advantage to using embedded styles instead of inline styles

Domain Name

Locates an organization or other entity on the Internet Domain Name System Divides the Internet into logical groups and understandable names Associates unique computer IP Addresses with the text-based domain names you type into a web browser Browser: http://google.com IP Address: 173.194.116.72

MIME Type

Multi-Purpose Internet Mail Extension a set of rules that allow multimedia documents to be exchanged among many different computer systems

External Style Sheets - 2

Multiple web pages can associate with the same external style sheet file. body {background-color:#E6E6FA; color:#000000; font-family: Arial, sans-serif; font-size:90%; } h2 { color: #003366; } nav { font-size: 16px; font-weight: bold; }

What is HTML5 ?

Newest version of HTML/XHTML Supported by modern browsers Intended to be backwards compatible Adds new elements Adds new functionality Edit form data Native video and audio And more!

The font-family Property

Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name p { font-family: Arial, Verdana, sans-serif; }

Examples of Rounded Corners

One value for border-radius configures all four cornersExample:  border-radius: 15px; Four values for border-radius configure each corner separatelyOrdered by top left, top right, bottom right, bottom leftExample:  border-radius: 15px 30px 100px 5px;

Paragraph Element

Paragraph element <p> ...paragraph goes here... </p> Groups sentences and sections of text together. Block Display - Configures empty space above and below

OrganizingYour Site

Place images in their own folder Code the path to the file in the src atttribute CIRCLESOFT image background.gif home.gif logo.jpg services.gif circle.cess index.html services.html

PNG

Portable Network Graphic Support millions of colors Support multiple levels of transparency(but most browsers do not -- so limit to one transparent color for Web display) Support interlacing Use lossless compression Combines the best of GIF & JPEG Browser support is growing

Internet Protocols

Protocols Rules that describe the methods used for clients and servers to communicate with each other over a network.  There is no single protocol that makes the Internet and Web work. A number of protocols with specific functions are needed.

TCPTransmission Control Protocol

Purpose is to ensure the integrity of communication Breaks files and messages into individual units called packets

span element

Purpose: configure a specially formatted area displayed in-line with other elements, such as within a paragraph. There is no additional empty space above or below a span - it is inline display.

Reliability & Information on the Web

Questions to Ask: Is the organization credible? How recent is the information? Are there links to additional resources? Is it Wikipedia?

Accessibility & Images

Required: Configure the alt attribute Alternate text content to convey the meaning/intent of the image NOT the file name of the image Use alt="" for purely decorative images Recommended: If your site navigation uses image links for the main navigation, provide simple text links at the bottom of the pag

Markup Languages

SGML - Standard Generalized Markup Language A standard for specifying a markup language or tag set  HTML - Hypertext Markup Language The set of markup symbols or codes placed in a file intended for display on a web browser.

Checkpoint 4.3

Search for a site that uses image links to provide navigation. List the URL of the page.  What colors are used on the image links?  If the image links contain text, is there good contrast between the background color and letters on the image links?  Would the page be accessible to a visitor who is sight-challenged? How have accessibility issues been addressed?  Is the alt attribute used to describe the image link?  Is there a row of text links in the footer section of the page?  Answer the questions above and discuss your findings.

Common Formatting CSS Properties

See Table 3.1 Common CSS Properties, including: background-color color font-family font-size font-style font-weight line-height margin text-align text-decoration width

Overview of Cascading Style Sheets (CSS)

See what is possible with CSS: Visit http://www.csszengarden.com Style Sheets used for years in Desktop Publishing apply typographical styles and spacing to printed media CSS provides the functionality of style sheets (and much more) for web developers a flexible, cross-platform, standards-based language developed by the W3C.

CSS Embedded Styles

The body selector sets the global style rules for the entire page. These global rules are overridden for <h1> and <h2> elements by the h1 and h2 style rules.

***The World Wide Web

The graphical user interface to information stored on computers running web serversconnected to the Internet.

** Internet

The interconnected network of computer networks that spans the globe.

Image Optimization

The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size. Photographs taken with digital cameras are not usually optimized for the Web

Image Link

To create an image hyperlink use an anchor element to contain an image element Some browsers automatically add a border to image links. Configure CSS to eliminate the border img { border-style: none; }

Summary

This chapter introduced you to Cascading Style Sheet Rules associated with color and text on web pages. You configured inline styles, embedded styles, and external styles. You applied CSS style rues to HTML, class, id, and descendent selectors. You are able to submit your CSS to the W3C CSS Validation test.

County Code TLDs

Two character codes originally intended to indicate the geographical location (country) of the web site.  In practice, it is fairly easy to obtain a domain name with a country code TLD that is not local to the registrant. Examples: .tv, .ws, .au, .jp, .uk See http://www.iana.org/cctld/cctld-whois.htm

Uniform Resource Identifier

URI - Uniform Resource Identifier identifies a resource on the Internet URL - Uniform Resource Locator a type of URI which represents the network location of a resource such as a web page, a graphic file, or an MP3 file. ex: http protocol, domain name , folder name

Universal Design for the Web

Universal Design the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design

HTML Lists

Unordered List Ordered List Description Listformerly called a definition list

Configuring Specific Sides of a Border

Use CSS to configure a line on one or more sides of an element border-bottom border-left border-right border-top

Configure Padding on Specific Sides of an Element

Use CSS to configure padding on one or more sides of an element padding-bottom padding-left padding-right padding-top h2 { border: 2px solid #ff0000; background-color: #cccccc; padding-left: 5px; padding-bottom: 10px; padding-top: 10px; }

Choosing Names for Image Files

Use all lowercase letters Do not use punctuation symbols and spaces Do not change the file extensions (should be .gif, .jpg, .jpeg, or .png) Keep your file names short but descriptive i1.gif is probably too short myimagewithmydogonmybirthday.gif is too long dogbday.gif may be just about right

Web Standards and the W3C Consortium

W3C - World Wide Web Consortium. Develops recommendations and prototype technologies related to the Web  Produces specifications, called Recommendations, in an effort to standardize web technologies WAI - Web Accessibility Initiative.

Description List

Useful to display a list of terms and descriptions or a list of FAQ and answers <dl> Contains the description list <dt> Contains a term/phrase/sentenceConfigures empty space above and below the text <dd> Contains a description of the term/phrase/sentence Indents the text Configures empty space above and below the text

Support Web AccessiblityVerify Sufficient Contrast

When you choose colors for text and background, sufficient contrast is needed so that the text is easy to read. Use one of the following online tools to verify contrast: http://webaim.org/resources/contrastchecker http://snook.ca/technical/colour_contrast/colour.html http://juicystudio.com/services/luminositycontrastratio.php

Embedded Styles Example

body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans-serif; } h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; } h2 { background-color: #AEAED4; color: #191970; text-align: center; font-family: Georgia, "Times New Roman", serif; } p {font-size: .90em; text-indent: 3em; } ul {font-weight: bold; } </style>

Using CSS with "class"

class Selector Apply a CSSrule to a certain "class" of elements on a web page Does not associate the style to a specific HTML element Configure with .classname code CSS to create a class called "new" with red italic text. Apply the class: <p class="new">This is text is red and in italics</p>

Centering Page Content with CSS

container { margin-left: auto; margin-right: auto; width:80%; }

HTML5 Figure and Figcaption Elements

figure Element: contains a unit of content that is self-contained, such as an image, along with one optional figcaption element. <figure> <img src="lighthouseisland.jpg" width="250" height="355"  alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure>

Hands-On Practice

h2 { background-color:#AEAED4;  color:#191970;  font-family: Georgia, "Times New Roman", serif;  text-align: center;  border-bottom: 2px dashed #191970; }

W3C CSS Validation

http://jigsaw.w3.org/css-validator/

Accessible Website

provides accommodations for individuals with visual, auditory, physical, and neurological disabilities WAI W3C's Web Accessibility Initiative http://www.w3.org/WAI WCAG Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/

Network

two or more computers connected together for the purpose of communicating and sharing resources