Lecture 6:

Introduction to the Internet & Web

Technologies

Sukrit Shakya
[email protected]

CC4057 Introduction to Information Systems

Contents
• Introduction to the Internet
• Introduction to Web Technologies
• Introduction to HTML5

CC4057 Introduction to Information Systems 2

The Internet
• Network of networks, a networking infrastructure
• Created in 1969 as ARPANET by the United States
Department of Defense
• On October 29, 1969, the first internet message
was sent
• The first message to be distributed was "LO", which
was an attempt at "LOGIN" by Charley S. Kline to
log into the computer from UCLA (University of
California, Los Angeles)
• In the 1980s this networking infrastructure was
made available to the general public

CC4057 Introduction to Information Systems 3

World Wide Web
• Tim Berners-Lee introduced WWW in 1989 and became available for everyone
August of 1991
• A distributed document delivery system
• The documents are formatted in a markup language called HTML (HyperText
Markup Language)
• Web browsers make it easy to access the World Wide Web
• The World Wide Web uses a client-server model

CC4057 Introduction to Information Systems 4

Client – Server model
• The client sends requests to the
server
• The server processes the requests
and sends back the information that
was requested

CC4057 Introduction to Information Systems 5

Is the web and the internet the same?
• NO! The internet connects millions of computers together globally forming a
network
• The web is a way of accessing the information over the internet
• It is an information-sharing model that is built on top of the Internet

CC4057 Introduction to Information Systems 6

Internet and Web Technologies

Web Technologies
Internet
CC4057 Introduction to Information Systems 7
What’s a Website?
• A website is a collection of webpages
that contains similar subject matter
• Webpages provides related
information
• Such as text, links, pictures, audio,
videos and other downloadable
files.
• Commonly has a homepage

CC4057 Introduction to Information Systems 8

Technologies behind a webpage
• HTML – gives basic structure to the
webpage
• CSS – enhances the basic structure by
giving it proper styling, formatting
• JavaScript - controls the behavior of
different elements, adds programming
logic to the web pages

These are the technologies that we will

be learning

CC4057 Introduction to Information Systems 9

HyperText Markup Language (HTML)
• Standard mark up language to create web pages
• Forms the skeleton of a web page
• Designed, documented and maintained by the World Wide Web Consortium (W3C)
• HTML is not a programming language, it is a markup language which is used to give
structure to text
• HTML uses tags to define elements within a document
• Browsers do not display the HTML tags, they display the content enclosed within
the tags

CC4057 Introduction to Information Systems 10

HTML5
• HTML5 is the latest version of HTML available today for the World Wide Web
• It is a new specification that builds on the previous HTML specifications
• HTML 5 also relies on other technologies, such as Cascading Style Sheets (CSS) and
JavaScript as the magic to make websites really colorful and responsive

CC4057 Introduction to Information Systems 11

HTML components
• tags
<tagname>content..</tagname>

opening tag closing tag

<tagname/>
an empty tag which does not have any
• attributes content but has some special meaning
<tagname attribute="value">content..</tagname>
<tagname attribute="value"/>

CC4057 Introduction to Information Systems 12

Creating a HTML document
• HTML files can be created using any text-editor like Notepad, Notepad++,
SublimeText, etc.
• Must be saved with a .html extension
• HTML files are opened in web browsers
• HTML is not case sensitive, but to make code organized and understandable its not
recommended to mix cases
• Proper indentation is also recommended to properly display the hierarchical
structure of a html document

CC4057 Introduction to Information Systems 13

Basic structure of a HTML document
<!DOCTYPE html> all html5 documents need to start with a DOCTYPE
declaration, this is to tell the browsers to process the
<html> document according to html5 specifications
<head>
<title>Title of the page/displayed in
browser’s title bar</title>
</head> the <head> tag is a container for metadata and other declarations.
HTML metadata is data about the HTML document. Metadata is not
<body> displayed in the actual page.
Content of the page goes here
</body> the <body> tag defines the main content of the HTML document or the
section of the HTML document that will be directly visible on the web
</html> page

CC4057 Introduction to Information Systems 14

Comments
• You can add comments to your HTML source code by using
<!-- Write your comments here -->
• Comments are not displayed by the browser, but they can help document your
HTML
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>

CC4057 Introduction to Information Systems 15

 Metadata is always passed as
name/value pairs
META tag
• Meta tag contains additional information (metadata) about the page, including the
page’s description, author, published date, keywords
• The metadata is intended for browsers (how to display content or reload page),
search engines (keywords), or other web services.
<head> value
name
<title>Basic HTML</title>
<meta name="description" content="Just Basic HTML" />
<meta name="keywords" content="HTML,CSS,JS" />
<meta name="author" content="Islington" />
<meta http-equiv="refresh" content="2" />
</head> will auto-refresh the page every 2 seconds
CC4057 Introduction to Information Systems 16
Basic HTML tags for document structure
• <h1..h6>content</h1..h6>
Six levels of headings, 1 being the most important and 6 being the least
• <p>content</p>
Used to organize paragraphs of text
• <br/>
Creates a line break
• <hr/>
Creates a horizontal line

CC4057 Introduction to Information Systems 17

Example

CC4057 Introduction to Information Systems 18

Example

CC4057 Introduction to Information Systems 19

Anchor tag
• Used to insert hyperlinks
<a href="http://google.com">Go to google</a>
<a href="page2.html">page2</a>

CC4057 Introduction to Information Systems 20

Example

CC4057 Introduction to Information Systems 21

HTML5 semantic elements
• Semantic elements = elements with a meaning
• A semantic element clearly describes its meaning to both the browser and the
developer
• Semantic elements have no specific output, color or design attached to them; and
they all render the same way
• They are purely to help web developer(or student) to understand the context in
which HTML code or text belong on the particular page
• They allow content to be meaningfully organized in a web page

CC4057 Introduction to Information Systems 22

HTML5 semantic elements
<header>…</header> Defines the header block for the document

<footer>…</footer> Defines the footer block for the document

<section>…</section> Defines a section in a document

<nav>…</nav> Defines navigation links for users in a document

<aside>…</aside> Defines content in a document sidebar

<article>…</article> Defines an article inside a document

CC4057 Introduction to Information Systems 23

HTML5 semantic layout

CC4057 Introduction to Information Systems 24

Example

CC4057 Introduction to Information Systems 25

Example

CC4057 Introduction to Information Systems 26

HTML entities
• Reserved characters in HTML must be replaced with character entities
• Special characters that are not present on the keyboard can also be replaced by
entities
Quotation Marks - “ &#34; &quot;
Ampersand - & &#38; &amp;
Less than sign - < &#60; &lt;
Greater than sign - > &#62; &gt;
Copyright symbol - © &#169; &copy;
@ Symbol - @ &#64; &Uuml;
Small bullet - • &#149; &ouml;
Trademark symbol - ™ &#153; &ucirc;
CC4057 Introduction to Information Systems 27
End of Lecture 6

CC4057 Introduction to Information Systems 28

 Thank you !
Any questions ?

CC4057 Introduction to Information Systems 29