Web Technology Full Notes by Shasun

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.

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

INTRODUCTION TO HTML
What is HTML?
• HTML is the standard markup language for creating Web pages.

HTML TAGS & SECTIONS
• HTML elements are represented by tags

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.

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.

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.

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

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.

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

Style sheet Properties
Multiple Properties

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.

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.

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;
} }
}
Unit :2
• Introduction to JavaScript
• Advantage of JavaScript
• JavaScript Syntax
• Data type
• Variable
• Array
• Operator and Expression
• Looping Constructor
• Function
• Dialog box.

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.

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

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>

Data types

Variables

Array

Multi- dimensional Array

Operators

Expressions

Looping Constructor

Contd..
Reference: https://www.slideshare.net/martyhall/javascript-and-jquery-
programming-tutorial-basic-syntax-part-1-conditionals-loops-math-class-
embedding-javascript-in-html

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.

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

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.

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."

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.

Event Handling

Contd…

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
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

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

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");

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.

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

Built in Object

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
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

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

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.

. NET Structure
• ASP.NET is a web application framework developed and marketed

by Microsoft to allow programmers to build dynamic web sites.

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

Page event & Properties

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

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

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">

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.

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.

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" />

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" / >

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.

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>

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
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

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.
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

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)%>

Working with Data
OLEDB connection class

Command class
• The DbCommand object represents the command or a stored

procedure sent to the database from retrieving or manipulating data.

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.

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.

Advanced Issues - Email

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

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" %>

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

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.

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.

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.

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.

Web Technology Full Notes by Shasun

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Technology Full Notes by Shasun

Caricato da

Copyright:

Formati disponibili

SAE6B/SAZ6A

SAE6B/SAZ6A– WEB TECHNOLOGY 1

SAE6B/SAZ6A– WEB TECHNOLOGY 2

• The Internet is a network of computers spanning the globe. It is also

SAE6B/SAZ6A– WEB TECHNOLOGY 3

SAE6B/SAZ6A– WEB TECHNOLOGY 4

• HTML elements are represented by tags

SAE6B/SAZ6A– WEB TECHNOLOGY 5

SAE6B/SAZ6A– WEB TECHNOLOGY 6

SAE6B/SAZ6A– WEB TECHNOLOGY 7

SAE6B/SAZ6A– WEB TECHNOLOGY 8

HTML frames are used to divide your browser

• The <IMG> tag is used to embed graphics in HTML pages. It has no

SAE6B/SAZ6A– WEB TECHNOLOGY 9

SAE6B/SAZ6A– WEB TECHNOLOGY 10

• Open a Web page for editing in Design view.

SAE6B/SAZ6A– WEB TECHNOLOGY 11

SAE6B/SAZ6A– WEB TECHNOLOGY 12

SAE6B/SAZ6A– WEB TECHNOLOGY 13

• The display property is the most important CSS property for

SAE6B/SAZ6A– WEB TECHNOLOGY 14

SAE6B/SAZ6A– WEB TECHNOLOGY 16

SAE6B/SAZ6A– WEB TECHNOLOGY 17

SAE6B/SAZ6A– WEB TECHNOLOGY 18

SAE6B/SAZ6A– WEB TECHNOLOGY 19

SAE6B/SAZ6A– WEB TECHNOLOGY 20

SAE6B/SAZ6A– WEB TECHNOLOGY 21

SAE6B/SAZ6A– WEB TECHNOLOGY 22

SAE6B/SAZ6A– WEB TECHNOLOGY 23

SAE6B/SAZ6A– WEB TECHNOLOGY 24

SAE6B/SAZ6A– WEB TECHNOLOGY 25

SAE6B/SAZ6A– WEB TECHNOLOGY 26

SAE6B/SAZ6A– WEB TECHNOLOGY 27

SAE6B/SAZ6A– WEB TECHNOLOGY 28

PROMPT BOX ALERT BOX CONFIRM BOX

SAE6B/SAZ6A– WEB TECHNOLOGY 30

SAE6B/SAZ6A– WEB TECHNOLOGY 31

SAE6B/SAZ6A– WEB TECHNOLOGY 32

• The <object> tag defines an embedded object within an HTML

SAE6B/SAZ6A– WEB TECHNOLOGY 33

SAE6B/SAZ6A– WEB TECHNOLOGY 34

SAE6B/SAZ6A– WEB TECHNOLOGY 35

• Properties and Methods

SAE6B/SAZ6A– WEB TECHNOLOGY 37

SAE6B/SAZ6A– WEB TECHNOLOGY 38

SAE6B/SAZ6A– WEB TECHNOLOGY 39

• The JavaScript navigator object is used for browser detection. It

SAE6B/SAZ6A– WEB TECHNOLOGY 40

SAE6B/SAZ6A– WEB TECHNOLOGY 41

SAE6B/SAZ6A– WEB TECHNOLOGY 42

• All user-defined objects and built-in objects are descendants of an

SAE6B/SAZ6A– WEB TECHNOLOGY 44

SAE6B/SAZ6A– WEB TECHNOLOGY 45

SAE6B/SAZ6A– WEB TECHNOLOGY 46

• ASP.NET is a web application framework developed and marketed

SAE6B/SAZ6A– WEB TECHNOLOGY 47

SAE6B/SAZ6A– WEB TECHNOLOGY 48

SAE6B/SAZ6A– WEB TECHNOLOGY 49

SAE6B/SAZ6A– WEB TECHNOLOGY 50

• To make these elements programmatically accessible, you can

• consider the HTML input control: <input type="text" size="40">

• It could be converted to a server control, by adding the runat