introduction to web design bart busschots bsc aminstp

Introduction to Introduction to Web DesignWeb Design

Bart Busschots BSc AMInstP

OverviewOverview

• Introduciton to the web, HTTP and (X)HTML

• Structuring Web Pages (XHTML1.0)

• Setting the Look of a web page (CSS1)

• Design Issues

Part 1Part 1

Introduciton to the Web, HTTP and (X)HTML

The wwwThe www

Web Client 1

HTTP

WebDocuments

Web Server 1

Document

Access

Web Client 2

Web Client 3

WebDocuments

Web Server 2

Document

Access

HTTP

HTTP

HTTP

Web DocumentsWeb 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.0XHTML 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 My First XHTML PagePage<?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 Good XHTML ParcticeParctice• 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 DataMeta 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 StructureDocument Structure

• All content of your web page should fit in to one of the following structures

1. Header2. Paragraph3. List4. Table

• Headers (h1, h2 … h6):<h1>Big Heading</h1><h3>Medium Header</h3><h6>Small Header</h6>


• Paragraphs (p)<p align=“left”>Left Aligned Paragraph</p><p align=“right”>Right Aligned Paragraph</p><p align=“center”>A Centered Paragraph</p><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>


• 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>


<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 FormattingText 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 ImagesIncluding 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

ImagesImages

• 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”/>

ImagesImages

• 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.

LinksLinks

• 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>

LinksLinks

• 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”

LinksLinks

• 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 2Part 2

Changing the Style of your page (CSS)

In-line StylesIn-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 StylesGlobal 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 ClassesCSS 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 ClassesCSS 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 ClassesCSS Pseudo Classes

• Pseudo-classes give access to content not specifically declared in the document:

...

<head>


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 & Inheritance & SpecificitySpecificity• 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 Style SSpecificitypecificity

• To specify styles that apply only to certain elements:...

<head>


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 Styles for Multiple ElementsElements• To specify styles that apply to multiple elements, separate the

elements with a comma:...

<head>


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 External Style SheetsSheets• 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 InfoMore 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 3Part 3

Design Considerations

What makes a good What makes a good Web Page?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 What Makes a Good Web SiteWeb 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)

KISSKISS

• 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 #1Design 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 #2Design 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 Something to Think AboutAbout• "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 …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!

EndEnd