History of Web

⚫ Tim Berner-Lee Founder of WWW

⚫ first proposal entitled “ A Large
Hypertext Database with Typed links” on
Nov 12,1990 at Europe
⚫ Dec 1990, Lee Developed all the tools of
WWW
⚫ www stand as world web wide
 Internet
⚫ Internet is a communication network linking computers world
wide.
⚫ The World Wide Web is a way of accessing information over
the medium of Internet. It is an information sharing model that
is built on top of the Internet.
⚫ WWW is also known as the web.
⚫ WWW is not a single entity, it is a client-server network that
includes web servers that are designed to deliver files to the
client.
⚫ The web uses the http protocol to transmit data.
⚫ Client utilizes browsers such as Internet Explorer, Chrome,
Netscape Navigator, Mozilla, Opera etc to access web
documents called web pages.
WWW
⚫ World Wide Web—a repository of Information
⚫ Introduced in 1991
⚫ Originated from the CERN High-Energy Physics
laboratory in Geneva, Switzerland.
⚫ Purpose—create a system to handle distributed
resource
⚫ A client-server service
⚫ Service provider—called website
Basic Definitions
⚫ Web Page: A web page is a document or resource of information that is
suitable for the World Wide Web and can be accessed through a web
browser.
⚫ Website: A collection of pages on the World Wide Web that are accessible
from the same URL and typically residing on the same server
⚫ Browser: A web browser is a software application for retrieving, presenting,
and traversing information resources on the World Wide Web
⚫ URL: Uniform Resource Locator, the unique address which identifies a
resource on the Internet for routing purposes
⚫ HTTP: A protocol to transfer hypertext requests and information between
servers and browsers
⚫ Hypertext: Hypertext is text, displayed on a computer, with references
(hyperlinks) to other text that the reader can immediately follow, usually by
a mouse
⚫ Web server: software that delivers Web pages and other documents to
browsers using the HTTP protocol
Web Vs App
Web - Accessed via the internet browser and will adapt to
whichever device you're viewing them on(irrespective of the
underlying platform).
Apps are built for a specific platform, such as iOS or
Android.
Application that can run on a handheld or mobile device (like
a smartphone or tablet)
How do we write Code for Web??
HTML
Where the Code are Stored??
Web Server
HTML
XHTML vs HTML
⚫ XHTML elements must be properly nested
⚫ XHTML elements must always be closed
⚫ XHTML elements must be in lowercase
⚫ XHTML documents must have one root element
 <BASE HREF
="http://www.inf.com/file.html“>

linking external CSS <link rel="stylesheet" href="styles.css">

To have your page automatically reloaded every X seconds

<META HTTP-EQUIV="REFRESH" CONTENT=X >

<style>
h1 {color:red;}
p {color:blue;} </style>
Web 1.0 vs. Web 2.0
⚫ Web 1.0 was about reading, Web 2.0 is about
writing
⚫ Web 1.0 was about companies, Web 2.0 is
about communities
⚫ Web 1.0 was about client-server, Web 2.0 is
about peer to peer
⚫ Web 1.0 was about HTML, Web 2.0 is about
XML
⚫ Web 1.0 was about home pages, Web 2.0 is
about blogs
Web 1.0, 2.0 & 3.0
⚫ Web 1.0 – read only (Static)
Web allowed us to search for information and read it.
There was very little in the way of user interaction or
content contribution.
⚫ Web 2.0 – read & write (Dynamic)
Ability to contribute content and interact with other web
users. For example, YouTube and MySpace, which rely
on user submissions
⚫ Web 3.0 – read, write and execute
A web service is a software system designed to support
computer-to-computer interaction over the Internet.
Blog
⚫ Blog – short for weblog. A weblog is a journal (or
newsletter) that is frequently updated.
Wiki
⚫ Wiki – This is a website that includes the collaboration of
work from many different authors: allows anyone to edit,
delete, or modify the content on the web. (Wiki means
"quick" in Hawaiian.)

⚫ RSS – Really Simple Syndication – is a family of XML

file formats for web syndication used by news websites
and weblogs.
<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN =
"center">
Quiz: Basics of HTML
Tables
Table Structure
Creating Tables
Creating Tables
Embedding Images
Images as Link
Image Maps
HTML Character Entities
Forms
Forms
Form Elements
Text Box / Password
Text Area
List Box
Check Box
Radio Button
Buttons
File and Image
Form Example
Frames
⚫ Display more than one HTML file at a time
⚫ If used properly, frames make your site more readable and usable
⚫ <FRAMESET> tags
⚫ Tell the browser the page contains frames
⚫ Details for frames contained within <FRAMESET>…</FRAMESET>
tags
⚫ COLS or ROWS attribute gives the width or height of each frame
⚫ In pixels or a percentage
 FRAME
⚫ FRAME elements
elements
⚫ Specify what files will make up frameset
⚫ FRAME attributes:
⚫ NAME - identifies specific frame, enabling hyperlinks to load in their intended
frame
⚫ TARGET attribute of A element
⚫ Ex. <A HREF = “links.html” TARGET = “main”>
⚫ TARGET = “_blank” loads page in a new blank browser window
⚫ TARGET = “_self” loads page in the same window as anchor element
⚫ TARGET = “_parent” loads page in the parent FRAMESET
⚫ TARGET = _top” loads page in the full browser window
⚫ SRC - Gives the URL of the page that will be displayed in the specified frame
⚫ SCROLLING attribute - Set to “no” to prevent scroll bars
⚫ NORESIZE attribute prevents user from resizing the frame
Example
<html>
<head><title>Frames Example</title>
</head>
<frameset cols = “40%,*”>
<frame name=“first” SCROLLING = "no" src = “first.htm”>
<frame name=“second” src = “second.htm”>
<NOFRAMES> <P>This page uses frames, but
your browser does not support them.</P>
</NOFRAMES>
</frameset>
</html>
HTML 5 - Example
<!doctype html>
<html>
<head><title>Page title</title> </head>
<body>
<header><h1>Page title</h1></header>
<nav> <!-- Navigation --></nav>
<section id="intro"><!-- Introduction -->
</section>
<section><!-- Main content area -->
</section>
<aside> <!-- Sidebar --></aside>
<footer> <!-- Footer --> </footer>
</body>
</html>