Web Application Development

IT1305

WHAT IS INSIDE

• Introduction To Internet & WWW
• HTML
• CSS
• JAVASCRIPT
• XML 

What is the Internet ..

Introduction To Internet & WWW

What is Internet

• Simply it is giant network of networks
• No one owns 
• Decentralized by design
• Access via ISP
• Appears as Information Retrieval System

• Has unlimited no of services

What is Network

• Group of two or more computer systems linked together.

What is ISP ????

• is an organization
• provides services for accessing, using, or participating in the Internet
• Most of the time for monthly fee provide us

1.       a software package
2.       username
3.       password
4.       access phone number

What is NSP ????

• stands for network service provider (NSP)
• is a business or organization that sells bandwidth
• NSPs consists with telecommunication companies,ISP,cable TV operators

Services in Internet..

1.Communication

          E-mail

          Similar to mailing letters in the Internet

             Standard for Electronic Mail

             Pictures,Files can be sent as attachments

             Can be cc-ed or bcc-ed to multiple addresses

             Fast,Cheap & Easy

             Asynchronous method of Communication (Participants don't                    have to be online)

2.Data transfer

          File Sharing

          Copies files from one location to another via Internet

             Use FTP - File Transfer Protocol

3. World Wide Web

          Term Internet is not equal to WWW

             WWW is only one of hundreds of services used on Internet

             Basically shares documents,images

             Use HTTP - Hypertext Transfer Protocol

4.Distributed and Cloud Computing

What is Host ????

• Each Internet computer is called Host
• Has unique IP address
• So host is independent 
• Communicate Using TCP/IP protocol

Impact of the Internet

Internet is big revolution for the society

There is a huge impact in following key areas

• Government Sector - E Government
• Business Sector        - E Business/E Commerce
• Education Sector      - E Learning
• Entertainment Sector 

E-Government

*eGovernment is the application of ICT to improve the effectiveness and efficiency of government services 

*Digital interaction between

• government to governments (G2G)

• government to citizens (G2C)

• government to employees(G2E)

• government to businesses (G2B)

E-Government Classification..

• Informational Services

• Interactive Services

• Transactional Services

• Integrated Services

classification is determined by the maturity of the initiative

Informational Services

• the most basic service of eGovernment
• provide information in static form
• eg: Circulars,Newsletters,application Forms & Notices

Interactive Services

• this is the next level of maturity
• interactivity is provided in this level
• this service cannot be truly said as government transactions
• eg: sending e-mails , filling web forms

Transactional Services

• this is a fairly mature level of eGovernment
• bcoz real transactions between the government and its citizen take place here via ICT infrastructure 

Integrated Services

• in this level eGovernment is mature,stable and pervasive
• here, government internal system integrated with consumer external system

Rating schemes like Network Readiness Index & e-Readiness Ranking have been proposed to rate the potential for countries to exploit the opportunities offered by ICT..

 E Business/E Commerce

• Business that is conducted over the Internet using any of the applications that rely on the Internet (e-mail,shopping carts,web services)

• Online transaction 

• Buying and Selling

eCommerce is used in both non-profit and for-profit organizations

E-Commerce ???

the activity of buying and selling products & services on the web

eCommerce classification

1. classification by Participant
2. classification by Activities

Classification By Participant

Business to Consumer(B2C) - a company which sells goods to individuals

Business to Business(B2B) - a business selling goods or services to another company or nonprofit organization

Business to Government(B2G) - a company which sells goods to government agencies

Consumer to Consumer (C2C) -Consumers dealing with consumers in an online auction  

Classification By Activities

E Learning

• is the use of electronic educational technology in learning and teaching.
• is synonymous with online education, Information Communication Technology (ICT),Virtual Learning Environment(VLE)

Eg: Video tutorial,e books,forums

History of the Internet..

Early Years of the Internet..

LAN

m i n i c o m p u t e r 

LAN1

LAN

LAN3

LAN2

LAN5

LAN6

LAN7

WAN

Late 1960s

In 1960s

In 1970s

LAN ..............

~Local Area Network

~Interconnected computer systems within limited area

• Inexpensive minicomputers & easiness of LAN technologies  

~Emerged  because of:

~Can share hardware resources and software resources

~Hard to interconnect different LANs with different technologies

Eg : Network in human resource division in a company 

WAN ..............

~Wide Area Network

~Network - covers relatively large geographical area

~Emerged for reducing LAN's problems

Eg: A bank network with branches all over the country

~Problems with sharing resources and compatibility with different technologies

ARPANET ..............

~Wide Area Network (WAN) in ARPA to support US military operations

~ARPA - Advanced Research Project Agency

~Called backbone network

~Allows small networks to connect

~ARPA found a way to interconnect all machines from a large organization 

Internet standards makes this possible

Internet standard

Has two pieces 

1. The Internet Protocol (IP) - Provides basic communication
2. Transmission Control Protocol (TCP) -  Provides additional facilities

Formally called as "The TCP/IP Internet Protocol Suite"

Actually this consists two Protocols

TCP/IP work as unified system at the same time cooperately

What is Protocol

Set of rules (Agreement) for transmitting data between two devices

Internet Protocol (IP)

• Protocol for communication used in the Internet
• A computer must have IP software to use Internet services (Every Os has)
• Transmit data packets (datagrams)
• Based on Packet Switching 

Packet Switching

A protocol in which messages are divided into packets before they are sent over the Internet 

Each packet is transmitted individually

Multiple computers can transmit data without delay

Msg1

IP address of the Source

IP address of the destination

Data Packet Labling

What is Routing ????

• is the process of selecting best paths in a network when moving data packets from source to destination
• usually performed by the dedicated device called router
• most routing algorithms use only one network path at a time

routing table

Transmission Control Protocol

• Controls how information gets transmitted in packets over 
• the Internet
• Makes the Internet more reliable

Checks for the

• loss datagrams
• incoming datagrams and put in order
• duplicate datagrams

What is IP Address ???

• Internet Protocol Address
• Each and every computer device has its own unique IP Address

Eg : 172.20.10.85

        2.233.209.35

IP versions

Internet protocol Version 4 (IPv4) 

• consists of 32 bits 
• IPv4 reserves some addresses for special purposes such as private networks or multicast address
• limits the address space to 4294967296 (2     ) possible unique addresses 
• represented in dot-decimal notation

32

Number format of dotted decimal notation

• X.X.X.X
• each part represents a group of 8 bits
• X can be 0 to 255 
• largest one 255.255.255.255 and smallest one 0.0.0.0

Everybody in Local Network

Same computer

Internet protocol Version 6 (IPv6) 

• develop to ​deal with the long-anticipated problem of IPv4 address exhaustion

• consists of 128 bits

• address space provides the potential for a maximum of 2

• eg:FE80:0000:0000:0000:0202:B3FF:FE1E:8329

128​ 

IP address Classification..

can be classified as unicast,multicast,anycast,broadcast  

unicast - available in both IPv4 and IPv6

                  unicast address is associated with a single device or host

multicast - available in both IPv4 and IPv6 

                     information is addressed to a group of destination                                computers simultaneously

broadcast - only IPv4 is available  

                      refers to a method of transferring a message to all                                 recipients simultaneously

Assigning IP address..

Static IP Address -  assigned to a host permanently by fixed configuration of its hardware or software

Dynamic IP Address -  assigned to a host at the time of booting

Public IP Address..

• synonymous with a globally routable unicast IP address
• IPv4 and IPv6 addresses exclude private network and link-local addresses

 IPv4 and IPv6 define address ranges that are reserved for private networks and link-local addressing

What is Domain Names ???

Meaningfull alphabetic unique name for IP address

Format is 

• hostname.subDomain.top-level domain
• top-level domain = first level domain = TLD 
• add suffix to make them unique

Eg : www.vle.bit.lk        

hostname

subDomain

TLD

Domain Name System

In Internet communication must use IP address to send or receive datagrams

DNS is a service to translate domain name into an IP address

DNS stores information associated with domain names

What is ICANN ????

The Internet Corporation for Assigned Names and Numbers

ICANN is the authority coordinates the assignment of unique identifiers on the Internet

ICANN Scope

domain names,IP address,Protocol Port,Parameters

Back to History.........

ARPANET

NSFNET

In 1986

NSF (National Science Foundation) decided to fund Internet growth and TCP/IP technology and funded NSFNET as a cross country 56Kbps backbone

ARPANET was dissolved in 1990

Summary of the History

MiniCom

LAN

WAN

ARPANET

Series of reports

Project Documentation

describe the internet 

describe the TCP/IP it uses

rapid communication among the researchers

researchers to coordinate their activities

In 1960

Late 1960

In 1970

Late 1970

In 1983

In 1982

a prototype Internet was in place & the TCP/IP technology had been tested

U.S. military also started to use TCP/IP & chose the internet as its primary computer 
communication system

ARPA expanded the Internet to include all military sites connected to the ARPANET

Transfer experiment to useful network

In 1986

FUNDED NSFNET

In 1990

DISSOLVED ARPANET

Why do people use Internet ???

Client Server Computing ....

Who is Client ???

Who is Server ???

Simply, requester of services 

This can be a process ,application,computer or a workstation

Eg: e-mail client

Simply, provider of services

This can be a powerful computer,device or a process on a network

Eg: printer server, e mail server

Errors in Client Server Computing....

Why servers become unresponsive ???

Client Error Codes

OS crash on server running machine

Servers must always be ready to receive requests.. 

Sometimes servers become unresposive

Loses power to server computer or ... 

Server Error Codes

Format is 4XX

Eg : 404 - File Not Found

Format is 5XX

Eg : 500 - Internal Server Error , 503 - Service Unavailable

Users in the Internet....

Why would they use the Internet ????

For connecting with friends - Social Networking

Any individual may use Internet is called a user

For getting information related to academic and professional topics

Eg : Children,Student,Teachers,Researchers,Stockbrokers,

For communicating and sharing information

For Internet banking - Internet Transaction

For online marketing 

For making money

For entertainment

WWW and email are popular services given by Internet to users

Other useful services on Internet...

• Chat
• Video Conferencing
• Newsgroups
• FTP

Chat...

• Very famous activity done through the Internet
• Can be in private chat groups or an open chat group
• Chat is synchronous method of communication 
• Free service 

• Needs better band width and a faster connection
• Need special hardware - Eg: —video camera and a microphone
• Very famous in business meetings

Video Conferencing...

Newsgroups...

• Best option for discussion
• Provides an interface for discussions
• Can be considered as an electronic bulletin board
• Based on specific topic
• Functionally similar to forums
• Unlike e-mail
• Eg : Usenet

is a standard way to download and copy files from one location to 
another in the same or different machine

FTP...

FileZilla is free application software for file sharing

Information Infrastructure

What is Information Infrastructure ???

Technological and non-technological elements are linked together is called Information infrastructure

Rapid development in Infrastructures

Messenger by foot

Messenger rode on animals

Postal mail system

Telegraph

Modern telephone system

Internet with interactive services

Distributed and Cloud Computing

Distributed Computing...

a collection of independent computers in a network that appear to the users of the system as a single coherent system

Examples

• A word processing application(Google Doc) that consist editor component on one computer,a spell-checker object on another computer..
• WWW

Cloud Computing...

• is a type of computing that relies on sharing computing resources rather than having local servers or devices
• Google, Microsoft®, Amazon, Salesforce.com® and Tempora provide servers.
• Main services provided by Cloud computing are :

SAAS - Software as a Service

access Application Software and Databases in the cloud

PAAS - Platform as a service

enable customers to deploy in the cloud

IAAS - Infrastructure as a Service

refers to services providing computer processing power, storage space and network capacity, which enable customers to run software (including operating systems and applications) in the cloud

Types of Internet connection

Available Various Methods...

1. DialUp
2. DSL
3. ISDN
4. Through cable TV Network
5. Leased Line
6. Wi-Fi
7. Wi-Max

Why Various Methods are Available ????

1. Speed
2. Availability
3. Accessibility
4. Controllability
5. Affordability

Dial Up Connection

• Needs telephone line and a modem
• First need to dial service provider
• Inexpensive
• Higher traffic
• Very Slow (max range 50-60kbit/s)
• Not available continuously
• Can not use telephone line at the same time 

Leased Line Connection

• is dedicated to one Customer (controllability)
• available anytime (availability) 
• less traffic
• high speed
• higher cost

Broadband Connection

• is also dedicated line (controllability)
• lower cost than leased line
• is high data transmission rate
• high speed than dial-up access (minimum 256kbit/s) 
• popular consumer technologies - DSL and Cable Modem  

Cable Modem Connection

• uses a special type of modem
• transmits data signals over a cable television infrastructure
• use existing wiring
• cheaper than leased line
• provides continuous connectivity 
• faster than dial-up connection
• expensive than dial-up connection
• bandwidth and wiring are shared among customers

DSL Connection

• needs a DSL modem to connect
• uses the existing telephone lines
• doesn't affect normal telephone service
• download speed ranges from 128 to 24000 kbps
• there is two types :

1.  ADSL : Asymmetric Digital Subscriber Line - Upload speed is lower than the download speed 
2. —SDSL : Symmetric Digital Subscriber Line - Upload speed is equal to download speed                         

Wireless Connection

Wi-Fi,Wi-Max,Satellite are wireless technologies

Wi-Fi - Wireless Fidelity

• local area wireless technology
• uses radio waves
• the area covered by an access point is known as a "Hot Spot".
• a computer's wireless adapter(wireless transmitter) translates data into a radio signal and transmits it using an antenna
• a wireless router receives the signal and decodes it
• hot spot coverage has within 20m range

Wi-Max

• Wireless Interoperability for Microwave Access
• uses micro waves
• similar to Wi-Fi
• but higher speed and has 50km of wireless access

Satellite

• Needs a satellite dish antenna and a transceiver
• Upstream data is slower speed than the downstream data 
• speed 150 – 1200 kbps

Mobile Broadband

• is the marketing term for wireless Internet access through a mobile phone,tablet or other mobile devices
•  became available in 1991 as part of the second generation (2G) of mobile phone technology

Mobile Internet

Introduction and Browsing the Web

What is World Wide Web ???

• a service in the Internet
• allow users to view information on remote computers
• ​collection of web servers are known as the WWW

What is Web Server ???

• is a computer that deliver web pages
• every web server has a IP address and a domain name
• ​any computer can be turned into a web server by installing server software and connecting to the Internet
• Apache Tomcat is well-known web server from Apache foundation
• server software developed by:    Apache - free and openSource
•                                                           Microsoft - Commercial
•                                                           Oracle      - Commercial

What is Web Page ???

• a HTML document available in web server
• every web page has unique URL

What is Web Site ???

• is a collection of web pages
• usually resides in a single web server
• ​each site manage and maintain by single individual,company or organization
• each site contains a home page  
• there is a default page - displays when browser opening

History of WWW 

1960 - Ted Nelson

Idea on WWW

1968 - Dr. Douglas C. Engelbart

1st working hyper text system called NLS

1990 -Tim Berners-Lee

developed a hyper text based document retrieval system called WWW for the Internet

Browsing The Web

viewing the information on WWW is called web browsing 

Navigating..

• There are so many links in a web page
• moving from one link to another is called Navigating

What is Web Browser ???

• is a software application
• used to locate ,retrieve and display WWW
• understands the HTML
• mobile browsers available for mobile devices (micro/mini browser)

Eg : Google Chrome, Mozilla Firefox, Apple Safari - PC ,Lap Top

        Android Browser,Chrome,Opera mobile,Dolphin - for mobile device

What is URL ????

• abbreviation of Uniform Resource Locator
• global address of documents in WWW 
• give a unique identifier to a document
• it encodes the

                              protocol

                              location of the document (IP/domain name)

                              name of the document

Eg :           http://www.bit.lk/about.html

                  www.bit.lk 

                  http://www.bit.lk 

                  https://172.20.10.70/contact.html

What is URI ????

• Schemes specifying a concrete syntax and associated protocols define each URI
• The most common form of URI is the URL

• Stands for Uniform Resource Identifier
• used to identify a name of a resource

How Web Browser Works ????

• user request via URL
• browser sends a request to web server
• server  checks the document
• server sends response to the browser
• browser can detect any types of documents
• browser display it to the user

What is HyperLink ????

• an element in a document that links to another place of a document or different document
• mouse pointer shape is changed on the hyperLink
• color is changed

What is Bookmark ????

• facility for marking a page for future reference

What are Cookies ????

• a message given to the web browser by web server
• a piece of text stored by a user’s web browser
• consist of name-value pairs
• might have an expiration date
• user can manually delete cookies files 

WWW Documents

Displaying a web document

HTML 

• responsible for displaying web documents independent of OS, hardware and the web browser
• defines the structure of the web document 
• provides some guidelines for the web browsers
• provides simple syntax to write hyper text documents 
• case insensitive -    <HTML></HTML>        <hTMl><html/>
• has free format input - html ignores extra spaces, lines or tabs in the document

HTML Tags

• text in HTML document that does not display in web browser
• also referred as markups
• directives to the browser

HTML Page

<HTML>

    <HEAD></HEAD>

    <BODY></BODY>

<HTML>

has two main parts head and body

<HTML>
    <HEAD>
        <TITLE>Display in Title bar of the browser window</TITLE>
        <META charset="UTF-8">
        <META name="description" content="brief description of web page">
        <META name="keywords"    content="web,uscs,bit">
    </HEAD>

    <BODY>
    <BODY>
</HTML>

<meta> tag

• data about data ,always inside <head>
• not display but machine passable
• <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - HTML 4.01
• <meta charset="UTF-8"> - HTML 5

HTML Editors

An HTML Editor is a computer program for editing HTML.

There are various forms of HTML editors: text, object and WYSIWYG (what you see is what you get) editors.

Examples:

Microsoft FrontPage

• FrontPage is designed to hide the details of pages' HTML code from the user
• can be integrated with other Microsoft office products -from 1997 to 2003
• hides the HTML code from the author

BlueFish

• available for Linux

Adobe Dreamweaver

• opensource editor

Java

First released by Sun Microsystems in 1995

OOP language (Client Side and Server Side)

can also be used to build small application (applets) for use as part of web pages

applets make it possible for creating user interaction web pages

import java.applet.*;
import java.awt.*;

public class Main extends Applet{
   public void paint(Graphics g){
      g.drawString("Welcome in Java Applet.",40,20);
   }
}

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <div >
            <APPLET CODE="Main.class" WIDTH="800" HEIGHT="500"></APPLET>
        </div>
    </BODY>
</HTML>

JavaScript

• developed by Netscape
• an object oriented computer programming language (Scripting language)
• use to create interactive effects within web browsers
• JavaScript is embedded in HTML code

Scripting Language ??

web browser can read the text of the program and execute it

PHP

• stood for Personal Home Page
• now stands forHyperText PreProcessor
• openSource, serverside programming language
• generate dynamic HTML code
• can be embedded with HTML code

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php
echo "Hello World!";
?>

</body>
</html>

if requesting document has a php code web server first sends the PHP code through a PHP preprocessor

Server Side Scripting language

ActiveX

• ActiveX is a software framework created by Microsoft
• use for sharing information among appplications
• used COM(Component Object Model) and OLE (Object Linking and Embedding) technologies
• provides a method to embed applications in web pages
• make webpages dynamic
• this is not dependent needs another technology to invoke
• Eg: ActiveX enabled browsers - Internet Explorer

 allowing any arbitrary application to be executed in the browser may poses a security threat

Cascading Style Sheet

• define how the web page should be displayed by the web browser
• using different style sheet can be changed the web documents

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #b0c4de;
            }
        </style>
    </head>
    <body>
        <h1>My CSS web page!</h1>
        <p>Hello world!</p>
    </body>
</html>

style sheet can define the fonts, and the color scheme to be used in displaying a document

Dynamic HTML (DHTML)

collection of technologies used together to create interactive and animated

Static markp language

Client Side Scripting Language

presentation definition language

DOM

D                 H                   T                  M                      L

What is DOM ????

• stands for Document Object Model
• this is an API(Application Programming Interface )
• allows programs and scripts to dynamically access and update the content,structure,and style of a document
• it is separated in to different modules

1. Core DOM
2. XML DOM
3. HTML DOM

                                                      standard for how to get,change,add or                                                        delete a document

A method to access document link,anchors,forms and other objects

What is Helper Application ????

• Used in earlier version of Netscape and web browsers 
• needed because of web browsers compatible with different document types
• separate application program that invoked by the browser 
• Eg: JPEGView

• A more popular alternative to a helper application is a plug-in now
• Eg: Adobe flash player
•       Real Player

Automated WebSearch

What is Search Engine ????

• is a dedicated machine to retrieve web pages based on set of keywords
• enable users to search for documents on the World Wide Web
• accepts user's search queries and answers search queries

Ex:Google,Yahoo,Bing,Ask,Altavista,msn,mamma

Why Search Engine ????

• WWW is a collection of text documents and other resources, linked by hyperlinks and URLs
• difficult to scan and retrieve information from millions of web pages
• as most practical way is searching more than browsing

Browsing Vs Searching....

Browsing – you know the information that you are looking for

Searching – using few keywords going through the web content

How Search engine works ????

1. sending out a spider to fetch as many documents as possible.
2. another program, called an indexer, then reads these documents and creates an index based on the words contained in each document.
3. each search engine uses a proprietary algorithm to create its indices such that, ideally, only meaningful results are returned for each query

Who is Spider ????

acts as a web-client

program that automatically fetches web pages

crawls over the web

also called web crawler

Web Page

link1

link2

link3

link4

link5

link6

Index..

A record that can be identified uniquely

Web Directories...

• also known as link directory
• directory on the World Wide Web
• link other web sites and categorized those sites
• different web directories use different classification systems
• some web directories provide local Information 
• not a search engine

Eg: DMOZ,Google Directory,Yahoo Directory

How does we search...

• using single key word
• using search queries with multiple keywords and boolean operators
• with multiple key word method -

1.             user can find matching synonymous pages
2.             can figure out exactly what they want

• Ask.com allows users to pose a query as a question
• some search engines personalize the search result

Search Engine Types...

Search Engine

General Purpose SE

Tailor made SE

Meta SE

by combining multiple results from different search engines, Metasearch engine is able to enhance the user’s experience for retrieving information

mamma.com

http://en.wikipedia.org/wiki/List_of_search_engines

for specific tasks

scholor.google.com 

google,yahoo

Pay for Search...

• search engine generates income by advertising
• normally search engines do not charge from the user
• but, running a search engine is a costly operation

1.           needs to pay for human resources
2.           huge amount spend for infrastructure

E-mail

E-Mail Client...

having two types

1.  Web-based Email Client
2.  Stand Alone Email Client

• access email account by accessing web
• No need to install client software on client's computer and configure with the mail server
• Can access the email account online from any computer connected to the internet
• Let free access
• to signup have to submit your personal details.
• have to share lot adds.
• less security

Web-based Email Client

• access email account by using special client application
• Internet connection is not necessary

• have to install the e-mail client application on client's computer and configure it with mail server.

• usually cannot access email from other computers

Stand Alone Email Client

Eg:Outlook Express, Eudora, Thunderbird

Email Software

• email client communicate with email server to login,get mail status,send and receive email

• uses special protocols
• runs on top of TCP/IP
• common protocols are SMTP, POP and IMAP

http://en.wikipedia.org/wiki/AOL_Mail

SMTP...

• Simple Mail Transfer Protocol
• text based protocol
• handles outgoing messages
• decides the path message passing
• uses 25 port

POP...

• Post Office Protocol
• handles incoming messages
• POP delete messages from the service's computer 
• enable to send emails to any server using valid username and passwords
• open Internet Standard
• uses 110 port

IMAP...

• Internet message Access Protocol
• open Internet Standard
• keep email messages on the server after downloading a copy to client machine
• more modern than POP
• handles incoming messages
• uses for retrieving messages
• uses port 143

Mailing List...

• enables group of Internet users to communicate by using email
• can be an online newsletter, a public forum for open discussion, a moderated discussion, or a private meeting room

• managed by Mailing List Management (MLM) Programs
• an MLM has only one administrative address
• list address starts with the list name
• to subscribe to a mailing list, you will send a message to the administrative address
• many lists send you a confirmation message to which you must reply before you are added to the list
• E.g. LISTSERV, Listproc

Mailing List Types

Un-moderated lists

Moderated lists

One way lists

• —any subscriber(or member) is allowed to send an email to the mailing list for distribution to all subscribers
• —most common mailing list type

—Contains few members

—Have a moderator or set of moderators

Moderator Check the mail, for any inappropriate content before it is distributed to the subscribers

• —Contains vast number of members
• —one person or an organization can send email to the list

• Can send a mail to all subscribers by sending a message to the list address.
• In responding, can send a reply to only for the sender or to the whole list

Unsubscribe:

• need to make a request to the administrative address
• MLM program read the address header and remove from the list 

Controlling Emails

How to Manage E-mail Accounts ????

1. Using Filter Facility :

 view only some items that meet a certain criteria

2.Using Auto Reply Facility​

reply with the same message when you are unable to read mail

able to use @ ofc too for replying messages with same criterias

3.By Blocking Junk E-mails

• Junk E-mail is also called as E-mail Spam or Unsolicited Bulk Email
• sender has obtained your email address, either from a mailing list or newsgroup, or directly from a Web site
• the junk mail folder or spam folder is a tool used for filtering electronic junk e-mail out of a user's inbox
• —email programs can automatically move to a specified folder
• can be done based on the domain

      To avoid from spam

• —           Can use filters
• —           Be careful, when giving your email address
• —           Maintaining different email addresses

Collaborating via Internet

Collaborating via Internet

• various services are available for collaborating
• help people to work together 
• low cost
• more efficient
• audio /video programs need special requirements 

                     Ex: need high bandwidth

                           need special hardware 

•        microphone - capture sound
•       speaker - reproduce sounds
•       camera - record images
• high-speed processor - manipulate video & audio 

Reading a mail/ accessing web

Sending Audio

Sending Video

<

<

Ways of Collaborating..

• send voice and video to another person or group of people through the Internet

Ex: Video Conferencing

• view and edit a document simultaneously

Ex: Windows OneDrive

       Microsoft SharePoint

• listen to international radio programs

Ex:Public Radio International (PRI)

• watch video programs on the Internet

Ex:The Microsoft Network (msn)

Webcasting..

• webcasting is “broadcasting” over the Internet

• broadcasting is - distribution of audio and/or video via electronic medium 

• web broadcasting - webcasting

• transmission of audio and/or video data over the Internet for web users 

• refers to live streaming

• users can watch or listen via web browsers

• webcasters may include existing "TV/Radio Stations" and bunch of "Internet only stations"

• either be distributed live or on demand

• commonly used in business meetings , e-learning ,communication activities

• save time and money

• single content source to many simultaneous listeners/viewers

Pod-casting..

• method of distributing multimedia files over the Internet
• podcasting simply refers to the media files placed on the Internet
• playback on mobile devices and PCs
• Internet Podcasting - popular as iPod(Portable Media Player-PMP Device)

distribute music,photos,videos,games

Sending Fax Through The Internet..

How Fax Send Via Telephone System

• Fax short for facsimilie (make alike)
• Sometimes called telecopy or telefax
• Normally telephone number connected to a printer or other output device

Fax is the telephonic transmission of scanned printed material

Earlier used telephone line and fax modem for transferring fax

Internal Fax Modem

It is needed email-to-fax provider for sending Fax via Internet 

Faster and Efficient than telephone system bcoz the Internet is designed for carrying digital data 

No need external devices for converting data into digital data

http://www.wikihow.com/Email-to-Fax

Internet Telephone..

• Turn computer to a telephone
• Needed to install required software by both parties 
• Lower cost
• VoIP - Voice over IP - protocol is used for carrying voice signals over the network

Examples:

• Viber
• Facebook Messenger
• Skype
• Google Talk
• Google Voice

Whiteboard Service..

large interactive display that connects to a computer

User control the display using a pen,finger or stylus 

board mounted to a wall or floor stand

shared document service in the Internet

many could view and edit single document simaltaneously

useful when document modifications are done

TV on the Internet..

• Commonly used as IPTV - Internet Protocol Television

• television services are delivered using Internet Protocol Suite over LAN or the Internet

• can be watched on regular TV / Computer / Portable Device

• can be accessible freely and legally 
• not use cables,satellites or any terrestrial systems(antenna)

IPTV classified into three main groups:

1. Live Television - related to the current TV show
2. Time Shifted Television - replays TV show (broadcast day or before / short time)
3. Video On Demand - browse a catalog of videos-not related  to TV programming

Audio & Video Conferencing..

What is Audio Conferencing...??

• Audio--> Sounds            Conference-->Meeting
• similar to a conference call 
• refers to meetings held by people in different places
• use devices or tools such as conference bridge,computers,microphones,speakerphones
• tools allow sounds to be received and sent
• ​involve two or more parties 
• also called as teleconferencing , voice conferencing
• participanats only can hear what others saying

How TeleConferencing works...??

run software related to the program

com - 1

a participant enter all users

send a message to all participants

com1-msg

com3-msg

com2-msg

com4-msg

By accepting message all users  can join to the conference

Digital Signals 100101010

Sound Signal

Sound Signal

What is Video Conferencing..??

• enables to both hear and see

• a set of interactive telecommunication technology

• allow two-way simultaneous video & audio transmissions

• enables face to face interaction

• efficiency is higher when used with few people

• digital compression technology is used to transmit audio and video streams in real time

What is Digital Compression ??

• Normally media files are very large in storage
• process of reducing the size of a data file is referred to as data compression
• compressing encoded digitized audio or video files is called Digital Compressing

• Community can use audio conferencing , video conferencing or text based  chat with video suit their bandwith

• No bandwidth limitations to conference

• people can select any mode 

Radio Programs on the Internet..

• Internet radio service is a broadcasting service  
• Transmits real-time audio continuously via the Internet throughout the world
• Internet radio services offer various genres of music, news, sports and many more.
• Audio from many commercial radio stations is available on the Internet
• Many Internet radio stations are completely independent from traditional radio stations and broadcast only on the Internet
• Internet radio transmits over Radio Waves 

How Internet Radio Works ??

Instant Messaging - IM..

• Type of communications service
• Similar to create a private chat room with another individual
• communicate in real time via Internet 
• Easy collaboration as peer's availability is shown and online status is shown
• This is text based communication method

FTP Service..

• File Transfer Protocol service
• exchange large volume of data between computers connected to a network
• use to download or copy files from the Internet
• use TCP/IP protocol suite
• independent from the operating system
• provide service using command line and GUI (Graphical User Interface)
• mostly use command line
• to use -  need to turn on the FTP client or server services in the operating system​ 

Objectives of FTP

To provide a way for reliable and efficient data transfer between two computers

To enable indirect or implicit access of computers which are physically not at the same location

To shield a user from different file storage schemes used in different operating systems

To promote sharing of files over a network

How FTP Service Works ??

FTP SERVER

FTP CLIENT

Request files from FTP 

Holds files to be send through FTP

 FTP Server listens to the network for requests from a FTP client

• it is able to run both FTP client and server software on the same machine
• but is not what FTP is intended for typically

after invoking the FTP service it is presented with a prompt and waits for command

FTP service can be used only after establishing a connection between the FTP client and the FTP server computers

 must have a login identifier and a password to establish a connection to a server computer as well as for authentication purpose

Anonymous FTP

• a common login which is referred to as anonymous FTP

• allow general public to exchange files
• here,anything is accepted as the password

FTP Commands ..

• ftp - To execute the FTP client program.  Client will respond to this command by displaying the prompt ftp.
• open - Establish a connection with a remote computer.This will be prompted to enter a valid login and a password at this point.
• ascii - To turn to ASCII mode
• binary - To turn to binary mode
• get - Retrieve a file from the remote computer
• bye - Terminate the connection and exit from the FTP client program

• ls - List the files in the current directory of the server computer.

• cd - Change the current directory of the server computer.

• Icd - Change the current directory of the client computer.

• put - To copy a file from the client computer to the server computer.

• mget - To download multiple files from the server to the client computer.

• mput - To copy multiple files from the client computer to the server computer.

• delete - To delete a file from the server computer.

• mkdir - To Make a directory on the server computer.

Discussion Forums..

Remote Access to different computers..

Computer Viruses

Indications of presense of a computer virus

• Programs do not work as usual 
• Parts of the system become unstable 
• Unexpected error and warning messages 
• Invaded storage and memory areas 
• Corrupted and missing files 
• Unusual activities in the system 
• Computer is slowing down 
• Unreasonable reduction of hard disk space 
• System fails to boot unexpectedly 

Virus can spoil people money, time, resources,

irreplaceable data

International Computer Security Association - ICSA 

increase awareness of the need for computer security and to provide education about various security products and technologies

Computer Virus is also a type of computer program

Replicate itself/ make an exact copy itself

Virus Categories

Virus : harm within a computer

Trojan Horse : usually do not make copies of themselves

                            harmful to the computer when runs

                            distinguished as something useful

Worm : propagates itself across computers

              creating copies of itself in each computer

              infecting the entire network

Hoaxes : a false virus warning about a non-existent virus threat

What is Spyware

a malicious type computer program

collects information about the activities of users

sends these information to a third-party over the Internet

• It is designed specially for commercial purposes.

• It does not usually self-replicate.

• Track what types of websites a user is visiting

• pop-up advertisements (called adware)

• Alter the web browser’s settings to always redirect the users to commercial websites.

• More malicious spyware steels the secret information of users, such as, passwords or credit-card numbers

How does virus transmit ??

1. Activated viruses copy itself into uninfected programs -same computer or other computers in a network
2. through removable media
3. email attachments - major source

What are the precautions to get rid ??

• Install anti-virus and anti-spyware software

• Scan removable media before using.

• open files attached to an email from only an known,trustworthy source.

• When downloading files from the Internet, always ensure that the source is legitimate and reputable.

• maintain backups

http://www.icsalabs.com

Hacking and Password Security

• Basically authentication is gained using Username & Password
• User name is the unique identity of a particular user
• Password is a secret word

Methods of Password Hacking

Dictionary attack:The program passes every word in a dictionary to the authentication system.

Brute force attack:Each and every combination of an alphabet is tried.

Hard to try more than 5 characters

Sniffer program: Listen to all the traffic in a computer network and discovers passwords

Can be reduced by using encrypted login protocols

How to create a Good Password ??

• password with at least 6 characters
• mix of all lower and upper case characters, numbers, and punctuation marks 
• do not use any dictionary words
• use misspelled words

Example: Open@rci23

Network Firewall

What is Firewall ??

• is a system that enforces access control  policy
• sitting in-between the two networks
• firewall's configuration block one party while allowing other party 
• two types of firewalls 
•     Hardware Firewalls
•     Software Firewalls

Why Firewalls ??

• as large organizations need to communicate between outside world and the local network with higher security
• as unauthorized users steals valuable data
• as unauthorized users penetrate through the system

Hardware firewall 

Software FW : Windows Firewall,blackIce,Ip Table

Hardware Firewalls

• protect every machine on a local network
• available as a stand-alone product
• could be found in broadband routers
• technique is used to defeat threats -
• technique is called as packet Filtering/packet switching
• no need extra configuration
• hardware firewalls are non-effective for email worms or Trojan horses

Software Firewalls

• need to be installed on one's computer
• is ideal for individual and home users
• users can configure software firewall for type of patterns of external threats(hackers) or internal threats
• grants a best protection for email worms or Trojan horse programs

Secure Comunication

Why Authentication??

• information transmission in the Internet happens in plaintext format
• most of the time communication via internet is un-secure
• because of involvements of unauthorized third party
• they eavesdrop and modify original messages
• So efforts has been taken to make communication secure in a shared network, like Internet 

What is Authentication??

• Authentication is the process of correctly identifying the parties involved in a communication by each party
• basic authentication mechanism is based on user name and password pair

• This method is somewhat weak
• If somebody(unauthorized) is taken both username and password they

• Will gain all the information associated to the legitimate user

• Do transactions by suspending the legitimate users

Cient

Server

user

123456

user

123456

123456resu

user

123456

Weaknesses and limitations in normal information exchange system

eavesdropping-secretly listen

vulnerable intruders secrectly listen to the information

Encrypting and Decrypting methods..

methods use to overcome security vulnerable

hide data from unauthorized parties

Encryption : 

converting electronic data into another form(called cryptography) which cannot be easily understood by anyone except authorized parties.

Decryption:

process of converting encrypted data back into its original form..It is understandable

Using Digital Certificate methods and Encryption Decryption methods system has assure the security

Data Encryption

has two methods

1. Secret key Cryptography /Symmetric key/ Private Key Cryptography
2. Asymmetric key Cryptography /Public key Cryptography  

Secret Key Cryptography

PlainText

Cipher Text

PlainText

Public Key Cryptography

PlainText

Cipher Text

PlainText

Public Key

Private Key

Secret key Cryptography :

• has lot of disadvantages
• the parties have to keep the key secret
• key distribution is very difficult 

as same key use for encryption & decryption 

Public key Cryptography : 

• more effective  than  SKC
• owner can publish the public key
• recipient can use his private key to recover the information

Digital Certificate /Digital Id

• An attachment to an electronic message used for security purposes
• same as electronic passport
• allows a person,computer,or organization to exchange information securely over the Internet

• The trusted agency who issues digital certificates is called a Certification Authority or a CA

Example: VeriSign, SecureNet, Certsign

Details of the issuer,Details of the owner,

The validity period,

The public key of the owner,

The thumbprint contains in the certificate

Secure Protocols

SFTP - Secure File Transfer Program

• SSH+FTP
• is a network protocol
• provides file transfer and manipulation functionality
• use on an encrypted SSH transport stream

SSH  - Secure Shell

• provide confidentiality and integrity of data exchanged between computers
• allows establishing a secure channel between two computers
• typically use to login to a remote machine and execute commands
• allows transfer files between two computers using an associate protocol(SFTP)

cross-platform (exchange data between Mac,Win,Linux)

SSL - Secure Socket Layer

• security protocol
• developed by Netscape Communications Corporation
• provide security and privacy over the Internet
• protocol supports both server and client authentication and it is application independent
• SSL enabled communication can facilitate commercial and business Internet transactions
• http URL becomes https if website use SSL

S-HTTP - Secure HTTP

• transmitting data securely over the Internet
• designed to transmit individual messages securely

SET - Secure Electronic Transactions

• a security protocol
• jointly developed by Visa and MasterCard
• enable secure credit card transactions over the Internet
• relies on both symmetric and asymmetric key cryptography
• use digital certificates to ensure the identity of all

S/MIME - Secure / Multipurpose Internet Mail Extensions

• extension to SMTP protocol
• use to send binary data, such as, video, sound and pictures in an email message
• enables authentication,message integrity,non-repudiation,privacy and data security for e-mail transactions

non-repudiation -  ensure that a transferred message has been sent and received by the real parties

Ethics & Legal Regulations In Using The Internet

Ethics on the Internet is often referred to as net etiquette or netiquette

is a set of unwritten rules of decent use of the Internet

There is more opportunities to violate the right of privacy in the Internet

Crimes on the Interent

Identity theft - Using the Internet, critical information about a person can be collected (NIC NO,Credit Card No)

Online Extortion - domain name squatting

Organized crime associations manage these issues..

Legal Aspects of Internet Use

Intellectual Property Rule - include copyright law and preventing copying digital data

Software Licences,Warrenty

Fundamentals Of Hyper Text Markup Language

Basic Tags

<!DOCTYPE html> - web browser to understand the version of the HTML used in the document

<h1>to<h6> - Heading tag

<p> - Paragraph tag

<center> -Center tag: center of the page or any table cell

Empty Element Basic Tags

  -Non Breaking Space entity: Similar to space

Do not need opening and closing tags ,as there is nothing to go in between them

<hr /> -Horizontal line tag

<br /> -Line Break tag

Tag Vs Element

Tag - <></>

Element - <>xxxxxxxxxxxxxx</>

Eg: Paragraph Tag and Element Respectivly

               <P></P>          <P>BIT first year</P>

Nested HTML Elemets

One HTML element inside another HTML element

Eg : <P>I am<B>bold</B></P>

Inline Elements

•  occupies only the space bounded by the tags
•  normally displayed without line breaks

Example: <strong> <u> <td> <a> <img> <em>

Block Level Elements

• Use to create a block
• Browsers typically display the block-level element with a newline both before and after the element
• have many more attributes

Example:<h1><p><div><ul><ol><table>

HTML attributes

Extra Information of a tag

Every attribute has two parts.

Core attributes

id - <P id="para1"></P>

title -

<P title="My Para">This appears cursor comes onthe Element </P>

class - <P class="para"></P>

style - <P style="font-family:arial; color:red;">arial red para</P>

name

value

Eg: align="right"

Text Formatting

Text Formatting Tags

• <B>Bold text</B>
• <I>Italic Text<I>
• <U>Underline Text</U>
• <STRIKE>Strike Out Text</STRIKE>
• <SUP>Superscript Text</SUP>
• <SUB>Subscript Text</SUB>

<HTML>
    <BODY>
        <P>1<SUP>st</SUP>.<STRIKE>Most broad definition of </STRIKE><I>eLearning</I> covers 
            any form of <B>technology enhanced learning mechanism.</B>
        </P>
    </BODY>
</HTML>

Different Between <b><strong> and <i><em> tags

<html>
    <body>
        <p><b>This is test bold</b></p>
        <p><strong>This is test strong</strong></p>
        <p><i>This is test i-italic</i></p>
        <p><em>This is test em- emphasize</em></p>
    </body>
</html>

Normally browser reads <b><strong> && <i><em> as same

But future browsers not supporting <b> & <i> tags 

Instead of that they consider them as styles(css properties)

Eg: font-style:bold;

font-style:italic;

Paragraph Tag

• <P>paragraph tag </P>

<html>
	<body>
		<p style="color:#00ff00">
			Value added services refer to the high level services which run on 
			top of the basic protocols and services. eLearning is one of these services.
		</p>
		<p style="color:#0000ff">
			eLearning can be categorized along several axes: the underlying pedagogical assumptions, the content
			model employed, and the size, distribution and level of network access of the learners.
		</p>
	</body>
</html>

• paragraph tag insert a blank line before and after the paragraph

Horizontal Rules

<HR>Horizontal tag- display a border rule</HR> or <hr/> or <hr>

<html>
	<body>
		<p style="color:#00ff00">
			Value added services refer to the high level services which run on 
			top of the basic protocols and services. eLearning is one of these services.
		</p>
		<hr align="center" width="1000px" size="10">
		<P>1<SUP>st</SUP>.<STRIKE>Most broad definition of </STRIKE><I>eLearning</I> covers 
            any form of <B>technology enhanced learning mechanism.</B>
        </P>
	</body>
</html>

List

may be displayed with a blank line before and after the list

types: 1. Ordered List

            2. Unordered List

            3. Definition List

Ordered List

<html>
	<body>
		<ol>
			<li>Ordered List</li>
			<li>Unordered List</li>
			<li>Definition List</li>
		</ol>
	</body>
</html>

Unordered List

<html>
	<body>
		<ul>
			<li>Ordered List</li>
			<li>Unordered List</li>
			<li>Definition List</li>
		</ul>
	</body>
</html>

<html>
	<body>
		<dl>
			<dt>Ordered List</dt>
				<dd>can be numerical</dd>
				<dd>can be alphabetical</dd>
				<dd>"reversed" attribute is new in HTML5</dd>
			<dt>Unordered List</dt>
				<dd>bulleted list</dd>
				<dd>"compact" and "type" attributes are not supported in HTML5</dd>
			<dt>Definition List</dt>
				<dd>dl tag defines a description list</dd>
				<dd>dt define terms</dd>
				<dd>dd define description</dd>
		</dl>
	</body>
</html>

Definition List

<html>
	<body>
		<dl>
			<dt>Ordered List</dt>
				<dd>can be numerical</dd>
				<dd>can be alphabetical</dd>
				<dd>"reversed" attribute is new in HTML5</dd>
			<dt>Unordered List</dt>
				<dd>bulleted list</dd>
				<dd>"compact" and "type" attributes are not supported in HTML5</dd>
			<dt>Definition List</dt>
				<dd>dl tag defines a description list</dd>
				<dd>dt define terms</dd>
				<dd>dd define description</dd>
		</dl>
	</body>
</html>

Display Image

<img src="myProject/test.jpg" title="test" alt="test" height="20px" width="21px">

alt - Specifies the character strings to be displayed on a text based browser in place of the image (alternative text for image)

Image Source - Path of the Image

—Absolute path - 

Full Path

C:\myProject\test.jpg

Relative Path - relative to the HTML file folder [src="../../test.jpg"]

Web Supported Image Formats

• GIF (Graphics Interchanged Format)
• PNG (Portable Network Graphics)
• JPEG (Joint Photographic Experts Group)

Links

• hyperlink is an element, a text, or an image that you can click on, and move to another document

• defines with <a> (anchor) tag
• —attributes : href, target, name

External Links:

can be a another HTML page, URL ,e-mail address

<a href="index.html" target="_blank">Visit Our Home Page</a>
<a href="http://www.slides.com/hasinigamage" target="_self">This is Our Slides</a>
<a href="mailto:me@openarc.lk" target="_top">mail me:</a>

Internal Links:

 is specified with a relative URL (without http://www....)

<a href="#link1">second paragraph</a> describes the e-learning concepts.

Hyperlink's Target Properties

—_blank  - opens the new page in a new window/ tab

—_parent – opens the page in the parent frame

—_self  - opens the new page in the same window

_top- opens the linked document in the full body of the window

—frameName – can specify any valid frame name

Table

Creating a table..

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>No</td>
      <td>Foot</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ARPANET</td>
      <td></td>
    </tr>
    <tr>
      <td>NSFNET</td>
      <td></td>
    </tr>
  </tbody>
</table>

Colspan

<!DOCTYPE html>
<html>
<head>
<title>cols and rows span</title>
<style>
table, th, td {
    border: 1px solid black;height:100px;
     width:200px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>January</td>
    <td>Rs:2000</td>
  </tr>
  <tr>
    <td colspan="2">Sum:2000</td>
  </tr>
</table>
 
</body>
</html>

Rowspan

<!DOCTYPE html>
<html>
<head>
<title>Rowspan </title>
<style>
table, th, td {
    border: 1px solid black;
    height:100px;width:100px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Salary</th>
    <th>Salary for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>10000</td>
    <td rowspan="2">500</td>
  </tr>
  <tr>
    <td>February</td>
    <td>8000</td>
  </tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Cellpadding,cellspacing & caption </title>
<style>
table, th, td {
    border: 1px solid black;
    height:100px;width:100px;
}
</style>
</head>
<body>
<table cellpadding="30" cellspacing="10" >
    <caption>Monthly Salary Sheet</caption>
          <tr>
            <th>Month</th>
            <th>Salary</th>
            <th>Salary for holiday!</th>
          </tr>
          <tr>
            <td>January</td>
            <td>10000</td>
            <td rowspan="2">500</td>
          </tr>
          <tr>
            <td>February</td>
            <td>8000</td>
          </tr>
</table>

</body>
</html>

Cell padding is the distance between a cell’s content and its border

Cell Spacing is the distance between cells 

Caption,Cellpadding,Cellspacing,is Not Supported in HTML5

Color Theory

colors can be represented by

01. color names: aqua,black,blue,maroon

02. six digit hexadecimal :

* starts with #

* followed by three pairs of hexadecimal digits

* each pair defining the red, green, and blue values

#FFFFFF

GREEN

RED

BLUE

#000000 - Black

#ff0000   - Red

#00ff00   - Green

#0000ff   - Blue

#ffffff       - White

03. decimal

• R, G, and, B are decimal values of the red, green, and blue 
• value in the range of the 0-255 

rgb(255,255,255) 

RED

GREEN

BLUE

rgb(0,0,0)                -black

rgb(255,0,0)            -red

rgb(0,255,0)            -green

rgb(0,0,255)            -blue

rgb(255,255,255)    -white

04. RGBA decimal value

adds an alpha value - a

a, specifing the opacity of the color

a=0=tranparent , a=1= opaque

rgba(255,60,0,0.3)

alpha value

Most elements have two color properties such as foreground color and background color

<style>
    p{
        color:#ff0000;
        background-color:rgb(0,0,255);
    }
</style>

What is Text color of paragraph ??

What is background color of paragraph ??

Blue

Red

Forms

Provide UI components for data entry

HTML DOC

web server

user

Send

Submit

PHP

Java

Data

Data

Forms contain form elements.

Eg: input elements, checkboxes, radio buttons, submit buttons

•  <input> element has main attribute "type"
• form attribute action - Specifies an address (url) where to submit the form (default: the submitting page).

• method -Specifies the HTTP method used when submitting the form (default: GET).

GET   - method will send form data attaching to the URL

POST - method will send the data in the request body

<html>
	<body>
		<form action="myAction" method="GET">
			<input type="hidden" value="studentId"/>
			<input type="label" value="Full Name:">
			<input type="text" />
			<font color="#ff0000">*</font><br/>
			<input type="label" value="Address:">
			<input type="text" />
			<font color="#ff0000">*</font><br/>
			<input type="label" value="Gender" />
			<input type="radio" value="Male" checked="checked"/>Male
			<input type="radio" value="FeMale"/>FeMale<br/>
			<input type="label" value="BioGraphy"/>
			<input type="textarea" id="bio" name="bio" maxlength="100"><br/>
			<input type="label" value="Password:">
			<input type="password" /><font color="#ff0000">*</font><br/>
			<input type="label" value="Retype Password:">
			<input type="password" /><font color="#ff0000">*</font><br/><br/>
			<input type="submit" value="Sign-Up" style="float:center;">   
			<input type="checkbox" value=""/>Send me NewsLetters
		</form>
	</body>
</html>

Form - Example

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.jsp" method="get">
  <input list="connections" name="connections">
  <datalist id="connections">
    <option value="WI-FI">
    <option value="ADSL">
    <option value="WI-MAX">
  </datalist>
  <input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The datalist tag is not supported in 
Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>
</html>

<datalist> tag specifies a list of pre-defined options for an <input> element

DATALIST

New in HTML5

Frames

• <frameset> element holds one or more <frame>
• Facilitates to divide the page
• Each area has a separate web page
• Outdated and not recommended by W3C
• Frames are hard to code and are reasonably hard to manage
• Some platforms, for example mobile arena, does not support frames
• —Frames are not supported XHTML standards
• Can use frame name as the target name in hyperlinks
• frameset is identified as row and a frame is as a column
• The <noframes> element goes inside the <frameset> element

main.html

menu.html

frameEx.html

<!DOCTYPE html>
<html>
    <body bgcolor="#4a7d49">
        <a href="http://www.google.com" 
        target="main_page">Google</a>
        <br /><br />
        <a href="http://www.microsoft.com" 
        target="main_page">Microsoft</a>
        <br /><br />
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="300, *">
   <frame src="/UCSC/main.html" name="main_page" />
   <frame src="/UCSC/menu.html" name="menu_page" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

<html>
    <body bgcolor="#b5dcb3">
        <h3>This is main page and content 
        from any link will be displayed here.</h3>
    </body>
</html>

1

1

2

2

3

3

UCSC

What is Iframe ??

• Iframe - Inline Frame 
• The <iframe> tag specifies an inline frame

<iframe src="URL">    </iframe>

• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name attribute of the iframe

<iframe src="myIframe.html" name="myIframe" height="200" 
                width="20%" style="display:none;"></iframe>
<p>
    <a href="http://www.linkedin.com" target="myIframe">My Professional network</a>
</p>

Base Tag

<!DOCTYPE html>
<html>
    <head>
        <base href="http://www.w3schools.com/images/" target="_blank">
    </head>
<body>
    <p><img src="first.gif" width="24" height="39" alt="First Image"></p>
</body>
</html>

• Specify a default URL and a default target for all links on a page
• can be at maximum one <base> element in a document
•  must be inside the <head> element
• must have either an href attribute or a target attribute, or both

XHTML

EXtensible HyperText Markup Language

Follows XML rules on HTML

stricter and cleaner version of HTML

almost identical to HTML 4.01

—*  XHTML DOCTYPE is mandatory

—*  The XML namespace attribute in <html> is mandatory

—*  <html>, <head>, <title>, and <body> is mandatory

Elements: 

* must be properly nested

* must always be closed

* must be in lowercase

* must have one root element (html)

HTML5

• New version of HTML
• cooperation between the W3C and the Web Hypertext Application Technology Working Group (WHATWG)
• previous version of HTML is 4.01 (1999)

Removed tags :<applet>,<center>,<font>,<frame>,<frameset>,<noframes>,<tt>

new attributes to <input>element in HTML5

required,autocomplete,max,min,pattern

Eg:<input type="text" name="postal_code" pattern="[A-Za-z]{3}" title="postal code">

HTML5 <!DOCTYPE>

• declaration - <!DOCTYPE html>
• must be the very first thing in your HTML document, before the <html> tag
• is not an HTML tag but an instruction to the web browser
• HTML5 is not based on SGML, and therefore does not require a reference to a DTD about the HTML version  

SGML is a system for defining markup languages

The DTD(Document Type Definition) defines the syntax of markup constructs

Image Map..

• An image-map is an image with clickable areas
• The <map> tag is used to define a client-side image-map
• <map> element contains a number of <area> elements
• It is required name attribute of the <map> element 

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="50,50,50,50" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

The coordinates of the top-left corner of an area are 0,0

Adding Video to HTML File..

HTML5 <video> element specifies a standard way to embed a video in a web page

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
   Your browser does not support the video .
</video>

</body>
</html>

HTML5 <audio> element specifies a standard way to embed audio in a web page

Adding Audio to HTML File..

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

</body>
</html>

Cascading Style Sheet

CSS..

• used to describe the presentation of a document written in a markup language
• is a list of statements (rules) that define colors, fonts, layout, and other aspects to HTML elements
• number of codes can be reduced used for displaying characteristic
• allows multiple styles to be attached to a document at once
• formatting can be changed at once

<style>
  p    {color:green}
</style>

Defining a CSS

body {

      background-color : lightgrey ;

}

selector_expression - expression match with html element or tags

Ex: p,table,div,h1
 

element_property -which properties of 
the element the definition will affect

Ex:color,font-size,font-family

property_value(s) - how the property 
should affect

Ex:red,14px,verdana

Property Value Units..

~ Screen measures in pixels - px

~ Inches - in

~ Centimeters - cm

~ Millimeters - mm

~ Points - pt (1pt = 72in)

~ Picas - pc (1pc=12pt)

~ Realative to the font Size - em

~ Relative to the x-height - ex

~ Degrees - deg

~ Grads - grad

~ Radians - rad

~ Percentages - x%

~ hertz - Hz /kilohertz-kHz

http://www.w3schools.com/cssref/css_units.asp

CSS keywords & Color codes are also used as property values

Ex: thick, thin ,inherit ,#ff0000

Selectors..

is the definition of a formatting Style that can be applied to a HTML Element

has three parts

Element{property:value}

Selector Types

Element Selector 

• common style can be applied to an element at all time
• specify the element name to apply the style

Class Selector

• specify the MIME type of the style definition part
• Class name starts with a period (.)
• if apply CLASS, remove the period (.)

Id Selector

• Define and name a specific style, and apply it by specifying the name
• Unique - cannot be called twice

Grouped Selector

• grouping multiple elements
• separated by commas (,)
• common styles can be applied

Context Selector

• apply when multiple elements are specified simultaneously
• elements are separated by blank

<HTML>
    <BODY>
        <DIV >
            <P class="paraClz" ><B>My Paragraph</B></P>
            <P class="paraClz" id="firstPara">My Paragraph</P>
            <P class="paraClz" id="secondPara">My Paragraph</P>
            <P class="paraClz" id="thirdPara">My Paragraph</P>
        </DIV>
    </BODY>
</HTML>

HTML Example Code for Understanding CSS Selectors

<STYLE>
    P{color:#ffffff;}

    #firstPara{color:#000000;font-size:14px;}

    .paraClz{background-color:#00ff00;font-size:16px;}

    P,DIV{background-color:#00ff00;font-size:16px;border-style:solid;}

    P B{font-face:verdana;}
</STYLE>

Element Selector

ID Selector

Class Selector

Context Selector

Grouped Selector

Implementation Of CSS..

01.Inline Style Sheet

• can be used to apply unique style to single html page

• multiple styles can be defined, separated with semi-colon

<h1 style="background-color:#ffff00;margin-left:30px;"> My Inline CSS </h1>

02.Embedded Style Sheet

define the style within the head, and then apply the style in the body

<HEAD>
    <STYLE>
        h1{
            background-color:#ff0000;
            color:#ffffff;
            margin: 25px 50px 75px 100px;
        }
    </STYLE>
</HEAD>

03.Linking StyleSheet

• <LINK> tag uses to link external sheet between <head> tag

<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

test.css

h1 {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:13px;
  color: #000000;
  background-color: #e4e4f5;
  background-image: url('../images/button/normal.gif');
  border: medium none;
  cursor: hand;
  width:90px;
  height:22px;
}

• use external style sheet

External Style Sheet is a separated style sheet from HTML page saved with .css extension

What is Link Tag (<LINK>) ????

• defines a link between a document and an external resource
• <link> element is an empty element, it contains attributes only
• element goes only in the head section,but it can appear any number of times
• XHTML the <link> tag must be properly closed
• charset,rev,rev not supported in HTML5
• "sizes" attribute new for HTML5

04.Import Style Sheet

lets us attach a new CSS file from within CSS itself

<HEAD>
    <STYLE type="text/css">@ import "styleImport.css"</STYLE>
</HEAD>

Learn more on: http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

What is Inherit in CSS ??

• The inherit keyword specifies that a property should inherit its value from its parent element.
• The inherit keyword can be used for any CSS property, and on any HTML element.

What is Initial in CSS ??

• The initial keyword is used to set a CSS property to its default value.
• The initial keyword can be used for any CSS property, and on any HTML element.

<STYLE>
    div{
        color:#0000ff;
    }
        
    div.div1{
        color:inherit;
    }


    div.div2{
        color:initial;
    }

</STYLE>

What would be the color of div1 ???

Blue

What would be the color of div2 ???

Default color - Black

Text Properties

CSS text properties allow to control the appearance of text

p1{
    color:rgb(0,0,255);
    direction:ltr;
    line-height: 1%;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: overline;
    text-indent: 50px;
    white-space: nowrap;
    word-spacing: 30px;

}

List

List property:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker

ul{
   list-style: square url("test.gif");
   list-style-image:url('test.gif');
   list-style-position:inside;
   list-style-type:upper-roman;
}

Fonts

Fonts are styled collection of letters and symbols

Font Properties

font-size

font-size-adjust

font-style

font-variant

font-weight

font-strech

line-height

p{
    font: 15px arial, sans-serif;
}

P{
    font-style: italic;
    font-variant: small-caps;
    font-family: "Times New Roman", Georgia, Serif;
    font-stretch: expanded;
}

CSS Box Formatting

Margin

the space around elements

div{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

shorthand property

div{
    margin:20px 40px 50px 100px;
}

4

1

div{
    margin:25px;
}

For Equal Values

border

• CSS border properties allow you to specify the style, size, and color of an element's border.
• Style property is required

p.one {
    border-style: solid;
    border-width:5px;
    border-color: red;
}

p {
    border: thin solid red;
}

If we consider a single property value assigning sequence similar to the margin

p {
    border-style: dotted solid dashed double ;
}

Element Positioning

• CSS positioning properties allow to position an element
• can be positioned using the top, bottom, left, and right properties
• these properties will not work unless the position property is set first

Static - Default

Fixed - will not move even if the window is scrolled

Relative - relative to its normal position

Absolute - absolute position element is positioned relative to the first parent element

<!DOCTYPE html>
<html>
	<head>
		<title>Positioning</title>
		<style>
			#abs{
				position: absolute;
				left: 100px;
				top: 150px;	
			}
			#fixd{
				position: fixed;
				left: 100px;
			}
			#stic{
				position: static;
				
				top: 150px;	
			}
			#relatv{
				position: relative;
				left: 10px;
				
			}
			
		</style>
	</head>
<body>
	<p id="fixd">  fixed position   fixed position   fixed position   fixed position   fixed position   fixed position   fixed position</p>
	<p id="stic"> static position  static position  static position  static position  static position  static position </p>
	<p id="relatv">relative position relative position relative position relative position relative position </p>
	<p id="abs">absolute position absolute positionabsolute positionabsolute positionabsolute positionabsolute position</p>
	<p id="wop"> No positionNo positionNo positionNo positionNo positionNo positionNo positionNo position</p>

</body>
</html>

Without Positioning

With Positioning

Element Layers

• z-index property specifies the stack order of an element
• element with greater stack order is always in front of an element with a lower stack order
• z-index only works on positioned elements

<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of 1, it will be placed front of the text.</p>

</body>
</html>

Client-Side Programming

JavaScript

What is JavaScript ????

Client Side Scripting Language

is used mainly in webpages for making websites interactive

embedded directly into HTML pages using <style> tag

can use JavaScript without purchasing a license

consists with executable computer code

an interpreted language

JavaScript was created in 1996 by the Netscape team and released with Netscape 2.0.

WEB PAGES

Static Web Page

do not change the content or layout depending on user input

Dynamic Web Page

change the content or layout depending on user input or computing environment

• Client-side scripting languages
• Server-side scripting languages

Client-Side Scripting Languages

Client-side programming is the name for all of the programs which are run on the Client

• Make interactive webpages
• Make stuff happen dynamically on the web page
• ​Interact with temporary storage, and local storage (Cookies, local-storage)
• Send requests to the server, and retrieve data from it

Examples: 

• JavaScript
• JScript
• VBScript
• ActionScript
• AJAX

How to insert Script into HTML..

Using Script Tag

JavaScript can be placed in the <body> and the <head> sections of an HTML page

<script>
    function getCode(){
        alert("script can be placed within body and head");
    }
</script>

Use an External Script file

Embedding JavaScript

Data Types and Variables

Document Object Model

Event Handling & Form Validation

Operators

Functions & Procedures

Date Object

• works with dates
• A date consists of a year, a month, a day, an hour, a minute, a second, and milliseconds
• Date objects are created with the new Date() constructor
• There are 4 ways of initiating a date

• new Date()
• new Date(milliseconds)
• new Date(dateString)
• new Date(year, month,day,hours,minutes,seconds,milliseconds) 

<!--using   new Date()-->

<!DOCTYPE html>
<html>
    <body>
        <div id="displayDate"></div>
        <script>
            var day = new Date();
            document.getElementById("displayDate").innerHTML = day;
        </script>
    </body>
</html>

<!-- using new Date(milliseconds)-->

<script>
        var day = new Date(86400000);
        document.getElementById("displayDate").innerHTML = day;
</script>

<!--new Date(dateString)-->

<script>
    var day = new Date("February 08, 2015 10:30:00");
    document.getElementById("displayTime").innerHTML = day;
</script>

<!-- new Date(year,month,day,hours,minutes,seconds,milliseconds)-->

<script>
    var day = new Date(2015,2,8,10,35,30,4);
    document.getElementById("dispalyDate").innerHTML = day;
</script>

Methods in Date Object

getDay()

• Return the day of the week
• getDay() method returns the day of the week (from 0 to 6)
• Sunday is 0

<!DOCTYPE html>
<html>
    <body>
      <script>
         function myFunction() {
           var day = new Date();
           var today= day.getDay()
           document.write("This is the "+today+" day of this week");
         }
        myFunction();
      </script>     
            
    </body>
</html>

getDate()

• Return the day of the month
• getDate() method returns the day of the month (from 1 to 31) 

<!DOCTYPE html>
<html>
    <body>
      <script>
         function myFunction() {
           var day = new Date();
           var today= day.getDate()
           document.write("This is the "+today+" day of this month");
         }
        myFunction();
      </script>     
            
    </body>
</html>

getMonth()

• getMonth() method returns the month (from 0 to 11) 
• January is 0

<!DOCTYPE html>
<html>
    <body>
      <script>
         function myFunction() {
           var day = new Date();
           var mnth= day.getMonth()
           document.write("This is "+mnth+" month of this year.");
         }
        myFunction();
      </script>     
            
    </body>
</html>

Document Object

• When an HTML document is loaded into a web browser, it becomes a document object
• The document object provides properties and methods to access all node objects, from within JavaScript

Methods

document.write()

document.close()

document.writeln()

document.getElementById()

document.getElementsByClassName()

document.getElementsByName()

document.open()

Properties

document.title

Popup Boxes In JavaScript..

alert Box

confirm Box

prompt Box

<script>
    alert("You Have One More Chance");
</script>

User must click "OK" to proceed in alert..

confirm("Press OK to agree");

User can click either"OK" or "Cancel" to proceed in confirm..

  prompt("Please enter your Course", "UCSC");

User can input values and Click "OK" or "Cancel" to proceed in prompt

Extensible Markup Language

What is XML ??

stands for EXtensible Markup Language

a text-based markup language much like HTML

derived from Standard Generalized Markup Language (SGML)