Basic HTML e-Learning Tutorial Storyboard Linda Sauerbrun AET/545 February 15, 2015 Dr. Poe

Project name: Learn Basic HTML e-Learning Date: 02/02/2015 Screen ID: Title Screen Navigation info The student should always be able to go back to HOME Screen 2 of 15 Programmer Notes: Provide a HTML Interactive document example and a link to Notepad for student to practice HELLO WORLD in code. The goal here is to show the student how easy it is to code using HTML. The Navigation should exist on each page so the student can reference help from each area upon request. At the end of each lesson a PRACTICE button will link to rich text editor. Program Design Notes: White background, Black/Gray Lettering, Arial Narrow Font size 11 on all pages. Basic theme/simple and clean. Practice Notepad and instructions after each lesson. MEDIA NOTES: Graphics are included with each storyboard. No Audio unless specified. No video unless specified. This page needs to be fun and inviting. When possible provide feedback to student during or following the assessment when possible.. This Storyboard is a first attempt to introduce learners to HTML. HOME- Introduction Why HTML? What is it? Build your first page Tags - Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Website Theme: Simple theme with navigation on top Hello World Hello World This is a web page. HTML Document Structure –: Demo HELLO WORLD This is a web page. Text HTML documents are plain text documents saved with an.html file extension rather than a.txt file extension. To begin writing HTML, the student will need to connect to rich text editor NOTEPAD for Windows and TEXTWRANGLER for Mac machines. First HTML lesson – Students will be asked to program the following code. Each student will then see the end result as seen in DEMO. Notes : The goal with this e- Learning tutorial is for each student to know how to write basic HTML Code. The assessment will demonstrate success. The objective is for the student to perform the final assessment with no more than four errors. The student will be given feedback as to where the failures occurred in the assessment. The student will be given three assessment attempts to make corrections., with no more attempts offered.. This tutorial max time is two hours. Graphic for Intro Page HOME - Introduction Practice

Project name: Learn Basic HTML e-Learning Date: 01/30/2105 Screen ID: WHY HTML? What is it? Media information Use picture shown. We want to Motivate the student in Conquering the knowledge Of HTML Code. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Tags - Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Screen 3 of 15 Programmer Notes: This page will allow students to read about HTML and what it is used for in a web site. Program Notes: The header will identify the top of the page in each lesson for this tutorial. Display the graphic (Graphic 2) for key elements example. WHY HTML? What is it? What is HTML? What is it? Hypertext Markup Language. HTML gives the web site meaning and structure. It creates pages that look the same. The following picture is a common structure of a HTML web page. These are the key elements for this tutorial. You will add graphics and practice language after each lesson. When this tutorial is complete you will KNOW HTML Basic Language and you will be able to code outside of any Web Editor. Graphic for Page 2 Graphic 2 for page 2

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Build Your First Page Media information Navigation info Screen 4 of 15 Programmer Notes: I want the student to produce the code that matches “This is my web page” and This could become the best web site in the world EVER!!!. Allow the student as many attempts but until the students gets this right they are not able to move forward. This will ensure understanding of basic code. Program Notes: The goal with this page is to create confidence in knowing basic language. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Tags-Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Build Your First Page Practice Learner’s need to use the correct HTML code to produce the same header and paragraph as shown above. Graphic for Page 4

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Tags Understanding Common Terms Media information Youtube video will be viewed for working explanation of HTML Tags and importance of use. The goal is to help the student understand behind the Scene about HTML. Screen 5 of 15 Programmer Notes: The students need a general understanding of meta tags and their use in a web site. The 10 minute video will explain how tags work in a web site. All students need to view the entire video before moving forward. This is a free video that all students are able to access. The picture should be linked to the Youtube video. Program Notes: All learners must view this 10 minute video on HTML Tag usage. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Tags - Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment HTML Tags – Understanding Common Terms Common Terms - Basic Elements Header through Paragraph Example of Opening Tag Example of Closing Tag Anchor Tag Self Closing Elements Video/HTML Basics – Using Tags CLICK ON PICTURE TO SEE VIDEO Graphic for Page 5

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Validator Media information Navigation info Screen 6 of 15 Programmer Notes: Provide a link for students to validate HTML code (this is a free application). The TIDY picture will take the student to the validator for them to try. Program Notes: The goal in introducing a validator is for the student to gain knowledge on how source code should appear. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Validator This page will introduce the student to clean HTML Source Code and its importance in web design. The tool will help the programmer edit HTML code and create clean markup language. The code picture should be included on this page. TIDY is an example of what a validator looks like. Use this as an instruction. The validator will help the student create and maintain good source code. Graphic for page 6

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Navigation Media information Navigation info Screen 7 of 15 Programmer Notes: The student will click on the ‘Try it Yourself’ link and can practice how to code nav links. Program Notes: The student will be able to set up navigation links after completing this page on the tutorial. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Navigation Example of code for Navigation links. The navigation link is interactive and allow the student to learn how to produce navigation code The navigation pictured will be displayed on this page.. Graphic for page 7

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Images and Audio Media information Navigation info Screen 8 of 15 Programmer Notes: Students will learn to code for Images and Audio. Each example will allow the student to put in the code that will result in a picture and audio. Students can use the interactive notepad to enter his or her own pictures and audio. Program Notes: These are basic examples. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Images and Audio Graphics for page 8

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Typography Media information Navigation info Screen 9 of 15 Programmer Notes: Student will review font/color/style/style and practice with various code. The practice button will allow students to enter the code and see the results. Program Notes: This will teach the student about HTML for font variances. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Practice Typography One picture for typography and lesson will be displayed for review and reference.

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Background and Colors Media information Navigation info Screen 10 of 15 Programmer Notes: Show examples of the source code and the result. Students can practice by clicking on the practice button. Program Notes: Static pictures to show examples of color. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Practice Backgrounds and Color Example of code will be displayed in these images. Graphic for Page 10 Click on the star and see all of the HTML color names.

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Lists Media information Navigation info Screen 11 of 15 Programmer Notes: Students will review the HTML code and use what was learned by going to Practice and practicing this code. This is an unordered list and an ordered list. Program Notes: Free Practicehttp://htmledit.squarefree.com/ Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Practice Lists Graphic for Page 11

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Forms Media information Navigation info Screen 12 of 15 Programmer Notes: Students will be able to code a simple form. The practice button will take the student to a WordPad to practice. Program Notes: This is a basic HTML form. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Practice Forms Basic Form Code and Demo Graphic for Page 12

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Tables Media information Screen 13 of 15 Programmer Notes: Practice button will take the student to Word Pad, then the student can practice various forms of tables. Program Notes: This is the basic table. There are other table code but we want the student to learn this basic code. Invite student to research other tables and practice code. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Practice Tables The picture will demonstrate what a table looks like after the HTML Code is entered. Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Header Table cell 1Table cell 2 Table cell 3Table cell 4 Graphic for page 13

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Good Code vs. Bad Code Media information Navigation info Screen 14 of 15 Programmer Notes: This is for an example only. The students need to see what good code looks like versus bad code. Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment Good Code versus Bad Code This code will be displayed in this picture form for students to view good code versus bad code. Bad Code

Project name: Learn HTML Code Tutorial Date: 01/30/2105 Screen ID: Assessment Media information Navigation info Screen 15 of 15 Programmer Notes: Quiz Assessment 1 will take the leaner to a question and answer form. When complete the student must have a 100 % to move on to the next assessment. The goal of this quiz is to help learning with reviewing incorrect answers with the correct answer. Assessment 2 will take the student to the notepad where they will follow the directions for the assessment. The student will get multiple tries (as stated in Screen 1). Program Notes: Navigation info HOME - Introduction Why HTML? What is it? Build your first page Understanding Common Terms Validator Navigation Images and Audio Typography Background Lists Forms Tables Good Code vs. Bad Code Assessment ASSESSMENT Using the attached WordPad create a web page with all basic elements you learned in this tutorial. Basic page (white background) Navigation (four nav bars) Images and Audio (4 images/1 audio file) Typography (Italics font, Bold font on two of the words) Background/Color (Background color Blue) Lists (Ordered list and Unorder list) Forms – (Contact Us Form) Tables – (basic Table) Students will take the HTML Quiz As Assessment 1 Picture for Assessment Page HTML Quiz – Assessment Part 1 Which tag makes the largest headline? Your answer: H1 H2 H3 H4 Between which set of tags does most of the content of your web page need to be placed? Your answer: Which set of tags looks like this? ·Dogs ·Cats ·Birds Your answer: HTML is ___________ Your answer: a company that provides access to the Internet. common questions and answers. the language of the Web. common graphic format on the Web. The language used for creating Web pages. Your answer: DSL GUI HTML FTP Table cells are represented by: Your answer: Name four Self Closing Tags __________ __________ True or False. Websites do not need navigation bars? True False

References /