Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Web Design Bart Busschots BSc AMInstP.

Similar presentations

Presentation on theme: "Introduction to Web Design Bart Busschots BSc AMInstP."— Presentation transcript:

1 Introduction to Web Design Bart Busschots BSc AMInstP

2 Overview Introduciton to the web, HTTP and (X)HTML Structuring Web Pages (XHTML1.0) Setting the Look of a web page (CSS1) Design Issues

3 Part 1 Introduciton to the Web, HTTP and (X)HTML

4 The www Web Client 1 HTTP Web Documents Web Server 1 Document Access Web Client 2 Web Client 3 Web Documents Web Server 2 Document Access HTTP

5 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!

6 XHTML 1.0 We will only be dealing with XHTML1.0 –HTML 4.01 made XML compliant – 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? –

7 My First XHTML Page My First XHTML Page Hello World

8 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: – matches, matches, etc. Enclose all attribute values in double quotes –Use, NOT Use comments where appropriate –XHTML comments begin with –All text in between the comment delimiters is ignored

9 Meta Data Author and copyright information can be encoded as follows: Search engine keywords and descriptions are written like this: HTTP commands are written as follows:

10 Document Structure All content of your web page should fit in to one of the following structures 1.Header 2.Paragraph 3.List 4.Table Headers ( h1, h2 … h6 ): Big Heading Medium Header Small Header

11 Document Structure Paragraphs ( p ) Left Aligned Paragraph Right Aligned Paragraph A Centered Paragraph A Justified Paragraph Lists ( ol, ul ) Ordered List Element 1 Ordered List Element 2 Bulleted List Element 1

12 Document Structure Tables Simple Table Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2

13 Document Structure Advanced Table A Table Header Row 1 and 2 Cell 1 Row 1 Cell 2 Row 2 Cell 2

14 Text Formatting Line Breaks ( br, hr, nobr ) –To cause a line break - –A Line Break that stops all wrapping - – All this will always be on the same line –To Draw a horizontal Divider - – OR Special Text – This text is Bold – This text is Italic – this text isa Super Script – this text is subscript

15 Including Images Images can be included in pages to enhance the page To include an image in a page, we use the tag: – –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: does not use a closing Modifying image dimensions: – Sets image height to 200 pixels – Sets image width to 100 pixels

16 Images Image dimensions can be displayed in terms of screen size: – –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) – When dealing with text-based browsers, you can provide an alternative text description of the image using alt –

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

18 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 (anchor) tag. To activate the hyperlink, use the href attribute and set it to the destination page of the link: – CS Department homepage A hyperlink can be: –Web page CS Home –FTP file HEANET – Mail me

19 Links Two types of linking exist: absolute linking and relative linking Absolute linking uses an absolute URL (containing hostname and protocol) in the link: – CS Home –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: – Chapter 1 –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”

20 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 tag is used as follows: –To create a target called “target1”: –To link to a target called “target1” in the current page: Some text –To link to a target called “target1” on another page: Some Text

21 Part 2 Changing the Style of your page (CSS)

22 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 – Paragraph – Emphasis – Heading 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

23 Global Styles Allows a global style to be applied to an entire document The style element looks like this:... em { background-color: red; color: black; } h1 { color: red; font-family: Arial; }... The styles are automatically applied to the tags in the XHTML This is a red heading...

24 CSS Classes In addition to specifying styles for XHTML elements, style sheets allow the use of “classes”: highlighted { color: blue }... The style is applied to elements using the class attribute: Here is a highlighted header Here is some normal text Here is some highlighted text...

25 CSS Classes Classes can be applied only to certain elements: p.highlighted { color: blue } h1.highlighted { color: red }... The style is applied to elements using the class attribute: Here is a highlighted header Here is some normal text Here is some highlighted text...

26 CSS Pseudo Classes Pseudo-classes give access to content not specifically declared in the document:... a:hover { background-color: green; color:white}... Maynooth homepage When the mouse hovers over the “Maynooth homepage” link, the style will be applied to it (green background, white text)

27 Inheritance & Specificity Elements can be nested, so can styles:... p { font-size: 14pt; color: blue } em { color: green }... Here is some normal text and some nested text 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

28 Style Specificity To specify styles that apply only to certain elements:... li em { color: green }... List element one List element two important! The style only applies to em elements that are children of li elements in the page!

29 Styles for Multiple Elements To specify styles that apply to multiple elements, separate the elements with a comma:... h1, em { color: green }... Heading This is some text with emphasis The style applies to both ems elements and h1 elements

30 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:... The file style.css contains the stylesheet in ASCII text: p { font-size: 14pt; color: blue } em { color: green }...

31 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: – –

32 Part 3 Design Considerations

33 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!

34 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)

35 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!


37 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!


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


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

42 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!

43 End

Download ppt "Introduction to Web Design Bart Busschots BSc AMInstP."

Similar presentations

Ads by Google