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

Basic HTML e-Learning TutorialStoryboard

Linda SauerbrunAET/545

February 15, 2015Dr. Poe

Project name: Learn Basic HTML e-Learning Date: 02/02/2015Screen ID: Title ScreenNavigation 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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html>

HTML Document Structure –:

Demo

HELLO WORLD

This is a web page.

TextHTML 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

http://htmledit.squarefree.com/

Project name: Learn Basic HTML e-Learning Date: 01/30/2105Screen ID: WHY HTML? What is it?

Media informationUse picture shown. We want toMotivate the student inConquering the knowledgeOf HTML Code.

Navigation infoHOME - Introduction

Why HTML? What is it?Build your first pageTags - Understanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

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/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?

Build your first pageTags-Understanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

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/2105Screen ID: Tags Understanding Common Terms

Media informationYoutube 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 infoHOME - IntroductionWhy HTML? What is it?Build your first page

Tags - Understanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

HTML Tags – Understanding Common TermsCommon Terms - Basic ElementsHeader<h1> through <h6> Paragraph<p>Example of Opening Tag <div>Example of Closing Tag </div>Anchor Tag<a> </a>Self Closing Elements<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>

Video/HTML Basics – Using Tags CLICK ON PICTURE TO SEE VIDEO

Graphic for Page 5

https://www.youtube.com/watch?v=-o0pUZhDrTw

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen ID: Validator

Media information

Navigation info

Screen 6 of 15

Programmer Notes: Provide a link http://infohound.net/tidy/ 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common Terms

ValidatorNavigationImages and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

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

http://infohound.net/tidy/

http://infohound.net/tidy/

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidator

NavigationImages and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

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

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_nav

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigation

Images and AudioTypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

Images and Audio

Graphics for page 8

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_object_plugin

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_object_image

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and Audio

TypographyBackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

Practice

Typography

One picture for typography and lesson will be displayed for review and reference.


http://www.w3schools.com/html/html_colornames.asp

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypography

BackgroundListsFormsTablesGood Code vs. Bad CodeAssessment

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.



http://www.w3schools.com/html/html_colornames.asp

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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: http://htmledit.squarefree.com/ Free Practice

Navigation infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypographyBackground

ListsFormsTablesGood Code vs. Bad CodeAssessment

Practice

Lists

Graphic for Page 11


Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundLists

FormsTablesGood Code vs. Bad CodeAssessment

Practice

Forms

Basic Form Code and Demo

Graphic for Page 12

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsForms

TablesGood Code vs. Bad CodeAssessment

Practice

Tables

The picture will demonstrate what a table looks like after the HTML Code is entered.

<table border="1"><tr><th>Table Header</th><th>Table Header</th></tr><tr><td>Table cell 1</td><td>Table cell 2</td></tr><tr><td>Table cell 3</td><td>Table cell 4</td></tr></table>

Table Header Table Header

Table cell 1 Table cell 2

Table cell 3 Table cell 4

Graphic for page 13

Project name: Learn HTML Code Tutorial Date: 01/30/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsFormsTables

Good Code vs. Bad CodeAssessment

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/2105Screen 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 infoHOME - IntroductionWhy HTML? What is it?Build your first pageUnderstanding Common TermsValidatorNavigationImages and AudioTypographyBackgroundListsFormsTablesGood 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 QuizAs Assessment 1

Picture for Assessment Page

HTML Quiz – Assessment Part 1Which tag makes the largest headline?Your answer:H1H2H3H4Between which set of tags does most of the content of your web page need to be placed?Your answer:<text></text><body></body><title></title><head></head>Which set of tags looks like this?·Dogs ·Cats ·BirdsYour answer: <ul></ul> <u></u> <ol></ol> <dl></dl>

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:DSLGUIHTMLFTPTable cells are represented by:Your answer:<TD></TD><TCELL></TCELL><TC></TC><CELL></CELL> Name four Self Closing Tags________________________________________True or False. Websites do not need navigation bars?TrueFalse

Referenceshttp://htmledit.squarefree.com/https://www.youtube.com/watch?v=-o0pUZhDrTw

Documents

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