Basics of Programmed

Web Pages

IPT101 – Integrative Programming and Technologies I

 Programming Languages

Using HTML Server Controls

 types of controls for creating a user interface:
 HTML server controls
 Web Form controls
 System.Web.UI.HtmlControls
 defines the HTML controls
 runat directive is used to convert HTML elements
to HTML server controls
<input type=”text” id=”text1” value=”some text”
runat=”server”>

2
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Using HTML Server Controls

Control Name Usage Example Code

Button Commonly used to <input type=button

respond to Click events runat=server>
Reset Button Resets the values of all <input type=reset
HTML controls. runat=server>
Submit Button It automatically POSTs <input type=submit
the form data to the runat=server>
value of the action
attribute in the FORM
tag
Text Field Mainly used for single- <input type=text
line text input. runat=server>
Text Area Used for multiline text <input type=file
input. runat=server>
Password Field Used for password <input type=password
input. and Technologies runat=server> 3
IPT101 – Integrative Programming I
 Programming Languages

Control Name Usage Example Code

CheckBox Used for multiple <input type=checkbox

selections from a runat=server>
number of options.
<input type=checkbox
Radio Button Used for single selection <input type=radio
from a number of runat=server>
options.
Table Used for tabular <table runat=server></t
representation of data. able>
Image Displays an image on <img src="FileName"
an HTML form. runat=server>
ListBox Displays a list of items <select size=2
to the user. runat=server ></select>
Dropdown Used to select one <select><option>
value from a list of </option></selec t>
options. 4
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Web Server Controls

 run only on the server
 rendered differently to suit the capabilities of different
browsers
 provides upward and downward compatibility to all
types of browsers
 strongly-typed
 declared using an XML tag
 XML tag references the ASP namespace and
specifies information about the Web control
 supports enhanced versions of HTML

5
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Types of Web Server Controls

 Intrinsic Controls
 provide the basic functionality for user
interaction
 List Controls
 used for repetition when displaying any type of
list
 Validation Controls
 provide simple control validation
 Rich Controls
 simplify common Web page requirements
6
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
Label Displays a text None <asp:Label
on the HTML id=Label1
page runat="server
">Label</asp
:Label>
Hyperlink A hyperlink None <asp:HyperLi nk
control that id=HyperLink 1
responds to a runat="server
click event. ">HyperLink
</asp:Hyper
Link>
TextBox Used for single- TextChanged <asp:TextBox
line text input. id=TextBox1
runat="server
"></asp:Text
Box>

7
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
Button Commonly used Click, Command <asp:Button
to respond to id=Button1
Click events. runat="server"
Text="Button">
</asp:Button>
LinkButton A buttonlike Click, Command <asp:LinkButto n
hyperlink. id=LinkButton1
runat="server"
>LinkButton</
asp:LinkButton >
Image Button Displays a Click <asp:ImageBut
graphical image. ton
id=ImageButto
n1
runat="server"
></asp:ImageB
utton>
8
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
DropDown List A dropdown list SelectedIn <asp:DropDow
that can be data dexChange d nList
bounded to a id=DropDownLi
data source. st1
runat="server"
></asp:DropDo
wnList>
ListBox A list box control SelectedIn <asp:ListBox
that can be data dexChange d id=ListBox1
bounded to a runat="server"
data source ></asp:ListBox >
DataGrid A table with EditComma nd, <asp:DataGrid
data binding SelectedIn id=DataGrid1
dexChange d runat="server"
></asp:DataGri
d>

9
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
DataList Displays a non- SelectedInd <asp:DataList
tabular type of exChanged, id=DataList1
format for data. ItemCreate d, runat="server"><
ItemDataBo und / asp:DataList>
CheckBox Used for multiple CheckChan ged <asp:CheckBox
selections from a id=CheckBox1
number of runat="server"><
options. / asp:CheckBox>
CheckBox List Displays a group SelectedInd <asp:CheckBoxL
of check boxes. exChanged is t
id=CheckBoxList
1
runat="server"><
/
asp:CheckBoxLi
st >

10
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
Radio Button Used for single CheckChang ed <asp:RadioButto
selection from a n
number of id=RadioButton1
options. runat="server"><
/asp:RadioButto
n>
Radio Button List Displays a group SelectedInd <asp:RadioButto
of radio button. exChanged nList
id=RadioButtonL
ist1
runat="server"><
/asp:RadioButto
nList>
Image Displays an None <asp:Image
image on an id=Image1
HTML form runat="server"><
/asp:Image>
11
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Name Description Commonly Example Web

used Events Form Code
Panel Used to group None <asp:Panel
other controls id=Panel1
runat="server">
Panel</asp:Pa
nel>
Calendar Creates a VisibleMont <asp:Calendar
calendar. hChanged, id=Calendar1
DayRender runat="server">
</asp:Calendar
>
AdRotator Used to display list AdCreated <asp:AdRotator
of ads. id=AdRotator1
runat="server">
</asp:AdRotat
or>
Table Used for tabular None <asp:Table
representati on of id=Table1
data. runat="server">
12
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Using Validation Controls

 Validation control
 can be linked to another control at design time or run time
 RequiredFieldValidator
• used to test for required fields
 RangeValidatorControl
• used to test a range of input values
 RegularExpressionValidator
• used to test for values that match a particular expression
 CompareValidator
• used to compare the value of one input control to another or to
a fixed value

13
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Using Rich Controls

 AdRotator
 used to display advertisement banners on a
page that automatically changes the displayed
advertisement every time the page is refreshed or
revisited.
<body>
<form id=”WebForm1” method=”post” runat=”server”>
<asp:AdRotator id=”AdRotator1” runat=”server” width=”350px”
heigh=”40px” AdvertisementFile=”ads.xml”>
</asp:AdRotator> </form>
</body>

14
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Handling Events
 Events are created to handle these interactions.
 Init
• where page initialization takes place
 Load
• used to view state information or access controls
 PreRender
• occurs when the page is about to render its
contents to the Web browser
 Unload
• used to remove any resources created throughout
the request

15
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Control Events
 Examples:
 Click event
 TextChanged event
 SelectedIndexChanged event
Private Sub btnPost_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles btnPost.Click Response.Write(“Button Clicked”)
txtInput.AutoPostBack = True
End Sub
Public Sub txtInput_TextChanged(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles txtInput.TextChanged Response.Write(“Text
Changed”)
End Sub

16
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Demo: HTML and Web Server

Controls

17
IPT101 – Integrative Programming and Technologies I
 Programming Languages

Performance Activity

18
IPT101 – Integrative Programming and Technologies I