Multimedia+Workshop

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

= =

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

Collaboration Component
Participant collaboration is 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. When working in pairs, workshop participants are encouraged to assist each other as new topics are encountered. Peer discussion of workshop topics may assist workshop participants when making sense of new topics and may offer comfort to those who are technologically averse. None the less, the workshop in intended to be used by those with no Web programming experience. For instances when the workshop is presented live to a group of people in a face-to-face fashion, simply pair yourselves into teams by the manner in which you have populated the room. It is fine to group into a team of three should the count of participants be an odd number. It is recommended that each team member garner experience with programming the Web site components. When not actively programming during the workshop, team members are encouraged to make notes on the materials presented so that those actively coding can benefit from note-taking likewise. For instances when workshop participants engage in the workshop online such that they are not within each others presence, it is recommended that workshop participants utilize an online collaborative workspace such as [|docs.google.com/]. In this case, workshop participants are encouraged to share coding responsibilities by passing the active coding task between team members as each new workshop sub-module is encountered (see below). The use of an online instant messaging or voice application such as Skype (see []) or Windows Live Messenger (see []) can be used to facilitate communications. When collaborating entirely online, each team member is encouraged to take notes on materials as needed and share with the other team member(s) using the online collaborative workspace. Upon completing the multimedia workshop, compress all Web site files to a zip / compressed folder and email the compressed folder to ssnyder158@hotmail.com.

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, Sub-Modules, Steps
The workshop consists of a hierarchy modules that consist of sub-modules that further consist of steps that must be taken in order to complete the sub-modules and modules. The formatting of each type of division header is represented below from highest to lowest level in the workshop hierarchy. = Module = =// Sub-Module //=

Graphic Organizers, How-to Videos, Online Resources: //Try it yourself//, Script Text
Most modules, sub-modules, and steps contain a brief description about the purpose of the step, a graphic organizer (with ** pink ** headings) derived from the Workshop Overview graphic organizers (shown below) that highlights the key topics that will be encountered in the module, sub-module, or step, and a how-to video that demonstrates 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 a given coding technique 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: Handouts
Finally, at various locations in the workshop are located supplemental materials that are either placed into the workshop as embedded images, and may be provided in file format for download files as well. File types included are PDF and Microsoft Word files. Such supplemental materials may be considered **// handouts //** that can be used to assist participants with the topics presented in the workshop. Find below a number of //Graphic Organizers// that provides a graphical / pictorial summary of the key concepts presented as part of a given module or step. Considering the graphic organizers used in this multimedia workshop, note that only key concepts are included in the graphic organizers to guide workshop participants thought the workshop. For example, items such as saving files and reloading the Web browser are excluded as they are repeated throughout the workshop and are not categorized as key concepts. Be certain to utilize the supplementary materials to maximize your time spent in the workshop.

To better understand the flow of the workshop and other topics, consider the following graphic organizers that capture the essence of the workshop in terms of modules, sub-modules, and steps, as well as the HTML tags used in the workshop and more.

**Graphic Organizer: Workshop Overview: Compact View**
Below is a graphic organizer that serves as an overview of the workshop in brief as only the modules are listed in addition to the workshop identifier node. The modules are listed in sequence from top to bottom.

**Graphic Organizer: Workshop Overview: Expanded View and PDF Format**
An expanded view of the entire workshop's key concepts is depicted below and a PDF file has been provided to facilitate printing the graphic organizer. Please note that portions of this graphic organizer are replicated within the various modules, sub-modules, and steps to assist you on your Web site construction journey.



**Graphic Organizer: Workshop Overview: Two-Sided Expanded View** and PDF Format
Additionally, a two-sided workshop graphic organizer is found below in addition to a PDF file of the model. This model may be easier to print in PDF format. In this model, the modules are listed in sequence and should be read starting with the left column moving from top to bottom, then proceeding to the right column moving from top to bottom.

** Graphic Organizer: HTML Tags used in the Multimedia Workshop **
Contained within the graphic organizer below are the HTML tags used in this multimedia workshop. The list of tags contained within the graphic organizer is but a small subset of tags available for coding Web sites. Note that the tag tree spans three levels deep and that each level represents the location in which the tags appear with respect to each other in an HTML file in terms of nesting. The term nesting simply means that some item or object, an HTML tag in this case, is located within or inside of another item or object. This translates to a tag being coded between another tag’s open and close tags. For example, in the following lines of code, the open and close tags are nested between the open and close tags.

…

Continuing with the graphic organizer below, the Level 1 tag is the outermost tag and all other tags are nested between the open and close tags for Level 1. Considering the Level 2 tags, they nest between the Level 1 open and close tags and nest within them additional Level 3 tags between their open and close tags. Do note that Level 3 tags often nest other Level 3 tags between them. Also note that some tags include close tags or are coded as open-close tag pairs, while other tags have no close tag but are closed with the “/” character directly within the close tag.

Note that a PDF file is available below that contains the text of this graphic organizer, and the two graphic organizers in this section.



Another way of viewing the nesting of the three levels of tags is depicted below.

** Graphic Organizer: Web Site Preview **
Find below a simple graphic organizer that shows the finished project Web pages as rendered in a Web browser. Additionally, a PDF file containing the same information is available for printing in hardcopy format.









** Graphic Organizer: Web Site Files **
Find below a graphic organizer that shows the finished project Web site with respect to the files that are created within the WebSite project folder. Additionally, a PDF file containing the same information is available for printing in hardcopy format.





=// 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.

How-to video:

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

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 Slide show:

media type="custom" key="7523015"

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 Slide Show:

media type="custom" key="7523017"

= Prepare the Project Folder = 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: Part 1--The Basics = 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.

** Graphic Organizer **


=// Index.html //= In this sub-module, the Index.html Web page is created and various HTML tags are coded.

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. Note 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.


 * A ** 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"

To 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

Graphic Organizer


=// 3-D Text Maker //= The first free online multimedia 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 //= The second free online multimedia tool used in this workshop is the Animation Online animated banner making tool.

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 //= The third and final free online multimedia tool used in this workshop is the Pixlr online image editor.

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.

= Code by Hand: Part 2--File Editing = Now consider the second code by hand module where workshop participants edit the Media.html and References.html Web pages.

// 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 is now incorporated into the Media.html file.

Open Media.html in Notepad
The Media.html file must first be opened 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.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.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 External 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.


 * A ** 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.

= Code by Hand: Part 3--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.

Graphic Organizer


== 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 //
A horizontal rule line will be added to the Index.html file.

Open the Index.html file
We will now open 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.

= Code by Hand: Part 4--Application of Styles 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!

// MyStyleSheet.css: Create the External Style Sheet //
An external style sheet is created in this sub-module.

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 the Selectors, Properties, and Values //
Now the contents of the CSS file will be coded by entering selectors, properties, and values. The specific HTML tags that appear within the HTML files linking to this external style sheet and that will have CSS formatting coded for them include:

Graphic Organizer
Per the above, the following CSS selectors will be coded within the external style sheet include:

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 **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.


 * 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.

Graphic Organizer


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. If collaborating with others, enter each person's name and email address at a minimum. 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: //
Requirements for the AboutMe.html Web page:
 * 1) Create an About Me Web page using Notepad and name the file AboutMe.html.
 * 2) Code all appropriate HTML tags to create a basic Web page shell.
 * 3) Code a Web page title that reads: My About Me Page.
 * 4) Code a level 1 heading that reads: Some Personal Information.
 * 5) Code a level 2 heading that reads: Personal Interests.
 * 6) Code a level 2 heading that reads: Contact Information.
 * 7) Code a horizontal rule immediately beneath the level 1 heading.
 * 8) Code a paragraph placed under the **first** level 2 heading describing your personal interests. Include the text within paragraph tags.
 * 9) Code a paragraph placed under the **second** level 2 heading listing your name, address, email address, and phone number(s) placed within paragraph tags.
 * 10) Code within the contact information strategically placed break tags to separate the content onto individual lines.
 * 11) Code navigation links to the Index.html, References.html, and Media.html Web pages within your project. Include the pipe character and spacing where appropriate.
 * 12) Code a link to the MyStyleSheet.css external style sheet.
 * 13) Select one of the free online multimedia tools presented in the workshop and create a new multimedia object. Save the multimedia object or code to your WebSite project folder.
 * 14) Incorporate the new multimedia object into your About Me Web page using appropriate methods depending on the online tool selected. Place the new multimedia object below your contact information.
 * 15) Code one or more break tags after your contact information to add extra space between your contact information and the multimedia object.
 * 16) Save the AboutMe.html file to your WebSite project folder on your computer's desktop.
 * 17) Bonus: Update the navigation links in the Index.html, Media.html, and References.html files to include an About Me link to the AboutMe.html file. Include the pipe character and spacing where appropriate.

= Multimedia Workshop Evaluation/Rubric for: //Basic Web Site Construction using Online Tools and by Coding by Hand// = Instructions: You are encouraged to utilize the form below to provide feedback to the workshop creator. To facilitate the population of the form, find below a rich text formatted file whose contents can be edited by most word processing software. Simply place an “x” or other mark in the Yes or No column for each Yes/No question. Should you have comments for the creator, feel free to enter them into the comments column for any question. Once completed, email the form to the workshop creator at: ssnyder158@hotmail.com



=// Thank you for participating in this multimedia workshop! //=

Now that you have completed the multimedia workshop on //Basic Web Site Construction using Online Tools and by Coding by Hand// and have at your disposal a sample Web site created by __**YOU**__, I encourage you to develop additional content, Web pages, and Web sites! Refer to the w3schools.com site for additional information on HTML tags, CSS, and other exciting Web site programming topics and examples. Likewise, search the Web for other Web programming sites that you prefer and find useful, and bookmark those sites for use in your continued Web design adventures. Refer to your bookmarked sites often for new insight about Web site programming and Web design!

Sincere regards,

Shane Snyder.