comp 1850 | introduction to web design and development

lecture two

agenda

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

web concepts

  • there are many ways that information can be passed between computers:
  • 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
    client server interatction
  • components we need to understand:
  • URLs (uniform resource locator) - the standard way to give the address of Internet resources that are part of the WWW
    • protocol (http://)
    • server/domain name (bcitcomp.ca)
    • suffix: top level domain TLD (.ca)
    • prefix: subdomain (www.)
    • path (/comp1850/readings/)
    • file (index.shtml)
    • http://www.bcitcomp.ca/comp1850/readings/index.shtml

connecting to websites

  • 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.bcitcomp.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.bcitcomp.ca)
    2. a username (a00123456@bcitcomp.ca)
    3. a password
  • in some cases you may also have to specify a directory to connect to (e.g., www or public_html) - bcitcomp sites will connect you directly to your default directory

final notes about ftp

  • file transfer protocol is all about transferring files - you can't view, edit or otherwise change files using Filezilla FTP or any other FTP client
  • move your files UP to the server or DOWN from the server, then use your HTML text editor to work with the files

tools of the trade

HTML review

  • 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 5
    • 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>
    • <head></head>
    • <title></title>
    • <body></body>
  • use comments to help you keep track of your code:
    • <!-- this is a comment -->

HTML Template

document type definitions

  • 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 we will use one of three primary DTDs:
    • HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • HTML 5: <!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!
  • use the HTML 4.01 DTD for now - we'll transition to XHTML in a couple weeks

block elements vs. inline elements

  • 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
  • <tt></tt> - typewriter text
  • <pre></pre> - pre-formatted text
  • generally, block-level tags can include inline tags but not vice versa - but you will find that things do not come crashing down if you mix them up a bit.

hypertext links

  • inline elements
  • <a></a> - anchor element
    • doesn't work by itself; must point it to something
    • add href attribute (hyperlink reference)
  • one of the most important elements when designing a web site
    • bookmark - links within documents (<a href="#link">click here</a>; <a name="link">...to jump to here</a>)
    • relative - links between documents (<a href="../index.html">click here for home page</a>)
    • absolute / fully qualified - links to other sites (<a href="http://www.eighteenfifty.com/">click here for the class home page</a>)
    • email - launches email message window (<a href="mailto:bcit1850@gmail.com">email me (#98;cit1850@gmail.com)</a>)
  • relative link refers to location in relation to current working directory, e.g., (./images/logo.gif)
  • fully-qualified link refers to inclusion of protocol (http://www.eighteenfifty.com/)
  • the target attribute
    • target="_self" open the url in the current browser (default)
    • target="_blank" open the url in a new browser

urls and your directories

  • files can be organized in different ways, and each way will have an impact on your URLs and how you link to them in anchors and image refrences
  • linking within a single folder:
    folder eg one
  • relative file structure:
    folder eg two
  • segregated file structure:
    folder eg three
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 |