• web concepts
• connecting to websites
• tools of the trade
• HTML:
  • block elements vs. inline elements
  • hypertext links
• exercises
• 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
• all are simply communication standards (software, hardware) which facilitate the exchange of data
• the World Wide Web (www, web) is just one of those 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 (Firefox, Chrome, Explorer)
    • mail clients (Outlook Express, Thunderbird, more info on email clients)
    • FTP software (Filezilla, SmartFTP)
  • 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.bcitwebdev.com)
  • path (e.g., /lectures/two/)
  • file (e.g., index.shtml)
  • http://www.bcitwebdev.com/lectures/two/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.bcitwebdev.com/dtanchak/ 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 (ftp.bcitwebdev.com)
  2. a username (dtanchak)
  3. a password
• in some cases you may also have to specify a directory to connect to (e.g., www or public_html) - student accounts will connect you directly to your default directory

1. Open a web browser and type http://students.bcitwebdev.com/(your_directory_name) into the address bar.
2. At this point, viewing your site in a web browser may look like this.
3. Now launch FileZilla from your Start Menu (choose All Programs and locate FileZilla in listing).
4. Select File > Site Manager
5. Click on New Site in the bottom left corner of the dialogue box. The New Site will appear in the window above; rename it COMP 1850
6. Host: ftp.bcitwebdev.com
7. Port: 21
8. Logon Type: Normal
9. User: [your_username]
10. Password: [your_password]
11. Account: leave blank
12. Click Connect (bottom)
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, your directory on bcitwebdev.com

Note: This may already be a saved site in Filezilla (BCIT labs only); if so, start at number 8.

1. Using Filezilla, go to File > Site Manager.
2. Click on New Site in the bottom left corner of the dialogue box and rename it share out
3. Host: files.bcit.ca
4. Port: 22
5. Protocol: SFTP - SSH File Transfer Protocol
6. Logon Type: Normal
7. User: [ your student number ]
8. Password: [ your password ]
9. Account: Leave blank
10. In the Advanced tab, set the Default remote directory to /Share Out/COMP/1850.
11. Navigate to the folder for your class (LOCATION_Day) and download the week02 folder to your H: drive.
12. More on how to access Share In/Out via FTP.

• 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
• FireFTP is but one program, but all FTP clients work essentially the same - see a connection to the shared server using another FTP client
• a good choice for home use (on Mac OS and Windows): download Filezilla
• you can compare other FTP clients here

• HTML editors
  • Brackets, Notepad++, TextWrangler (Mac)
  • souped-up text editors
  • typically not identified as client software, but may have FTP capabilities built in, which would effectively make it a client
  • More options...
• web authoring tools
  • Adobe Dreamweaver, Kompozer, CoffeeCup
  • summary of HTML editors at Wikipedia
  • typically not identified as client software, but may have FTP capabilities built in, which would effectively make it a client
• graphics software
  • Adobe Photoshop, The GIMP, GIMPshop
  • handy for resizing, creating images
  • summary of raster graphics programs at Wikipedia
  • typically not identified as client software
• FTP utilities
  • Filezilla, SmartFTP Mac-specific: Transmit
  • sometimes built-in to web authoring tools, but good idea to have standalone client as well
  • client software
• web browsers
  • Firefox, Chrome, Explorer, Safari, Opera
  • you must have more than one browser on your system - go ahead - they're free!
  • client software

• 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.
  • for more on specifications and "dialects" of HTML and XHTML see www.w3c.org
  • For this class, we will be using HTML5, keeping in mind that all of its features are not fully supported by all browsers
• 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.
  • case insensitive: this is okay for HTML: <B><i></I></b> but I recommend using lowercase characters where possible
• many tags have attribute/value pairs:
  • syntax: <tag attribute="value">
  • eg: <img src="imagename.gif">
  • 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 HTML documents need to include document tags:
  • <html></html> - should include language attribute to help screen readers, search engines, spell checkers, etc.:
    <html lang="en">
  • <head></head>
  • <meta> - several uses, but should at least specify character set:
    <meta charset="utf-8">
  • <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
• some common DTDs you may encounter:
  • <!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">
  • <!DOCTYPE html>
• 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!

• most HTML elements come with default characteristics with regard to spacing, font weight, etc.
• block-level elements always start on a new line and takes up the full width available (stretches out to the left and right as far as it can)
• sample block-element tags:
  • <p></p> - paragraph
  • <h1></h1> - heading (numbers 1-6 indicate importance, not size)
  • <hr> - horizontal rule (also an empty element)
  • <ul></ul> - unordered list
    • <li></li> - list items
  • <ol></ol> - ordered list (i.e., automatically provides numbers)
    • <li></li> - list items
  • <dl></dl> - description list
    • <dt></dt> - description term
    • <dd></dd> - description data
  • <blockquote></blockquote> - quotation format

• inline elements do not start on a new line and only take up as much width as necessary.
• sample inline tags:
  • <strong></strong> - strong emphasis
  • <em></em> - emphasis
  • <img> - images
• block-level tags can include inline tags but not vice versa.

1. Open an HTML editor. In class we are using Brackets, but you can use one of the editors linked from the resources page.
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).
3. Don't forget to use a <meta> tag to specify your character encoding (see the page template in lecture one).
4. 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.
5. Save the file to the week02 folder you downloaded earlier and name it index.html.
6. Open up the home.txt file that you downloaded from the shared server earlier. Select everything in the document and copy it (Ctrl + C).
7. Go back to your new document, position your cursor so that it is nested inside your body "container" (<body></body>and paste the content from home.txt (Ctrl + V).
8. Use the linebreaks within the copy to guess where you should markup paragraphs and headings.
9. Use the other block elements and text formatting tags to markup the rest of the document. Save your work.
10. 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.

• There are lots of syntax rules to HTML - how can you remember them all?
• Check your work using a validator:
  W3 Validation Service
• Will help you find missing quotes, brackets and improperly nested items

• one of the most important elements when designing a web site
• inline elements
• <a></a> - anchor element
  • doesn't work by itself; must point it to something
  • add href attribute (hyperlink reference)
  • relative link refers to location in relation to current working directory, e.g., up or down the directory tree (../../images/logo.gif)
    • <a href="index.html">click here for home page</a> (same directory)
    • <a href="../index.html">click here for home page</a> (up one directory)
    • <a href="products/index.html">click here for products page</a> (from curent directory, go to products directory)
    • <a href="/products/index.html">click here for products page</a> (relative to root of site)
  • absolute (or fully qualified) link refers to inclusion of protocol, server/host (http://www.eighteenfifty.com/) - use for links to other websites
  • in-page anchor - links within documents:
    

    <a href="#link">click here</a>
<a id="link" name="link">...to jump to here</a>

    Can also link directly to a point on a page:
    

    <a href="somepage.html#link">click here</a>
<a id="link" name="link">...to jump to here (on somepage.html)</a>

  • email - launches email message window (<a href="mailto:bcit1850@gmail.com">email me (bcit1850@gmail.com)</a>)

1. On the home page, add text at the end of the Technical Evolution section that says "Learn more about our stuff." and link it to the stuff page.
2. Also on the home page, add text at the end of the Friends & Neighbours section that says "Learn more about our partners." and link it to the partners page.
3. In the footer of all pages, make the phrase "runwithscissors design" an absolute link to the runwithscissors site.
4. Also in the footer on all pages, create a bookmark link from the word "top" that links to the top of the page. Remember: you will need a label to link to (see notes).
5. On the stuff page, make the email address that appears near the bottom of the page a clickable link that points to your email address.
6. Create a navigation bar horizontally across the top of each page. Separate each element with a pipe (|) character. Here's an example:

   Home | Stuff | Partners

   Make sure you take the link off the text for the current page. Experiment with other formatting or ways to separate the navigation from content (horizontal rules, etc.).

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 9 and 10 on page 65 in Web Development & Design Foundations.
2. Create a folder in your bcitwebdev.com account called hw2 and upload the files to this folder.
3. Upload your exercises to your account and email your instructor with the proper URL. HINT: it might look something like this:
   http://students.bcitwbdev.com/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.