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
Chapters 6-9
the container
the border
and the margin
between the element and adjacent elements
2
elements
h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }
padding-bottom
element (such as text) and the border
h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }
5
Norm rmal l Flo low
the Web page document
Relative Positioning
Changes the location of an element in relation to where it would otherwise appear
h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; }
Absolute Positioning Precisely specifies the location of an element in the browser window
h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; }
h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }
“float" on the right or left side of either the browser window or another element are
the float property.
7
terminate a float
and both
The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.
display of elements on a Web page.
end of a container element
scroll
The background does not extend as far as you’d expect.
applied to the div that contains the image and
background extends and the h2 text displays AFTER the floated image.
<div id="leftcolumn"> <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>
11
#leftcolumn ul { list-style-type: none; } #leftcolumn a { text-decoration: none; }
HTML: <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>
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
Pseudo-classes and the anchor element
for a hyperlink
has been visited
the hyperlink has focus
the mouse moves over the hyperlink
a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;}
14
for browser display.
configurations for printing.
page using two <link > elements.
15
<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen"> <link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print">
Example:
#nav { display: none; }
Example: .newpage { page-break-before: always; }
Example:
#sidebar a:after { content: " (" attr(href) ") "; }
16
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
is to zoom out and scale the web page
display on mobile devices
<meta name="viewport" content="width=device- width,initial-scale=1.0">
18
screen resolution
those capabilities
<link href="lighthousemobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)">
19
<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
headings.
table.
Associate table cell values with their corresponding headers
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
and
Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some
23
<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
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
user's request to an application program and accept information to send to the user.
26
database, file, or process.
requested information or confirmation of action.
by a form or hyperlink.
27
28
<form method="post" action="http://webdevbasics.net/scripts/demo.php ">
29