HTML TAGS/ELEMENTS 1) <HTML> - 12 Ip Java Notes 1

2) <BODY>

a. ATTRIBUTES:

i. BACKGROUND=”imagefile.jpg”

ii. BGCOLOR=color-code OR color-name iii. TEXT=text-color

iv. ALINK=active-link color v. VLINK=visited-link color vi. TOPMARGIN=value in pixels vii. LEFTMARGIN=value in pixels 3) <H1> TO <H6>

a. ATTRIBUTES:

i. ALIGN=center/right/left

<H1> TO <H6> tags are differentiated from each other through these factors: typeface, point-size and space above and below them.

4) <BR> - this will move the following text to the next immediate line without any space.

5) <P> - this will move the following text to the next line leaving one blank line in between.

a. ATTRIBUTES:

i. ALIGN=center/right/left

6) <CENTER> - this will centralize a segment of text.

7) <BASEFONT> - a. ATTRIBUTES:

i. SIZE= 1 TO 7 or relative +1 + 2 ....

ii. FACE= any font name

iii. COLOR= color code or color name 8) <FONT>

a. ATTRIBUTES:

i. SIZE= 1 TO 7 or relative +1 + 2 ....

ii. FACE= any font name

iii. COLOR= color code or color name

Note that BASEFONT is used to set default settings for a text. This is because it affects all the text that follows it until a new tag affecting that is encountered. While FONT tag affects a text up-to its closing tag ONLY.

9) <HR> produces a horizontal line spread across the width of the browser window.

a. ATTRIBUTES:

i. SIZE= 3(default) – 72 pixels This attribute specifies the thickness.

ii. WIDTH= percentage of the window covered by ruler iii. COLOR= name or color code

iv. NOSHADE to display rule in flat 2D. The default is 3D 10) <B> Bold Text </B>

11) <I> Italic Text </I>

12) <U> Underlined Text </U>

13) <TT> Typewriter text </TT>

14) <SUB> Subscript Text </SUB>

15) <SUP> Superscript Text </SUP>

Nesting Tags:

<CENTER> <B> <U> A NESTED TEXT </U> </B> </CENTER>

In such case, the innermost tag must be closed first and then the outer one.

LISTS: These are values arranged in some specific order. There can be three types of Lists:

 Ordered (OL) Un-Ordered (UL) Definition (DL)

16) <OL> ... <LI> :this is a numbered or ordered list. The default list is 1,2,3 ... the <LI> tag specifies the List Item to be displayed

a. ATTRIBUTES:

i. START= a number. This attribute will change the start value of the list.

ii. TYPE=can be: A / a / I / i /1

17) <UL> ... <LI>: this is an un-ordered or bulleted list. The default list is a solid circle (disc) ... the <LI>

tag specifies the List Item to be displayed a. ATTRIBUTES:

i. TYPE=can be: DISC (solid circle) / CIRCLE ( hollow circle) / SQUARE (solid square) 18) <DL>... <DT> ... <DD>: a definition list (<DL>) consist of alternating a „definition term‟(<DT>) and a

„definition description‟(<DD>) a. ATTRIBUTES:

i. COMPACT with this attribute, <DD> appears on the same line with <DT>

Example:

<HTML>

<HEAD>

<TITLE>My first page</TITLE><BR>

</HEAD>

<H1> <CENTER> Heading H1</CENTER> </H1>

<H2> Heading H2 </H2>

<B> Bold Element </B>

Normal

<BR> <U> Underine Element </U>

<BR> <I> Italic Element </I>

<BR><SMALL>small Element</SMALL>

<BR> 2

<FONT FACE=broadway COLOR=maroon SIZE=21>X</FONT>avier's

<BR><TT> This is a typewrite Text </TT>

<BR> <         

<LI> HARDWARE <LI> SOFTWARE <OL>

<LI> OS

<LI> SYSTEM S/W </OL>

<LI> FIRMWARE <LI> MALWARE

</OL>

<LI> HARDWARE <LI> SOFTWARE <OL>

<LI> OS

<LI> SYSTEM S/W </OL>

<LI> FIRMWARE <LI> MALWARE

</UL>

<DL>

<DT> HTML

<DD> HYPERTEXT MARKUP LANGUAGE

</DL>

<DT> XML

<DD>EXTENSIBLE MARKUP LANGUAGE

</DL>

</body>

</html>

Table Heading Columns(TH)

Table Rows(TR)

Table Data for each column(TD)

<HEAD>

<TITLE> TABLES </TITLE>

</HEAD>

<BODY>

<H1> HTML 2ND ASSIGNMENT : TABLES 1</H1>

<TABLE BORDER=2>

<THEAD>

<TR> <TD> THIS IS A TABLE HEADER </THEAD>

<TBODY>

<CAPTION> THIS IS A TABLE CAPTION </CAPTION>

<TH> ROLL <TH> NAME <TH> PHONE

<TR> <TD> 1 <TD width=170> AMIT SHARMA <TD>9213214455 <TR> <TD> 2 <TD> SUBHASH V <TD>8764150339 <TR> <TD> 3 <TD> ASHOK SINGH <TD>9828119759 <TR> <TD> 4 <TD> NIKHIL <TD> 9828211044 </TBODY>

<TFOOT>

<TR> <TD> THIS IS A TABLE FOOTER </TFOOT>

</TABLE>

<CENTER> <U>USING FONT ELEMENT </U></CENTER> <P>

<FONT FACE=IMPACT SIZE="6" COLOR=MAROON> I </FONT> NDIA IS MY COUNTRY <P>

THE GRASS IS <FONT FACE=BROADWAY SIZE="7" COLOR=GREEN> GREEN </FONT>

AND SKY IS <FONT FACE=BROADWAY SIZE="7" COLOR=BLUE> BLUE </FONT>

</BODY>

</HTML>

19) <TABLE> : as seen in the above example of a table, a table is a grid of columns and rows. It has got many sub-elements as described below:

a. <CAPTION>: this sub-element is used to give a caption or title to the table.

b. <TH>: this sub-element is used to define the table‟s column headings. The data provided within this element appears „bold‟ and „centralized‟ automatically.

c. <TR>: this sub-element is used to start a new row for the table. Every <TR> starts a new row in the table.

d. <TD>: this sub-element specifies the value that will appear for a particular column. Every <TD>

will display the value under a new column.

e. <THEAD>: this sub-element is used to define a set of header rows.

i. There can be ONLY 1 <THEAD> in the table.

ii. Rows specified in <THEAD> will be repeated at the top of every page if the table spans more than one page.

f. <TBODY>: this sub-element contains the rows to be displayed in the table.

g. <TFOOT>: this sib-element is used to define a set of footer rows.

i. There can ONLY 1 <TFOOT> in the table.

ii. It must precede the <TBODY> (if any) element.

iii. Rows specified in <TFOOT> will be repeated at the bottom of every page if table spans more than one page.

Various attributes of the <Table> tag and its sub-elements:

 <TABLE>

o BORDER = n [ 0 is no border, 1 / 2 / 3 / …. SPECIFIES THE THICKNESS]

o BORDERCOLOR=color-name or color-code

o FRAME=above/below/border/box/hsides/lhs/rhs/void/vsides – allows you to choose which portion of the border will be displayed.

 above: displays top edge only

 below: displays bottom edge only

 border: displays all 4 sides(default)

 box: displays all 4 sides like border

 hsides: displays top and bottom edge only

 lhs: displays left edge only

 rhs: displays right edge only

 void: displays no border

 vsides: displays left and right edges

o RULES=all/cols/groups/none/rows - deals with inside border.

 all: displays all border

 cols: displays border within cells

 groups: displays border between all cell groups

 none: hides all interior borders.

 Rows: displays border between rows only

o CELLSPACING =in pixels – this is the amount of space between cells.

o CELLPADDING = in pixels - this is the amount of space between cell border and cell content.

o ALIGN=left/right/center

o BACKGROUND= the image file address o BGCOLOR= color code or color name o HEIGHT= in %age or pixels

o WIDTH=in %age or pixels o SUMMARY=

 <TD> Tag: its attributes will apply ONLY for a particular cell and its content.

o ALIGN=left/right/center - controls the horizontal alignment of the cell content.

o WIDTH= pixels or percentage - specifies the width of the cell o BACKGROUND= image file that will be set ONLY for a particular cell.

o BGCOLOR= color that will be set ONLY for a particular cell.

o ROWSPAN= the amount of row that a cell content will cover or span.

o COLSPAN= the amount of column that a cell content will cover or span

o VALIGN= top/middle/bottom - in cells that have span of more than one rows, data can be vertically aligned.

 <TR> tag and <TH> : its attributes are applied to the all the cells of a particular row.

o ALIGN= left/center/right

o WIDTH= in pixels or percentage

o BACKGROUND= image file for that particular row

o BGCOLOR=color code or color name for that particular row o VALIGN=top/middle/bottom

Table Example 2:

<html>

<head>

<title> My Page</title>

</head>

<body>

<table border=3 cellspacing=16 cellpadding=20 bgcolor=grey>

<caption>ABC Co.Sales </Caption>

<tr bgcolor=blue> <th>zone <th>qtr1 <th>qtr2

<tr> <td bgcolor=red> Delhi <td> 12133 <td>  

<tr> <td>Mumbai <td>1530 <td>1800

<tr> <td> jaipur <td> 10 <td>12

<tr> <td>jodhpur <td>1530 <td>1800

<tr> <td colspan =2 align=center> Bikaner <td>1400

<tr > <td rowspan=2 bgcolor=blue>Delhi <td> UP <td>MP

<tr> <td> Sikkim <td> HP

</table>

<a href="C:\Users\subhashv\Music\hindi songs\mysong1.mp3">Play</a>

</body>

</html>

20) <FORM> tag:

HTML Forms

Forms are a vital tool for the webmaster to receive information from the web surfer, such as: their name, email address, credit card, etc. A form will take input from the viewer and depending on your needs, you may store that data into a file, place an order, gather user statistics, register the person to your web forum, or maybe subscribe them to your weekly newsletter.

Text Fields

<input> has a few attributes that you should be aware of.

type - Determines what kind of input field it will be. Possible values are:

password: to create a password box text: to create text-field radio: to create radio button checkbox: to create check-box

name - Assigns a name to the given field so that you may reference it later.

size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.

maxlength - Dictates the maximum number of characters that can be entered.

HTML Code:

Name: <input type="text" size="10" maxlength="40" name="name"> <br />

Password: <input type="password" size="10" maxlength="10" name="password">

</form>

Input Forms:

Name:

Password:

in any way.

HTML Form Email

Now we will add the submit functionality to your form. Generally, the button should be the last item of your form and have its name attribute set to "Send" or "Submit". Name defines what the label of the button will be. Here is a list of important attributes of the submit:

In addition to adding the submit button, we must also add a destination for this information and specify how we want it to travel to that place. Adding the following attributes to your <form> will do just this.

method - We will only be using the post functionality of method, which sends the data without displaying any of the information to the visitor.

action - Specifies the URL to send the data to. We will be sending our information to a fake email address.

HTML Code:

Name: <input type="text" size="10" maxlength="40" name="name"> <br />

Password: <input type="password" size="10"

maxlength="10" name="password"><br />

</form>

Email Forms:

Name:

Password:

Send

Simply change the email address to your own and you will have set up your first functional form!

HTML Radio Buttons

Radio buttons are a popular form of interaction. You may have seen them on quizzes, questionnaires, and other web sites that give the user a multiple choice question. Below are a couple attributes you should know that relate to the radio button.

value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).

name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size. To group a set of radio buttons, their “name” attribute should have the same name.

HTML Code:

What kind of shirt are you wearing? <br />

Shade:

<input type="radio" name="shade" value="dark">Dark

<input type="radio" name="shade" value="light">Light <br />

Size:

<input type="radio" name="size" value="small">Small

<input type="radio" name="size" value="medium">Medium

<input type="radio" name="size" value="large">Large <br />

</form>

Radios:

What kind of shirt are you wearing?

Shade: Dark Light

Size: Small Medium Large

Email Myself

If you change the email address to your own and "Email Myself" then you should get an email with "shade=(choice) size=(choice)".

HTML Check Boxes

Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and value attributes behave the same as a radio button.

HTML Code:

Select your favorite cartoon characters.

<input type="checkbox" name="toon" value="Goofy">Goofy

<input type="checkbox" name="toon" value="Donald">Donald

<input type="checkbox" name="toon" value="Bugs">Bugs Bunny

<input type="checkbox" name="toon" value="Scoob">Scooby Doo

</form>

Check Boxes:

Select the 2 greatest toons.

Goofy Donald Bugs Bunny Scooby Doo Email Myself

HTML Drop Down Lists

Drop down menus are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user.

HTML Code:

College Degree?

<option>Choose One</option>

<option>Some High School</option>

<option>High School Degree</option>

<option>Some College</option>

<option>Bachelor's Degree</option>

<option>Doctorate</option>

</select>

</form>

Drop Down Lists:

Education? ^{Choose One} Email Yourself

HTML Selection Forms

Yet another type of form, a highlighted selection list. This form will post what the user highlights. Basically just another type of way to get input from the user.

The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.

HTML Code:

Musical Taste

<option value="metal/rock" >Metal/Rock</option>

<option value="classical" >Classical</option>

<option value="alternative" >Alternative</option>

<option value="oldies" >Oldies</option>

<option value="techno" >Techno</option>

</select>

</form>

Selection Forms:

Musical Taste Emo

Metal/Rock Hip Hop

Ska Email Yourself

HTML Text Areas

Text areas serve as an input field for viewers to place their own comments onto. Forums and the like use text areas to post what you type onto their site using scripts. For this form, the text area is used as a way to write comments to somebody.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and 20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values.

wrap=

"off"

"virtual"

"physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Off of course, turns off word wrapping within the text area. One ongoing line.

HTML Code:

Enter Comments Here

</textarea>

</form>

Text Area:

Enter Comments Here

In document 12 Ip Java Notes 1 (Page 55-64)