Revision as of 05:06, 15 November 2013

Images

Images have two important numbers which must be observed when using images on webpages. The first, are the dimensions of the image, in pixels. The second, is the size on disk, in bytes. For example; a common digital camera might take an image with dimensions of 2000x2000, and that file might be about 1MB.

Lists

Lists come in two flavors; ordered and unordered. Within a given list, there should be list items. The structure looks like this:

 <ol>
  <li>item number 1</li>
  <li>item number 2</li>
 </ol>

 <ul>
  <li>bullet number 1</li>
  <li>bullet number 2</li>
 </ul>

There are lots of neat things that can be done with lists, using CSS. Stay tuned!

Tables

Tables are a great way to display things. Tables consist of rows and cells . Here is a basic structure:

 <table>
  <tr>
   <td>A1</td>
   <td>B1</td>
  </tr>
  <tr>
   <td>A2</td>
   <td>B2</td>
  </tr>
 </table>

Tables can get very rich with data. Here is a table with a complete header and footer, as well as some extra fanciness.

 <table border="1">
  <thead>
   <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td colspan="4" style="text-align: center;">Page 1</td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td>A1</td>
    <td colspan="2" style="text-align: center;">B1</td>
    <td>D1</td>
   </tr>
   <tr>
    <td rowspan="2">A2</td>
    <td>B2</td>
    <td>C2</td>
    <td rowspan="2">D2</td>
   </tr>
   <tr>
    <td>B3</td>
    <td>C3</td>
   </tr>
   <tr>
    <td>A4</td>
    <td colspan="2" style="text-align: center;">B4</td>
    <td>D4</td>
   </tr>
  </tbody>
 </table>

Block & Inline Elements

The various HTML elements, generally speaking, fall into these two camps. Using CSS we can manipulate them as we please.

Block Elements

Block level elements will force all following elements to appear below it. (like pressing enter on a typewriter, the rest of the line is left blank)

<h1>
<p>
<ul>
<table>

Inline Elements

Inline elements appear uninterrupted, along with other elements. For example, a link. It can appear next to other text or tags, and it does not interrupt the flow.

<b>
<a>
<img>
<td>

Forms

Forms are a great way for users to be able to provide information. There is a <form></form> element, which wraps all of the elements.

Defining the Form

First step is to create the form element. There are two attributes which are required. They are action="", which is a URL, where the browser will send the data -- and method="", which can be either get or post. In short, get will put the form data in the URL (which the user can see), and post will provide the data behind-the-scenes, which the user cannot see.

<form action="index.php" method="post"></form>

Form Elements

Most form elements are created using the <input> tag. Here are some common examples.

Text & Password

<input type="text" name="username">
<input type="password" name="password">

Radio buttons

<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female

Checkboxes

<input type="checkbox" name="vehicle" value="bike">I have a bike
<input type="checkbox" name="vehicle" value="car">I have a car

Drop-down lists

<select name="fruit">
 <option value="apple">Apples</option>
 <option value="banana">Bananas</option>
 <option value="orange">Oranges</option>
 <option value="pear">Pears</option>
</select>

And a really fancy example;

<select name="produce">
 <optgroup label="Fruit">
  <option value="apple">Apples</option>
  <option value="banana">Bananas</option>
  <option value="orange">Oranges</option>
  <option value="pear">Pears</option>
 </optgroup>
 <optgroup label="Vegetables">
  <option value="beet">Beets</option>
  <option value="carrot">Carrots</option>
  <option value="celery">Celery</option>
  <option value="cauliflower">Cauliflower</option>
 </optgroup>
</select>

Textarea

<textarea name="story"></textarea>

Submit & Reset buttons

<input type="submit" value="Submit">
<input type="reset" value="Reset">

Complete Form

Here is a complete form example.

<form action="index.php" method="post">
 <input type="text" name="username">
 <input type="password" name="password">
 <input type="submit">
</form>

@@ Line 68: / Line 68: @@
   </table></nowiki>
-= Blocks =
+= Block & Inline Elements =
-== HTML Block Elements ==
+The various HTML elements, generally speaking, fall into these two camps.  Using CSS we can manipulate them as we please.
-Block level elements normally start (and end) with a new line when displayed in a browser.
-* h1
+== Block Elements ==
-* p
+Block level elements will force all following elements to appear below it. (like pressing enter on a typewriter, the rest of the line is left blank)
-* ul
+* <code><nowiki><h1></nowiki></code>
-* table
+* <code><nowiki><p></nowiki></code>
-== HTML Inline Elements ==
+* <code><nowiki><ul></nowiki></code>
-Block level elements normally start (and end) with a new line when displayed in a browser.
+* <code><nowiki><table></nowiki></code>
-* b
-* a
+== Inline Elements ==
-* img
+Inline elements appear uninterrupted, along with other elements. For example, a link. It can appear next to other text or tags, and it does not interrupt the flow.
-* td
+* <code><nowiki><b></nowiki></code>
+* <code><nowiki><a></nowiki></code>
+* <code><nowiki><img></nowiki></code>
+* <code><nowiki><td></nowiki></code>
 = Forms =
+Forms are a great way for users to be able to provide information. There is a <code><form></form></code> element, which wraps all of the elements.
+== Defining the Form ==
+First step is to create the form element. There are two attributes which are required.  They are <code>action=""</code>, which is a URL, where the browser will send the data -- and <code>method=""</code>, which can be either <code>get</code> or <code>post</code>.  In short, <code>get</code> will put the form data in the URL (which the user can see), and <code>post</code> will provide the data behind-the-scenes, which the user cannot see.
+ <form action="index.php" method="post"></form>
+== Form Elements ==
+Most form elements are created using the <code><input></code> tag. Here are some common examples.
+=== Text & Password ===
+ <input type="text" name="username">
+ <input type="password" name="password">
+=== Radio buttons ===
+ <input type="radio" name="gender" value="male">Male
+ <input type="radio" name="gender" value="female">Female
+=== Checkboxes ===
+ <input type="checkbox" name="vehicle" value="bike">I have a bike
+ <input type="checkbox" name="vehicle" value="car">I have a car
+=== Drop-down lists ===
+ <select name="fruit">
+  <option value="apple">Apples</option>
+  <option value="banana">Bananas</option>
+  <option value="orange">Oranges</option>
+  <option value="pear">Pears</option>
+ </select>
+And a really fancy example;
+ <select name="produce">
+  <optgroup label="Fruit">
+   <option value="apple">Apples</option>
+   <option value="banana">Bananas</option>
+   <option value="orange">Oranges</option>
+   <option value="pear">Pears</option>
+  </optgroup>
+  <optgroup label="Vegetables">
+   <option value="beet">Beets</option>
+   <option value="carrot">Carrots</option>
+   <option value="celery">Celery</option>
+   <option value="cauliflower">Cauliflower</option>
+  </optgroup>
+ </select>
+=== Textarea ===
+ <textarea name="story"></textarea>
+=== Submit & Reset buttons ===
+ <input type="submit" value="Submit">
+ <input type="reset" value="Reset">
-= Miscellany =
+== Complete Form ==
+Here is a complete form example.
+ <form action="index.php" method="post">
+  <input type="text" name="username">
+  <input type="password" name="password">
+  <input type="submit">
+ </form>

Difference between revisions of "HTML 2"