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 for Internet 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 © © < < > > & &
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> 312 Opera<br> <meter value="200" min="0" max="14417">200</meter> 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 a green 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/IP Transmission 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 Responses with 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 Opaque horizontal 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:
TLD Top-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 PC platforms 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:
FTP File 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.
IP Internet 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 Section Contains information that describes the web page document <head> ...head section info goes here </head> Body Section Contains 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 Comments A formal document from the IETF that is drafted by a committee and subsequently reviewed by interested parties IAB - Internet Architecture Board Provides 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 corners Example: border-radius: 15px; Four values for border-radius configure each corner separately Ordered by top left, top right, bottom right, bottom left Example: 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
Organizing Your 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.
TCP Transmission 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 servers connected 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 List formerly 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/sentence Configures 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 Accessiblity Verify 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 CSS rule 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