Chapter 1:

Developing
a Basic Web
Page

Madam Norzita binti

Duriat
Exploring the History of the
World Wide Web
A network is a structure linking computers together for the
purpose of sharing information and services
Users typically access a network through a computer called
a host or node
A node that provides information or a service is called a
server

2
Exploring the History of the
World Wide Web
A computer or other device that requests services from a
server is called a client
One of the most commonly used designs is the client-
server network
If the computers that make up a network are close together
(within a single department or building), then the network is
referred to as a local area network (LAN)

3
Exploring the History of the
World Wide Web
A network that covers a wide area, such as several buildings
or cities, is called a wide area network (WAN)
The largest WAN in existence is the Internet
In its early days, the Internet was called ARPANET and
consisted of two network nodes located at UCLA and
Stanford, connected by a phone line

4
Exploring the History of the
World Wide Web
Today the Internet has grown to include an uncountable
number of nodes involving computers, cell phones, PDAs,
MP3 players, gaming systems, and television stations
The physical structure of the Internet uses fiber-optic cables,
satellites, phone lines, wireless access points, and other
telecommunications media

6
Structure of the Internet

7
Exploring the History of the
World Wide Web
Timothy Berners-Lee and other researchers
at the CERN nuclear research facility near
Geneva, Switzerland laid the foundations
for the World Wide Web, or the Web, in
1989
They developed a system of
interconnected hypertext documents that
allowed their users to easily navigate from
one topic to another
Hypertext is a method of organizing 8
Hypertext Documents

When you read a book, you follow a linear

progression, reading one page after
another
With hypertext, you progress through
pages in whatever way is best suited to
you and your objectives
Hypertext lets you skip from one topic to
another

9
Hypertext Documents

The key to hypertext is the use of links,

which are the elements in a hypertext
document that allow you to jump from one
topic or document to another
A link may point to another section of the
same document, or to another document
entirely
A link can open a document on your
computer, or through the Internet, a
document on a computer anywhere in the
world
10
 Web Pages and Web Servers

Each document on the World Wide Web is referred to as a

Web page
Web pages are stored on Web servers, which are
computers that make Web pages available to any device
connected to the Internet
A Web browser retrieves the page from the Web server
and renders it on the users computer or other device
The earliest browsers, known as text-based browsers,
were incapable of displaying images

11
Web Pages and Web Servers

12
Introducing HTML

A Web page is a text file written in a language called

Hypertext Markup Language
A markup language is a language that describes a
documents content and structure
HTML is not a programming language or a formatting
language
Styles are format descriptions written in a separate
language from HTML that tell browsers how to render each
element for particular devices

13
The History of HTML

The first version of HTML was created using the Standard

Generalized Markup Language (SGML)
In the early years of HTML, Web developers were free to
define and modify HTML in whatever ways they thought best
Competing browsers introduced some differences in the
language The changes were called extensions

14
The History of HTML

A group of Web developers, programmers, and authors

called the World Wide Web Consortium, or the W3C,
created a set of standards or specifications that all browser
manufacturers were to follow
The W3C has no enforcement power
The recommendations of the W3C are usually followed since
a uniform approach to Web page creation is beneficial to
everyone

15
The History of HTML

XHTML (Extensible Hypertext Markup Language) is a

stricter version of HTML and is designed to confront some of
the problems associated with the different and competing
versions of HTML
XHTML is also designed to better integrate HTML with
other markup languages such as XML
HTML will not become obsolete anytime soon

16
Writing HTML Code
1. Become well-versed in the history of HTML
2. Know your market
3. Test your code on several different browsers and browser
versions
4. Read the documentation on the different versions of HTML
and XHTML

17
Tools for Creating
HTML Documents
Basic text editor such as Windows Notepad

HTML Converter translates formatted text into HTML

code
Can create the source document in a word processor and then
convert it
HTML code created using a converter is often longer and more
complicated than necessary, resulting in bloated code

18
Tools for Creating
HTML Documents
HTML Editor helps you create an HTML file by inserting
HTML codes for you as you work
They can save you a lot of time and help you work more
efficiently
Advantages and limitations similar to those of HTML converters
Allow you to set up a Web page quickly
Will usually still have to work with HTML code to create a finished
document

19
Creating an HTML Document

Plan out your Web page before you start coding

Draw a planning sketch or create a sample document using
a word processor
Preparatory work can weed out errors or point to potential
problems

20
Creating an HTML Document

21
Creating an HTML Document

In planning, identify a documents various elements An

element is a distinct object in the document, like a
paragraph, a heading, or a pages title
Formatting features such as boldfaced font, and italicized
text may be used

22
Marking Elements with Tags

The core building block of HTML is the tag, which marks the
presence of an element
A two-sided tag is a tag that contains some document
content General syntax for a two-sided tag:

<element>content</el
ement>

23
Marking Elements with Tags

A two-sided tags opening tag (<p>) and closing tag (</p>)

should completely enclose its content
Elements can contain other elements
Tags cannot overlap

<p>Welcome to <b>Daves Devil Sticks</b></p>

24
The Structure of an HTML File

The opening <html> tag marks the start of an HTML

document, and the closing </html> tag tells a browser
when it has reached the end of that HTML document
<html> marks the root element
Anything between these two tags makes up the document
content, including all other elements, text, and comments

25
The Structure of an HTML File

An HTML document is divided into two main sections: the

head and the body
The head element contains information about the
document, for example the document title or the keywords
The content of the head element is not displayed within the
Web page

26
The Structure of an HTML File

The body element contains all of the content to appear on

the Web page
The body element can contain code that tells the browser
how to render the content
The title element contains the pages title A documents
title is usually displayed in the browsers title bar

27
Converting an HTML Document
into XHTML
There is considerable overlap between HTML and XHTML
You can convert an HTML file into an XHTML file by replacing
the opening <html> tag with the following three lines of
code:
<?xml version="10" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN
http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">
<html xmlns=http://wwww3org/1999/xhtml>

28
 Adding Comments

The comment tag adds notes to your HTML code

<!-- comment -->

Comments can be spread over several lines

Comments are useful in documenting your HTML code for
yourself and others

29
Adding Comments

30
 Displaying an HTML File
As you continue modifying the HTML code, you should
occasionally view it with your Web browser to verify that you
have not introduced any errors
You may want to view the results using different browsers to
check for compatibility

31
Displaying an HTML File

32
 Working with
Block-Level Elements
Block-level elements are elements that contain content
that is viewed as a distinct block within the Web page
Heading elements are block-level elements that contain
the text of main headings on the Web page
<hn>content<hn>
n is an integer between 1 and 6
<h1> is the largest heading
<h6> is the smallest heading

33
Marking Block-Level Elements

To mark a heading, enter

<hn>content</hn>
where n is an integer from 1 to 6 and content is the text of
heading
To mark a paragraph, enter
<p>content</p>
To mark a block quote, enter
<blockquote>content</blockquote>

34
Adding <h1> and <h2>
Markup Tags

35
Marking Paragraph Elements

36
 White Space and HTML

HTML file documents are composed of text characters and

white space
White space is the blank space, tabs, and line breaks
within the file
HTML treats each occurrence of white space as a single
blank space
You can use white space to make your document more
readable

37
 Marking a Block Quote

The syntax for making an extended quote is

<blockquote>content</blockquote>

38
Marking a List

HTML supports three kinds of lists: ordered, unordered,

and definition
You use an ordered list for items that must appear in a
numerical order
You use an unordered list for items that do not need to
occur in any special order
One list can contain another list This is called a nested list

39
Marking a List

40
Creating a Definition List

The definition list contains a list of terms, each followed by

the terms description
Web browsers typically display the definition description
below the definition term and slightly indented:
Basic Stick
Easiest stick to learn

41
Using Other Block-Level
Elements
HTML supports the address element to indicate contact
information Most browsers display an address element in an
italicized font, and some right-justify or indent addresses

42
Using Other Block-Level
Elements

43
Working with Inline Elements

An inline element marks a section of text within a block-

level element
Often used to format characters and words
Also referred to as character formatting elements

44
Working with Inline Elements

45
Using Element Attributes

Many tags contain attributes that control the use, behavior,

and in some cases the appearance, of elements in the
document
Attributes are inserted within the tag brackets

<element attribute1=value1 attribute2=value2

>content</element>

46
The Style Attribute

Use the style attribute to control the appearance of an

element, such as text alignment
The text-align style tells the browser how to horizontally
align the contents of an element
The color style tells the browser to render the text in a
certain color
Presentational attributes specify exactly how the
browser should render an element

47
The Style Attribute

48
The Style Attribute

49
Working with Empty Elements

An empty element contains no content

Empty elements appear in code as one-sided tags
<element />
The one-sided tag to mark a line break is
<br />
The horizontal rule element places a horizontal line across
the Web page
<hr />

50
Working with Empty Elements

51
Working with Empty Elements

To display a graphic, you insert an inline image into the

page An inline image displays a graphic image located in a
separate file within the page
<img src="file" alt="text" />

52
Working with Empty Elements

53
Working with Character Sets
and Special Characters
Character sets come in a wide variety of sizes, based on
the number of symbols required for communication in the
chosen Language
ASCII (American Standard Code for Information
Interchange)
Latin-1
ISO 8859-1
Unicode
UTF-8

54
Working with Character Sets
and Special Characters
To store a character set, browsers need to associate each
symbol with a number in a process called character
encoding
Another way to insert a special symbol is to use a character
entity reference, in which a short memorable name is
used in place of the numeric character reference

55
Working with Character Sets
and Special Characters

56
Working with Character Sets
and Special Characters

57