4 - WEB TECHNOLOGY

Website
 Web page is a document available on World Wide Web.
 A web page contains huge information including text, graphics, audio, video and hyper links.
 Website is a collection of web pages.
 Web pages are developed with the help of HTML (Hyper Text Markup Language).

Communication on the web

 In the Internet, there are several types of communication like, accessing websites, sending e-mails,
etc.
 Web pages are accessed using HTTP protocol
Communication on the web can be classified as:

Communication on the web

Client to web server communication Web server to web server communication

1. Client to web server communication

 Here a user request service from a server and the server returns back the service to the client.

2. Web server to web server communication

 Server to Server communication takes place in e-commerce (online shopping).

 Here, Web server of online shopping website sends confidential information to bank web server
and vice versa.
 Payment gateway is a server that acts as a bridge between merchant server and bank server and
transfers money in an encrypted format whenever an online payment is made.

Web server
 A web server is a powerful computer that hosts websites.
 A web server enables us to deliver web pages or services like e-mail, blog, etc.
 A web server is a computer that process request and distributes information.
 A web server can have single or multiple processors, fast access RAM, high performance hard
disks, Ethernet cards that support fast communication.
 It consists of a server computer that runs a server operating system and a web server software.
 Eg. for web server software: Apache Server, Microsoft Internet Information Server (IIS)

Software ports
 Hardware ports are used to connect external devices like keyboard, mouse, monitor etc.
 Software ports are used to connect client computer to server computer.
 To distinguish the ports, the software ports are given unique numbers.
 It is a 16-bit number.

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

  Some of the commonly used ports and services are:
PORT NO SERVICE
20&21 FTP
22 SSH
25 SMTP
53 DNS
80 HTTP
110 POP3
443 HTTPS

DNS Server
 DNS Server used to resolve (Convert) domain name into IP.
 The process of translating domain name to IP address is called name resolution.
 The internet contains thousands of interconnected DNS servers.
 When you type a URL in your browser, the browser contacts the DNS server to find IP address.
The different steps used in resolving the IP address by DNS are as follows
a) The browser first searches the local memory for the corresponding IP address.
b) If it is not found it search the systems cache.
c) If it is not found it searches the DNS server of local ISP.
d) It searches from root till it find’s the IP address.
e) The ISP returns the IP address to the browser.
f) The browser connects using the IP address if not it displays error message

Web designing
 Web designing is the process of designing attractive web sites.
 Any text editor can be used to design web pages. Eg: notepad, geany, sublime text etc..

Static and dynamic web pages

Static web page Dynamic web page

 Content and layout is fixed.  Content and layout may change.
 Never use databases.  Uses database.
 Directly run on the browser..  Runs on the server.
 Easy to develop  requires programming skills.

Scripts
 Scripts are program codes written inside HTML pages.
 Script are written inside <SCRIPT> and </SCRIPT> tags.
 The commonly used scripting languages are java script,VB script,PHP etc

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

Types of scripting languages

scripts

1. Client side scripts 2. Server side scripts

Difference between Client side & Server side scripting

Client side scripting Server side scripting

 Executed in the client browser  Executed in the web server.
 Used for validation of client data.  Used to connect to databases.
 Browser dependent  Not browser dependent
 Users can block.  Users cannot block.
 Eg:- JavaScript, VB script.  Eg:- Perl, PHP, ASP, JSP, etc

Scripting languages
JavaScript

 It is a client side scripting language.

 It was developed by Netscape
 Works in every web browser.
 JavaScript file has the extension '.js'.

Ajax

 Ajax stands for Asynchronous JavaScript and Extensible Markup Language (XML).
 AJAX mainly consists of two languages Java Script and XML.
 It helps to update parts of a web page, without reloading the entire web page.

VB Script

 Developed by Microsoft.
 It is based on Visual Basic programming language
 It can be used as client side/server side scripting language

PHP

 PHP stands for 'PHP: Hypertext Preprocessor'.

 It is a server side open source scripting language
 It support database programming
 It runs on various platforms (Windows,Unix,Linux etc.)

Active Server Pages (ASP)

 It is a server-side scripting environment developed by Microsoft.

 Uses VBScript or JavaScript as scripting language.

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

  ASP files have the extension .asp.
 It provides support to a variety of databases.

Java Server Pages (JSP)

 It is a server side scripting language developed by Sun Microsystems.

 JSP files have the extension .jsp.

Cascading Style Sheet (CSS)

 It is a style sheet language used to define styles for WebPages. (color of the text, the style of fonts,
background images, etc.)
 CSS can be implemented in three different ways:
 Inline - the CSS style is applied to each tag.
 Embedded - CSS codes are placed within the <HEAD> tag.
 Linked CSS - external CSS file linked with the webpage.
 It reduces the size of the web page.
 Easy for maintenance.

HTML (Hyper Text Markup Language)

 HTML is used to create web pages
 The commands used in HTML are called tags.
 Tags begins with opening angle bracket(< >) and ends with closing angle bracket(</ > ).
 Tags in HTML are of two types, Empty tag and Container tags
 The additional information supplied with HTML tags are called attributes.
 Eg:- <BODY Bgcolor = "blue">
 Here, <BODY> is the tag, Bgcolor is the attribute, blue is the value of this attribute.
 HTML file is to be saved with an extension .html or .htm

Container tags and empty tags

 Tags that requires opening tag and closing tag is called container tag.
 Eg: <HTML> and </HTML>
 Tags that requires only opening tag is called empty tag.
 Eg: <BR>, <IMG>

The basic structure of an HTML document

<HTML>
<HEAD>
<TITLE> ....... title of web page......... </TITLE>
</HEAD>
<BODY>
...............contents of webpage..........................
</BODY>
</HTML>

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

<HTML> Tag
 An HTML document begins with <HTML> tag and ends with </HTML>.
 Attributes of HTML tag
 Lang:-The lang tag is used to specify the language used in the web page.
 Dir:-The Dir tag specifies the direction in which text should be displayed in web browser.

<HEAD> Tag
It is a container tag used to specify the details of a webpage like title, scripts, CSS etc

<TITLE> Tag
 The <TITLE> tag defines the title of the HTML document.

<BODY> Tag
 The <BODY> Tag defines the body section of HTML document.
 The main attributes of <BODY> tag are,
 1)Bgcolor:-It specifies the background color of the document.
 2)Background:-It specifies the background image for the document.
 3)Text:-It specifies the colour of Text displayed on the document.
 4)Link:-It specifies the colour of unvisited link.The default colour is blue.
 5)Alink:-It specifies the colour of active link.The default colour is green.
 6)Vlink:-It specifies the colour of visited link.The default colour is purple.
 7)Leftmargin: -Specifies the left margin from where the text in the body appears.
 8)Topmargin:-Specifies the top margin from where the text in the body appears.

Headings in HTML
 HTML supports headings from <H1> to <H6>.
 An important attributes of heading tags is Align.
 It has three values Left,Right,Center

<P>Tag
 The <P> tag is used to create paragraph
 Attributes of <P> tag is Align
 It has three value, left,right,center or justify.

<BR> Tag

 The <BR> tag is used to insert a line break.

<HR> Tag
 The <HR> tag is used to create a horizontal line in HTML.
 Attributes of <HR> Tag
 Size:-It specifies the thickness of the line.
 Width:-It specifies the width of the line.
 Align:-It specifies the alignment of the line(Left, Right and Center)
 Color:-It specifies the color of the ruler

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

<CENTER> Tag
 It is a container tag used to display contents to the center of webpage.
 The content can be text,image,table etc.

Text formatting tags

 The text formatting tag is used to format text in a web page.
 The important text formatting tags are, bold, italics and underline etc.
 <B> and <STRONG>: To make the text Bold face
 <I> and <EM> : To make the text italics
 <U> : To underline the text
 <S> and <STRIKE>: To strike through the text
 <BIG> : To make a text big sized
 <SMALL> : To make a text small sized
 <SUB> : To make the text subscripted
 <SUP>: To make the text superscripted

<PRE> Tag

 The <PRE> tag defines preformatted text

 It is a container Tag used to display a text exactly in its original form that we typed in Text editor
<ADDRESS> tag

 It is container tag used to display a postal address

 The information may include name, phone numner,e-mail, address etc.
 The contents enclosed in <address> tag will be displayed in Italics similar to <i> tags

<MARQUEE> Tag
 The <MARQUEE> tag defines the text that scrolls across the user’s display.
 Attributes of <MARQUEE> tag
 The important attributes of <MARQUEE> tag are,
 Height and Width:-It determines the size of marquee area.
 Hspace and Vspace:-It defines the space between marquee and the surrounding text.
 Scrollamount and Scrolldelay:-These attributes control the speed and smoothness of
scrolling marquee.
 Behaviour:-It defines the type of scrolling. It has three values scroll, slide and alternate.
 Loop:-It specifies how many times the marquee text must scroll. The default value is endless.
 Direction:-It specifies the direction of scroll.

<DIV> Tag
 The <DIV> tag defines a division or a section in an HTML document.
 Attributes of <DIV> tag is align,id,style

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com

<FONT> Tag
 The <FONT> tag allows to define size,colour,style of text.
 Attributes of <FONT> Tag is
 Face:-It specifies the font name.
 Size:-It specifies the font size.
 Color:- It defines color to the text.

HTML entities for Special Characters

 In addition to tags there are entities to represent special characters in Html

Character Entity Meaning

&nbsp; Blank Space
" &quot; Double Quotation Mark
< &it; Less than symbol
> &gt; Greater than symbol
© &copy; Copy Right Symbol
™ &trade; Trademark Symbol
® &reg; Registered Symbol
Comments in Html
 Comments are non executable statements in any programming language
 Comments help us to understand the code in a better way.
 In Html comments are placed in .<!-- -- >

<IMG> tag
 The <IMG> tag is used to insert image in a web page.
 Attributes of <IMG> tag are,
 Src:-It specifies the name of image.
 Align:-It controls alignment of the image (TOP,MIDDLE or BOTTOM).
 Width:-It specifies the width of the image.
 Height:-It specifies the height of the image.
 Alt:-It defines the text to be displayed if the browser cannot display the image.
 Vspace and Hspace:-Controls the vertical and horizontal spacing between images in the web
page

PREPARED BY MUHAMMAD RAYEES K A, HSST COMPUTER APPLICATION, WOHSS PINANGODE

Downloaded from hssreporter.com