Scribd
Upload
2K views75 pages

Web Technology Full Notes by Shasun

This document provides an overview of key topics in web technology, including HTML, CSS, JavaScript, and the DOM. It covers basic concepts like creating lists and tables in HTML, adding styles with CSS, JavaScript data types and functions, and manipulating the DOM with JavaScript. The document is divided into multiple units that progress from HTML and CSS basics to more advanced JavaScript and DOM topics. It includes code examples and references to external resources for further explanation of concepts.

Uploaded by

Hemavathi J
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views75 pages

Web Technology Full Notes by Shasun

This document provides an overview of key topics in web technology, including HTML, CSS, JavaScript, and the DOM. It covers basic concepts like creating lists and tables in HTML, adding styles with CSS, JavaScript data types and functions, and manipulating the DOM with JavaScript. The document is divided into multiple units that progress from HTML and CSS basics to more advanced JavaScript and DOM topics. It includes code examples and references to external resources for further explanation of concepts.

Uploaded by

Hemavathi J
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 75

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

You might also like