Scribd
Upload
200 views21 pages

Fundamentals of Web Design

The document provides an overview of fundamentals of web design including HTML basics, CSS for presentation, Javascript for interaction, the role of Flash, and information architecture. It also covers different website structures like basic HTML pages, database-driven websites, text editors, and common HTML elements and tags. The document aims to give background on core components involved in designing websites.

Uploaded by

JACK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
200 views21 pages

Fundamentals of Web Design

The document provides an overview of fundamentals of web design including HTML basics, CSS for presentation, Javascript for interaction, the role of Flash, and information architecture. It also covers different website structures like basic HTML pages, database-driven websites, text editors, and common HTML elements and tags. The document aims to give background on core components involved in designing websites.

Uploaded by

JACK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

Fundamentals of

Web Design
What We’ll Cover
• HTML basics, what's involved in writing it and
understanding the basic elements of a webpage.
• Cascading Style Sheets (CSS) and how they control the
presentation of HTML.
• Javascript and its role in user interaction, how it integrates
and why it matters.
• Flash and what role it plays in presentation, interaction and
the ups and downs of using it.
But first, some background...

Basics of how the web works and how your website fits into
the big picture.
Basic HTML pages – ‘flat website’
Domain
Domain Name Registrars
Registry

Internet Domain
HTTP request: Service Name
“www.sitename.com” Provider Resolver

User IP address
00.00.00.00

Web
Page Host
HTTP response

Advantages: Speed / Flexibility


Disadvantages: Labor-intensive / navigation issues
Database-driven website
Domain Name Registrars Domain
Registry

CMS – Content Management System


HTTP request:
ISP DNR • WordPress
“www.sitename.com”
• Drupal
• Joomla
• many more
User
IP address
00.00.00.00

Web PHP

“LAMP”
Page Scripts
HTTP response

• Linux
Host • Apache
MySQL
• MySQL
Database
• PHP

Advantages: Automation of navigation, easy to change overall site design (‘theme’)


Disadvantages: Speed / Server Load / Script conflicts (plugins)
GUI EDITORS - WYSIWYG
• Dreamweaver
• Beginners always seem to start with this. It’s a great tool.
• The preview isn’t quite right, it’s slow, it’s big, it’s expensive.
Has a built-in FTP tool. Tight integration with Adobe CS.

• FrontPage
• Very common starting point on PC. Solid and serviceable.
Deep integration with Windows OS.

• Plain-text editor
• Cheap. Fast. Efficient. Reliable. Trustworthy. Multi-platform.
• My choice – BBEdit for the Mac.
Downside: not quite as ‘helpful’ as GUI apps.
TEXT EDITORS
For Mac: For PC:

BBEdit NotePad++
(http://www.barebones.com) (notepad-plus.sourceforge.net/)

Text Wrangler Crimson


(http://www.barebones.com) (www.crimsoneditor.com)

SubEthaEdit jEdit (http://www.jedit.org/)


(http://www.codingmonkeys.de/)
HTML BASICS
HTML – Hyper Text Markup Language

HTML is a ‘markup’ language. It consists of TAGS: <b>This is bold</b> -


looks a lot like the pre-WYSIWYG wordprocessor ‘WordStar’. Browsers
interpret and ‘present’ the markup code.

Tags generally ‘open’ and ‘close’ – except for single-element tags like
<img>, <br> and <hr>.

For many years HTML page design was done using the <table> tag –
in the last decade CSS (Cascading Style Sheets) support in browsers has
improved to where object-oriented design techniques can be used,
separating design from content and allowing site-wide design changes
with minor edits.
COMPONENTS OF HTML ELEMENT
<p class =“text” > GREAT </p>
OPENING TAG- <p>
ATTRIBUTE- class=“text”
NAME - class
VALUE – ”text”
CONTENTS- Great
CLOSING TAG- </p>
HTML PAGE ELEMENTS

HTML – Beginning of hypertext


-is the root element in an html document
HEAD –describes the content of the document
- Title / Links / Scripts / Meta
- title -provides the title of document.
BODY – The visible content of the page
-contains all the content to your document.
Anatomy of an HTML page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="/resources/my_styles.css" media="all">
<script src="/resources/js/my_script.js" type="text/javascript"
language="javascript"></script>
<meta name="keywords" content="dog, cat, bird, mouse, platypus">
</head>
<body>
<div id="pagewidth">
<div id=”banner">Page Banner</div>
<div id="wrapper" class="clearfix">
<div id="twocols" class="clearfix">
<div id="maincol">Main Content Column</div>
<div id="rightcol”>Right Column</div>
</div>
<div id="leftcol">Left Column</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
pagewidth

banner
wrapper
Two cols

leftcol maincol rightcol

footer
CSS – CASCADING STYLESHEETS
Definitions of STYLES for HTML Elements
Rather than:
<p><font size=“3”>Doo Dah</font></p>
(as inline style)
<p style=“font-size:12px;”>Doo Dah</p>
(as line in stylesheet)
p { font-size:12px; }
CSS – CASCADING STYLESHEETS

body { font-size: 14 px; }

Selector- body
Declaration- { font-size: 14 px; }
Property – font-size:
Value- : 14 px
CSS – CASCADING STYLESHEETS

EXTERNAL STYLE SHEETS


< link href=“global.css” type=“text/css” rel=“stylesheet”/>
EMBEDDED STYLE SHEETS
<style type=“type/css”>
body{
color: red;
}
</style>
Javascript
JavaScript is an object-oriented scripting language used to enable
programmatic access to objects within both the client application
and other applications. It is primarily used in the form of client-side
JavaScript, implemented as an integrated component of the web
browser, allowing the development of enhanced user interfaces and
dynamic websites.

- Wikipedia
JAVASCRIPT
Common uses:
• Form validation – check user input before submission
• Popups
• Hide/show page elements
• Image rollover swaps

Javascript can be placed in


• A command within a tag (MouseOver)
• The <head> portion of a document
• The <body> portion of a document
• An externally-referenced file
JAVASCRIPT
EXTERNAL JAVASCRIPT
< script src=global.js type=“text/javascript”></script>
Alert(“First Approach”);
</script>
EMBEDDED JAVASCRIPT
Head:
< script type=“text/javascript” language=“javascript”>
alert(“First Approach”);
</script>
Body:
< script type=“text/javascript” language=“javascript”>
Document.writeln(“Second Approach”);
</script>
FLASH
Flash allows the presentation of scalable, vector-based information.
It has numerous advantages but is not intended as a primary tool
for constructing general-purpose websites.
Here’s a few drawbacks:
• How do you bookmark your location? Not supported – all navigation is
absolute and programmatic.
• Requires an add-on to the browser. Largely supported but can be issue.
• Complex animations can run slowly on low-end machines, yielding low
framerates and jerky display.

Flash is a great tool to present an animated piece of content but care


should be taken to factor in user issues if the entire site will be built in it.
Information Architecture

• The blueprint that describes how information is organized


and structured.

• The relative position of files and folders

• The ‘concept’ behind your navigation


about.html
contact.html
index.html
links.html
map.html
Home
product_list.html
products (directory)
About Map
product1.html
product2.html
Contact form Staff list
.
Products Products Order Form .
Product 2
.
Links
product-x.html
Product ...
staff.html
store (directory)
order.html
validate.js

You might also like