• web concepts
• connecting to websites
• tools of the trade
• HTML:
• block elements vs. inline elements
• hypertext links
• image references
• urls and your directories
• readings

• there are many ways that information can be passed between computers:
  • email (SMTP - simple mail transfer protocol)
  • file transfer protocol (FTP)
  • TCP/IP - Transmission Control Protocol/Internet Protocol
  • gopher
• all are simply communication standards (software, hardware) which facilitate the exchange of data, although some are outdated (gopher)
• the World Wide Web (www, web) is just one of those ways, or standards:
  • arguably the most popular as it allows for the dissemination of interlinked interactive, multimedia content
  • base standard created by Tim Berners-Lee (sometimes called "the father of the WWW"), at CERN, the European Particle Physics Laboratory in 1989
  • web servers (see below) use the HTTP (Hypertext Transfer Protocol), which allows the delivery of multimedia content
  • more on the world wide web
• concepts we need to understand:
  • HTTP - hypertext transfer protocol
  • client - request
  • server - response
• components we need to understand:
  • client software:
    • web browsers (Explorer, Navigator, Mozilla)
    • mail clients (Outlook Express, Thunderbird)
    • FTP software (Core FTP Lite, WS-FTP)
  • server software: Apache, Microsoft
  • web documents: written in HTML (*.html, *.htm, *.shtml)
  • web sites: group of related and interlinked Web documents
• URLs (uniform resource locator) - the standard way to give the address of Internet resources that are part of the WWW
  • protocol (e.g., http://)
  • server name (e.g., www.signalflare.ca)
  • path (e.g., /1850/readings/)
  • file (e.g., index.shtml)
  • http://www.signalflare.ca/1850/readings/index.shtml

• you can connect to websites using different protocols, which results in a different view:
  • HTTP - use a browser to view the site - browser reads tags and displays page as author intended
  • FTP - use an FTP client to view/manage the directories and files on the server - view is similar to Windows Explorer, i.e., tree structure
• the path you see in the browsers address bar is not necessarily the "real" directory structure on the server
• folders (directories) and files are "aliased" to make them easier for humans to find:
  • students.signalflare.ca/dave/ might be aliased to
  • chameleon.jaguarpc.net/local/users/signalfl/public_html/students/dave which in turn might be an alias for
  • 132.98.54.34 or some other IP (internet protocol) address
• they aren't interchangeable, though - it depends on what protocol you're using to access the directory (HTTP, FTP, shell access)
• to access a site via HTTP (i.e., a web browser) you simply need to know the URL or web address
• to access a site via FTP, you need three things:
  1. the host name (www.signalflare.ca)
  2. a username (dave@signalflare.ca)
  3. a password
• in some cases you may also have to specify a directory to connect to (e.g., www or public_html) - signalflare sites will connect you directly to your default directory

1. Open a web browser and type http://students.signalflare.ca/ into the address bar.
2. Find your folder in the list and click on it to enter your site.
3. At this point, viewing your site in a web browser probably looks like this.
4. Now launch FireFTP from your Firefox browser (Tools > FireFTP).
5. Choose Create an account from dropdown menu in top left corner of browser window.
6. Account Name: SignalFlare
7. Category: Leave blank
8. Host: www.signalflare.ca
9. Login: [your_username]@signalflare.ca
10. Password: [your_password]
11. Click OK (bottom)
12. With new account selected in dropdown menu, click Connect button just to the right.
13. The left side window represents your local computer (file/folder structure will be slightly different for everyone, depending on where they are connecting from), while the right-side window represents the remote server you have connected to - in this case, signalflare

1. Using FireFTP, choose Create an account from dropdown menu in top left corner of browser window.
2. Account Name: SignalFlare Anon
3. Category: Leave blank
4. Host: www.signalflare.ca
5. Login: anonymous@signalflare.ca
6. Password: anonymous
7. Click OK (bottom)
8. With new account selected in dropdown menu, click Connect button just to the right.
9. Double-click the folder for 1850 to access the exercise files for the course.
10. To download files:
    1. Ensure that you have located the directory on your local drive that you wish to download files to (C:\Work) - this will be different if you are doing this from home.
    2. Click on the folder or file that you wish to download and then click the blue arrow just above the window. The file (or folder and all its contents) will be copied to your local directory.
11. Once you have downloaded your files, click the "Disconnect" button to logoff the shared server.
12. Before logging out: Downlowd the week02 folder.

• file transfer protocol is all about transferring files - you can't view, edit or otherwise change files using Core FTP or any other FTP client
• move your files UP to the server or DOWN from the server, then use your web browser and HTML editor to work with the files
• Core FTP is but one program, but all FTP clients work essentially the same - see a connection to the shared server using another FTP client
• you can download Core FTP here
• you can view and download other FTP clients here

• HTML editors
  • Notepad, EditPlus, CoffeeCup, Macromedia Homesite
  • souped-up text editors
• web authoring tools
  • Macromedia Dreamweaver, Adobe GoLive
  • these are WYSIWYG tools
• graphics software
  • Macromedia Fireworks, Adobe Photoshop, Paintshop Pro
  • handy for resizing, creating images
• FTP utilities
  • WS FTP, Core, Cute FTP; Mac: Fetch, Transmit
  • sometimes built-in to web authoring tools, but good idea to have standalone client as well
• web browsers
  • Internet Explorer, Mozilla FireFox, Opera, Safari
  • you must have more than one browser on your system - go ahead - they're free!

• hypertext markup language
  • defines document according to its structure: headings, paragraphs, lists, etc. - structural NOT presentational
  • markup is a way of embedding instructions in a document and come in many flavours: SGML, HTML, XML, XHTML, etc.
  • latest version is HTML 4.01
  • for more on specifications and "dialects" of HTML and XHTML see www.w3c.org
• basic building blocks of HTML are "tags"
  • <tag></tag>
  • may help to think of tags as containers
• structured language: rules for where tags can go
  • syntax: avoid "mixing" your tags: <b><i></b></i>
  • spacing: browsers ignore extra space - use tabs and extra carriage returns to format your code so that you can understand it
  • hierarchy: there are parent/child relationships for tags; body and head are children of html; inline elements should always be inside block elements, etc.
  • not case sensitive: this is okay for HTML: <B><i></I></b>
  (but not recommended)
  • XHTML must use lowercase characters, so you should get in the habit now
• many tags have attribute/value pairs:
  • syntax: <tag attribute="value">
  • eg: <body bgcolor="white">
  • more control is gained by using attributes/values: specifies characteristics of various elements
  • tags have specific attributes that can be used; attributes have specific types of values that can be used
• all valid (X)HTML documents should include document tags:
  • <html></html> - when using XHTML, must include xml name space:
    <html xmlns="http://www.w3.org/1999/xhtml">
  • <head></head>
  • <title></title>
  • <body></body>
• use comments to help you keep track of your code:
  • <!-- this is a comment -->

• W3C Recommendation: Use a Document Type Definition (DTD) to identify the type of markup language used in a web page
• it is not a part of the document, but describes it for the client's (web browser's) benefit
• different "flavours" of HTML use different tags and syntax
• DTDs need to include a pointer to the specifications for the dialect of html in use
• in this class you may see two primary DTDs:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• transitional versions allow, for example, the use of both Cascading Style Sheets and traditional formatting instructions such as fonts and other deprecated tags
• strict versions only allow you to use tags and techniques that are part of that specification
• all your documents must include a DTD - don't forget!
• Also important: XHTML documents must include an XML Character declaration on the first line of the document, even before the DTD:
  <?xml version="1.0" encoding="ISO-8859-1"?>

• most HTML elements come with default characteristics with regard to spacing, font weight, etc.
• sample block-element tags: (automatic line breaks)
• <p></p> - paragraph
• <hr /> - horizontal rule
• <ul></ul> - unordered list
• <li></li> - list items
• <ol></ol> - ordered list (i.e., automatically provides numbers)
  • <li></li> - list items
• <dl></dl> - definition list
  • <dt></dt> - definition term
  • <dd></dd> - definition data
• <h1...6></h1...6> - heading
• <blockquote></blockquote> - quotation format

• sample inline tags: (no automatic line breaks)
• <b></b> - bold
• <i></i> - italicize
• <img /> - images
• <font></font> - font elements
• block-level tags can include inline tags but not vice versa.

1. Open an HTML editor. In class we are using HomeSite, but you can use one of the editors linked from the resources page, or even Notepad.
2. Using today's notes and the text as a reference, create a new document that includes all the necessary document tags (note: many HTML editors will do this for you when you launch a new document). Be sure to included the reference URL (see above) as part of your doctype statement.
3. Add a <title> tag that reads something like Welcome to WidgetWerks Inc.. This should be unique for each page you create, but may include similar elements to imply relationships.
4. Save the file to the week02 folder you downloaded earlier and name it index.html.
5. Open up the home.txt file that you downloaded from the shared server earlier. Select everything in the document and copy it (Ctrl + C).
6. Go back to your new document, position your cursor inside your body "container" and paste the content from home.txt (Ctrl + V).
7. Use the linebreaks within the copy to guess where you should markup paragraphs and headings.
8. Use the other block elements and text formatting tags to markup the rest of the document. Save your work.
9. Follow these same steps to create webpages using the content from partners.txt and stuff.txt, but markup appropriate parts of the conent as lists. Save these files as partners.html and stuff.html in your week02 folder.

In your textbook you will find a series of "hands-on" exercises at the end of each chapter. Your homework for next week is as follows:

1. Complete exercises 7 and 9 on page 59 in Web Development & Design Foundations.
2. Create a folder in your signalflare account called hw2 and upload the files to this folder.
3. Do not, as the exercises suggest, print your code and hand in to your instructor.
4. Do upload your exercises to your account and email your instructor with the proper URL. HINT: it might look something like this:
   http://students.signalflare.ca/dave/hw2/

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