IT

HTTP Monitor Tools

There are many available alternatives:

•  NetBeans IDE "HTTP Server Monitor". To display the HTTP Monitor:
  Choose View > Debugging > HTTP Monitor (Ctrl+Shift+5) from the main menu.
  To enable the HTTP Monitor for a server that is set up to work with NetBeans check this article.
• Firebug: obtain it trough Firefox add-on panel. Check Firebug main features here.
  To access the HTTP monitor panel (called "Net"):
  Right-click any web page -> "Inspect Element with Firebug" -> Select the "Net" option on the bottom firebug toolbar (activate the panel if necessary).
  Any further requests will list their request/response HTTP headers.
  
• HttpFox: freeware - monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
  Information available per request includes:
  - Request and response headers
  - Sent and received cookies
  - Querystring parameters
  - POST parameters
  - Response body
• HttpWatch: tool for Internet Explorer/Firefox for analysing HTTP traffic. trial fully functional but only displays extended HTTP information for a limited number of well known sites;
• IEInspector: trial for 15 days. After the trial expired, it only displays extended HTTP information for a limited number of sites;
  

---

DOCTYPE

Templates: Recommended Doctype Declarations to use in your Web document by W3C;
A good article about Transitioning to XHTML Strict;

---

Links (or Anchors)

Link that points to another element in the page (source):

<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...
<H3 id="section2.1">On a more personal note</H3>
...

---

Text format [1]

<b>...</b>	bold
<i>...</i>	Italic
<u>...</u>	Underline
<s>...</s>	Strike-through
<tt>...</tt>	Teletype
<sup>...</sup>	Superscript (E=MC2)
<sub>...</sub>	H2O

Related articles

[1] - More HTML Font Styles

---

HTML Controls

Check my XHTML standard controls page for a complete list with examples

Documentation and tutorials:

• Check the official W3C list of HTML controls and documentation;

Types of HTML controls: 

•  Buttons (NOTE: this are created either with the <input> or the <button> tags. The <input> tag only lets you change the displayed button text. The <button> lets you put any content inside the button: like text; images; etc.)
   - submit buttons: When activated, a submit button submits a form. A form may contain more than one submit button.
  <BUTTON name="submit" value="submit" type="submit">
      Send<IMG src="/icons/wow.gif" alt="wow">
  </BUTTON>
   - reset buttons: When activated, a reset button resets all controls to their initial values. Ex.:
  <BUTTON name="reset" type="reset">
      Reset<IMG src="/icons/oops.gif" alt="oops">
  </BUTTON>
   - push buttons: Push buttons have no default behavior. Each push button may have client-side scripts associated with the element's event attributes.
• 
  

 checkbox

Soccer: <input type="checkbox" checked="checked" name="sports" value="soccer" />
  <br />
  Football: <input type="checkbox" name="sports" value="football" />
  <br /> 

---

HTML5

• HTML5: An Introduction (pdf ebook)
  

  HTML5 is most definitely a work in progress. It began to take shape back in 2004, and the official specification may not be actually complete until the year 2022! But HTML5 is already here, in everything from your current desktop browser to your new smartphone, so there’s no problem with getting started.

---

label

• If you use the label tag for prompts associated with fields, clicking on the label transfers focus to the input field;
• You can either use the "for" attribute or enclose the field within the label:
  

  <label for="fname">First name:</label>
  <input type="text" name="userFirstName" id="fname"/>
  

  <label>First name:
      <input type="text" name="userFirstName"
  </label>

---

fieldset

Using fieldset and legend for:

• Grouping all or part of a form inside fieldset draws attention to it and separates it from the rest of the page;
• Using style sheets for the legend is particularly useful;
  

<fieldset>
    <legend>ajax:updateField</legend>
    <form ...>
        <label for="f">Enter temperature in Fahrenheit:</label>
        <input type="text" id="f"/>
        <input type="button" id="convertButton" value="Convert"/>
        <hr width="500" align="left"/>
        <label for="c">Temperature in Celsius:</label>
        <input type="text" id="c"/>
        <label for="k">Temperature in Kelvin:</label>
        <input type="text" id="k"/>
    </form>
</fieldset> 

Sample CSS:

legend {
    font-weight: bold;
    color: black;
    background-color: white;
    border: 1px solid #cccccc;
    padding: 4px 2px;
}

Will be rendered has:

---