World Wide Web
And
Developing Web Sites
By : Ms. Kalpani Manatunga
GCE (A/L) ICT Training for Teachers
World Wide Web (WWW)
WWW is a set of interlinked hypertext
documents accessed via internet.
A website is a collection of related web pages
containing images, videos or other digital
assets. A website is hosted on at least
one web server and accessible via a network
such as the internet or a private LAN through
an Internet address also called URL.
[Wikipedia]
GCE (A/L) ICT Training for Teachers
Web Sites Classification
Informational sites
[Link], [Link]
News
[Link], [Link]
Commercial sites
[Link], [Link]
Educational sites
[Link], [Link]
Community sites like social networking sites
[Link], [Link],
Entertainment sites
[Link]
GCE (A/L) ICT Training for Teachers
Web Portal
A web portal, apart from the standard search
engine feature offers other services such as
emails, news, stock prices, information,
databases and entertainment.
Examples of public web portals are Yahoo, MSN,
and iGoogle.
Sri Lankan government portal is [Link].
GCE (A/L) ICT Training for Teachers
Structure of a Web Site
Home page
o First page that is being accessed.
Link pages
A web site should be attractive, useful, easy to
navigate and including appropriate current
information in end users perspective.
From developers point of view, a web site should
be easily modifiable and scalable.
GCE (A/L) ICT Training for Teachers
What is HTML???
HTML is HyperText Markup Language which is
used to create web pages.
Web page is nothing more than a HTML file with
the extension of .htm or .html
HTML is highly used to create fancy looking front
ends with properly structured content and visual
formatting.
HTML is a markup tags based language that
uses set of HTML tags to generate web pages.
GCE (A/L) ICT Training for Teachers
Tags are keywords surrounded by angle brackets
and most of the times they come in pairs as
opening tag and a closing tag.
Eg : <body> and </body>
Need an editor like notepad or any fancy html
editor like Macromedia Dreamviewer or Microsoft
FrontPage to edit the source.
Output is visible on a web browser like Mozilla
Firefox, Google Chrome, Internet Explorer and
etc..
GCE (A/L) ICT Training for Teachers
Example
<html>
<title>
<head>
My Home Page
</head>
</title>
<body>
<p> This is My First Web Page!! </p>
It is very exciting!!!
<br>
HyperText Markup Language
</body>
</html>
GCE (A/L) ICT Training for Teachers
Example
<html>
<body>
<h2> <u> Images and Sounds!! </u> </h2>
<img src = "[Link]"> <br> <br>
<embed src="[Link]"> </embed>
</body>
</html>
GCE (A/L) ICT Training for Teachers
Images, Sounds and Animations
<img>
Insert pictures to a web page
Src is the source attribute which contains
the location of the image (can be a relative
path or an absolute location)
o Width and height attributes are optional
o Animations are also added into a web page
using an img tag.
o
o
GCE (A/L) ICT Training for Teachers
<a href=file>
o
Used to provide a link to a music file in
formats like .mp3, .wav, .wmv, etc
<embed>
Another techniques to insert sound clips in
to your web page.
o The clip will be automatically embedded to
the page when it is getting loaded.
o autostart, loop are some attributes that can
be used.
o
GCE (A/L) ICT Training for Teachers
Example [Link]
GCE (A/L) ICT Training for Teachers
Lists
Ordered Lists Vs. Unordered Lists
Can create lists with bullet points (unordered
lists) by using <ul></ul>
o Numbered lists (ordered lists) are created using
<ol></ol>
o
Definition lists <dl></dl>
Eg: <dl>
<dt>Internet </dt>
<dd>Inter connected networks</dd>
</dl>
GCE (A/L) ICT Training for Teachers
Frames No body tags
SampleCodes\[Link]
GCE (A/L) ICT Training for Teachers
CSS
Web style sheets are a form of separating
presentation and content of a web page. It
describes about the visual layout (style).
Cascading Style Sheets (CSS) is a style sheet
language used to describe the presentation(the
look and formatting) of a document written in
HTML.
Eg: <style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
GCE (A/L) ICT Training for Teachers
CSS Syntax
body {
background: #eeeeee;
font-family: Verdana;
}
GCE (A/L) ICT Training for Teachers
Hyperlinks
A hyperlink (or link) is a reference to a
document that the reader can directly follow, or
that is followed automatically.
The document containing a hyperlink is known as
its source document.
The target of a hyperlink is the document, or
location within a document, to which the
hyperlink leads.
Eg: <a href=one .gif>
GCE (A/L) ICT Training for Teachers
Cookies vs. Sessions
Cookie
a piece of text stored on a client's computer
by their web browser
o one or more name value pairs
o
Session
o
o
process of keeping track of a user's activity
used to store information on the server-side
between HTTP requests
GCE (A/L) ICT Training for Teachers
XML
XML - eXtensible Markup Language.
XML is designed to transport and store data.
XML is important to know, and very easy to
learn.
XML's design goals emphasize simplicity,
generality, and usability over the internet.
No predefined set of tags.
Tags are case sensitive and must have close
tags for any opened tag.
GCE (A/L) ICT Training for Teachers
Tags must be properly nested
File extension is .xml
Eg: <?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
GCE (A/L) ICT Training for Teachers
GCE (A/L) ICT Training for Teachers