News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 15 – Frames

August 25th, 2009

A page can be divided into frames using a special frame document. In this document the <frameset> element replaces the body element and contains only frame information. The element requires either the cols or the rows attribute to specify the number of frames and their sizes. Both attributes accept a comma-separated list where the size is given in either pixels, percentage or remaining space, as is indicated by an asterisk.

<frameset cols="100,25%,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

The remaining space can also be divided up among multiple frames in a specified proportion.

<frameset cols="100,2*,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

The color, size and display of the borders can be adjusted as necessary. Bordercolor sets the color of the border and both the border and framespacing attributes change the size of the border. Frameborder can be used to hide the borders or they can be removed completely by setting the border size to zero. By default, the border is 6 pixels wide.

<frameset cols="" bordercolor="red" border=10" frameborder="yes"></frameset>

Within the frameset a number of <frame> elements must be added equal to how many are specified with the cols or rows attribute. The source attribute, which gives the location of each document, needs to be included in this element. The frames are added from left to right and top to bottom.

<frameset cols="100,25%,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

For each frame the scrollbars, resizing and borderdisplay can be controlled. By default, the scrollbars are displayed automatically whenever they are needed. The scrolling attribute can be used to force the scrollbars to be either shown or not shown using the values “yes” or “no”. Including the noresize attribute will prevent the user from dragging the border in the browser to resize it. As noted in an earlier chapter, the value of such an attribute is commonly set to its own name (this is required by XHTML). The frameborder attribute can hide the border for a particular frame by settings its value to “no”.

<frameset cols="100,25%,*">
 <frame src="frame1.html" scrolling="yes">
 <frame src="frame2.html" noresize="noresize">
 <frame src="frame3.html" frameborder="no">
</frameset>

Frame names

Before a frame can be linked to it needs to be given a name.

<frameset cols="50%,50%">
 <frame src="frame1.html" name="frame1">
 <frame src="frame2.html" name="frame2">
</frameset>

Once named, it can be targeted using the target attribute for the anchor element.

<a href="newframe.html" target="frame1">Link for changing frame1</a>

This attribute can also be applied to the <base> header tag in order to set a default target.

<base target="frame1">

In addition to the frame name there are four other targets that have special meanings. _blank loads the document in a new window. _self loads it in the current frame. _parent loads it into the immediate frameset parent of the current frame, and thereby removes a frameset if there is any. Finally, _top removes all frames and loads the link into the full window.

<a href="newframe.html" target="_top">Full window</a>

Noframes element

The <noframes> element provides a way for older browsers not supporting frames to be able to view the page. It can contain an alternative page complete with the body element and any other tags.

<noframes>
    Sorry, your browser does not support frames.
</noframes>

HTML Tutorial – 14 – Forms II

August 25th, 2009

Text and password fields

The most useful and common input type is the text field. Like most form elements it requires the name attribute to be specified. The value attribute will be set to the text that the user inputs into the field.

<input type="text" name="txt">

Another useful input type is the password field, which hides its characters from view.

<input type="password" name="pass">

For both the text and password types an initial value can be specified using the value attribute.

<input type="text" name="txt" value="default text">

The size of the field can be changed with the size attribute to a specific number of characters. Moreover, a character limit on the field can be set using the maxlength attribute.

<input type="text" name="txt" size="50" maxlength="75">

Hidden field

The last text field, hidden, is used to add data to a form without displaying it to the user. Because the user cannot change this input type’s value it must be specified in the markup.

<input type="hidden" name="secure" value="hidden text">

Check boxes

Check boxes are used to give the user multiple choices. If no value is set a selected check box will be sent with the value “TRUE” and if the box is unchecked no value will be sent for that element.

<input type="checkbox" name="c1" value="1">
<input type="checkbox" name="c2" value="2">
<input type="checkbox" name="c3" value="3">

Radio buttons

With radio buttons only one button in every group can be checked. To group radio buttons together they need to be given the same name.

<input type="radio" name="group" value="1">
<input type="radio" name="group" value="2">
<input type="radio" name="group" value="3">

Default selections can be made using the checked attribute for both the checkbox and radio types.

<input type="checkbox" checked="checked">

Textarea

The <textarea> form element creates a multi-line text box. The text between the tags is the default content and the size of the area is given with the cols and rows attributes.

<textarea cols="50" rows="5">initial text</textarea>

List boxes

The last form control is the list box, which is created using the elements: <select>, <option> and <option group>. The <select> tag is the container for the list and gives the list its name. Inside of it each list item is defined using the <option> element. If no value attribute is assigned the content of the <option> element will be sent as the value if that option is selected.

<select name="list">
 <option>first</option> 	
 <option>second</option>
 <option selected="selected">third</option>
</select>

By default, only one option is displayed, making the list box appear as a drop down list. The number of displayed items can be increased using the size attribute, making the list box into a scroll list instead. To be able to select multiple options the multiple attribute can be enabled. To select default options the selected attribute can be used.

<select name="list" size="3">
 <optgroup label="Listbox items">
  <option>first</option> 	
  <option>second</option>
  <option selected="selected">third</option>
 </optgroup>
</select>

The option group element <optgroup> is used to give a title for a set of options in order to visually group them together.

<select name="list">
 <optgroup label="Listbox items">
  <option>first</option> 	
 </optgroup>
</select>

Fieldset

The fieldset element creates a border around any form controls in order to group them visually. A label may be provided for the fieldset using the <legend> element.

<fieldset>
 <legend>Title</legend>
 <input type="text" name="txt">
</fieldset>

HTML Tutorial – 13 – Forms I

August 25th, 2009

Forms allow users to enter and submit data. They can for example be used to handle logins, order forms and user feedback. The <form> element requires two attributes: action and method. Action is the location where the form is sent to. This can be either a mailto link or a form handling script. A form handler requires server-side programming and uses the Common Gateway Interface (CGI).

The other required attribute is the sending method, which can be either get or post. Get sends the form data directly when it calls the form handler by appending the data to the URL. Post, on the other hand, sends the data to the handler in a separate transmission. Which method to use may depend on the form handler.

<form action="/cgi-bin/hello.cgi" method="post"></form>

Form controls

Any elements may be placed inside of the form element, but most importantly it may include the form controls. Most controls use the <input> element, which can create buttons, text fields and alternative choices. Almost every form control requires a name and a value to either be specified in the markup or entered by the user. These name/value pairs are what will be sent to the form handler or e-mail address.

Submit and reset buttons

Every form needs a submit button which sends the form to the handler. A form may also include a reset button for resetting the form to its initial values.

<input type="submit"> 
<input type="reset">

The default text label for a button can be changed using the value attribute.

<input type="submit" value="Send">

Custom buttons

Additionally, custom normal or image buttons can be added. However, to give them any functionality requires the use of a scripting language, such as JavaScript.

<input type="button">
<input type="image" src="btn_img.png">

Another way to make custom buttons with scripts is using the <button> element, which gives more control over how the button is displayed.

<button>label or image</button>

File input

The file input type allows the user to select a file on their computer. Attaching a file to the form data requires method=”post” and enctype=”form/multipart”.

<input type="file" name="selected_file">

HTML Tutorial – 12 – Lists

August 25th, 2009

HTML offer three types of lists: ordered, unordered and definition.

Ordered list

The ordered, or numbered, list <ol> uses the list item element <li> to specify each item.

<ol>
 <li>First item</li> 
 <li>Second item</li> 
</ol>

The end tag for the list item is optional.

<ol>
 <li>First item 
 <li>Second item
</ol>

The numerals for the ordered list can be changed using the type attribute. Arabic numbers (“1”) are used by default, but the type can also be set to for example lower or uppercase letters (“a”, “A”) or roman numerals (“i”, “I”).

<ol type="i">
 <li>First item</li> 
 <li>Second item</li> 
</ol>

The start attribute sets the initial value for the list. Likewise, the value attribute can be used to set the value for a specific list item.

<ol start="10"> 
 <li>First item</li> 
 <li value="20">Second item</li>
</ol>

Unordered list

The unordered, or bulleted, list <ul> uses the list item element <li> just as the ordered list.

<ul>
 <li>First item</li> 
 <li>Second item</li>
</ul>

Its default marker is a disc, which can be changed to either a circle or square using the type attribute.

<ul type="circle">
 <li>First item</li> 
 <li>Second item</li>
</ul>

Definition list

The definition, or description, list <dl> consists of a series of definition terms <dt> paired with definition data <dd>.

<dl>
 <dt>Definition term</dt>
 <dd>Definition data</dd>
</dl>

Nesting lists

Lists may be nested and different list types can be mixed together.

<ol>
 <li>First item
  <ul type="square">
   <li>First Subitem
   <li>Second Subitem
  </ul>
 <li>Second item
</ol>

HTML Tutorial – 11 – Tables

August 25th, 2009

Tables are used to structure content into rows and columns. A table is organized into rows using the table row <tr> tag. Each row is then split into table cells containing either header <th> or data <td> tags. The cells can be formatted separately and automatically expand to fit their content. They may also contain tables of their own.

<table>
 <tr> <th>Head</th> <td>Data</td> </tr>
</table>

For each of the inner table elements the end tag may optionally be left out.

<table>
 <tr> <th>Head <td>Data
</table>

The table’s border attribute specifies the width of the border in pixels, which is 0 by default for most browsers.

<table border="5"></table>

The frame attribute specifies which outside borders are displayed.

<table border="5" frame="void"></table>

Allowed values are: void, above, below, hsides, lhs, rhs, vsides, box and border.

ValueDescription
voidNo borders
box, borderAll borders
hsidesTop and bottom borders
vsidesLeft and right borders
aboveTop border
belowBottom border
lhsLeft border
rhsRight border

The rules attribute controls the borders between the cells. The width of the rules is not decided by the border attribute, but by the table’s cellspacing.

<table border="5" rules="none"></table>

Allowed values are: none, groups, rows, cols and all.

ValueDescription
noneNo lines
allLines between rows and columns
groupsLines between row groups and column groups
rowsLines between rows
colsLines between columns

The bordercolor attribute can be set for any table elements to change the color of the surrounding borders.

<table bordercolor="red"></table>

Cellspacing is the space between the table cells. Cellpadding is the space between the cell border and its contents. Both of these attributes can be specified in either pixels or percentage. When specified by percentage the browser uses half of the specified percentage for each side of the cell.

<table cellspacing="0" cellpadding="0"></table>

The width attribute specifies the width of a table cell or of the table itself. The height attribute specifies the height of a table cell. Width and height can be specified in either pixels or a percentage of the containing element’s width or height. Note that the width only needs to be set for one cell in a column in order to affect the other cells in that column. Similarly, adjusting the height of a cell will also affect the other cells in that row.

<table width="50%" height="100"></table>

The background and bgcolor attributes can be used to add a background image or color to any table element.

<table background="bg.png"></table>
<table bgcolor="blue"></table>

Cells may span multiple rows and columns by using the rowspan and colspan attributes. The colspan attribute stretches a table cell across several columns.

<table>
 <tr> <td colspan="2"></td> </tr>
 <tr> <td></td> <td></td> </tr>
</table>

The rowspan attribute stretches a cell across multiple rows in the table.

<table>
 <tr> <td></td> <td rowspan="2"></td> </tr>
 <tr> <td></td> </tr>
</table>

Align controls the horizontal alignment and can be added to all table elements to force center, left or right alignment. The table cells can also be aligned with justified.

<table align="center"></table>

Valign can set the vertical alignment of table cells and rows to align the content at the top, middle, bottom or baseline.

<table>
 <tr> <td valign="baseline"></td> </tr>
</table>

HTML Tutorial – 10 – Structural Markup

August 25th, 2009

Structural markup describes the purpose of text and lets the appearance be decided by the browser.

Text can be structured as a header using one of the six header tags – <h1>…<h6> – with <h1> being the largest and <h6> the smallest.

<h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3>
<h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6>

The header can be aligned with the values left, right, center or justified.

<h1 align="center">Header 1</h1>

Other common content-based styles are emphasis <em> and strong emphasis <strong>. They will typically be rendered the same as italic and bold.

<em>emphasis</em>, <strong>strong emphasis</strong>

Insert <ins> and delete <del> are used to markup replacement text. They are typically rendered as underlined and strikethrough.

<ins>new text</ins>
<del>old text</del>

When including a quotation there are two elements available – <q> and <blockquote>. The inline quote tag <q> is intended for short quotes. However, since not all browsers render the double quotes it is often better to just use normal quotation marks instead of this element.

<q>quote</q>

For longer quotations there is blockquote which will cause the text to be indented.

<blockquote>blockquotes are good for longer quotations</blockquote>

Then there is the <cite> element which is used for citations or for specifying references to quotes.

<cite>citation</cite>

Both quotation elements may also use the attribute named cite to provide a reference, but the value of this attribute will not be displayed in the browser.

<q cite="reference.html">quote</q>
<blockquote cite="reference.html">blockquote</blockquote>

There are three elements useful in technical documents: definition <dfn>, abbreviation <abbr> and acronym <acronym>.

<dfn>definition</dfn>
<abbr>abbr.</abbr>
<acronym>HTML</acronym>

The generic title attribute can be used to enter the full name for an abbreviation or acronym. This text will appear as a tooltip when the mouse cursor hovers over the element.

<abbr title="abbreviation">abbr.</abbr>
<acronym title="Hypertext Markup Language">HTML</acronym>

There are four elements related to programming. Code <code> can be used to structure programming code. Sample <samp> to show output from a program. Keyboard <kbd> for text to be entered by the user and variable <var> for program variable names.

<code>computer code</code> 
<samp>sample output</samp>
<kbd>keyboard input</kbd> 
<var>variable</var>
  1. 1
  2. ...
  3. 32
  4. 33
  5. 34
  6. 35
  7. 36
  8. 37
Ads