|
|
 |
Course Outline
Offered by Networked Information Services
Instructor: Basil Considine: http://www.bu.edu/webcentral/help/
Prerequisites: Familiarity with the Web and web browsing software.
2 Hours (50 minutes lecture, 50 minutes hands-on exercises, 10-minute
break)
Components of a web page (5 minutes)
- Overview - To begin publishing
on the Web, think of your Web site in terms of the components
that make up the individual pages.
- Text - Strategies for working
with text
- Images and graphics
- Tips for preparing images and graphics
- Multimedia - Audio/Video &
Flash considerations
- HTML - Putting it all together
with HypeText Markup Language
- Saving as HTML - Making
the right choices when saving your work
HTML syntax (10 minutes)
- Overview - Markup language vs. programming
language
- Tag format - How to write an
HTML tag
- Nesting tags in proper order
- Rules of HTML syntax
- Example - Code for a simple
web page
- Case sensitivity - WHen case
matters, and when it doesn't
Essential document tags (5 minutes)
- Overview - Minimum page requirements
- <html> - Indicates
the document uses HTML code
- <head> - Marks
first section of page, containing page title, meta tags, scripting,
etc
- <title> - Document's
title, which appears in the title bar of the browser window
- <body> - Second
section of page, containing all the visible contents of your document
(text, graphics links, etc.)
- Tag attributes:
Variables for HTML tags
- Create a basic web page containing the essential document tags
and some text.
- Save your document as a web page.
- Preview your page by opening it in a web browser (Internet
Explorer or Netscape).
- Adding Headings -
<h1>
through <h6> - Produces variously sized, boldfaced
text followed by a line break
- Start Dreamweaver and open a new file.
- Copy all text from the demo web
page.
- Paste your text from the demo web page into your new page in
Dreamweaver.
- Add headings to your page to mark its various sections.
Text formatting tags (5 minutes)
- Boldfacing -
<b>
or <strong>- Boldfaces text
- Italicizing -
<i> or <em> Italicizes text
- Underlining
-
<u> Underlines text
- Add boldfacing to your practice page.
- Add italics to your practice page.
Layout formatting tags, hard rule, and comments (10 minutes)
- Adding line breaks -
<br>
- Ends a line, begins a new line
- Making paragraphs
-
<p> - Makes a paragraph: ends a line, skips
a line, begins a new line
- Centering -
<center>
- Centers text or graphics
- Indenting -
<blockquote>
- Indents nested content equally from both margins
- Adding a horizontal rule
-
<hr> - Inserts a horizontal line
- Commenting -
<!--
comment --> - Adds internal comments to your
document
Break (10 minutes)
- Add line breaks to your practice page.
- Add paragraph tags.
- Indent text.
- Add a horizontal rule.
- Add a "hidden" comment to the source code.
Adding links and images (10 minutes)
- Making links -
<a
href="http://www.address.com"> - Makes a text
or graphical links
- Making e-mail links
-
<a href="mailto:address@bu.edu">
- Makes an e-mail link
- Adding images -
<img
src="photo.jpg"> - Identifies an image to
display in the page
- Add a link to a live web site.
- Add graphics.
- Use the
align attribute to specify the alignment
and text-wrapping for your images.
- Add descriptions of your graphics using the
alt
attribute for ADA compliance.
- Obtain space (get an account) on a web server, if needed.
- Gather your content (text, images, audio, video) and work with
the appropriate tools.
- Format and save your files as HTML documents.
- Preview your files locally in a web browser.
- Upload your files to the web server.
- Review your files for look, content, links, etc., on the Web.
- Connect to an HTML: Introduction
practice directory on the www.bu.edu server using Dreamweaver.
- Upload your pages to your practice account.
- Review your work on the Web using a Web browser (Internet Explorer
or Netscape).
|
