Review: Test 2 Chapters 6-9 The Box Model Content Text & web - PowerPoint PPT Presentation

Review: Test 2 Chapters 6-9

The Box Model • Content • Text & web page elements in the container • Padding • Area between the content and the border • Border • Between the padding and the margin • Margin • Determines the empty space between the element and adjacent elements 2

Configure Margin with CSS • The margin property • Related properties: • margin-top, margin-right, margin-left, margin-bottom • Configures empty space between the element and adjacent elements • Syntax examples h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }

Configure Padding with CSS • The padding property • Related properties: • padding-top, padding-right, padding-left, padding-bottom • Configures empty space between the content of the HTML element (such as text) and the border • Syntax examples h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }

Box model in Action 5

Norm rmal l Flo low • Browser display of elements in the order they are coded in the Web page document Relative Positioning h1 { background-color:#cccccc; padding: 5px; Changes the location of an color: #000000; } element in relation to #myContent { position: relative; where it would otherwise left: 30px; appear font-family: Arial,sans-serif; } h1 { background-color: #cccccc; Absolute Positioning padding: 5px; color: #000000; } #content {position: absolute; Precisely specifies the location of an left: 200; element in the browser window top: 100; font-family: Arial,sans-serif; width: 300; }

float Property • Elements that seem to h1 { background-color:#cccccc; padding:5px; “float" on the right or color: #000000; left side of either the } browser window or p { font-family:Arial,sans-serif; another element are } often configured using #yls {float:right; the float property. margin: 0 0 5px 5px; border: solid; } 7

clear Property The h2 text is displayed in • Useful to “clear” or normal flow. terminate a float • Values are left, right, and both clear: left; was applied to the h2 . Now the h2 text displays AFTER the floated image.

overflow Property The background does not • Intended to configure the extend as far display of elements on a Web as you’d page. expect. • However, it is useful to “clear” or terminate a float before the end of a container element • Values are auto, hidden, and scroll overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image.

CSS Page Layout Two Columns (left nav)

Configure • Vertical Navigation Hyperlinks in <div id="leftcolumn"> an Unordered List <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> • CSS removes the list marker and underline: #leftcolumn ul { list-style-type: none; } #leftcolumn a { text-decoration: none; } 11

Configure • Horizontal Navigation Hyperlinks in in HTML: an Unordered Li List <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> • CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display. #nav ul { list-style-type: none;} #nav a { text-decoration: none; padding-right: 10px; } #nav li { display: inline; } 12

CSS Pseudo-classes  Pseudo-classes and the anchor element ◦ link – default state for a hyperlink a:link {color:#000066;} ◦ visited – a hyperlink that a:visited {color:#003366;} has been visited a:focus {color:#FF0000;} ◦ focus – triggered when a:hover {color:#0099CC;} the hyperlink has focus a:active {color:#FF0000;} ◦ hover – triggered when the mouse moves over the hyperlink ◦ active – triggered when the hyperlink is being clicked

Deciding to Configure a class or id • Configure a class : • If the style may apply to more than one element on a page • Use the . (dot) notation in the style sheet. • Use the class attribute in the HTML. • Configure an id: • If the style is specific to only one element on a page • Use the # notation in the style sheet. • Use the id attribute in the HTML. 14

CSS Styling for r Pri rint • Create an external style sheet with the configurations for browser display. • Create a second external style sheet with the configurations for printing. • Connect both of the external style sheets to the web page using two <link > elements. <link rel="stylesheet" href="wildflower.css" type="text/css" media="screen"> <link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print"> 15

Pri rint Styling Best Practices • Hide non-essential content Example: #nav { display: none; } • Configure font size and color for printing • Use pt font sizes, use dark text color • Control page breaks Example: . newpage { page-break-before: always; } • Print URLs for hyperlinks Example: #sidebar a:after { content: " (" attr(href) ") "; } 16

Desig ign Techniques for Mobile Web  Single column design  Avoid floats, tables, frames  Descriptive page title  Descriptive heading tags  Optimize images  Descriptive alt text for images  Eliminate unneeded images  Navigation in lists  Em or percentage font size units  Common font typefaces  Good contrast between text and background colors  Provide “Skip to Content” hyperlink  Provide “Back to Top” hyperlink

Viewport Meta Tag • Default action for most mobile devices is to zoom out and scale the web page • Viewport Meta Tag • Created as an Apple extension to configure display on mobile devices • Configures width and initial scale of browser viewport <meta name="viewport" content="width=device- width,initial-scale=1.0"> 18

CSS3 Media Queries • Media Query • Determines the capability of the mobile device, such as screen resolution • Directs the browser to styles configured specifically for those capabilities • Example: <link href="lighthousemobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)"> 19

HTML Table Elements  <table> Contains the table  <th> Contains a table header element  <tr> Contains a table row  <td> Contains a table cell  <caption> Configures a description of the table 20

Accessibility and Tables • Use table header elements (<th> tags) to indicate column or row headings. • Use the caption element to provide a text title or caption for the table.  Complex tables: Associate table cell values with their corresponding headers ◦ <th> tag id attribute ◦ <td> tag headers attribute 21

<table border="1"> <caption>Bird Sightings</caption> <tr> <th id="name">Name</th> <th id="date">Date</th> </tr> <tr> <td headers="name">Bobolink</td> <td headers="date">5/25/10</td> </tr> <tr> <td headers="name">Upland Sandpiper</td> <td headers="date">6/03/10</td> </tr> </table> 22

Two Components of f Using Forms 1. The HTML form -- the web page user interface and 2. The server-side processing Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server. 23

HTML Using Forms  <form>  Contains the form elements on a web page  Container tag  <input>  Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons  Stand alone tag  <textarea>  Configures a scrolling text box  Container tag  <select>  Configures a select box (drop down list)  Container tag  <option>  Configures an option in the select box  Container tag 24

Server-Side Processing  Your web browser requests web pages and their related files from a web server.  The web server locates the files and sends them to your web browser.  The web browser then renders the returned files and displays the requested web pages for you to use. 25

CGI Common Gateway In Interface • A protocol for a web server to pass a web page user's request to an application program and accept information to send to the user. 26