Introduction to Web Design

Transcript Introduction to Web Design

Introduction to Web
Design
Bart Busschots BSc AMInstP
Overview
• Introduciton to the web, HTTP and (X)HTML
• Structuring Web Pages (XHTML1.0)
• Setting the Look of a web page (CSS1)
• Design Issues
Part 1
Introduciton to the Web, HTTP
and (X)HTML
The www
Document
Web
Client 1
HTTP
Web
Server 1
HTTP
Web
Client 2
Web
Client 3
Web
Documents
HTTP
HTTP
Access
Document
Web
Server 2
Access
Web
Documents
Web Documents
• Web documents are coded up using the Hyper Text Markup
Language (HTML)
• HTML has been round since the 70s and has been constantly
updated
• XML is a generic markup language that can be used to describe
anything, it is becoming extremely popular
• XHTML is XML compliant HTML 4.0
• In the future all web pages will have to be XML compatibale so
you should get used to it now!
XHTML 1.0
• We will only be dealing with XHTML1.0
– HTML 4.01 made XML compliant
– http://www.w3.org/TR/html401/
• Differences between XHTML and HTML
– All tags MUST be closed
– All tags MUST be in lowercase
– All attribute values must be inside “ ”
• How do you know if your page is valid?
– http://validator.w3.org
My First XHTML Page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My First XHTML Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Good XHTML Parctice
•
As is the case with most programming languages, white space in
XHTML is ignored and is not considered a part of the program
– Use white space to indent your XHTML
– This makes your XHTML much more readable
•
Ensure that all tags are properly matched with their corresponding
closing tags:
– <b> matches </b>, <p> matches </p>, etc.
•
Enclose all attribute values in double quotes
– Use <p align=“center”>, NOT <p align=center>
•
Use comments where appropriate
– XHTML comments begin with 
– All text in between the comment delimiters is ignored
Meta Data
• Author and copyright information can be encoded as follows:
<meta name=“author” content=“Bart Busschots”/>
<meta name=“copyright” content=“NUI Maynooth”/>
• Search engine keywords and descriptions are written like this:
<meta name=“keywords” content=“Webpage, design, HTML”/>
<meta name=“description” content=“This is an example HTML page”/>
• HTTP commands are written as follows:
<meta http-equiv=“Refresh” content=“0;URL=http://www.may.ie”/>
<meta http-equiv=“Expires” content=“Tue, 20 Aug 1996 14:25:27 GMT”/>
Document Structure
•
All content of your web page should fit in to one of
the following structures
1.
2.
3.
4.
•
Header
Paragraph
List
Table
Headers (h1, h2 … h6):
<h1>Big Heading</h1>
<h3>Medium Header</h3>
<h6>Small Header</h6>
Document Structure
• Paragraphs (p)
<p
<p
<p
<p
align=“left”>Left Aligned Paragraph</p>
align=“right”>Right Aligned Paragraph</p>
align=“center”>A Centered Paragraph</p>
align=“justify”>A Justified Paragraph</p>
• Lists (ol, ul)
<ol>
<li>Ordered List Element 1</li>
<li>Ordered List Element 2</li>
</ol>
<ul>
<li>Bulleted List Element 1</li>
</ul>
Document Structure
• Tables
<table width=“50%” align=“center” cellpadding=“3”
cellspacing=“3”>
<caption>Simple Table</caption>
<tbody>
<tr>
<td>Row 1 Cell 1</td><td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td><td>Row 2 Cell 2</td>
</tr>
</tbody>
</table>
Document Structure
<table>
<caption>Advanced Table</caption>
<colgroup>
<col align=“left” valign=“top” />
<col align=“right” valign=“bottom” />
</colgroup>
<thead>
<tr>
<td colspan=“2”>A Table Header</td>
</tr>
</thead>
<tbody>
<tr>
<td rwospan=“2”>Row 1 and 2 Cell 1</td><td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
</tr>
</tbody>
</table>
Text Formatting
• Line Breaks (br, hr, nobr)
– To cause a line break - <br />
– A Line Break that stops all wrapping - <br clear=“all” />
– <nobr>All this will always be on the same
line</nobr>
– To Draw a horizontal Divider - <hr />
– OR <hr size=“2” width=“80%” />
• Special Text
–
–
–
–
<strong>This text is Bold</strong>
<em>This text is Italic</em>
<sup>this text isa Super Script</sup>
<sub>this text is subscript</sub>
Including Images
• Images can be included in pages to enhance the page
• To include an image in a page, we use the <img> tag:
– <img src=“/images/image1.gif”/>
– This places the file /images/image1.gif (from the same site) in
the page at the position in the page where the tag is placed
– Note: <img> does not use a closing </img>
• Modifying image dimensions:
– <img src=“mypic.gif” height=“200”/> Sets image height
to 200 pixels
– <img src=“mypic.gif” width=“100”/> Sets image width to
100 pixels
Images
• Image dimensions can be displayed in terms of screen size:
– <img src=“mypic.gif” width=“25%” height=“100%”/>
– This will set image to 25% width of screen, 100% height of screen
– Useful when you cannot determine the screen resolution of the
users desktop
– Note: when modifying image height + width, keep correct scale!
• Images can be displayed with a surrounding border (measured
in pixels)
– <img src=“mypic.gif” border=“1”/>
• When dealing with text-based browsers, you can provide an
alternative text description of the image using alt
– <img src=“nuimlogo.gif” alt=“NUIM Logo”/>
Images
• It is also possible to choose the way in which your
imags gets alligned on the page. To choose an
alignment use the align attribute. Some of the valid
alignments are shown below (check the
documentation on line to see what each one does).
–
–
–
–
“left”
“right”
“top”
“bottom”
• Left and right will cause text to wrap around the
image.
Links
• A link to another page is called a hyperlink, and is one of the
most useful features of (X)HTML
• To create a hyperlink, we use the <a> (anchor) tag. To activate
the hyperlink, use the href attribute and set it to the destination
page of the link:
– <a href=“http://www.cs.may.ie”>CS Department
homepage</a>
• A hyperlink can be:
– Web page <a href=“http://www.cs.may.ie”>CS Home</a>
– FTP file <a href=“ftp://ftp.heanet.ie/”>HEANET</a>
– E-mail <a href=“mailto:[email protected]”>Mail me</a>
Links
•
Two types of linking exist: absolute linking and relative linking
•
Absolute linking uses an absolute URL (containing hostname and
protocol) in the link:
– <a href=“http://www.cs.may.ie/index.html”>CS Home</a>
– Not very portable, but is required to link to sites on remote hosts
•
Relative linking uses a filename relative to the location where the
current page was obtained:
–
–
–
–
–
–
<a href=“chapter1.html”>Chapter 1</a>
Portable, but can only be used to link to pages on the same site
Very useful for developing an entire site off-line
“./” means “current Directory”
“../” means “parent directory”
“/” means “document root directory”
Links
• As well as linking to pages it is also possible to link to “targets”
or “anchors” within the current page or any other page.
• This can be very usefull if you have a very long (X)HTML page.
• To do this the <a> tag is used as follows:
– To create a target called “target1”:
<a name=“target1” />
– To link to a target called “target1” in the current page:
<a href=“#target1”>Some text</a>
– To link to a target called “target1” on another page:
<a href=“theotherpage.html#target1”>Some Text</a>
Part 2
Changing the Style of your page
(CSS)
In-line Styles
• Simplest form of declaring style, but also requires the most
work!
• Uses the XHTML style attribute to manipulate the style of
individual elements
– <p style=“font-size:12pt;color:navy”>Paragraph</p>
– <em style=“font-family:arial;color:green”>Emphasis</em>
– <h1 style=“font-size:24pt; font-family:arial;
color:red;background-color:white”>Heading</h1>
• Technical notes:
•
•
•
•
Properties are contained in double quotes
Each property has a name and a value, denoted by name:value pair
Each property is separated by a semicolon
The value fields are not case-sensitive
Global Styles
• Allows a global style to be applied to an entire document
• The style element looks like this:
...
<head>
<style type = “text/css”>
em { background-color: red;
color: black; }
h1 { color: red;
font-family: Arial; }
</style>
</head>...
• The styles are automatically applied to the tags in the XHTML
...
<body>
...
<h1>This is a red heading</h1>
...
CSS Classes
• In addition to specifying styles for XHTML elements, style sheets
allow the use of “classes”:
...
<head>
<style type = “text/css”>
...
.highlighted { color: blue }
</style>
</head>...
• The style is applied to elements using the class attribute:
...
<body>
...
<h1 class=“highlighted”>Here is a highlighted header</h1>
<p>Here is some normal text</p>
<p class=“highlighted”>Here is some highlighted text</p>
...
CSS Classes
• Classes can be applied only to certain elements:
...
<head>
<style type = “text/css”>
...
p.highlighted { color: blue }
h1.highlighted { color: red }
</style>
</head>...
• The style is applied to elements using the class attribute:
...
<body>
...
<h1 class=“highlighted”>Here is a highlighted header</h1>
<p>Here is some normal text</p>
<p class=“highlighted”>Here is some highlighted text</p>...
CSS Pseudo Classes
• Pseudo-classes give access to content not specifically declared
in the document:
...
<head>
<style type = “text/css”>
a:hover { background-color: green; color:white}
</style>
</head>
<body>
...
<a href=“http://www.may.ie/”>Maynooth homepage</a>
• When the mouse hovers over the “Maynooth homepage” link,
the style will be applied to it (green background, white text)
Inheritance &
Specificity
• Elements can be nested, so can styles:
...
<head>
<style type = “text/css”>
p { font-size: 14pt; color: blue }
em { color: green }
</style>
</head>
<body>
...
<p>Here is some normal text <em>and some nested text</em></p>
• p is said to be the parent element of em
• em is said to be the child element of p
– em inherits all of the attributes of p (font-size, color)
– em overrides any attributes in p that are the same (color), since
the child element has greater specifity than the parent element
Style Specificity
• To specify styles that apply only to certain elements:
...
<head>
<style type = “text/css”>
li em { color: green }
</style>
</head>
<body>
...
<ul>
<li>List element one</li>
<li>List element two <em>important!</em></li>
</ul>
• The style only applies to em elements that are children of li
elements in the page!
Styles for Multiple
Elements
• To specify styles that apply to multiple elements, separate the
elements with a comma:
...
<head>
<style type = “text/css”>
h1, em { color: green }
</style>
</head>
<body>
...
<h1>Heading</h1>
This is some text with <em>emphasis</em>
• The style applies to both ems elements and h1 elements
External Style Sheets
• Useful for large sites where a single global style is required
– All pages on the site can link to the one, centralised style sheet
• To link the style sheet, we use the link attribute in the head
section of the document:
...
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css”/>
</head>
• The file style.css contains the stylesheet in ASCII text:
p
{ font-size: 14pt;
color: blue }
em { color: green }...
More Info
• Style sheets can be used to manipulate the style of every
element in a HTML document, including:
–
–
–
–
text positioning, margins, indents
text color, size, font
background images
element dimensions
• More information on CSS properties:
– http://www.w3.org/TR/REC-CSS1
– http://style.webreview.com
Part 3
Design Considerations
What makes a good
Web Page?
• What is the most important thing about any site?
– CONTENT
– Functionality
– Look
• Content
– If you have nothing to say why have a web page?
– The reason people come to your site is to find something out
so you should concentrate on the content first and foremost.
– If your content is poor it doesn’t matter how nice your site is
it will still be useless!
What Makes a Good
Web Site
• Functionality
– Ease of Navigation - Sites must have a simple intuitive
structure and it should be easy to get around the site
WITHOUT using the back button
– If the site has sections they should be sensible and it should
be easy to figure out what should be in what section.
– Things should do what you expect them to do.
• Look
– Your information should be easy to read, avoid silly fonts and
bright colours and excessive animations.
– Consistency - your site should have a distinct “look” which is
the same on all pages on the site (tip: use a template)
KISS
• Keep It Simple Silly
• Keep the structure and design of your site as simple as possible
• You only have a limmited amount of screen space to work with
so on te web Less is More!
• Don’t make anything More complicated than it has to be.
• “Because I can” is not a valid reson to do something!
Design Tip #1
• The content of your page should only use simple and
highly standard fonts. If you use a font in your design
that is not installed on the users computer the font
will simply be replaced with the default font!
• If you want to use fancey fonts do so very sparingly
and only for things like headings. Make an image out
of the test you want to display and include that image
in the HTML instead of te actual text. Images will
display any where!
Design Tip #2
• Use Tables to lay out the structure of your page.
• Many professional web pages use tables with a
border of zero to invisibly structure their page
• Tables can also be used as buttons if the tables
background is set to transparent (I.e. don’t set it to
anything) and the individual cells are set to a desired
colour - for best effect set the cellspacing to at
least 3.
Something to Think
About
• "Before you put a really dark background on your web page, ask
yourself this: Why is it so much harder to drive at night than in
the daytime?”
• "Web publishing is no more about HTML than book publishing is
about type fonts”
• "Colored or textured backgrounds, weirdly colored text or links,
and a preoccupation with appearance over content are sure
signs of a 'first generation' web site.“
• All these Quotes are from the web site “The Art & Zen of Web
design” which every web designer should read.
http://www.tlc-systems.com/webtips.shtml
Finally …
• There are No Hard and Fast Rules in Web Design
• All the Guidelines mentioned here are just that,
guidelines.
• However you should think twice before you break any
of them!
• But, if it works, use it!
End