Chapter 10.pptxWPDD202 Webpage Design & Development.docx

Chapter 10.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E
RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Resource Material
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
2
2

Chapter 10
Creating Interactivity with Social Media and JavaScript
3
Chapter Objectives
Understand social media
Identify and describe forms of social media
Understand and describe a blog
Understand JavaScript
Describe JavaScript code
Understand and use the script element
Understand where JavaScript code may be written
Chapter 10: Creating Interactivity with Social Media and
JavaScript
4
Chapter Objectives (continued)
Create an external JavaScript file
Describe pop-up windows
Understand and use the alert() method
Understand and use the open() method
Understand events
Use an onclick event handler
JavaScript
5
Using Social Media

Social Network
It is an online community where members post and exchange
social media content
It allows members to share information and ideas with fellow
online community members
It allows businesses to immediately connect with their
customers and potential customers and instantly engage them
with new product information
JavaScript
6
Using Social Media (continued 1)
Facebook
It is a social networking site with more than one billion users
Users include individuals and businesses
A business can create a Facebook page and use it to advertise
its products and services
Individuals can “like” a business by clicking a button to
indicate that they use or approve of a produce
Obtaining “likes” is a goal for most businesses, as this increases
its presence and positive perception
JavaScript
7
JavaScript
8

Twitter
It is a social networking site used to post short comments or
updates
Each post, known as a tweet, is limited to 140 characters
Customers have the option to follow a business on Twitter
It provides marketing opportunities for business to help with a
content strategy, to engage and obtain more customers, and to
measure marketing results in real time
JavaScript
9
JavaScript
10
Google+
A Google account is required to use it which can be created for
free at plus.google.com
Once an account is established, people are added to circles
Circles are groups or categories, such as friends, family, and
acquaintances
JavaScript

11
Google+
Businesses use Google+ to post special offers and pictures of
new products to share with their customers
Businesses have an added benefit because Google+ works with
Google’s search engine, increasing the probability of a potential
customer finding the business through Google’s search engine
JavaScript
12
JavaScript
13
YouTube
It is a social media website where members can upload and
share original videos and subscribe to a channel
Businesses purchase ad space on YouTube to attract its target
audience or create their own channel and upload videos
Business ads can be a banner image that is displayed on the
lower part of a video or a full-length commercial that plays
before the selected video

JavaScript
14
JavaScript
15
Using Social Media
(continued 10)
Instagram
It is a social networking site where members can upload and
share photographs, images, and video
It allows users to connect and express ideas with captivating
visual photography
The free app allows users to apply various filters to enhance
photographs, images, and video
Businesses use it to promote brand awareness
JavaScript
16
Using Social Media
(continued 11)
JavaScript
17

Using Social Media
(continued 12)
Pinterest
It allows members to browse and “pin” ideas found on the web
Users search for ideas for just about anything, including
recipes, crafts, photography, and do-it-yourself (DIY) projects
They can follow boards that interest them most and “pin”
photos, links, and comments to their own board for future use
JavaScript
18
Using Social Media
(continued 13)
JavaScript
19
Using Social Media
(continued 14)
Other Social Media Options
Other social media options for a business to explore include
LinkedIn, Quora, Tumblr, StumbleUpon, Flickr, Delicious,
Digg, Vine, Foursquare, and many more
The key is to determine which social media outlets are best for
a business in attracting new customers
A business owner must also consider the time involved with
keeping the social media current and relevant

JavaScript
20
Using Social Media
(continued 15)
Blogs
Are online journals, maintained by individuals, groups, or
businesses
“Blog” is short for a combination of the words web and log
Businesses use them to share new information and to keep their
customers engaged
Business owners who maintain blogs should respond to
customer comments on time and keep their blog content fresh
JavaScript
21
Using Social Media
(continued 16)
JavaScript
22
Using Social Media
(continued 17)
Adding Facebook and Twitter Links to a Website
Businesses that use social media display social media icons and
links on their website, which lets their customers know how to
connect with the business on social media

When users click a social media icon, they are redirected to the
social media page for the business
Social media links are typically included near the top or bottom
of a webpage
JavaScript
23
To Add Social Media Icons and Links to the Home Page
Figure 10–20 shows how to add social media icons and links to
a Home Page
JavaScript
24
Incorporating JavaScript
JavaScript
It is a scripting language that provides various types of
functionality to webpages, such as the ability to interact with
the user
Web developers use it to control webpages
It is a client-side scripting language, which means that the
browser interprets and renders the JavaScript
JavaScript
25
Incorporating JavaScript (continued)

JavaScript
Many mobile websites integrate an icon commonly called the
hamburger icon for use as a menu button
The hamburger icon consists of three, horizontal, parallel lines
and uses JavaScript to display a menu and allow users to select
an option
JavaScript
26
JavaScript Terminology
An object in JavaScript is programming code and data that can
be treated as its own entity
JavaScript objects have properties and methods
Properties are attributes that describe an object’s characteristics
JavaScript
27
JavaScript Terminology (continued 1)
As shown in the following example, an object name and its
property are separated by a period
myForm.fname.style.backgroundColor=“ #ff0000"
browser=chrome.appName
A value can be assigned to a property, or a property can return a
value
An object can be a property of a superior object
JavaScript
28

Table 10–1 contains a general list of the built-in JavaScript
objects common to many browsers
JavaScript
29
Methods
They are actions that an object can perform
Methods associated with the document object might be write
and open
An object and one of its methods would be written as follows:
document.write()
where document is the object and write is a method of the
document object
They are followed by parentheses, which may be empty or may
contain an argument
JavaScript
30
Argument
It is a value given to a method
Some methods require arguments, and others do not
Example:
document.write(“Good Morning”)
In this case, the argument “Good Morning” describes the text

content to display on the document
JavaScript
31
Function
It is a set of JavaScript statements that perform a specific task
It must include a name and statements that specify a task to be
performed
Example:
function myFunction () {
statement 1;
statement 2;
statement 3;
}
JavaScript
32
Variable
It is a container that holds a value
JavaScript uses variables to store values temporarily in internal
memory
A variable’s value can change, depending on the results of an
expression or data entered by a user in a form
Variables must have a unique name and must follow the same
naming conventions as user-defined functions
JavaScript

33
Event handler
Is used by JavaScript to associate an action with a function
An event is the result of an action, such as a mouse click
JavaScript event handlers make webpages more dynamic and
interactive by allowing JavaScript code to execute only in
response to a user action
JavaScript
34
Table 10–2 lists common event handlers
JavaScript
35
Writing JavaScript Code
The following syntax rules and guidelines should be followed
when writing JavaScript code
JavaScript is case sensitive
One-line comment and multiline comments are written as
follows:
// Single line comment syntax
/* Multiple line
comment syntax */
Semicolons are used to end JavaScript statements

JavaScript
36
Writing JavaScript Code (continued)
JavaScript can be written within an HTML page or as a separate
JavaScript file with the filename extension .js
When written within an HTML page, the code may be within the
head element or the body element
When created as an external .js file, place a script element in
the head element of the HTML file and specify the external .js
file as the file source shown as follows:
<script src="scripts/myfunction.js"></script>
JavaScript
37
Pop-up Windows
JavaScript is commonly used to create a pop-up window
Pop-up windows are a quick and simple way to add interactivity
and capture user attention
To add a pop-up window to an HTML page, use the script tags
and place the JavaScript code within the script element
The three types of pop-up windows in a webpage are alert box,
confirmation box, and prompt box
JavaScript
38
Pop-up Windows (continued 1)

Alert box
Is used to display a message
This can be useful for a business to grab the user’s attention
with information about a special promotion.
To create an alert box, use the alert() method
Example of an alert box code is as follows:
<script>
alert("Receive a 20% discount today!");
</script>
JavaScript
39
Confirmation box
It is used to confirm the user’s action using the confirm()
method
Example:
<script>
if (confirm("Do you wish to proceed?")) {
alert("You selected OK"); }
else {
alert("You chose to Cancel"); }
</script>
JavaScript
40
Prompt box
It captures information from a user and performs an action with
it and is created using the prompt() method

Example of a prompt box code is as follows:
<script>
var name = prompt("What is your name?");
if (name != null) {
alert("Hello " + name);}
else {
alert("You did not tell me your name. "); } </script>
JavaScript
41
To Add a Pop-up Window to the Home Page
Figure 10–36 shows how to add a pop-up window to the home
page
JavaScript
42
To Add a Pop-up Window to the Home Page (continued)
Figure 10–37 shows the pop-up window on the home page
JavaScript
43
To Create a Function in an External JavaScript File
Figure 10–39 shows the code to create a function in an external
JavaScript file

JavaScript
44
To Call a JavaScript Function
Figure 10–40 shows the code to insert a script element
JavaScript
45
To Call a JavaScript Function (continued 1)
Figure 10–41 shows the code to insert an event handler
JavaScript
46
To Call a JavaScript Function (continued 2)
Figure 10–42 shows the output when the Submit button is
clicked to trigger the onclick event handler
JavaScript
47

The open() Method
open()method
It is used to open a new browser window
Example:
window.open("http://www.cengage.com", "_blank",
"width=400, height=400");
In this example, a new window opens to the Cengage.com home
page
The _blank specifies to open the webpage in a new window
The width and height of the new window are set to 400 pixels
JavaScript
48
The open() Method (continued)
Table 10–3 lists commonly used attributes of the open() method,
which are used to define pop-up window features
JavaScript
49
kent.edu.au
ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code:
90458 ● TEQSA Provider Number: PRV12051
50

this is my main content area
© Fitness First Copyright | Privacy Policy |
Legal issues |
help & support | contact us
Reading Practice/3 Column CSS Layout.docx
3 Column CSS Layout
Let’s start by looking at the html structure for the page and then
look at the css used to layout the various elements. And once
again the html structure is quite simple.
<div id="page">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="action">Call To Action</div>
<div id="footer">Footer</div>
</div>
The only new element here is the Call to Action div, so called
because often you’ll place your calls to action in this right

column. As with the 2 Column Layout we have several divs all
enclosed within a container page div. Nothing really exciting
here so let’s move on to the css.
Page Div
div#page {
border:1px solid purple;
width:755px;
margin:0 auto;
padding:5px;
text-align:left;
position:relative
}
div {
text-align:center;
}
The css for the page div and for the generic div are exactly the
same as with the 2 column layout as you might expect with one
exception. I’ve added a position of relative to the page div. The
relative positioning actually doesn’t affect the page div at all in
how it’s displayed, but it will become important later when we
introduce our new column to the layout. I’ll save discussion of
this positioning until we reach that div.
Header Div
div#header {
border:2px solid red;
width:750px;
height:30px;
}
I’ve added nothing to the header div from the 2 column

example. You can read that post if you’re confused about
anything here. Yawn. When are we going to see something new?
Menu Div
div#menu {
border:2px solid green;
width:150px;
float:left;
margin:10px 0 10px 5px;
height:500px;
}
There are two minor changes in the menu div though essentially
it’s still the same as the last layout. I’ve reduced the width a
little to allow for the third column. I’ve also increased the
height just so it extends down the page. You may or may not
want to set the height in your design. Again to position the
menu I’ve floated it to the left. Like I said nothing really new.
Content Div
div#content {
border:2px solid blue;
width:400px;
margin:10px 0 10px 175px;
min-height:500px;
_height:500px
}
Believe it or not there’s really nothing new here with the
content div either. C’mon on already? When are we going to get
to the new stuff? Well I did reduce the width to make room for
the new column and since out menu column has also been
reduced in width I’ve decreased the left margin.

Again keep in mind we don’t want to use any css positioning on
the content div since we want it to remain in the normal
document flow to help control the position of the footer. A css
layout doesn’t always mean using css positioning on everything.
Again nothing new from last time. Hang on just a second more.
The new stuff is coming I promise.
Action Div
Finally something new. You knew it had to be new though since
this column wasn’t included in the 2 column layout huh? No
fooling you.
div#action {
position:absolute;
top:50px;
right:10px;
border:2px solid green;
width:150px;
margin:0;
height:500px;
}
The action div shares a little in common with the menu div in
its width and height. I even used the same border. The margin
has been set to 0 however since I used absolute positioning to
layout this column and didn’t need the margin to push the div
away from the page div border.
Like I just said the new column uses absolute positioning. At
least I think that was me. I know I heard it somewhere. The key
to css positioning is understanding where your element will sit
at the default positon of 0 for the top and the left. When
something is positioned in css its origin or (0, 0) position is at
the (0, 0) position of its containing positioned element. Huh?
Let’s use the specifics of this example to explain it again.
Here’s where that relative position on the page div comes in.

I’ve specified a top position of 50px and a right position of
10px. They key question though is 50px and 10px from where.
The action div is contained by the page div. The action div is
inside the page div so the page div is the container. Since I’ve
added a position: relative to the page div the container div also
has positioning and the origin in this case is the upper right
corner of the page div. It’s upper right since I’m setting the
action div at the top and the right. I could also have specified
bottom and left in which case the origin would be in the lower
left of the page div. I could have positioned the action div using
bottom and left just with different px amounts. It’s generally
easiest though to position things from the nearest corner.
Now had there been no relative position on the page div the
origin would be different. Instead of the upper right corner of
the page div the origin would have been the upper right of the
body. You can test this by grabbing the source and removing the
position from the page div. The action div should move further
to the top and right if you do. It will now be 50px and 10px
from the corner of your browser window. Remember that the
origin will be the closest containing div that is also positioned.
If none of the containing div.’s have positioning applied the
origin will ultimately be in the body of the page.
Footer Div
div#footer {
border:2px solid red;
width:750px;
height:30px;
}
Sadly there’s nothing at all new here. Not even a width change.
Maybe I should have changed the color of the border just to
have something I could say about the footer. I’ll just remind

you that since we’ve kept the content div as part of the normal
document flow the footer will always sit just below the content
div. The distance below will be the margin-bottom we applied
to the content div which here was 10px.
Conclusion
We really didn’t need to do a lot to add a third column to our 3
column css layout. We obviously needed to add the new div for
the 3rd column and used absolute positioning to place it in our
layout. We naturally had to allow for the space this column
would occupy so we reduced the width of the other 2 columns.
Pretty obvious stuff. The only trick here was to add relative
positioning to the page div, which made things easier, but
wasn’t necessary since we could have positioned the new div in
relation to the body instead.
I hope this 3 column layout as well as the previous 2 column
layout has helped to get you started on your own css layouts.
Neither layout needs to be complicated nor do I hope I’ve
simplified how to build their basic structure. To flesh out your
pages you would start adding things inside each of the divs,
much in the same way you might nest tables inside of other
tables. The difference here is that once you get used to using css
layouts you’ll find you have more control over how you can
layout your page than you would using tables. You’ll also find
you’ll use less code and spacer images as well as being able to
make the images you do include smaller. Your pages will load
faster and you’ll find your code easier to maintain. So get out
there and start practicing your 2 and 3 column css layouts.
Reading Practice/Reading 1 - Understand CSS page layout
basics.docx
Reading 1: Understand CSS page layout basics
Learn the basics of CSS page layout functions which use
cascading style sheet format, rather than traditional HTML

tables or frames, to organize the content on a web page.
The basic building block of the CSS layout is the div tag—an
HTML tag that in most cases acts as a container for text,
images, and other page elements.
When you create a CSS layout, you place div tags on the page,
add content to them, and position them in various places. Unlike
table cells, which are restricted to existing somewhere within
the rows and columns of a table, div tags can appear anywhere
on a web page. You can position div tags absolutely (by
specifying x and y coordinates), or relatively (by specifying
their distance from other page elements).
Creating CSS layouts from scratch can be difficult because
there are so many ways to do it. You can create a simple two-
column CSS layout by setting floats, margins, paddings, and
other CSS properties in a nearly infinite number of
combinations. Additionally, the problem of cross-browser
rendering causes certain CSS layouts to display properly in
some browsers and display improperly in others. Dreamweaver
makes it easy for you to build pages with CSS layouts by
providing some pre-designed layouts that work across different
browsers.
Using the pre-designed CSS layouts that come with
Dreamweaver is the easiest way to create a page with a CSS
layout, but you can also create CSS layouts using Dreamweaver
absolutely positioned elements (AP elements). An AP element
in Dreamweaver is an HTML page element—specifically, a div
tag, or any other tag—that has an absolute position assigned to
it. The limitation of Dreamweaver AP elements, however, is that
since they are absolutely positioned, their positions never adjust
on the page according to the size of the browser window.
If you are an advanced user, you can also insert div tags

manually and apply CSS positioning styles to them to create
page layouts.
About CSS page layout structure
Before proceeding with this section, you should be familiar with
basic CSS concepts.
The basic building block of the CSS layout is the div tag—an
HTML tag that in most cases acts as a container for text,
images, and other page elements. Figure 1 shows an HTML page
that contains three separate div tags: one large "container" tag,
and two other tags—a sidebar tag, and a main content tag—
within the container tag.
Figure 1. A. Container div B. Sidebar div C. Main Content div.
Here is the code for all three div tags in the HTML:

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in,
commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis
luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum

adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,
odio.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis
luctus rutrum, erat nulla fermentum diam, at nonummy
quam ante ac quam.</p>
</div>
</div>
In the above example, there is no “styling” attached to any of
the div tags. Without CSS rules defined, each div tag and its
contents fall into a default location on the page. However, if
each div tag has a unique id (as in the above example), you can
use the ids to create CSS rules that, when applied, change the
style and positioning of the div tags.
The following CSS rule, which can reside in the head of the
document or in an external CSS file, creates styling rules for the
first, div tag on the page, known as or container div tag:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
The #container rule styles the container div tag to have a width
of 780 pixels, a white background, no margin (from the left side
of the page), a solid, black, 1-pixel border, and text that is
aligned left. Figure 2 shows the results of applying the rule to
the container div tag.

Figure 2. Container div tag, 780 pixels, no margin A. Text
aligned left B. White background C. 1-pixel solid black border.
The next CSS rule creates styling rules for the sidebar div tag:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
The #sidebar rule styles the sidebar div tag to have a width of
200 pixels, a grey background, a top and bottom padding of 15
pixels, a right padding of 10 pixels, and a left padding of 20
pixels. (The default order for padding is top-right-bottom-left.)
Additionally, the rule positions the sidebar div tag with float
left—a property that pushes the sidebar div tag to the left side
of the container div tag. Figure 3 shows the results of applying
the rule to the sidebar div tag.
Figure 3. Sidebar div, float left A. Width 200 pixels B. Top and
bottom padding, 15 pixels.
Last, the CSS rule for the main container div tag finishes the
layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
The #mainContent rule styles the main content div with a left
margin of 250 pixels, which means that it places 250 pixels of
space between the left side of the container div, and the left
side of the main content div. Additionally, the rule provides for

20 pixels of spacing on the right, bottom, and left sides of the
main content div. Figure 4 shows the results of applying the
rule to the mainContent div.
Figure 4. Main Content div, left margin of 250 pixels A. 20
pixels left padding B. 20 pixels right padding C. 20 pixels
bottom padding
The complete code looks as follows:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in,
commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1>Main Content</h1>
elit. Praesent aliquam, justo convallis
luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum
adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate
at, odio.</p>
<h2>H2 level heading</h2>
elit. Praesent aliquam, justo convallis
luctus rutrum, erat nulla fermentum diam, at nonummy
quam ante ac quam.</p>
</div>
</div>
</body>
Note: The above example code is a simplified version of the
code that creates the two-column fixed left sidebar layout when
you create a new document using the predesigned layouts that
come with Dreamweaver.
Create a page with a CSS layout
When creating a new page in Dreamweaver, you can create one
that already contains a CSS layout. Dreamweaver comes with

different CSS layouts that you can choose from. Additionally,
you can create your own CSS layouts and add them to the
configuration folder so that they appear as layout choices in the
New Document dialog box.
Dreamweaver CSS layouts render correctly in all modern
browsers. To create a page with a CSS layout:
· Select File > New.
· In the New Document dialog box, select the Blank Page
category. (It's the default selection.)
· For Page Type, select the kind of page you want to create.
Note: You must select an HTML page type for the layout. For
example, you can select HTML or PHP. You cannot create a
CSS, Library Item, JavaScript, or XML with a CSS layout. Page
types in the Other category of the New Document dialog box are
also restricted from including CSS page layouts.
For Layout, select the CSS layout you want to use. The Preview
window shows the layout and gives a brief description of the
selected layout. The predesigned CSS layouts provide the
following types of columns:
· Fixed Column width is specified in pixels. The column does
not resize based on the size of the browser or the site visitor's
text settings.
· Liquid Column width is specified as a percentage of the site
visitor's browser width. The design adapts if the site visitor
makes the browser wider or narrower but does not change based
on the site visitor's text settings.
· Select a document type from the DocType popup menu.
· Select a location for the layout's CSS from the Layout CSS in
popup menu.
· Add To Head: Adds CSS for the layout to the head of the page
you're creating.
· Create New File: Adds CSS for the layout to a new external
CSS stylesheet and attaches the new stylesheet to the page

you're creating.
· Link to Existing File: Lets you specify an existing CSS file
that already contains the CSS rules needed for the layout. This
option is particularly useful when you want to use the same CSS
layout (the CSS rules for which are contained in a single file)
across multiple documents.
Do one of the following:
· If you selected Add to Head from the Layout CSS in popup
menu (the default option), click Create.
· If you selected Create New File from the Layout CSS popup
menu, click Create, and then specify a name for the new
external file in the Save Style Sheet File As dialog box.
· If you selected Link to Existing File from the Layout CSS in
popup menu, add the external file to the Attach CSS file text
box by clicking the Add Style Sheet icon, completing the Attach
External Style Sheet dialog box, and clicking OK. When you're
finished, click Create in the New Document dialog box.
· Note: When you select the Link to Existing File option, the
file you specify must already have the rules for the CSS file
contained within it.
· When you put the layout CSS in a new file or link to an
existing file, Dreamweaver automatically links the file to the
HTML page you're creating.
· Note: Internet Explorer conditional comments (CCs), which
help work around IE rendering issues, remain embedded in the
head of the new CSS layout document, even if you select New
External File or Existing External File as the location for your
layout CSS.
· (Optional) You can also attach CSS style sheets to your new
page (unrelated to the CSS layout) when you create the page. To
do this, click the Attach Style Sheet icon above the Attach CSS
file pane and select a CSS style sheet. (For a detailed walk-
through of this process, see David Powers's
article, Automatically attaching a style sheet to new documents.

Add custom CSS layouts to the list of choices
· Create an HTML page that contains the CSS layout you'd like
to add to the list of choices in the New Document dialog box.
The CSS for the layout must reside in the head of the HTML
page.
· Tip: To make your custom CSS layout consistent with the
other layouts that come with Dreamweaver, you should save
your HTML file with the .html extension.
· Add the HTML page to
the dw_rootConfigurationBuiltInLayouts folder.
· (Optional) Add a preview image of your layout (for example a
.gif or .png file) to the
dw_rootConfigurationBuiltInLayouts folder. The default
images that come with Dreamweaver are 227 pixels wide x 193
pixels high PNG files.
Tip: Give your preview image the same file name as your
HTML file so that you can easily keep track of it. For example,
if your HTML file is called myCustomLayout.html, call your
preview image myCustomLayout.png.
Chapter E10.pptx
ABN 49 003 577 302 CRICOS Code: 00161E

1
Resource Material
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
2
2
Creating Pop-Up Windows, Adding Scrolling Messages,
and Validating Forms
Chapter 10
3
Chapter Objectives
Write a JavaScript user-defined function to display a scrolling
message
Write a JavaScript user-defined function to validate form data
Write a JavaScript user-defined function to calculate a total
loan amount based on a sales amount and down payment
Write a JavaScript user-defined function to calculate monthly
loan payments

Chapter 10: Creating Pop-Up Windows, Adding Scrolling
Messages, and Validating Forms
4
4
Chapter Objectives
Define if and if...else statements, conditionals, and operands
Write a JavaScript user-defined function to format output in a
text field
Describe how to open a pop-up window
5
5
Plan Ahead
Determine what you want the code to accomplish
Determine the overall Web page appearance
Determine the data validation requirements
Determine the calculations needed
Chapter 10: Creating Pop-up Windows, Adding Scrolling
6
Creating a Form Text Field
to Display a Scrolling Message

7
7
Creating the scrollingMsg()
User-Defined Function
8
8
Incrementing a Variable
9
Entering the Code to Increment
the Position Locator Variable
10
10
Entering an If Statement

11
11
12
13
14
15

15
Adding the setTimeout() Method
to Create a Recursive Call
16
16
Objects and Associated Event Handlers
17
Entering the onLoad Event Handler to Call the scrollingMsg()
Function
18
18
Validating Forms Using Nested
if…else Statements

19
20
21
Using Built-In Functions to Validate Data
22
Using Built-In Functions to Validate Data
23

Adding the valSalesAmt() Function with Nested if…else
Statements to Validate Form Data
24
24
Entering the onBlur Event Handler to Call the valSalesAmt()
Function
25
25
Entering the CalcLoanAmt() User-Defined Function
26
26
Entering an onClick Event Handler to Call the CalcLoanAmt()
Function

27
27
Entering Code to Call the monthlyPmt() Function
28
28
Creating the monthlyPmt() Function
29
29
Split Method
30
Entering the
dollarFormat() Function

31
31
Using a while Loop an if…else Statement
32
for Loops and while Loops
33
Entering an if…else Statement and While Loop to Extract the
Dollar Portion of the Output and Insert Commas
34
34
Reconstructing the Formatted Output and Returning the

Formatted Value
35
35
Passing the Monthly Payment Value to the dollarFormat()
Function
36
36
Adding a Pop-Up Window
A pop-up window appears over the previously opened browser
window
37
37
Adding a Pop-Up Window

38
Entering the popUpNotice() Function
to Open a Pop-up Window
39
39
Adding the Event Handler to Call the popupNotice()Function
40
40
Displaying the Date Last Modified Using the substring()
Method
41
41

Chapter Summary
Write a JavaScript user-defined function to display a scrolling
message
Write a JavaScript user-defined function to validate form data
Write a JavaScript user-defined function to calculate a total
loan amount based on a sales amount and down payment
Write a JavaScript user-defined function to calculate monthly
loan payments
42
42
Chapter Summary
Define if and if...else statements, conditionals, and operands
Write a JavaScript user-defined function to format output in a
text field
Describe how to open a pop-up window
43
43
kent.edu.au

44
44
Chapter 08.pptx
ABN 49 003 577 302 CRICOS Code: 00161E
1
Resource Material
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
2

2
Chapter 8
Creating Tables and Forms
3
Chapter Objectives
Define table elements
Describe the steps used to plan, design, and code a table
Create a table with rows and data
Insert a table caption
Style a table for tablet and desktop viewports
Describe form controls and their uses
Chapter 8: Creating Tables and Forms
4
Chapter Objectives (continued)
Use the form and input elements
Create text input controls, labels, and check boxes
Create a selection menu with multiple options
Use the textarea element
Create a Submit button
Create a Reset button
5

Discovering Tables
Tables
Compare data or outline a detailed topic in a compact format
Consist of rows, columns, and cells
Row – It is a horizontal line of information
Column – It is a vertical line of information
6
Discovering Tables (continued 1)
Cell
It is the intersection of a row and a column and usually contains
data
The two types of cell are: a heading cell or a data cell
A heading cell displays text as bold and center-aligned
A data cell displays normal, left-aligned text and contains
information appropriate for the column and row
7
Discovering Tables (continued 2)
Figure 8–4 shows examples of the three elements: rows,
columns, and cells
8

Creating a Table with HTML Elements
Table 8–1 lists the HTML elements used to create a table
9
Creating a Table with HTML Elements (continued)
Creating a table on a webpage
The <table> and </table> tags indicate the starting and ending
of a table
The <tr> and </tr> tags indicate the starting and ending of each
table row
The <td> and </td> tags indicate the starting and ending tags
for data elements within the table row elements
10
Table Borders, Headers, and Captions
Table border – It is the line that defines the perimeter of the
table
Table header
It is a heading cell and identifies the row or column content
It is defined with a starting <th> tag and an ending </th> tag
11
Table Borders, Headers, and Captions (continued 1)
Table caption
It is a descriptive text that serves as a title or identifies the

table’s purpose
It is defined with a starting <caption> tag and an ending
</caption> tag
It is inserted after the starting <table> tag
A table can have only one caption
Tables can include headers and captions individually or in
combination
12
Figure 8–6 shows a table created with the following code, which
includes a table caption and table headers
<table>
<caption>College Course Recommendations by
Semester</caption>
<tr>
<th>Semester 1</th>
<th>Semester 2</th>
<th>Semester 3</th>
<th>Semester 4</th>
</tr>
13
<tr>
<td>English I</td>
<td>English II</td>
<td>Spanish I</td>
<td>Spanish II</td>
</tr>

<tr>
<td>College Algebra</td>
<td>College Geometry</td>
<td>Calculus</td>
<td>Trigonometry</td>
14
</tr>
<tr>
<td>Physical Science</td>
<td>Biology</td>
<td>Humanities</td>
<td>World History</td>
</tr>
</table>
15
16
Use of Tables
Tables
Display data in rows and columns
Should not be used to design a layout for a webpage

Help organize information so that it is easier for the user to read
Useful if the webpage needs to display a structured, organized
list of information
17
Planning the Table
To create effective tables
Plan the information that will appear in columns and rows
Create a design that presents the information clearly
When planning a table for responsive web design, give careful
consideration to the mobile viewport because of its screen size
18
To Add a Table Element to the Classes Page
19
Styling Table Elements
20
Styling Table Elements (continued)
Separated border
When a border is applied to table elements, by default, each cell

has its own border, making the table appear to use double lines
between each table data cell
Collapsed border
Use the border-collapse property with a value of collapse to
display a table with single, consolidated borders
21
To Style a Table for a Tablet Viewport
22
To Style a Table for a Tablet Viewport (continued 1)
23
24
25

To Style a Table for a Desktop Viewport
26
To Style a Table for a Desktop Viewport (continued 1)
27
To Style a Table for a Desktop Viewport (continued 2)
28
Creating Webpage Forms
Forms provide a structured way to collect information from
webpage visitors
Visitors complete webpage forms to register for an account or
to make a purchase.
Businesses use forms to gather visitor or customer information
and store it in a database for future use
29
Form Controls

All form elements are contained with the starting <form> tag
and the ending </form> tag
Input control – It is an interactive mechanism for users to enter
text or make selections on a form
A label is text describing the type of information to enter with
an input control.
Most controls in an HTML form are defined by using the type
attribute of the input element
30
Form Controls (continued 1)
Define other controls using separate elements, such as the
textarea and select elements
The two input controls are:
Data input control – It is used to make a selection or perform a
command
– Text input control – It accepts text, such as names, dates, and
passwords, and is called an input field
31
32
Each input control has attributes that are used more frequently
than the others:

name – It identifies the specific information that is being sent
when the form is submitted for processing. All controls have a
name
id – It provides a unique ID for the element. Use the id attribute
with input controls
value – It specifies the value of an input element and varies
depending on input type
33
Common input controls used with a form include text,
password, email, checkbox, select, submit, reset, etc.
Text input controls include the following types:
text box (text control), for small amounts of text
password text box (password control), for entering a password
email text box (email control), for entering an email address
34
telephone text box (tel control), for entering a telephone number
date text box (date control), for entering a date
text area box (textarea control), for larger amounts of text
These text input controls have two frequently used attributes:
size – It determines the width of the control in characters
maxlength – It specifies the maximum number of characters
accepted
35

Example:
The first line of the following code creates a 25-character text
box for the user’s last name and the second line creates an
eight-character text box for the user’s password:
<p>Last Name: <input name="lastname" type="text"
size="25"></p>
<p>Password: <input name="password type="password"
size="8"></p>
36
Password control – It is a text control as it provides a text box
for the password a visitor enters
Email control – It is a text box where visitors enter an email
address
Tel control – It is a text box where visitors enter a telephone
number
Date control – It is a text box that accepts a date
37
Textarea control – It creates a text box that allows multiple
lines of input
To create a textarea control, use the textarea element instead of
the input element
It has two primary attributes, which set the size of the textarea
control:
rows, which specifies the number of rows, or lines, in the

textarea control
cols, which sets the width of the textarea control as the number
of columns, with each column containing one character
38
The following is an example of HTML code defining a textarea
control:
<label>What products would you like to see us offer?</label>
<textarea name="feedback" rows="3" cols="100"></textarea>
39
Checkbox control
It allows a webpage visitor to select items from a list of one or
more choices
The following code is an example for two checkbox controls
that might appear on a form for a grocery store website
<input name="fruit" type="checkbox" value="apple“
checked="checked">Apple
<input name="fruit" type="checkbox"
value="peach">Peach
40
Radio control

It limits the webpage visitor to only one choice from a list of
choices
Each choice has a radio button, or option button, which appears
as an open circle
By default, all radio buttons are deselected
To set a particular button as the default, use the checked
attribute and value within the <input> tag
41
The following is sample code to create two radio controls that
might appear in a rental car website form:
<input name="car" type="radio" checked="checked"
value="car">Car
<input name="truck" type="radio" value="truck">Truck
A visitor can choose to rent a car or a truck, with the Car radio
button already selected when the form opens
42
Select control
It creates a selection menu from which the visitor makes one or
more choices and is suitable when a limited number of choices
are available
It appears on a form as a text box with a list arrow
The following is sample code for a select control:
<select name="station">
<option>Pandora</option>
<option>Internet Radio</option>
<option>Live365</option>

<option>Jango</option>
</select>
43
Submit button
It sends the form information to the appropriate location for
processing
When it is clicked on the form, the name of each control and the
value of its data are sent to the server to be processed
The submit control is created with the following code:
<input type="submit“ value="Submit">
44
Reset button
Clears any input entered in the form, resetting the input controls
to their defaults
A webpage form must include a submit control and a reset
control
The value attribute specifies the text that appears on the button
The reset control is created with the following code:
<input type="reset" value="Reset">
45
Figure 8–34 shows an example of a form with several input

controls, including text, email, tel, date, select, and textarea
46
Form Labels
They identify the type of information to enter into or select
from an input control
They are added to a form using the label element
To connect them to their controls, include the for attribute with
the same value as the input control’s id value
47
The following code creates a label and a text box for a visitor’s
first name:
<label for="fName">First Name:</label>
<input type="text" name="fName“ id="fName">
48
49

50
Form Processing
action
It is an attribute of the <form> tag that specifies the browser’s
action when submitting the form
Common Gateway Interface (CGI) script
It communicates with the web server and sends the information
on the webpage form to the server for processing
51
Form Processing (continued 1)
method
It is an attribute of the <form> tag that specifies how to send
the data entered in the form to the server to be processed
Get method
It appends the name-value pairs to the URL indicated in the
action attribute
Example of a form tag with the get method and specified action
is as follows:
<form method="GET“ action="formInfo.php">
52

Form Processing (continued 2)
Post method
It sends a separate data file with the name-value pairs to the
URL indicated in the action attribute
It is used very commonly because it can be used to send
sensitive form data and does not have a size limitation
Example of a form tag with the post method and specified
action is as follows:
<form method="POST“ action="formInfo.php">
53
Styling Forms
CSS styles are applied to forms to improve the appeal and
usefulness of the form and its controls
As with tables, consider forms in the context of responsive
design
Controls can be included to collect optional information, such
as product feedback, in tablet and desktop viewports
54
To Style a Form for a Desktop Viewport
55
To Style a Form for a Desktop Viewport (continued)

56
kent.edu.au
57
57
Chapter 04.pptx
ABN 49 003 577 302 CRICOS Code: 00161E
1

Resource Material
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
2
2
Chapter 4
Applying CSS Styles to Webpages
3
Objectives
Explain the importance of separating design from content
Describe Cascading Style Sheets (CSS)
Define inline, embedded, and external styles and their order of
precedence
Describe a CSS rule and its syntax
Explain the difference between a selector, property, and value
Chapter 4: Applying CSS Styles to Webpages
4
Objectives (continued)
Create styles that use text and color properties

Explain the difference between inline and block content
Describe the CSS box model and how to apply margins,
padding, and borders
Create an external style sheet and link it to an HTML page
5
Objectives (continued 1)
Create styles that use padding, border, and margin properties
Float an image
Create styles that use list properties
Add comments to an external style sheet
Validate a CSS file
6
Using Cascading Style Sheets
Style – It is a rule that defines the appearance of an element on
a webpage
Style sheet – It is the set of CSS style rules
Style sheets provide a means to separate style from content
because it gives the flexibility to redesign or rebrand a website
A single CSS style sheet file containing the defined styles can
be attached to several webpages to apply the styles to all the
attached pages
7
Inline Styles
Inline style – It is used to add a style to the start tag for an
element, such as a heading or paragraph, using the style
attribute

8
8
Embedded Style Sheets
An embedded style sheet, also called an internal style sheet,
includes the style sheet within the opening <head> and closing
</head> tags of the HTML document
9
9
External Style Sheets
An external style sheet – It is a CSS file that contains all of the
styles that can be applied to more than one page in a website
External style sheets are also called linked style sheets
An external style sheet is a text file with the .css extension
To apply an external style sheet, link it (or attach it) to a
webpage using a link in the head section of the webpage
10
External Style Sheets (continued)
External style sheet provides flexibility to quickly change
webpage formats because the styles used in it are applied to

every page linked to it
Changing the look of an entire website is sometimes called
reskinning the website
11
11
Style Sheet Precedence
Style sheets are said to “cascade” because each type of style has
a specified level of precedence (or priority) in relationship to
the others
CSS properties can be inherited from a parent element through a
principle called inheritance
If a selector has more than one CSS rule, specificity determines
which CSS rule to apply
12
A typical example of an inherited property is the color property.
Given the style rules:
13

14
CSS Basics
Each CSS rule consists of a selector and a declaration
15
15
CSS Basics (continued)
Selector – It is the part of the statement that identifies what to
style
Any HTML5 element such as body, header, nav, main, or footer
may be a selector
A selector may also be the value of an id or class attribute
The declaration defines the exact formatting of the style
16
CSS Basics (continued 1)
A declaration consists of a property and a value, separated by a
colon and followed by a semicolon
The property identifies the style quality or characteristic to
apply, such as
color (text color)

background-color
text-indent
border-width
font-style
17
For each property, the declaration includes a related value that
identifies the particular property value to apply
18
19
19
CSS Text Properties
20
20
CSS Text Properties (continued)

Fallback values – They are the additional values provided for
the font-family property in case the browser does not support
the primary font
CSS measures font sizes using many measurement units,
including pixels, points, and ems, and by keyword or percentage
21
21
CSS Text Properties (continued 1)
22
22
CSS Colors
HTML uses color names or codes to designate color values
Two types of color codes can be used with CSS:
Hexadecimal
RGB
Hexadecimal values consist of a six-digit number code that
corresponds to RGB (Red, Green, Blue) color values
23
CSS Colors (continued)
To use a color in a style rule declaration, use the color value as
the property value
For example, to style a background color as gray use,

background-color: #808080;
24
24
Understanding Inline Elements and Block Elements
HTML elements are positioned on the webpage as a block or as
inline content
A block element appears as a block because it starts and ends
with a new line, such as the main element or a paragraph
element
Inline elements are displayed without line breaks so they flow
within the same line
Inline content always appears within block elements
25
CSS Box Model
Each block element such as a header, nav, main, and footer
element is displayed in a browser as a box with content
The CSS box model describes content boxes on a webpage
26
26
CSS Box Model (continued)

Each content box can have margins, borders, and padding
The margin provides passive white space between block
elements or between the top or bottom of a webpage
The border separates the padding and the margin of the block
element
Padding is the passive white space between the content and the
border of a block element
27
CSS Box Model (continued 1)
28
28
Selectors
A style rule begins with a selector, which specifies the element
to style
A selector can be
an HTML element name
an id attribute value
a class attribute value
An id or a class selector is used to apply styles to p elements
29
Selectors (continued)
An id selector uses the id attribute value of an HTML element
to select a single element
For example, to style the div id="container" element, use

#container as the selector
#container {
border: solid 2px;
}
30
Selectors (continued 1)
A class selector is used to select elements that include a certain
class attribute
For example, to style class="mobile", use .mobile as the
selector
.mobile {
font-size: 10pt;
}
31
Selectors (continued 2)
A descendant selector is used to create style that applies to an
element contained within another element
For example, the following style rule sets the list-style property
to none for list items in an unordered list included in the
navigation area:
nav ul li {
list-style: none;
}
32
To Create a CSS File and a Style Rule for the Body Element

33
33
Linking an HTML Document to a CSS File
After creating a CSS file, link it to all the webpages that will
use its styles
Insert a link element on the HTML page within the <head> and
</head> tags
The link element uses two attributes:
rel
href
The rel attribute uses the stylesheet value to indicate that the
document is linked to a style sheet
34
Linking an HTML Document to a CSS File (continued)
The href attribute value specifies the file path or file name of
the CSS file
Following is an example of a link to a style sheet named
styles.css and stored in the css folder:
<link rel="stylesheet" href="css/styles.css">
The type="text/css" attribute and value is also commonly used
within a link element to reference a CSS file
35
Aligning Webpage Content
One way to align webpage content is to use the text-align
property, which applies to block elements
The text-align property can use left (the default), center, right,

or justify as its value
For example, the following rule centers an h1 element:
h1 {
text-align: center;
}
36
To Center Content
To center all of the elements of a webpage using a single style
rule, set the left and right margins to auto
In addition, set the width to 80% so that the elements do not
span 100 percent of the browser window
37
Creating Style Rules for Structural Elements
The header section appears at the top of a webpage and thus
needs formatting that makes the header contents stand out and
attract visitors to the page
The nav section should be formatted differently from the other
structural elements as it should be prominent and easy to find
on the webpage
The main section should be formatted using the display property
38
Creating Style Rules for Structural Elements (continued)
To apply text and box model properties to the main section and
have them appear as intended, the display property is used
Create a style rule that formats the footer section by defining
the font size, text alignment, and top margin of the footer
element

39
To Create a Style Rule for the Header Element
40
40
To Create a Style Rule for the Nav Element
41
41
To Create a Style Rule for the Main Element
42
42
To Create a Style Rule for the Footer Element
43

43
Creating Style Rules for Classes
Consider the following example:
<img class="equip" src="images/equipment1.jpg" alt="Weight
Equipment" height="195" width="260">
The img element displays the equipment1.jpg image
The first attribute and value, class="equip", assigns this element
to the equip class
Including the class="equip" attribute and value in each img
element helps format all the elements assigned to the equip
class with a single style rule
44
Creating Style Rules for Classes (continued)
For example, the following style rule adds 20 pixels of padding
to the right side of elements in the equip class:
.equip {
padding-right: 20px;
}
45
Creating Style Rules for Classes (continued 1)
To indicate a class name as a selector, include a period (.)
before the class name
Float property – It positions an element to the right or left of
other elements
Clear property – It removes the float effect from a webpage
46

Using CSS List Properties
The CSS list-style properties are used to control the appearance
of numbered and bulleted lists
Lists marked with the <ul> and </ul> tags display a solid bullet
before each list item
Lists marked with the <ol> and </ol> tags display Arabic
numerals (1, 2, 3, and so on) before the list items
For example,
ul {
list-style-type: square;
}
47
Using CSS List Properties (continued)
The default value for the list-style-position property is outside,
which displays the list item with a bullet or number outside of
the list’s content block as in the following text:
1. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
48
Using CSS List Properties (continued 2)
Using inside as the value displays the bullet or number inside
the list’s content block, as in the following text:
Morbi odio nisl, facilisis non
egestas a, tristique vitae neque.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
ul.a {
list-style-position: outside;

}
ul.b {
list-style-position: inside;
}
49
Adding Comments to CSS Files
Comments provide additional information about the area where
the styles are applied or other helpful explanations, such as
what the styles do
The syntax for a comment is as follows:
/* Place your comment here */
50
To Validate the CSS File
The following steps validate a CSS file
Open the browser and type http://jigsaw.w3.org/css-validator/ in
the address bar to display the W3C CSS Validation Service page
Tap or click the By file upload tab to display the Validate by
file upload information
Tap or click the Browse button to display the Choose File to
Upload dialog box
Navigate to your css folder to find the styles.css file (Figure 4–
41)
51

To Validate the CSS File (continued)
52
52
To Validate the CSS File (continued 1)
Tap or click the styles.css document to select it
Tap or click the Open button to upload the selected file to the
W3C CSS validator
Tap or click the Check button to send the document through the
validator and display the validation results page (Figure 4–42)
53
To Validate the CSS File (continued 2)
54
54
kent.edu.au
55

55
Chapter E4 Week 4.pptx
ABN 49 003 577 302 CRICOS Code: 00161E
1
Client server internet models and applications
Chapter E4
Network Overview
3
Network
two or more computers connected together for the
purpose of communicating and sharing resources
The Client/Server Model

4
Client/Server can describe a relationship between two computer
programs – the "client" and the "server".
Client
requests some type of service (such as a file or
database access) from the server.
Server
fulfills the request and transmits the results to the client
over a network
The Client/Server Model
5
The Internet Client/Server Model
Client: Web Browser
Server: Web Server
Internet Protocols
6
Protocols
› Rules that describe the methods used for clients and servers
to communicate with each other over a network.
There is no single protocol that makes the
Internet and Web work.
A number of protocols with specific
functions are needed.
Common Internet Protocols
7
Official Communication Protocol: TCP/IP
Specialized Protocols:

File Transfer: FTP
E-mail: SMTP, POP3, IMAP
Websites: HTTP
HTTP Hypertext Transfer Protocol
8
A set of rules for exchanging files such as text, graphic images,
sound, video, and other multimedia files on the Web.
Web browsers send HTTP requests for web pages and their
associated files.
Web servers send HTTP responses back to the web browsers.

HTTP Request
HTTP Response
IP Address
9
Each device connected to the Internet has a
unique numeric IP address.
These addresses consist of a set of four groups of numbers,
called octets.
74.125.73.106 will get you Google!
An IP address may correspond to a domain name.
Domain Name
10
Locates an organization or other entity on the Internet
Domain Name System
Divides the Internet into logical groups and
understandable names
Associates unique computer IP Addresses with the text-based
domain names you type into a web browser
Browser: http://google.com
IP Address: 74.125.73.106
Uniform Resource Indicator
11

URL
Uniform Resource Locator
Represents the address of a resource
on the Internet.
Top-Level Domain Name
12
A top-level domain (TLD) identifies the right- most part of the
domain name.
Some generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero,
.asia, .cat, .jobs, .name, .biz, .museum, .info,
.coop, .pro, .travel
County Code TLDs
13
Two character codes originally intended to indicate the
geographical location (country) of the web site.
In practice, it is fairly easy to obtain a domain name with a
country code TLD that is not local to the registrant.
Examples:
.tv, .ws, .au, .jp, .uk
See http://www.iana.org/cctld/cctld-whois.htm
Domain Name System
The Domain Name System (DNS) associates
Domain Names with IP addresses.
23

23
Domain Name
IP Address
Use TPC/IP
send HTTP Request
Web
Server
Web Browser
requests web page
Use TCP/IP
to send HTTP Responses
with web page files & images
Web Browser
displays web page
DNS

Markup Languages
SGML – Standard Generalized Markup
Language
› A standard for specifying a markup language or
tag set
HTML – Hypertext Markup Language
› The set of markup symbols or codes placed in a file intended
for display on a web browser.
Element or tag – individual markup code
Attribute – modifies the purpose of a tag
15
Markup Languages (2)
16
XML – eXtensible Markup Language
A text-based language designed to describe, deliver,
and exchange structured information.
It is not intended to replace HTML –
it is intended to extend the power of HTML by
separating data from presentation.
17
XHTML – eXtensible Hypertext Markup Language
Developed by the W3C as the reformulation of HTML 4.0
as an application of XML.

It combines the formatting strengths of HTML 4.0 and the data
structure and extensibility strengths of XML.
18
HTML 5
› The next version of HTML 4 and XHTML 1
Currently in draft status
Incorporates features of both HTML and XHTML
Adds new elements
Eliminates some elements
Intended to be backward compatible
›http://www.w3.org/html/
kent.edu.au
19
19
CSS Advanced Concepts.pptx
Cascading Style Sheets

1
C S S
What is CSS?
A simple mechanism for controlling the style of a Web
document without compromising its structure.
It allows you to separate visual design elements (layout, fonts,
colors, margins, and so on) from the contents of a Web page.
Allows for faster downloads, streamlined site maintenance, and
global control of design attributes across multiple pages.
2
CSS vs. just HTML
What can we do with CSS that we can’t do with HTML?
Control of backgrounds.
Set font size to the exact height you want.
Highlight words, entire paragraphs, headings or even individual
letters with background colors.
Overlap words and make logo-type headers without making
images.
Precise positioning.
Linked style sheets to control the look of a whole website from
one single location.
And more.
3
How to write CSS?

Selector
HTML element tags
(examples: p, h2, body, img, table)
class and ID names
Property (examples: color, font-size)
Value (examples: red, 14pt)
4
How to write CSS:
The basic syntax of a CSS rule:
selector {property 1: value 1; property 2: value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before each value!
5
Three ways to include CSS:
Local (Inline)
Global (Embedded, or Internal)
Linked (External)
6
1. Local
Inline style sheet.
Placed inside tags.
Specific to a single instance of an html tag on a page.
Must be used instead of <font> tags to specify font size, color,
and typeface and to define margins, etc.
Use to override an external or embedded style specification.

7
Local (inline)
Example
<p style="font-size: 10pt; color: red; font-weight: bold;
font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>
8
On the browser:
2. Global
Embedded or internal style sheet
Applicable to an entire document
Styles are defined within the <style> </style> tag, which is
placed in the header of the html file (i.e., within <head> and
</head>).
9
Global (Internal)
Example:
<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>

</html>
10
3. Linked
External style sheet
Styles are saved in a separate file, with the extension .css
This single stylesheet can be used to define the look of multiple
pages.
11
Linked (External)
Example
12
p {font-family: verdana, sans-serif; font-size: 12pt; color: red}
h1 {font-family: serif; font-size: 14pt; color: green}
h2 {font-family: serif; font-size: 11pt; color: blue}
Save this text file as whatever.css
In TextPad,Notepad, etc.…
Linked (External)
Example (continued)
To apply the stylesheet “whatever.css“ to an HTML
document, call it in from the header:

<head>
<link rel="stylesheet" href=“whatever.css" type="text/css">
</head>
13
Inheritance: which style prevails when several are present?
Inline (local) overrides internal (global)
Internal (global) overrides external (linked).
14
Cascading
The way styles will be used when there is more than one
style specified for an HTML element:
Browser default
External Style Sheet (Linked) (in an external .css file)
Internal Style Sheet (Global, or embedded) (inside the <head>
tag)
Inline Style (Local) (inside HTML element)
An inline style (inside an HTML element) has the highest
priority, which means that it will override every style declared
inside the <head> tag, in an external style sheet, and in the
browser (default value).
15
Let’s try this now!
<h1 style=“text-align: center; font-weight:bold; color: blue”>
Styling with CSS! </h1>
<p style="font-size: 10pt; color: red; font-weight: bold; font-

family: Arial, Helvetica, sans-serif“ >
Write whatever you want here </p>
16
Grouping properties
Separate properties with a semi-colon
Example:
p {text-align:center;color:red; font- family:Arial;
font-style:italic}
17
Grouping selectors
Separate selectors with a comma
Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
Separate selectors with a space
Example:
p li { color: red }
(only items within a list and a paragraph tag will be
red)
18
The class Selector
With a class selector you can define different styles for the
same type of HTML element
Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}

Then use the class in your HTML code :
<p class="right"> This paragraph will be right-aligned,
italic, and red. </p>
<p class=“blue"> This paragraph will be center-aligned
and blue. </p>
19
The class Selector
You can also omit the tag name in the selector to define a style
that will be used by all HTML elements that have this class.
Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem" will be center-
aligned and italic.
20
The class Selector
Example (continued)
Both elements below will follow the rules in the ".poem“
class:
<h1 class=“poem"> This heading will be center-aligned
and italic </h1>
<p class=“poem"> This paragraph will also be center-
aligned and italic. </p>
21
Class Example
<style>

p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>
The tags and classes can then be used in combination:
<h1 class=“boldred">This is rendered as 30-point red serif bold
text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif
bold text.</p>
22
Applying styles to portions of a document:
<div>
A division tag: to “package” a block of document into one unit.
It defines a block element.
Causes a line break, like <br> and <p>.
<span>
“Wraps” a portion of text into a unit, but doesn't cause a line
break. Allows styles to be applied to an 'elemental' region (such
as a portion of a paragraph).
23
Example
<p><span class="foo">This text is rendered as foo-
style</span> and this is not. </p>
<div class="foo">
<p>The "foo" style will be applied to this text, and to <a
href="page.html">this text</a> as well.

</div>
24
List of style Selectors and their Properties and Values:
From WDG:
http://www.htmlhelp.com/reference/css/properties.html
25
Properties - Font
font-family
Name, or serif, sans-serif, cursive, monospace
font-style
normal, italic
font-weight
normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size
absolute-size, relative-size, length, percentage
font-variant
small-caps
26
Properties - Text
text-decoration
underline, line-through
text-transform
capitalize, uppercase, lowercase, none
text-align
left, right, center, justify
text-indent
<length>, <percentage>

27
Properties - Position
position
absolute, relative
top
<length>, <percentage>, auto
left
<length>, <percentage>, auto
Z-index
<number>, auto
28
A few more details about positioning
29
Positioning
Upper left corner corresponds to (0,0)
The value of top, bottom, right, left
can be expressed in:
Length (measured in px, em, etc…)
Percentage of the parent’s width
30
(0,0)
Y
X
The z-index
stacking order is called the z-index.

If elements overlap each other, the one with the higher z-index
appears on top.
Example:
.topElement {position: absolute; z-index=2; top:0px; left:0px;
font-size:36pt; color:red}
31
CSS Examples:
<h1 style="color: white; position: absolute; bottom: 50px; left:
50px; z-index: 2"> Text in front.</h1>
Positioning: Example
Stacking: Example
Shadowing: Example
32
(0,0)
Y
X
Using Boxes and Positioning for layout
33
In a box:
Margins are always transparent.
Borders come in various styles.
Background settings:
the area just inside the borders
includes both the padding and content areas.

34
Examples
img { border-style: ridge;
border-width: 20px;
border-color:red green blue purple}
35
h1 {background-color: #CC66FF;
width: 50%;
padding: 20px}
H1,50% ,purple background
Border values
36
Backgrounds
background-color
Hex
background-image
URL(image.jpg)
background-repeat
No-repeat, repeat-x, repeat-y
background-attachment
Fixed, scroll
background-position
Top, left
p { background-position: 70px 10px; background-repeat: repeat-
y; background-image: url(background.gif) }

37
Example
Background repeat examples:
38
Scroll Bar Color
Example:
<style>
body { color:black;
…
Chapter 01.pptx
ABN 49 003 577 302 CRICOS Code: 00161E
1
Resource Material

ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
2
2
Chapter 1
Introduction to the Internet and Web Design
3
Chapter Objectives
Define the Internet and associated key terms
Recognize Internet protocols
Discuss web browsers and identify their main features
Describe the types and purposes of websites
Plan a website for a target audience
Define a wireframe and a site map
Explain how websites use graphics, navigation tools,
typography, and color
Design for accessibility and multiplatform display
Chapter 1: Introduction to the Internet and Web Design
4

4
Chapter Objectives
Define Hypertext Markup Language (HTML) and HTML
elements
Recognize HTML versions and web
Identify web authoring tools
Download and use a web authoring tool
Create and view a basic HTML webpage
5
5
Exploring the Internet
The Internet is a worldwide collection of computers linked
together for use by organizations, and individuals using
communications devices and media
A node is any device, such as a computer, tablet, or smartphone,
connected to a network
A network is a collection of two or more computers linked
together to share resources and information
The Internet of Things describes the ever-growing number of
devices connecting to a network, including televisions and
appliances
6
6
Exploring the Internet

Data lines that connect networks allow data to move from one
computer to another
The Internet backbone is a collection of high-speed data lines
that connect major computer systems located around the world
An Internet Service Provider (ISP) is a company that has a
permanent connection to the Internet backbone
7
World Wide Web
The World Wide Web, also called the web, is the service that
provides access to information stored on web servers
The web consists of a collection of linked files known as
webpages
A website is a related collection of webpages created and
maintained by a person, company, educational institution, or
other organization
8
8
World Wide Web
A home page is the first document users see when they access a
website
A hyperlink, commonly called a link, is an element that
connects one webpage to another webpage on the same server or
to any other web server in the world
Chapter 1: Introduction to HTML, XHTML, and CSS
9

World Wide Web
10
Source: www.ed.gov
This figure explains the appearance of a website.
The first section reads “U.S. Department of Education”. A
rectangular box labeled “home page” is positioned next to the
first section. An arrow originating from the first rectangular box
points to the first section.
The second section shows 4 sub sections that reads “Student
Loans”, “Grants”, “Laws” and “Data”. A rectangular box
labeled “links indicate purpose of website” is positioned to the
left of the second section. An arrow originating from the second
rectangular box points to the second section.
The third section reads “How Do I Find” under which there is a
list of key terms that provides information that is available on
the website. A rectangular box labeled “links to content on the
website” is positioned to the right of the third section. An arrow
originating from the third rectangular box points to the third
section.
10
Protocols
A protocol is a set of rules that defines how a client workstation
can communicate with a server
A server is the host computer that stores resources and files for
websites
Hypertext Transfer Protocol (HTTP) is a set of rules for
exchanging text, graphics, audio, video, and other multimedia
files on the web

File Transfer Protocol (FTP) is used to exchange files from one
computer to another over the Internet
This protocol does not provide a way to view a webpage
11
11
Protocols
Transmission Control Protocol/Internet Protocol (TCP/IP) is a
pair of protocols used to transfer data efficiently over the
Internet by properly routing it to its destination
Internet Protocol (IP) ensures data is sent to the correct location
The Domain Name System (DNS) associates an IP address with
a domain name
12
Web Browsers
A web browser is a program that interprets and displays Web
pages and enables you to view and interact with a Web page
Microsoft Internet Explorer, Mozilla Firefox, Google Chrome,
and Apple Safari
A Uniform Resource Locator (URL) is the address of a
document or other file accessible on the Internet
http://www.cengagebrain.com/shop/index.html
A domain is an area of the Internet a particular organization or
person manages.
13

13
Web Browsers
14
This figure explains the URL in a browser’s address bar.
The first part of the URL reads “http://”. A rectangular box
labeled “protocol” is positioned above the URL. An arrow
originating from the first rectangular box points to the first part
of the URL.
The second part of the URL reads ”www”. A rectangular box
labeled “subdomain” is positioned above the URL. An arrow
originating from the second rectangular box points to the second
part of the URL.
The third part of the URL reads “cengagebrain.com”. A
rectangular box labeled “server or domain name” is positioned
above the URL. An arrow originating from the third rectangular
box points to the third part of the URL.
The fourth part of the URL reads “/shop”. A rectangular box
labeled “webpage location” is positioned above the URL. An
arrow originating from the fourth rectangular box points to the
fourth part of the URL.
The fifth part of the URL reads “/index.html”. A rectangular
box labeled “webpage file name” is positioned above the URL.
An arrow originating from the fifth rectangular box points to
the fifth part of the URL.
The URL “http:// www. cengagebrain.com/shop/index.html” is
entered in the address bar. A rectangular box labeled “URL” is
positioned below the address bar. An arrow originating from the

sixth rectangular box points to the URL in the address bar.
14
Types of Websites
An Internet site is another term for a website that is generally
available to anyone with an Internet connection
An intranet is a private network that uses Internet technologies
to share company information among employees
An extranet is a private network that uses Internet technologies
to share business information with select corporate partners or
key customers
15
15
Types of Websites
Many company websites also support electronic commerce (e-
commerce), which is the buying and selling of goods and
services on the Internet
Educational institutions use a Learning Management System
(LMS) to simplify course management
An LMS is a web-based software application designed to
facilitate online learning
16
Planning a Website
Purpose of the website — The purpose of a commercial business
website is related to the goal of selling products or services
Target Audience — The people who use the website are known

as the target audience
Knowing their general demographic background will help to
design a website appropriate for them
Multiplatform Display —A responsive design of a website must
be created that provides an optimal viewing experience across a
range of devices
17
Wireframe
A wireframe is a simple, visual guide that clearly identifies the
location of main webpage elements
Active white space is an area on the page that is intentionally
left blank
Passive white space is the space between content areas
Helps a user focus on one part of the page
18
Wireframe
19
The image describes a wireframe sketch for webpages, using
lines and boxes.
The first layer of the wireframe consists of a square box and a
horizontal rectangular box. The first square box reads “Logo”.
A rectangular box labeled “appealing graphic or text” is
positioned to the left of the square box. An arrow originating
from the rectangular box points to the square box. The

horizontal rectangular box reads “Navigation”. A second
rectangular box labeled “tabs or buttons with short text links for
navigating site” is positioned to the right of the horizontal
rectangular box. An arrow originating from the second
rectangular box points to the horizontal rectangular box.
The image shows space between the first and the second layers
of the wireframe. A rectangular box labeled “passive white
space” is positioned to the left of the space in the image. An
arrow originating from the third rectangular box points to the
space.
The second layer of the image consists of a second horizontal
rectangular box. A rectangular box labeled “heading or
advertisement” is positioned to the left of the second horizontal
rectangular box. An arrow originating from the fourth
rectangular box points to the second horizontal rectangular box.
The image shows space between the second and the third layers
of the wireframe. A rectangular box labeled “passive white
space” is positioned to the left of the space in the image. An
arrow originating from the fifth rectangular box points to the
space.
The third layer of the image consists of a three vertically
elongated rectangular boxes and one big square box. Two of the
vertically elongated rectangular boxes are placed top and
bottom to the left of the big square box. They read “Image”.
The big square text box reads “Text area”. A rectangular box
labeled “headings and main written content” is positioned to the
left of the space in the image. An arrow originating from the
sixth rectangular box points to the big square box in the center.
The third vertically elongated rectangular box to the top right of
the big square box read “Article”. A rectangular box labeled
”content related to main content” is positioned to the right of
the third vertically elongated rectangular box. An arrow
originating from the seventh rectangular box points to the
vertically elongated rectangular box labeled “Article”. There is
blank space below the third vertically elongated rectangular
box. A rectangular box labeled “active white space” is

positioned to the right of the image. An arrow originating from
the eighth rectangular box points to the blank space below the
box labeled “Article”.
The fourth layer of the wireframe consists of a horizontal
rectangular box. A horizontal rectangular box reads “Footer”. A
rectangular box labeled “legal matter and contact details” is
positioned to the left of the horizontal rectangular box. An
arrow originating from the ninth rectangular box points to the
horizontal rectangular box.
19
Site Map
A site map is a planning tool that lists or displays all the pages
on a website and indicates how they are related to each other
It shows the structure of a website
20
Site Map
A linear website structure connects webpages in a straight line
21
The image explains a linear structured webpage.
The first rectangular box reads “Home Page”.
A second rectangular box to the right of the first rectangular
box is labeled “Training module 1”. A bi-directional arrow is
positioned between the first rectangular box and the second

Chapter 10.pptxWPDD202 Webpage Design & Development.docx

Chapter 10.pptxWPDD202 Webpage Design & Development.docx

Recommended

Recommended

More Related Content

Similar to Chapter 10.pptxWPDD202 Webpage Design & Development.docx

Similar to Chapter 10.pptxWPDD202 Webpage Design & Development.docx (20)

More from zebadiahsummers

More from zebadiahsummers (20)

Recently uploaded

Recently uploaded (20)

Chapter 10.pptxWPDD202 Webpage Design & Development.docx