Plus Two Computer Science Notes Chapter 4 Web Technology

by

Kerala State Board New Syllabus Plus Two Computer Science Notes Chapter 4 Web Technology.

Kerala Plus Two Computer Science Notes Chapter 4 Web Technology

  • Website – It is a collection of web pages contained text and multimedia(image, audio, video, graphics, animation etc) files.
  • A webpage is created by HTML tags
  • The first web page of a website is known as the home page.
  • www means world wide web.
  • Portals-Rediff, Hotmail, Yahoo, etc are called portals from which the user can do multiple activities.

Communication On The Web

Following are the steps happened in between user’s ’ click and the page being displayed

  • The browser determines the URL selected.
  • The browser asks the DNS for URLS corresponding IP address (Numeric address)
  • The DNS returns the address to the browser.
  • The browser makes a TCP connection using the ‘ IP address.
  • Then it sends a GET request for the required file to the server.
  • The server collects the file and send it back to the browser.
  • The TCP connection is released.
  • The text and the images in the web pages are displayed in the browser.

Client to web server communication

This communication is earned out between client to the web server (shopping site). The technology used to protect data that are transferred from client to web server is HTTPS (HyperText Transfer Protocol Secure). This encrypts user name, password etc. and sent to the server. HTTPS works using Secure Sockets Layer (SSL) ensures privacy as well as prevents it from unauthorised access (changes) from other web sites.

Following are the steps ,

  • Browser requests a web page to the server.
  • The server returns its SSL certificate.
  • Browser checks the genuinity of the certificate by the authorised certification authority (Eg: Veri sign)
  • The certificate authority certifies whether it is valid or not.
  • If it is valid the browser encrypts the data and transmits. The certificate can be viewed by click on the lock symbol.

Web server to web server communication

This communication is usually carried out between web server (seller) to another web server (normally bank). Forthe safe transactions Digital certificate issued by third party web sites are used.

Payment gateway is a server (Computer) that acts as a bridge (interface) between merchant’s server and bank’s serverto transfer money.

Web Server Technologies

Webserver

A computer with high storage capacity, high speed and processing capabilities is called a web server.

Software ports

The computer is not a single unit. It consists of many components. The components are connected to the computer through various ports. Two types of ports Hardware and Software.
Hardware ports : Monitors are connected through VGA ports and the keyboard or mouse are connected through PS/2 ports.

Software ports: It is used to connect client computers to the server to access different types of services. For example HTTP, FTP, SMTP etc. Unique numbers are assigned to software ports to identify them. It is a 16 bit number followed by IP address.

Default Port No. Services
20 & 21
22
25
53
80
110
443		 File Transfer Protocol (FTP)
Secure shell (SSH)
Simple Mail Transfer Protocol (SMTP)
Domain Name System (DNS)
service Hypertext Transfer Protocol (HTTP)
Post Office Protocol (POP3)
HTTP Secure (HTTPS)

DNS servers

A DNS server is a powerful computer with networking software. It consists of domain names and their corresponding IP addresses. A string address is used to represent a website, it is familiar to the humans. The string address is mapped back to the numeric address using a Domain Name System (DNS). It may consists of 3 or 4 parts. The first part is www., the second part is website name, the third top level domain and the fourth geographical top level domain. .

eg-http://wwwsiic.kerala.gov.in / results.html.

http:- http means hyper text transfer protocol. It is a protocol used to transfer hypertext,

www:- World Wide Web. With an email address we can open our mail box from anywhere in the world, nic.kerala It is a unique name. It is the official website name of National Informatic Centre,

gov:- It is the top level domain. It means that it is a government organisation’s website,

in:- It is the geographical top level domain. It represents the country, in is used for India. results.htmlIt represents the file name.

Web Designing

Any text editor can be used for web designing. Besides that many software tools are available in the market to make the web pages more attractive and interactive, some of the popular softwares are Adobe dream weaver, Microsoft Expression web, Blue fish, Bootstrap etc.

Static And Dynamic Web Pages

Some pages are displaying same content(same text, images,etc) every time. Its content are not changing. This type of web pages are called static page. Conventional wep pages display static pages and has some limitations.

Advanced tools are used to create web pages dynamic, that means pages are more attractive and interactive. For this JavaScript, VBScript, ASP, JSP, PHP, etc are used.

Following are the differences

Static web pages Dynamic web pages
Content and layout is fixed Content and layout is changed frequently
Never use database Database is used
Run by browser It runs on the server and the result get back to the client(browser)
Easy to develop Not at all easy

Scripts

Scripts are small programs embedded in the HTML pages.
<SCRIPT> tag is used to write scripts

The attributes used are

  • Type-To specify the scripting language
  • Src-Specify the source file

Two types of scripts
1. Client scripts – These are scripts executed by the browser.
Eg: VB Script, Javascript etc.

2. Server scripts – These are scripts executed by the server.
Eg: ASP, JSP, PHP, Perl, etc.

  • The languages that are used to write scripts are known as scripting languages.

Scripting Languages

a. JavaScript: Java script(developed by Brendan Eich for the Netscape browser) is a platform /ncfepencfentscripting language. Means It does not require a particular browser. That is it runs on any browser hence it is mostly accepted scripting language.

Ajax : It is a technology to take data from the server and filled in the text boxes without refreshing (without reloading the entire page) the web page. Ajax is Asynchronous JavaScript and Extensible Mark up Language (XML). XML is an Extensible Mark up Language, it allows to create our own new tags. This technology uses JavaScript to perform this function. When we turned off JavaScript features in the browser, the Ajax application will not work.

b. VB Script: VB Script(developed by Microsoft) is a platform dependent scripting language. Means it requires a particular browser(MS Internet Explorer) to work that is why it is not widely accepted scripting language.

c. PHP (PHP Hypertext Preprocessor)

  • It is an open-source, general-purpose scripting language.
  • It is a server-side scripting language
  • Introduced by Rasmus Lerdorf
  • A PHP file with extension .php
  • It supports database programming the default DBMS is MySQL
  • It is platform-independent
  • PHP interpreter in Linux is LAMP(Linux, Apache, MySQL, PHP)

d. Active Server Pages (ASP)

  • ASP introduced by Microsoft
  • ASP stands for Active Server Page.
  • ASP’s are web pages that are embedded with dynamic contents, such as text.HTML tags and scripts.
  • An ASP file uses .asp extension.
  • In ASP, the script execute in the server and the effect will be sent back to the client computer.
  • Here a real time communication exists between the client and server.
  • ASP applications are very small.
  • The only server used is Microsoft Internet Information Server(IIS), hence it is platform dependant

e. Java Server Pages (JSP)

  • JSP introduced by Sun Micro System
  • JSP stands for Java Server Page.
  • An JSP file uses .jsp extension
  • It is platform-independent
  • It uses Apache Tomcat web server
  • JSP binds with Servlets(Servlets are Java codes run in Server to serve the client requests). ’

Cascading Style Sheet (Css)

It is a style sheet language used for specifying common format like colour of the text, font, size, etc. other than the HML codes. That is CSS file used to separate HTML content from its style.

It can be written in 3 ways as follows

  • Inline CSSInthebodysectionoftheHTMLfile
  • Embedded CSS In the head section of the HTML file
  • Linked CSS A separate file(external file, eg. bvm.css) with extension .css and can be linked in the web page

Code reusability(just like a function in C++) is the main advantage of CSS and can be used in all the pages in a website

  • HTML – Hyper Text Markup Language. Used to Create webpage.
  • Website is a collection of web pages.
  • It was developed by Tim Berners – Lee in 1980 at CERN.
  • Lynx, a text only browser for unix.
  • Mosaic it is a graphical browser.
  • Netscape Navigator, Microsoft Internet Explorer, Opera, Ice Weasel, Mozilla Firefox etc. are different browsers.
  • Java, C# are programming languages used forweb applications.
  • HTML f i les a re saved with .htm or. htm I.
  • Web browser is a piece of software used to view web pages.
  • Structure of an HTML Document
    <HTML>
    <HEAD>
    <TITLE>
    give title to the web page here
    </TITLE>
    </HEAD>
    <BODY>
    This is the body section.
    </BODY>
    </HTML>
  • Tags are keywords used to define the HTMLdocu- ment. Two types of tags Empty and container. Con- tainer tag has both opening and closing tag. But empty tag has opening tag only, no closing tag.
    Eg: empty tag:- <hr>, <br> etc., container tag:- <html>, </html>, etc.
  • Attributes are parameters used for providing additional information within a tag.
  • An HTML document has 2 sections. Head section and body section.

Attributes of <HTML> tag

1. Dir- This attribute specifies the direction of text displayed on the webpage, values are ltr(left to right), rtl(right to left)
2.. Lang- This attribute specifies the language values areEn(English), Hi(Hfndi), Ar(Arabic),etc Eg: <HTML dir=”ltr” lang=”Hi”>

  • Title tag is given in the head section.
  • Web page contents are given in the body section.
  • Attributes of Body tag. Bgcolor, Background, Text, Link, ALink, VLink, LeftMargin and Topmargin
  • Heading Tags(6 tags)
    <H1 >,<H2>,<H3>,<H4>,<H5> and <H6>.
    <H1> provides big heading and <H6> provides smallest.
  • <HR> is used to draw horizontal line. Its attributes are size, width, noshade and color.
  • <BR> is used to break a line.
  • Six Heading tags are used in HTML <H1 > to <H6>.
  • <B> to make the content Bold.
  • <l> to make the content in Italics.
  • <U> to underline the content. .
  • <S> and <STRIKE> – These two are used for striking out the text
  • <BIG> To make the text size bigger than the normal text
  • <SMALL> To make the size smaller than the normal text.
  • <STRONG> The effect is same as <B> tag. That is to emphasize a block of text
  • <EM> -The effect is same as <i> tag
  • <SUB>- create a subscript
  • <SUP> create a superscript
  • <BLOCKQUOTE>
    It is used to give indentation(giving leading space to a line)
  • <Q> It is used to give text within double quotes
  • <PRE> (Pre formatted text) – This tag is Used to display the content as we entered in the text editor.
  • <ADDRESS> This tag is used td provide information of the author or owner.
  • <MARQUEE> This tag is used to scroll a text or image vertically or horizontally.

Attributes of <MARQUEE>

  • Height – Sets the height of the Marquee text
  • Width – Sets the width of the Marquee text
  • Direction – Specifies the scrolling direction of the text such as up, down, left or right
  • Behavior- Specifies the type such as Scroll, Slide(Scroll and stop), and altemate(to and fro). <marquee behavior=”scroll” scroll amount-‘100″> hello</marquee>
    <marquee behavioF”slide” scrollamount-‘100H> hello</marquee>
    <marquee behavior=”attemate” scrollamount= “100”>hello</marquee>
  • Scroll delay- Specifies the time delay in seconds between each jump.
  • scroll amount- Specifies the speed of the text
  • loop- This specifies the number of times the marquee scroll. Default infinite.
  • bg color-Specifies the background colour.
  • Hspace – Specifies horizontal space around the marquee
  • Vspace – Specifies vertical space around the marquee
  • <Div> – Used to define a section or a block of text with same format.

Attributes

  • align – Sets the horizontal alignment. Values are left, right, center and justify
  • Id – Used to give a unique name
  • Style – Specify a common style to the content for example
  • <Font> used to specify the font characteristics. Its attributes are size, face and color.

Special Characters

Character Entity Description
&nbsp; Non-breakable space
“ &quot; Double quotes
‘ &apos; Single quote
& &amp; Ampersand symbol
< &lt; Less than symbol
> &gt; Greater than symbol
© . &copy; Copyright symbol
TM &trade; Trademark symbol
® &reg; Registered symbol
  • <IMG> tag is used to insert an image. Its important attributes are align, height, width and alt.
  • Comments are given by using <!- and → symbols.