Basic HTML e-Learning Tutorial Storyboard Linda Sauerbrun AET/545 February 15, 2015 Dr. Poe.
-
Upload
annabel-flowers -
Category
Documents
-
view
220 -
download
0
Transcript of 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
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
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
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
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
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.
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