Workshop Description and Objectives

Description

• This three-part workshop, will teach you how to build web pages using HTML.
• HTML stands for HyperText Mark Up Language.
• It is the basic programming language used on the world wide web and the foundational tool for developing your web skills.

Prerequisites:

Before taking this course you should have:

• Some experience with using the World Wide Web. If you have never used a browser such as Netscape or Internet Explorer, please ensure you become familiar with them and with the World Wide Web before taking this course.
• An understanding of how to navigate the 'desktop' of your PC computer.
• A basic windows file management skills and know how to copy and paste text between documents.
  

Workshop Objectives

Learn:

• basic HTML tags needed to define the document
• basic text formatting, sizing and colouring
• creating lists
• how to create links to other web documents and links within the document
• the basics of putting graphics on a web page
• tips on converting a web page into a web site
• how to transfer your files to a server for viewing on the WWW

Basics of Web Design - Part 1

1-1 Objectives

This workshop will teach you how to create and understand the basics of HTML. With guided practice lessons, simple to follow instructions, and handouts, you will be able to create simple yet effective HTML pages.

1-2 Basic Concepts/Terminology

HTML

HTML is short for Hyper Text Markup Language and is the authoring language used to display content in Web Browsers. This includes the structure of a page, how fonts are formatted, and how images are displayed. This is accomplished by using tags.

For Example:<p align="right"></p> and <h1></h1>.

index.htm vs. index.html

Both these files types are just HTML (HyperText Markup Language) code. These extensions whether 3 or 4 characters long are identical, just make sure you are consistent in whether you use .htm or html. The .HTM extension was used for operating systems like Windows 3.x that did not support long file names.

HTTP

HTTP is short for Hyper Text Transfer Protocol. It is the underlying protocol used by the World Wide Web. HTTP defines how information is formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. For example, when you enter a URL in your browser, this sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page. For Example: http://www.utoronto.ca.

1-3 HTML Editors

An HTML editor is a program that is designed with additional functions which make coding HTML by hand easier. Some familiar HTML editors include Dreamweaver, Frontpage and GoLive! Although you will probably be using these editors to do the major part of your HTML page, it is still good to understand the coding that goes on "behind" these pages.

When using various text editors, you may find that some include highlighting different parts of HTML code in different colour (tag names in one colour, attribute names in another, elements in a third), automatically spotting errors in coding like an unclosed tag, and other functions that assist you when you code HTML by hand. HTML editors can make programming easier, but not necessarily faster.

HTML Editors

1. Dreamweaver
2. Frontpage
3. GoLive!

Text Editors

1. Notepad

   Notepad is a general-purpose text editor which is located in your Start » Accessories » Notepad.

2. Arachnophilia

   Arachnophilia is a free HTML editor, specifically designed to assist in the creation of webpages. It can be downloaded at http://www.arachnoid.com/arachnophilia/

3. SimpleText or TextEdit (MAC)

Another general purpose text editor in MAC version - For more information visit the Apple.com website

More information re: HTML/Text editors in Lesson 11 in ABC3

1-4 Review

• The Web is made up of Hypertext Mark Up Language (HTML).
• It works with the rules of the Hyper Text Transfer Protocol (HTTP).
• HTML pages are viewed in a Web browser.

2-1 Objectives

• To build comprehensive understanding of the "tags" and its meaning and purpose in HTML.
• To learn most basic tags, their functions and the conventions associated with their use in web pages.

2-2 HTML Tags, Elements and Attributes

What is an HTML tag?

Tag elements define the structure of an HTML document and wrap around the (plain text) content.
All tags must be enclosed in (less than) "<" and ">" (greater than) symbols.

What is an Element and anAttribute ?

An attribute is attached to a tag, and usually has a corresponding value (element) enclosed in quotation marks and separated from the attribute name with an "equals" sign.

Example:

HTML tips

• Tags should be written in all lowercase.
• "Most" tags have an opening and a closing tag.
• White space is ignored in HTML.
• You cannot make up your own tags.
• HTML documents will appear differently on different browsers.
• Please ensure proper "nesting" of your tags to ensure that your content is displayed properly.

Basic Tags and Document Structure

The most basic HTML tags are those necessary to the proper structure and identification of an HTML document, as listed below.

If you would would like some additional information regarding meta tag info. please refer to this page - Meta Tag Builder Version 2 - http://vancouver-webpages.com/META/mk-metas.html

2-4 Review

HTML web pages consist of simple elements called tags. When building a web page from the beginning, it is important to identify the document as an HTML document with the <HTML> and </HTML> tags.

3-1 Objectives

• To learn how to add paragraph formatting , text styles, and ordered and unordered lists to your webpage.

3-2 Structural and Styling Tags

A number of basic tags are used to structure an HTML document and provide simply styles to its text.

3-4 Headings

3-6 Ordered & Unordered Lists

Structure of List Tags

Nesting One List Within Another

3-8 Review

To add style and form to your web page you may:

• Add paragraphs, breaks and/or horizontal rules tags
• Add style to your text
• Organize content using lists

4-1 Objectives

• To learn how to change the color of the text and background of your web pages using the STYLE attribute
• To learn the distinction between "color by name "and "color by number"
• Find resources online that can help you "color pick" your correct shade and color

4-2 Text & Background Colour

The STYLE Attribute

The STYLE attributes allows you to embed a number of style directives within a tag that will affect all content within that tag. The syntax of using it is slightly more complicated than the standard tag-attribute-value combination.

• Style directives all come within the STYLE attribute's value, and consist of a name and value separated by a colon.
• Multiple style directives are separated from each other by a semicolon.
• Putting style directives in the BODY tag will affect the entire document.

Color Selection

• Colours can be specified using either common names (red, green, blue, etc) or hexadecimal values for more specific colour mixing.
  • Some example hexadecimal values...
    • Blue: #0000FF, Green: #00FF00, Red: #FF0000
  • The 16 standard HTML color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

Points to consider

• Ensure your text is readable by select colors that provide adequate contrast between body text and background color
• Attempt to check the color of the pages by previewing your site in different browser types and versions

Refer to Appendix A (216 Web Safe Colors)

Another useful tool to use to incorporate color into your web site - http://www.colorschemer.com/online/. If this links is not working, use this http://www.padge.com/colorscheme.htm

4-4 Review

Web page colour can be changed by putting style directives within the STYLE attribute of tags.

5-1 Objectives

• To learn how to add different types of images to your web site
• Adding "alt" text as an attribute to image tags

5-2 Graphic Types & Attributes

Graphic Types

• Most webpages and websites incorporate graphics and icons
• The graphic formats most commonly used on the WWW are JPEG and GIF
• JPEG (file extension .jpg) stands for Joint Photographics Experts Group. As it uses up to 16,000,000+ colors, this is the optimal format for photographs.
• GIF (file extension .gif) stands for Graphics Interchange Format. It uses a maximum of 256 colours, and is the optimal format for icons, text and logos. It also allows for images that have transparent sections, allowing you to create the appearance of non-rectangular graphics on webpages.

GIF and JPG Examples

Images Turned Off Example

<img src="pm.jpg" alt="photo of Jean Cretien" width="162" height="164" >

Graphic Attributes

• All images should have ALT text- consider how someone with images turned off might view your site.
• Alt text should be descriptive - consider alt = "photo" vs. alt = "photo of Prime Minister "
• To view the graphic attributes, right click on an image, then select "properties" to obtain information such as "dimensions", "type", etc.

5-3 How to Add Graphics to your website

Starting Out

Before beginning to add images, it is a good idea to figure out how many images will be displayed and where. You will also need to resize your images prior to putting them into your webpage.

One method of laying out images on a page is to insert them into the cells of a borderless table. This can also be used to lay out images in relation to page text and so on.

Basic image tag with SRC (image source) and ALT (alternate text) attributes

This is a photograph of two siamese cats, this text and the image to the left are displayed in a table with one row and two columns and with a table border of "0". With the hspace (horizontal space) of "0" - 10 pixels are placed on either side of the image giving it space, especially in this example where text is next to the image.

• The souce image is the file "cats.jpg", which is located in the sub-directory "images" of the directory containing the web page.
• The text that will be displayed if the user can't view the image is "Photo of My Cats"
• As an embedded tag, IMG does not require a closing tag

Additional Attributes

5-5 Review

• Be sure to include ALT text to ensure that people who do not or can not view images when they surf the web know what they are
• You may want to resize your graphics before inserting them into your webpage
• Understand the differences between the many image formats available

6-1 Objectives

• Learn the difference between a "relative" and an "absolute" link
• Learn to create...
  • a hyperlink to other documents on your website
  • a hyperlinks to web documents anywhere on the internet
  • a graphic that is a hyperlink
  • an e-mail hyperlink

6-2 The Basics

Relative Links

"hobbies.html" is a file in the same directory on the web server as the web page that contains the original link. In other words, the location of the target file is described relative to the anchor or linking file.

• "hobbies.html" - looks for a document called hobbies.html in the same directory as the current document
• "files/hobbies.html" - looks for a document called hobbies.html in the sub-directory called "files" of the current directory
• "../hobbies.html" - looks for a document called hobbies.html in the parent directory of the current directory
• The same principle applies to displaying images: the "src" attribute of the <img> tag points to the location of the image relative to the document it is placed in.

Absolute Links

The complete address to the target file is specified in an absolute link. Use absolute links when linking to other websites, not files within your own website.

6-3 Link Types

Linking pages to other local files

The simplest link is one to a file within the same directory as the page you are linking from.

Example - Knock Knock! (link will open in the same window)

Opening a Link in a New Window

You can have this document (link) open in a new browser window by adding the following information in the tag:

Another Example - Knock Knock (link will open in a new browser window - target="_blank")

Links to Other URL or Web Document

The following links exist outside of this tutorial (links will open in a new browser window - target= "_blank")

• Link to the University of Toronto Library - http://www.library.utoronto.ca/
• Link to the Globe & Mail Newspaper - http://www.globeandmail.com/
  
  

Points To Consider

• It is important to include the protocol in absolute links (i.e.University of Toronto)
• Make the hyperlink text as descriptive and short as possible
• Avoid the use of "click here"
• UNIX computers are case sensitive (i.e. Links.html" or links.html) will be two different files
• A %20 is added by HTML editors where a space is left

6-5 Graphic Links

Graphic images can also be used as a link to a web page or web site. Instead of putting text as a placeholder for a link, an image can be used.

The following tags will allow a graphic to be a link:

<a href="http://rcat.utoronto.ca" target="_blank">
<img src="rcatlogo.jpg" height="92" width="93" alt="RCAT logo>
</a>

6-7 Email Links

• To ensure that your site is accessible to all users, it is a good idea to include the full email address in the {link info}.

<P>Email Someone<a href="mailto:someone@utoronto.ca">someone@utoronto.ca</a></P>

6-9 Review

There are many different types of links that you may add to your web page. In this lesson we learned about the following four types of links:

• Absolute links
• Relative links
• Graphic links
• E-mail links

7-1 Objectives

• To learn how to add table to your HTML pages
• To understand headers, columns, rows and other structural requirements of a table

7-2 Table Tags

<table> ... </table>

<tr> ... </tr>

<td> ... </td> 

<th> ... </th> 

<caption> ... </caption> 

Structure of Table Tags

7-4 Table Tag Attributes

Examples: 

7-6 Review

In this lesson we learned about the following:

• Adding a table
• Adding rows to the table
• Adding data and header cells to rows
• Captioning tables and using attributes on the various table tags

8-1 Objectives

In this lesson you will learn:

• How to use Notepad to create simple web pages
• How to save your files
• How to link your local files to each other
• How to start "mapping out" your directory structure
• How to download and save images, and embed them in your web pages

8-2 Getting Started

Opening up Notepad

Now that you have learned the basics with the help of our HTML Code Converter, we will look into creating actual HTML pages with a text editor called Notepad (the default text editor available on Windows systems).

Notepad can be found within the Start Menu » Programs » Accessories » Notepad. In opening Notepad, you will notice that it is a very simple text editor with no formatting or style sheets to guide you. This is adequate for creating HTML pages, as the code needs only to be plain text, because all HTML consists of plain text marked up with special tags. (i.e. <b>bold text </b>)

Once you have opened Notepad, you can type HTML code exactly as you have been doing before using the HTML Code Converter. This time, however, you will be saving your files to the hard drive so they can be opened in a web browser. Creating multiple HTML files in this manner and linking them together are the basic steps to completing your website.

8-6 Review

HTML code is just plain text with special tags. This file needs to have the extension .html or .htm in order for the page to be rendered properly on a web browser. Remember to make sure that your are putting your "index.html" page in the root folder of your web site.

9-1 Objectives

In this lesson you will learn:

• The value of organizing your files when creating a website
• How to plan a logically-ordered web site

9-2 Website Organization

Website Organization with the User in Mind

Usually, a site's main introduction page is called "index.html". Placing an index main page into your directory on a webserver will automatically allow any websurfer to find this page when typing in your directory address, with no "/index.html" needed.

e.g. one could type into a web browser individual.utoronto.ca/sammyjones/index.html or simply individual.utoronto.ca/sammyjones and get the same result.

Eventually, your initial webpage will link to a number of other pages, and it is how these pages relate to each other that takes careful consideration.

9-3 Review

The index.html file is essential to your web site because it is the starting point that directs users to the other pages of a web site. Understanding this also conveys the importance of planning your web site with a logical order in mind, as opposed to letting your web site grow organically.

10-1 Objectives

• In this lesson we will introduce you to the WS_FTP FTP client program.
• You will learn how to upload files using the WS_FTP program.
• You will learn how to download a copy of WS_FTP for your own use.
• You will be introduced to University of Toronto personal webspace through UTORweb.

10-2 WS_FTP Overview

What Is WS_FTP?

WS_FTP is an FTP client program which uses a graphical interface. It allows you to communicate with a remote FTP server to upload files and perform other functions. It is both easy to use and functional.

Ipswitch, the makers of WS_FTP, previously provided a version of WS_FTP called WS_FTP LE, which could be used free of charge by students, faculty and staff of educational institutions, or by home users using it for non-commercial purposes.

It has been replaced by WS_FTP Home which is now only a 30 day trial

How Can I get a Copy of WS_FTP Home for My Own Computer?

Go to www.ipswitch.com to register.

WS_FTP is also installed on the computers for this class.

10-4 Getting Personal Webspace with UTORweb

The University of Toronto's UTORweb service allows faculty, staff and students to request individual space for web pages and other files on a University of Toronto web server. More details can be found at http://www.utoronto.ca/ns/utorweb/faq.html

You can also access the notes from a previous lunchtime workshop RCAT conducted on FTP at http://www.utoronto.ca/cat/whatson/presentation_notes/ftp/index.html - these notes have details of WS_FTP and UTORweb, along with some other information on FTP.

10-5 Review

A brief introduction to uploading files to a web server to make your web pages accessible to the public shows that the process is fairly simple. Some things to watch for when using FTP are:

• Ensure that the address of the FTP server you are logging onto is correct.
• Ensure that you use the proper user ID and password to access the server.
• Be careful when deleting or overwriting files or directories.

Personal web space on University of Toronto servers is available through the http://www.utoronto.ca/ns/utorweb/faq.html

11-1 Introduction

Doing web design by hand coding HTML can be effective, but it can also be slow, especially for pages with complex tables or layouts. Since the introduction of HTML, numerous different tools have been developed that help web designers out, either by making coding easier, or by automating coding functions so that the focus can be more upon the design aspect.

11-2 HTML Editors

An HTML editor is a program that in many ways resembles a normal text editor, and can even be used as one. However, it is designed with additional functions which make coding HTML by hand easier. These may include highlighting different parts of HTML code in different colour (tag names in one colour, attribute names in another, variables in a third), automatically spotting errors in coding like an unclosed tag, and other functions that assist you when you code HTML by hand.

HTML editors can make programming easier, but not necessarily faster. Below are links to two such programs with which we have experience (there are others out there).

Arachnophilia

Arachnophilia is a free HTML editor, specifically designed to assist in the creation of webpages. It can be downloaded at http://www.arachnoid.com/arachnophilia/

EditPlus Text Editor

EditPlus is an Internet-ready 32-bit text editor, HTML editor and programmers editor for Windows. Additional information and a download version can be found at http://www.editplus.com/

11-3 WYSIWYG Editors

WYSIWYG stands for "What You See Is What You Get". WYSIWYG editors have an interface similar to that of a word processing or desktop publishing program, in which you enter the content by typing in the text and decide on the formatting by the use of buttons and menus. You are also able to insert tables and images into the document by use of buttons and menus.

Meanwhile, in the background, the program writes all of the HTML code for you. This greatly speeds up the production of web content, allowing you to focus almost completely on the design aspects rather than the coding aspects. Below are two WYSIWYG programs that are either freely-available or offered for the use of staff, faculty and graduate students by RCAT.

Netscape Composer

Netscape Composer is part of the free software package offered by Netscape. You are probably familiar with Netscape Navigator, their popular web browser. Composer has a limited number of functions compared to a program like Dreamweaver (see below), but it can be used for free simply by downloading the Netscape package from http://www.netscape.com/

Dreamweaver

Dreamweaver is a very powerful WYSIWYG program from Macromedia. A 30-day demo can be downloaded at http://www.macromedia.com/software/dreamweaver/download/.

RCAT also offers classes on using Dreamweaver, and bookable computers with full versions of the Dreamweaver software are available.

What's Next?

Practice, Practice, Practice ...

Whether you use the workshops HTML Code Converter, Notepad or any other HTML Editor or a WYSIWYG editor, practice is what is important. As oddly as it sounds, making mistakes, loosing your files, deleting or overwriting them are very common mistakes - usually ones that you do once and learn from.

RCAT Workshops and Resources

Here are some of the resources available to graduate students and faculty through the Centre for Academic Technology:

• Advanced Web / Internet Design Courses - Half day programs on advanced topics such as image editing, CGI, Javascript and CSS and Courseware Development. Info at: http://www.utoronto.ca/cat/whatson
• Equipment - Equipment in the Centre for Academic Technology Lab is available to faculty and graduate students for research and/or development of teaching materials. Resources include high end software for HTML authoring, multimedia design, etc. Hardware includes flatbed and slide scanners for Mac and PC. Info online at:
  http://www.utoronto.ca/cat/booking/index.html
• The Academic Technology Resources - http://www.utoronto.ca/cat/clearinghouse/index.html
  • Design Guidelines
    • Yale Web Style Guide - http://www.webstyleguide.com/index.html?/index.html
    • Stylis Inc.Net - How To Develop An Online Course -http://www.stylusinc.net/articles/online_course/ tutorial/process.shtml
    • Web Developer.COM - http://www.webdeveloper.com/
    • Web Developer's Virtual Library - http://wdvl.internet.com/WDVL/
    • The Web Developer's Handbook - http://www.alvit.de/handbook/
      
  • Free Online Tutorials
    • W3Schools.COM - http://www.w3schools.com/
    • Training Tools.COM - http://www.trainingtools.com/