Lab Exercise 1 - Fleming College
advertisement
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 1
Lab Exercises
Part 1
As a web designer you should be comfortable writing out HTML in a text editor but some editors
offer more features than others. For the first part of this lab explore some of the software available
on the computer: NotePad, Notepad++, and Adobe Dreamweaver CS5.
What are the default DOCTYPE for each application?
Part 2
Saving your web page is a straightforward action. Planning your site organization requires some
forethought. In this exercise you will plan out your site structure on the Fleming College file
storage server/web site root. Each student while registered at Fleming College can store files on a
server.
Campus Registration
Peterborough
Lindsay
Haliburton
Cobourg
Server
Plan9
Highway61
Hal9000
Ds9
When you login to the computers in the Fleming labs you will notice a mapped networked drive
labeled h: with one of the above server names. That's your home drive. To make a web page
publicly available from the web server running on the file server you will need to have a directory
or folder named htdocs at the root level of your h: drive. For example if your username is jcool
and your home campus is in Peterborough your web site would be accessible from:
http://plan9.flemingc.on.ca/~jcool
Any subdirectories in htdocs could then be appended to the URL above. You may use wish to
save your first web page as index.html.
Part 3
Now that you have decided which web page editor to use and where to save your files it's time to
put some content in those pages and begin adding some HTML structure to it. You can use some
existing text or some nonsense Latin words called lorem ipsum, which you can generate from
this site: http://lipsum.lipsum.com/
Web Site Design Intermediate – COMP 135 – Spring 2013
Week 1
Create a template html file that you can re-use for any web page in this course. It is recommended
to use an HTML5 !DOCTYPE going forward. There are a number of JavaScript libraries you may
wish to add to your page to help with backwards-compatibility with older browsers or ones that
just don't get CSS3 and HTML5. For example to help Internet Explorer browsers older than IE9
add the HTML5shiv script to your template:
<!DOCTYPE html>
<html lang="en-ca">
<head>
<title>HTML5 Template</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article,aside,audio,canvas,datalist,details,figcaption,figure,footer,header,
hgroup,menu,nav,section,video {
display:block;
} /* By default HTML elements are inline; User-agent style sheets set the
display property to block except for those that don't understand HTML5 */
mark {background:#FF0;color:#000;}
</style>
…
Part 4
Download the HTML file:
http://fleming0.flemingc.on.ca/~pchee/fts/2013/wsdi/learning_modules/week1/ht
ml5.html and save it to your web site document root on the Fleming College server. Examine its
structure and then create an external style sheet so you can practice creating selectors and
applying various style properties to the elements in the document .
