XP

Web Design and Development

Chapter 1 introduction to
web design and
development

1
 XP
Objectives (continued 1)
• Mark page structures with sectioning elements
• Organize page content with grouping elements
• Mark content with text-level elements
• Insert inline images
• Insert symbols based on character codes
• Create list

Chapter 1 Introduction to Web Design and Development 2

 XP
Objectives
• Explore the history of the web
• Create the structure of an HTML document
• Insert HTML elements and attributes
• Insert metadata into a document
• Define a page title

Chapter 1 Introduction to Web Design and Development 3

 Exploring the World Wide Web XP

• A network is a structure in which information and services are

shared among devices
• A host or a node can be any device that is capable of sending
and/or receiving data electronically

Chapter 1 Introduction to Web Design and Development 4

Exploring the World Wide Web
XP
(continued 1)
• A server is a host that provides information or a service to
other devices on the network
• A computer or other device that receives a service is called a
client
• In a client-server network, clients access information provided
by one or more servers users

Chapter 1 Introduction to Web Design and Development 5

XP

6
• Google server
XP
(supercomputer/
mainframe) –hosting
server

7
 Exploring the World Wide Web
XP
(continued 2)
• Local area network - A network confined to a small geographic area, such
as within a building or department
• 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

Chapter 1 Introduction to Web Design and Development 8

 Exploring the World Wide Web
XP
(continued 3)
• 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 organization in which data sources are
interconnected through a series of links or hyperlinks that users
can activate to jump from one piece of information to another

Chapter 1 Introduction to Web Design and Development 9

 Web Pages and Web Servers XP

• Each document on the web is referred to as a web page

• Web pages are stored on web servers
• Documents on the web are accessed through a software
program called a web browser (google chrome)

Web site ->www.tarc.edu.my

Chapter 1 Introduction to Web Design and Development 10

 HTML
Introducing HTML XP
Code

HTML document:
• A Web page is a text mp_index.html

file written in HTML Tool/ software:

Notepad
(Hypertext Markup VS code
Language) Expression Web
Dreamweawer
• A markup language
describes the
content and
structure of a
document by Web page (result):
mp_index web page
identifying, or
Software :
tagging, different Web browser/mobile
document elements browser
Eg: Google chrome,
Firefox, Internet
Explorer, Microsoft
Edge

Chapter 1 Introduction to Web Design and Development 11

 The History of HTML XP

• In the early years of HTML, browser developers (web browser-> Google

Ghrome) were free to define and modify the language as no rules or syntax
were defined < p> <k>
• The World Wide Web Consortium, or the W3C, created a set of standards
or specifications for all browser manufacturers to follow <p>
• 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 everyoneXHTML
(Extensible Hypertext Markup Language) is a different version of HTML
enforced with a stricter set of standards
• HTML5 was developed as the de facto standard for the next generation of
HTML
• Older features of HTML are often deprecated, or phased out; you may
need to use them if you are supporting older browsers

Chapter 1 Introduction to Web Design and Development 12

 The History of HTML XP

Chapter 1 Introduction to Web Design and Development 13

 Tools for Working with HTML XP

• Basic text editor such as Windows Notepad

• Other HTML editors such as Visual Studio Code (VS code), Notepad++,
UltraEdit, CoffeeCup, BBEdit, and ConTEXT.
https://www.hostinger.my/tutorials/best-html-editors
• HTML Converter (assignment –you cannot use it ) – translates formatted
text into HTML code
– Can create the source document in a Microsoft Word and then convert
it into HTML
– HTML code created using a converter is often longer and more
complicated than necessary, resulting in “bloated” code

Chapter 1 Introduction to Web Design and Development 14

 Hands-on Exercise XP

File name: Today is Monday

Instruction:
1. Open the file in Miscrosoft Word.
2. Save as Web page.
3. View the resulting page using a Web browser.

Chapter 1 Introduction to Web Design and Development 15

 Tools for Working with HTML
XP
(continued)
• IDE (Integrated Development Environment) -
A software package that provides
comprehensive coverage of all phases of the
development process from writing HTML code
to creating scripts for programs running on
web servers. Example Visual Studio
• Validators are programs that test code to
ensure that it contains no syntax errors

Chapter 1 Introduction to Web Design and Development 16

The Structure of an HTML5 Document
XP

17
 Exploring an HTML File XP

Chapter 1 Introduction to Web Design and Development 18

 The Document Type Declaration XP

• The first line in an HTML file is the document

type declaration, or doctype, that indicates
the type of markup language used in the
document

<!DOCTYPE html>

Chapter 1 Introduction to Web Design and Development 19

 Introducing Element Tags XP

• Element tag is the fundamental building block in

every HTML document that marks an element in
the document
• A starting tag (<element>) indicates the
beginning of an element, while an ending tag
(</element>) indicates the ending
• The general syntax of a two-sided element tag is
<element>content</element>
• The following code marks a paragraph element
<p>Welcome to Curbside Thai.</p>

<hr/>
20
https://www.w3schools.com/code/tryit.asp?filename=GRY0T4XHLU5T XP

Empty elements (one-sided tag)

two-sided element tag

21
 Introducing Element Tags
XP
(continued)
• Empty elements (one-sided tag)
are elements that are either
nontextual (images) or contain
directives to the browser about
how the page should be treated
• For example
– <br /> is used to indicate the
presence of a line break in the
text
– <hr/> is used to display a
horizontal line

Chapter 1 Introduction to Web Design and Development 22

 The Element Hierarchy XP

-The basic structure of an HTML5 document

• An HTML document is divided into two main sections: the head and the
body
• The head element marks information about the document
• The body element marks the content that will appear in the web page
• The body element is always placed after the head element

https://www.w3schools.com/tags/tag_body.asp
Chapter 1 Introduction to Web Design and Development 23
 Displaying an HTML File XP

• 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

Chapter 1 Introduction to Web Design and Development 24

Introducing HTML XP
HTML document:
mp_index.html HTML
• A Web page is a text Code
file written in HTML Tool/ software:
Notepad
(Hypertext Markup VS code
Language) Expression Web

• A markup language
describes the Web page (result):
content and mp_index web page

structure of a Software :
Web browser/mobile
document by browser
identifying, or Eg: Google chrome,
Firefox, Internet
tagging, different Explorer, Microsoft
Edge
document elements

Chapter 1 Introduction to Web Design and Development 25

 Displaying an HTML File XP
(continued)

Chapter 1 Introduction to Web Design and Development 26

 Introducing Element Attributes XP

• Element attributes provide additional information to

the browser about the purpose of the element
• The general syntax of an element attribute is
<element attr1= “value1” attr2=“value2” ...> content</element>

where attr1, attr2, etc. are the names of attributes associated with
the element and value1, value2, etc., are the attribute values.

Chapter 1 Introduction to Web Design and Development 27

The Style Attribute (chapter 4) XP

<h1 style=“text-align: center; color: red”>

Dave’s Devil Sticks
</h1>
28
 The Style Attribute XP

E.g. <h1 style="text-align: center; color: red">

Dave’s Devil Sticks
</h1>

https://www.w3schools.com/tags/tag_hn.asp
Chapter 1 Introduction to Web Design and Development 29
 &nbsp;&nbsp;&nbsp;

Handling White Space <br/> XP

• HTML file documents are composed of text characters and white space
• A white-space character is any empty or blank character such as a space,
tabs, or a line break
• You can use white space to make your file easier to read by separating one
code block from another https://
www.w3schools.com/code/tryit.asp?filename=GRR4Z2
QHIQJN

Chapter 1 Introduction to Web Design and Development 30

 Viewing HTML File in a Browser XP

• HTML
describes a
document’s
content and
structure, but
not its
appearance
• The actual
appearance of
the document
is determined
by style
sheets

Chapter 1 Introduction to Web Design and Development 31

 Creating the Document Head XP
https://www.w3schools.com/html/html_head.asp
• The document head contains metadata
• Metadata is the content that describes or provides information about how
the document should be processed by the browser

Chapter 1 Introduction to Web Design and Development 32

Setting the Page Title https://www.w3schools.com/tags/ta
g_title.asp
XP

About_AACS1193.html

Chapter 1 Introduction to Web Design and Development 33

Creating Base Element (cover after
XP
chapte 2) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_base_href

34
Creating Base Element <!DOCTYPE html>
<html>
<!DOCTYPE html> <head> XP
<html>
<head> </head>
  <base href="images3/"> <body>
</head> <h1> Without base href attribute</h1>
<body>
<p><img src="images3/stickman.gif" width="2
<h1>The base href attribute</h1> 4" height="39" alt="Stickman"> - Notice that w
e have only specified a relative address for th
<p><img src="stickman.gif" width="24" height="39" alt= e image. Since we have specified a base URL
"Stickman"> - Notice that we have only specified a relat  in the head section, the browser will look for t
ive address for the image. Since we have specified a b he image at "https://www.w3schools.com/ima
ase URL in the head section, the browser will look for t ges/stickman.gif".</p>
he image at "https://www.w3schools.com/images/stick <img src="images3/stickman.gif" width="24" h
man.gif".</p> eight="39" alt="Stickman"/>
<img src="stickman.gif" width="24" height="39" alt="Sti <img src="images3/stickman.gif" width="24" h
ckman"/> eight="39" alt="Stickman"/>
<img src="stickman.gif" width="24" height="39" alt="Sti <img src="images3/stickman.gif" width="24" h
ckman"/> eight="39" alt="Stickman"/>
<img src="stickman.gif" width="24" height="39" alt="Sti </body>
ckman"/> </html>
</body>
</html>

base element.html without base element.html 35

 XP
Adding Metadata to the Document
• Meta element is used for general lists of metadata values.
The meta element structure is https://www.w3schools.com/html/html_charset.asp
https://www.w3schools.com/charsets/default.asp
<meta attributes /> https://www.w3schools.com/tags/tag_meta.asp

Character encoding is the process by which a computer converts text into

a sequence of bytes and vice versa when it stores the text and when the
text is read. (00000001) binary /digital data
<meta charset="UTF-8">

<meta charset="ISO-8859-1">
All HTML5 and XML processors support UTF-8, UTF-16, Windows-1252, and ISO-8859.

36
 Adding Comments to Your
https://www.w3schools.com/html/html_comments.aspXP
Document
• A comment is descriptive text that is added to the HTML file but does not appear in
the browser window
<!-- comment -->
• Comments can be spread across several lines
• It is a good practice to always include a comment in the document head

Chapter 1 Introduction to Web Design and Development 37

 Adding Comments to your
XP
Document (continued)

https://www.w3schools.com/html/html_comments.asp

Chapter 1 Introduction to Web Design and Development 38

 Writing the Page Body XP

• HTML marks the major topical areas of a

page using sectioning elements also referred
to as semantic elements.

Chapter 1 Introduction to Web Design and Development 39

 https://www.w3schools.com/tags/tag_hn.asp

Creating Heading XP

• To mark a heading,
<hn>content</hn>
where n is an integer from 1 to 6 and content is the text of heading

Chapter 1 Introduction to Web Design and Development 40

Marking Paragraph Elements XP
https://www.w3schools.com/html/html_paragraphs.asp

• To mark a paragraph,
<p>content</p>

Chapter 1 Introduction to Web Design and Development 41

<body>
<header>
<a href="ct_start.html"><img src="ct_logo2.png" alt="Curbside Thai" /></a>
<nav>
XP
<ul>
<li><a href="ct_about.html">About</a></li>
<li><a href="ct_locations.html">Locations</a></li>
<li><a href="ct_menu.html">Menu</a></li>
<li><a href="ct_reviews.html">Reviews</a></li>
<li><a href="ct_catering.html">Catering</a></li>
<li><a href="ct_contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>About Us</h1>
<img src="ct_photo1.png" alt="" />
<p><strong>Curbside Thai</strong> brings the rich flavor of Thailand to North Carolina. Master Chef Sajja
Adulet, with over 35 years of experience at the House of Asia, now offers that same fine dining to the streets of
Charlotte with our modern mobile food truck.</p>
<p>This is not bland vendor food packaged in greasy paper boxes! Sample his acclaimed cuisine at our
various mobile locations throughout downtown Charlotte from 11 a.m. to 7 p.m. on Monday through Thursday,
and 11 a.m. to 11 p.m. on Friday and Saturday. Taste the difference! If you can't get away from your desk,
<em>Curbside Thai will deliver</em>.</p>
<p>Contact us to cater your next party and experience what <cite>Carolina Traveler</cite> calls <q>the
finest Asian food on or off the streets of Charlotte</q>.</p>
</article>
<footer>
Curbside Thai &#8226; 411 Belde Drive, Charlotte NC &nbsp; 28201 &#8226; 704-555-1151
</footer>
</body> 42
 Comparing Sections in HTML4 and HTML5 XP

Chapter 1 Introduction to Web Design and Development 43

Using Grouping Elements/ block –XP
level elements
• HTML elements are classified into
– Block elements (block –level elements), such as
paragraphs <p> or headings <h1>, address
<address>, division /container <div>or
– Inline elements, such as emphasized text or
inline images
Word <u> word </u>

Image <img>
Words image

Div=>block/box content -> words image word

44
Using Grouping Elements/ block –level XP
elements

Chapter 1 Introduction to Web Design and Development 45

Marking a Block Quote XP
https://www.w3schools.com/tags/tag_blockquote.asp

• The syntax for making an extended quote is

<blockquote>content</blockquote>

46
Using Text-Level Elements XP

https://www.w3schools.com/h
ml/html_formatting.asp

47
 XP
Marking Text-level Elements
• Display text in bold italic font :
<b><i>K-Pop Star</i></b>
output: K-Pop Star

• Display text in superscript or subscript:

x^Y output: xy
H₂O output: H2O
https://www.w3schools.com/ht
ml/html_formatting.asp

25
48
 Linking an HTML Document to a Style Sheet
XP
(chapter 3)
• A style sheet is a set of rules specifying how page elements are displayed; it is
written in the Cascading Style Sheet (CSS) language
• To link an HTML document to an external style sheet file, add the following
element:
<link href= “file” rel=”stylesheet” />

49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
XP
<meta name="keywords" content="Thai, restaurant, Charlotte, food" />
<title>About Curbside Thai</title>
<link href="ct_base.css" rel="stylesheet" />
<link href="ct_layout2.css" rel="stylesheet" />
</head>
<body>
<header>
<a href="ct_start.html"><img src="ct_logo2.png" alt="Curbside
Thai" /></a>
<nav>
Without <link>
<ul>
<li><a href="ct_about.html">About</a></li>
:
</ul>
</nav>
</header>
<article>
:
:

</article>
<footer>
Curbside Thai &#8226; 411 Belde Drive, Charlotte NC &nbsp; 28201
&#8226; 704-555-1151
</footer>
</body>
</html> (chapter 3) 50
 Working with Character Sets and Special XP
Characters

• Character set is a collection of characters and

symbols rendered by the browser
• Character encoding associates each character
from a character set that can be stored and
read by a computer program
• Character entity reference is also used to
insert a special symbol using the syntax
&char;
where char is the character’s entity reference

Chapter 1 Introduction to Web Design and Development 51

Working with Character Sets and Special Characters
XP
(continued 1)
• 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

Chapter 1 Introduction to Web Design and Development 52

Working with Character Sets and Special XP
Characters (continued 2)

Chapter 1 Introduction to Web Design and Development 53

Working with Character Sets and Special XP
Characters (continued 3)

https://www.w3schools.com/html/html_symbols.asp
https://www.w3schools.com/charsets/ref_emoji.asp

Chapter 1 Introduction to Web Design and Development 54

 Working with Inline Images XP

• To support embedded content, content imported

from another resource, HTML provides embedded
elements
• Inline images are images that are placed like text-
level elements in line with the surrounding content
• To embed an inline image into the document, use
<img src=“file” alt=“text” />

Chapter 1 Introduction to Web Design and Development 55

 XP

https://www.w3schools.com/html/html_attributes.asp
56
 XP

https://www.w3schools.com/html/html_attributes.asp
57
 Working with Lists XP

• List is a type of grouping element

• Ordered lists are used for items that follow some defined
sequential order, such as items arranged alphabetically or
numerically
• Unordered lists are used for lists in which the items have
no sequential order
• Description lists contain a list of terms and matching
descriptions
• Navigation lists are unordered lists of hypertext links
placed within the nav element

New Perspectives on HTML5 and CSS3, 7th Edition 58

 Ordered list XP

https://www.w3schools.com/html/html
_lists.asp

Chapter 1 : Introduction to Web Design and Development 59

 XP

https://www.w3schools.com/tags/tryit.asp?filename=try
html5_ol_reversed

Chapter 1 : Introduction to Web Design and Development 60

 Unordered list XP

https://www.w3schools.com/html/html_lists.asp

Chapter 1 : Introduction to Web Design and Development 61

 Nested list XP

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested

Chapter 1 : Introduction to Web Design and Development 62

 Description lists
XP

https://www.w3schools.com/html/html_lists.asp 63
Navigation lists XP

https://www.w3scho
ols.com/tags/tryit.as
p?filename=tryhtml5
_nav

• Navigation list
unordered lists
hypertext links p
within the nav e
64