Chapter 1 - Introduction To Web Design and Development

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

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

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

XP
6
• Google server
XP
(supercomputer/
mainframe) –hosting
server
7
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

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

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

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

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

The History of HTML XP

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

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.

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

The Structure of an HTML5 Document
XP
17
Exploring an HTML File XP

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>

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

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

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

Displaying an HTML File XP
(continued)

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.

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

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

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

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

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

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

• Comments can be spread across several lines
• It is a good practice to always include a comment in the document head

Adding Comments to your
XP
Document (continued)
https://www.w3schools.com/html/html_comments.asp

Writing the Page Body XP
• HTML marks the major topical areas of a

page using sectioning elements also referred
to as semantic elements.

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

Marking Paragraph Elements XP
https://www.w3schools.com/html/html_paragraphs.asp
• To mark a paragraph,
<p>content</p>

<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 • 411 Belde Drive, Charlotte NC 28201 • 704-555-1151
</footer>
</body> 42
Comparing Sections in HTML4 and HTML5 XP

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

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<sup>Y</sup> output: xy
H<sub>2</sub>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 • 411 Belde Drive, Charlotte NC 28201
• 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

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

Characters (continued 2)

Characters (continued 3)
https://www.w3schools.com/html/html_symbols.asp
https://www.w3schools.com/charsets/ref_emoji.asp

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

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

Unordered list XP
https://www.w3schools.com/html/html_lists.asp

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

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

Chapter 1 - Introduction To Web Design and Development

Uploaded by

Copyright:

Available Formats

Chapter 1 - Introduction To Web Design and Development

Uploaded by

Document Information

Original Description:

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

Chapter 1 - Introduction To Web Design and Development

Uploaded by

Copyright:

Available Formats

XP

Web Design and Development

Chapter 1 Introduction to Web Design and Development 2

Chapter 1 Introduction to Web Design and Development 3

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

Chapter 1 Introduction to Web Design and Development 4

Chapter 1 Introduction to Web Design and Development 5

Chapter 1 Introduction to Web Design and Development 8

Chapter 1 Introduction to Web Design and Development 9

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

Web site ->www.tarc.edu.my

Chapter 1 Introduction to Web Design and Development 10

file written in HTML Tool/ software:

Chapter 1 Introduction to Web Design and Development 11

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

Chapter 1 Introduction to Web Design and Development 12

Chapter 1 Introduction to Web Design and Development 13

• Basic text editor such as Windows Notepad

Chapter 1 Introduction to Web Design and Development 14

File name: Today is Monday

Chapter 1 Introduction to Web Design and Development 15

Chapter 1 Introduction to Web Design and Development 16

Chapter 1 Introduction to Web Design and Development 18

• The first line in an HTML file is the document

Chapter 1 Introduction to Web Design and Development 19

• Element tag is the fundamental building block in

Empty elements (one-sided tag)

two-sided element tag

Chapter 1 Introduction to Web Design and Development 22

-The basic structure of an HTML5 document

• As you continue modifying the HTML code, you

Chapter 1 Introduction to Web Design and Development 24

Chapter 1 Introduction to Web Design and Development 25

Chapter 1 Introduction to Web Design and Development 26

• Element attributes provide additional information to

Chapter 1 Introduction to Web Design and Development 27

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

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

Handling White Space <br/> XP

Chapter 1 Introduction to Web Design and Development 30

Chapter 1 Introduction to Web Design and Development 31

Chapter 1 Introduction to Web Design and Development 32

Chapter 1 Introduction to Web Design and Development 33

base element.html without base element.html 35

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

Chapter 1 Introduction to Web Design and Development 37

Chapter 1 Introduction to Web Design and Development 38

• HTML marks the major topical areas of a

Chapter 1 Introduction to Web Design and Development 39

Chapter 1 Introduction to Web Design and Development 40

Chapter 1 Introduction to Web Design and Development 41

Chapter 1 Introduction to Web Design and Development 43

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

Chapter 1 Introduction to Web Design and Development 45

• The syntax for making an extended quote is

• Display text in superscript or subscript:

• Character set is a collection of characters and

Chapter 1 Introduction to Web Design and Development 51