Basics: HTML Key Elements to Creating a Webpage Web Based Module via Moodle Planning Documents By: Rachelle Gamiao
Submitted to Dr. Curtis P. Ho in partial fulfillment for course requirements for ETEC 649 2006 Spring Semester April 6, 2006
1
Rationale or Need The Information Age has caused a rapid explosion in the appearance of websites. Not only do large corporations have websites, but smaller businesses have developed their own as well to keep up with the competition. Because websites are so commonplace, individuals and families often create them to keep in touch with friends and family near and far. In addition, many students, ranging from elementary through college, are required to create an electronic portfolio. The portfolio would be made available online and consist of projects and assignments completed throughout their schooling. Anyone with access to a web publishing program or WYSIWYGs (What-YouSee-Is-What-You-Get) such as, Microsofts FrontPage, Adobes GoLive, or Macromedias Dreamweaver, can easily produce a variety of websites, ranging from simple to complex. Although anyone can use a web publishing program or WYSIWYG, the importance of creating a webpage should be on acquiring a basic understanding of Hyper Text Markup Language (HTML), which is the language computers use to tell Internet browsers (software that displays webpages, such as Internet Explorer, Safari, FireFox, Mozilla, etc.) what to display. In understanding the HTML coding that drives webpages, individuals can easily detect any display issues when the page is viewed online in an Internet browser. In this sense, individuals become their own publisher and editor and can easily identify and debug a webpages formatting issues. By presenting the information in Moodle, anyone with access to the Internet (and a Moodle account, of course) can easily access the course lessons. The course website
2
can be accessed at anytime and from anywhere, provided that users have access to a computer, the Internet and a Moodle account. Finally, those enrolled in the course have the ability to learn at their own pace, revisit information and course material if necessary, and view the course when the time is convenient for them. Goals and Objectives The primary goal of this mini course is to provide learners with knowledge of basic HTML to create a simple webpage. Although a web publishing wizard or WYSIWYG may be used, for this course, learners will use the information gained from each section and type HTML code as responses to questions posed in quizzes given throughout the course. Images of webpages will be shown, and the learner will type the text and HTML tags that are required to create the webpage. Objective Restated: Given an image of a webpage, the learner will accurately type the required text and HTML tags used to create the webpage. The learner will gain the knowledge and skills necessary to create a webpage. This would include knowledge about HTML formatting as well as the use of HTML tags to manipulate text and objects as they are displayed on a webpage. The learner will not, however, learn about uploading their HTML file to a webserver (host). The learner will gain a better understanding of HTML and how the tags affect the display of a webpage. As the mini course will be created in UHs Educational Technology Moodle site, learners will include any college student enrolled at the University of Hawaii at Manoas with a UH (Moodle) account and access to the Moodle website (http://etec.hawaii.edu/courses/). Furthermore, since it is being created specifically for this course (Spring 2006 ETEC 649), learners will most likely include other students
3
enrolled in this course. Most of these learners are graduate students in the Educational Technology program, and all have a strong interest in online learning, as the course focuses on the development of online courseware. Most, if not all, have also either participated in or taught an online course, and therefore, will be familiar with the layout and functionality of the site. Procedures I will be working alone on this online mini course. Following is additional information required to create this online mini course. Timeline 04/06/06 Submit Planning Documents 04/06/06 Continue gathering data and developing online course instruction Start working on online mini course in Moodle Add course layout (weekly topics, calendar, RSS feed, etc.) 04/13/06 Add activities (assignments, discussions, quizzes, etc.) Update expert review evaluation form (if necessary) 04/20/06 Continue making to revisions online mini course Ensure all links and activities work (check functionality of site) Ask an expert to review the online mini course 04/27/06 Expert Review completed 05/02/06 Make changes to online mini course (per expert review recommendations) Complete preparations for presentation 05/04/06 Present online mini course via Moodle 05/04/06 Submit Instructors Guide
Software & Hardware Requirements Software: Windows Notepad (or other simple text editor freeware) Adobe Photoshop Microsoft Internet Explorer Moodle Course Management System (from UH ETEC site) Hardware: Computer Internet Connection 4
Outside Resources Requirements N/A
Budget N/A
Planning Tools Content Outline 1) What is HTML? a) Definition of HTML b) Purpose/Function of HTML 2) Creating an HTML file a) Simple Text Editor vs. Web Publishing wizard or WYSIWYG editor b) Saving an HTML file 3) HTML Tags a) Structure of HTML tags i) Symbols used ii) Tag or command names iii) Attributes or variables b) Single vs. Paired tags c) Writing HTML Tags (order, arrangement) 4) Behind the Scenes HTML Tags a) Purpose of behind the scenes tags b) html Tag c) head Tag d) title Tag 5) Visible Text a) body Tag b) font Tag c) paragraph Tag d) line break Tag e) center Tag f) bold Tag g) italics Tag
5
6) Referencing Files (File Structure/Directory) a) Saving HTML files b) Saving other files associated with the website c) Structuring the files/directory where the files are saved 7) Links a) link Tag i) website link Tag ii) e-mail link Tag b) Absolute vs. relative reference 8) Images a) image Tag 9) Applying the Concepts a) Quick Reference Guide b) Putting knowledge/skills together c) Creating a simple webpage 10) Links to Additional Resources a) Other websites offering HTML lessons b) Useful HTML websites (i.e. W3C, Webmonkey, HTML Goodies, etc.) 11) Course Evaluation
The instructional module will be divided into five sections. The mini-course map is presented below. Mini Course Map Week 1 Introduction to HTML What is HTML Creating an HTML File HTML Tags (formatting) Quiz Week 2 HTML Document Part 1 Behind the Scenes Tags Adding Visible Text Quiz Week 3 Referencing/Links/Images Saving HTML Files (File Location/Directory Structure) Adding Links 6
Adding Images Quiz Week 4 Applying the Concepts Quick Reference Guide to review HTML Tags introduced Sample Webpages Creating the Code that Build the Webpage Additional HTML Resources/References Quiz Week 5 Evaluation
The information presented each week will be mainly text based, or reading assignments. The readings will be available online (as a webpage created in Moodle, as a part of the course website) and will provide learners with text as well as visual aids that will help them retain the information introduced in each section. The webpage for each section will provide learners with samples of the information presented. At the end of each section in the course, mini quizzes will be assigned to test the learners knowledge and to ensure that she has acquired the skills necessary to move on to the next section. Expert Review Plan Since the mini-course will be available in the ETEC Moodle site, it will be reviewed by other students enrolled in ETEC 649, Spring 2006 semester. At this time, I am not aware of each students familiarity with HTML, but I am sure there is at least one student who has used HTML. The reviewer, however, does not necessarily have to be knowledgeable about HTML prior to reviewing the course. The purpose of the review will be to ensure the quality of instruction is clear and at the skill level of the intended audience.
7
As a final assignment for the course, and at the end of the mini course, the reviewer(s) will complete an evaluation assignment. The evaluation will be a combination of the Moodle survey, journal and choice activities. The survey and choice activities will allow for quick feedback, while the journal entries will require that the reviewer(s) provide written feedback and reflection about the mini course. The reviewer(s) will review the following: 1) Instruction a) Pace of instructional content/activities b) Level of instruction (appropriate for target audience) 2) Content & Layout a) Clarity of instruction b) Clarity of layout (what was to be accomplished each week) c) Usefulness and clarity of images to explain or supplement instruction 3) Attitude a) Confidence level with HTML before and after instruction b) Knowledge level with HTML before and after instruction c) Motivational level of instruction d) Usefulness of instruction
8