Web Design

Web Design
By
Wan Nurhayati Binti Wan Ab. Rahman

Contents
Overview of Web
Hypertext Markup Language (HTML)
Cascading Style Sheet (CSS)
E-learning Web Application
Overview of Web
The web was invented in 1990 by Tim Berners-
Lee.

The web is an application running on the
Internet.

The web primarily uses the Hypertext Transfer
Protocol (HTTP) as the communication
protocol.
Overview of Web
Browsers:
WorldWideWeb by Tim Berners-Lee
Mosaic and Netscape
Internet Explorer by Microsoft
Mozilla Firefox by AOL
Safari by Apple and Chrome
Opera
Overview of Web
Visual Design Tools:
Adobe Dreamweaver
Microsoft Expression Web
Legacy Programs

Code-based Tools:
TextEdit and Notepad
Dreamweaver and Expression Web
Eclipse
HomeSite
Overview of Web
Graphics Programs
Adobe Photoshop
Adobe Illustrator
Adobe Fireworks
Corel Draw
Overview of Web
Planning Your Site:
Design Concept
Design Wireframe
Storyboard Pages

Understanding Your Audience:
Market Studies
Demographics
Local Business with Global Customers
Overview of Web
Gather Your Materials
Root Folder
Images
Multimedia Assets
Source Document

Plan Your Navigation Structure
Main Navigation
Section Subnavigation
Think Like Users
Overview of Web
Plan Your File Structure:
Organizing Below the Root
Naming Folders
Images Directory
Other Assets
HTML
HTML documents are made up of text
surrounded by tags: <element + attribute>

Elements are the basic pieces that make up
HTML.

Attributes provide the additional details on
how that element should display.

Declare Your Document Type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Web Design</title>
</head>

<body>

</body>
</html>
Declare Your
Document Type
Add Headings

<html>
<head>
</head>

<body>
<h1>Welcome to my page</h1>
</body>
</html>
Add Headings
Add Headings
h1
Add Headings
h1
h6
Add Paragraphs

<html>
<head>
</head>

<body>
<p>Please look around the site.</p>
<p>Feel free to contact me for more information.</p>
</body>
</html>
Add Paragraphs
Add Paragraphs
Add Paragraphs
Apply Logical Formatting

<html>
<head>
</head>

<body>
<p><strong>Please</strong> look around the site.</p>
<p>Feel free to <em>contact</em> me for more information.</p></body>
</html>
Bold
Italicize
Apply Logical Formatting
Italicize
Bold
Link to Other Pages in Your Site

<html>
<head>
</head>

<body>
<p><a href="secondpage.html">Second Page</a></p>
</html>
Link
Link to Other Pages in Your Site
Link
Link to Pages on the Web

<html>
<head>
</head>

<body>
<p><a href="http://www.google.com">Search Google</a></p>
</html>
Link
Link to Pages on the Web
Link
Link within a Page

<html>
<head>
</head>

<body>

<p><a href="#top">To top</a></p>
</html>
Link
Link within a Page
Link
Link to an E-mail Address

<html>
<head>
</head>

<body>

<p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact
me</em></a> for more information.</p>
</html>
Link
Link to an E-mail Address
Link
Link to Other Document Types

<html>
<head>
</head>

<body>

<p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact me</em></a> for more
information.</p>
<p>You can also know more about us by <a href="wan's photo.bmp">downloading my
information.</a></p>
</html>
Link
Link to Other Document Types
Link
Show Tool Tips for Links

<html>
<head>
</head>

<body>

<p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact me</em></a> for more
information.</p>
<p>You can also know more about us by <a href="wan's photo.bmp" title="Download a bmp
file">downloading my information.</a></p>
</html>
Link
Show Tool Tips for Links
Link
Add an Image to Your Web Page

<html>
<head>
</head>

<body>
<img src="Wan's photo.bmp"/>
</body>
</html>
Add an Image
Add an Image to Your Web Page
Add an Image
Use Images as Links

<html>
<head>
</head>

<body>
<a href="Home.html"><img src="Wan's photo.bmp" alt="Wan"/></a>
</body>
</html>
Use Images as
Links
Use Images as Links
Use Images as
Links
Add an Unordered List

<html>
<head>
</head>

<body>
<p>Working experiences:</p>
<ul type="disc">
<li>Tutor</li>
<li>Lecturer</li>
<li>Senior Lecturer</li>
</ul>
</body>
</html>
Add an
Unordered List
Add an Ordered List

<html>
<head>
</head>

<body>
<p>Core activities:</p>
<ol>
<li>Teaching</li>
<li>Research and Publication</li>
<li>Supervision</li>
</ol>
</body>
</html>
Add an Ordered
List
Add Unordered & Ordered List
Add an Ordered
List
Add an
Unordered List
Add a Definition List
A Definition list is one in which definition
or description of the items are given.

A Definition list is defined by <dl> tag.

The items are encoded in <dt> (defintion
term) tag and the description of the items
are encoded in <dd> (definition data) tag.


<html>
<head>
</head>

<body>
<dl>
<dt>Research</dt>
<dd>Grant and Publication</dd>
<dt>Supervision</dt>
<dd>PhD and Master</dd>
</dl>
</body>
</html>
Add a Definition
List
Add a Definition
List
Tables Tags
<table> ... </table>
- define table in HTML

<tr> ... </tr>
- specifies a table row within a table

<th> ... </th>
- defines a table header cell

<td> ... </td>
- defines a table data cell
Add Data Tables
Tutorial to the basic HTML from www.3schools.com
Table demonstration
One row and One Column

<html>
<body>

<h1>one Row One column:</h1>

<table border="1">
<tr>
<td><h1>1,1</h1></td>
</tr>
</table>

</body>
</html>
Add Data Tables
One Row Two Column

<html>
<body>
<h1>One Row and Two Columns</h1>

<table border="1">
<tr>
<td><h1>1,1</h1></td>
<td><h1>1,2</h1></td>
</tr>
</table>

</body>
</html>
Add Data Tables
Two Row and Two Column

<html>
<body>
<h1>Two Rows and Two Columns:</h1>

<table border="1">
<tr>
<td><h1>1,1</td>
<td><h1>1,2</td>
</tr>
<tr>
<td><h1>2,1</td>
<td><h1>2,2</td>
</tr>
</table>

</body>
</html>
Add Data Tables
Adding Forms to Your Site
A form in HTML consists of a group of form controls
wrapped in a <form> tag.
The tag takes two common attributes: action and
method.
The value of action is a URL to a page that contains the
code necessary to process the forms data.
The method attribute accepts one of two values.
Setting the values to get instructs the browser to send
the forms data by appending it to the actions URL,
whereas the value post has the browser send the data
as part of the background information it normally
sends to the server.
Web Design by Huddleston
Create a Form and Add a Text Field
<html>
<head>
<title>Adding Forms</title>
</head>

<body>
<h1>Contact Me</h1>
<form action="processform.php" method="post">
First Name: <input type="text" name="firstname" />
</form>
</body>
</html>
Add a Form
Add a Text Field
Create a Form and Add a Text Field
Add a Text Field
Add a Label and Check Boxes
<html>
<head>
</head>

<body>
<h1>Contact Me</h1>
<p>My query is in regard to: <br>
<input type="checkbox" name="project" value="bachelorproject" id="bachelorproject" />
<label for="bachelorproject">Bachelor Project</label>
<input type="checkbox" name="project" value="masterproject" id="masterproject" />
<label for="masterproject">Master Project</label>
<input type="checkbox" name="project" value="phdproject" id="phdproject" />
<label for="phdproject">PhD Project</label>
</p>
</form>
</body>
</html>
Add Check Boxes
Add Labels
Add a Label and Check Boxes
Add Check Boxes
and Labels
Add Radio Buttons
<html>
<head>
</head>

<body>
<h1>Contact Me</h1>
<p>I am: <br>
<input type="radio" name="status" value="current" id="current" />
<label for="current">Current Student</label>
<input type="radio" name="status" value="future" id="future" />
<label for="future">Future Student</label>
</p>
</form>
</body>
</html>
Add Radio Buttons
Add Radio Buttons
Add Radio Buttons
Create a Drop-Down List
<html>
<head>
</head>

<body>
<h1>Contact Me</h1>
<p><label for="contact">Please contact me via:</label>
<select name="contact" id="contact">
<option>Email</option>
<option>Phone</option>
<option>Mail</option>
</select>
</p>
</body>
</html>
Insert a Text Area
<html>
<head>
</head>

<body>
<h1>Contact Me</h1>
<p><label for="comments">Additional comments:</label> <br>
<textarea name="comments" id="comments" rows="5"
cols="40"></textarea>
</p>
</body>
</html>
Insert a Text Area
Insert a Text Area
Insert a Text Area
Add a Button to Your Form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
</head>

<body>
<h1>Contact Me</h1>
<p>
<input type="submit" value="Contact Me" />
</p>
</body>
</html>
Insert a Button
Add a Button to Your Form
Insert a Button
HTML Style Attribute
The purpose of the style attribute is to provide
a common way to style all HTML elements.

HTML Style Examples:
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
style="text-align:center

<html>

<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">This text is in
Verdana and red</p>
<p style="font-family:times;color:green">This text is in Times
and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>

</html>
This is the new style attributes.
The obsolete old style was:
<body bgcolor=PowderBlue>
CSS
CSS documents are plain text and can be
written in any text editor.

CSS documents are made up of a series of
rules.

Each rule includes a selector and a
declaration.
CSS
Selectors define the parts of the HTML
document to which the rules will apply.

CSS declarations are made up properties and
values.
Types of CSS
Inline Styles
Configured in the body of the Web page
Use the style attribute of an XHTML tag
Apply only to the specific element

Embedded Styles
Configured in the header section of a Web page.
Use the XHTML <style> element
Apply to the entire Web page document

Types of CSS
External Styles
Configured in a separate text file with .css file
extension
The XHTML <link /> element in the header section of a
Web page associates it with the .css file

Imported Styles
Similar to External Styles
Well concentrate on the other three types of styles

Common CSS Properties
background-color
color
font-family
font-size
font-style
font-weight
line-height
margin
text-align
text-decoration
width

Using color on Web Page
Computer monitors display color as intensities of
red, green, and blue light - RGB color.

The values of red, green, and blue vary from 0 to
255.

Hexadecimal numbers (base 16) represent these
color values.
# is used to indicate a hexadecimal value
Hex value pairs range from 00 to FF
Three hex value pairs describe an RGB color

Using color on Web Page
Color Chart http://webdevfoundations.net/color

How to choose a color scheme?
Monochromatic
http://meyerweb.com/eric/tools/color-blend

Choose from a photograph or other image
http://www.colr.org

Begin with a favorite color

Use one of the sites below to choose other colors
http://colorsontheweb.com/colorwizard.asp
http://kuler.Adobe.com
http://colorschemedesigner.com/

Accessibility & Color
Not everyone are able to see or distinguish between colors

Information must be conveyed even if color cannot be viewed

According to Vischeck http://www.vischeck.com/vischeck
1 out of 20 people experience some type of color deficiency
Color choice can be crucial
Avoid using red, green, brown, gray, or purple next to each other
White, black, and shades of blue and yellow are easier to differentiate.

Simulation:
http://www.vischeck.com/vischeck/vischeckURL.php

Configuring Color with Inline CSS
Example 1: configure red color text in an <h1> element
<h1 style="color:#ff0000">Heading text is red</h1>

Example 2: configure red text and gray background in the
heading
Separate style rule declarations with ;
<h1 style="color:#FF0000;background-color:#cccccc">This is
displayed as a red heading with gray background</h1>

CSS Embedded Styles

<style type="text/css">
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-
serif; }
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia, "Times New
Roman", serif; }
h2 { background-color: #AEAED4;
color: #191970;
font-family: Georgia, "Times New
Roman", serif; }
p {font-size: .90em; }
ul {font-weight: bold; }
</style>
CSS Selectors
CSS style rules can be configured for:

HTML element selector

class selector

id selector

Using CSS with Class Selector
Apply a CSS rule to a certain "class" of
elements on a Web page

Does not associate the style to a
particular XHTML element

Configure with .classname
The sample creates a class called
new with red italic text.

To use the class, code the following
XHTML:
<p class=new>This is text is red
and in italics</p>
.new { color: #FF0000;
font-style: italic;
}
</style>
Using CSS with Id Selector
Apply a CSS rule to ONE element
on a Web page.

Configure with #idname

The sample creates an id called
new with red, large, italic text.

To use the id, code the following
XHTML:
<p id=new>This is text is red,
large, and in italics</p>

#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>
XHTML <div> element
A block-level element purposely to configure a
specially formatted division or area of a Web
page.
There is a line break before and after the division
Can contain other block-level and inline elements

Useful to define an area that will contain other
block-level tags (such as paragraphs or spans)
within it.

XHTML <div> Element Example
Configure a page footer area with embedded CSS:
.footer { font-size: small; text-align: center; }
</style>

XHTML:
<div class=footer">Copyright © 2009</div>

XHTML<span> element
An inline-level element purposely to configure
a specially formatted area displayed in-line
with other elements, such as within a
paragraph.

There is no line break before and after the
span.

XHTML <span> Element Example
Embedded CSS:
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;}
</style>

XHTML:
<p>Your needs are important to us at <span class=companyname">Acme
Web Design</span>. We will work with you to build your Web site.</p>

External Style Sheets
CSS style rules are contained in a text file
separate from the XHTML documents.

The External Style Sheet text file:
extension ".css"
contains only style rules
does not contain any XHTML tags

External Style Sheets
Multiple web pages can associate with the
same external style sheet file.

body {background-
color:#E6E6FA;
color:#000000;
font-family:Arial, sans-
serif;
font-size:90%; }
h2 { color: #003366; }
.nav { font-size: 16px;
font-weight: bold; }
index.htm
clients.htm
about.htm
Etc
site.css
The <link /> Element
A self-contained tag

Placed in the header section

Purpose: associates the external style sheet
file with the web page.

Example:

<link rel="stylesheet" href="color.css" type="text/css" />

Using an External Style Sheet
External Style Sheet color.css

body { background-color: #0000FF; color: #FFFFFF;}

To link to the external style sheet called
color.css, the XHTML code placed in the header
section is:

<link rel="stylesheet" href="color.css" type="text/css" />

Centering Page Content with CSS
#container { margin-left: auto; margin-right: auto; width:80%; }
Effective e-learning application features (www.cisin.com):
Virtual classrooms
Audio, video, chat via text
Whiteboard and screen sharing
Online forums
Online quizzes
Exam/test engine, self evaluation
Tracing performance, report and statistics
Student and instructor management
Training and scheduling
Course builder, content management
Document management
Multi-language UI

Some examples of e-learning applications:
http://lms.upm.edu.my/i3learn/www/about.htm
http://openlearn.open.ac.uk/
http://www.e-learningforkids.org/

Thank You

Email:
wannur@fsktm.upm.edu.my

Website:
http://www.fsktm.upm.edu.my/~wannur/index.html

Web Design - Course by Wan

Uploaded by

Document Information

Original Description:

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

Web Design - Course by Wan

Uploaded by

Copyright:

Available Formats

You might also like