home

= A Multimedia Workshop on: = =// Basic Web Site Construction using Online Tools and by Coding by Hand //=

by Shane Snyder
= Multimedia Workshop Introduction = Welcome to the //Basic Web site Construction using Online Tools and by Coding by Hand// multimedia workshop! In this workshop you will create a basic three-page Web site that includes the use of various HTML tags and CSS selectors as well as some free online tools. The coding by hand portion of the workshop includes writing HTML and CSS in MS Notepad, whereas the online tools portion of the workshop includes creating Web content via the use of free online tools. Consequently, the output generated from the use of online tools is ultimately incorporated into the Web site. Finally, an authentic assessment activity is included at the end of the workshop so that workshop participants have an opportunity to demonstrate what they have learned; which also serves as an opportunity to build another Web page for the project Web site.

Before starting the workshop, a few preliminaries will be addressed next.

Who should attend the workshop?
The target audience for this workshop includes students or other individuals who may be required to, or otherwise have an interest in, creating a Web site using online tools and by coding by hand.

What are the learning outcomes?
The learning outcomes for the workshop include workshop participant proficiency in basic tasks related to the creation of Web pages such as:
 * Building a basic Web site using HTML by coding Web pages by hand without using a dedicated Web page design suite
 * Identifying basic Web page structure and tags
 * Using an appropriate file structure and file names when designing Web pages
 * Incorporating functionally accurate navigation links between Web pages within the project and to external Web sites
 * Using various online tools that assist in the creation of Web pages and components
 * Incorporating the output of online tools into hand coded Web pages
 * Applying appropriate formatting using external CSS for a uniform appearance across all pages of the project

What prior knowledge should participants bring to the workshop?
It is assumed that workshop participants are familiar with navigating the file system on their particular computer and that participants are proficient using a Web browser of their choice. It is also assumed that workshop participants can establish Internet connectivity and are able to navigate to Web sites and access workshop tools without additional assistance. Oppositely, workshop participants may be completely unfamiliar with HTML code and Web site design, and by participating in the workshop, attendees should be able to construct a basic Web site using online tools and by coding HTML by hand without the assistance of a dedicated Web page design suite.

What is required for this workshop?
The workshop utilizes Microsoft Windows 7, Microsoft Notepad, and the Mozilla Firefox Web browser. However, workshop participants could use almost any type of operating system with a plain text editor and a capable Web browser to participate in the workshop. Adobe Flash will be used in the workshop however. To install or update Adobe Flash Player on your computer, visit the following links.

[] []

Additionally, some pictorial content in this workshop is displayed both directly within the workshop and is made available in PDF format for ease of printing. For computers that do not have PDF reader software installed on them, visit either of the two links below for PDF reader software. Otherwise, you are welcome to use another type of PDF reader software that may be preferred by or available to you.

Adobe Systems Incorporated--Adobe Reader: @http://get.adobe.com/reader/

Foxit Corporation--Foxit Reader: @http://www.foxitsoftware.com/pdf/reader/

Also, to gain access to the Animation Online Web site, workshop participants are asked to create a free account on the Web site by supplying an email address and a password. For those workshop participants who would rather not supply a personal email address, a free Google email (Gmail) account can be created and used to gain access to online tools such as those included in this workshop. See [] to create a free Gmail account as applicable.

= = = Multimedia Workshop Agenda =

10 min -- Present the theme/topic, who should attend, learning outcomes, prior knowledge needed, workshop requirements
 * Multimedia Workshop Introduction **

10 min -- Linear and Incremental Approach; Modules, Sub-Modules, Steps; Graphic Organizers, How-to Videos, Online Resources, Supplemental Materials: Handouts
 * Format of the Workshop **

20 min -- Brief overview of the Notepad, w3schools.com, HTML, and CSS 5 min -- Refer to w3schools.com and //Try it yourself://
 * Pre-training **

2 min -- Prepare the Web site project folder using Notepad
 * Prepare the Project Folder **

1 min -- Introduction to CBH Part 1
 * Code by Hand: Part 1--The Basics **

5 min -- HTML, BODY, HEAD, TITLE, H1, H2, P tags 7 min -- Refer to w3schools.com and //Try it yourself:// 15 min -- Code: HTML, BODY, HEAD, TITLE, H1, H2, P tags 1 min -- Preview in browser
 * Index.html **

3 min -- A tag, Vertical Bar / Pipe 2 min -- Refer to w3schools.com and //Try it yourself:// 10 min -- Code A tag, Vertical Bar / Pipe 1 min -- Preview in browser
 * Navigation Links **

5 min -- Clone the Index.html file using Save As in Notepad
 * Create the Media and References Web Pages as Clones of Index.html: **

6 min -- Edit: TITLE, H1, H2, P tags; include navigation links 1 min -- Edit: Preview in browser
 * Edit the References.html File **

6 min -- Edit: TITLE, H1, H2, P tags; include navigation links 1 min -- Edit: Preview in browser
 * Edit the Media.html File **

1 min -- Introduction to Free Online Multimedia Tools
 * Free Online Multimedia Tools **

1 min -- 3-D Text Maker overview and interface 6 min -- Create 3-D text 1 min -- Save the Animated GIF file to your computer
 * 3-D Text Maker **

1 min -- Animation Online overview and interface 8 min -- Create an animated banner 1 min -- Save the banner code to a text file on your computer
 * Animation Online **

10 min -- Pixlr overview and interface; tutorials 15 min -- Create an image 1 min -- Save the image to your computer
 * Pixlr **

1 min -- Introduction to CBH Part 2
 * Code by Hand: Part 2--File Editing **

1 min -- IMG tag 3 min -- Refer to w3schools.com and //Try it yourself// 5 min -- Code: 3-D Text Maker IMG tag
 * Incorporate Online Tool Output into the Media.html File **

1 min -- HTML code overview 5 min -- Code: Insert Animation Online banner code

1 min -- IMG tag 1 min -- Refer to w3schools.com and //Try it yourself// 3 min -- Code: Pixlr IMG tag 1 min -- Preview in browser

2 min -- A (anchor) tag 5 min -- Refer to w3schools.com and //Try it yourself// 6 min -- Code: 3-D Text Maker A tag, Animation Online A tag, Pixlr A tag for Coding by Hand 6 min -- Code: 3-D Text Maker A tag, Animation Online A tag, Pixlr A tag for Online Tools 1 min -- Preview in browser
 * Incorporate External Web Links into the References.html File **

1 min -- Introduction to CBH Part 3
 * Code by Hand: Part 3--Additional Tags **

2 min -- BR, HR tag s 4 min -- Refer to w3schools.com and //Try it yourself// 4 min -- Code: BR and HR tags 1 min -- Preview in browser
 * References.html **

1 min -- BR, HR tag s 1 min -- Refer to w3schools.com and //Try it yourself// 4 min -- Code: BR and HR tags 1 min -- Preview in browser
 * Media.html **

1 min -- HR tag s 1 min -- Refer to w3schools.com and //Try it yourself// 2 min -- Code: HR tag 1 min -- Preview in browser
 * Index.html **

1 min -- Introduction to CBH Part 4
 * Code by Hand: Part 4--Application of Styles using External CSS **

1 min -- Create the external style sheet
 * MyStyleSheet.css: Create the External Style Sheet **

5 min -- BODY, H1, H1, P, and HR selectors 5 min -- Refer to w3schools.com and //Try it yourself// 14 min -- Code: the link to the external style sheet in index.html 1 min -- Save index.html
 * MyStyleSheet.css: Code the Selectors, Properties, and Values **

1 min -- LINK tag 2 min -- Refer to w3schools.com and //Try it yourself// 4 min -- Code: the link to the external style sheet in Index.html 4 min -- Code: the link to the external style sheet in Media.html 4 min -- Code: the link to the external style sheet in References.html
 * Link the HTML files to the External Style Sheet **

2 min -- Preview in browser
 * Application of Styles: Browser Preview **

30 min -- Create a new Web page named AboutMe.html, include navigation to other Web site pages, include a new multimedia object using one of the free online tools presented in the workshop, update the navigation in the other three Web site pages to link to the AboutMe.html file, include the remaining requirements
 * Authentic Assessment Activity **

10 min -- Populate the workshop evaluation/rubric for this multimedia workshop
 * Multimedia Workshop Evaluation/Rubric for: //Basic Web Site Construction using Online Tools and by Coding by Hand// **