MELJUN CORTES HTML Tables Forms Frames

<table></table>The <table> tag specifies the presence of a table. <td></td>Specifies the presence of a column<th></th>Specifies the header of the table<tr></tr>Specifies the presence of a row

MELJUN CORTESMELJUN CORTES

Border – size of the border around the tableCellpadding – space between the edge of a cell and the contentsCellspacing – space between cellsBgcolor – color of the backgroundBackground – picture of the backgroundAlign – alignment of the table to surrounding text (left, right, center)

Bordercolor – color of border around the tableWidth – width of the cellHeight – height of the cellColspan – number of columns to coverRowspan – number of rows to coverValign – vertical alignment of cell (top,middle,center,bottom,baseline)

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bgcolor=green><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 background="za.jpg"><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

Filename: za.jpg

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 align=center><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bordercolor=red><tr><td>element1</td><td>element2</td><td>element3</td><td>element4</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bordercolor=green><tr height=110><td width=100>element1</td><td width=100 colspan="2">element2 element3</td><td width=100>element4</td></tr><tr height=110><td width=100>element5</td><td width=50>element6</td><td width=50>element7</td><td width=100>element8</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bordercolor=orange><tr height=110><td width=100 rowspan="2">element1 element5</td><td width=50>element2</td><td width=50>element3</td><td width=100>element4</td></tr><tr height=110><td width=50>element6</td><td width=50>element7</td><td width=100>element8</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bordercolor=blue><tr height=110><td width=100 rowspan="2">element1 element5</td><td width=100 colspan="2">element2 element3</td><td width=100 rowspan="2">element4 element8</td></tr><tr height=110><td width=50>element6</td><td width=50>element7</td></tr></table></body></html>

<html><head><title></title></head><body>CREATING TABLE<br><br><table border=1 cellpadding=20 cellspacing=10 bordercolor=blue ><tr height=110><td width=100 valign=top>top</td><td width=150 valign=middle>middle</td><td width=150 valign=bottom>bottom</td><td width=150 valign=baseline>baseline</td></tr></table></body></html>

USING MARQUEE

<marquee> requires a closing tag </marquee> ATTRIBUTES

width="n" specifies width of marquee, where "n" is expressed as pixels or % of page

width.behavior="command"

commands are "alternate" and "slide" "alternate" text will bounce back and forth."slide" will scroll across, jump back, and scroll again

direction="right" text scrolls from left to right, default is right to left.

loop="n" where "n" equals the number of times the marquee will scroll, if not

specified the default is a continuous scroll. bgcolor="#color"

applies a bgcolor to the marquee, where "#color" is the hexadecimal number of the background color. scrollamount="n"

makes the marquee scroll faster. scrolldelay="n"

makes the marquee scroll slower.

USING FORMS

<input> tag, used to create single line text fields, radio buttons, check boxes, hidden fields, and more.

ATTRIBUTE:type="" attribute, is a "required" attribute of the <input> tag. It tells the browser what type of form field or button is being used for that particular input tag.

TYPES: TEXT, PASSWORD, RADIO,CHECKBOX

Input, Textarea, & Select Tags

<select> tag, used to generate drop-down and menu

boxes. TYPES:1. type="text" This attribute is used to create a single line text input field. size="" maxlength=""Default text field:<form><input type="text"></form>

SAMPLE PASSWORD CODE:

<html><head><title></title></head><body>

<input type=“password” size="20"> TYPE YOUR PASSWORD </input><br><br>

<form>

<input type="radio" value="V1" checked name="R1">MALE

<input type="radio" name="R1" value="V2">FEMALE

<input type="checkbox" value="V1" checked name="C1" >YES

<input type="checkbox" name="C2" value="V2">NO

</form>

</body>

</html>

<select> </select>used to generate drop-down or select box (scrolling

list) menus and a closing tag is required,

The default for the select tag is a drop-down menu.

Tag Attributes:

name="" attribute, designates the topic for all individual options. size="" attribute, is used to generate a select box menu. The value determines how many lines are visible in the box.

<option> Tag

Each item in the list is placed within a set of <option></option> tags. <option> tag attributes;

The value="" attribute, is optional but most CGI programs require it to process the information.

SELECTED attribute, may be used to pre-select an items

<form><select name="dropdownmenu"><option value="1">yes</option><option value="1">no</option><option value="1">maybe</option></select></form>

<form><select name="selectbox" size="2"><option value="1">option 1</option><option value="1">option 2</option><option value="1">option 3</option><option value="1">option 4</option></select></form>

<form><select name="selectbox" size="3"><option value="1">option 1</option><option value="1">option 2</option><option value="1">option 3</option><option value="1">option 4</option></select></form>

<form > <textarea rows="8" name="S1" cols="52"></textarea><BR><input type="submit" value="Submit"><input type="reset" value="Clear"></form>

<frame> Tag

The <frame> tag defines one particular window (frame) within a <frameset>.

Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

Vertical Frame

<html>

<frameset rows="25%,*,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

Horizontal Frame

<html>

<frameset cols="50%,*,25%">

<frame src="frame_a.htm" noresize="noresize" />



</frameset>

</html>

<html>

<frameset rows="50%,50%">


<frameset cols="25%,75%">



</frameset>

</frameset>

</html>

Frameset Tag

• The <frameset> tag defines a frameset.

• The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a separate document.

• The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

Attribute Value Description

Cols % * pixels Specifies the number and size of columns in a

frameset

Rows % * pixels Specifies the number and size of rows in a frameset

Vertical Frameset

<html>

<frameset rows="25%,*,25%">




</frameset>

</html>

Mixed Frameset

<html>

<frameset rows="50%,50%">


<frameset cols="25%,75%">



</frameset>

</frameset>

</html>

No resize Frame

<html>

<frameset cols="50%,*,25%">

<frame src="frame_a.htm" noresize="noresize" />



</frameset>

</html>

Technology

MELJUN CORTES HTML Tables Forms Frames