Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

HTML Basics

Uploaded by

hartejpreet91
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views

HTML Basics

Uploaded by

hartejpreet91
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 84

HTML

1
Definitions

W W W – World Wide Web.

HTML – HyperText Markup Language – The Language of Web
Pages on the World Wide Web.
HTML is a text formatting language.

URL – Uniform Resource Locator.

Browser – A software program which is used to show web pages.

“Normal text” surrounded by bracketed tags(< >) that tell
browsers how to display web pages

Pages end with “.htm” or “.html”

Codes enclosed in brackets

Usually paired tags
<TITLE>My Web Page</TITLE>

Not case sensitive
<TITLE> = <title> = <TITLE>
2
Table Data and Table Header
Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2
Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>

3
Creating a Basic Starting Document

<HTML>
<HEAD>
<TITLE>Infiniti software solutions</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

4
5
Headings, <Hx> </Hx>


Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document.
H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.

Syntax
<Hx>content<Hx>

6
Headings, <Hx> </Hx>

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1> Heading 1
<H2> Heading 2 </H2>
Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>

7
Paragraphs, <P> </P>


The paragraph tags are used to define a
block of text as a paragraph. This HTML
element is one of the basic HTML tags
you should learn to use properly.


Example:-
<p>The contents of the paragraph.</p>

8
Break, <BR>


Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.

A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.

The <BR> element does not have a closing
tag.

9
Break, <BR>

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY> ….
</HTML>

10
Horizontal Rule, <HR>


The <HR> element causes the
browser to display a horizontal
line (rule) in your document.

<HR> does not use a closing
tag, </HR>.

11
Horizontal Rule, <HR>

Attribute Description Default


Value
SIZE Height of the rule in pixels 2 pixels

WIDTH Width of the rule in pixels or 100%


percentage of screen width

ALIGN Aligns the line (Left, Center, Center


Right)44444

COLOR Sets a color for the rule Not set


12
Horizontal Rule, <HR>

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY> Line 2
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
_________________
Line 2 <BR> Line 3
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>

13
Bold, Italic and other Character Formatting
Elements
 <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7 or as a
relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to
+4).
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g.,
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
 <PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in
a mono-spaced font. Spaces and line breaks are supported without
additional elements or special characters.

14
Bold, Italic and other Character
Formatting Elements
<P> <FONT SIZE=“+1”> One Size Larger
</FONT> - Normal –
One Size Larger - Normal – One
<FONT SIZE=“-1”> One Size Smaller
Size Smaller
</FONT> <BR>
Bold - italics – Underlined
<B> Bold</B> - <I> italics</I> - <U>
Underlined </U> - Colored
<FONT COLOR=“#FF0000”> Colored
</FONT> <BR> Emphasized - Strong
<EM> Emphasized</EM> - <STRONG>
Strong </STRONG> <BR>
<pre>
Text in a pre element
Text in a pre element
is displayed in a fixed-width is displayed in a fixed-width
font, and it preserves
both spaces and font, and it preserves
line breaks both spaces and
</pre>
line breaks

15
Alignment


Some elements have attributes for
alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules.

The Three alignment values are : LEFT,
RIGHT, CENTER.

<CENTER></CENTER> Will center
elements.

16
List Elements


HTML supplies several list elements. Most list elements
are composed of one or more <LI> (List Item) elements.

UL : Unordered List. Items in this list start with a list mark
such as a bullet. Browsers will usually change the list mark
in nested lists.
<UL>
<LI> List item1 …</LI>
<LI> List item2 …</LI>
</UL>

List item2 …

List item1 …
17
List Elements

You have the choice of three bullet types: disc(default), circle,
square.

These are controlled in Netscape Navigator by the “TYPE”
attribute for the <UL> element.

<UL TYPE=“square”>

<LI> List item …</LI>

<LI> List item …</LI>

<LI> List item …</LI>

</UL>

List item …

List item …

List item …

18
List Elements


OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1.List item …
2.List item …
3.List item

You have the choice of setting the TYPE Attribute to
one of five numbering styles.
19
List Elements

TYPE Numbering Styles

1 Arabic numbers 1,2,3, ……

a Lower alpha a, b, c, ……

A Upper alpha A, B, C, ……
20
List Elements


You can specify a starting number for an ordered
list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>

i. List item ...


ii. List item …

21
Images

 <IMG>This element defines a graphic image on the


page.
 Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
 Alternate Text (ALT): This is a text field that
describes an image or acts as a label. It is displayed
when they position the cursor over a graphic image.
 Alignment (ALIGN): This allows you to align the
image on your page.

22
Images


Width (WIDTH): is the width of the image in pixels.

Height (HEIGHT): is the height of the image in pixels.

Border (BORDER): is for a border around the image,
specified in pixels.

HSPACE: is for Horizontal Space on both sides of the
image specified in pixels. A setting of 5 will put 5
pixels of invisible space on both sides of the image.

VSPACE: is for Vertical Space on top and bottom of
the image specified in pixels. A setting of 5 will put 5
pixels of invisible space above and bellow the image.

23
Some Examples on images

1) <IMG SRC=“jordan.gif“ border=4>


2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a text that
goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast

24
HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start
and
the </A> indicates where the link ends. Everything
between
these two will work as a link.

2) The example below s hows how to make the


word
Here work as a link to yahoo.

Click <A HREF="http://www.yahoo.com">here</A>


to
go to yahoo.
25
Tables


The <TABLE></TABLE> element has four sub-
elements:

Table Row<TR></TR>.

Table Header <TH></TH>.

Table Data <TD></TD>.

Caption <CAPTION></CAPTION>.

The table row elements usually contain table
header elements or table data elements.

26
Tables

<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
27
Tables

28
Tables Attributes

BGColor: background colors in a table.

Width: you can specify the table width as an absolute number of pixels
or a percentage of the document width. You can set the width for the table
cells as well.

Border: You can choose a numerical value for the border width, which
specifies the border in pixels.

CellSpacing: Cell Spacing represents the space between cells and is
specified in pixels.

CellPadding: Cell Padding is the space between the cell border and the
cell contents and is specified in pixels.

Align: tables can have left, right, or center alignment.

29
Table Caption


A table caption allows you to specify a line of text
that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My
Table </CAPTION>


The Caption element has one attribute ALIGN
that can be either TOP (Above the table) or
BOTTOM (below the table).

30
Table Header


Table Data cells are represented by the
TD element. Cells can also be TH (Table
Header) elements which results in the
contents of the table header cells
appearing centered and in bold text.

31
Table Data and Table Header
Attributes

Colspan: Specifies how many cell columns of the table
this cell should span.

Rowspan: Specifies how many cell rows of the table this
cell should span.

Align: cell data can have left, right, or center alignment.

Valign: cell data can have top, middle, or bottom
alignment.

Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.

Height: You can specify the height as an absolute number
of pixels or a percentage of the document height.
32
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

33
Table Data and Table Header
Attributes

34
What will be the output?
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav
Links</TD><TD colspan=“2”>Feature Article</TD>
<TD rowspan=“2” width=“25%”>Linked
Ads</TD></TR>
<TR><TD width=“25%”>News Column 1 </TD> <TD
width=“25%”><News Column 2 </TD></TR>
</TABLE>

35
The Output

36
Block Elements


The block elements are div and span.

Div- Defines a section in a document (block-level).

Span- Defines a section in a document (inline).

The difference between span and div is that a span element is in-line and
usually used for a small chunk of HTML inside a line (such as inside a
paragraph) whereas a div (division) element is block-line (which is basically
equivalent to having a line-break before and after it) and used to group larger
chunks of code.
Examples:-
<div id="scissors">
<p>This is <span class="paper">crazy</span></p>
</div>

37
Forms

To insert a form we use the <FORM></FORM> tags. The rest of the form elements
must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION =”www.atyourprice.in/index.php”>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>

38
<FORM> element attributes

ACTION: is the URL of the program that is
going to accept the data from the form,
process it, and send a response back to the
browser.

METHOD: GET (default) or POST specifies
which HTTP method will be used to send the
form’s contents to the web server. The CGI
application should be written to accept the
data from either method.

NAME: is a form name used by JavaScripts.

TARGET: is the target frame where the
response page will show up.

39
Form Elements


Form elements have properties: Text
boxes, Password boxes,
Checkboxes, Option(Radio) buttons,
Submit, Reset, File, Hidden and
Image.

The properties are specified in the
TYPE Attribute of the HTML element
<INPUT></INPUT>.

40
Sami Ali

Al al-Bayt Univrsty

41
Text Box

Text boxes: Used to provide input fields for text, phone
numbers, dates, etc.
<INPUT TYPE= " TEXT " >
Browser will display
Textboxes use the following attributes:

TYPE: text.

SIZE: determines the size of the textbox in characters.
Default=20 characters.

MAXLENGHT : determines the maximum number of
characters that the field will accept.

NAME: is the name of the text box

VALUE: will display its contents as the default value.

42
Example on Text Box

<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following
bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>

43
Output

44
Password

Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Browser will display
Text typed in a password box is starred out in the browser
display.
Password boxes use the following attributes:

TYPE: password.

SIZE: determines the size of the textbox in characters.

MAXLENGHT: determines the maximum size of the password in
characters.

NAME: is the name of the variable

VALUE: is usually blank.

45
Example on Password Box

<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>

46
Output

47
Hidden

Hidden: Used to send data to the CGI application that
you don’t want the web surfer to see, change or have to
enter but is necessary for the application to process the
form correctly.
<INPUT TYPE=“HIDDEN”>
Nothing is displayed in the browser.
Hidden inputs have the following attributes:

TYPE: hidden.

NAME: is the name of hidden input

VALUE: is usually set a value .

48
Check Box

Check Box: Check boxes allow the users to select more
than one option.
<INPUT TYPE=“CHECKBOX”>
Browser will display

Checkboxes have the following attributes:



TYPE: checkbox.

CHECKED: is blank or CHECKED as the initial
status.

NAME: is the name of the variable to be sent to the
CGI application.

VALUE: is usually set to a value.

49
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language"
CHECKED><BR> English:<INPUT TYPE="CheckBox"
Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>
</BODY></HTML>

50
Output

51
Radio Button

Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Browser will display

Radio buttons have the following attributes:



TYPE: radio.

CHECKED: is blank or CHECKED as the initial
status. Only one radio button can be checked

NAME: is the name of the radio button.

VALUE: usually has a set value.

52
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
</BODY></HTML>

53
54
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED>
Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>

55
Output

56
Push Button


Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
Browser will display

Push Button has the following attributes:



TYPE: button.

NAME: is the name of the button to be used
in scripting.

VALUE: determines the text label on the button.

57
Submit Button


Submit: Every set of Form tags requires a Submit
button. This is the element causes the browser to send
the names and values of the other elements to the CGI
Application specified by the ACTION attribute of the
FORM element.
<INPUT TYPE=“SUBMIT”>
The browser will display
Submit has the following attributes:

TYPE: submit.

NAME: name of the submit button.

VALUE: determines the text label on the button,
usually Submit Query.
58
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

59
60
Reset Button


Reset: It is a good idea to include one of these
for each form where users are entering data. It
allows to clear all the input in the form.

<INPUT TYPE=“RESET”>


Browser will display

Reset buttons have the following attributes:

TYPE: reset.

VALUE: determines the text label on the
button, usually Reset.

61
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25
name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit
the data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
62
63
File

File Upload: You can use a file upload to allow upload files to
your web server.

<INPUT TYPE=“FILE”>

Browser will display

File Upload has the following attributes:

TYPE: file.

SIZE: is the size of the text box in characters.

NAME: is the name of the variable to be sent to the
CGI application.

MAXLENGHT: is the maximum size of the input in the
textbox in characters.

64
<BODY bgcolor=lightblue>
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>

<INPUT TYPE="File" name="myFile" size="30">

<INPUT TYPE="Submit" value="SubmitFile">


</form>
</BODY>

65
Other Elements used in Forms
<TEXTAREA></TEXTAREA>: is an element that
allows for free form text
entry.

Browser will display


Textarea has the following attributes:

NAME: is the name of the variable to be sent to the
CGI application.

ROWS: the number of rows to the textbox.

COLS: the number of columns to the textbox.

66
<BODY bgcolor=lightblue>
<form>
<TEXTAREA COLS=40 ROWS=20
Name="comments" >
From observing the apathy of those
about me during flag raising I
concluded that patriotism if not
actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih
</TEXTAREA>:
</form>
</BODY>
67
68
Other Elements used in Forms

The two following examples are
<SELECT></SELECT> elements, where the
attributes are set differently.
The Select elements attributes are:

NAME: is the name of the variable to be sent to
the CGI application.

SIZE: this sets the number of visible choices.

MULTIPLE: the presence of this attribute signifies
that the user can make multiple selections. By
default only one selection is allowed.

69
<BODY bgcolor=lightblue>
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
</BODY>
70
71
<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you have?
</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED>
Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM></BODY></HTML>

72
73
74
Form Element events


onclick: The onclick event occurs when the mouse is clicked over the element.The
onclick is applicable to button,radio button,check box,select

ondblclick: The ondblclick event is executed when the mouse device is double clicked
over the element. The ondblclick is applicable to button

onmousedown: The onmousedown is triggered when the mouse is pressed over the
element.

onmouseup: The onmouseup event is fired when the pointing device is released over
the element.

onmouseover: The onmouseover event occurs when the mouse is moved onto the
element.

onmousemove: The onmousemove event is executed when the pointing device is
moved while it is over the element.

onmouseout: The onmouseout event is triggered when the mouse is moved away from
the element.

75
Form Element events

The above mouse events are applicable for select box,


images,radio button,check box.


onfocus: The onfocus event is fired when an element
receives focus either by the pointing device or by tabbing
navigation. Applicable for textbox, text area, select and
image.

onkeydown: The onkeydown event is triggered when a key
is pressed down while the element is focused. Applicable
for textbox, text area and button.

onkeyup: The onkeyup event is fired when a key is released
while the element is focused. Applicable for text box, text
area and button.
76
Form Element events


onkeypress: The onkeypress event is executed
when a key is pressed and released while the
element is focused. This attribute is exclusive of
those elements that can get the focus: text box,
select box, textarea and button.

onblur: The onblur event occurs when the element
losses focus either by the pointing device or by
tabbing navigation. Text box, text area .

77
Form Element events


onsubmit: The onsubmit event occurs when the form is
submitted. This attribute is exclusive of those elements that
can get the focus. This event is exclusive of the HTML
form.

onselect: The onselect event is triggered when a user
selects some text in the text field. Applicable for select
box.

onchange: The onchange event is fired when a control
losses the input focus and its value has been modified since
gaining focus. Applicable for select box.

78
Event examples


<textarea onblur="calOnBlur()" ></textarea>

<input type="text" onkeypress="calOnKeyPress()" >

<input type="text" onkeyup="calOnKeyUp()" >

<input type="radio" onclick="displayDate()">

<input type="button" ondbclick="displayDate()">Try it</button>

<select onchange="calOnChange()">
<option>php</option>
<option>html</option>
</select>

<form name="frm1" action="submit.htm" onsubmit="greeting()">
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

79
Iframes

An iframe is used to display a web page within a web page.
Syntax
<iframe>...</iframe>

Attribute Specifications to Adjust Appearance and Behavior
src="(URL of initial iframe content)"
name="(name of frame, required for targeting)"
longdesc="(link to long description)"
width=(frame width, % or pixels)
height=(frame height, % or pixels)
align=[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use
comma)
frameborder=[ 1 | 0 ] (frame border, default is 1)
marginwidth=(margin width, in pixels)
marginheight=(margin height, in pixels)
scrolling=[ yes | no | auto ] (ability to scroll)
80
iframe
An example is shown here:
<iframe name="inlineframe" src="www.atyourprice.net"
frameborder="0" scrolling="auto" width="500" height="400"
marginwidth="5" marginheight="5" ></iframe>

81
Frames


A framed page is actually made up of multiple HTML pages. There is
one HTML document that describes how to break up the single
browser window into multiple windowpanes. Each windowpane is
filled with an HTML document.

A <FRAMESET> element is placed in the html document before the
<BODY> element. The <FRAMESET> describes the amount of
screen real estate given to each windowpane by dividing the screen
into ROWS or COLS.

The <FRAMESET> will then contain <FRAME> elements, one per
division of the browser window.
Note: Because there is no BODY container, FRAMESET pages can't
have background images and background colors associated with
them.

82
Example

<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>
</HTML>

83
Example

Output:-

FRAMESET COLS=”23%, 77%”


FRAME FRAME

NAME= NAME=right_pane
left_pane SRC= Doc2.html
SRC=Doc1.
html

84

You might also like