comp 1850 | introduction to web design and development

course introduction

agenda

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

introductions

  • instructor:Jeff Parker
  • email:jeffrey_parker@bcit.ca
  • web site: you're soaking in it
  • all about you...
    • your full name (and nickname, if applicable)
    • what do you hope to achieve in this course? be specific!
    • do you have any previous computing experience?

about the course

  • 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
    • various homework exercises, 1 assignment, 1 major project, 1 exam
  • readings:
    • mostly from textbook; some suggested readings online
    • see selections on readings page
  • assignments:
    • homework exercises - small exercises to be handed in throughout course, sometimes done in class
    • one assignment - maintaining some personal pages on your bcitcomp account
    • one major project - a fully-functioning web site

what you will learn

  • 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 HTML
  • 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
  • best practices
    • compatibility (creating web pages that work well in all browsers)
    • portability (writing code that works well in any computing environment/operating system)
    • accessibility (produce web pages that are optimized for Search engines, screen readers, etc)

what you won't learn

  • how to be a web "master"
  • graphic design
  • multimedia production (video, sound, dynamic graphics)
  • database integration (COMP1630)
  • HTML5 specific features (COMP1950)
  • CSS3 specific features (COMP1950)
  • responsive design (COMP1950)
  • Java, or other web programming languages (COMP1409, COMP1920)

your development environment

COMP 1850 software development tools are all freely available for download online. be sure to configure your home computer or laptop with the following tools: web browsers, a text editor, and an FTP client application.

  • web browsers: for viewing your HTML files
  • text editor: for creating your HTML files

    Any syntax highlighting text editor is suitable for COMP1850. The editor used in class will be Notepad++, but you are free to use any other syntax highlighting text editor.

  • ftp client: for publishing your files to the world wide web

    Any FTP client is suitable for moving files via FTP. The FTP client used in class will be: Filezilla FTP client (Windows/OSX)

BCIT network: sharefile

BCIT lab computers are re-imaged each day, meaning you will lose any files you save on the local C: drive of a lab computer.

Choose ONE of the folowing:

  • Use BCIT Sharefile to save your work
  • Save your work to your personal USB or cloud storage account
  • Use your own laptop in class, and dont use the BCIT lab computers

administration

Set up email forwarding to ensure you receive any important class announcements:

  • visit myBCIT and login with the same info used to log into bcit lab computers.
  • note the Student Self Service > Check Grades option. use this later on to see how your grade is progressing in comp1850
  • choose: Email & Calendar option from the top right.
  • choose: Options > Mail > Settings
  • ensure "Enable forwarding" is checked
  • add: your usual email to the "Mail Forwarding List"
  • choose: Save

course materials

COMP 1950 homework assignments, quizzes, in class exercises and example code can be accessed via Desire 2 Learn (D2L). Use your BCIT student number and password to access D2L. Course materials will become avilable as the course progresses. It is your responsibility to log in and download files as they become available.

If you have difficulty gaining access, consult the D2L help documentation, or contact BCIT Tech help desk at 604-412-7444 (Toll free: 1-800-351-5533).

course server

Your work in this course is to be published to the course server: bcitcomp.ca. Each student is provided with a web space on this server.

Your web space will be in the /students/ directory of the bcitcomp.ca server. Take the name portion of your my.bcit.ca email address and use it at the end of the URL described below (eg: if your email address is 'yourname123@my.bcit.ca', your email name is 'yourname123', so your url would be 'http://bcitcomp.ca/students/yourname123'
For example: http://bcitcomp.ca/students/your_bcit_email_name

If you have difficulty accessing your web space on bcitcomp.ca, contact your COMP 1950 instructor.

bcitcomp.ca account setup

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.

  • Your instructor will create webspaces for each of you.
  • Email your instructor this information:
    • your myBCIT email name - eg: youname123@my.bcit.ca
    • your student number - eg: A00123456
    • a case sensitive password you will remember - ???
  • Your URL will be: http://bcitcomp.ca/students/{your_mybcit_email_name}

connect to your bcitcomp.ca account via FTP

Use Filezilla, or any FTP client to connect to bcitcomp.ca. The bcitcomp.ca server provides you with a space on the internet where you can publish your homework and assignments.

  1. choose: File->SiteManager->New Site, then describe the FTP server, eg "my comp 1850 website"
  2. Host: bcitcomp.ca
  3. Port: 21
  4. User: {yourStudentNumberUsingAnUppercaseA}@bcitcomp.ca
  5. Password: {determined by you via email to your instructor}
  6. Servertype: FTP - File Transfer Protocol
  7. LogonType: Normal
  8. click: Connect

If you experience connectivity problems, re-check your input, or ask your instructor for assistance.

ftp screenshot

lecture one

what is HyperText Markup Language (HTML)?

  • 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

how does HTML work?

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

basic HTML document tags

Web pages must follow a particular structure. In order to be valid they must include the following document tags:

HTML Template


  • web pages that are structured correctly are called well formed
  • in order to be well formed 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" "http://www.w3.org/TR/html4/loose.dtd">
  • <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">

some text formatting tags

  • 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

file name conventions

HTML code is written as a text file. using conventional names for the files you create will maximize the portability of your code

  • use alphabetic characters
  • use numbers
  • use underscores, dashes
  • no spacebar spaces
  • no odd chars ...!@#$%^&... etc
  • be CaSe SeNsiTiVe
  • be descriptive
  • use either .html or .htm extension

Folder / Directory names should follow the same rules, but do not include extensions.

coding strategies

There are several techniques which can help increase your efficiency and ensure you write valid, well formed HTML code

  • dont write too much code before testing in a web browser. it is easier to locate and fix problems when you test often
  • when you write a new HTML tag or comment, write both the opening and the closing before filling in the contents. Some text editors support Auto Complete, which will do this for you
  • write and test locally, on the client. only use FTP to upload files to the server after the page(s) are tested and completed
  • ensure HTML files have the correct extension of either .htm or .html. if your operating system is 'hiding extensions for known file types', you should disable that feature, so that all extensions are displayed when you navigate your file system (in windows this can be done via Windows Explorer 'Folder Options')
  • ensure the file you are working on in the text editor is the same file you are testing in the web browser. it can be easy to get mixed up, especially when you may often be working with several different files that share the same name, such as index.html. read and compare the entire path displayed by both editor and browser to ensure the file is the same
  • all files and folders must comply with good naming conventions: this includes Case Sensitivity. adopt a standard and stick with it, such as: all file and folder names are lowercased with underscores instead of spaces to separate words
  • comment your code. use comments to visually separate sections of code within a page (header, footer, navigation, content). this makes your files much easier to maintain.
  • use the W3C online validator to help you determine if the code contains any errors

workflow

Settle on a procedure for getting you and your computer set up and ready to code, test and publish your pages. If you have difficulty getting started, consider adopting the following steps.

  1. ensure you have the appropriate software installed:
    • Text editor with syntax highlighting
    • Web browser
    • FTP Client
  2. if you are creating a new file:
    • start the text editor
    • choose File->New to create a new file
    • add to the file the tags that constitute the essential HTML template
    • add text to the title tag, and add a small amount of content to the body tag
    • using 'Save As...' choose a filename and location for the new file, save the file with an .html extension
    if you are maintaining an exisiting file:
    • start the text editor
    • use File->Open to browse and select the file you want to work with
  3. open the file in a web browser, confirm the browser displays the expected result
  4. add/refine the content in the text editor
  5. save the changes
  6. refresh the web browser
  7. repeat from step 4 until page is complete
  8. start the FTP client, connect to your web server
  9. upload the file(s) to the server via FTP
  10. use web browser to test the uploaded file(s) online

efficiency tips

  • learn and use keyboard shortcuts for common tasks (for Macintosh, use the Command key instead of Ctrl)
    • copy : Ctrl + C
    • cut : Ctrl + X
    • paste : Ctrl + V
    • save : Ctrl + S
    • browser refresh : F5
    • clean browser refresh (ensures the browser is not displaying a cached version of a page) : Ctrl + F5
    • etc
  • use drag and drop techniques to open local files in text editors and web browsers, its much faster than using the mouse to 'File -> Open -> Browse...'
  • some IDEs (Integrated Develolpment Environment) include the text editor, browser testing and FTP client built in, reducing the need to switch between several applications during your workflow

todo:

Before the next COMP1850 session, prepare your personal desktop or laptop for web development:

  • Download, review and complete the homework assignment, available from D2L.
  • Download and install the various different browsers: Internet Explorer, Mozilla Firefox, Safari, Opera, Chrome
  • Download and install a syntax highlighting text editor. Windows: Notepad++. Macintosh: TextWrangler
  • Download and install an FTP client: Filezilla
  • New to some of these programs? give yourself some time to play around with them. Consider reading some of the help documentation they provide, or look for online tutorials that explain some of the feature available to you
  • Set up email forwarding for your my.bcit.ca email account
  • If you plan to use BCIT lab computers, use a USB stick or online cloud storage to store your work. Alternatively, you can learn how to use BCIT Sharefile. Dont leave your work on the local BCIT lab computers: it will be deleted!
  • Connect to your COMP1850 Webspace using FTP
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |