Lecture3 IntroductionToWebPages

PGDCET/NWT Department of Computer Science & Technology
Lecture 3
INTRODUCTION TO WEB
PAGES & HTML
© 2009, DCST
Objectives
• To understand what a web page is
• Elements of a web page
• To understand what is HTML
• HTML elements and attributes
• Types of HTML elements
• Document structure elements
• Create and modify HTML documents using a
simple text editor
• Tips on HTML
© 2009, DCST Web Pages & HTML 3.2

Web Page
• A document or resource of information
• Suitable for the World Wide Web
• Accessed and displayed through a web
browser
• May provide navigation to other web
pages via hypertext links or hyperlinks

Web Terminology
• The World Wide Web
─ The set of computers on the Internet that support HTTP
─ Not a separate network
• HTTP
─ HyperText Transfer Protocol
─ The protocol used by a WWW client (eg. Internet Explorer)
to request documents from a WWW server (i.e. the
program running at websites like yahoo.com or
amazon.com)
• HTML
─ HyperText Markup Language
─ The language used to design web pages

Communication on the Web

Web Page...
Web pages may be
• Static web pages
– Consist of files of static content stored
within the web server's file system
• Dynamic web pages

– The web server constructs the HTML for
each web page when it is requested by a
browser

Elements Of A Web Page
A web page can contain numerous types

of information, which can be seen, heard
or interacted with by the end user

Elements Of A Web Page...

• Perceived (rendered) information:
– Textual information:
• With diverse render variations – paragrapgh, list
– Non-textual information:
• Static images: typically GIF, JPEG or PNG or vector
formats as SVG or Flash
• Animated images: typically Animated GIF and SVG, also
Flash, Shockwave, or Java applet
• Audio: typically MIDI or WAV formats or Java applets
• Video: WMV (Windows), RM (Real Media), FLV (Flash
Video), MPG, MOV (Quicktime)


• Interactive information: more complex,
glued to interface
– "on page" interaction
– "between pages" interaction


• "on page" interaction
Uses client-side scripting to change interface
behaviors within a specific web page, in response to
mouse or keyboard actions or at specified timing
events
– Interactive text:
• Uses Dynamic HTML
– Interactive illustrations:
• Range from "click to play" image to games typically using
scripts and Flash, Java applets, SVG, or Shockwave
– Buttons:
• Forms providing alternative interface, typically for use
with scripts and DHTML


• "between pages" interaction
– Hyperlinks
• Standard "change page" reactivity – navigate
to another webpage
– Forms
• Provide more interaction with the server and
server-side databases
Uses server-side scripting to change the supplied
page source code between pages


• Internal (hidden) information
– Comments
– Metadata
• Charset information, Document Type Definition (DTD),
etc.
– Diagramation and style information
• Information about rendered items (like image size
attributes) and visual specifications
• Cascading Style Sheets (CSS).
– Scripts
• Usually JavaScript, make web pages more responsive to
user input once in the client browser

What is HTML?
• HTML is a language for describing web pages
• HTML stands for Hyper Text Markup
Language
• HTML is not a programming language, it is a
markup language
• A markup language consists of a set of
markup tags
• HTML uses markup tags to describe
elements on a web pages

HTML Tags
• HTML tags are keywords surrounded by
angle brackets like <html>
• HTML tags normally come in pairs like
<b> and </b>
• The first tag in a pair is the start or
opening tag, the second tag is the end
or closing tag

HTML Documents
• A HTML document corresponds to a web
page
• HTML documents contain HTML tags and
plain text
• A web browser (like Internet Explorer or
Firefox) reads HTML documents and displays
them as web pages
• The browser does not display the HTML tags,
but uses the tags to interpret the content of
the page

A Simple Example
• The text between <html> and
<html> </html> describes the web
page
<body>
• The text between <body> and
<h1>My First Heading</h1> </body> is the visible page
content
<p>My first paragraph</p>
• The text between <h1> and
</body> </h1> is displayed as a
heading
</html>
• The text between <p> and
</p> is displayed as a
paragraph

HTML Elements
• An HTML element indicates structure in an
HTML document and a way of hierarchically
arranging content
• Elements may represent headings,
paragraphs, hypertext links, lists, embedded
media and a variety of other structures
<h1>My First Heading</h1> - heading element

<p>My first paragraph</p> - paragraph element

HTML Elements...
• HTML elements have properties:
attributes and content
– Attributes define desired behavior or
indicate additional element properties
– Content can be text or other elements

Element Attributes
• Attributes provide additional information
about the element
• Attributes are always specified in the
start tag
• Attributes come in name/value pairs
like: name="value"
e.g. <p align="left">, <hr color="pink">

HTML Elements...
HTML elements may be either containers or empty
• Container elements are constructed with:
– A start tag (<tag>) marking the beginning of an element, which may
incorporate any number of attributes (including their values)
– Some amount of content (text, other elements)
– An end tag </tag>, in which the element name is prepended with a
forward slash
• Empty elements consist of:

– Only a single tag, with any attributes
– The tag may have a slash appended: <tag />
Most HTML elements can be nested (i.e. can contain other HTML
elements)

HTML Elements...
container tags
attributes
<html>
<body>
<h2 align="center">Weak monsoon depletes India's water
reservoirs </h2>
<p align="left">Water levels in <b><font color="red">
India's 81 main reservoirs </font><i>have more than</i>
halved from a year </b> earlier after the lowest June
monsoon rains for 83 years, government data showed on
Thursday. </p>
<hr color="pink">
</body> empty tag content – text or
</html> other elements
Note: Tags must be properly nested
Types of HTML Elements

• Document structure elements
– <html>, <head>,<body>
• Document head elements
– <title>, <meta>,<link><script>,<style>
• Document body elements
– Block elements
• Paragraphs, headings, lists
– Inline elements
• Anchor
– Presentation elements
• Bold, italics
– Images, tables, forms

Document Structure Elements
• <html>...</html>
– The Root element of an HTML document; all other
elements are contained in this
• <head>...</head>
– Container for processing information and
metadata for an HTML document
• <body>...</body>
– Container for the displayable content of an HTML
document

The <html> Tag

<html>
<head>
<title> Title goes here </title>
</head>
<body>
Hi.
</body>
</html>
• The <html> tag is the container for the entire web
page
• This element contains other HTML elements:
– The head and the body

Document Head Elements

<html> • The <head> tag contains
<head> – Metadata i.e. information
<title> about the web page such as
Title goes here its author, publication date,
page description, keywords
</title>
– Scripts
</head>
– Styles and links to external
<body> style sheets
Hi. – Title of the document
</body>
</html>

The <title> Tag

<html>
<head>
</head>
<body>
Hi.
</body>
</html>
• Contains the title of the document

• When the page is viewed, the title is usually
found in the title bar at the top of the screen
The <body> Tag

<html>
<head>
</head>
<body>
Hi.
</body>
</html>
• The <body> tag contains all the visual

aspects of the page:
– Additional tags and content

Attributes of the <body> Tag

Attribute Description
bgcolor= Sets the background colour for the entire page
background= Adds an image to the background
text= Sets the colour of ordinary text on the page
link= Sets the colour of ordinary links on the page
alink= Sets the colour of active links, in the process of
connecting
vlink= Sets the colour of visited links (links that have
been followed)
NOTE: link, alink and vlink will be done later

Example - <body> Attributes

<html>
<head>
<title> Background colour </title>
</head>
<body bgcolor="#ADD8E6"
text="#FF0000">
Hi
<br><br>
The background colour is green
and the text colour is red
</body>
</html>

Example - <body> Attributes
<html>
<head>
<title> Background picture </title>
</head>
<body background="Sunset.jpg">
The background is a picture
</body>
</html>

HTML Colours
• Colors are displayed combining RED, GREEN, and
BLUE light.
• HTML colors are defined using a hexadecimal (hex)
notation for the combination of Red, Green, and Blue
color values (RGB).
• The lowest value that can be given to one of the light
sources is 0 (hex 00). The highest value is 255 (hex
FF).
• Hex values are written as 3 double digit numbers,
starting with a # sign.
• Most modern monitors are capable of displaying at
least 16384 different colors.

Colours in Web Design

• Various combinations of six numbers
define the RGB values of colors that
work well in most browsers
• The six numbers are zero and the first
five multiples of 51 in decimal:
– 51, 102, 153, 204 and 255

Colours in Web Design...

Decimal Hexadecimal • In HTML, to specify
a colour, use
00 00
– Colour names
51 33 • eg "white", "yellow"
102 66 OR
– Its hexadecimal
153 99 value
• "#3366ff","#000000"
204 CC
255 FF

HTML Tips
• How to View HTML Source
– Click the VIEW option in browser's toolbar and
select SOURCE or PAGE SOURCE.
– This will open a window that shows the HTML
code of the page
• Use Lowercase Tags

– HTML tags are not case sensitive: <P> means the
same as <p>
– The World Wide Web Consortium (W3C)
recommends lowercase in HTML 4, and demands
lowercase tags in future versions of (X)HTML

HTML Tips...
• Always quote attribute values
– Double style quotes are the most common, but single style
quotes are also allowed.
– In some rare situations, like when the attribute value itself
contains quotes, it is necessary to use single quotes:
eg. name='John "IronMan" Nelson'
• Use lowercase attributes

– Attribute names and attribute values are case-insensitive.
– However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in their
HTML 4 recommendation
– Newer versions of (X)HTML will demand lowercase
attributes.

Summary
• A web page is a resource of information
• A web page can contain numerous types of
information: text, image, audio, video
• HTML is a markup language used to describe
web pages
• Most HTML tags are containers that require a
matching closing tag
• The opening tag usually has a number of
attributes that modify the tag in some way

Summary
Tag Explanation
<html> Identifies HTML content
<head> Contains metadata information
about the web page
<title> Displayed in the title bar of the
browser
<body> HTML body comprising of the
visual aspects of the page

Lecture3 IntroductionToWebPages

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture3 IntroductionToWebPages

Uploaded by

Copyright:

Available Formats

PGDCET/NWT Department of Computer Science & Technology

© 2009, DCST Web Pages & HTML 3.2

© 2009, DCST Web Pages & HTML 3.3

© 2009, DCST Web Pages & HTML 3.4

Communication on the Web

© 2009, DCST Web Pages & HTML 3.5

• Dynamic web pages

© 2009, DCST Web Pages & HTML 3.6

Elements Of A Web Page

A web page can contain numerous types

© 2009, DCST Web Pages & HTML 3.7

Elements Of A Web Page...

© 2009, DCST Web Pages & HTML 3.8

Elements Of A Web Page...

© 2009, DCST Web Pages & HTML 3.9

Elements Of A Web Page...

© 2009, DCST Web Pages & HTML 3.10

Elements Of A Web Page...

© 2009, DCST Web Pages & HTML 3.11

Elements Of A Web Page...

© 2009, DCST Web Pages & HTML 3.12

© 2009, DCST Web Pages & HTML 3.13

© 2009, DCST Web Pages & HTML 3.14

© 2009, DCST Web Pages & HTML 3.15

© 2009, DCST Web Pages & HTML 3.16

<h1>My First Heading</h1> - heading element

© 2009, DCST Web Pages & HTML 3.17

© 2009, DCST Web Pages & HTML 3.18

© 2009, DCST Web Pages & HTML 3.19

• Empty elements consist of:

© 2009, DCST Web Pages & HTML 3.20

Types of HTML Elements

© 2009, DCST Web Pages & HTML 3.22

Document Structure Elements

© 2009, DCST Web Pages & HTML 3.23

The <html> Tag

© 2009, DCST Web Pages & HTML 3.24

Document Head Elements

© 2009, DCST Web Pages & HTML 3.25

The <title> Tag

• Contains the title of the document

The <body> Tag

• The <body> tag contains all the visual

© 2009, DCST Web Pages & HTML 3.27

Attributes of the <body> Tag

© 2009, DCST Web Pages & HTML 3.28

Example - <body> Attributes

© 2009, DCST Web Pages & HTML 3.29

Example - <body> Attributes

© 2009, DCST Web Pages & HTML 3.30

© 2009, DCST Web Pages & HTML 3.31

Colours in Web Design

© 2009, DCST Web Pages & HTML 3.32

Colours in Web Design...

© 2009, DCST Web Pages & HTML 3.33

• Use Lowercase Tags

© 2009, DCST Web Pages & HTML 3.34

• Use lowercase attributes

© 2009, DCST Web Pages & HTML 3.35

© 2009, DCST Web Pages & HTML 3.36

© 2009, DCST Web Pages & HTML 3.37

You might also like