 |
| Click Image for PDF Download |
INTRODUCTION:
Chapter 9 explores the use of Forms in web pages. Forms are used for search engines, stores, information collection, email forms, etc. When you enter a search in Google, you're submitting a form, for example.
ASSIGNMENTS:
OPTIONAL / RECOMMENDED ASSIGNMENTS:
<!DOCTYPE html>
<html lang="en:>
<head>
<title>My Title</title>
<meta charset="utf-8">
<head>
<body>
</body>
</html><table border=1>
<caption >Whatever</caption>
<tr><td>First</td><td>Last</td></tr>
</table>
| Something | More Here |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<link href="wildflowers.css" rel="stylesheet"></link>
</head>
<body>
<div id="container">
<div id="header">
<span><a href="#center">Skip to Content</a></span>
<h1>Door County Wildflowers</h1>
</div> <!-- end of header -->
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="winter.html">Winter</a></li>
</ul>
<img src="plsthumb.jpg" width="100" height="100" alt="Showy Pink Lady Slipper">
</div> <!-- end of nav -->
<div id="sidebar">
<h3>The Ridges</h3>
<p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the Summer months. For more info, visit <a href="http://www.ridgesanctuary.org">The Ridges</a>.</p>
<h3>Newport State Park</h3>
<p class="news">The <a href="http://www.newportwildernesssociety.org">Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
</div> <!-- end sidebar -->
<div id="center">
<h2>Door County</h2>
<p>Wisconsin's Door County Peninsula is a unique, ecologically diverse place with upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
<p>A wide array of wildflowers grow in the county because of this variety of ecosystems.</p>
<img src="trillium.jpg" width="200" height="150" alt="Trillium" id="floatright">
<h3>Explore the beauty <br>of Door County Wildflowers . . .</h3>
<p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.<br>
</div> <!-- end center -->
<div id="footer">Copyright © 2013 Door County Wild Flowers<br></div>
</div> <!-- end container -->
</body>
</html>body { margin:0;
background-color: #ffffff; }
#container { background-color: #eeeeee;
color: #006600;
min-width: 960px;
font-family: Verdana, Arial, sans-serif; }
#header { color: #cc66cc;
background-color: #636631;
border-bottom: 2px solid #000000;
text-align: right;
height: 120px;
background-image: url(showybg.jpg);
background-position: bottom;
background-repeat: repeat-x;
padding: 0 20px; }
#nav { float: left;
width: 150px; }
#sidebar{ float: right;
width: 200px; }
#center { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #ffffff;
color: #006600; }
#footer { font-size: .70em;
text-align: center;
color: #006600;
background-color: #ffffff;
padding-top: 10px;
clear: both; }
#header a { font-size: .80em; }
#header a:link, #header a:visited { color: #ffffff; }
#header a:focus, #header a:hover { color: #eeeeee; }
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 4px 4px 4px #000000;}
#nav ul { margin-top: 20px;
list-style-type: none; }
#nav a { text-decoration: none;
font-size: 1.2em; }
#nav a:link { color:#006600;}
#nav a:visited { color: #003300; }
#nav a:focus, #nav a:hover { color: #cc66cc; }
#nav a:active { color: #000000;}
#nav img { margin: 30px;}
#center p { margin: 20px; }
#center h2, #center h3 { color: #cc66cc;
background-color: #ffffff; }
#floatright { margin: 10px;
float: right; }
#sidebar h3 { padding-bottom: 2px;
border-bottom: 1px solid #000000;
margin: 10px;
font-size: .90em;
color: #cc66cc;
background-color: #eeeeee; }
.news { font-size: .80em;
margin: 10px; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Business</title>
<link href="mybusiness.css" rel="stylesheet"></link>
</head>
<body>
<div id="wrapper">
<h1>My Business</h1>
<div class="nav">
<a href="http://draft.blogger.com/index.html">Home</a>
<a href="http://draft.blogger.com/option1.html">Option 1</a>
<a href="http://draft.blogger.com/option2.html">Option 2</a>
<a href="http://draft.blogger.com/option3.html">Option 3</a>
</div>
<center>
<img src="mypicture.png" width="500" /></center>
<div>
My Business
1234 Main Street
Kelseyville, CA 95451
(707)123-4567
</div>
<div id="footer">Copyright © 2013 My Business, Inc.
<a href="mailto:youremail@mailplace.com">youremail@mailplace.com</a>
</div>
</div>
</body>
</html>
body {
background-color: #ffc373;
color: #a65f00;
font-family: Verdana, Arial, sans-Serif;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
}
h1 {
background-color: #a65f00;
color: #ffc373;
line-height: 200%;
text-align: center;
}
h2 {
background-color: #a65f00;
color: #ffc373;
line-height: 100%;
text-align: center;
}
.nav {
text-align: center;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
#footer {
text-align: center;
background-color: #a65f00;
color: #ffc373;
font-size: .60em;
}
|
Although I could spend pages explaining the differences between HTML, XML, XHTML, and HTML5, I think we'll just begin with the basics using the currently accepted methods.<!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><a href="http://www.mypage.com/pictures/me.jpg">My Picture</a><a href="mypage.html">My Page</a><a href="mailto:rgriffith@mendocino.edu">rgriffith@mendocino.edu"</a> | Required Text: Web Development & Design Foundations with HTML5, 6th Edition by Terry Felke-Morris. Published by Addison Wesley. ISBN 0-13-278339-8, and is available at the Mendocino College Bookstore. (Author's website for the text book: http://www.webdevfoundations.net) This is a link to the publishers page where you can also order a web-based copy of the book: http://www.mypearsonstore.com/bookstore/product.asp?isbn=0132783398 Note, however, that you can get the book cheaper at Amazon here or here. |
| Week | Begins | CSC 130 [ONLINE]: Topics & Reading Assignments |
| 1 | 19-Aug | Chapter 1: Intro to the Internet & WWW / Google, Gmail & Blogger |
| 2 | 25-Aug | Chapter 2: HTML Basics |
| 3 | 1-Sep | Chapter 3: Configuring Color and Text with CSS |
| 4 | 8-Sep | Chapter 4: Visual Elements and Graphics / Photo Editing |
| 5 | 15-Sep | Using FTP / Setting Up FTP Accounts |
| 6 | 22-Sep | Chapter 5: Web Design |
| 7 | 29-Sep | Chapter 6: Page Layout |
| 8 | 6-Oct | Chapter 7: More on Links, Layout & Mobile |
| 9 | 13-Oct | Chapter 8: Tables |
| 10 | 20-Oct | Chapter 9: Forms |
| 11 | 27-Oct | Chapter 10: Web Development |
| 12 | 3-Nov | Chapter 11: Web Multimedia and Interactivity |
| 13 | 10-Nov | Chapter 12: E-Commerce Overview |
| 14 | 17-Nov | Chapter 13: Web Promotion |
| 15 | 24-Nov | Chapter 14: A Brief Look at JavaScript |
| 16 | 1-Dec | Final Project: Complete and Publish |
| 17 | 8-Dec | FINAL EXAM |