• introductions
• course information & administration
• intro to web and HTML concepts
• your first web page
• homework
• readings

• instructors: Dave Tanchak, Chris Miller, Jeff Parker
• email: see sidebar
• web site: you're soaking in it
• all about you...
  • your name
  • your background
  • what is your interest in the subject?
  • what do you hope to achieve in this course? Be specific!
  • do you have any previous experience?

• objectives:
  • provide an overview of web development and design
  • impart skills in the use of HTML, CSS, interface design, introductory scripting and advanced mark-up techniques
  • provide resources and suggestions to go further
• format:
• some theory, mostly practical, hands on
• in class exercises
• 5 homework exercises, 2 assignments, 1 midterm, 1 major project, 1 exam (for marks)
• readings:
• mostly from textbook; some suggested readings online
• see weekly selections on readings page
• assignments:
• homework exercises - small exercises to be handed in throughout course
• two assignments - maintain some personal pages on your signalflare account (sse below)
• one major project - fully-functioning web site
• see the assignments page for details and due dates
• midterm & final exam
• fill-in-the-blanks, short answer, matching, code correction, sample web page for which you will need to write out the code
• based on lecture notes and in-class exercises/handouts
• NOT open book or online...bring a pencil

• how to be a web "master"
• graphic design
• database integration
• advanced CSS techniques
• multimedia production (video, sound, dynamic graphics)
• Java, or other web programming languages

• how to construct and manage a basic web page/site
• web and internet terminology (keep your eye out for acronyms)
• how to mark-up pages by hand using XHTML
• some basic interface design and usability principles
• an introduction to cascading style sheets (CSS) and web scripting concepts
• a solid foundation upon which to base future web development studies

Each student will get personal webspace. This space is exclusively yours, with your own username and password. You will need to use an File Transfer Protocol (FTP) client to move your files between the server and your local work station.

• You will create your account in the system one by one
• Be prepared to enter your:
  • directory name - your myBCIT name (what's that?)
  • username - A00123456
  • password- whatever you use to log in to myBCIT
• Instructor will have you enter your information to create account
• The account is created immediately
• Your URL will be: http://students.signalflare.ca/[your_mybcit_name]

Use FireFTP in your Firefox browser

1. Launch Firefox from your taskbar (blue and orange icon next to Internet Explorer icon).
2. Go to Tools menu and select FireFTP.
3. Choose Create an account from dropdown menu in top left corner of browser window.
4. Account Name: SignalFlare
5. Category: Leave blank
6. Host: www.signalflare.ca
7. Login: [your_username]@signalflare.ca
8. Password: [your_password]
9. Click OK (bottom)
10. With new account selected in dropdown menu, click Connect button just to the right.

1. Login to myBCIT.
2. Click the My Courses tab.
3. Click View your myBCIT course homepages & WebCT courses.
4. Click on the Intro to Web Dev and Design link.
5. Locate and click on the Members link in the left hand navigation menu.
6. Find your name and click toadd your home page.
7. In the Title field, enter something like "My homepage" (without the quotes).
8. In the URL field, enter http://students.signalflare.ca/(your_mybcit_name}.
9. Click Submit.

• foundation of WWW documents
• co-ordinates the display and layout of all elements: graphics, text, audio, video, etc.
• a system for describing documents: a set of codes which "mark up" an unformatted piece of text telling the "reader" (web browser) how to display the information

• set of codes, commonly referred to as "tags"
• tags tell reader (browser) what to do with a particular piece of information:
• may help to think of most tags as containers (<b></b>), or boxes within which you can place various information
• many (not all) tags have attributes, which in turn have values (contained in quotations):
  <tag attribute="value">
• some tags are able to contain several attribute/value pairings:
  <tag attribute1="value1" attribute2="value2" attribute3="value3">

• web pages must follow a particular structure
• in order to be valid they must include the following document tags
• exception is frameset pages which do not require a <body></body> element
• <!doctype> - identifies file as HTML, and the "dialect" of HTML being used
• <!doctype html public "-//w3c//dtd html 4.01 transitional//en">
• <html></html>
• tells browser that the file contains HTML-encoded information; reinforced by file extension ".htm" or ".html" - must be used in file name
• <head></head>
• identifies the first part of an HTML document and prepares the browser for document body that follows
• several things can go into head: <script>, <style>, <meta>
• <title></title>
• contained in head section
• displayed in browser window but not in text area
• top level for search engines
• no longer than 64 characters in length
• <body></body>
• contains the content of the document; displayed in text area of browser
• has attributes which help define the appearance of document
• some attributes/values that might be used in <body></body>:
• bgcolor="orange"
• text="darkgreen"
• e.g., <body bgcolor="orange" text="darkgreen">

• Block-element Tags: (automatic line breaks)
• <p></p> - Paragraph
• <h1...6></h1...6> - Heading
• <blockquote></blockquote> - Indents text from both left and right margin; used for quoting blocks of text (for all you essay writers)
• Inline Tags: (no automatic line breaks)
• <b></b> - Bold
• <i></i> - Italicize
• <a></a> - Anchor, used to create hyperlinks (doesn't do anything without attribute/value pairings)
• Empty tags:
• <br> - Line break
• <hr> - Horizontal Rule

Build and upload an index page for your signalflare account. Include the following:

1. Information about you, why you're taking this class, what you hope to learn.
2. Examples of paragraphs, headings and bold text.
3. Something cool you learned from the first assigned readings.
4. Link the page from your myBCIT page as described above.
5. Upload your exercises to your account and email your instructor with the proper URL. HINT: it will look something like this:
   http://students.signalflare.ca/dave/hw1/

Exercise is due before the start of the week two class. Your instructor will not hunt you down to hand this in - no email sent to your instructor = zero marks.