Lecture3 introduction towebpages

Department of Computer Science & TechnologyPGDCET/NWT

© 2009, DCST

INTRODUCTION TO WEB PAGES & HTML

Lecture 3

Web Pages & HTML 3.2


© 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 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



© 2009, DCST

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



© 2009, DCST

Communication on the Web



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

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)



© 2009, DCST


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



© 2009, DCST


• "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



© 2009, DCST


• "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



© 2009, DCST


• 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



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

A Simple Example

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body>

</html>

• The text between <html> and </html> describes the web page

• The text between <body> and </body> is the visible page content

• The text between <h1> and

</h1> is displayed as a heading

• The text between <p> and </p> is displayed as a paragraph



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

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">



© 2009, DCST

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><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></html>

container tagsattributes

content – text or other elements

empty tag

Note: Tags must be properly nested

HTML Elements...



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

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



© 2009, DCST

Document Head Elements

<html> <head> <title> Title goes here </title> </head><body> Hi.</body></html>

• The <head> tag contains – Metadata i.e. information

about the web page such as its author, publication date, page description, keywords

– Scripts– Styles and links to external

style sheets– Title of the document



© 2009, DCST

The <title> Tag

<html> <head> <title> Title goes here </title> </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



© 2009, DCST

The <body> Tag

<html> <head> <title> Title goes here </title> </head><body>Hi.</body></html>

• The <body> tag contains all the visual aspects of the page: – Additional tags and content



© 2009, DCST

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



© 2009, DCST

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>



© 2009, DCST

Example - <body> Attributes

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



© 2009, DCST

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.



© 2009, DCST

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



© 2009, DCST

Colours in Web Design...

• In HTML, to specify a colour, use– Colour names

• eg "white", "yellow"

OR– Its hexadecimal

value• "#3366ff","#000000"

Decimal Hexadecimal

00 00

51 33

102 66

153 99

204 CC

255 FF



© 2009, DCST

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



© 2009, DCST

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.



© 2009, DCST

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



© 2009, DCST

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