Week

Web Development Week02

2

Campbell, J., 2018, Web Design: Introductory (6ed), Cengage, Boston, MA, ISBN 978-1-
337-27793-8
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a
license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
This Weeks Lecture

• Describe the advantages of web publishing

• Discuss basic web design principles

• Familiar with HTML5

Advantages of Web Publishing

• Web publishing offers distinct advantages over print

1. Currency

2. Connectivity

3. Interactivity

4. Cost

5. Delivery

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed
with a certain product or service or
1. The Currency Advantage
• Websites can be updated
continuously, while print
publications are only as current as
their date of publication
• To keep visitors on your site,
always supply timely, changing
material
• Use Connectivity tools to
communicate with customers
and enable social media
sharing
2. The Connectivity Advantage
• The web’s connectivity advantage,
or ability to instantaneously
distribute and share content
• Content aggregators
• Digg
• StumbleUpon
• Streamline the writing process
3. The Interactivity Advantage
• Internet and web technologies
promote data and resource
sharing
• Page of contact information
• Links to blog, Twitter feed,
Facebook page
• Account signups
• Web-based forms
• Comments
4. The Cost Advantage

• Updating web content is more cost effective than updating print content
• Web publishing costs do not vary based on length, color, or design
complexity.
• Developing a website can be expensive:
• Web design
• Content writing or adaptation
• Multimedia development
• Website hosting
• Domain name registration
• Promotional Services
5. The Delivery Advantage

• Distributing information via the web can be fast and inexpensive

• With the same immediacy and cost, the web can reach both global and local
audiences

• Consider the web when the need exists for economical and rapid distribution of
information

• Use your website to expand upon printed content

Basic Web Design Principles

Balance and Contrast and

proximity focus

Unity and
visual identity
Balance and Proximity

• Arrange web elements symmetrically (centered and balanced) to suggest a

conservative, safe, peaceful atmosphere
• Arrange web elements asymmetrically (off balance) to create an energetic
mood
• Asymmetrical designs typically do not adapt well to mobile devices
• Proximity (closeness) is closely associated with balance
• Elements that have a relationship should be placed close to each other
• White space can help define proximity and organize webpage elements
Balance and Proximity
Contrast and Focus

• Contrast is a mix of elements to stimulate attention

• Use different text styles, colors, and size
• Focus is the center of interest or activity
• A webpage needs a focal point
• Create webpages with contrast to elicit awareness and establish
a focal point, the center of interest
or activity
 Unity and Visual Identity

• All pages at a website must have unity, a sense of oneness or belonging, to

create the visual identity
• Create unity with consistency and repetition throughout a website
• Unity is associated with branding
• Branding specifications
• Tag line
• Alignment is the arrangement of
objects in fixed or
predetermined positions
• Using grids for layout is part of
RWD
Color as Web Design Tool

• Color can be a powerful design tool

• Reinforces branding
• Brings focus
• Increases contrast
• Improves readability
• Sets mood
The Color Wheel
• The color wheel can help you
choose effective and appealing
color combinations

• Complementary colors
The RGB Color System

• Monitors project color using the RGB color

system
• Combines red, green, and blue light
• Levels of intensity are
measured from 0 to
255
• Values
• A monitor’s color
depth is the actual
number of colors that
a
• monitor displays
• The hexadecimal
system uses 16
symbols to signify
values
Target Audience Expectations

• Certain colors have come to symbolize qualities

• Keep in mind the qualities generally associated with different

• colors when selecting colors for your website

• Review several commercial and noncommercial website color schemes

More theory next week. Lets have a look at HTML and
CSS
What is HTML?

• document markup language

• describes structure of web pages
• early 1990's Tim Berners-Lee created “HTML Tags”
• mid 2010's HTML5 standardised
• https://html.spec.whatwg.org/ (huge / complex)
• more accessible
• https://www.w3schools.com/
• https://developer.mozilla.org/
Closer look at HTML

• elements marked by <tags>

• opening <> and closing </> tags
• must nest correctly
• attributes provide more information
lang=”en”
• browser constructs DOM (Document
Object Model)
• use validation / lint tools to check
syntax
• https://html5.validator.nu/
Under the Hood of a Web Page
• DTD – describes the markup language syntax

• HTML element– contains the web page document

• Head element – contains the head section

• The head section contains information that describes the web page document

• Title element– Text displays in title bar of window

• Body element – contains the body section

• The body section contains the text and elements that display in the browser
viewport.
The Heading Element

• <h1>Heading Level 1</h1>

• <h2>Heading Level 2</h2>
• <h3>Heading Level 3</h3>
• <h4>Heading Level 4</h4>
• <h5>Heading Level 5</h5>
• <h6>Heading Level 6</h6>
The Paragraph Element <p> tag

• Paragraph element
• <p> …paragraph goes here… </p>

• Groups sentences and sections of text together.

• Configures empty space above and below the paragraph
The Line Break Element <br> tag

• Line Break element

• Stand-alone tag
• Called a void element in HTML5

• …text goes here <br>

This starts on a new line….

• Causes the next element or text to display on a new line

The Horizontal Rule Element <hr> tag

• Horizontal Rule element

• void element

• <hr >

• Configures a horizontal line on the page

• In HTML5, it should be used to indicate a thematic break at the paragraph
level
The Blockquote Element <blockquote>

• Blockquote element
• Indents a block of text for special emphasis

• <blockquote>
• …text goes here…
• </blockquote>
Phrase Elements

• Indicate the context and meaning of the text

• Display inline with the text

• Common Phrase Elements

• <b></b> : Text is displayed in bold font

• <strong></strong> : Text has strong importance and is displayed in bold

• <i></i>: Text is displayed in italic font

• <em></em> : Text has emphasis and is displayed in italic font

Proper Nesting

• CODE:
• <p><i>Call for a free quote for your web development needs:
<strong>888.555.5555 </strong></i></p>

• BROWSER DISPLAY:

• Call for a free quote for your web development needs:

888.555.5555
HTML List Basics

• Unordered List
• Ordered List
Unordered List

• Displays information with bullet points

• Unordered List Element
• <ul>
Contains the unordered list

• List Item Element

<li>
Contains an item in the list
Ordered List

• Conveys information in an ordered fashion

• Ordered List Element
• <ol>
Contains the ordered list
• type attribute determines numbering scheme of list
• default is numerals
• List Item Element
<li>
Contains an item in the list
Special Entity Characters

• Display special characters such as quotes, copyright symbol, etc.

• Character Code
• © &copy;
• < &lt;
• > &gt;
• & &amp;
• &nbsp;
The div element <div>

• Purpose:
• Configure a specially formatted division or area of a web page

• Block display with empty space above and below the div

• Can contain other block display and inline display elements

 HTML5 Structural Elements

• Header Element
<header></header>
Contains the web page
document’s headings
• Nav Element
<nav></nav>
Contains web page
document’s main
navigation
• Footer Element
<footer></footer>
Contains the web page
document’s footer
HTML5 Structural Elements

Example:
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<div> main content goes here </div>
<footer> document footer information goes here </footer>
</body>
The Anchor Element <a>

• The anchor element

• Inline display element
• Specifies a hyperlink reference (href) to a file
• Text between the <a> and </a> is displayed on the web page.

• <a href="contact.html">Contact Us</a>

• href Attribute
• Indicates the file name or URL
Web page document, photo, pdf, etc.
Hyperlinks

• Absolute link
• Link to other websites

• <a href="http://yahoo.com">Yahoo</a>

• Relative link
• Link to pages on your own site
• Relative to the current page

• <a href="index.html">Home</a>
Opening a Link in a New Browser Window

• The target attribute on the anchor element opens a link in a new

browser window or new browser tab.
•
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
Email Hyperlinks

• Automatically launch the default mail program configured for the

browser
• If no browser default is configured,
a dialog box is displayed

• <a href="mailto:[email protected]">[email protected]</a>
Writing Valid HTML

• Check your code for syntax errors

• Benefit:
• Valid code  more consistent browser display

• W3C HTML Validation Tool

• http://validator.w3.org
• Additional HTML5 Validation Tool
• http://html5.validator.nu
Chapter Summary

• Describe the advantages of web publishing

• Discuss basic web design principles
• Familiar with HTML5
Next Weeks Lecture

• Define the requirements for writing for the web

• Explain the use of color as a web design tool
• Identify web publishing issues
• Constructing a trivial website
• simple markup
• adding images
• adding links and navigation