Modular Survey Assignments 5

Return to previous assignments page

HTML Primer

Choose What You Want - Final Project

Your final project will involve you choosing any one of those software packages and designing a tutorial that you feel other classes could use in the future.

If you remember in our previous "Flash Tutorial" assignment, we used screen captures and detailed step by step instructions to guide our readers through the task in a simple, easy to follow pattern.

Your task will be to create a project that will take the average student aproximately 2 - 3 classes to complete.

You must provide the following criteria:

• detailed step-by-step instructions

• illustrated screen captures with arrows and highlights

• links to appropriate sources

• and a finished copy of the project for students to see

Your finished tutorial will be marked on the following sections:

• ease of understanding 25%

• quality of presentation 25%

• organization 25%

• content 25%

Total 100 points - 10% of overall course mark.

Due date: end of class on Friday, June 17th

Vote for your favourite Software Package of the year!

Dreamweaver & CSS

What is CSS

CSS stands for Cascading Style Sheets which are definitions for a document such as an HTML page that define that page's style or presentation. By presentation we mean how content on a page is displayed. Is it displayed as simple black text on a white background? Or is it displayed in a more complex layout consisting of images and content divided into columns? Style sheets are capable of specifying that presentation without interfering with the content of the page. This means that the same content can be used with many styles without being modified - a separation of presentation and content.

Why are They Cascading?

The term cascading in CSS refers to how many style sheets can affect a single document in a cascading manner. This means that they all come together to create one single style that decides the overall presentation of the page. If styles between sources conflict, a weighting system is used to decide which style has precedence.

Dreamweaver and Style Sheets

As a WYSIWYG (What You See Is What You Get) editor, Dreamweaver makes creating and using style sheets a snap. Dreamweaver 8 introduces a unified CSS panel that keeps track of all styles used in a document giving you easy access to either use, edit, or create any style you need. The Property Inspector also continues to provide css-related options for the current selection.

• • The following will work with styling text in Dreamweaver 8. Get the source files to follow along yourself.

This tutorial will show you how Dreamweaver can use styles applied with style sheets to turn text_document.html into text_document_styled.html. It will help better familiarize you with the CSS panel and how it and the Property Inspector can be used to manipulate styles within your HTML documents.

See Introduction to CSS with Dreamweaver 8 to continue.....

Introduction to Dreamweaver

Dreamweaver 8 is a easy to use software that allows you to create professional web Pages.

The design edition features of Dreamweaver 8 allow you to quickly add objects and functionality to your pages, without having to program the HTML code manually.

It's possible to create tables, edit frames, work with layers, insert JavaScript behaviors, etc., in a very simple and visual way.

Introduction to Dreamweaver Tutorial

Dreamweaver 8 Online Course

Assignment 1 - Create a Rollover Image

* See examples of rollover images

See - 9 Websites Stuck in 90's

HTML Primer

What is an HTML File?

• • HTML stands for Hyper Text Markup Language

  • An HTML file is a text file containing small markup tags

  • The markup tags tell the Web browser how to display the page

  • An HTML file must have an htm or html file extension

  • An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad.

In Mac OS X, start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!

Type in the following text:

Save the file as "mypage.htm".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

Note: If you are using Internet Explorer 7, the File menu might be hidden. Press the "Alt" key on your keyboard to make it appear.

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.

With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.

However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why?

A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm". Also make sure that you use the same name when you open the file in your browser.

Q: I have edited an HTML file, but the changes don't show in the browser. Why?

A: A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page.

Q: What browser should I use?

A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox, Netscape, or Opera. However, some of the examples in our advanced classes require the latest versions of the browsers.

Q: Does my computer have to run Windows? What about a Mac?

A: You can do all your training on a non-Windows computer like a Mac.

Use this HTML Simulator to try out bits of code and see the changes instantly

This is a short introduction to writing HTML. What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World.

Many people still write HTML by hand using tools such as NotePad on Windows, or TextEdit on the Mac. This guide will get you up and running. Even if you don't intend to edit HTML directly and instead plan to use an HTML editor such as Netscape Composer, or W3C's Amaya, this guide will enable you to understand enough to make better use of such tools and how to make your HTML documents accessible on a wide range of browsers. Once you are comfortable with the basics of authoring HTML, you may want to learn how to add a touch of style using CSS, and to go on to try out features covered in my page on advanced HTML

p.s. a good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". On some browsers, you instead need to click on the "File" menu and then on "View Source". Try it with this page to see how I have applied the ideas I explain below. You will find yourself developing a critical eye as many pages look rather a mess under the hood!

For Mac users, before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. For TextEdit, you can set this with the "Format" menu's "Make Plain Text" option.

This page will teach you how to:

• • start with a title

  • add headings and paragraphs

  • add emphasis to your text

  • add images

  • add links to other pages

  • use various kinds of lists

If you are looking for something else, try the advanced HTML page.

Start with a title

Every HTML document needs a title. Here is what you need to type:

<title>My first HTML document</title>

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar. With just a title, the browser will show a blank page. Don't worry. The next section will show how to add displayable content.

Add headings and paragraphs

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

<h1>An important heading</h1>

and here is a slightly less important heading:

<h2>A slightly less important heading</h2>

Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:

<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>

Adding a bit of emphasis

You can emphasize one or more words with the <em> tag, for instance:

This is a really <em>interesting</em> topic!

Adding interest to your pages with images

Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.

<img src="peter.jpg" width="200" height="150">

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

<img src="peter.jpg" width="200" height="150" alt="My friend Peter">

The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:

<img src="peter.jpg" width="200" height="150" alt="My friend Peter" longdesc="peter.html">

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.

Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html" in the same folder/directory as the HTML file you are editing:

This a link to <a href="peter.html">Peter's page</a>.

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

If the file you are linking to is in a parent folder/directory, you need to put "../" in front of it, for instance:

<a href="../mary.html">Mary's page</a>

If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a "/" in front of it, for instance:

<a href="friends/sue.html">Sue's page</a>

The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed, for instance:

<a href="../college/friends/john.html">John's page</a>

Which first looks in the parent directory for another directory called "college", and then at a subdirectory of that named "friends" for a file called "john.html".

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:

This is a link to <a href="http://www.w3.org/">W3C</a>.

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

<a href="/"><img src="logo.gif" alt="home page"></a>

This uses "/" to refer to the root of the directory tree, i.e. the home page.

Three kinds of lists

HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:

<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul>

Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:

<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol>

Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:

<dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl>

The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:

<ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li> </ol>

You can also make use of paragraphs and headings etc. for longer list items.

HTML has a head and a body

If you use your web browser's view source feature (see the View or File menus) you can see the structure of HTML pages. The document generally starts with a declaration of which version of HTML has been used, and is then followed by an <html> tag followed by <head> and at the very end by </html>. The <html> ... </html> acts like a container for the document. The <head> ... </head> contains the title, and information on style sheets and scripts, while the <body> ... </body> contains the markup with the visible content. Here is a template you can copy and paste into your text editor for creating your own pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> replace with your document's title </title> </head> <body> replace with your document's content </body> </html>

Tidying up your markup

A convenient way to automatically fix markup errors is to use HTML Tidy which also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits. Tidy is available for a wide range of operating systems from the TidyLib Sourceforge site, and has also been integrated into a variety of HTML editing tools.

Web Basics

HTML Assignment 1 (save as yourname-HTML1.html)

Create a page that includes the following elements. Notice the links, so if you have a question click on the link to find the answer.:

• Within the head section create a web page title (displayed in title bar of browser window): My Favorite Things

• Use a color for the background for the body.

• A centered heading (use the largest heading size) of: My Favorite Things (remember to turn off centering!)

• Include a horizontal rule underneath the heading that is colored, centered, 75% of the screen’s width and has a size of 8.

• Include the following introductory paragraph, filling in the blanks with the appropriate information for yourself. Use a font size of 4 and a font face of Comic Sans MS:

My name is _________ and I am a __________ at Pinetree Secondary. This web page lists my favorite foods, favorite television shows, and favorite movies.

ASSIGNMENT 2

Create an HTML homework section on your site.

Research the following questions online and post your answers on your site.

Wednesday Questions

What is HTML?

1. What do the letters HTML represent?

2. HTML is called a __________ language. HTML is not a __________ language.

3. HTML uses __________ __________ to describe web pages.

HTML Tags

1. HTML tags are surrounded by __________ __________.

2. Most HTML tags come in pairs with the first tag called the __________ tag and the second tag called

the __________ tag.

HTML Document = Web Pages

1. What three characteristics are listed in this section?

Editing HTML

1. What plain text editor is recommended for editing HTML?

2. List one program that professional web developers like to use.

?HTM or .HTML File Extension.

1. Explain why .HTML extension can be used when naming Web pages.

HTML – Basic

1. What tag(s) is used to define a heading?

2. What tag defines a paragraph?

3. What tag defines a hyperlink?

4. What must be included in the tag for question 3 so that it knows where the hyperlink should go?

5. What tag defines an image?

6. What attributes for the tag in question 5 were provided in the example

Thursday Questions

HTML – Headings

1. List the heading tags available in HTML.

2. Which heading tag defines the largest heading?

3. Which heading tag defines the smallest heading?

4. What do Web browsers automatically add before and after a heading?

Headings Are Important

1. (T or F) Headings should be used to make text Big and bold..

2. How do search engines use your headings?

3. Headings are used to show the document __________.

HTML Lines

1. What tag creates a horizontal line?

2. Write the code to add the comment add image here.

HTML Tip – How to View HTML Source

1. How do you view the source code of an HTML document in Internet Explorer?

2. How do you view the source code of an HTML document in Mozilla Firefox?

HTML Paragraphs

1. What tag defines a paragraph in HTML?

2. What do Web browsers automatically add before and after a heading?

Don’t Forget the End Tag

1. (T or F) Most Web browsers will not display a paragraph correctly if you forget the end tag.

2. (T or F) Future versions of HTML will require you to close the tag.

HTML Line Breaks

1. What is the proper way to write a line break tag?

2. (T or F) You can add multiple line breaks to a paragraph of text.

HTML Output – Useful Tips

1. (T or F) You can add extra spaces and lines in your HTML code to adjust the output on your

Web page.

2. What does the Web browser see if you add 5 blank lines in your HTML code?

3. What does the Web browser see if you add 10 blank spaces in your HTML code?

When you are finished take this small 10 Question - Basic HTML Quiz