Planning+and+Development

=Module 2 Questions=

1. Mayer's principle of active processing will be fostered by incorporating a multimedia overview of each primary topic to address coherency of information; by utilizing a hands-on work area online for each primary topic to address information selection; and by programming HTML and CSS code to address integration; see Mayer (2009), p. 63. The product created by learners as output generated from having participated in the multimedia workshop is a small Web site. The Web site will include three Web pages containing navigation links, images, an animated banner, three-dimensional text, various use of HTML tags, CSS formatting, and an external CSS file linked to each page in the Web site.

2. The multimedia presentation will take the form of online content that will consist of various interactive Web sites, short animations with narration, and appropriate pre-training documentation / Web sites, and animations.

Mayer's principles of dual coding will be utilized in the multimedia workshop by including animation of text with spoken narration. Likewise, images and printed text will be utilized together in other instructional materials with signaling as applicable. Considering the limited capacity principle, extraneous information will be avoided, and the animation-narration learning objects will be kept brief to avoid sensory and cognitive overloading.

3. A graphic organizer will be utilized to highlight the key topics included in the multimedia presentation. A preliminary graphic organizer is included below. The graphic organizer will provide a tree structure of key topics categorized into two primary means of Web site creation, which are: hand coding and using online tools.



4. Pre-training concepts / how to use multimedia in the pre-training phase (for engagement): Pre-training materials include short animations with narration and references to online content / Web sites as needed. The pre-training concepts include and introduction to the Web, HTML, and CSS, using Notepad in MS Windows, saving files and naming files and folders, and an introduction to www.w3schools.com.

5. Equipment needed to conduct the workshop includes an Internet connected PC that can present to a screen via a digital projector, and a number of Internet connected PC's for workshop attendee use.

6. Online applications that will be used include [|www.w3schools.com], [|www.pixlr.com], [|www.animationonline.com], and [|www.3dtextmaker.com].

7. Participant collaboration will be encouraged as the multimedia workshop is set to a fairly speedy pace. Likewise, individuals should be grouped by pairs to help assist in understanding the concepts presented. Where one individual might overlook a critical informational component, the partner may be able to assist the other individual. Likewise, as the multimedia workshop is technical in nature, that is, it relates to building a Web site, a peer assistant or team member may be able to offer comfort to those who are technologically averse and become frustrated quickly when encountering new technology concepts.

References

Mayer, R. E. (2009). //Multimedia learning// (2nd ed.). Cambridge, MA: Cambridge University Press.


 * Partial script to be converted once completed. This is a very rough work in progress. **

=Introduce the Workshop= Establish a basic introduction via the Web page; however, provide some additional details via a PowerPoint-to-Web conversion. =Pre-Training: HTML= Provide an introduction to HTML via the Web page, however, provide some additional details via a PowerPoint-to-Web conversion.

HTML Graphic Organizer
=Pre-Training: Notepad=

Load Notepad
To load note pad, left click on the windows start button, open all programs, open accessories, and click on note pad.

Create the Project Folder using Notepad
Since we are using note pad to code our web pages, we will create a project folder for our web site using note pad. To do so, click the file menu option on the menu bar at the top of the note pad window, then click the save option. At this point, the Save As dialog box will appear. Now, navigate to a suitable location where you wish to save your project, perhaps within your Documents folder or on your desktop. We will use the desktop in our workshop. Next, click on the New Folder button. Now, provide a name for the folder, such as WebSite, and press the enter key when finished.
 * As an alternate method for creating the project folder in Notepad, right click the mouse in an empty area within the right side pane to invoke the short cut menu. Once the short cut menu appears, hover over the menu option titled new. After the subsequent shortcut menu appears, click on folder.

Create the index.html file using Notepad
To create the index dot html file, first double click on the WebSite folder to enter into that folder. We will save our h t m l files and other content for our web site project within this folder. Now we are ready to supply a file name for our first web page. As this page will serve as the entry point to our web site, we will call the file I n d e x dot h t m l. Change the file name within the file name box near the bottom of the save as dialog box. Be certain to change the suffix from dot t x t to dot h t m l so that the file can be read by a web browser. Finally, click the Save button to finish saving the file. Note that upon returning to note pad, the file name is displayed in the title bar at the top of the note pad window. =Code by Hand=

Code Basic Web Page Shell
Now we will code a basic web page shell. That is, we will code the basic tags to get us started. First, code the h t m l tags and note that everything else we code will reside within the h t m l tags. Also, remember to code both the opening and closing tags. It is best to enter both at the same time to avoid forgetting to close the tag pair. Continuing, code the body opening and closing tags. Again, it is best to code both tags at the same time to avoid forgetting to code the closing tag. At this point, we have coded a basic web page shell that could be used as a template for writing new web pages. However, there is no content for display in our web page. Therefore, we will continue by adding content that will display in a Web browser.

Incremental File Save
Before we code additional tags, formatting, and content, we should save the changes made to the Web page. To do so, click the file option on the menu bar at the top of the Note pad window. Next, click the save option on the drop down menu. Otherwise, use the keyboard shortcut of ctrl plus S by holding down the control key and pressing the letter S as in the name Samantha.

Add a Title
Now we will add a title to our web page, which will appear in the browser’s title bar, by coding additional tags. First, code the head opening and closing tags immediately after the html opening tag and above the body opening tag. We are coding the head tags so that the title tags can also be coded. As the title tags must reside within the head tags, both pairs of tags are frequently used. Within the title tags, code a title that will appear within the browser’s title bar. Code the following text: My Home Page. Be certain to close all tags as needed.

Add Content Headings
Let’s continue by coding content that will display on the web page within a web browser. First, code a heading for the home page. To do so, code the h 1 opening and closing tags under the body opening tag. Within the two h 1 tags, enter the following heading 1 text: My First Web Site. Next, below the h 1 tags, code two sets of h 2 tags. Be certain to code both the open and close tag pair for each set of h 2 tags. Within the first set of h 2 tags, enter the following heading 2 text: Coding by Hand. Within the second set of h 2 tags, enter the following heading 2 text: Online Tool Integration.

Browser Preview
It is time to preview our web page within a web browser. First navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, which are the h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. It is time to preview our web page within a web browser. If you have not already loaded your Web site within the browser of your choice, first navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. Otherwise, load which ever web page that is needed. If you already have the web page loaded in the browser, be certain to click on the refresh button to reload the web page to view the most recent editing that has been made to the web page being observed.

Code Paragraph Tags
Now we will add paragraph text to our index dot html Web page by using the paragraph tags that simply take the form of the letter p as in Patricia. The paragraph text will be placed directly under each h 2 heading that was just coded. Therefore, code a set of paragraph begin and end tags under each of the h 2 tags that were just coded. Now paragraph text can be placed between each pair of paragraph tags.

Add Paragraph Text: Code by Hand
For the sake of simplicity, we will copy existing text to place inside of paragraph begin and end tags to provide content under each h 2 heading. Now that both sets of paragraph tags are in place, copy the text from the workshop web site that is located under the Coding by Hand heading in blue. Place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Finally, make certain that the insertion point is placed between the first paragraph begin and end tag pair. Now paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. Notice that the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Add Paragraph Text: Online Tool Integration
We will replicate the copy and paste text procedure just performed, but this time we will copy the paragraph below the online tool integration title as found in the workshop web site. First, locate the heading in the workshop web site labeled online tool integration. Second, place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Third, within the index dot html file, place the insertion point between the second paragraph begin and end tag pair. Fourth and finally, paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. As before, the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file. Upon finishing this workshop I will have created a basic web site. Part of the process involves coding html by hand using various html tags, or instructions, to define the structure of a web page and to facilitate some basic formatting. By coding html by hand, an individual becomes familiar with the foundational elements that are required when designing all web sites, and because html files are simply text files, a plain text editor such as MS Notepad will facilitate hand coding web pages very nicely. Likewise, html stands for hyper text markup language; which uses tags to define web pages. Tags are coded in begin and end pairs and are themselves enclosed in angle brackets, or greater than and less than characters. Significantly, the ending tags also include a forward slash to designate the tag as a closing tag. Content that will appear on a web page when viewed in a web browser, along with special directions for the browser that are not displayed on screen, are placed between the begin and end tag pairs. It is valuable to note that each tag may require different directions or attributes; which are placed within the begin tag. Additionally, nesting of tags is a coding practice that is commonly used when coding html. Simply put, this means that some tags are placed between other begin and end tag pairs. Finally, some tags that will be used in this workshop include: html, head, title, body, h1, h2, p, and a.
 * Coding by Hand **

**Online Tool Integration**
Although coding html by hand is an invigorating experience, adding some pizzazz to a Web site via the use of free online multimedia tools is even more exciting! For example, by using various free online multimedia tools, Web designers can create three-dimensional text, animated banners, customized images, and videos to say the least. Also of interest are text-to-speech tools, and text-to-speech combined with animated avatar tools. The output of the former can be added to videos as an audio track and the output of the latter can be used as a guide in online training seminars or workshops. As luck would have it, audio, video, animations, and more can be added to Web sites for additional allure and message broadcast. Finally, for those who have created extensive Microsoft PowerPoint slide show libraries, fear not, as PowerPoint presentations can be added to Web sites as slide presentations or can be converted to video format for use on the Web.

Demonstrate Word Wrap in Notepad
To more easily view the text copied into the html file, word wrap can be invoked. Simply click the Format menu bar option, then click the Word Wrap option. Upon doing so a check mark will appear to the left of the word wrap option to signify that the feature has been enabled, or toggled to an on position. However, the feature can be disabled, or toggled off, by repeating the same process; which removes the check mark from the left of the word wrap option. With word wrap engaged, scroll through the file to see the results. To see more of the file at once, the font size will be reduced by clicking the Format menu bar option, then click Font and make the appropriate selections. Again, scrolling through the file will show the contents but more text will be displayed at one time. The font size will now be restored to its original size for the workshop and word wrap will be disengaged.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Browser Preview
With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser.

--Media Link
Now that a basic web page with content has been created, the index dot html file can be used to expand the web page into a web site containing multiple Web pages. That is, two new pages will be cloned from the index dot html page. They include a media.html page and a references.html page. However, prior to doing so, a set of navigation links that will allow us to travel from one page in the web site should first establish. This will be accomplished by using the anchor tag, which is simply the letter “a” and is followed by the term “href” along with attributes describing to the browser what file to use. A closing anchor tag is also coded. To complete this task, a single link will be coded first; which will then be replicated to accommodate the remaining page. Once the navigation links have been coded for each html file in the Web site, the index dot html file can be cloned. As navigation links are typically found at the top of web pages, the navigation links will be coded directly under the body tag in the index dot html file. Code the anchor tag and include the filename within quotes. Also include the text that will be displayed as the link within the rendered web page. Note that for any web page in our web site, a navigation link to itself can be excluded as including a self-referencing link would simply result in the browser reloading the web page being viewed. To begin, code a navigation link to the **media dot html** file. First, directly under the body tag, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding including the name of the html file placed within double quotes. In this case, code the file name as **media dot html**. Although the **media dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **Media** with a capital M as in Mary. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **media dot html** file has been created.

--References Link
The references link pointing to the **references dot html** file will now be coded using the same procedure as before. First, code a pair of anchor begin and end tags directly under the first anchor tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding the name of the html file placed within double quotes. In this case, code the file name as **references dot html**. Although the **references dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **References** with a capital R as in Robert. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **references dot html** file has been created.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Browser Preview
With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that the links appear at the top of the index dot html page for the media and references pages. If one of the links is clicked, an error will display on screen. However, that situation will be remedied next.

Link Separator: Vertical Bar / Pipe
A common technique used in Web design includes separating navigation links using a vertical bar, or pipe character, with a space placed on either side of the pipe. The pipe character can be typed by holding the shift key down and pressing the pipe key; which usually resides above the Enter key on most computer keyboards. Using spacing and the pipe character helps delineate multiple links from each other. To code the pipe character between the media and references navigation links, place the insertion point after the media dot html anchor. Next, press the space bar to enter a blank space that will also appear between the two navigation links. Now, while holding the shift key down, press the pipe key on the keyboard. Continuing, press the space bar to enter a blank space that will also appear between the two navigation links. In sum, the following characters should have been entered in this order. Space, pipe, space.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Browser Preview
With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that between the navigation links appears a space, pipe, and space. With the pipe and spaces in place, the navigation links are clearly separated.

Second and Third Pages as Clones of index.html
As alluded to earlier, we will now expand our web page into a web site by cloning our index dot html file to create our media and references pages. This task is fairly simple when using Notepad’s Save As function. To create the media dot html file as a clone of our index dot html file, click on the File option on the menu bar at the top of the Notepad window. Now click on the Save As option on the File menu. Now the Save As dialog box appears on screen. Ensure that you are located within the WebSite folder as created earlier. Continuing, change the File name to media dot html in the File name text entry box. Once entered, simply click on the Save button. Finally, inspect Notepad’s title bar at the top of the window to ensure that it reflects the media dot html file name as it should. We have successfully cloned the index dot html file as a new file named media dot html. Given we used a cloning technique, the contents of media dot html are identical to the contents of index dot html. However, we will address that matter shortly as we have another clone to create; which is the references dot html file to be precise. In this respect, let’s create a clone of the media dot html file to create the references dot html file. To create the references dot html file as a clone of our media dot html file, click on the File option on the menu bar at the top of the Notepad window. Now click on the Save As option on the File menu. Now the Save As dialog box appears on screen. Ensure that you are located within the WebSite folder as created earlier. Continuing, change the File name to references dot html in the File name text entry box. Once entered, simply click on the Save button. Finally, inspect Notepad’s title bar at the top of the window to ensure that it reflects the references dot html file name as it should.

Adjusting Contents of the Media and References Files
We will quickly make some adjustments to the References and Media files to reflect their uniqueness as separate web pages in our web site. Namely, we will adjust the titles, the navigation links, the heading one and heading two headings, and the paragraphs. Let’s get started!

--References File
As the References file should be loaded in Notepad, we will make changes to that file first. To begin, change the text between the title tags to the words: My References Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page we are editing. Rather than including a self referencing navigation link to the references dot html file, replace the word references with the word index. We wish to link to all other pages in our web site, thus, we need to include a link to the index dot html file but exclude the link to the references dot html file. To finish the navigation link modification, change the link display text from References to Index. Next, replace the h 1, or heading one text with the words: Useful Online References. Be certain to capitalize the first letter of each word. As we will be including references for web sites related to coding by hand and related to online tools, we will retain the h 2, or heading two display text as it currently stands. Hence, no modification is needed for the heading two display text. Finally, considering the two paragraphs in the references dot html file, simply delete both paragraphs entirely. It may be wise to toggle the word wrap function to the enabled state to more easily view the entire paragraphs. Simply select the text in the paragraphs and press the delete key on the keyboard. Be certain to save your references dot html file upon completing this task.

Browser Preview
Now that the references.html file has been created and modified, simply click on the References link at the top of your index.html file that is currently shown in your browser to view the References page. Notice that the navigation links at the top of the References page point to the Media page and now to the Index page. You can successfully navigate to any of the pages, but note that the index.html file and the media.html files are the same because we have not edited the media.html file yet. However, that is our next task.

Media File
Given we have already created our media.html file, we simply need to open the file in Notepad.

--Open the Media File
To open the media dot html file from within Notepad, click the File option on the menu bar near the top of the Notepad window. Next, click Open on the File menu. The Open dialog box is now displayed on screen. Your Open dialog box should automatically open your WebSite folder, however, if this is not the case, navigate to your WebSite folder and open the folder. As you view the Open dialog box you may not see any files. Assuming you are viewing the contents of the WebSite folder, you will likely need to modify the file type list box next to the File name text entry box. As the file type list box is automatically set to display text files, simply click the file type list box arrow to open the file type list box and select the All Files option. Your web page files should now appear in the right side pane in the Open dialog box. Simply double click the media dot html file to open that file.

--Edit the Media File
As the Media file should be loaded in Notepad, we will make changes to that file now. To begin, change the text between the title tags to the words: My Media Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page we are editing. Rather than including a self referencing navigation link to the media dot html file, replace the word media with the word index. We wish to link to all other pages in our web site, thus, we need to include a link to the index dot html file but exclude the link to the media dot html file. To finish the navigation link modification, change the link display text from Media to Index. Next, replace the h 1, or heading one text with the words: Media Created with Free Online Tools. Be certain to capitalize the first letter of each word for the exception of the word with. As we will be including the media that will be created in the second portion of the workshop, the remaining content down through but excluding the body tag can be deleted. That is, select all text in the file beginning with the first heading two tag down through and including the last paragraph ending tag. Simply select that material and press the delete key on the keyboard. Avoid deleting the closing body and html tags. Be certain to save your media dot html file upon completing this task.

Browser Preview
=Free Online Multimedia Tools= Now that we have coded three separate Web pages that link together to form a Web site, we will focus our attention on using free online multimedia tools to enhance our Web site. While we will need to add some additional code to our Web site to include the media that we will now create, let’s have some fun with online multimedia tools!

Tutorials
Various tutorials are available for Pixlr and are found at the link below. [] Of interest, visit the following link and other links on the page that is reference by the above link to familiarize yourself with the Pixlr interface. []

Creating an image in Pixlr + Transparent PNG Format
We will create a geometric image in Pixlr, add text, and save the image to the WebSite folder on our computer. We will then code an image link in the media.html file to display the image. First, refer to the image below to load the pixlr.com Web site. Second, view the video below for an example of how to create a new image using Pixlr. We will create a png file to utilize the transparency feature of that image format. As most images are not square in shape, using the transparency feature of the png image format allows us to simulate a seamless integration of an image with irregularly shaped borders onto a Web page. The transparency feature makes transparent any area of the image that has not been modified with a color. Thus, for areas surrounding the image that are not edited, those areas are treated as transparent and the background of the Web page will show through those areas, thus creating the illusion of a seamless integration of an irregularly shaped object onto a Web page.

Pixlr.com image
[]

Create an Image video
With the pixlr home page loaded in a browser, click on the text shaded in blue that reads Open Image Editor. Doing so loads the pixlr editor within the browser. At this point a new image can be made, or an image can be opened from your computer, from an online resource, or from an image library. Click the Create a New Image to design a new image. The New Image dialog box appears with options that must be considered. First, supply a name for the image, such as p i x l r i m a g e. Second, expand the Presets drop down list to see the options for image sizes. Select the 640 by 480 option. The Width and Height drop down lists are automatically set accordingly. Third, check the Transparent check box to signify that the new image will use a transparent background. Finally, click the OK button to create the new image for editing. At this point you should have a blank document open within the Pixlr interface within your browser. The blank canvas is now ready to have objects placed onto it. We will create a large yellow oval onto which we will place several other shapes in various colors. At one point in the video the opacity of the object being placed onto the canvas is set to 50 to show the effect of transparency of objects. Note that this is different from the transparency selected for the overall image. In short, we can use transparency with individual objects as well.

Object Placement video
Now that the new image and blank canvas are displayed, navigate to the bottom of the Tools pane and click the white box that signifies the fill color for objects that will be placed onto the canvas. The Color Picker dialog box now appears. Point to the vertical color bar that looks like a rainbow and click the yellow area within the color bar. The color gradient box to the left of the color bar shows a spectrum of color choices and intensities for the color selected. Click within the color gradient box toward the upper right of the box to select a saturated and intense yellow color. When satisfied with the selection, click the OK button. Notice that the background fill color in the Tools pane is now set to the yellow color that was just selected. Now that the background fill color has been set, click the Drawing Tool on the Tools pane. Now, move the pointer to the top of the screen within the tool specific options bar and select the Ellipse tool. Continue by placing the pointer in the upper left region of the blank canvas, but not at the very upper left. Hold down the left mouse button and drag toward the lower right region of the blank canvas and release the left mouse button. A yellow oval has now been placed onto the drawing canvas. The yellow oval will serve as the background of our design. To continue with the design, the background color selection technique will be repeated for a number of colors and additional shapes will be added to the canvas in a manner that overlaps the edge of the yellow oval. Continuing, select an orange background fill color using the Set Background Color on the Tools pane. Select a bright orange color using the color picker and draw a number of ovals around the large yellow oval. Overlapping is perfectly fine and consistently sized ovals need not be created. Repeat the same process with other colors, such as blue and magenta. Once completed with the above editing task, use the pinch and bloat tools within Pixlr to distort the colored blocks surrounding the larger yellow block. This is a for-fun technique!

Pinch and Bloat video
To create a more customized look for the image, and to somewhat obscure the edges of the image, the pinch and bloat tools can be used for some entertaining results. Navigate to the Pinch tool on the Tools pane and click the tool. Next, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to pinch the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the center of the circle to approximate the pinch effect. Clicking multiple times in a single location results in a more dramatic effect. To distort the border in a different manner, navigate to the Bloat tool on the Tools pane next to the Pinch tool, and click the Bloat tool. As before, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to bloat the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the outside of the circle from the central point to approximate the bloat effect. Clicking multiple times in a single location results in a more dramatic effect. We are almost finished constructing the image, however, we will add some text as a final touch.

Add Text video
As a final image editing technique, text will be added to the image. Navigate to the Type tool on the Tools pane and click the tool. The pointer changes to the text entry pointer. Move the pointer to the left of the image but within the yellow area and click the left mouse button. The Text input box appears into which text can be entered and formatted. Type the following message into the Text input box: Pixlr is great exclamation point. Once finished typing, click the Style drop down list and select the Bold option. Next, change the color of the text by clicking on the box beneath the label that reads Color. Within the Color Picker window that appears, select a color, perhaps purple, within the vertical color bar, adjust the color choice using the gradient box if needed, and click OK. Now position the text toward the middle of the image by pointing to the text, holding down the left mouse button, and dragging the mouse and text to the desired location. The Text input box may need to be moved by dragging the top border of the box while holding down the left mouse button. Once satisfied with the location of the text within the image, click the OK button on the Text input box to view the text within the image. Finally, it is important to save our work to our WebSite folder on our own computers. The technique is very easily facilitated from within the Pixlr interface. See the video below for details.

Save Image video
Before finishing the Pixlr editing session, the image must be saved to the WebSite folder on your computer. To do so, navigate to the File menu on the menu bar at the top of the screen. Click the Save option on the File menu. The Save Image window appears and contains some basic options to consider. First, the image can be saved to your computer using the My Computer tab, or the image can be saved online using two other options. Use the My Computer option. Second, the Name of the file can be adjusted if needed, but there are no changes necessary in this example. Third, the image Format can be specified. Because the image utilizes a transparent background, open the Format drop down and click on the PNG Transparent Full Quality option to take advantage of the transparency option of the PNG image format. Fourth and finally, click the OK button. The Save window now appears. Navigate to your WebSite project folder and click the Save button to save the file to your computer. As a final step, we may wish to edit the image further, or edit another image on our computer. Doing so is easy when using Pixlr. Simply use the //Open image from computer// option to edit existing images as shown in the following video.

Animation Online – Free Animated Banner Maker
An account is needed! When creating Web sites it is often handy to include a banner to display at the top of a particular page or elsewhere to draw attention to a particular area within a Web page. What’s more, some banners can be animated to lure the eye to a particular area or message. In this example we will investigate creating an animated banner using the Animation Online Free Animated Banner Maker at [] Once the page has loaded in your browser, you will find a preview of the animated banner at the top of the Web page. Below the preview banner are found various input fields and options that allow for banner customization. Follow the video below to design a custom animated banner for your first Web site. Options to set are: · Background Color: Darker Blue · Loop Animation Checkbox: Checked · Loop Forever: Clicked · Banner Link: [|http://www.animationonline.com] · New Window on Click: Checked · First Text Input Box: My First Banner! · Second Text Input Box: Animation Online; modify the color to a light color, such as lime green · Third Text Input Box: [|www.animationonline.com]; modify the color to a light color, such as pink Once the above options have been set, use the Save button at the top of the window to save your design. Next, use the Publish button at the top of the window to generate the code for the animation. As this type of tool does not create a file that is saved to your computer, it is best to save the code to a text file on your computer until you decide to utilize the banner; which we will do at the end of the online tool portion of the project. You will need to create a membership by entering an email address and a password. It is often helpful to quickly create a gmail account for use with such tools if you do not wish to register using one of your preferred or personal email addresses. Upon loading the animation online web page, the interface is presented. The very top of the interface provides command buttons underneath which the animated banner preview is found. The animated banner contains three areas of text that can be customized by modifying the text contained in the bottom three text boxes on the interface. However, those adjustments will be made in a moment. To design an animated banner for the workshop project, locate the background label and color picker. Set the background color to dark blue. Also, the loop animation check box can be checked to enable the loop forever and loop count options. Check the loop forever option to repeat the animation without end. Next, locate the banner link text box and enter http colon slash slash w w w dot animation online dot com. Leave the new window on click check box checked. By doing so, when the banner is clicked the animation online Web page will load in a separate browser window to avoid navigating away from the project Web site. Now modifications will be made to the banner text. In the first text input box enter my first banner. Next, in the second text input box enter Animation Online. Finally, in the third text input box enter w w w dot animation online dot com. Now that the banner text has been entered into the interface, adjustment to the color of the last two entries will be made. First, modify the color of the animation online text so that the text is shaded a lime green color. To do so, simply click on the box immediately to the right of the second text input box to adjust the color. Select a color to suit your preferences, in this case, lime green, and view the result in the animated banner preview at the top of the screen. Perform the same task for the third text input box by changing the color of that text to a pink color and again view the result in the animated banner preview at the top of the screen. As a final adjustment to the banner, modify the font and font size of the animation online text. To do so, click the format text button to the right of the animation online and color box for that line. Once the format text pop up appears, use the font list box to select the Arial font. Also, use the slider to adjust the font size to twenty or simply type the number twenty into the text input box to the right of the font list box and press enter on the keyboard. Once finished, click the o k button and review the result in the animated banner preview at the top of the screen. To complete the editing portion of the animated banner, the user must be signed into the animation online interface in order to save and publish the banner created. To sign in, simply click the sign in button at the top of the interface. Next, supply an email address and password, then click the sign in button. Now, click the save button so that the animated banner can be retrieved for future editing if needed. Supply a name for the animated banner, such as My First Banner, in the save pop up window and click o k to save the banner. Now it is time to generate the code that will display the animated banner within a Web page, or within the media dot html web page of the project web site to be precise. To do so, click the publish button at the top of the interface. The publish pop up window appears and contains the code needed to display the animated banner in a web page. Click the copy code button to select and copy the code automatically, then click the ok button. Now that the code to display the banner has been copied to the Windows clipboard, the code needs to be saved. For now, the code will be saved to a new text file using Note Pad. Load Note Pad if it is not already loaded, or locate an instance of Note Pad that is already loaded. If using an instance of Note Pad that is already loaded, simply use the File menu option, then click the New option. Load an empty instance of Note Pad and paste the contents of the Windows clipboard into Note Pad using the Ed it menu option, then click paste. Next, use the File menu option and click Save. Navigate to your WebSite project folder and provide a name for the new text file, such as banner code dot txt. Finally, click the Save button. The text file simply serves as a container to hold the banner code for the time being and will be utilized later in the workshop.

3-D Text Maker
The next tool that will be utilized in this workshop is the 3-D Text Maker tool that not only creates three dimensional text but also provides options for animation. The 3-D Text Maker Web site includes five sections to consider when designing three dimensional text. Briefly, they are: Select a Font, Select a Color, Set Your Dimensions, Set Other Variables, and Enter Text. The sections are essentially self explanatory aside from the Set Other Variables section wherein various options for establishing animation and three dimensional effects are presented. To create a three dimensional text using the 3-D Text Maker tool, consider the following videos. [] To begin designing three dimensional text, first select a font from the available types under Step 1. Each font group contains a number of available fonts. In this example, select Lithograph font within the Sans-Serif group. Note that a preview of the font appears in the window just below the available font option groups. Next, beneath the Step 2 heading select a color for the text by clicking on a color in the palette provided. A lighter color works best as the shadow color will be derived from a darker shade of the color selected. The preview color square shows the color selected if using the palette or created if using the R G B color code options. Continuing to Step 3, select a size for the 3 D text. While the dimensions of the text as a banner can be formatted to a variety of dimensions, simply use the default setting where the size is not constrained. The options available beneath the Step 4 heading Set Other Variables, relate to miscellaneous settings. To begin, set the Effect option to Stationary. Next, change the Depth option to 5. Now, adjust the Tilt Forward option to 10. Now, change the Frames option to 30 for a smooth animation. Considering the Looping option, use the default option of Run Forever to continuously loop the animation. Finally, enter the text beneath the Step 5 heading Enter Text. Enter into the text input box the following text. 3D Text is Fun, exclamation point. Once the text has been entered, click the Make 3 D Text button to generate the text, and view the results at the top of the page. The stationary three dimensional text is displayed. However, let’s try some animation techniques. Navigate to the Step 4 heading Set Other Variables and set the Effect option to Slide Left. To view the results of the change, the text must be generated again by clicking the Make 3 D Text button at the bottom of the interface. Click the Make 3 D Text button and view the results at the top of the interface. The animated three dimensional text is displayed per the slide left effect. As a final modification to the 3 D text, change the Effect option under the Step 4 heading Set Other Variables to Swing Single and click the Make 3 D Text button at the bottom of the interface to generate the 3 D text again. View the result at the top of the interface. The animated three dimensional text is displayed per the swing single effect.

Save the Animated GIF File
As the final step in generating 3 dimensional text, the result must be saved to the WebSite project folder on your machine. The file is saved as an animated gif file and will display as an animation on a Web page. To save the file to the WebSite project folder, place the pointer over the image and right click the mouse. Next, click on the Save Image Azz option. Now, navigate to your WebSite folder. Finally, click the Save button. The image is now ready to be incorporated into the media dot html page.

=Text to copy for Index.html file=

** Coding by Hand **
Upon finishing this workshop I will have created a basic web site. Part of the process involves coding html by hand using various html tags, or instructions, to define the structure of a web page and to facilitate some basic formatting. By coding html by hand, an individual becomes familiar with the foundational elements that are required when designing all web sites, and because html files are simply text files, a plain text editor such as MS Notepad will facilitate hand coding web pages very nicely. Likewise, html stands for hyper text markup language; which uses tags to define web pages. Tags are coded in begin and end pairs and are themselves enclosed in angle brackets, or greater than and less than characters. Significantly, the ending tags also include a forward slash to designate the tag as a closing tag. Content that will appear on a web page when viewed in a web browser, along with special directions for the browser that are not displayed on screen, are placed between the begin and end tag pairs. It is valuable to note that each tag may require different directions or attributes; which are placed within the begin tag. Additionally, nesting of tags is a coding practice that is commonly used when coding html. Simply put, this means that some tags are placed between other begin and end tag pairs. Finally, some tags that will be used in this workshop include: html, head, title, body, h1, h2, p, and a.

Online Tool Integration
Although coding html by hand is an invigorating experience, adding some pizzazz to a Web site via the use of free online multimedia tools is even more exciting! For example, by using various free online multimedia tools, Web designers can create three-dimensional text, animated banners, customized images, and videos to say the least. Also of interest are text-to-speech tools, and text-to-speech combined with animated avatar tools. The output of the former can be added to videos as an audio track and the output of the latter can be used as a guide in online training seminars or workshops. As luck would have it, audio, video, animations, and more can be added to Web sites for additional allure and message broadcast. Finally, for those who have created extensive Microsoft PowerPoint slide show libraries, fear not, as PowerPoint presentations can be added to Web sites as slide presentations or can be converted to video format for use on the Web.

= Updated Script with Video and Narration Links =

htm ehl =Introduce the Workshop= Establish a basic introduction via the Web page; however, provide some additional details via a PowerPoint-to-Web conversion. =Pre-Training: HTML= Provide an introduction to HTML via the Web page, however, provide some additional details via a PowerPoint-to-Web conversion.

HTML Graphic Organizer
=Pre-Training: Notepad=

Load Notepad
[] To load note pad, left click on the windows start button, open all programs, open accessories, and click on note pad.

Create the Project Folder using Notepad
[] Since we are using note pad to code our web pages, we will create a project folder for our web site using note pad. To do so, click the file menu option on the menu bar at the top of the note pad window, then click the save option. At this point, the Save As dialog box will appear. Now, navigate to a suitable location where you wish to save your project, perhaps within your Documents folder or on your desktop. We will use the desktop in our workshop. Next, click on the New Folder button. Now, provide a name for the folder, such as WebSite, and press the enter key when finished.
 * As an alternate method for creating the project folder in Notepad, right click the mouse in an empty area within the right side pane to invoke the short cut menu. Once the short cut menu appears, hover over the menu option titled new. After the subsequent shortcut menu appears, click on folder.

Create the index.html file using Notepad
[] To create the index dot html file, first double click on the WebSite folder to enter into that folder. We will save our h t m l files and other content for our web site project within this folder. Now we are ready to supply a file name for our first web page. As this page will serve as the entry point to our web site, we will call the file I n d e x dot h t m l. Change the file name within the file name box near the bottom of the save as dialog box. Be certain to change the suffix from dot t x t to dot h t m l so that the file can be read by a web browser. Finally, click the Save button to finish saving the file. Note that upon returning to note pad, the file name is displayed in the title bar at the top of the note pad window. =Code by Hand=

Index.html: HTML and BODY tags
[] Now we will code a basic web page shell. That is, we will code the basic tags to get us started. First, code the h t m l tags and note that everything else we code will reside within the h t m l tags. Also, remember to code both the opening and closing tags. It is best to enter both at the same time to avoid forgetting to close the tag pair. Continuing, code the body opening and closing tags. Again, it is best to code both tags at the same time to avoid forgetting to code the closing tag. At this point, we have coded a basic web page shell that could be used as a template for writing new web pages. However, there is no content for display in our web page. Therefore, we will continue by adding content that will display in a Web browser.

File Save
[] Before we code additional tags, formatting, and content, we should save the changes made to the Web page. To do so, click the file option on the menu bar at the top of the Note pad window. Next, click the save option on the drop down menu. Otherwise, use the keyboard shortcut of ctrl plus S by holding down the control key and pressing the letter S as in the name Samantha.

Index.html: HEAD and TITLE tags
[] Now we will add a title to our web page, which will appear in the browser’s title bar, by coding additional tags. First, code the head opening and closing tags immediately after the html opening tag and above the body opening tag. We are coding the head tags so that the title tags can also be coded. As the title tags must reside within the head tags, both pairs of tags are frequently used. Within the title tags, code a title that will appear within the browser’s title bar. Code the following text: My Home Page. Be certain to close all tags as needed.

File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: H1 and H2 tags
[] Let’s continue by coding content that will display on the web page within a web browser. First, code a heading for the home page. To do so, code the h 1 opening and closing tags under the body opening tag. Within the two h 1 tags, enter the following heading 1 text: My First Web Site. Next, below the h 1 tags, code two sets of h 2 tags. Be certain to code both the open and close tag pair for each set of h 2 tags. Within the first set of h 2 tags, enter the following heading 2 text: Coding by Hand. Within the second set of h 2 tags, enter the following heading 2 text: Online Tool Integration.

File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Initial Preview
[] It is time to preview our web page within a web browser. First navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, which are the h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. It is time to preview our web page within a web browser. If you have not already loaded your Web site within the browser of your choice, first navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. Otherwise, load which ever web page that is needed. If you already have the web page loaded in the browser, be certain to click on the refresh button to reload the web page to view the most recent editing that has been made to the web page being observed.

Index.html: Paragraph (P) tag
[] Now we will add paragraph text to our index dot html Web page by using the paragraph tags that simply take the form of the letter p as in Patricia. The paragraph text will be placed directly under each h 2 heading that was just coded. Therefore, code a set of paragraph begin and end tags under each of the h 2 tags that were just coded. Now paragraph text can be placed between each pair of paragraph tags.

Index.html: Add Paragraph Text for Code by Hand Paragraph
[] For the sake of simplicity, we will copy existing text to place inside of paragraph begin and end tags to provide content under each h 2 heading. Now that both sets of paragraph tags are in place, copy the text from the workshop web site that is located under the Coding by Hand heading in blue. Place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Finally, make certain that the insertion point is placed between the first paragraph begin and end tag pair. Now paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. Notice that the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Index.html: Add Paragraph Text for Online Tool Integration Paragraph
[] We will replicate the copy and paste text procedure just performed, but this time we will copy the paragraph below the online tool integration title as found in the workshop web site. First, locate the heading in the workshop web site labeled online tool integration. Second, place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Third, within the index dot html file, place the insertion point between the second paragraph begin and end tag pair. Fourth and finally, paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. As before, the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Upon finishing this workshop I will have created a basic web site. Part of the process involves coding html by hand using various html tags, or instructions, to define the structure of a web page and to facilitate some basic formatting. By coding html by hand, an individual becomes familiar with the foundational elements that are required when designing all web sites, and because html files are simply text files, a plain text editor such as MS Notepad will facilitate hand coding web pages very nicely. Likewise, html stands for hyper text markup language; which uses tags to define web pages. Tags are coded in begin and end pairs and are themselves enclosed in angle brackets, or greater than and less than characters. Significantly, the ending tags also include a forward slash to designate the tag as a closing tag. Content that will appear on a web page when viewed in a web browser, along with special directions for the browser that are not displayed on screen, are placed between the begin and end tag pairs. It is valuable to note that each tag may require different directions or attributes; which are placed within the begin tag. Additionally, nesting of tags is a coding practice that is commonly used when coding html. Simply put, this means that some tags are placed between other begin and end tag pairs. Finally, some tags that will be used in this workshop include: html, head, title, body, h1, h2, p, and a.
 * Coding by Hand **

**Online Tool Integration**
Although coding html by hand is an invigorating experience, adding some pizzazz to a Web site via the use of free online multimedia tools is even more exciting! For example, by using various free online multimedia tools, Web designers can create three-dimensional text, animated banners, customized images, and videos to say the least. Also of interest are text-to-speech tools, and text-to-speech combined with animated avatar tools. The output of the former can be added to videos as an audio track and the output of the latter can be used as a guide in online training seminars or workshops. As luck would have it, audio, video, animations, and more can be added to Web sites for additional allure and message broadcast. Finally, for those who have created extensive Microsoft PowerPoint slide show libraries, fear not, as PowerPoint presentations can be added to Web sites as slide presentations or can be converted to video format for use on the Web.

Demonstrate Word Wrap in Notepad
[] To more easily view the text copied into the html file, word wrap can be invoked. Simply click the Format menu bar option, then click the Word Wrap option. Upon doing so a check mark will appear to the left of the word wrap option to signify that the feature has been enabled, or toggled to an on position. However, the feature can be disabled, or toggled off, by repeating the same process; which removes the check mark from the left of the word wrap option. With word wrap engaged, scroll through the file to see the results. To see more of the file at once, the font size will be reduced by clicking the Format menu bar option, then click Font and make the appropriate selections. Again, scrolling through the file will show the contents but more text will be displayed at one time. The font size will now be restored to its original size for the workshop and word wrap will be disengaged.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Reload to display Code by Hand and Online Tool Integration Paragraphs
[] With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser.

Index.html: Media Page Navigation Link
[] Now that a basic web page with content has been created, the index dot html file can be used to expand the web page into a web site containing multiple Web pages. That is, two new pages will be cloned from the index dot html page. They include a media.html page and a references.html page. However, prior to doing so, a set of navigation links that will allow us to travel from one page in the web site should first establish. This will be accomplished by using the anchor tag, which is simply the letter “a” and is followed by the term “href” along with attributes describing to the browser what file to use. A closing anchor tag is also coded. To complete this task, a single link will be coded first; which will then be replicated to accommodate the remaining page. Once the navigation links have been coded for each html file in the Web site, the index dot html file can be cloned. As navigation links are typically found at the top of web pages, the navigation links will be coded directly under the body tag in the index dot html file. Code the anchor tag and include the filename within quotes. Also include the text that will be displayed as the link within the rendered web page. Note that for any web page in our web site, a navigation link to itself can be excluded as including a self-referencing link would simply result in the browser reloading the web page being viewed. To begin, code a navigation link to the **media dot html** file. First, directly under the body tag, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding including the name of the html file placed within double quotes. In this case, code the file name as **media dot html**. Although the **media dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **Media** with a capital M as in Mary. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **media dot html** file has been created.

Index.html: References Page Navigation Link
[] The references link pointing to the **references dot html** file will now be coded using the same procedure as before. First, code a pair of anchor begin and end tags directly under the first anchor tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding the name of the html file placed within double quotes. In this case, code the file name as **references dot html**. Although the **references dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **References** with a capital R as in Robert. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **references dot html** file has been created.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview
[|**http://www.youtube.com/watch?v=jWq1qriI0jI**]
 * Need video + narration *

With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that the links appear at the top of the index dot html page for the media and references pages. If one of the links is clicked, an error will display on screen. However, that situation will be remedied next.

Index.html: Link Separator: Vertical Bar / Pipe
[] A common technique used in Web design includes separating navigation links using a vertical bar, or pipe character, with a space placed on either side of the pipe. The pipe character can be typed by holding the shift key down and pressing the pipe key; which usually resides above the Enter key on most computer keyboards and shares its key with the forward slash character. Using spacing and the pipe characters helps delineate multiple navigation links from each other. To code the pipe character between the media and references navigation links, place the insertion point after the media dot html ending anchor tag. Next, press the space bar to enter a blank space that will also appear between the two navigation links. Now, while holding the shift key down on the keyboard, press the pipe key one time. Continuing, press the space bar to enter a blank space after the pipe. In sum, the following characters should have been entered in this order. Space, pipe, space.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Pipe
[] With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that between the navigation links appears a space, pipe, and space. With the pipe and spaces in place, the navigation links are clearly separated. The technique is even more dramatic when additional navigation links are needed.

Second and Third Pages as Clones of index.html
As noted earlier in the workshop, the index.html file will be cloned to create the **media** and **references** Web pages. To clone the index.html, use Notepad’s Save As function.

Create Media.html
[] To create the **media dot html** file as a clone of the **index dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save Ass option on the File menu. The Save Ass dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save Ass dialog box. Third, change the File name from **index dot html** to **media dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **media dot html** file name. The media.html file has been cloned from the index.html file. The contents of media.html file are therefore identical to the contents of index.html file. However, that matter will be addressed shortly as the references.html file will now be cloned from the media.html file.

Create References.html
[] To create the **references dot html** file as a clone of the **media dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save Ass option on the File menu. The Save Ass dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save Ass dialog box. Third, change the File name from **media dot html** to **references dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **references dot html** file name.

Editing Contents of the Media.html and References.html Files
Now the references.html and media.html files will be edited to reflect their uniqueness as separate web pages in the project Web site. Namely, the titles, heading one and heading two headings, navigation links, and the paragraph text will be edited.

References.html: Edit the Title and Include the Index Navigation Link
[] As the References file is already loaded in Note pad, changes will be made to that file first. To begin, change the text between the title tags to the words: My References Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page we are editing. That is, rather than including a self referencing navigation link to the references dot html file, replace the word references with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from References to Index.

References.html: Edit the H1 & H2 tags, Delete the Paragraphs
[] == Continuing with edits to the references dot html file, replace the h 1, or heading one text with the words: Useful Online References. Be certain to capitalize the first letter of each word. Next, as references for web sites related to coding by hand and online tool integration will be included within the references dot html file, the h 2, or heading two display text will remain the same for both instances of heading 2 code. Finally, considering the two paragraphs in the references dot html file, simply delete both paragraphs and the paragraph tags entirely. It may be helpful to toggle the word wrap function to the enabled state to more easily view both paragraphs entirely. Simply select the paragraph tags and the text in the paragraphs, and press the delete key on the keyboard to remove the paragraphs and paragraph tags from the file. ==

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Browser Preview
[] Now that the references dot html file has been created and modified, simply click the References link at the top of the index dot html file that is currently shown in the browser. Notice that the navigation links at the top of the References page reflect the Media page and now the Index page. Clicking on either navigation link now displays a Web page in the Web browser, but note that the index dot html file and the media dot html file are the same because the media dot html file has not yet been edited as it still remains a clone of the index dot html file.

Media File
The final step of the initial coding by hand phase involves editing the media.html file. To do so, simply open the file in Notepad to make the necessary edits.

Create Media.html
[] 2 open the media dot html file from within Note pad, click the File option on the menu bar, then click Open on the File menu. The Open dialog box is now displayed on screen. Navigate to your WebSite project folder and open that folder if it is not already opened within the Open dialog box. As shown on screen, the Open dialog box may display an empty WebSite folder. If this is the case, note that the file type list box is automatically set to display text files only as Note pad is a plain text editor. However, open the file type list box next to the File name text entry box by clicking within the file type list box and select the All Files option. The three web page files should now appear in the right side pane of the Open dialog box. Simply double click the media dot html file to open that file.

Media.html: Edit Title and Include the Index Navigation Link
[] As the Media file is now loaded in Note pad, the file will be edited. To begin, change the text between the title tags to the words: My Media Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page being edited. That is, rather than including a self referencing navigation link to the media dot html file, replace the word media with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from Media to Index.

Media.html: Edit H1, Delete H2, P, and Paragraphs
[] Continuing with the editing needed for the media dot html file, replace the h 1, or heading one text with the words: Media Created with Free Online Tools. Be certain to capitalize the first letter of each word for the exception of the word with. The media that will be created in the second portion of the workshop will be included within this Web page, therefore, the remaining content down through but excluding the body ending tag can be deleted. That is, select the text in the file beginning with the first heading two tag down through and including the last paragraph ending tag. After the material has been selected, press the delete key on the keyboard. Once finished, the heading 1 line should be followed by the body ending tag as shown here.

Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Browser Preview
[] Now that the media dot html file has been created and modified, click the Media navigation link to refresh the Media dot html file. The content of the media page simply contains the navigation links and the h 1 heading. Next, clicking on either navigation link will now display unique content for each Web page as each of the three Web pages in the Web site have been edited to reflect individual Web page content. =Free Online Multimedia Tools= Now that we have coded three separate Web pages that link together to form a Web site, we will focus our attention on using free online multimedia tools to enhance our Web site. While we will need to add some additional code to our Web site to include the media that we will now create, let’s have some fun with online multimedia tools!

Tutorials
Various tutorials are available for Pixlr and are found at the link below. [] Of interest, visit the following link and other links on the page that is reference by the above link to familiarize yourself with the Pixlr interface. []

Creating an image in Pixlr + Transparent PNG Format
We will create a geometric image in Pixlr, add text, and save the image to the WebSite folder on our computer. We will then code an image link in the media.html file to display the image. First, refer to the image below to load the pixlr.com Web site. Second, view the video below for an example of how to create a new image using Pixlr. We will create a png file to utilize the transparency feature of that image format. As most images are not square in shape, using the transparency feature of the png image format allows us to simulate a seamless integration of an image with irregularly shaped borders onto a Web page. The transparency feature makes transparent any area of the image that has not been modified with a color. Thus, for areas surrounding the image that are not edited, those areas are treated as transparent and the background of the Web page will show through those areas, thus creating the illusion of a seamless integration of an irregularly shaped object onto a Web page.

Pixlr.com image
[]

Create an Image video
[] With the pixlr home page loaded in a browser, click on the text shaded in blue that reads Open Image Editor. Doing so loads the pixlr editor within the browser. At this point a new image can be made, or an image can be opened from your computer, from an online resource, or from an image library. Click the Create a New Image to design a new image. The New Image dialog box appears with options that must be considered. First, supply a name for the image, such as p i x l r i m a g e. Second, expand the Presets drop down list to see the options for image sizes. Select the 640 by 480 option. The Width and Height drop down lists are automatically set accordingly. Third, check the Transparent check box to signify that the new image will use a transparent background. Finally, click the OK button to create the new image for editing. At this point you should have a blank document open within the Pixlr interface within your browser. The blank canvas is now ready to have objects placed onto it. We will create a large yellow oval onto which we will place several other shapes in various colors. At one point in the video the opacity of the object being placed onto the canvas is set to 50 to show the effect of transparency of objects. Note that this is different from the transparency selected for the overall image. In short, we can use transparency with individual objects as well.

Select Yellow Fill Color
[] Now that the new image and blank canvas are displayed, navigate to the bottom of the Tools pane and click the white box that signifies the fill color for objects that will be placed onto the canvas. The Color Picker dialog box now appears. Point to the vertical color bar that looks like a rainbow and click the yellow area within the color bar. The color gradient box to the left of the color bar shows a spectrum of color choices and intensities for the color selected. Click within the color gradient box toward the upper right of the box to select a saturated and intense yellow color. When satisfied with the selection, click the OK button. Notice that the background fill color in the Tools pane is now set to the yellow color that was just selected.

Draw Oval
[] Now that the background fill color has been set, click the Drawing Tool on the Tools pane. Now, move the pointer to the top of the screen within the tool specific options bar and select the Ellipse tool. Continue by placing the pointer in the upper left region of the blank canvas, but not at the very upper left. Hold down the left mouse button and drag toward the lower right region of the blank canvas and release the left mouse button. A yellow oval has now been placed onto the drawing canvas. The yellow oval will serve as the background of our design. To continue with the design, the background color selection technique will be repeated for a number of colors and additional shapes will be added to the canvas in a manner that overlaps the edge of the yellow oval.

Draw Multiple Objects
[] Continuing, select an orange background fill color using the Set Background Color on the Tools pane. Select a bright orange color using the color picker and draw a number of ovals around the large yellow oval. Overlapping is perfectly fine and consistently sized ovals need not be created. Repeat the same process with other colors, such as blue and magenta. Once completed with the above editing task, use the pinch and bloat tools within Pixlr to distort the colored blocks surrounding the larger yellow block. This is a for-fun technique!

Pinch Tool
[] To create a more customized look for the image, and to somewhat obscure the edges of the image, the pinch and bloat tools can be used for some entertaining results. Navigate to the Pinch tool on the Tools pane and click the tool. Next, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to pinch the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the center of the circle to approximate the pinch effect. Clicking multiple times in a single location results in a more dramatic effect.

Bloat Tool
[] To distort the border in a different manner, navigate to the Bloat tool on the Tools pane next to the Pinch tool, and click the Bloat tool. As before, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to bloat the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the outside of the circle from the central point to approximate the bloat effect. Clicking multiple times in a single location results in a more dramatic effect. We are almost finished constructing the image, however, we will add some text as a final touch.

Text Tool
[] As a final image editing technique, text will be added to the image. Navigate to the Type tool on the Tools pane and click the tool. The pointer changes to the text entry pointer. Move the pointer to the left of the image but within the yellow area and click the left mouse button. The Text input box appears into which text can be entered and formatted. Type the following message into the Text input box: Pixlr is great exclamation point. Once finished typing, click the Style drop down list and select the Bold option. Next, change the color of the text by clicking on the box beneath the label that reads Color. Within the Color Picker window that appears, select a color, perhaps purple, within the vertical color bar, adjust the color choice using the gradient box if needed, and click OK. Now position the text toward the middle of the image by pointing to the text, holding down the left mouse button, and dragging the mouse and text to the desired location. The Text input box may need to be moved by dragging the top border of the box while holding down the left mouse button. Once satisfied with the location of the text within the image, click the OK button on the Text input box to view the text within the image. Finally, it is important to save our work to our WebSite folder on our own computers. The technique is very easily facilitated from within the Pixlr interface. See the video below for details.

Save Image video
[] Before finishing the Pixlr editing session, the image must be saved to the WebSite folder on your computer. To do so, navigate to the File menu on the menu bar at the top of the screen. Click the Save option on the File menu. The Save Image window appears and contains some basic options to consider. First, the image can be saved to your computer using the My Computer tab, or the image can be saved online using two other options. Use the My Computer option. Second, the Name of the file can be adjusted if needed, but there are no changes necessary in this example. Third, the image Format can be specified. Because the image utilizes a transparent background, open the Format drop down and click on the PNG Transparent Full Quality option to take advantage of the transparency option of the PNG image format. Fourth and finally, click the OK button. The Save window now appears. Navigate to your WebSite project folder and click the Save button to save the file to your computer. As a final step, we may wish to edit the image further, or edit another image on our computer. Doing so is easy when using Pixlr. Simply use the //Open image from computer// option to edit existing images as shown in the following video.

Animation Online – Free Animated Banner Maker (2)
An account is needed! When creating Web sites it is often handy to include a banner to display at the top of a particular page or elsewhere to draw attention to a particular area within a Web page. What’s more, some banners can be animated to lure the eye to a particular area or message. In this example we will investigate creating an animated banner using the Animation Online Free Animated Banner Maker at [] Once the page has loaded in your browser, you will find a preview of the animated banner at the top of the Web page. Below the preview banner are found various input fields and options that allow for banner customization. Follow the video below to design a custom animated banner for your first Web site. Options to set are: · Background Color: Darker Blue · Loop Animation Checkbox: Checked · Loop Forever: Clicked · Banner Link: [|http://www.animationonline.com] · New Window on Click: Checked · First Text Input Box: My First Banner! · Second Text Input Box: Animation Online; modify the color to a light color, such as lime green · Third Text Input Box: [|www.animationonline.com]; modify the color to a light color, such as pink Once the above options have been set, use the Save button at the top of the window to save your design. Next, use the Publish button at the top of the window to generate the code for the animation. As this type of tool does not create a file that is saved to your computer, it is best to save the code to a text file on your computer until you decide to utilize the banner; which we will do at the end of the online tool portion of the project. You will need to create a membership by entering an email address and a password. It is often helpful to quickly create a gmail account for use with such tools if you do not wish to register using one of your preferred or personal email addresses. Upon loading the animation online web page, the interface is presented. The very top of the interface provides command buttons underneath which the animated banner preview is found. The animated banner contains three areas of text that can be customized by modifying the text contained in the bottom three text boxes on the interface. However, those adjustments will be made in a moment.

Initial Settings
[] To design an animated banner for the workshop project, locate the background label and color picker. Set the background color to dark blue. Also, the loop animation check box can be checked to enable the loop forever and loop count options. Check the loop forever option to repeat the animation without end. Next, locate the banner link text box and enter http colon slash slash w w w dot animation online dot com. Leave the new window on click check box checked. By doing so, when the banner is clicked the animation online Web page will load in a separate browser window to avoid navigating away from the project Web site. Now modifications will be made to the banner text. In the first text input box enter my first banner. Next, in the second text input box enter Animation Online. Finally, in the third text input box enter w w w dot animation online dot com.

Color Adjustments
[] Now that the banner text has been entered into the interface, adjustment to the color of the last two entries will be made. First, modify the color of the animation online text so that the text is shaded a lime green color. To do so, simply click on the box immediately to the right of the second text input box to adjust the color. Select a color to suit your preferences, in this case, lime green, and view the result in the animated banner preview at the top of the screen. Perform the same task for the third text input box by changing the color of that text to a pink color and again view the result in the animated banner preview at the top of the screen.

Font Adjustments
[] As a final adjustment to the banner, modify the font and font size of the animation online text. To do so, click the format text button to the right of the animation online and color box for that line. Once the format text pop up appears, use the font list box to select the Arial font. Also, use the slider to adjust the font size to twenty or simply type the number twenty into the text input box to the right of the font list box and press enter on the keyboard. Once finished, click the o k button and review the result in the animated banner preview at the top of the screen.

Publish the Banner: Generate the Code
[] To complete the editing portion of the animated banner, the user must be signed into the animation online interface in order to save and publish the banner created. To sign in, simply click the sign in button at the top of the interface. Next, supply an email address and password, then click the sign in button. Now, click the save button so that the animated banner can be retrieved for future editing if needed. Supply a name for the animated banner, such as My First Banner, in the save pop up window and click o k to save the banner. Now it is time to generate the code that will display the animated banner within a Web page, or within the media dot html web page of the project web site to be precise. To do so, click the publish button at the top of the interface. The publish pop up window appears and contains the code needed to display the animated banner in a web page. Click the copy code button to select and copy the code automatically, then click the ok button. Now that the code to display the banner has been copied to the Windows clipboard, the code needs to be saved. For now, the code will be saved to a new text file using Note Pad. Load Note Pad if it is not already loaded, or locate an instance of Note Pad that is already loaded. If using an instance of Note Pad that is already loaded, simply use the File menu option, then click the New option.

Save the Banner Code to Notepad
[] Load an empty instance of Note Pad and paste the contents of the Windows clipboard into Note Pad using the Ed it menu option, then click paste. Next, use the File menu option and click Save. Navigate to your WebSite project folder and provide a name for the new text file, such as banner code dot txt. Finally, click the Save button. The text file simply serves as a container to hold the banner code for the time being and will be utilized later in the workshop.

3-D Text Maker (1)
The next tool that will be utilized in this workshop is the 3-D Text Maker tool that not only creates three dimensional text but also provides options for animation. The 3-D Text Maker Web site includes five sections to consider when designing three dimensional text. Briefly, they are: Select a Font, Select a Color, Set Your Dimensions, Set Other Variables, and Enter Text. The sections are essentially self explanatory aside from the Set Other Variables section wherein various options for establishing animation and three dimensional effects are presented. To create a three dimensional text using the 3-D Text Maker tool, consider the following videos. Home Page: []

Font and Colors
[] To begin designing three dimensional text, first select a font from the available types under Step 1. Each font group contains a number of available fonts. In this example, select Lithograph font within the Sans-Serif group. Note that a preview of the font appears in the window just below the available font option groups. Next, beneath the Step 2 heading select a color for the text by clicking on a color in the palette provided. A lighter color works best as the shadow color will be derived from a darker shade of the color selected. The preview color square shows the color selected if using the palette or created if using the R G B color code options. Continuing to Step 3, select a size for the 3 D text. While the dimensions of the text as a banner can be formatted to a variety of dimensions, simply use the default setting where the size is not constrained.

Other Variables & Text Entry
[] The options available beneath the Step 4 heading Set Other Variables, relate to miscellaneous settings. To begin, set the Effect option to Stationary. Next, change the Depth option to 5. Now, adjust the Tilt Forward option to 10. Now, change the Frames option to 30 for a smooth animation. Considering the Looping option, use the default option of Run Forever to continuously loop the animation. Finally, enter the text beneath the Step 5 heading Enter Text. Enter into the text input box the following text. 3D Text is Fun, exclamation point. Once the text has been entered, click the Make 3 D Text button to generate the text, and view the results at the top of the page.

Stationary Text Preview
[] The stationary three dimensional text is displayed. However, let’s try some animation techniques.

Slide Left Effect
[] Navigate to the Step 4 heading Set Other Variables and set the Effect option to Slide Left. To view the results of the change, the text must be generated again by clicking the Make 3 D Text button at the bottom of the interface. Click the Make 3 D Text button and view the results at the top of the interface.

Slide Left Effect Preview
[] The animated three dimensional text is displayed per the slide left effect.

Swing Single Effect
[] As a final modification to the 3 D text, change the Effect option under the Step 4 heading Set Other Variables to Swing Single and click the Make 3 D Text button at the bottom of the interface to generate the 3 D text again. View the result at the top of the interface.

Swing Single Preview
[] The animated three dimensional text is displayed per the swing single effect.

Save the Animated GIF File
[] As the final step in generating 3 dimensional text, the result must be saved to the WebSite project folder on your machine. The file is saved as an animated gif file and will display as an animation on a Web page. To save the file to the WebSite project folder, place the pointer over the image and right click the mouse. Next, click on the Save Image Azz option. Now, navigate to your WebSite folder. Finally, click the Save button. The image is now ready to be incorporated into the media dot html page.

= 3rd Script Revision = = Updated Script with Video and Narration Links, Introductory Verbiage for Modules and Steps, Try it yourself Links = = =

 =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 and CSS tags 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. Graphic Organizer: Workshop Overview Graphic Organizer: Workshop Output Preview Render Keep the browser open / loaded and the same for notepad. Before starting the workshop, a few preliminaries will be addressed.

** 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: ** 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.
 * 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 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. [] [] 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. =Format of the Workshop=

Linear and Incremental Approach
The workshop utilizes a linear approach to building a Web site where each next step builds upon the prior step in the workshop. Thus, it is important to complete the workshop in the sequence provided. At any point, however, workshop participants can revisit a prior step for review or skip ahead to steps not yet visited for a preview of what is to come.

Modules, Steps, How-to Videos, Online Resources: //Try it yourself//
Also, the workshop consists of modules that consist of multiple steps that must be taken in order to complete the module. Most steps contain a description of the step and a how-to video demonstrating how to accomplish the task associated with each step. Some steps also contain links to online resources, one of which is the w3schools.com resource that includes a //Try it yourself// feature. The //Try it yourself// feature provides an online interactive coding and preview experience that allows workshop participants to practice the technique for some steps prior to implementing the code in their own Web site.

Supplemental Materials
Finally, at various locations in the workshop are located supplemental materials that can be downloaded to assist participants with the topics presented in the workshop. Labels may include PPT for Microsoft PowerPoint presentations or Graphic Organizer that provides a graphical / pictorial summary of the module or step. Be certain to utilize the supplementary materials to maximize your time spent in the workshop. =Pre-Training= To start, some pre-training will be issued; which provides some basic background information about the topics covered in the workshop prior to using them. =Pre-Training: Notepad= Microsoft Notepad is utilized in the workshop to code the Web pages. Notepad is a plain text editor that simply facilitates the entry of text and saves its contents as plain text files typically ending in the “txt” file suffix. While the font, or specific typeface, can be changed and resized, few other editing features are provided with the exception of boldface, italics. Cut, copy, and paste are supported as well as the find functionality. Additionally, printing and word wrap are also supported. Otherwise, no specific color coding or management of computer code is supported. In this respect, it is best to select a monospace font, one in which each letter occupies the same amount of space, such as Courier, Lucida Console, or 8514oem. Doing so helps align code for better visual inspection.
 * //Are you ready? Let’s begin! //**

Notepad: Load Notepad
[] To load note pad, left click on the windows start button, open all programs, open accessories, and click on note pad. =Pre-Training: w3schools.com= Prior to beginning the coding by hand module, it is good timing to first introduce the w3schools.com resource. Visit the HTML home page located here: [] Be certain to investigate: · Examples · Try it yourself · HTML Quiz · Navigation links in the body of the page · Navigation / Topic links on the left of each page

w3schools: Graphic Organizer
=Pre-Training: HTML= When coding basic Web pages and content, HTML is used to provide basic functionality. Visit the following link for details on HTML, tags, documents, and the //Try it yourself// example: [] Also visit the following links: Commonly used tags: [] HTML Elements: [] HTML Attributes: [] List of Tags: []

HTML Graphic Organizer
PPT: HTML, tags, documents, file suffix Provide an introduction to HTML via the Web page, however, provide some additional details via a PowerPoint-to-Web conversion. = Begin the Web Site Project = =Project Folder: Prepare the Web site Project Folder using Notepad= How-to video: [] Since we are using note pad to code our web pages, we will create a project folder for our web site using note pad. To do so, click the file menu option on the menu bar at the top of the note pad window, then click the save option. At this point, the Save As dialog box will appear. Now, navigate to a suitable location where you wish to save your project, perhaps within your Documents folder or on your desktop. We will use the desktop in our workshop. Next, click on the New Folder button. Now, provide a name for the folder, such as WebSite, and press the enter key when finished. =Code by Hand= =Index.html=
 * As an alternate method for creating the project folder in Notepad, right click the mouse in an empty area within the right side pane to invoke the short cut menu. Once the short cut menu appears, hover over the menu option titled new. After the subsequent shortcut menu appears, click on folder.

Index.html: Create the index.html file using Notepad
The first Web page will be created using Notepad is the index.html. The index.html Web page should be found in all Web sites as it traditionally serves as the default entry point to all other Web pages in a Web site and is commonly referred to as the home page of the Web site. How-to video: [] To create the index dot html file, first double click on the WebSite folder to enter into that folder. We will save our h t m l files and other content for our web site project within this folder. Now we are ready to supply a file name for our first web page. As this page will serve as the entry point to our web site, we will call the file I n d e x dot h t m l. Change the file name within the file name box near the bottom of the save as dialog box. Be certain to change the suffix from dot t x t to dot h t m l so that the file can be read by a web browser. Finally, click the Save button to finish saving the file. Note that upon returning to note pad, the file name is displayed in the title bar at the top of the note pad window.
 * Remember that a Web page is a simple text file but uses the file extension “htm” or “html” so that it can be processed by a Web browser.

Index.html: HTML and BODY tags: and
The HTML and BODY tags are coded next. The HTML tag must be coded first as everything else resides within the HTML tags and the tag identifies the document as an HTML document. Regarding the BODY tag, the content viewed on-screen within a Web browser is found within this tag pair. HTML tag: [] BODY tag: [] How-to video: [] Now we will code a basic web page shell. That is, we will code the basic tags to get us started. First, code the h t m l tags and note that everything else we code will reside within the h t m l tags. Also, remember to code both the opening and closing tags. It is best to enter both at the same time to avoid forgetting to close the tag pair. Continuing, code the body opening and closing tags. Again, it is best to code both tags at the same time to avoid forgetting to code the closing tag. At this point, we have coded a basic web page shell that could be used as a template for writing new web pages. However, there is no content for display in our web page. Therefore, we will continue by adding content that will display in a Web browser.

Index.html: File Save
Now that HTML has been coded in our index.html Web page, it is best to save the edits just made. Remember to save your work frequently to avoid losing any changes made to a file should something unexpected happen during an editing session. Finally, a how-to video is shown below to demonstrate saving a file in Notepad. However, throughout the remainder of the workshop, only the instructions will be provided. Refer to this video should you need to do so when saving your work later in the workshop. How-to video: [] Before we code additional tags, formatting, and content, we should save the changes made to the Web page. To do so, click the file option on the menu bar at the top of the Note pad window. Next, click the save option on the drop down menu. Otherwise, use the keyboard shortcut of ctrl plus S by holding down the control key and pressing the letter S as in the name Samantha.

Index.html: HEAD and TITLE tags: and
Continue coding HTML by hand to enter the HEAD and TITLE tags. Where the HEAD begin and end tags hold a number of supplemental instructions for a Web browser, the TITLE tag must reside within the HEAD tags and minimally facilitates naming a Web page with a description that appears in a Web browser’s title bar. HEAD tag: [] TITLE tag: [] How-to video: [] Now we will add a title to our web page, which will appear in the browser’s title bar, by coding additional tags. First, code the head opening and closing tags immediately after the html opening tag and above the body opening tag. We are coding the head tags so that the title tags can also be coded. As the title tags must reside within the head tags, both pairs of tags are frequently used. Within the title tags, code a title that will appear within the browser’s title bar. Code the following text: My Home Page. Be certain to close all tags as needed.

Index.html: File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: H1 and H2 tags: and
Heading tags include the H1, H2, H3, H4, H5, and H6 tags. They are used as headings to draw attention to various areas of a Web page and can be formatted differently than the paragraph or body text in a document. The H1 heading is the largest heading while the H6 heading is the smallest heading. H1 to H6 tags: [] How-to video: [] Let’s continue by coding content that will display on the web page within a web browser. First, code a heading for the home page. To do so, code the h 1 opening and closing tags under the body opening tag. Within the two h 1 tags, enter the following heading 1 text: My First Web Site. Next, below the h 1 tags, code two sets of h 2 tags. Be certain to code both the open and close tag pair for each set of h 2 tags. Within the first set of h 2 tags, enter the following heading 2 text: Coding by Hand. Within the second set of h 2 tags, enter the following heading 2 text: Online Tool Integration.

Index.html: File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Initial Preview
Given a number of edits have been made to the index.html file and given there is content in the file to display within a Web browser, let’s preview our coding for the very first time! How-to video: [] It is time to preview our web page within a web browser. First navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, which are the h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. It is time to preview our web page within a web browser. If you have not already loaded your Web site within the browser of your choice, first navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar. Otherwise, load which ever web page that is needed. If you already have the web page loaded in the browser, be certain to click on the refresh button to reload the web page to view the most recent editing that has been made to the web page being observed.

Index.html: Paragraph tag:
When including paragraphs of textual information within a Web page, such as a welcome message, about us narrative, biography, or story, it is helpful to place such information within paragraph tags for proper formatting. An interesting aspect of the paragraph tag is that paragraphs are offset from other content in the rendered Web page because the paragraph tag inserts space above and below each paragraph by default. P tag: [] How-to video: [] Now we will add paragraph text to our index dot html Web page by using the paragraph tags that simply take the form of the letter p as in Patricia. The paragraph text will be placed directly under each h 2 heading that was just coded. Therefore, code a set of paragraph begin and end tags under each of the h 2 tags that were just coded. Now paragraph text can be placed between each pair of paragraph tags.

Index.html: Add Paragraph Text for //Coding by Hand// Paragraph
Now that paragraph tags have been coded, we will place existing text between the paragraph begin and end tags for the sake of adding content to our index.html page, and for the sake of demonstrating the use of the paragraph tags. Find the text for the //Coding by Hand// paragraph below. How-to video: []

**Coding by Hand**
Upon finishing this workshop I will have created a basic web site. Part of the process involves coding html by hand using various html tags, or instructions, to define the structure of a web page and to facilitate some basic formatting. By coding html by hand, an individual becomes familiar with the foundational elements that are required when designing all web sites, and because html files are simply text files, a plain text editor such as MS Notepad will facilitate hand coding web pages very nicely. Likewise, html stands for hyper text markup language; which uses tags to define web pages. Tags are coded in begin and end pairs and are themselves enclosed in angle brackets, or greater than and less than characters. Significantly, the ending tags also include a forward slash to designate the tag as a closing tag. Content that will appear on a web page when viewed in a web browser, along with special directions for the browser that are not displayed on screen, are placed between the begin and end tag pairs. It is valuable to note that each tag may require different directions or attributes; which are placed within the begin tag. Additionally, nesting of tags is a coding practice that is commonly used when coding html. Simply put, this means that some tags are placed between other begin and end tag pairs. Finally, some tags that will be used in this workshop include: html, head, title, body, h1, h2, p, and a. For the sake of simplicity, we will copy existing text to place inside of paragraph begin and end tags to provide content under each h 2 heading. Now that both sets of paragraph tags are in place, copy the text from the workshop web site that is located under the Coding by Hand heading in blue. Place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Finally, make certain that the insertion point is placed between the first paragraph begin and end tag pair. Now paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. Notice that the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Index.html: Add Paragraph Text for //Online Tool Integration// Paragraph
In the same manner as above, we will place existing text between the paragraph begin and end tags of the //Online Tool Integration// paragraph also. Find the text for the //Online Tool Integration// paragraph below. How-to video: []

**Online Tool Integration**
Although coding html by hand is an invigorating experience, adding some pizzazz to a Web site via the use of free online multimedia tools is even more exciting! For example, by using various free online multimedia tools, Web designers can create three-dimensional text, animated banners, customized images, and videos to say the least. Also of interest are text-to-speech tools, and text-to-speech combined with animated avatar tools. The output of the former can be added to videos as an audio track and the output of the latter can be used as a guide in online training seminars or workshops. As luck would have it, audio, video, animations, and more can be added to Web sites for additional allure and message broadcast. Finally, for those who have created extensive Microsoft PowerPoint slide show libraries, fear not, as PowerPoint presentations can be added to Web sites as slide presentations or can be converted to video format for use on the Web. We will replicate the copy and paste text procedure just performed, but this time we will copy the paragraph below the online tool integration title as found in the workshop web site. First, locate the heading in the workshop web site labeled online tool integration. Second, place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Third, within the index dot html file, place the insertion point between the second paragraph begin and end tag pair. Fourth and finally, paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. As before, the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Notepad: Word Wrap
When coding long lines of code or adding paragraphs to HTML documents within Notepad, the text spans for the maximum number of characters allowed within Notepad; which requires us to scroll horizontally to view entries that span past the right edge of the Notepad window. However, a feature called word wrap can be invoked that will force text entries to wrap to the next line upon reaching the right edge of the Notepad window. How-to video: [] To more easily view the text copied into the html file, word wrap can be invoked. Simply click the Format menu bar option, then click the Word Wrap option. Upon doing so a check mark will appear to the left of the word wrap option to signify that the feature has been enabled, or toggled to an on position. However, the feature can be disabled, or toggled off, by repeating the same process; which removes the check mark from the left of the word wrap option. With word wrap engaged, scroll through the file to see the results. To see more of the file at once, the font size will be reduced by clicking the Format menu bar option, then click Font and make the appropriate selections. Again, scrolling through the file will show the contents but more text will be displayed at one time. The font size will now be restored to its original size for the workshop and word wrap will be disengaged.

Index.html: Browser Preview: Reload to display Code by Hand and Online Tool Integration Paragraphs
Let’s take a moment to view in a Web browser the appearance of the recently added paragraphs. How-to video: [] With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. =Navigation Links= Now that a basic web page with content has been created, the index.html file can be used to expand the Web page into a Web site containing multiple Web pages. That is, two new Web pages will be cloned from the index.html page. They include a **media.html** page and a **references.html** page. However, prior to doing so, a set of navigation links that will allow us to travel from one page in the Web site to the next should first be coded.

Index.html: Media Page Navigation Link via the Anchor tag: 
To create navigation links, we will use the anchor tag, which is simply the letter “a” and is followed by the term “href” along with an equals sign and attributes describing to the browser what file to use. Interestingly, the href and attributes are placed within the anchor’s opening tag. A closing anchor tag is also coded. However, link display text, or verbiage for the link that displays in the browser, must be coded between the anchor open and close tags. To complete this task, a single link will be coded first; which will then be replicated to accommodate the remaining page. Once the navigation links have been coded for each html file in the Web site, the index dot html file can be cloned. Also, as navigation links are often found at the top of web pages, the navigation links for our Web site project will be coded directly under the body tag in the index dot html file. Code the anchor tag and include the filename within quotes. Also include the text that will be displayed as the link within the rendered web page. Note that for any web page in our web site, a navigation link to itself can be excluded as including a self-referencing link would simply result in the browser reloading the web page being viewed. Anchor tag: [] How-to video: [] To begin, code a navigation link to the **media dot html** file. First, directly under the body tag, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding including the name of the html file placed within double quotes. In this case, code the file name as **media dot html**. Although the **media dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **Media** with a capital M as in Mary. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **media dot html** file has been created.

Index.html: References Page Navigation Link
The process above will now be replicated for the references.html page. How-to video: [] The references link pointing to the **references dot html** file will now be coded using the same procedure as before. First, code a pair of anchor begin and end tags directly under the first anchor tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding the name of the html file placed within double quotes. In this case, code the file name as **references dot html**. Although the **references dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **References** with a capital R as in Robert. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **references dot html** file has been created.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview
Having coded within the index.html file the navigation links to the media.html and references.html files, take a moment to preview the results in your Web browser. How-to video: [] With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that the links appear at the top of the index dot html page for the media and references pages. If one of the links is clicked, an error will display on screen. However, that situation will be remedied next.

Index.html: Link Separator: Vertical Bar / Pipe
While the navigation links in our index.html file are acceptable as they are currently coded, a common technique used in Web design includes separating navigation links using a vertical bar, or pipe character, with a space placed on either side of the pipe. The pipe character can be typed by holding the shift key down and pressing the pipe key; which usually resides above the Enter key on most computer keyboards and shares its key with the forward slash character. Using spacing and the pipe character helps delineate multiple navigation links from each other. How-to video: [] To code the pipe character between the media and references navigation links, place the insertion point after the media dot html ending anchor tag. Next, press the space bar to enter a blank space that will also appear between the two navigation links. Now, while holding the shift key down on the keyboard, press the pipe key one time. Continuing, press the space bar to enter a blank space after the pipe. In sum, the following characters should have been entered in this order. Space, pipe, space.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Pipe
Now that the pipe character and applicable spaces have been applied to the navigation links in the index.html file, let’s preview the result in a Web browser. How-to video: [] With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that between the navigation links appears a space, pipe, and space. With the pipe and spaces in place, the navigation links are clearly separated. The technique is even more dramatic when additional navigation links are needed. =Create the Media and References Web Pages as Clones of index.html= As noted earlier in the workshop, the index.html file will be cloned to create the **media.html** and **references.html** Web pages. To clone the index.html, use Notepad’s Save As function.

Media.html: Create as a Clone of Index.html
Clone the media.html file from the index.html file. The contents of media.html file will be identical to the contents of index.html file. However, that matter will be addressed shortly. How-to video: [] To create the **media dot html** file as a clone of the **index dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save Ass option on the File menu. The Save Ass dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save Ass dialog box. Third, change the File name from **index dot html** to **media dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **media dot html** file name.

References.html: Create as a Clone of Media.html
Next clone the references.html file from the media.html file. As the media.html file is a clone of the index.html file so, too, will be the references.html file a clone of the index.html file. How-to video: [] To create the **references dot html** file as a clone of the **media dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save Ass option on the File menu. The Save Ass dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save Ass dialog box. Third, change the File name from **media dot html** to **references dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **references dot html** file name. =Edit the References.html File= Now the references.html and media.html files will be edited to reflect their uniqueness as separate web pages in the project Web site. Namely, the titles, heading one and heading two headings, navigation links, and the paragraph text will be edited.

References.html: Edit the Title and Include the Index Navigation Link
Edit the references.html page per the following instructions. · Change the title to: My References Page · Change the references.html link to: index.html · Change the references display text to: Index How-to video: [] As the References file is already loaded in Note pad, changes will be made to that file first. To begin, change the text between the title tags to the words: My References Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page we are editing. That is, rather than including a self referencing navigation link to the references dot html file, replace the word references with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from References to Index.

References.html: Edit the H1 and H2 tags; Delete the P tag, and Paragraphs
Continue editing the references.html file by making the following changes. · Change the H1 text to: Useful Online References · Delete both paragraphs and both sets of paragraph open and close tags How-to video: [] Continuing with edits to the references dot html file, replace the h 1, or heading one text with the words: Useful Online References. Be certain to capitalize the first letter of each word. Next, as references for web sites related to coding by hand and online tool integration will be included within the references dot html file, the h 2, or heading two display text will remain the same for both instances of heading 2 code. Finally, considering the two paragraphs in the references dot html file, simply delete both paragraphs and the paragraph tags entirely. It may be helpful to toggle the word wrap function to the enabled state to more easily view both paragraphs entirely. Simply select the paragraph tags and the text in the paragraphs, and press the delete key on the keyboard to remove the paragraphs and paragraph tags from the file.

References.html: Save File
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Browser Preview
Take a moment to view in a browser the changes made to the references.html file. How-to video: [] Now that the references dot html file has been created and modified, simply click the References link at the top of the index dot html file that is currently shown in the browser. Notice that the navigation links at the top of the References page reflect the Media page and now the Index page. Clicking on either navigation link now displays a Web page in the Web browser, but note that the index dot html file and the media dot html file are the same because the media dot html file has not yet been edited as it still remains a clone of the index dot html file. =Edit the Media.html File= The final step of the initial coding by hand phase involves editing the media.html file.

Media.html: Open Existing file using Notepad
To make the necessary changes to the media.html file, open the file in Notepad. How-to video: [] 2 open the media dot html file from within Note pad, click the File option on the menu bar, then click Open on the File menu. The Open dialog box is now displayed on screen. Navigate to your WebSite project folder and open that folder if it is not already opened within the Open dialog box. As shown on screen, the Open dialog box may display an empty WebSite folder. If this is the case, note that the file type list box is automatically set to display text files only as Note pad is a plain text editor. However, open the file type list box next to the File name text entry box by clicking within the file type list box and select the All Files option. The three web page files should now appear in the right side pane of the Open dialog box. Simply double click the media dot html file to open that file.

Media.html: Edit the Title and Include the Index Navigation Link
Edit the media.html page per the following instructions. · Change the title to: My Media Page · Change the media.html link to: index.html · Change the media display text to: Index How-to video: [] As the Media file is now loaded in Note pad, the file will be edited. To begin, change the text between the title tags to the words: My Media Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page being edited. That is, rather than including a self referencing navigation link to the media dot html file, replace the word media with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from Media to Index.

Media.html: Edit the H1 tag; Delete the H2 and Paragraphs and P tags
Continue editing the media.html file by making the following changes. · Change the H1 text to: Media Created with Free Online Tools · Delete the remaining H2, paragraphs, and P tags How-to video: [] Continuing with the editing needed for the media dot html file, replace the h 1, or heading one text with the words: Media Created with Free Online Tools. Be certain to capitalize the first letter of each word for the exception of the word with. The media that will be created in the second portion of the workshop will be included within this Web page, therefore, the remaining content down through but excluding the body ending tag can be deleted. That is, select the text in the file beginning with the first heading two tag down through and including the last paragraph ending tag. After the material has been selected, press the delete key on the keyboard. Once finished, the heading 1 line should be followed by the body ending tag as shown here.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Browser Preview
With the media.html file edited per the workshop instructions, take a moment to preview the results in a browser. How-to video: [] Now that the media dot html file has been created and modified, click the Media navigation link to refresh the Media dot html file. The content of the media page simply contains the navigation links and the h 1 heading. Next, clicking on either navigation link will now display unique content for each Web page as each of the three Web pages in the Web site have been edited to reflect individual Web page content. =Free Online Multimedia Tools= Now that we have coded three separate Web pages that link together to form a Web site, we will focus our attention on using free online multimedia tools to enhance our Web site. While we will need to add some additional code to our Web site to include the media that we will now create, let’s have some fun with online multimedia tools! =3-D Text Maker= The first tool that will be utilized in this workshop is the 3-D Text Maker tool that not only creates three dimensional text but also provides options for animation. The 3-D Text Maker Web site includes five sections to consider when designing three dimensional text. Briefly, they are: Select a Font, Select a Color, Set Your Dimensions, Set Other Variables, and Enter Text. The sections are essentially self explanatory aside from the Set Other Variables section wherein various options for establishing animation and three dimensional effects are presented. To create three dimensional text using the 3-D Text Maker tool, open the 3-D Text Maker home page (as noted below) within your browser, and consider the following videos. 3-D Text Maker Home Page: []

3-D Text Maker: Font and Colors
The first steps involved in creating three-dimensional text with 3-D Text Maker include selecting a font and colors. How-to video: [] To begin designing three dimensional text, first select a font from the available types under Step 1. Each font group contains a number of available fonts. In this example, select Lithograph font within the Sans-Serif group. Note that a preview of the font appears in the window just below the available font option groups. Next, beneath the Step 2 heading select a color for the text by clicking on a color in the palette provided. A lighter color works best as the shadow color will be derived from a darker shade of the color selected. The preview color square shows the color selected if using the palette or created if using the R G B color code options. Continuing to Step 3, select a size for the 3 D text. While the dimensions of the text as a banner can be formatted to a variety of dimensions, simply use the default setting where the size is not constrained.

3-D Text Maker: Other Variables & Text Entry
The next steps involved in creating three-dimensional text with 3-D Text Maker include setting various options and entering the text that is to be displayed in three dimensions. How-to video: [] The options available beneath the Step 4 heading Set Other Variables, relate to miscellaneous settings. To begin, set the Effect option to Stationary. Next, change the Depth option to 5. Now, adjust the Tilt Forward option to 10. Now, change the Frames option to 30 for a smooth animation. Considering the Looping option, use the default option of Run Forever to continuously loop the animation. Finally, enter the text beneath the Step 5 heading Enter Text. Enter into the text input box the following text. 3D Text is Fun, exclamation point. Once the text has been entered, click the Make 3 D Text button to generate the text, and view the results at the top of the page.

3-D Text Maker: Stationary Text Preview
With the initial design parameters established, preview the results within a browser. How-to video: [] The stationary three dimensional text is displayed. However, let’s try some animation techniques.

3-D Text Maker: Slide Left Effect
To add a bit more appeal to the three-dimensional text, an animation effect will be applied. How-to video: [] Navigate to the Step 4 heading Set Other Variables and set the Effect option to Slide Left. To view the results of the change, the text must be generated again by clicking the Make 3 D Text button at the bottom of the interface. Click the Make 3 D Text button and view the results at the top of the interface.

3-D Text Maker: Slide Left Effect Preview
Preview the animation effect. How-to video: [] The animated three dimensional text is displayed per the slide left effect.

3-D Text Maker: Swing Single Effect
Try an additional animation effect for fun! How-to video: [] As a final modification to the 3 D text, change the Effect option under the Step 4 heading Set Other Variables to Swing Single and click the Make 3 D Text button at the bottom of the interface to generate the 3 D text again. View the result at the top of the interface.

3-D Text Maker: Swing Single Preview
Preview the animation effect. How-to video: [] The animated three dimensional text is displayed per the swing single effect.

3-D Text Maker: Save the Animated GIF File
To complete the design of the three-dimensional text using the 3-D Text Maker Web site, the three-dimensional text will be saved as an animated gif file. How-to video: [] As the final step in generating 3 dimensional text, the result must be saved to the WebSite project folder on your machine. The file is saved as an animated gif file and will display as an animation on a Web page. To save the file to the WebSite project folder, place the pointer over the image and right click the mouse. Next, click on the Save Image Azz option. Now, navigate to your WebSite folder. Finally, click the Save button. The image is now ready to be incorporated into the media dot html page. =Animation Online=

Animation Online: Create an Account
As a preface to using the Animation Online Web site, workshop participants will need to create a free account by clicking the //Sign In// tab at the top of the Animation Online home page. As prompted by the //Sign In// pop-up, click the //Join// button to the right of the //Not yet a member? It’s Free// label. After doing so, simply enter an email address and a password to gain full access to the Animation Online Web site. 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.

Animation Online: Banner Rationale
When creating Web sites it is often handy to include a banner to display at the top of a particular Web page, or elsewhere within a page, to draw attention to a particular area within the page. What’s more, many banners can be animated to lure the eye to a particular area or message. In this example we will create an animated banner using the Animation Online Free Animated Banner Maker. To create an animated banner, open the Animation Online home page (as noted below) within your browser, and consider the following videos. Animation Online Home Page: [] Once the page has loaded in your browser, you will find a preview of the animated banner at the top of the Web page. Below the preview banner are found various input fields and options that allow for banner customization. Follow the video below to design a custom animated banner for your first Web site. Options to set are: · Background Color: Darker Blue · Loop Animation Checkbox: Checked · Loop Forever: Clicked · Banner Link: [|http://www.animationonline.com] · New Window on Click: Checked · First Text Input Box: My First Banner! · Second Text Input Box: Animation Online; modify the color to a light color, such as lime green · Third Text Input Box: [|www.animationonline.com]; modify the color to a light color, such as pink Upon loading the animation online web page, the interface is presented. The very top of the interface provides command buttons underneath which the animated banner preview is found. The animated banner contains three areas of text that can be customized by modifying the text contained in the bottom three text boxes on the interface. However, those adjustments will be made in a moment.

Animation Online: Initial Adjustments to the Animation Online Interface
Begin designing a custom banner by making some initial adjustments to the Animation Online interface. How-to video: [] To design an animated banner for the workshop project, locate the background label and color picker. Set the background color to dark blue. Also, the loop animation check box can be checked to enable the loop forever and loop count options. Check the loop forever option to repeat the animation without end. Next, locate the banner link text box and enter http colon slash slash w w w dot animation online dot com. Leave the new window on click check box checked. By doing so, when the banner is clicked the animation online Web page will load in a separate browser window to avoid navigating away from the project Web site. Now modifications will be made to the banner text. In the first text input box enter my first banner. Next, in the second text input box enter Animation Online. Finally, in the third text input box enter w w w dot animation online dot com.

Animation Online: Color Adjustments
Continue customizing the Animation Online banner by making color adjustments. How-to video: [] Now that the banner text has been entered into the interface, adjustment to the color of the last two entries will be made. First, modify the color of the animation online text so that the text is shaded a lime green color. To do so, simply click on the box immediately to the right of the second text input box to adjust the color. Select a color to suit your preferences, in this case, lime green, and view the result in the animated banner preview at the top of the screen. Perform the same task for the third text input box by changing the color of that text to a pink color and again view the result in the animated banner preview at the top of the screen.

Animation Online: Font Adjustments
Continue customizing the Animation Online banner by making font adjustments. How-to video: [] As a final adjustment to the banner, modify the font and font size of the animation online text. To do so, click the format text button to the right of the animation online and color box for that line. Once the format text pop up appears, use the font list box to select the Arial font. Also, use the slider to adjust the font size to twenty or simply type the number twenty into the text input box to the right of the font list box and press enter on the keyboard. Once finished, click the o k button and review the result in the animated banner preview at the top of the screen.

Animation Online: Sign In, Save, and Publish the Banner / Generate the Code
Now that the Animation Online banner has been designed to the specifications set forth in the workshop, it is time to Sign In, Save, and Publish the banner. Publishing the banner essentially means to generate the code to run the browser within the Web site. The code will ultimately be placed into the media.html Web page. How-to video: [] To complete the editing portion of the animated banner, the user must be signed into the animation online interface in order to save and publish the banner created. To sign in, simply click the sign in button at the top of the interface. Next, supply an email address and password, then click the sign in button. Now, click the save button so that the animated banner can be retrieved for future editing if needed. Supply a name for the animated banner, such as My First Banner, in the save pop up window and click o k to save the banner. Now it is time to generate the code that will display the animated banner within a Web page, or within the media dot html web page of the project web site to be precise. To do so, click the publish button at the top of the interface. The publish pop up window appears and contains the code needed to display the animated banner in a web page. Click the copy code button to select and copy the code automatically, then click the ok button. Now that the code to display the banner has been copied to the Windows clipboard, the code needs to be saved. For now, the code will be saved to a new text file using Note Pad. Load Note Pad if it is not already loaded, or locate an instance of Note Pad that is already loaded. If using an instance of Note Pad that is already loaded, simply use the File menu option, then click the New option.

Animation Online: Save the Banner Code to Notepad
Prior to including the Animation Online banner in the media.html Web page, the code generated to show the banner in a Web page must be saved for the time being. We will therefore save the banner code in a new text file using Notepad. How-to video: [] Load an empty instance of Note Pad and paste the contents of the Windows clipboard into Note Pad using the Ed it menu option, then click paste. Next, use the File menu option and click Save. Navigate to your WebSite project folder and provide a name for the new text file, such as banner code dot txt. Finally, click the Save button. The text file simply serves as a container to hold the banner code for the time being and will be utilized later in the workshop. =Pixlr=

Pixlr: Online Image Editor
As photo and image editing tasks are becoming more prevalent in Web design, gaining familiarity with image editors is important to many Web designers. To assist anyone with image editing tasks is Pixlr; which is a free online image editor. As part of this module workshop participants will create a basic image using Pixlr and some of the tools provided within the Pixlr interface.

Pixlr: Tutorials
While a short period of time will be spent investigating Pixlr overall, various online tutorials are available for Pixlr and are found at the link below. Pixlr Tutorials: [] Of interest, however, is the following link that introduces the Pixlr interface. Take a few moments to view the video that introduces the Pixlr interface prior to proceeding. []

Pixlr: Create an Image using the Transparent PNG Format
We will create a geometric image in Pixlr, add text, and save the image to the WebSite folder on our computer. We will then code an image link in the media.html file to display the image. We will create a png file to utilize the transparency feature of that image format. As most images are not square in shape, using the transparency feature of the png image format allows us to simulate a seamless integration of an image with irregularly shaped borders onto a Web page. The transparency feature makes transparent any area of the image that has not been modified with a color. Thus, for areas surrounding the image that are not edited, those areas are treated as transparent and the background of the Web page will show through those areas, thus creating the illusion of a seamless integration of an irregularly shaped object into a Web page. To begin designing the image for the Web site project, open the Pixlr home page (as noted below) within your browser, and consider the following videos. Pixlr Home Page: []

Pixlr: Create an Image
As a first step in creating an image, provide a name for the image, set the image size, and specify the image transparency option. How-to video: [] With the pixlr home page loaded in a browser, click on the text shaded in blue that reads Open Image Editor. Doing so loads the pixlr editor within the browser. At this point a new image can be made, or an image can be opened from your computer, from an online resource, or from an image library. Click the Create a New Image to design a new image. The New Image dialog box appears with options that must be considered. First, supply a name for the image, such as p i x l r i m a g e. Second, expand the Presets drop down list to see the options for image sizes. Select the 640 by 480 option. The Width and Height drop down lists are automatically set accordingly. Third, check the Transparent check box to signify that the new image will use a transparent background. Finally, click the OK button to create the new image for editing.

Pixlr: Select Yellow Background / Fill Color
Prior to drawing objects on the blank canvas, a background or fill color for objects must be specified. How-to video: [] Now that the new image and blank canvas are displayed, navigate to the bottom of the Tools pane and click the white box that signifies the fill color for objects that will be placed onto the canvas. The Color Picker dialog box now appears. Point to the vertical color bar that looks like a rainbow and click the yellow area within the color bar. The color gradient box to the left of the color bar shows a spectrum of color choices and intensities for the color selected. Click within the color gradient box toward the upper right of the box to select a saturated and intense yellow color. When satisfied with the selection, click the OK button. Notice that the background fill color in the Tools pane is now set to the yellow color that was just selected.

Pixlr: Draw Oval
With the appropriate fill color selected, a large oval is drawn on the blank canvas. How-to video: [] Now that the background fill color has been set, click the Drawing Tool on the Tools pane. Now, move the pointer to the top of the screen within the tool specific options bar and select the Ellipse tool. Continue by placing the pointer in the upper left region of the blank canvas, but not at the very upper left. Hold down the left mouse button and drag toward the lower right region of the blank canvas and release the left mouse button. A yellow oval has now been placed onto the drawing canvas. The yellow oval will serve as the background of our design.

Pixlr: Draw Multiple Objects
To continue with the design, the background color selection technique will be repeated for a number of colors and additional shapes will be added to the canvas in a manner that overlaps the edge of the yellow oval. How-to video: [] Continuing, select an orange background fill color using the Set Background Color on the Tools pane. Select a bright orange color using the color picker and draw a number of ovals around the large yellow oval. Overlapping is perfectly fine and consistently sized ovals need not be created. Repeat the same process with other colors, such as blue and magenta.

Pixlr: Pinch Tool
Now the pinch tool is used to distort the colored objects surrounding the larger yellow block. Have some fun experimenting with the pinch tool! How-to video: [] To create a more customized look for the image, and to somewhat obscure the edges of the image, the pinch and bloat tools can be used for some entertaining results. Navigate to the Pinch tool on the Tools pane and click the tool. Next, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to pinch the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the center of the circle to approximate the pinch effect. Clicking multiple times in a single location results in a more dramatic effect.

Pixlr: Bloat Tool
In contrast to the pinch tool used above, the bloat tool is used to distort the colored objects surrounding the larger yellow block in a different manner. Have some fun experimenting with the bloat tool! How-to video: [] To distort the border in a different manner, navigate to the Bloat tool on the Tools pane next to the Pinch tool, and click the Bloat tool. As before, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to bloat the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the outside of the circle from the central point to approximate the bloat effect. Clicking multiple times in a single location results in a more dramatic effect.

Pixlr: Text Tool
As a final editing task, text will be added to the image as a final touch. How-to video: [] As a final image editing technique, text will be added to the image. Navigate to the Type tool on the Tools pane and click the tool. The pointer changes to the text entry pointer. Move the pointer to the left of the image but within the yellow area and click the left mouse button. The Text input box appears into which text can be entered and formatted. Type the following message into the Text input box: Pixlr is great exclamation point. Once finished typing, click the Style drop down list and select the Bold option. Next, change the color of the text by clicking on the box beneath the label that reads Color. Within the Color Picker window that appears, select a color, perhaps purple, within the vertical color bar, adjust the color choice using the gradient box if needed, and click OK. Now position the text toward the middle of the image by pointing to the text, holding down the left mouse button, and dragging the mouse and text to the desired location. The Text input box may need to be moved by dragging the top border of the box while holding down the left mouse button. Once satisfied with the location of the text within the image, click the OK button on the Text input box to view the text within the image.

Pixlr: Save Image video
Finally, it is important to save our work to our WebSite folder on our own computers. The technique is very easily facilitated from within the Pixlr interface. See the video below for details. How-to video: [] Before finishing the Pixlr editing session, the image must be saved to the WebSite folder on your computer. To do so, navigate to the File menu on the menu bar at the top of the screen. Click the Save option on the File menu. The Save Image window appears and contains some basic options to consider. First, the image can be saved to your computer using the My Computer tab, or the image can be saved online using two other options. Use the My Computer option. Second, the Name of the file can be adjusted if needed, but there are no changes necessary in this example. Third, the image Format can be specified. Because the image utilizes a transparent background, open the Format drop down and click on the PNG Transparent Full Quality option to take advantage of the transparency option of the PNG image format. Fourth and finally, click the OK button. The Save window now appears. Navigate to your WebSite project folder and click the Save button to save the file to your computer. As a final step, we may wish to edit the image further, or edit another image on our computer. Doing so is easy when using Pixlr. Simply use the //Open image from computer// option to edit existing images as shown in the following video.

Open Saved Image video
BACKUP

= = = = = 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 and CSS tags 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.

Graphic Organizer: Workshop Overview Graphic Organizer: Workshop Output Preview Render Keep the browser open / loaded and the same for notepad.

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

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.

[] []

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.

= Format of the Workshop = Next, briefly consider the format that is used in this multimedia workshop.

Linear and Incremental Approach
The workshop utilizes a linear approach to building a Web site where each next step builds upon the prior step in the workshop. Thus, it is important to complete the workshop in the sequence provided. At any point, however, workshop participants can revisit a prior step for review or skip ahead to steps not yet visited for a preview of what is to come.

Modules, Steps, How-to Videos, Online Resources: Try it yourself
Also, the workshop consists of modules that consist of multiple steps that must be taken in order to complete the module. Most modules and steps contain a brief description about the purpose of the step, a how-to video demonstrating how to accomplish the task associated with each step. Some steps also contain links to online resources, one of which is the w3schools.com resource that includes a //Try it yourself// feature. The //Try it yourself// feature provides an online interactive coding and preview experience that allows workshop participants to practice the technique for some steps prior to implementing the code in their own Web site. Finally, most steps include text that is shaded in a purple hue. The purple text represents the transcript that accompanies the how-to videos and may contain non-standard spelling for the sake of proper pronunciation by the text-to-speech converter that was used to generate the speech for the how-to videos. The purple text therefore supplements the how-to videos, but can be skipped if desired.

Supplemental Materials
Finally, at various locations in the workshop are located supplemental materials that can be downloaded to assist participants with the topics presented in the workshop. Labels may include PPT for Microsoft PowerPoint presentations or Graphic Organizer that provides a graphical / pictorial summary of the concepts presented as part of a given module or step. Be certain to utilize the supplementary materials to maximize your time spent in the workshop.

=// Are You Ready? Let's Begin! //=

= Pre-Training = To formally start the multimedia workshop, certain key topics will be introduced via a pre-training approach. The goal is to provide some basic background information about the topics covered in the workshop prior to putting the topics into practice. The pre-training topics include:
 * Microsoft Notepad
 * [|www.w3schools.com]
 * HTML
 * CSS

Pre-Training: Notepad
Microsoft Notepad is utilized in the workshop to code the Web pages. Notepad is a plain text editor that simply facilitates the entry of text and saves its contents as plain text files typically ending in the “txt” file suffix. While the font, or specific typeface, can be changed and resized, few other editing features are provided with the exception of boldface, italics. Cut, copy, and paste are supported as well as the find functionality. Additionally, printing and word wrap are also supported. Otherwise, no specific color coding or management of computer code is supported. In this respect, it is best to select a monospace font, one in which each letter occupies the same amount of space, such as Courier, Lucida Console, or 8514oem. Doing so helps align code for better visual inspection.

Notepad: Graphic Organizer

Notepad: Load Notepad
[]

media type="youtube" key="p3Wm1JcjR2Y?fs=1" height="385" width="480"

To load note pad, left click on the windows start button, open all programs, open accessories, and click on note pad.

Pre-Training: w3schools.com
Prior to beginning the coding by hand module, it is good timing to first introduce the w3schools.com resource. Visit the HTML home page located here:

[]

Be certain to investigate:
 * Examples
 * Try it yourself
 * HTML Quiz
 * Navigation links in the body of the page
 * Navigation / Topic links on the left of each page

w3schools: Graphic Organizer

Pre-Training: HTML
When coding basic Web pages and content, HTML is used to provide basic functionality. Visit the following link for details on HTML, tags, syntax, documents, and the //Try it yourself// example:

[]

Also visit the following links:

Commonly used tags: [] HTML Elements: [] HTML Attributes: [] List of Tags: []

HTML Graphic Organizer PPT: HTML, tags, documents, file suffix

Pre-Training: CSS
While basic Web pages are created using HTML as the basic building block that specifies what to place on a Web page, CSS, or cascading style sheets, allow the what to be formatted in various ways. Visit the following links for details about CSS, syntax, and how to include CSS within a Web site:

CSS Tutorial, //Try it yourself//, Quiz: [] CSS: What and Why?: [] CSS Syntax: [] Including CSS within a Web site: []

CSS Graphic Organizer

= Let’s Build Your First Web Site! = Now that the basics have been introduced, let’s begin building your first Web site!

Project Folder: Prepare the Web site Project Folder using Notepad
The first step in building your Web site is to create a Web site project folder.

How-to video: []

media type="youtube" key="xMEouRfSmyo?fs=1" height="385" width="480"

Since we are using note pad to code our web pages, we will create a project folder for our web site using note pad. To do so, click the file menu option on the menu bar at the top of the note pad window, then click the save option. At this point, the Save As dialog box will appear. Now, navigate to a suitable location where you wish to save your project, perhaps within your Documents folder or on your desktop. We will use the desktop in our workshop. Next, click on the New Folder button. Now, provide a name for the folder, such as WebSite, and press the enter key when finished.


 * As an alternate method for creating the project folder in Notepad, right click the mouse in an empty area within the right side pane to invoke the short cut menu. Once the short cut menu appears, hover over the menu option titled new. After the subsequent shortcut menu appears, click on folder.

= Code by Hand = With the Web site project folder created, we will now begin the Code by Hand module; which equates to coding HTML by hand. Contained within this module are the following tasks:


 * Create the Index.html Web page.
 * Code the following HTML tags:
 * 
 * Code navigation links between pages.
 * Create and edit the Media.html Web page.
 * Create and edit the References.html Web page.
 * 
 * Code navigation links between pages.
 * Create and edit the Media.html Web page.
 * Create and edit the References.html Web page.
 * Code navigation links between pages.
 * Create and edit the Media.html Web page.
 * Create and edit the References.html Web page.

= Index.html =

Index.html: Create the index.html file using Notepad
The first Web page will be created using Notepad is the index.html. The index.html Web page should be found in all Web sites as it traditionally serves as the default entry point to all other Web pages in a Web site and is commonly referred to as the home page of the Web site.
 * Remember that a Web page is a simple text file but uses the file extension “htm” or “html” so that it can be processed by a Web browser.

How-to video: []

media type="youtube" key="-CKfqPrMHLs?fs=1" height="385" width="480"

To create the index dot html file, first double click on the WebSite folder to enter into that folder. We will save our h t m l files and other content for our web site project within this folder. Now we are ready to supply a file name for our first web page. As this page will serve as the entry point to our web site, we will call the file I n d e x dot h t m l. Change the file name within the file name box near the bottom of the save as dialog box. Be certain to change the suffix from dot t x t to dot h t m l so that the file can be read by a web browser. Finally, click the Save button to finish saving the file. Note that upon returning to note pad, the file name is displayed in the title bar at the top of the note pad window.

Index.html: HTML and BODY tags: and
The HTML and BODY tags are coded next. The HTML tag must be coded first as everything else resides within the HTML tags and the tag identifies the document as an HTML document. Regarding the BODY tag, the content viewed on-screen within a Web browser is found within this tag pair.

HTML tag: []

BODY tag: []

How-to video: []

media type="youtube" key="f91WvaghMWI?fs=1" height="385" width="480"

Now we will code a basic web page shell. That is, we will code the basic tags to get us started. First, code the h t m l tags and note that everything else we code will reside within the h t m l tags. Also, remember to code both the opening and closing tags. It is best to enter both at the same time to avoid forgetting to close the tag pair. Continuing, code the body opening and closing tags. Again, it is best to code both tags at the same time to avoid forgetting to code the closing tag. At this point, we have coded a basic web page shell that could be used as a template for writing new web pages. However, there is no content for display in our web page. Therefore, we will continue by adding content that will display in a Web browser.

Index.html: File Save
Now that HTML has been coded in our index.html Web page, it is best to save the edits just made. Remember to save your work frequently to avoid losing any changes made to a file should something unexpected happen during an editing session. Finally, a how-to video is shown below to demonstrate saving a file in Notepad. However, throughout the remainder of the workshop, only the instructions will be provided. Refer to this video should you need to do so when saving your work later in the workshop.

How-to video: []

media type="youtube" key="3Cp3PPyAkz8?fs=1" height="385" width="480"

Before we code additional tags, formatting, and content, we should save the changes made to the Web page. To do so, click the file option on the menu bar at the top of the Note pad window. Next, click the save option on the drop down menu. Otherwise, use the keyboard shortcut of ctrl plus S by holding down the control key and pressing the letter S as in the name Samantha.

Index.html: HEAD and TITLE tags: and
Continue coding HTML by hand to enter the HEAD and TITLE tags. Where the HEAD begin and end tags hold a number of supplemental instructions for a Web browser, the TITLE tag must reside within the HEAD tags and minimally facilitates naming a Web page with a description that appears in a Web browser’s title bar.

HEAD tag: []

TITLE tag: []

How-to video: []

media type="youtube" key="yofC4TpQ03c?fs=1" height="385" width="480"

Now we will add a title to our web page, which will appear in the browser’s title bar, by coding additional tags. First, code the head opening and closing tags immediately after the html opening tag and above the body opening tag. We are coding the head tags so that the title tags can also be coded. As the title tags must reside within the head tags, both pairs of tags are frequently used. Within the title tags, code a title that will appear within the browser’s title bar. Code the following text: My Home Page. Be certain to close all tags as needed.

Index.html: File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: H1 and H2 tags: and
Heading tags include the H1, H2, H3, H4, H5, and H6 tags. They are used as headings to draw attention to various areas of a Web page and can be formatted differently than the paragraph or body text in a document. The H1 heading is the largest heading while the H6 heading is the smallest heading.

H1 to H6 tags: []

How-to video: []

media type="youtube" key="mXClPAX4iXM?fs=1" height="385" width="480"

Let’s continue by coding content that will display on the web page within a web browser. First, code a heading for the home page. To do so, code the h 1 opening and closing tags under the body opening tag. Within the two h 1 tags, enter the following heading 1 text: My First Web Site. Next, below the h 1 tags, code two sets of h 2 tags. Be certain to code both the open and close tag pair for each set of h 2 tags. Within the first set of h 2 tags, enter the following heading 2 text: Coding by Hand. Within the second set of h 2 tags, enter the following heading 2 text: Online Tool Integration.

Index.html: File Save
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Initial Preview
Given a number of edits have been made to the index.html file and given there is content in the file to display within a Web browser, let’s preview our coding for the very first time!

How-to video: []

media type="youtube" key="A5XoEfp6O_M?fs=1" height="385" width="480"

It is time to preview our web page within a web browser. First navigate to your desktop, second, double click the WebSite folder. Third, double click the index dot html file to see the web page as it currently stands. At this point, the Web page contains two types of headings, which are the h 1 and h 2 headings. Also, the title of the page is displayed in the browser’s title bar.

Index.html: Paragraph tag:
When including paragraphs of textual information within a Web page, such as a welcome message, about us narrative, biography, or story, it is helpful to place such information within paragraph tags for proper formatting. An interesting aspect of the paragraph tag is that paragraphs are offset from other content in the rendered Web page because the paragraph tag inserts space above and below each paragraph by default.

P tag: []

How-to video: []

media type="youtube" key="B1DlxOTyPlU?fs=1" height="385" width="480"

Now we will add paragraph text to our index dot html Web page by using the paragraph tags that simply take the form of the letter p as in Patricia. The paragraph text will be placed directly under each h 2 heading that was just coded. Therefore, code a set of paragraph begin and end tags under each of the h 2 tags that were just coded. Now paragraph text can be placed between each pair of paragraph tags.

Index.html: Add Paragraph Text for Coding by Hand Paragraph
Now that paragraph tags have been coded, we will place existing text between the paragraph begin and end tags for the sake of adding content to our index.html page, and for the sake of demonstrating the use of the paragraph tags. Find the text for the //Coding by Hand// paragraph below.

Coding by Hand
Upon finishing this workshop I will have created a basic web site. Part of the process involves coding html by hand using various html tags, or instructions, to define the structure of a web page and to facilitate some basic formatting. By coding html by hand, an individual becomes familiar with the foundational elements that are required when designing all web sites, and because html files are simply text files, a plain text editor such as MS Notepad will facilitate hand coding web pages very nicely. Likewise, html stands for hyper text markup language; which uses tags to define web pages. Tags are coded in begin and end pairs and are themselves enclosed in angle brackets, or greater than and less than characters. Significantly, the ending tags also include a forward slash to designate the tag as a closing tag. Content that will appear on a web page when viewed in a web browser, along with special directions for the browser that are not displayed on screen, are placed between the begin and end tag pairs. It is valuable to note that each tag may require different directions or attributes; which are placed within the begin tag. Additionally, nesting of tags is a coding practice that is commonly used when coding html. Simply put, this means that some tags are placed between other begin and end tag pairs. Finally, some tags that will be used in this workshop include: html, head, title, body, h1, h2, p, and a.

How-to video: []

media type="youtube" key="EBmIwhaoDLQ?fs=1" height="385" width="480"

For the sake of simplicity, we will copy existing text to place inside of paragraph begin and end tags to provide content under each h 2 heading. Now that both sets of paragraph tags are in place, copy the text from the workshop web site that is located under the Coding by Hand heading in blue. Place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Finally, make certain that the insertion point is placed between the first paragraph begin and end tag pair. Now paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. Notice that the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Index.html: Add Paragraph Text for Online Tool Integration Paragraph
In the same manner as above, we will place existing text between the paragraph begin and end tags of the //Online Tool Integration// paragraph also. Find the text for the //Online Tool Integration// paragraph below.

Online Tool Integration
Although coding html by hand is an invigorating experience, adding some pizzazz to a Web site via the use of free online multimedia tools is even more exciting! For example, by using various free online multimedia tools, Web designers can create three-dimensional text, animated banners, customized images, and videos to say the least. Also of interest are text-to-speech tools, and text-to-speech combined with animated avatar tools. The output of the former can be added to videos as an audio track and the output of the latter can be used as a guide in online training seminars or workshops. As luck would have it, audio, video, animations, and more can be added to Web sites for additional allure and message broadcast. Finally, for those who have created extensive Microsoft PowerPoint slide show libraries, fear not, as PowerPoint presentations can be added to Web sites as slide presentations or can be converted to video format for use on the Web.

How-to video: []

media type="youtube" key="silPrgHtGn4?fs=1" height="385" width="480"

We will replicate the copy and paste text procedure just performed, but this time we will copy the paragraph below the online tool integration title as found in the workshop web site. First, locate the heading in the workshop web site labeled online tool integration. Second, place the pointer to the immediate left of the beginning of the text that will be copied, hold down the left mouse button while dragging downward to select the entire paragraph, release the left mouse button, and right-click the mouse to select the copy option on the shortcut menu. Third, within the index dot html file, place the insertion point between the second paragraph begin and end tag pair. Fourth and finally, paste the paragraph text directly into the index dot html file by clicking the Edit menu option then click paste. As before, the text scrolls to the right quite a distance, but the entire paragraph has been placed into the file.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Notepad: Word Wrap
When coding long lines of code or adding paragraphs to HTML documents within Notepad, the text spans for the maximum number of characters allowed within Notepad; which requires us to scroll horizontally to view entries that span past the right edge of the Notepad window. However, a feature called word wrap can be invoked that will force text entries to wrap to the next line upon reaching the right edge of the Notepad window.

How-to video: []

media type="youtube" key="cAfL4VR7HWs?fs=1" height="385" width="480"

To more easily view the text copied into the html file, word wrap can be invoked. Simply click the Format menu bar option, then click the Word Wrap option. Upon doing so a check mark will appear to the left of the word wrap option to signify that the feature has been enabled, or toggled to an on position. However, the feature can be disabled, or toggled off, by repeating the same process; which removes the check mark from the left of the word wrap option. With word wrap engaged, scroll through the file to see the results. To see more of the file at once, the font size will be reduced by clicking the Format menu bar option, then click Font and make the appropriate selections. Again, scrolling through the file will show the contents but more text will be displayed at one time. The font size will now be restored to its original size for the workshop and word wrap will be disengaged.

Index.html: Browser Preview: Reload to display Code by Hand and Online Tool Integration Paragraphs
Let’s take a moment to view in a Web browser the appearance of the recently added paragraphs.

How-to video: []

media type="youtube" key="OXp7fY0NTdE?fs=1" height="385" width="480"

With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser.

= Navigation Links = Now that a basic web page with content has been created, the index.html file can be used to expand the Web page into a Web site containing multiple Web pages. That is, two new Web pages will be cloned from the index.html page. They include a **media.html** page and a **references.html** page. However, prior to doing so, a set of navigation links that will allow us to travel from one page in the Web site to the next should first be coded.

Index.html: Media Page Navigation Link via the Anchor tag: 
To create navigation links, we will use the anchor tag, which is simply the letter “a” and is followed by the term “href” along with an equals sign and attributes describing to the browser what file to use. Interestingly, the href and attributes are placed within the anchor’s opening tag. A closing anchor tag is also coded. However, link display text, or verbiage for the link that displays in the browser, must be coded between the anchor open and close tags. To complete this task, a single link will be coded first; which will then be replicated to accommodate the remaining page. Once the navigation links have been coded for each html file in the Web site, the index dot html file can be cloned.

Also, as navigation links are often found at the top of web pages, the navigation links for our Web site project will be coded directly under the body tag in the index dot html file. Code the anchor tag and include the filename within quotes. Also include the text that will be displayed as the link within the rendered web page. Note that for any web page in our web site, a navigation link to itself can be excluded as including a self-referencing link would simply result in the browser reloading the web page being viewed.

Anchor tag: []

How-to video: []

media type="youtube" key="SLv8hpegk-E?fs=1" height="385" width="480"

To begin, code a navigation link to the **media dot html** file. First, directly under the body tag, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding including the name of the html file placed within double quotes. In this case, code the file name as **media dot html**. Although the **media dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **Media** with a capital M as in Mary. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **media dot html** file has been created.

Index.html: References Page Navigation Link
The process above will now be replicated for the references.html page.

How-to video: []

media type="youtube" key="1SMtvJszTeo?fs=1" height="385" width="480"

The references link pointing to the **references dot html** file will now be coded using the same procedure as before. First, code a pair of anchor begin and end tags directly under the first anchor tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding the name of the html file placed within double quotes. In this case, code the file name as **references dot html**. Although the **references dot html** file has not yet been created, a link to it can be coded. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a browser. In this case, simply code the word **References** with a capital R as in Robert. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket. Once completed, the link can be used once the **references dot html** file has been created.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview
Having coded within the index.html file the navigation links to the media.html and references.html files, take a moment to preview the results in your Web browser.

How-to video: []

media type="youtube" key="jWq1qriI0jI?fs=1" height="385" width="480"

With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that the links appear at the top of the index dot html page for the media and references pages. If one of the links is clicked, an error will display on screen. However, that situation will be remedied next.

Index.html: Link Separator: Vertical Bar / Pipe
While the navigation links in our index.html file are acceptable as they are currently coded, a common technique used in Web design includes separating navigation links using a vertical bar, or pipe character, with a space placed on either side of the pipe. The pipe character can be typed by holding the shift key down and pressing the pipe key; which usually resides above the Enter key on most computer keyboards and shares its key with the forward slash character. Using spacing and the pipe character helps delineate multiple navigation links from each other.

How-to video: []

media type="youtube" key="C86WvfHoD6M?fs=1" height="385" width="480"

To code the pipe character between the media and references navigation links, place the insertion point after the media dot html ending anchor tag. Next, press the space bar to enter a blank space that will also appear between the two navigation links. Now, while holding the shift key down on the keyboard, press the pipe key one time. Continuing, press the space bar to enter a blank space after the pipe. In sum, the following characters should have been entered in this order. Space, pipe, space.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview: Pipe
Now that the pipe character and applicable spaces have been applied to the navigation links in the index.html file, let’s preview the result in a Web browser.

How-to video: []

media type="youtube" key="0g_yQFusbTw?fs=1" height="385" width="480"

With the index dot html web page loaded in a web browser, click on the reload button to load the most recent editing that has been made to the web page and view the content within the browser. Note that between the navigation links appears a space, pipe, and space. With the pipe and spaces in place, the navigation links are clearly separated. The technique is even more dramatic when additional navigation links are needed.

= Create the Media and References Web Pages as Clones of Index.html = As noted earlier in the workshop, the index.html file will be cloned to create the media.html and references.html Web pages. To clone the index.html, use Notepad’s Save As function.

Media.html: Create as a Clone of Index.html
Clone the media.html file from the index.html file. The contents of media.html file will be identical to the contents of index.html file. However, that matter will be addressed shortly.

How-to video: []

media type="youtube" key="p4-_mqDFrEw?fs=1" height="385" width="480"

To create the **media dot html** file as a clone of the **index dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save As option on the File menu. The Save As dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save As dialog box. Third, change the File name from **index dot html** to **media dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **media dot html** file name.

References.html: Create as a Clone of Media.html
Next clone the references.html file from the media.html file. As the media.html file is a clone of the index.html file so, too, will be the references.html file a clone of the index.html file.

How-to video: []

media type="youtube" key="A0URxxKERMo?fs=1" height="385" width="480"

To create the **references dot html** file as a clone of the **media dot html** file, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the Save As option on the File menu. The Save As dialog box now appears on screen. Ensure that the WebSite project folder is open within the Save As dialog box. Third, change the File name from **media dot html** to **references dot html** in the File name text box. Fourth, click the Save button. Fifth and finally, inspect Note pad’s title bar at the top of the window to ensure that it reflects the **references dot html** file name.

= Edit the References.html File = Now the references.html and media.html files will be edited to reflect their uniqueness as separate web pages in the project Web site. Namely, the titles, heading one and heading two headings, navigation links, and the paragraph text will be edited.

References.html: Edit the Title and Include the Index Navigation Link
Edit the references.html page per the following instructions.
 * Change the title to: My References Page
 * Change the references.html link to: index.html
 * Change the references display text to: Index

How-to video: []

media type="youtube" key="TXtg2QGzO-E?fs=1" height="385" width="480"

As the References file is already loaded in Note pad, changes will be made to that file first. To begin, change the text between the title tags to the words: My References Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page we are editing. That is, rather than including a self referencing navigation link to the references dot html file, replace the word references with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from References to Index.

References.html: Edit the H1 and H2 tags; Delete the P tag, and Paragraphs
Continue editing the references.html file by making the following changes.
 * Change the H1 text to: Useful Online References
 * Delete both paragraphs and both sets of paragraph open and close tags

How-to video: []

media type="youtube" key="zk5Tm_wynzM?fs=1" height="385" width="480"

Continuing with edits to the references dot html file, replace the h 1, or heading one text with the words: Useful Online References. Be certain to capitalize the first letter of each word. Next, as references for web sites related to coding by hand and online tool integration will be included within the references dot html file, the h 2, or heading two display text will remain the same for both instances of heading 2 code. Finally, considering the two paragraphs in the references dot html file, simply delete both paragraphs and the paragraph tags entirely. It may be helpful to toggle the word wrap function to the enabled state to more easily view both paragraphs entirely. Simply select the paragraph tags and the text in the paragraphs, and press the delete key on the keyboard to remove the paragraphs and paragraph tags from the file.

References.html: Save File
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Browser Preview
Take a moment to view in a browser the changes made to the references.html file.

How-to video: []

media type="youtube" key="3aIa89DDjDA?fs=1" height="385" width="480"

Now that the references dot html file has been created and modified, simply click the References link at the top of the index dot html file that is currently shown in the browser. Notice that the navigation links at the top of the References page reflect the Media page and now the Index page. Clicking on either navigation link now displays a Web page in the Web browser, but note that the index dot html file and the media dot html file are the same because the media dot html file has not yet been edited as it still remains a clone of the index dot html file.

= Edit the Media.html File = The final step of the initial coding by hand phase involves editing the media.html file.

Media.html: Open Existing file using Notepad
To make the necessary changes to the media.html file, open the file in Notepad.

How-to video: []

media type="youtube" key="L8OcLtBXyDE?fs=1" height="385" width="480"

2 open the media dot html file from within Note pad, click the File option on the menu bar, then click Open on the File menu. The Open dialog box is now displayed on screen. Navigate to your WebSite project folder and open that folder if it is not already opened within the Open dialog box. As shown on screen, the Open dialog box may display an empty WebSite folder. If this is the case, note that the file type list box is automatically set to display text files only as Note pad is a plain text editor. However, open the file type list box next to the File name text entry box by clicking within the file type list box and select the All Files option. The three web page files should now appear in the right side pane of the Open dialog box. Simply double click the media dot html file to open that file.

Media.html: Edit the Title and Include the Index Navigation Link
Edit the media.html page per the following instructions.
 * Change the title to: My Media Page
 * Change the media.html link to: index.html
 * Change the media display text to: Index

How-to video: []

media type="youtube" key="BAMJq0eUAVo?fs=1" height="385" width="480"

As the Media file is now loaded in Note pad, the file will be edited. To begin, change the text between the title tags to the words: My Media Page. Be certain to avoid deleting any part of the title tags. Only replace the text between them. Next, modify the navigation link that is of the same name as the page being edited. That is, rather than including a self referencing navigation link to the media dot html file, replace the word media with the word index as a link to the index dot html file must be created. To finish the navigation link modification, change the link display text from Media to Index.

Media.html: Edit the H1 tag; Delete the H2 and Paragraphs and P tags
Continue editing the media.html file by making the following changes.
 * Change the H1 text to: Media Created with Free Online Tools
 * Delete the remaining H2, paragraphs, and P tags

How-to video: []

media type="youtube" key="-NH8jOi6f24?fs=1" height="385" width="480"

Continuing with the editing needed for the media dot html file, replace the h 1, or heading one text with the words: Media Created with Free Online Tools. Be certain to capitalize the first letter of each word for the exception of the word with. The media that will be created in the second portion of the workshop will be included within this Web page, therefore, the remaining content down through but excluding the body ending tag can be deleted. That is, select the text in the file beginning with the first heading two tag down through and including the last paragraph ending tag. After the material has been selected, press the delete key on the keyboard. Once finished, the heading 1 line should be followed by the body ending tag as shown here.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Browser Preview
With the media.html file edited per the workshop instructions, take a moment to preview the results in a browser.

How-to video: []

media type="youtube" key="_Yem2WtN2hU?fs=1" height="385" width="480"

Now that the media dot html file has been created and modified, click the Media navigation link to refresh the Media dot html file. The content of the media page simply contains the navigation links and the h 1 heading. Next, clicking on either navigation link will now display unique content for each Web page as each of the three Web pages in the Web site have been edited to reflect individual Web page content.

= Free Online Multimedia Tools = Now that we have coded three separate Web pages that link together to form a Web site, we will focus our attention on using free online multimedia tools to enhance our Web site. While we will need to add some additional code to our Web site to include the media within our Web site, let’s first have some fun with free online multimedia tools! We will learn to create multimedia output using the following Web sites:
 * 3-D Text Maker: 3-D Text Generator and Animator
 * Animation Online: Animated Banner Generator
 * Pixlr: Image Editor

= 3-D Text Maker = The first tool that will be utilized in this workshop is the 3-D Text Maker tool that not only creates three dimensional text but also provides options for animation. The 3-D Text Maker Web site includes five sections to consider when designing three dimensional text. Briefly, they are: Select a Font, Select a Color, Set Your Dimensions, Set Other Variables, and Enter Text. The sections are essentially self explanatory aside from the Set Other Variables section wherein various options for establishing animation and three dimensional effects are presented. To create three dimensional text using the 3-D Text Maker tool, open the 3-D Text Maker home page (as noted below) within your browser, and consider the following videos.

3-D Text Maker Home Page: []

3-D Text Maker: Font and Colors
The first steps involved in creating three-dimensional text with 3-D Text Maker include selecting a font and colors.

How-to video: []

media type="youtube" key="jQw6sYrNE34?fs=1" height="385" width="480"

To begin designing three dimensional text, first select a font from the available types under Step 1. Each font group contains a number of available fonts. In this example, select Lithograph font within the Sans-Serif group. Note that a preview of the font appears in the window just below the available font option groups. Next, beneath the Step 2 heading select a color for the text by clicking on a color in the palette provided. A lighter color works best as the shadow color will be derived from a darker shade of the color selected. The preview color square shows the color selected if using the palette or created if using the R G B color code options. Continuing to Step 3, select a size for the 3 D text. While the dimensions of the text as a banner can be formatted to a variety of dimensions, simply use the default setting where the size is not constrained.

3-D Text Maker: Other Variables & Text Entry
The next steps involved in creating three-dimensional text with 3-D Text Maker include setting various options and entering the text that is to be displayed in three dimensions.

How-to video: []

media type="youtube" key="pj1A4LOb5Co?fs=1" height="385" width="480"

The options available beneath the Step 4 heading Set Other Variables, relate to miscellaneous settings. To begin, set the Effect option to Stationary. Next, change the Depth option to 5. Now, adjust the Tilt Forward option to 10. Now, change the Frames option to 30 for a smooth animation. Considering the Looping option, use the default option of Run Forever to continuously loop the animation. Finally, enter the text beneath the Step 5 heading Enter Text. Enter into the text input box the following text. 3D Text is Fun, exclamation point. Once the text has been entered, click the Make 3 D Text button to generate the text, and view the results at the top of the page.

3-D Text Maker: Stationary Text Preview
With the initial design parameters established, preview the results within a browser.

How-to video: []

media type="youtube" key="FaSSFg8Bytc?fs=1" height="385" width="480"

The stationary three dimensional text is displayed. However, let’s try some animation techniques.

3-D Text Maker: Slide Left Effect
To add a bit more appeal to the three-dimensional text, an animation effect will be applied.

How-to video: []

media type="youtube" key="KS0fdhQNvyw?fs=1" height="385" width="480"

Navigate to the Step 4 heading Set Other Variables and set the Effect option to Slide Left. To view the results of the change, the text must be generated again by clicking the Make 3 D Text button at the bottom of the interface. Click the Make 3 D Text button and view the results at the top of the interface.

3-D Text Maker: Slide Left Effect Preview
Preview the animation effect.

How-to video: []

media type="youtube" key="rm8u3xOjk2g?fs=1" height="385" width="480"

The animated three dimensional text is displayed per the slide left effect.

3-D Text Maker: Swing Single Effect
Try an additional animation effect for fun!

How-to video: []

media type="youtube" key="K7DKFwDTbxA?fs=1" height="385" width="480"

As a final modification to the 3 D text, change the Effect option under the Step 4 heading Set Other Variables to Swing Single and click the Make 3 D Text button at the bottom of the interface to generate the 3 D text again. View the result at the top of the interface.

3-D Text Maker: Swing Single Preview
Preview the animation effect.

How-to video: []

media type="youtube" key="hEULuGJLy3g?fs=1" height="385" width="480"

The animated three dimensional text is displayed per the swing single effect.

3-D Text Maker: Save the Animated GIF File
To complete the design of the three-dimensional text using the 3-D Text Maker Web site, the three-dimensional text will be saved as an animated gif file.

How-to video: []

media type="youtube" key="di5iYLnE9pY?fs=1" height="385" width="480"

As the final step in generating 3 dimensional text, the result must be saved to the WebSite project folder on your machine. The file is saved as an animated gif file and will display as an animation on a Web page. To save the file to the WebSite project folder, place the pointer over the image and right click the mouse. Next, click on the Save Image As option. Now, navigate to your WebSite folder. Finally, click the Save button. The image is now ready to be incorporated into the media dot html page.

= Animation Online =

Animation Online: Create an Account
As a preface to using the Animation Online Web site, workshop participants will need to create a free account by clicking the //Sign In// tab at the top of the Animation Online home page. As prompted by the //Sign In// pop-up, click the //Join// button to the right of the //Not yet a member? It’s Free// label. After doing so, simply enter an email address and a password to gain full access to the Animation Online Web site. 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.

Animation Online: Banner Rationale
When creating Web sites it is often handy to include a banner to display at the top of a particular Web page, or elsewhere within a page, to draw attention to a particular area within the page. What’s more, many banners can be animated to lure the eye to a particular area or message. In this example we will create an animated banner using the Animation Online Free Animated Banner Maker. To create an animated banner, open the Animation Online home page (as noted below) within your browser, and consider the following videos.

Animation Online Home Page: []

Once the page has loaded in your browser, you will find a preview of the animated banner at the top of the Web page. Below the preview banner are found various input fields and options that allow for banner customization. Follow the video below to design a custom animated banner for your first Web site. Options to set are:
 * Background Color: Darker Blue
 * Loop Animation Checkbox: Checked
 * Loop Forever: Clicked
 * Banner Link: [|http://www.animationonline.com]
 * New Window on Click: Checked
 * First Text Input Box: My First Banner!
 * Second Text Input Box: Animation Online; modify the color to a light color, such as lime green
 * Third Text Input Box: [|www.animationonline.com]; modify the color to a light color, such as pink

Upon loading the animation online web page, the interface is presented. The very top of the interface provides command buttons underneath which the animated banner preview is found. The animated banner contains three areas of text that can be customized by modifying the text contained in the bottom three text boxes on the interface. However, those adjustments will be made in a moment.

Animation Online: Initial Adjustments to the Animation Online Interface
Begin designing a custom banner by making some initial adjustments to the Animation Online interface.

How-to video: []

media type="youtube" key="5tXM-6Kj2HQ?fs=1" height="385" width="480"

To design an animated banner for the workshop project, locate the background label and color picker. Set the background color to dark blue. Also, the loop animation check box can be checked to enable the loop forever and loop count options. Check the loop forever option to repeat the animation without end. Next, locate the banner link text box and enter http colon slash slash w w w dot animation online dot com. Leave the new window on click check box checked. By doing so, when the banner is clicked the animation online Web page will load in a separate browser window to avoid navigating away from the project Web site. Now modifications will be made to the banner text. In the first text input box enter my first banner. Next, in the second text input box enter Animation Online. Finally, in the third text input box enter w w w dot animation online dot com.

Animation Online: Color Adjustments
Continue customizing the Animation Online banner by making color adjustments.

How-to video: []

media type="youtube" key="aID_1PtibyQ?fs=1" height="385" width="480"

Now that the banner text has been entered into the interface, adjustment to the color of the last two entries will be made. First, modify the color of the animation online text so that the text is shaded a lime green color. To do so, simply click on the box immediately to the right of the second text input box to adjust the color. Select a color to suit your preferences, in this case, lime green, and view the result in the animated banner preview at the top of the screen. Perform the same task for the third text input box by changing the color of that text to a pink color and again view the result in the animated banner preview at the top of the screen.

Animation Online: Font Adjustments
Continue customizing the Animation Online banner by making font adjustments.

How-to video: []

media type="youtube" key="lREYsUth9qs?fs=1" height="385" width="480"

As a final adjustment to the banner, modify the font and font size of the animation online text. To do so, click the format text button to the right of the animation online and color box for that line. Once the format text pop up appears, use the font list box to select the Arial font. Also, use the slider to adjust the font size to twenty or simply type the number twenty into the text input box to the right of the font list box and press enter on the keyboard. Once finished, click the o k button and review the result in the animated banner preview at the top of the screen.

Animation Online: Sign In, Save, and Publish the Banner / Generate the Code
Now that the Animation Online banner has been designed to the specifications set forth in the workshop, it is time to Sign In, Save, and Publish the banner. Publishing the banner essentially means to generate the code to run the browser within the Web site. The code will ultimately be placed into the media.html Web page.

How-to video: []

media type="youtube" key="wX_gppKQTfE?fs=1" height="385" width="480"

To complete the editing portion of the animated banner, the user must be signed into the animation online interface in order to save and publish the banner created. To sign in, simply click the sign in button at the top of the interface. Next, supply an email address and password, then click the sign in button. Now, click the save button so that the animated banner can be retrieved for future editing if needed. Supply a name for the animated banner, such as My First Banner, in the save pop up window and click o k to save the banner. Now it is time to generate the code that will display the animated banner within a Web page, or within the media dot html web page of the project web site to be precise. To do so, click the publish button at the top of the interface. The publish pop up window appears and contains the code needed to display the animated banner in a web page. Click the copy code button to select and copy the code automatically, then click the ok button. Now that the code to display the banner has been copied to the Windows clipboard, the code needs to be saved. For now, the code will be saved to a new text file using Note Pad. Load Note Pad if it is not already loaded, or locate an instance of Note Pad that is already loaded. If using an instance of Note Pad that is already loaded, simply use the File menu option, then click the New option.

Animation Online: Save the Banner Code to Notepad
Prior to including the Animation Online banner in the media.html Web page, the code generated to show the banner in a Web page must be saved for the time being. We will therefore save the banner code in a new text file using Notepad.

How-to video: []

media type="youtube" key="kU3Eoo6gFH0?fs=1" height="385" width="480"

Load an empty instance of Note Pad and paste the contents of the Windows clipboard into Note Pad using the Ed it menu option, then click paste. Next, use the File menu option and click Save. Navigate to your WebSite project folder and provide a name for the new text file, such as banner code dot txt. Finally, click the Save button. The text file simply serves as a container to hold the banner code for the time being and will be utilized later in the workshop.

= Pixlr =

Pixlr: Online Image Editor Rationale
As photo and image editing tasks are becoming more prevalent in Web design, gaining familiarity with image editors is important to many Web designers. To assist anyone with image editing tasks is Pixlr; which is a free online image editor. As part of this module workshop participants will create a basic image using Pixlr and some of the tools provided within the Pixlr interface.

Pixlr: Tutorials
While a short period of time will be spent investigating Pixlr overall, various online tutorials are available for Pixlr and are found at the link below.

Pixlr Tutorials: []

Of interest, however, is the following link that introduces the Pixlr interface. Take a few moments to view the video that introduces the Pixlr interface prior to proceeding.

[]

Pixlr: Rationale: Create an Image using the Transparent PNG Format
We will create a geometric image in Pixlr, add text, and save the image to the WebSite folder on our computer. We will then code an image link in the media.html file to display the image. We will create a png file to utilize the transparency feature of that image format. As most images are not square in shape, using the transparency feature of the png image format allows us to simulate a seamless integration of an image with irregularly shaped borders onto a Web page. The transparency feature makes transparent any area of the image that has not been modified with a color. Thus, for areas surrounding the image that are not edited, those areas are treated as transparent and the background of the Web page will show through those areas, thus creating the illusion of a seamless integration of an irregularly shaped object into a Web page.

To begin designing the image for the Web site project, open the Pixlr home page (as noted below) within your browser, and consider the following videos.

Pixlr Home Page: []

Pixlr: Create an Image
As a first step in creating an image, provide a name for the image, set the image size, and specify the image transparency option.

How-to video: []

media type="youtube" key="GjInGGfcOu0?fs=1" height="385" width="480"

With the pixlr home page loaded in a browser, click on the text shaded in blue that reads Open Image Editor. Doing so loads the pixlr editor within the browser. At this point a new image can be made, or an image can be opened from your computer, from an online resource, or from an image library. Click the Create a New Image to design a new image. The New Image dialog box appears with options that must be considered. First, supply a name for the image, such as p i x l r i m a g e. Second, expand the Presets drop down list to see the options for image sizes. Select the 640 by 480 option. The Width and Height drop down lists are automatically set accordingly. Third, check the Transparent check box to signify that the new image will use a transparent background. Finally, click the OK button to create the new image for editing.

Pixlr: Select Yellow Background / Fill Color
Prior to drawing objects on the blank canvas, a background or fill color for objects must be specified.

How-to video: []

media type="youtube" key="cHOSLkTH1ZE?fs=1" height="385" width="480"

Now that the new image and blank canvas are displayed, navigate to the bottom of the Tools pane and click the white box that signifies the fill color for objects that will be placed onto the canvas. The Color Picker dialog box now appears. Point to the vertical color bar that looks like a rainbow and click the yellow area within the color bar. The color gradient box to the left of the color bar shows a spectrum of color choices and intensities for the color selected. Click within the color gradient box toward the upper right of the box to select a saturated and intense yellow color. When satisfied with the selection, click the OK button. Notice that the background fill color in the Tools pane is now set to the yellow color that was just selected.

Pixlr: Draw Oval
With the appropriate fill color selected, a large oval is drawn on the blank canvas.

How-to video: []

media type="youtube" key="jh6PkYBkVf4?fs=1" height="385" width="480"

Now that the background fill color has been set, click the Drawing Tool on the Tools pane. Now, move the pointer to the top of the screen within the tool specific options bar and select the Ellipse tool. Continue by placing the pointer in the upper left region of the blank canvas, but not at the very upper left. Hold down the left mouse button and drag toward the lower right region of the blank canvas and release the left mouse button. A yellow oval has now been placed onto the drawing canvas. The yellow oval will serve as the background of our design.

Pixlr: Draw Multiple Objects
To continue with the design, the background color selection technique will be repeated for a number of colors and additional shapes will be added to the canvas in a manner that overlaps the edge of the yellow oval.

How-to video: []

media type="youtube" key="QPbMm15rFLM?fs=1" height="385" width="480"

Continuing, select an orange background fill color using the Set Background Color on the Tools pane. Select a bright orange color using the color picker and draw a number of ovals around the large yellow oval. Overlapping is perfectly fine and consistently sized ovals need not be created. Repeat the same process with other colors, such as blue and magenta.

Pixlr: Pinch Tool
Now the pinch tool is used to distort the colored objects surrounding the larger yellow block. Have some fun experimenting with the pinch tool!

How-to video: []

media type="youtube" key="IryjBhgL7I0?fs=1" height="385" width="480"

To create a more customized look for the image, and to somewhat obscure the edges of the image, the pinch and bloat tools can be used for some entertaining results. Navigate to the Pinch tool on the Tools pane and click the tool. Next, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to pinch the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the center of the circle to approximate the pinch effect. Clicking multiple times in a single location results in a more dramatic effect.

Pixlr: Bloat Tool
In contrast to the pinch tool used above, the bloat tool is used to distort the colored objects surrounding the larger yellow block in a different manner. Have some fun experimenting with the bloat tool!

How-to video: []

media type="youtube" key="SVbx4oso9iE?fs=1" height="385" width="480"

To distort the border in a different manner, navigate to the Bloat tool on the Tools pane next to the Pinch tool, and click the Bloat tool. As before, click in various locations within the colored border created on the yellow oval. There is no specific technique to utilize in this example, rather, simply click where you would want to bloat the image to see the desired effect. Note that the pointer becomes a circle, and all colors within the circle are drawn toward the outside of the circle from the central point to approximate the bloat effect. Clicking multiple times in a single location results in a more dramatic effect.

Pixlr: Text Tool
As a final editing task, text will be added to the image as a final touch.

How-to video: []

media type="youtube" key="N-2jJFXpIJY?fs=1" height="385" width="480"

As a final image editing technique, text will be added to the image. Navigate to the Type tool on the Tools pane and click the tool. The pointer changes to the text entry pointer. Move the pointer to the left of the image but within the yellow area and click the left mouse button. The Text input box appears into which text can be entered and formatted. Type the following message into the Text input box: Pixlr is great exclamation point. Once finished typing, click the Style drop down list and select the Bold option. Next, change the color of the text by clicking on the box beneath the label that reads Color. Within the Color Picker window that appears, select a color, perhaps purple, within the vertical color bar, adjust the color choice using the gradient box if needed, and click OK. Now position the text toward the middle of the image by pointing to the text, holding down the left mouse button, and dragging the mouse and text to the desired location. The Text input box may need to be moved by dragging the top border of the box while holding down the left mouse button. Once satisfied with the location of the text within the image, click the OK button on the Text input box to view the text within the image.

Pixlr: Save Image
Finally, it is important to save our work to our WebSite folder on our own computers. The technique is very easily facilitated from within the Pixlr interface. See the video below for details.

How-to video: []

media type="youtube" key="qBfuI6rFE0w?fs=1" height="385" width="480"

Before finishing the Pixlr editing session, the image must be saved to the WebSite folder on your computer. To do so, navigate to the File menu on the menu bar at the top of the screen. Click the Save option on the File menu. The Save Image window appears and contains some basic options to consider. First, the image can be saved to your computer using the My Computer tab, or the image can be saved online using two other options. Use the My Computer option. Second, the Name of the file can be adjusted if needed, but there are no changes necessary in this example. Third, the image Format can be specified. Because the image utilizes a transparent background, open the Format drop down and click on the PNG Transparent Full Quality option to take advantage of the transparency option of the PNG image format. Fourth and finally, click the OK button. The Save window now appears. Navigate to your WebSite project folder and click the Save button to save the file to your computer.

= Incorporate Online Tool Output into the Media.html File = Now that the online tools have been used to generate useful output for use within a Web site, the saved output will now be incorporated into the media.html file.

Open Media.html in Notepad
How-to video: []

media type="youtube" key="cLe17CKVKig?fs=1" height="385" width="480"

To begin, the media dot html file must be opened within note pad. Navigate to your desktop and locate the website project folder. Once located, double click on the website folder to see the folder contents. Click on the Type column to group like file types to more quickly locate a specific file. The website folder should contain 6 total files consisting of 3 html files, a gif image, a png image, and a text file. Now, locate and right click on the media dot html file and hover over the Open With option on the shortcut menu. Next, move the mouse pointer to the secondary shortcut menu and click on Note pad. The media dot html file should now appear within Note pad on screen.

Incorporate 3-D Text Maker Output: Image tag:
The three dimensional text from 3-D Text Maker will be incorporated into the media dot html file first. As the output from 3-D Text Maker takes the form of a gif image, an image tag, or img is used. Note that the image tag does not require a separate end tag but is simply closed with a forward slash and closing angle bracket. Also, the source, or src attribute is coded to identify the image name and extension. Optionally, an alt attribute can be coded to specify the mouse-over text for an image.

IMG tag: []

How-to video: []

media type="youtube" key="JjkK2Erfo3I?fs=1" height="385" width="480"

To code the image tag, place the insertion point on the line below the h 1 heading line and start by coding the open angle bracket followed by the letters i m g. Now code a space followed by the letters s r c, which is immediately followed by an equals sign. Continuing, code between double quotes the name of the image including the file extension. In this case, the file name is an abbreviation of the text used in the example in conjunction with digits and underscores. In the case of the example, the following text is used: 3 d underscore text underscore is underscore f underscore 07190 dot g i f. Once the filename has been coded between double quotes, code a space followed by the a l t tag and an equals sign. Now, within double quotes, enter mouse over text such as 3 d text. Once entered, finish the image link by coding a space, a forward slash, and a closing angle bracket. The image link should now be complete.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Incorporate Animation Online Output
Now the Animation Online animated banner will be included in the media.html page. As the Animation Online output is essentially code that will run an Adobe Flash animation on a Web page the code generated earlier in the workshop was saved to the bannercode dot txt text file when the animation was generated and published. The contents of the bannercode.txt file will be selected, copied, and pasted into the media.html file.

How-to video: []

media type="youtube" key="ttZO2hRsq5k?fs=1" height="385" width="480"

Now it is time to open the bannercode dot txt file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your WebSite project folder if not already there. Within the WebSite project folder should be found a single text file. Click the bannercode dot txt file to select the file, then click the Open button near the bottom right portion of the open dialog box. At this point the bannercode dot txt file is open on screen. To copy the contents of the file to the Windows clipboard, click the Edit menu option, then click the Select All option on the Edit menu. Now click the Edit menu option and click Copy on the Edit menu. The contents of the bannercode dot txt file are now copied to the Windows clip board.

Continuing, we will paste the contents of the windows clip board into the media dot html file. To do so, open the media dot html file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your WebSite project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the media dot html file and click the Open button at the bottom of the window. The media dot html file should now appear within Note pad on screen.

Finally, position the insertion point under the image source code but above the body closing tag. Enter an extra vertical space or two using the Enter key on the keyboard to provide a bit of work room. Now, with the insertion point in the middle of the open area, click Edit on the menu bar and then click Paste. The content of the bannercode dot txt file is now replicated within the media dot html file. As a final editing task for the bannercode text, locate the very end of the material just pasted and place a closing angle bracket at the very end of the object tag if one is not present. Your experience may be slightly different than the example in this case, however, double check the closing object tag to ensure that the closing angle bracket is present.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Incorporate Pixlr Output: Image tag:
To complete the inclusion of online tool output into our Web site project, the Pixlr image is included next.

IMG tag: []

How-to video: []

media type="youtube" key="QhrKvu_TGSI?fs=1" height="385" width="480"

As the final step in demonstrating the use of online tools in this workshop, the Pixlr image is included within the media dot html file by coding an image tag. To code the image tag, place the insertion point on the line below the object tag and start by coding the open angle bracket followed by the letters i m g. Now code a space followed by the letters s r c, which is immediately followed by an equals sign. Continuing, code between double quotes the name of the image including the file extension. In this case, the file name is p I x l r I m a g e dot p n g. Otherwise, use the name you called the image. Once the file name has been coded between double quotes, code a space followed by the a l t tag and an equals sign. Now, within double quotes, enter mouse over text such as P i x l r space image. Once entered, finish the image link by coding a space, a forward slash, and a closing angle bracket. The image link should now be complete.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Browser Preview
With the media.html file edited per the workshop instructions, take a moment to preview the results in a browser.

How-to video: []

media type="youtube" key="kALJJhq-Ezk?fs=1" height="385" width="480"

Open the media dot html file within your Web browser to view the online tool output on screen. While you should see the animated 3 dimensional text, the animated banner, and the pixlr image within your Web browser, the objects string together but may wrap within your Web browser. In this respect, the objects should be forced to appear on separate lines with space between them. This topic will be addressed shortly.

= Incorporate Web Links into the References.html File = Now that the online tools have been incorporated into the media.html file, we will next code within the references.html file external Web links pointing to the sites used in this multimedia workshop.

Open the References.html file
First, open the references.html file within Notepad.

How-to video: []

media type="youtube" key="hcAC5WxFVSo?fs=1" height="385" width="480"

Now it is time to open the references dot html file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the references dot html file and click the Open button at the bottom of the window. The references dot html file should now appear within Note pad on screen.

References.html: External Web Links for Coding by Hand: Anchor tag: 
To create external Web navigation links, we will use the anchor tag in the same manner it was used to code our navigation links between the Web pages in our Web site. To complete this task, three external Web links will be created in the Coding by Hand section of the references.html Web page.

A tag: []

How-to video: []

media type="youtube" key="rHhgSH7wqPo?hl=en" height="344" width="425"

To begin, directly under the coding by hand level 2 heading, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the first web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot w 3 s c h o o l s dot com forward slash h t m l forward slash**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **w3schools HTML Tutorial**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

To continue, directly under the anchor just coded, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the next web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot w 3 s c h o o l s dot com forward slash t a g s forward slash**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **w3schools HTML Tags**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

For the final external web link in this section, directly under the anchor just coded, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the next web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot w 3 s c h o o l s dot com forward slash c s s forward slash**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **w3schools CSS Tutorial**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

References.html: External Web Links for Online Tool Integration:  tag
In the same manner as above, we will use the anchor tag to code three external Web links for the Online Tool Integration section of the references.html Web page.

Anchor tag: []

How-to video: []

media type="youtube" key="aPgJa1UYyzY?hl=en" height="344" width="425"

To begin, directly under the online tool integration level 2 heading, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the first web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot 3 d t e x t m a k e r dot com forward slash i m a g e underscore e d i t o r dot h t m l**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **3-D Text Maker**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

To continue, directly under the anchor just coded, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the next web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot a n I m a t i o n o n l i n e dot com forward slash**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **Animation Online**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

For the final external web link in this section, directly under the anchor just coded, code a pair of anchor begin and end tags being certain to include the forward slash in the end tag. Second, after the letter AY in the begin tag, code a space followed by the letters h r e f. Third, code an equals sign. Fourth, continue coding within double quotes the address of the next web site. In this case, code the following: **h t t p colon forward slash forward slash w w w dot p i x l r dot com forward slash**. Fifth, code the link display text, or the text that will appear in the rendered web page when viewed in a Web browser. In this case, code the following: **Pixlr**. Place the text immediately to the right of the anchor’s begin tag’s closing angle bracket and before the anchor’s end tag’s opening angle bracket.

References.html: Save File
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Browser Preview
How-to video: []

media type="youtube" key="Lo_Nw7TmAMs?hl=en" height="344" width="425"

With the **references dot html** file edited per the workshop instructions, take a moment to preview the results in a Web browser. Note that the links to the external sites span horizontally on the page and it is difficult to determine where one link ends and another link begins. For this reason, it is important to introduce line breaks within the code in the **references dot html** file and within the **media dot html** file. Line breaks will force con tent onto a new line below prior con tent. Those items will be considered next.

= Additional Tags = While the current Web site is satisfactory as it is currently coded, the links in the references.html file should be separated onto separate lines using the br, or break, tag. Also, a horizontal rule line will be coded via the hr tag to separate the H1 headings from the remainder of the content. The process will be replicated across each page in the Web site in this order: 1. References.html, 2. Media.html, 3. Index.html. In sum, the tags considered in this module include the following:

References.html
Breaks and a horizontal rule line are first added to the references.html file.

== References.html: Break tag: == As the references.html file is currently open within Notepad, the tag will be used to force line breaks between the resource hyperlinks so that each hyperlink appears on a new line within the Web page when it is rendered in a Web browser. The break tag is an empty tag and requires no separate closing tag. Likewise, multiple break tags can be entered successively when additional vertical space is needed within a Web page.

BR tag: []

How-to video: []

media type="youtube" key="zvM-zqDiwx0?hl=en" height="344" width="425"

Within the **references dot html** file, locate the three anchor tags under the **coding by hand** level two heading. A break tag will be inserted between the first and second anchor tags as well as between the second and third anchor tags to force the second and third hyperlinks onto separate lines when rendered in a Web browser. To begin, place the insertion point just before the second anchor tag below the coding by hand level two heading. Next, code the break tag by typing an open angle bracket followed by the letters b r. Now code a space, a forward slash, and a closing angle bracket. Repeat the same technique in front of the third anchor tag below the coding by hand level two heading.

Now, as additional anchor tags are located beneath the online tool integration level two heading, repeat the same technique for the second and third anchor tags beneath that heading. Again, simply code two break tags immediately in front of the second and third anchor tags beneath the online tool integration level two heading.

References.html: Save File
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Horizontal Rule tag:
The horizontal rule tag, or, will now be added to each page within the Web site project. The horizontal rule tag simply includes a horizontal rule line within a Web page that often serves the purpose of separating one section of a Web page from another or adding a bit of emphasis to a heading, navigation area, or the like. In this example, the horizontal rule tag will be placed under the heading one text on all pages. Like the break tag the horizontal rule tag is an empty tag and requires no separate closing tag.

HR tag: []

How-to video: []

media type="youtube" key="jtOcDnoLIdk?hl=en" height="344" width="425"

With the **references dot html** file open in note pad, prepare to code the horizontal rule tag by placing the insertion point on the line below the level 1 heading that reads useful online references. Next, code the horizontal rule tag by typing an open angle bracket followed by the letters h r. Now code a space, a forward slash, and a closing angle bracket. Press the Enter key on the keyboard to insert a blank line for readability if you wish.

References.html: Save File
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: Browser Preview
We will now take a moment to preview the references.html file within a Web browser.

How-to video: []

media type="youtube" key="kTsbaWeKFdw?hl=en" height="344" width="425"

With the **references dot html** file loaded in your Web browser, click the reload button to view the changes just made. With the addition of the break tags to the references dot html file the individual hyperlinks under the level two headings now appear on individual lines each rather than spanning horizontally across the page; which makes the links easier to read. Also, a horizontal rule line now appears under the level one heading to differentiate the heading of the page from the body of the page.

Media.html
We will now add breaks and a horizontal rule line to the media.html file.

Open the Media.html file
The media.html file is first opened within Notepad.

How-to video: []

media type="youtube" key="Utc1PnMcQO4?hl=en" height="344" width="425"

Now it is time to open the **media dot html** file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the media dot html file and click the Open button at the bottom of the window. The media dot html file should now appear within Note pad on screen.

== Media.html: Break tag: == As the media.html file is currently open within Notepad, the break tag will be used to force line breaks between the three dimensional text, banner, and image to ensure that the media objects span vertically within the media.html Web page when rendered in a Web browser. In doing so, we will add additional vertical spacing between the media objects to provide additional separation between them using the break tag.

BR tag: []

How-to video: []

media type="youtube" key="iFzxtJrqq-c?hl=en" height="344" width="425"

Within the **media dot html** file, locate the object tag that is situated between two image tags. In this example, two break tags will be inserted prior to the object tag. To begin, place the insertion point just before the object tag. Next, code a break tag by typing an open angle bracket followed by the letters b r. Now code a space, a forward slash, and a closing angle bracket. To separate the first and second media objects from each other a bit further, code another break tag immediately after the break tag just coded.

Now, locate the second image tag and code two back to back break tags immediately before the second image tag. Doing so will separate the second and third media objects from each other in the same manner as above.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Horizontal Rule tag:
A horizontal rule line will now be added to the media.html file.

HR tag: []

How-to video: []

media type="youtube" key="XXFjP8z94m8?hl=en" height="344" width="425"

With the media dot html file open in note pad, prepare to code the horizontal rule tag by placing the insertion point on the line below the level 1 heading that reads media created with free online tools. If a blank line is needed, simply use the enter key on the keyboard to create one. Next, code the horizontal rule tag by typing an open angle bracket followed by the letters h r. Now code a space, a forward slash, and a closing angle bracket.

Media.html: Save File
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: Browser Preview
We will now take a moment to preview the media.html file within a Web browser.

How-to video: []

media type="youtube" key="mnly2Ws5eu0?hl=en" height="344" width="425"

Within your Web browser, load the media page. With the addition of the break tags to the **media dot html** file the individual multimedia objects now appear on individual lines and are separated by a bit more vertical space than before. Also, a horizontal rule line now appears under the level one heading to differentiate the heading of the page from the body of the page.

Index.html
Breaks and a horizontal rule line will be added to the index.html file.

Open the Index.html file
We will now add a horizontal rule line to the index.html file within Notepad.

How-to video: []

media type="youtube" key="cjhH7fiuYoI?hl=en" height="344" width="425"

Now it is time to open the **index dot html** file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the index dot html file and click the Open button at the bottom of the window. The index dot html file should now appear within Note pad on screen.

Index.html: Horizontal Rule tag:
A horizontal rule line will now be added to the index.html file.

HR tag: []

How-to video: []

media type="youtube" key="R-D1ewIhlCo?hl=en" height="344" width="425"

With the **index dot html** file open in note pad, prepare to code the horizontal rule tag by placing the insertion point on the line below the level 1 heading that reads my first web site. If a blank line is needed, simply use the enter key on the keyboard to create one. Next, code the horizontal rule tag by typing an open angle bracket followed by the letters h r. Now code a space, a forward slash, and a closing angle bracket.

Index.html: Save File
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Index.html: Browser Preview
We will now take a moment to preview the index.html file within a Web browser.

How-to video: []

media type="youtube" key="FEKsvFcNEIw?hl=en" height="344" width="425"

Within your Web browser, load the index page. With the addition of the horizontal rule tag to the index dot html file the level one heading is now differentiated from the body of the page.

= Application of Styles: Format the Web Site using External CSS = As a final task for participants in the guided portion of this Web site building workshop, CSS, or cascading style sheets, will be used to provide custom formatting across all pages of the Web site. CSS is used to format and position HTML elements on Web pages. While CSS can be included directly within each HTML file of a Web site, CSS yields most powerful results when an external file containing CSS formatting markup is simply linked to by every Web page within a Web site. By using external CSS, the look of an entire Web site can be formatted and reformatted simply by modifying the external CSS file rather than modifying each HTML file within a Web site. This type of CSS is called external CSS because the CSS is located externally from the HTML and resides within a file of its own. As examples of how CSS can be used to format Web sites, we can specify color attributes for heading, paragraph, link, and other types of text, colors for backgrounds, boxes, horizontal rule lines, and placement and size of images, and font type, size, bold, italics, underline, and much more. Continue with the workshop below to investigate this exciting Web site formatting technique!

CSS graphic organizer

MyStyleSheet.css: Create the MyStyleSheet.css file in Notepad
A first step in the use of external CSS is the creation of the external CSS file; which takes the form of a simple text file ending with the .css file suffix. We will name the external style sheet MyStyleSheet.css.

How-to video: []

media type="youtube" key="Vln40gHs-2w?hl=en" height="344" width="425"

To create the **MyStyleSheet dot css** using Note pad, first click on the File option on the menu bar at the top of the Note pad window. Second, click on the New option on the File menu. A new instance of Note pad has been readied for use on screen and text can now be entered into the new file.

MyStyleSheet.css: Code CSS for the Body tag
Various properties will be specified by entering explicit values for the Body tag.

BODY Background-Color CSS: []

How-to video: []

media type="youtube" key="PaOn5wSgHr0?hl=en" height="344" width="425"

To begin entering CSS into the **MyStyleSheet dot css** file, first enter the **body** selector to indicate we are applying formatting to the body tag as used in any html documents referring to this external CSS file. Next, code a space and then code the open and close curly brackets. Now, within the curly brackets code the **background** **color** property ensuring that a dash or hyphen is coded between the words background and color. Now code a colon followed by the value for the property, or a color in this case. We will code the background as **lightyellow** which is a single word using the letters **l i g h t y e l l o w**. Finally, code a semicolon after the word **lightyellow**.

MyStyleSheet.css: Code CSS for the H1 tag
Various properties will be specified by entering explicit values for the H1 tag.

H1, H2 Font-Family CSS: []

How-to video: []

media type="youtube" key="0OEfbHDuQxg?hl=en" height="344" width="425"

We will now code formatting for the level 1 and level 2 headings. Directly under the body selector entry code the **h1** selector to indicate we are applying formatting to the h1 tag as used in any html documents referring to this external CSS file. Next, code a space and then code the open and close curly brackets. Now, within the curly brackets code the **font family** property ensuring that a dash or hyphen is coded between the words font and family. Now code a colon followed by the value for font family; which takes three values. Code the first value as **Verdana** followed by a comma and space, then code the second value as **Helvetica** followed by a comma and space, then code the third value as **sans serif** placing a dash between the words sans and serif.

Next, code a semicolon directly after the word serif. We will also code a color for the level 1 heading text. To do so, continue coding a space and the word **color** as the property, followed by a colon and the value **dodgerblue,** or the letters **d o d g e r b l u e**; which is followed by a semicolon. Finally, a background color will be coded for the level 1 heading. To do so, enter a space after the last semicolon followed by the **background color** property but separating the words background and color with a dash or hyphen. Now, enter a colon and a value for the background color property. In this case, enter the color **gold** followed by a semicolon.

MyStyleSheet.css: Code CSS for the H2 tag
Various properties will be specified by entering explicit values for the H2 tag.

H1, H2 Font-Family CSS: []

How-to video: []

media type="youtube" key="QicdhNBnfC0?hl=en" height="344" width="425"

To continue with CSS entries, the **level 2** heading is coded next but will be duplicated from the level 1 heading formatting just entered. To do so, simply select or highlight the level 1 heading formatting and click the Edit menu bar option. Now click the Copy option on the Edit menu to place the highlighted text onto the Windows clipboard. Next, place the insertion point on the line below the level 1 heading. You may need to press the Enter key on the keyboard after the level 1 heading to secure an extra blank line. Now, with the insertion point on the blank line following the level 1 heading, click the Edit menu bar option again, then click the Paste option on the Edit menu. Next, change the h 1 selector to an h 2 selector. Continuing, modify the value of the color property to the value of **purple**. Finally, delete the background color property, value, colon and semicolon to remove background shading from the level 2 heading.

MyStyleSheet.css: Code CSS for the P tag
Various properties will be specified by entering explicit values for the P tag.

P Color CSS: []

How-to video: []

media type="youtube" key="qo1LO-jpLLQ?hl=en" height="344" width="425"

To add additional CSS formatting to our Web site, code paragraph formatting by entering the paragraph selector, or the letter **p**, directly under the last selector coded. Next, enter a space and code the open and close curly brackets. The **color** property is now coded between the curly brackets followed by a colon and a color value. Code the word **dark green**, as one word using the letters **d a r k g r e e n**, as the color value for the color property. Finish the paragraph formatting entry by coding a semi colon. While a **background color** can be coded for paragraph text, we will avoid doing so at this time.

MyStyleSheet.css: Code CSS for the HR tag
Various properties will be specified by entering explicit values for the HR tag.

HR Height and Background CSS: [], [] , []

How-to video: []

media type="youtube" key="8iAvi4bJrNY?hl=en" height="344" width="425"

We will now add formatting to the horizontal rule lines used in our Web site. To do so, code horizontal rule formatting by entering the **horizontal rule** selector, or the letters **h** and **r**, directly under the last selector coded. Next, enter a space and code the open and close curly brackets. The **height** property is now coded between the curly brackets followed by a colon and a value. Code the **height** value as **10 pixels**, or the digits **one** and **zero** followed directly by the letters **p** and **x**. Next, code a semicolon and a space. The color of the horizontal rule is now coded by simply entering the **background** property followed by a colon and a color value. Code the color value as **green**, or the letters **g r e e n**. Finish the horizontal rule line formatting by coding a semi colon.

MyStyleSheet.css: File Save.
Save the MyStyleSheet.css file.

How-to video: []

media type="youtube" key="WXR5WlL2ZPA?hl=en" height="344" width="425"

To preserve the formatting entries coded in our MyStyleSheet.css file, we will save the entries to disk. To do so, click on the File option on the menu bar at the top of the Note pad window. Next, click on the Save option on the File menu; which causes the Save As dialog box to appear on screen. Now, navigate to your WebSite project folder on your desktop. Now a file name must be entered for the css file. Within the file name text entry box enter the following file name **my style sheet dot css**, or the letters **m y s t y l e s h e e t dot css**. Remember that even though the style sheet is a standard text file, the file must end with the file extension dot css. Next, click the save button to finish saving the style sheet to disk. Finally, confirm the name of the file by viewing the title bar in Note pad; which should reflect the **my style sheet dot css** file.

= Link the HTML files to the External Style Sheet = Each Web page within the Web site project will now be linked to the external style sheet. A single link tag is utilized to specify the relationship, file type, and name of the style sheet with the location of the style sheet if applicable. Note that the link tag does not use a separate closing tag. Rather, the link tag itself must be closed using a forward slash and the closing angle bracket.

Index.html: LINK tag:
We will first link the Index.html file to the MyStyleSheet.css file to apply the formatting specified in the external style sheet.

LINK tag: []

How-to video: []

media type="youtube" key="th6jL-f-kzc?hl=en" height="344" width="425"

To prepare to code the link tag in the index dot html file, first open the index dot html file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the index dot html file and click the Open button at the bottom of the window. The index dot html file should now appear within Note pad on screen.

To begin, place the insertion point on a blank line after the title tag. Use the Enter key on the keyboard to create a blank line if needed. Next, code the link tag by coding an opening angle bracket followed by the word link, or l i n k. Continue the link tag by coding a space and the rel attribute, or the letters r e l, followed by an equals sign. Now, within double quotes, code the relationship value of stylesheet, or the letters s t y l e s h e e t, as a single word. Next, code the type attribute by coding a space and the word type, or the letters t y p e, followed by an equals sign. Now, within double quotes, code the type value of text forward slash css, or the letters t e x t forward slash css, as a single string of characters. Now code the final attribute; which is the h ref, or the letters h r e f, followed by an equals sign. Next, code within double quotes the name of the file being referenced. In our example, code **my** **style sheet dot css**. Finally, the link tag must be closed. To do so, code a space, a forward slash, and the closing angle bracket.

Index.html: File Save.
While editing the index.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Media.html: LINK tag:
We will now link the Media.html file to the MyStyleSheet.css file to apply the formatting specified in the external style sheet. The process that was used to link the index.html file to the external style sheet will be replicated here.

LINK tag: []

How-to video: []

media type="youtube" key="Kk-ehhwT82Y?hl=en" height="344" width="425"

To prepare to code the link tag in the media dot html file, first open the media dot html file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the media dot html file and click the Open button at the bottom of the window. The media dot html file should now appear within Note pad on screen.

To begin, place the insertion point on a blank line after the title tag. Use the Enter key on the keyboard to create a blank line if needed. Next, code the link tag by coding an opening angle bracket followed by the word link, or l i n k. Continue the link tag by coding a space and the rel attribute, or the letters r e l, followed by an equals sign. Now, within double quotes, code the relationship value of stylesheet, or the letters s t y l e s h e e t, as a single word. Next, code the type attribute by coding a space and the word type, or the letters t y p e, followed by an equals sign. Now, within double quotes, code the type value of text forward slash css, or the letters t e x t forward slash css, as a single string of characters. Now code the final attribute; which is the h ref, or the letters h r e f, followed by an equals sign. Next, code within double quotes the name of the file being referenced. In our example, code **my** **style sheet dot css**. Finally, the link tag must be closed. To do so, code a space, a forward slash, and the closing angle bracket.

Media.html: File Save.
While editing the media.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

References.html: LINK tag:
We will finally link the References.html file to the MyStyleSheet.css file to apply the formatting specified in the external style sheet. The process that was used to link the index.html file to the external style sheet will be replicated here.

LINK tag: []

How-to video: []

media type="youtube" key="hmVxim4kf28?hl=en" height="344" width="425"

To prepare to code the link tag in the references dot html file, first open the references dot html file by using the File menu within Note pad and clicking Open on the File menu. Navigate to your website project folder if not already there. Now, adjust the file type list box to show all files. Locate and left click on the references dot html file and click the Open button at the bottom of the window. The references dot html file should now appear within Note pad on screen.

To begin, place the insertion point on a blank line after the title tag. Use the Enter key on the keyboard to create a blank line if needed. Next, code the link tag by coding an opening angle bracket followed by the word link, or l i n k. Continue the link tag by coding a space and the rel attribute, or the letters r e l, followed by an equals sign. Now, within double quotes, code the relationship value of stylesheet, or the letters s t y l e s h e e t, as a single word. Next, code the type attribute by coding a space and the word type, or the letters t y p e, followed by an equals sign. Now, within double quotes, code the type value of text forward slash css, or the letters t e x t forward slash css, as a single string of characters. Now code the final attribute; which is the h ref, or the letters h r e f, followed by an equals sign. Next, code within double quotes the name of the file being referenced. In our example, code **my** **style sheet dot css**. Finally, the link tag must be closed. To do so, code a space, a forward slash, and the closing angle bracket.

References.html: File Save.
While editing the references.html file, use Ctrl+S to save the most recent edits. Otherwise, click File on the Menu Bar, then click Save.

Application of Styles: Browser Preview
Now that the MyStyleSheet.css external style sheet has been created and linked to from within each Web page in our Web site, take a moment to view the results within a Web browser.

How-to video: []

media type="youtube" key="egTpTONp5eg?fs=1" height="385" width="480"

To view the results of applying styles to the Web site, open within your preferred Web browser the index dot html Web page. Note that the background of the Web page is now shaded due to the application of css to the body tag, the level 1 and 2 headings are formatted differently in terms of the font used and the color applied, the paragraph text is shaded in a color other than black, and the horizontal rule line is thicker and shaded in a color other than black. Now, click the links to the other pages to confirm the formatting has been applied to them likewise. In this regard, the appearance of the entire Web site is uniform and consistent across all pages. Also, the appearance of the entire Web site could be easily modified simply by adjusting the formatting code that resides in the external style sheet.

=// Congratulations! //= Congratulations indeed, for you have now finished coding your first Web site by hand and included multimedia content using free online tools! As a final step in this workshop, you are asked to complete an authentic assessment activity to demonstrate what you have learned while participating in this workshop. There is no need to worry, however, as you can refer to the examples provided in this workshop and the files you have already created as you create an additional Web page for your Web site. Go ahead and have some fun!

= Authentic Assessment Activity = Your final task in this workshop is to code a new Web page and integrate it into your project Web site. You will code an “About Me” Web page that includes various tags presented in this workshop. Also, to integrate the About Me Web page into your project Web site, you will include an additional navigation link in each of the existing Web pages that comprise your Web site, and you will include navigation links in your About Me Web page that link to the other pages in your Web site. For content, you will simply enter a paragraph about your hobbies, interests, family, friends, work, school, or whatever topics you would like to include. An additional paragraph will include your contact information. Should you be concerned about coding personal information within your Web site, simply enter fictitious information. Also, you will select one of the online tools to create a new media object for inclusion within your About Me Web page. While referring to the workshop links, videos, and files created thus far, follow the rubric below for instructions about what to include in your About Me Web page.

AboutMe.html Rubric:
Create an About Me Web page using Notepad and name the file AboutMe.html. Include the following within your AboutMe.html file:
 * 1) All appropriate HTML tags to create a basic Web page shell.
 * 2) A Web page title that reads: About Me.
 * 3) A level 1 heading that reads: Some Personal Information.
 * 4) A level 2 heading that reads: Personal Interests.
 * 5) A level 2 heading that reads: Contact Information.
 * 6) A horizontal rule beneath the level 1 heading.
 * 7) A paragraph placed under the **first** level 2 heading describing your personal interests. Include the text within paragraph tags.
 * 8) Paragraph entries placed under the **second** level 2 heading listing your name, address, email address, and phone number(s) with each entry in this section placed onto separate paragraph tags.
 * 9) Navigation links to the index.html, references.html, and media.html Web pages within your project.
 * 10) A link to the MyStyleSheet.css external style sheet.
 * 11) Use the break tag at your discretion to span content vertically onto separate lines.
 * 12) Select one of the free online tools presented in the workshop and create a new multimedia object, save the object or code to your WebSite project folder, and incorporate the multimedia object into your About Me Web page using appropriate methods depending on the online tool selected.

SS.

Congratulations indeed, for you have now finished coding your first Web site by hand and included multimedia content using free online tools! As a final step in this workshop, you are asked to complete an authentic assessment activity to demonstrate what you have learned while participating in this workshop. There is no need to worry, however, as you can refer to the examples provided in this workshop and the files you have already created as you create an additional Web page for your Web site. Go ahead and have some fun!
 * || =Congratulations!=
 * || =Congratulations!=

=Authentic Assessment Activity= Your final task in this workshop is to code a new Web page and integrate it into your project Web site. You will code an “About Me” Web page that includes various tags presented in this workshop. Also, to integrate the About Me Web page into your project Web site, you will include an additional navigation link in each of the existing Web pages that comprise your Web site, and you will include navigation links in your About Me Web page that link to the other pages in your Web site. For content, you will simply enter a paragraph about your hobbies, interests, family, friends, work, school, or whatever topics you would like to include. An additional paragraph will include your contact information. Should you be concerned about coding personal information within your Web site, simply enter fictitious information. Also, you will select one of the online tools to create a new media object for inclusion within your About Me Web page. While referring to the workshop links, videos, and files created thus far, follow the rubric below for instructions about what to include in your About Me Web page.

AboutMe.html Rubric:
Create an About Me Web page using Notepad and name the file AboutMe.html. Include the following within your AboutMe.html file:
 * 1) All appropriate HTML tags to create a basic Web page shell.
 * 2) A Web page title that reads: About Me.
 * 3) A level 1 heading that reads: Some Personal Information.
 * 4) A level 2 heading that reads: Personal Interests.
 * 5) A level 2 heading that reads: Contact Information.
 * 6) A horizontal rule beneath the level 1 heading.
 * 7) A paragraph placed under the first level 2 heading describing your personal interests. Include the text within paragraph tags.
 * 8) Paragraph entries placed under the second level 2 heading listing your name, address, email address, and phone number(s) with each entry in this section placed onto separate paragraph tags.
 * 9) Navigation links to the index.html, references.html, and media.html Web pages within your project.
 * 10) A link to the MyStyleSheet.css external style sheet.
 * 11) Use the break tag at your discretion to span content vertically onto separate lines.
 * 12) Select one of the free online tools presented in the workshop and create a new multimedia object, save the object or code to your WebSite project folder, and incorporate the multimedia object into your About Me Web page using appropriate methods depending on the online tool selected. ||   ||