Prerequisites: Familiarity with the Web and web browsing software.

Components of a web page

  1. Overview – To begin publishing on the Web, think of your website in terms of the components that make up the individual pages.
  2. Text – Strategies for working with text
  3. Images and graphics – Tips for preparing images and graphics
  4. HTML – Putting it all together with HypeText Markup Language
  5. Saving as HTML – Making the right choices when saving your work

HTML syntax

  1. Overview – Markup language vs. programming language
  2. Tag format – How to write an HTML tag
  3. Nesting tags in proper order – Rules of HTML syntax
  4. Example – Code for a simple web page
  5. Case sensitivity – When case matters, and when it doesn’t

Essential document tags

  1. Overview – Minimum page requirements
  2. <html> – Indicates the document uses HTML code
  3. <head> – Marks first section of page, containing page title, meta tags, scripting, etc.
  4. <title> – Document’s title, which appears in the title bar of the browser window
  5. <body> – Second section of page, containing all the visible contents of your document (text, graphics links, etc.)
  6. Tag attributes: Variables for HTML tags

Hands-on exercise: Creating a basic web page

  1. Create a basic web page containing the essential document tags and some text.
  2. Save your document as a web page.
  3. Preview your page by opening it in a web browser (Internet Explorer or Netscape).

Heading tags

  1. Adding Headings – <h1> through <h6> – Produces variously sized, boldfaced text followed by a line break

Hands-on exercise: Adding headings to your page

  1. Start Dreamweaver and open a new file.
  2. Copy all text from the demo web page.
  3. Paste your text from the demo web page into your new page in Dreamweaver.
  4. Add headings to your page to mark its various sections.

Text formatting tags

  1. Boldfacing – <b> or <strong> – Boldfaces text
  2. Italicizing – <i> or <em> – Italicizes text
  3. Underlining – <u> – Underlines text

Hands-on exercise: Adding text formatting to your page

  1. Add boldfacing to your practice page.
  2. Add italics to your practice page.

Layout formatting tags, hard rule, and comments

  1. Adding line breaks – <br> – Ends a line, begins a new line
  2. Making paragraphs – <p> – Makes a paragraph: ends a line, skips a line, begins a new line
  3. Centering – <center> – Centers text or graphics
  4. Indenting – <blockquote> – Indents nested content equally from both margins
  5. Adding a horizontal rule – <hr> – Inserts a horizontal line
  6. Commenting – <!-- comment --> – Adds internal comments to your document

Hands-on exercise: Formatting the layout of a web page

  1. Add line breaks to your practice page.
  2. Add paragraph tags.
  3. Indent text.
  4. Add a horizontal rule.
  5. Add a “hidden” comment to the source code.

Adding links and images

  1. Making links – <a href="http://www.address.com"> – Makes a text or graphical link
  2. Making email links – <a href="mailto:address@bu.edu"> – Makes an email link
  3. Adding images – <img src="photo.jpg"> – Identifies an image to display in the page

Hands-on exercise: Adding links and images:

  1. Add a link to a live website.
  2. Add graphics.
  3. Use the align attribute to specify the alignment and text-wrapping for your images.
  4. Add descriptions of your graphics using the alt attribute for ADA compliance.

Six steps to publishing on the Web

  1. Obtain space (get an account) on a web server, if needed.
  2. Gather your content (text, images, audio, video) and work with the appropriate tools.
  3. Format and save your files as HTML documents.
  4. Preview your files locally in a web browser.
  5. Upload your files to the web server.
  6. Review your files for look, content, links, etc., on the Web.

Hands-on exercise: Publishing and reviewing your work

  1. Connect to an HTML: Introduction practice directory on the www.bu.edu server using Dreamweaver.
  2. Upload your pages to your practice account.
  3. Review your work on the Web using a web browser (Internet Explorer or Netscape).