CSC 104 Tutorial Notes Bowen Hui May 25th 2005 Introduction ============ Tutor Name: Bowen Office Hour: none ask questions in class!! Notes posted online at: http://www.cs.toronto.edu/~bowen/104/labs.html Tutorials: lecture style Labs: interactive exercises with TA help Computing Environment ===================== School provides "CDF" accounts (see next week) Windows machines Main use: browser, editor Home set-up is possible for homework *ALL* Lab work must be done in the lab during the allocated time (2% each) Overview of Material ==================== New Lab component this year Tutorials and Labs will go hand-in-hand Undergoing new design of course material, so give us feedback HTML - simple web design - "static" Javascript - involves programming - "dynamic" About HTML ========== General purposes: - formatting, structure of document - HyperText Markup Language - web design = create HTML pages - related to MSWord, clipboard cut&paste - helps in understanding data structures, machine language, machine interpretation, programming Web browser: - e.g., Internet Explorer, Netscape, Mozilla, Firefox - "File" -> "Open" - "View" -> "Source Code" Text editor: - e.g., Notepad, Wordpad, BBEdit, Vi, Emacs - closer to computer representation - MSWord is a "word processor" - save as "plain text" - do *NOT* use it to generate HTML files Files and folders: - folder = directory - file: file name, file location - path: location e.g. C:\Documents and Settings\bowen\My Documents\104 File extensions: - identity - HTML files are either ".html" or ".htm" Two boards: - what we see - what we type General Example =============== BOOK TITLE Chapter 1 TITLE Text text text text text text Text text text IMAGE text text text Text text text ... What we type ------------ BOOK TITLE Chapter 1 TITLE Text text text text text text Text text text IMAGE text text text Text text text ... Notice ------ - tags or - spacing - use of indentation Specific HTML Tags ================== structure: - - - -
-

-

-
-

- style: - - - -
-

-

-

... -
-
- lists: -
  • -
    tables: -
    links: - - - - X dynamic add-ons: - -
    -