geekBits

https://www.dropbox.com/s/9c4q5h993v1wdtn/Notebook%20Page.pdf

One of the (many many) new features in Mac OS X 10.7 Lion, is something called Captive Network Assistant.

In Apple’s own words:

When connecting to a network that requires authentication, Lion presents a window allowing you to log in to the network.

I’ve been using this today at my local Starbucks, where before you’re allowed to use their WiFi you are presented with a Welcome Page where you must insert a username and password.
The problem is that, while i have this username and password saved in my Keychain, Captive Network Assistant doesn’t seem to recognize them, nor be able to save them again to the Keychain. Thus, every time i connect I have to type them again.
Let’s see if this gets fixed in Lion’s final version, coming a month from now…

HTML Forms are used to select different kinds of user input.

Create text fields
How to create text fields. The user can write text in a text field.

Create password field
How to create a password field.

(You can find more examples at the bottom of this page)

HTML Forms

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.

Text Fields

<input type=”text” /> defines a one-line input field that a user can enter text into:

How the HTML code above looks in a browser:

First name:  
Last name: 

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

Password Field

<input type=”password” /> defines a password field:

How the HTML code above looks in a browser:

Password: 

Note: The characters in a password field are masked (shown as asterisks or circles). 

Radio Buttons

<input type=”radio” /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:

How the HTML code above looks in a browser:

 Male
 Female Checkboxes

<input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

How the HTML code above looks in a browser:

 I have a bike
 I have a car Submit Button

<input type=”submit” /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

How the HTML code above looks in a browser:

Username:  

If you type some characters in the text field above, and click the “Submit” button, the browser will send your input to a page called “html_form_action.asp”. The page will show you the received input.

 More Input Examples

Radio buttons
How to create radio buttons.

Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.

Simple drop-down list
How to create a simple drop-down list.

Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.

Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.

Create a button
How to create a button.

 Form Examples

Fieldset around form-data
How to create a border around elements in a form.

Form with text fields and a submit button
How to create a form with two text fields and a submit button.

Form with checkboxes
How to create a form with three checkboxes and a submit button.

Form with radio buttons
How to create a form with two radio buttons, and a submit button.

Send e-mail from a form
How to send e-mail from a form.

HTML Form Tags

Try-It-Yourself Examples <form>
.
input elements
.
</form>
  <form>
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” />
</form> <form>
Password: <input type=”password” name=”pwd” />
</form> <form>
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female
</form> <form>
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike<br />
<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car 
</form> <form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user” />
<input type=”submit” value=”Submit” />
</form> Tag Description <form> Defines an HTML form for user input <input /> Defines an input control <textarea> Defines a multi-line text input control <label> Defines a label for an input element <fieldset> Defines a border around elements in a form <legend> Defines a caption for a fieldset element <select> Defines a select list (drop-down list) <optgroup> Defines a group of related options in a select list <option> Defines an option in a select list <button> Defines a push button

HTML Tables Apples 44% Bananas 23% Oranges 13% Other 10%

Tables
How to create tables in an HTML document.

Table borders
How to specify different table borders.

(You can find more examples at the bottom of this page).

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for “table data,” and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example

How the HTML code above looks in a browser:

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

HTML Table Headers

Header information in a table are defined with the <th> tag.

The text in a th element will be bold and centered.

How the HTML code above looks in a browser:

Tables without borders
How to create tables without borders.

Table headers
How to create table headers.

Table with a caption
How to add a caption to a table.

Table cells that span more than one row/column
How to define table cells that span more than one row or one column.

Tags inside a table
How to display elements inside other elements.

Cell padding
How to use cellpadding to create more white space between the cell content and its borders.

Cell spacing
How to use cellspacing to increase the distance between the cells.

The frame attribute
How to use the “frame” attribute to control the borders around the table.

HTML Table Tags

Try it Yourself - Examples <table border=”1”>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 <table border=”1”>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table> <table border=”1”>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

More Examples Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines a group of columns in a table, for formatting <col /> Defines attribute values for one or more columns in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table HTML Lists An ordered list:

1. The first list item
2. The second list item
3. The third list item

An unordered list:

• List item
• List item
• List item

Try-It-Yourself Examples <ul>
<li>Coffee</li>
<li>Milk</li>
</ul> <ol>
<li>Coffee</li>
<li>Milk</li>
</ol> <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

More Examples Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines an item in a definition list <dd> Defines a description of an item in a definition list

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

HTML links
How to create links in an HTML document.

(You can find more examples at the bottom of this page)

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

The href attribute specifies the destination of a link.

Example

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools’ homepage.

Tip: The “Link text” doesn’t have to be text. You can link from an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window:

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

Create a link to the “Useful Tips Section” inside the same document:

Or, create a link to the “Useful Tips Section” from another page:

Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this: href=”http://www.w3schools.com/html”, you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href=”http://www.w3schools.com/html/”.

Tip: Named anchors are often used to create “table of contents” at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

Tip: If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.

An image as a link
How to use an image as a link.

Link to a location on the same page
How to link to a bookmark.

Break out of a frame
How to break out of a frame (if your site is locked in a frame).

Create a mailto link
How to link to a mail message (will only work if you have mail installed).

Create a mailto link 2
Another mailto link.

HTML Link Tags

Try it Yourself - Examples <a href=”url“>Link text</a> <a href=”http://www.w3schools.com/”>Visit W3Schools</a> Example <a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>
Try it yourself » <a name=”tips”>Useful Tips Section</a> <a href=”#tips”>Visit the Useful Tips Section</a> <a href=”http://www.w3schools.com/html_links.htm#tips”>
Visit the Useful Tips Section</a>

More Examples Tag Description <a> Defines an anchor Example Norwegian Mountain Trip

Try it yourself »

Try it Yourself - Examples <img src=”url” alt=”some_text”/> <img src=”boat.gif” alt=”Big Boat” /> <img src=”pulpit.jpg” alt=”Pulpit rock” width=”304” height=”228” />

More Examples Tag Description <img /> Defines an image <map> Defines an image-map <area /> Defines a clickable area inside an image-map

HTML Text Formatting This text is bold

This text is big

This text is italic

This is computer output

This is _subscript and ^superscript
 
Try it yourself »

HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Text formatting
How to format text in an HTML document.

Preformatted text
How to control the line breaks and spaces with the pre tag.

“Computer output” tags
How different “computer output” tags will be displayed.

Address
How to define contact information for the author/owner of an HTML document.

Abbreviations and acronyms
How to handle abbreviations and acronyms.

Text direction
How to change the text direction.

Quotations
How to handle long and short quotations.

Deleted and inserted text
How to mark deleted and inserted text.

HTML Text Formatting Tags HTML “Computer Output” Tags HTML Citations, Quotations, and Definition Tags

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as “important”. Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Try it Yourself - Examples Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text  <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text Tag Description <code> Defines computer code text <kbd> Defines keyboard text  <samp> Defines sample computer code <tt> Defines teletype text <var> Defines a variable <pre> Defines preformatted text Tag Description <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term Look! Styles and colors

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

Example <html>

<body style=”background-color:yellow”>
<h2 style=”background-color:red”>This is a heading</h2>
<p style=”background-color:green”>This is a paragraph.</p>
</body>

</html>
Try it yourself » Example <html>

<body>
<h1 style=”font-family:verdana”>A heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>

</html>
Try it yourself » Example <html>

<body>
<h1 style=”text-align:center”>This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>
Try it yourself » Tags Description <center> Deprecated. Defines centered content <font> and <basefont> Deprecated. Defines HTML fonts <s> and <strike> Deprecated. Defines strikethrough text <u> Deprecated. Defines underlined text Attributes Description align Deprecated. Defines the alignment of text bgcolor Deprecated. Defines the background color color Deprecated. Defines the text color

Headings are important in HTML documents.

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered “Hey! How did they do that?”

To find out, right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

Headings
How to display headings in an HTML document.

Hidden comments
How to insert comments in the HTML source code.

Horizontal lines
How to insert a horizontal line.

HTML Tag Reference

W3Schools’ tag reference contains additional information about these tags and their attributes.

You will learn more about HTML tags and attributes in the next chapters of this tutorial.

Example <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Try it yourself » Example <p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
Try it yourself » Example <!— This is a comment —>
Try it yourself »

Examples From This Page Tag Description <html> Defines an HTML document <body> Defines the document’s body <h1> to <h6> Defines HTML headings <hr /> Defines a horizontal line <!—> Defines a comment Example <p>This is a paragraph</p>
<p>This is another paragraph</p>
Try it yourself » Example <p>This is a paragraph
<p>This is another paragraph
Try it yourself » Example <p>This is<br />a para<br />graph with line breaks</p>
Try it yourself »

Examples From This Page Tag Description <p> Defines a paragraph <br /> Inserts a single line break