Thursday, July 5, 2012

CSS and HTML 12:Putting It All Together


If you have gone through all of the pages in this HTML Basics then you should be a competent HTMLer.
In fact, due to the fact that most people who use HTML use it rather badly, you should be better than most.
he following code incorporates all of the methods that have been explained in the previous pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

 <title>My first web page</title>

 <!-- By the way, this is a comment -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
 <li>To learn HTML</li>
 <li>
  To show off
  <ol>
   <li>To my boss</li>
   <li>To my friends</li>
   <li>To my cat</li>
   <li>To the little talking duck in my brain</li>
  </ol>
 </li>
 <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>

<h3>Some random table</h3>
<table border="1">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
 <tr>
  <td>Row 4, cell 1</td>
  <td>Row 4, cell 2</td>
  <td>Row 4, cell 3</td>
 </tr>
</table>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

<p><input type="submit" /></p>

<p><input type="reset" /></p>

</form>

</body>

</html>
There you have it. Save the file and play around with it - this is the best way to understand how everything works. Go on. Tinker.
When you're happy, you can move on to the CSS Beginner Tutorial.

No comments:

Post a Comment