SAE6B/SAZ6A
WEB TECHNOLOGY
UNIT: I - V
SAE6B/SAZ6A– WEB TECHNOLOGY 1
UNIT: 1
• Internet Basic
• Introduction to HTML
• List
• Creating Table
• Linking document
• Frames
• Graphics to HTML Doc
• Style sheet -Basics
• Add style to document
• Creating Style sheet rules
• Style sheet properties – Font - Text - List - Color and background
color
• Box - Display properties.
SAE6B/SAZ6A– WEB TECHNOLOGY 2
Internet
• The Internet is a network of computers spanning the globe. It is also
called the World Wide Web.
Reference: https://www.slideshare.net/mrebollo/introduction-to-internet
SAE6B/SAZ6A– WEB TECHNOLOGY 3
INTRODUCTION TO HTML
What is HTML?
• HTML is the standard markup language for creating Web pages.
SAE6B/SAZ6A– WEB TECHNOLOGY 4
HTML TAGS & SECTIONS
• HTML elements are represented by tags
SAE6B/SAZ6A– WEB TECHNOLOGY 5
LIST
•Lists must contain one or more list
elements.
•Lists may contain −
•<ul> − An unordered list. This will
list items using plain bullets.
•<ol> − An ordered list. This will use
different schemes of numbers to list
your items.
•<dl> − A definition list. This
arranges your items in the same way
as they are arranged in a dictionary.
SAE6B/SAZ6A– WEB TECHNOLOGY 6
Creating Tables in HTML
• The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.
SAE6B/SAZ6A– WEB TECHNOLOGY 7
Linking Documents
• A link is specified using HTML tag <a>,This tag is called anchor tag.
• Between the opening <a> tag and the closing </a> tag becomes part
of the link and a user can click that part to reach to the linked
document.
SAE6B/SAZ6A– WEB TECHNOLOGY 8
Frames & Graphics to HTML Doc
HTML frames are used to divide your browser
window into multiple sections where each section
can load a separate HTML document.
• The <IMG> tag is used to embed graphics in HTML pages. It has no
end tag
SAE6B/SAZ6A– WEB TECHNOLOGY 9
Style sheet
• What is CSS?
• CSS stands for Cascading Style Sheets.
• How do I create a CSS?
• Tags Defined. After you have written the HTML code save it andUse
the file extension .htm or .html. ...
• Create a CSS File. Now create a new Notepad document. Click
Start ->All Programs -> Notepad. ... Link the Stylesheet.
SAE6B/SAZ6A– WEB TECHNOLOGY 10
Creating & Adding style to document
• Open a Web page for editing in Design view.
• On the Format menu, choose Document Styles. The current
document appears at the top of the Document Styles window.
• Choose the Add Style Sheet icon at the top of the window. A
collapsed <STYLE> node appears in the Document Styles window.
In the HTML markup for the page, <STYLE></STYLE> tags are
inserted into the <HEAD> section of the document.
Syntax
SAE6B/SAZ6A– WEB TECHNOLOGY 11
Style sheet Properties
Multiple Properties
SAE6B/SAZ6A– WEB TECHNOLOGY 12
Text Box Color
• The color property is used to set the color of the text.
• If you define the color property, you must also define the
background-color.
• The text-align property is used to set the horizontal alignment of a
text.
SAE6B/SAZ6A– WEB TECHNOLOGY 13
Display Properties
• The display property is the most important CSS property for
controlling layout.
• The display property specifies if/how an element is displayed.
• Every HTML element has a default display value depending on what
type of element it is. The default display value for most elements is
block or inline.
SAE6B/SAZ6A– WEB TECHNOLOGY 14
Contd..
• Hide an Element - display:none or visibility:hidden?
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible
Hide
Remove Reset
h1.hidden { a{
h1.hidden {
visibility: hidden; display: block;
display: none;
} }
}
SAE6B/SAZ6A– WEB TECHNOLOGY 15
Unit :2
• Introduction to JavaScript
• Advantage of JavaScript
• JavaScript Syntax
• Data type
• Variable
• Array
• Operator and Expression
• Looping Constructor
• Function
• Dialog box.
SAE6B/SAZ6A– WEB TECHNOLOGY 16
Introduction to JavaScript
• JavaScript was developed by Brendan Eich in 1995, which
appeared in Netscape, a popular browser of that time.
• JavaScript is a very powerful client-side scripting language.
• you can make your webpage more lively and interactive, with the
help of JavaScript.
SAE6B/SAZ6A– WEB TECHNOLOGY 17
Advantages of JavaScript
• Less server interaction − validate user input before sending the page
• Immediate feedback to the visitors − no need to wait
• Increased interactivity − work with mouse as well as keyboard
• Richer interfaces − include drag-and-drop components and sliders
SAE6B/SAZ6A– WEB TECHNOLOGY 18
JavaScript Syntax
• JavaScript can be implemented using JavaScript statements that
are placed within the <script>... </script>.
<script language="javascript“ type="text/javascript">
JavaScript code
</script>
SAE6B/SAZ6A– WEB TECHNOLOGY 19
Data types
SAE6B/SAZ6A– WEB TECHNOLOGY 20
Variables
SAE6B/SAZ6A– WEB TECHNOLOGY 21
Array
SAE6B/SAZ6A– WEB TECHNOLOGY 22
Multi- dimensional Array
SAE6B/SAZ6A– WEB TECHNOLOGY 23
Operators
SAE6B/SAZ6A– WEB TECHNOLOGY 24
Expressions
SAE6B/SAZ6A– WEB TECHNOLOGY 25
Looping Constructor
SAE6B/SAZ6A– WEB TECHNOLOGY 26
Contd..
Reference: https://www.slideshare.net/martyhall/javascript-and-jquery-
programming-tutorial-basic-syntax-part-1-conditionals-loops-math-class-
embedding-javascript-in-html
SAE6B/SAZ6A– WEB TECHNOLOGY 27
Function
A function is a group of reusable code which can be called anywhere in your
program. This eliminates the need of writing the same code again and again.
SAE6B/SAZ6A– WEB TECHNOLOGY 28
SAE6B/SAZ6A– WEB TECHNOLOGY 29
Dialog box.
These dialog boxes can be used to raise and alert, or to get
confirmation on any input or to have a kind of input from the users.
PROMPT BOX ALERT BOX CONFIRM BOX
SAE6B/SAZ6A– WEB TECHNOLOGY 30
Unit :3
• Introduction to JavaScript document object model
• Object in HTML
• Event Handling
• Window Object
• Document object
• Browser Object
• Form Object
• Navigator object
• Screen object
• Build in Object
• User defined object
• Cookies.
SAE6B/SAZ6A– WEB TECHNOLOGY 31
Introduction to JavaScript
document object model
•The DOM is a W3C (World Wide
Web Consortium) standard.
•(DOM) is a platform and
language-neutral interface that
allows programs and scripts to
dynamically access and update
the content, structure, and style
of a document."
SAE6B/SAZ6A– WEB TECHNOLOGY 32
Object in HTML
• The <object> tag defines an embedded object within an HTML
document.
• Use this element to embed multimedia (like audio, video, Java
applets, ActiveX, PDF, and Flash) in your web pages.
SAE6B/SAZ6A– WEB TECHNOLOGY 33
Event Handling
SAE6B/SAZ6A– WEB TECHNOLOGY 34
Contd…
SAE6B/SAZ6A– WEB TECHNOLOGY 35
Window Object
• The window object is supported by all browsers. It represents the
browser's window.
• Global variables are properties & Global functions are methods
of the window object.
Reference: https://www.w3schools.com/js/js_window.asp
SAE6B/SAZ6A– WEB TECHNOLOGY 36
Document object
• Properties and Methods
• document.title - Sets or returns the title of the document
• document.URL-Returns the full URL of the HTML document
• document.write() - Writes HTML expressions or JS code to a document
SAE6B/SAZ6A– WEB TECHNOLOGY 37
Browser Object
• The Browser Object Model (BOM) is used to interact with the
browser.
• The default object of browser is window means you can call all
the functions of window by specifying window or directly.
• Ex: window.alert("hello javatpoint"); = alert("hello javatpoint");
Reference: https://www.javatpoint.com/browser-object-model
SAE6B/SAZ6A– WEB TECHNOLOGY 38
Form Object
• The Form object represents an HTML <form> element.
• You can create a <form> element by using the
document.createElement() method:
• Example : var x = document.createElement("FORM");
• Methods:
reset() - Resets a form;
submit() - Submits a form
• Collection:
elements Returns a collection of all elements in a form
• You can access a <form> element by using getElementById():
• Example: var x = document.getElementById("myForm");
SAE6B/SAZ6A– WEB TECHNOLOGY 39
Navigator object
• The JavaScript navigator object is used for browser detection. It
can be used to get browser information such as appName,
appCodeName, userAgent etc.
SAE6B/SAZ6A– WEB TECHNOLOGY 40
Screen object
• The window.screen object contains information about the user's
screen.The window.screen object can be written without the
window prefix.
• Properties:screen.width,screen.height,screen.availWidth,screen.av
ailHeight,screen.colorDepth,screen.pixelDepth
SAE6B/SAZ6A– WEB TECHNOLOGY 41
Built in Object
SAE6B/SAZ6A– WEB TECHNOLOGY 42
Built in Object
• Evaluates a string and returns a value. eval(Expression)
• Parses a string argument and returns an integer of the specified
radix or base. Syntax: parseInt(string) parseInt(string, radix)
• Parses a string argument and returns a floating point number.
Syntax: parseFloat(string)
• These global properties return a simple value; they have no
properties or methods.
• Infinity
• NaN
• undefined
• null literal
Reference:
https://developer.mozilla.org/ta/docs/Web/JavaScript/Reference/Gl
obal_Objects
SAE6B/SAZ6A– WEB TECHNOLOGY 43
User defined object
• All user-defined objects and built-in objects are descendants of an
object called Object.
Reference:http://www.fixoncloud.com/Home/LoginValidate/OnePr
oblemComplete_Detailed.php?problemid=682
SAE6B/SAZ6A– WEB TECHNOLOGY 44
Cookies.
• Cookies are data, stored in small text files, on your computer.
• When a user visits a web page, his name can be stored in a cookie.
• To Create a Cookie: document.cookie = "username=John Doe;
expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
• To Delete a Cookie: document.cookie = "username=;
expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Reference: https://www.w3schools.com/js/js_cookies.asp
SAE6B/SAZ6A– WEB TECHNOLOGY 45
Unit :4
• ASP. NET Language Structure
• Page Structure
• Page event
• Properties &Compiler Directives.
• HTML server controls
- Anchor, Tables, Forms, Files.
• Basic Web server Controls
- Label, Textbox, Button, Image, Links, Check & Radio button, Hyperlink.
• Data List Web Server Controls
- Check box list, Radio button list, Drop down list, List box,
• Data grid, Repeater.
SAE6B/SAZ6A– WEB TECHNOLOGY 46
. NET Structure
• ASP.NET is a web application framework developed and marketed
by Microsoft to allow programmers to build dynamic web sites.
SAE6B/SAZ6A– WEB TECHNOLOGY 47
Page Structure
The main components of an ASP.NET page
are:
• Directives - <%@ Page Language="C#" %>
• Code Declaration Blocks
• ASP.NET Controls
• Code Render Blocks
• Server-Side Comments
• Server-Side Include Directives
• Literal Text and HTML Tags.
Reference: http://www.ankitweblogic.com/asp/aspstructure.php
SAE6B/SAZ6A– WEB TECHNOLOGY 48
Page event & Properties
SAE6B/SAZ6A– WEB TECHNOLOGY 49
Compiler Directives.
• Directives specify settings that are used by the page and user-
control compilers when the compilers process ASP.NET Web Forms
pages (.aspx files) and user control (.ascx) files.
Reference: https://msdn.microsoft.com/en-us/library/t8syafc7.aspx
SAE6B/SAZ6A– WEB TECHNOLOGY 50
HTML server controls
• HTML elements within an ASP.NET file are treated as literal text
and you cannot reference them in server-side code.
• To make these elements programmatically accessible, you can
indicate that an HTML element should be treated as a server
control by adding the runat="server" attribute.
• consider the HTML input control: <input type="text" size="40">
• It could be converted to a server control, by adding the runat
and id attribute:
• <input type="text" id="testtext" size="40" runat="server">
Reference: https://msdn.microsoft.com/en-us/library/620b4fzf(v=vs.85).aspx
SAE6B/SAZ6A– WEB TECHNOLOGY 51
Anchor , Images, HyperLink Control
• Creates a server-side control that maps to the <a> HTML element and
allows you link to another Web page.
• <a id="anchor1" runat="server">
• The HyperLink control is like the HTML <a> element.
• <asp:HyperLink ID="HyperLink1" runat="server"> HyperLink
</asp:HyperLink>
• <asp:Image ID="Image1" runat="server">
SAE6B/SAZ6A– WEB TECHNOLOGY 52
Basic Web server Controls
• The Table Web server control enables you to create tables on
ASP.NET pages that you can program in server code.
• The TableRow and TableCell Web server controls provide a way
to display the content for the Table control.
SAE6B/SAZ6A– WEB TECHNOLOGY 53
Forms.
• Open Microsoft Visual Studio.
• On the File menu, select New Project. ...
• Select the Templates -> Visual C# -> Web templates group on the left.
• Choose the ASP.NET Web Application template in the center column.
• Name your project BasicWebApp and click the OK button.
SAE6B/SAZ6A– WEB TECHNOLOGY 54
Files
• Web site applications can contain different file types.
• By default, some are supported and managed by ASP.NET, and
others are supported and managed by the IIS server.
• asax - Application root.
• ascx - Application root or a subdirectory- A Web user control file
• ashx - A handler file
• asmx – An XML Web services file .
• aspx - An ASP.NET Web Forms page
• axd - A handler file that is used to manage Web site administration
requests,
• The basic syntax of FileUpload is:
<asp:FileUpload ID=
"Uploader" runat = "server" />
SAE6B/SAZ6A– WEB TECHNOLOGY 55
Label, Textbox, Button, Check &
Radio button
• Text box controls are typically used to accept input from the user.
• <asp:TextBox ID="txtstate" runat="server" ></asp:TextBox>
• <asp:Label ID="tstate" runat="server" ></asp:Label>
• Label controls provide an easy way to display text which can be changed
from one execution of a page to the next.
• <asp:CheckBox ID= "chkoption" runat= "Server"> </asp:CheckBox>
• <asp:RadioButton ID= "rdboption" runat= "Server"> </asp:
RadioButton>
• <asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Click" / >
SAE6B/SAZ6A– WEB TECHNOLOGY 56
Data List Web Server Controls
• The DataList Web server control displays rows of database
information in a customizable format.
• The format for displaying the data is defined in templates that you
create.
SAE6B/SAZ6A– WEB TECHNOLOGY 57
Basic Controls
• <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"> </asp:ListBox>
Basic syntax of drop-down list control:
• <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
• <asp:RadioButtonList ID="RadioButtonList1" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>
• <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>
SAE6B/SAZ6A– WEB TECHNOLOGY 58
Data Grid
• DataGrid control to display data on the web page. It was introduced
in .NET 1.0 and now has been deprecated.
• DataGrid is used to display data in scrollable grid. It requires data
source to populate data in the grid.
• Reference: https://www.youtube.com/watch?v=xb6t8gJm7Io
SAE6B/SAZ6A– WEB TECHNOLOGY 59
Repeater.
• The Repeater control is a container control that allows you to
create custom lists out of any data that is available to the page.
• We must provide the layout for the Repeater control by creating
templates.
• Reference: https://www.youtube.com/watch?v=bfDKLo2Ws-o
SAE6B/SAZ6A– WEB TECHNOLOGY 60
Unit :5
• Request and Response Objects
• Cookies
• Working with Data
– OLEDB connection class,
– command class,
– transaction class,
– data adaptor class,
– data set class
• Advanced Issues
- Email,
- Application Issues,
- Working with IIS and page Directives ,
- Error handling.
• Security
– Authentication,
– IP Address,
– Secure by SSL & Client Certificates.
SAE6B/SAZ6A– WEB TECHNOLOGY 61
Request and Response Objects
• The Request object retrieves the values that the client browser
passed to the server during an HTTP request.
• The Response object is used to send output to the client.
At the top level is the ASP.NET runtime which creates an '
Appdomain ' which in turn has ' HttpRuntime ' with 'request',
'response' and 'context' objects.
Reference: https://www.youtube.com/watch?v=6Tgb7OMNXD4
SAE6B/SAZ6A– WEB TECHNOLOGY 62
Cookies
• A cookie is often used to identify a user. It is a collections of Response
object: Cookies - Sets a cookie value.
• A cookie is a small file that the server embeds on the user's computer.
• The "Response.Cookies" command is used to create cookies.
• <% Response.Cookies("firstname")="Alex”%>
• The "Request.Cookies" command is used to retrieve a cookie value.
• <% fname=Request.Cookies("firstname")
response.write("Firstname=" & fname)%>
SAE6B/SAZ6A– WEB TECHNOLOGY 63
Working with Data
OLEDB connection class
SAE6B/SAZ6A– WEB TECHNOLOGY 64
Command class
• The DbCommand object represents the command or a stored
procedure sent to the database from retrieving or manipulating data.
SAE6B/SAZ6A– WEB TECHNOLOGY 65
DATA TRANSACTION CLASS
• The SQL statements used to create, commit, and roll back the
transaction can be entered manually when writing SQL scripts or
creating stored procedures, or through programmatic means using
either ADO.NET or the classes in the System.Transactions
namespace.
SAE6B/SAZ6A– WEB TECHNOLOGY 66
DATA ADAPTER CLASS &
DATA SET CLASS
• The dataset represents a subset of
the database.
• It does not have a continuous
connection to the database.
• To update the database a
reconnection is required.
• The DataSet contains DataTable
objects and DataRelation
objects.
• The DataAdapter object acts as a
mediator between the DataSet
object and the database.
• This helps the Dataset to contain
data from multiple databases or
other data source.
SAE6B/SAZ6A– WEB TECHNOLOGY 67
Advanced Issues - Email
SAE6B/SAZ6A– WEB TECHNOLOGY 68
Application Issues
• A group of ASP files that work
together to perform is called
an application. The object is
used to tie these files together.
• Synchronization and
Locking
• Excessive or unnecessary
logging
• Code dependencies
• Underlying database
issues
• Underlying infrastructure
issues
SAE6B/SAZ6A– WEB TECHNOLOGY 69
Working with IIS and page Directives
• Defines page-specific (.aspx
file) attributes used by the
ASP.NET page parser and
compiler.
• <%@ Page attribute="value"
[attribute="value"...] %>
• <%@ Page Language="VB"
ContentType="text/xml" %>
• <%@ PreviousPageType
attribute="value"[attribute="v Press – Win+R->type inetmgr
alue" ...] %> Connectionpane->ApplnPools-
• <%@ Reference Page >.net ->IIS
="somepage.aspx" %>
SAE6B/SAZ6A– WEB TECHNOLOGY 70
Error handling.
• Error handling in ASP.NET has three aspects:
• Tracing - tracing the program execution at page level or application
level.
• Error handling - handling standard errors or custom errors at page level
or application level.
• Debugging - stepping through the program, setting break points to
analyze the code
SAE6B/SAZ6A– WEB TECHNOLOGY 71
Security - Authentication
• Authentication : It is the process of ensuring the user's identity and
authenticity. ASP.NET allows four types of authentications:
– Windows Authentication
– Forms Authentication
– Passport Authentication
– Custom Authentication
• Authorization : It is the process of defining and allotting specific roles
to specific users.
• Confidentiality : It involves encrypting the channel between the client
browser and the web server.
• Integrity : Ex: implementing digital signature.
SAE6B/SAZ6A– WEB TECHNOLOGY 72
IP ADDRESS
An Internet Protocol address (IP address) is a numerical label
assigned to each device (e.g., computer, printer) participating in a
computer network that uses the Internet Protocol for communication.
An IP address serves as:
•A name indicates what we seek.
•An address indicates where it is.
•A route indicates how to get there.”
There are two versions of IP address,
IPv4 contains IP address as 32 bit number,
IPv6 which takes 128 bit to store the IP Address.
SAE6B/SAZ6A– WEB TECHNOLOGY 73
Secure by SSL & Client Certificates.
• IIS Authentication: SSL
• The Secure Socket Layer or SSL is the protocol used to ensure a
secure connection.
• With SSL enabled, the browser encrypts all data sent to the server
and decrypts all data coming from the server.
• At the same time, the server encrypts and decrypts all data to and
from browser.
• The URL for a secure connection starts with HTTPS instead of HTTP.
A small lock is displayed by a browser using a secure connection.
• By doing this, the server authenticates itself by sending its digital
certificate.
SAE6B/SAZ6A– WEB TECHNOLOGY 74
Contd..
• To use the SSL, you need to buy a digital secure certificate from a
trusted Certification Authority (CA) and install it in the web server.
Some of the trusted and reputed certification authorities are:
• www.verisign.com
• www.geotrust.com
• www.thawte.com
• SSL is built into all major browsers and servers. To enable SSL, you
need to install the digital certificate.
• The strength depends upon the length of the key generated during
encryption.
• More the length, more secure is the certificate, hence the
connection.
SAE6B/SAZ6A– WEB TECHNOLOGY 75
