xHTML and stuff: March 2011

This website uses javascript and forms to allow you to check what has been entered within a form and to check if valid.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 14</title>
  <link href="css1.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
  
  </script>

</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return validateForm();">
   <div>
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName" />
   <div>

   <div>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id ="userAge" />
   </div>

   <div>
    <input type="submit" value="Send information" />
   </div>
  </form>
</body>
</html>

CSS:
body
{
background-color: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
margin: 0px;
}

div
{
  padding-bottom: 10px;
  width: 250px;
  text-align: right;
}
label
{
  padding-right: 5px;
}

Chapter 3 and 4 were all about CSS. It taught how to use spans and divs, style sheets, specific comands for borders, image editing as well as more.

Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Chapter 4</title>
  <link href="css1.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div id="wrapper1">

   <h1>Chapter 4 website</h1>

   <div id="wrapper2">
   This is random text which has been placed here to add content to the page

   <h2>Definition lists</h2>
   <dl>
    <dt>Definition<dt>
     <dd>This is an example</dd>
    <dt>Lists</dt>
     <dd>This is an example</dd>

   </dl>

   <p>

   <h2>Ordered lists</h2>
   <ol type="A">
    <li>Ordered</li>
    <li>List</li>
   </ol>

   <p>

   <h2>Unordered lists</h2>
   <ul type="square">
    <li>Un-</li>
    <li>Ordered</li>s\
    <li>List</li>
   </ul>

   <p>

   <h2>Physical style elements</h2>
   <b>Bold</b><br>
   <u>Underlined</u><br>
   <i>Italics</i><br>

   <p>

   <h2>Hyperlinks</h2>
   <a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>
   <a href="http://google.com%22%3egoogle%3c/a%3E%3Cbr>

   <p>

   <h2>Images</h2>
   <img src="image.JPG" />

   <p>


   <p id="footer">This is an example footer</p>
   </div>



  </div>

</body>
</html>

here is the css:
body
{
background-color: #FFCCCC;
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
margin: 0px;
}
h1
{
background-color: #CC0033;
font-size: 30px;
padding-left: 5px;
padding-top: 15px;
border-bottom: 1px dashed #000000
}

h2
{
font-size: 16px;
border-bottom: 1px dashed #000000;
}
dt
{
font-weight: bold;
}
a
{
font-weight: bold;
font-color: #000000;
}

.dashedborder
{
border: 1px dashed #000000
}

#footer
{
font-size: 8px;
font-style: Italic;
}

#wrapper1
{
width: 800px;
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
background-color: #FF9999;
border: 1px solid #000000;
}

#wrapper2
{
width: 780px;
margin-left: auto;
margin-right: auto;
}

xHTML and stuff

Wednesday, 23 March 2011

Chapter 9 + 13 - Javascript and forms

Thursday, 17 March 2011

Chapter 3 + 4