Introduction to Web Technology

1. WEB TECHNOLOGY-1
INTRODUCTION TO HTML
DR. JYOTI YADAV
DEPARTMENT OF COMPUTER SCIENCE
SAVITRIBAI PHULE PUNE UNIVERSITY

2. Unit 1: Basic Terminology of Web and Web Design Principles
Unit 2: Introduction to HTML 5
Unit 3: Introduction to Cascading Style Sheets
Unit 4: Introduction to Web Publishing or Hosting

3. Unit-1
BASIC TERMINOLOGY OF WEB AND WEB DESIGN PRINCIPLES
1.1What is Internet?
1.2 Brief History of Internet
1.3What is World Wide Web
1.4 Client Server Architecture
1.5Web ServerVs Web Browser
1.6Web Pages
1.7Website
1.8 How Website Works?
1.9Types ofWebsites
1.10 Domain Name Server and Uniform Resource Locator
1.11 Basic Principles involved in Developing aWebsite
1.12 Five Golden Rules ofWeb Designing
1.13Web Standards and W3C Recommendations.

4. Unit-2: INTRODUCTION TO HTML5
2.1What is HTML
2.2 Features of HTML
2.3What is difference between HTML and HTML5
2.4 Basic structure of an HTML document
2.5 Basic Building blocks of HTML
2.6 Block level Tags and Inline Tags
2.7 Core Attributes of HTML- id, style, class, title
2.8Working with Lists,Tables and Frames
2.9Working withText and Image Hyperlinks, Images and Multimedia
2.10Working with Forms and Controls
2.11 Advanced Tags in HTML5

5. Unit-3: INTRODUCTION TO CASCADING STYLE
SHEETS
3.1 Concept of CSS
3.2 Need of CSS
3.3 Creating Style Sheet -Inline, External, Embedded CSS.
3.4 CSS Selectors
3.5Types of Selectors
3.6 CSS Properties -Position, Float, clear, visibility
3.7 CSS3 Flexbox Layout
3.8 CSS3 Grid Layout
3.8 CSS Styling Properties (Background,Text Format, Controlling Fonts)
3.9Working with Lists andTables
3.10 Box Model (Border properties, Padding Properties, Margin properties, Display properties)
3.11 CSS Advanced (Grouping, Dimension, Display, Positioning, Floating,Align, Navigation Bar, Image)
3.12 CSS3 Advanced properties: Z-index, Opacity Property,Transition effect,Transform effect,
Animation effect.

6. Unit-4: INTRODUCTION TO WEB PUBLISHING
OR HOSTING
4.1What is Web Hosting?
4.2 Need ofWeb Hosting
4.3Types of Hosting packages
4.4 Registering Domains
4.5 Defining Name Servers
4.6 Steps to host the website

7. What is Internet?

8. What is Internet?
• INTERNET  INTERconnected NETwork
• The term “Internet” refers to the hardware (cables, fiber,
computers, phone lines, routers etc.)
• Every computer connected to the Internet has a different
identity. This special identity is called IP Address. IP Address
is a unique set of mathematical numbers (eg
103.195.185.222) that indicate the location of that
computer.

9. Internet Services

10. How Does the Internet Work?
•Internet Service Provider (ISP)
•Online

11. Applications of Internet
• To communicate for
communication
• To search for information
• For Entertainment
• For Shopping
• For Education
• For E-Governance

12. Web Browsers
• To use a computer as a Wen client, a user needs to load inti
a special software tool known as WWW Browser.
• Browser enables a user to visit a server computer’s site
directly and access information on it by specifying its URL.
• It enables the user to create and maintain a personal hotlist
of favourite URLs.
• Maintain a history of server computers visited by user in a
surfing session.
• Enables a user to download information in various formats.

13. Web Server
• A software program or server computer equipped to offer World Wide Web access.
• Web servers allow you to serve content over the internet using HTML.
• The web server accepts requests from browsers like Netscape and Internet Explorer
and then returns the appropriate HTML documents.
• A web server is a computer with special software to host web pages and web
applications.
• A computer that providesWeb services and pages to intranet and internet users.
• A web server serves web pages to clients across the internet or an intranet. The web
server hosts the pages, scripts, programs, and multimedia files and serves them using
HTTP, a protocol designed to send files to web browsers and other protocols.
• A number of server-side technologies can be used to increase the power of the
server beyond its ability to deliver standard HTML pages.

14. How does Web Server work?

15. Web Server and Browser Interaction
• A web browser acts as an interface between the
user and the web server.
• The browser carries out the following on behalf
of the user
-Contacts a web server
- Sends a request for information
- Receives the information and
- Displays it on the user’s computer

17. Web Server and Browser Interaction

18. Internet Search Engines

19. Some Popular Search Engines

20. Advantages of Internet
•Online Services
•Admissions
•Library
•Job Portals
This is just hallmark. Internet is an ocean of information.
The farther and deeper you go.You will get unlimited
stores of knowledge. So continue your search…

21. Disadvantages of Internet
•Waste ofTime
•Not Free
•Cyber Threat
•Loss of Privacy
•Virus Attack
•Burglary in Credit/Debit Card
•Lack of Credibility
•Diversity but not access

22. Terminologies
• The internet is a constellation of communicating devices supported by a
common communications protocol (TCP/IP), offering the following
capabilities:
SMTP: Simple Mail Transport Protocol (aka “Email”)
FTP- File Transfer Protocol, the ability to connect to a remote host and
upload/download a file.
• The World Wide Web is a software application, most often running on the
internet using a client-server protocol for communications. When run on
internet these apps are supported by SMTP,Telnet and FTP.
• Hyperlinks (the ability to move from one source to another in a webbed
environment) are the primary reason why the Web is so popular(and
navigable). Hyperlinks are often combinations of the telnet and FTP
functions withinTCP/IP (the so-called “Internet Protocol”)

23. Terminologies (contd.)
• Client-server itself is a software application that supports
connectivity and functionality between users (running “client
software application”) and hosts or servers running server-side
software.
• Web Page: A single screen of data. A web page is a document
written in HTML and saved on a web server. HTML documents user
HTTP protocol to transfer files.
• Web Site:All related web pages for an organization or individual.
• Home Page: First page of the website (the filename is usually
index.htm)
• Browser: It must be used to view a webpage, because browsers
display HTML formatted documents and use HTTP protocol.

24. HTML Tags

25. Terminologies (contd.)
•Web server: is a specific type of computer where
the web pages are stored and made available for
public viewing.
•HTML:The basic code of web pages.
•HTTP: Hyper Text Transfer Protocol.A protocol is a
set of rules. HTTP is the rules for transferring files
over the web.
•URL: Uniform Resource Locator is the address of a
web page.

26. Parts of a URL
http://mybusy.com/catalog/pens/park.htm
•http:// (Protocol)
•mybusy.com (domain name of the website)
•/catalog/pens (folders of the website)
•/park.htm (filename of web page)

27. Web Browser

28. What is a URL?
• URL stands for Uniform Resource Locator.
• The URL specifies the Internet address of a file stored on a
host computer connected to the internet.
• Every file on the internet, no matter what its access
protocol, has a unique URL.
• Web software programs use the URL to retrieve the file
from the host computer and the directory in which it
resides.
• This file is then displayed on the monitor connected to the
user’s local machine.

29. What is a URL?
•URLs are translated into numeric addresses using
the Internet Domain Name System (DNS).
•The numeric address is actually the “real” URL.
•Since the numeric strings are difficult for humans
to use, alphanumeric addresses are employed by
end users.
•Once the translation is made, the web server can
send the requested page to the user’s Web
Browser.

30. Anatomy of a URL
Usually it consists of 4 parts:
•Protocol
•Server (or domain)
•Path and
•Filename
Sometimes there’s no path or filename.
•scheme://server:port/pathname

31. Anatomy of a URL
Here’s an example:
http://www/microsoft.com/windows/default.asp
http is the protocol
www.microsoft.com is the server
Windows/ is the path
Deafult.asp is the filename

32. Accessing Information on the Web
• www.google.com
• www.neo4j.com
• www.yahoo.com
• www.amazon.com

33. Content
Types

34. Putting Information on the Web

35. CGI (Common Gateway Interface)
•It refers to a specification by which programs can
communicate with a web browser.
•A CGI program, or script, is any program designed
to accept and return data that conforms to the
CGI specification.
•The program can be written in any programming
language, including C, Perl, andVisual Basic Script.

36. Search Engines: Finding the needle in
the haystack
•A search engine is a service that indexes,
organized, and often rates and reviews web
sites. Different search engines work in different
ways:
•Some rely on people to maintain a catalog of
websites or pages.
•Some use software to identify key information
on sites across the internet.
•Some combine both types of service.

37. Search Engines
Some common Search Engines:
• Google
• MSN
• Yahoo
• Lycos
• Altavista
• WebCrawler
• Infoseek
• Snap
• Excite

38. All About E-mail
•To send and receive electronic-mail messages, or
e-mail, over the internet and to organize your
messages, you need
•An e-mail account through an Internet Service
Provider (ISP) or online service provider.
•An e-mail client – e-mail software for your
computer.

39. E-mail Clients
•Microsoft Outlook
•Microsoft Outlook Express
•Netscape Messenger
•Eudora
Or Some web based Email
Client

40. E-mail Terminology
There are many acronyms associated with e-mail:
1. SMTP - Simple Mail Transfer Protocol; the standard rules that
many e-mail clients use to handle outgoing e-mail messages.
2. POP3 - POstoffice Protocol version 3; the standard rules that
many e-mail clients user to handle incoming e-mail messages.
3. MIME - Multipurpose Internet Mail Extensions; a format for
turning an e-mail attachment, such as a Microsoft Word file, into
ASCII text so it can be sent from one e-mail account to another.

41. Types of Internet
• Dialup Connection
• Leased Line
• ISDN (Integrated Service Digital Network)
• DSL (Digital Subcriber Line)
• ADSL(Asymmetric Digital Subscriber Line)
• SDSL (Symmetric Digital Subscriber Line)
• Cable Modem
• Wireless or Wi-Fi
• Broadband
• Satellite
• Cellular

42. Web Basics
Major Components ofWeb are:
1. Network
2. Clients
3. Servers
4. Documents
5. Protocols

43. About Networking
• A computer network is a high-speed communications medium
connecting many, possibly dissimilar, computers or hosts.
• A network is a combination of computer and telecommunication
hardware and software.
• The purpose is to provide fast and reliable information exchange
among the hosts and between processes, or executing programs,
on different hosts.

44. Networking Protocols
In order for programs and computers, under different operating
systems, to communicate on a network, a detailed set of rules and
conventions must be established. Such rules are known as
networking protocols. Protocols govern such details as
• address format of hosts and processes
• data format
• manner of data transmission
• sequencing and addressing of messages
• initiating and terminating connections
• establishing remote services
• accessing remote services
• network security

45. Network Addresses
• An address to a host computer is like a phone number to a telephone.
• Every host on the Internet has a unique network address that identifies
the host for communication purposes.
• The addressing scheme is an important part of a network and its
protocol. For the Internet, each host has a unique IP address represented
by 4 bytes in a 32-bit quantity.
• For example, the IP address 131.123.35.92. This dot notation (or quad
notation) gives the decimal value (0 to 255) of each byte. The IP address
is similar to a telephone number in another way: the leading digits are
like area codes and the trailing digits are like local numbers.
• Because of their numerical nature, the dot notation is easy on machines
but hard on users. Therefore, each host has a unique domain-based name
composed of words, rather like a postal address.

46. Representation of IP Address
IP address 131.123.35.92
For example, the domain name is unipune.ac.in

47. Packet Switching
• Data on the Internet are sent and received in packets.
• A packet envelops transmitted data with address information so
the data can be routed through intermediate computers on the
• network.
• Because there are multiple routes from the source to the
destination host, the Internet is very reliable and can operate
even if parts of the network are down.

48. Client & Server

49. The Domain Name System
Points to note about the DNS name space:
1. The DNS organizes the entire Internet name space into a big tree structure. Each node of the
tree has a label and a list of resources.
2. Labels are character strings (currently not case-sensitive) and sibling labels must be distinct.
3. The root is labelled by the empty string. Immediately below the root are the top-level
domains: edu, com, gov, net, org, and so on. TLDs also include country names{at (Austria), ca
(Canada), cn (China), for example. Under edu, for example, there are subdomains berkeley,
kent, mit, uiuc, and so on.
4. A full domain name of a node is a dot-separated list of labels leading from the node up to the
root (cs.kent.edu., for example).
5. A relative domain name is a prefix of a full domain name indicating a node relative to a
domain of origin. Thus, the familiar cs.kent.edu is actually a name relative to the root.
6. A label is the formal or canonical name of a domain. Alternative names, called aliases, are
also allowed. For example, the main Web server host info has the alias www so it is also
known as www.cs.kent.edu. To move the Web server to a different host, a local system
manager simply reassigns the alias to another host.

50. The Domain Name System

51. The Web
• The Web consists of a vast collection of documents that are located on computers
throughout the world. These documents are created by academic, professional,
governmental, and commercial organizations as well as by individuals.
• The documents are prepared in special formats and retrieved through server
programs on each computer that provides Web service.
• Each Web document can contain (potentially many) links to other documents
served by different servers in other locations and therefore become part of a web
that spans the entire globe.
• New materials are being put on the Web continuously and instant access to this
collection of information can be enormously advantageous.
• As the Web grows explosively, MIT of the USA and INRIA (the French National
Institute for Research in Computer Science and Control) have agreed to become
joint hosts of the W3 Consortium which is supported by industry and will further
develop Web related standards, protocols, and services.

52. How does a website work?
• A user enters a URL into a browser (for example, Google.com. This
request is passed to a domain name server.
• The domain name server returns an IP address for the server that
hosts the Website (for example, 68.178.157.132).
• The browser requests the page from the Web server using the IP
address specified by the domain name server.
• The Web server returns the page to the IP address specified by the
browser requesting the page. The page may also contain links to
other files on the same server, such as images, which the browser
will also request.
• The browser collects all the information and displays to your
computer in the form of Web page.

53. Types of Websites
Popular types of websites you can create:
1. eCommerce
2. Business
3. Entertainment
4. Portfolio
5. Media
6. Brochure
7. Non-profit
8. Educational
9. Personal
10.Infopreneur
11.Web portal
12.Wiki or Community Forum

54. Basic Principles involved in
Developing a Website

55. 1. Website Purpose
• Website should accommodate the needs of the
user.
• There are many different purposes that
websites may have but there are core purposes
common to all websites:
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care

56. 2. Simplicity
• Colour
• Type
• Imagery

57. 4. Navigation
• Navigation is the way of finding system
used on websites where visitors interact
and find what they are looking for.
• Website navigation is key to retaining
visitors.
• If the websites navigation is confusing,
visitors will give up and find what they
need elsewhere. Keeping navigation
simple, intuitive and consistent on every
page is key.

58. 4. F-Shaped Pattern Reading

59. 5. Visual Hierarchy

60. 6. Content

61. 7. Grid Based Layout

62. 8. Load Time

63. 9. Mobile Friendly

64. 5 Golden Rules of Web Design
1. Purpose
2. Consistency
3. Ease
4. Speed
5. Revise

65. WEB STANDARDS AND W3C RECOMMENDATIONS
Web standards are rules and guidelines established by the WWW Consortium (W3C)
developed to promote consistency in the design code which makes up a web page. In simple
terms it’s the guideline for the mark-up language which determines how a web page displays in
a visitor’s browser window.
The advantages in adhering to these standards are many:
1. Web pages will display in a wide variety of browsers and computers, including new
technology like iphones, Droids, ipads, PDA devices, mobile phones, which greately
increases the viewing audience.
2. W3C standards promote the use of ‘Cascading Style Sheets’ (CSS) or design code which is
attached to the web page rather than embedded in the page. The use of style sheets
significantly reduces the page file size which means not only a faster page loading time but
lower hosting costs for frequently visited sites due to using less bandwidth.
3. Design features such as colors and fonts can be easily changed by just modifying one style
sheet instead of editing every individual page in a web site, reducing the costs to modify
your site.
4. Search engine are able to access and index pages designed to web standards with greater
efficiency.