INSTRUCTIONAL UNIT 3 (IU3)...The learner will then move into the next part of this instructional unit: Part 2 - Web Page Project. Learners will use a code playground, which will consist

INSTRUCTIONAL

UNIT 3 (IU3)

Instructional Design Project

EDTC 6321 Summer 2020 Module 1

by Heather Bourgeois

i

Table of Contents

I. Instructional Strategy ......................................................................................................................... 1

II. Media Selection & Delivery System ................................................................................................. 6

III. First Draft Materials ............................................................................................................... 7

a) Learning Environment ....................................................................................................... 7

b) On-Screen Slides for Video Lesson ............................................................................................. 9

c) Audio Narration Script .................................................................................................... 12

d) Web Page Project ........................................................................................................... 16

e) Assessment Quiz ............................................................................................................. 18

INSTRUCTIONAL UNIT 3 (IU3) EDTC 6321 | Heather Bourgeois

1

I. Instructional Strategy This instructional unit will be a 30 minute online lesson on how to create a basic web page, using HTML and CSS. It will involve video instruction, a code playground for completing a simple web page project, and an assessment quiz. It will be fully online and self-paced.

This instructional unit will introduce the topic of web page development and will go over the process in a step-by-step fashion, giving the learner opportunities to practice and apply what they have learned along the way. The overall topic of websites and website creation will be introduced to the learner in a relatable way, followed by an image of a web page, along with an image of HTML/CSS code and the question “How does this turn into this?” with arrows connecting to the two images. This will be used to gain attention of the learner and to pique their curiosity about the website development process and motivate them to continue the lesson.

From there, the instructional unit will move into introducing HTML tags as the building blocks of a web page. The basic required tags will be covered, with information about what each of them do and why they are important and necessary parts of the web page. Guided practice will be provided through a “code box” below the video, where learners are invited to try out typing the code themselves, along with the video. This will give them a feel for working with the HTML tags. Cascading Stylesheets (CSS) will be introduced next, as the stylings of the web page. Again, the learner will be invited to type the code themselves for practice.

The lesson will then move into independent practice, where the learner will be asked a question and given a short period of time to find their answer. Questions will include both identifying if the provided code is correct/incorrect and also finding the required code themselves. Feedback such as “If you chose the break tag, <br>, you are correct!” will be provided after the short wait period. Learners will still be able to use the code box to play around with code while finding their answers. After this guided and independent practice, the video lesson will wrap up with a summary of the information that was covered, along with encouraging the learner to continue to play around with HTML/CSS code to build upon the skills that they have learned and to create their own web pages.

The learner will then move into the next part of this instructional unit: Part 2 - Web Page Project. Learners will use a code playground, which will consist of two code boxes (one HTML and one CSS), a set of images and a preview screen, where they can type the HTML tags and CSS style declarations needed to build and style their own web page. The preview screen will show them the visual representation of their web page as they create it. When finished, the learner will save their web page as an .html document and publish it. Upon publishing they will be given the URL of their page and it will be saved for them and automatically added to a text field on the quiz for submission.


2

The learner will then move into Part 3 – Assessment Quiz. They will be given a short quiz to assess their retention of the lesson material. It will consist of both multiple-choice and fill-in questions and cover topics such as identifying the proper tag for a certain page element or explaining the function of a certain tag or style declaration.

Please note that because this instructional unit is fully online, any references to teacher in the table below are actually referring to the pre-recorded lesson and instructions. No teacher needs to be present in person for this instructional unit.

Event

Instructional Strategy Teacher or Student

Gain Attention

A pair of images (one of a web page and one of HTML/CSS code) will be presented on the screen, connected by arrows and with the following question: “How does this turn into this?”

Teacher: A visual representation of a finished web page vs. the code behind the web page will be shown, to pique the learner’s interest in the topic and to make them think about how it all works together. Student: Learner will be asked to think about how the code is related to the finished web page.

Objective

Using a browser-based code playground (CN), the learner will create a simple web page (B), with the minimum required tags and proper use of HTML and CSS (CR).

Teacher: Will introduce the objective of the instructional unit as learning how to create a simple web page from scratch. Successful mastery of this objective will be assessed through a quiz and through a hands-on web page creation project.


3

Prerequisites

The target learners for this instructional unit are students with an interest in technology and how to use it for creation. Because of this, they should already have basic technology skills and know how to perform common tasks on a computer, such as watching videos, clicking buttons and typing in text fields.

Student: Will demonstrate their mastery of these basic technology skills by opening the instructional unit’s web page in their browser and playing the video lesson.

Present the Content

What Are HTML and CSS? HTML and CSS will be introduced and defined, making them more relatable to the learner by comparing them to building blocks (HTML) and paint (CSS). A description of how HTML works and how tags are used will be followed by specific examples. Required HTML Tags All of the minimum required tags for creating a web page will be covered, from the doctype declaration to the <head> and <body> sections. The learner will be shown how these tags all fit together to create the finished markup of the web page.

Teacher: The video lesson will provide an overview of HTML and CSS and how they are used. The proper form of tags and CSS style declarations will be included. Student: Learner will be expected to follow along and to memorize the required basic tags and their proper form. They may wish to take notes for future reference.


4

Using CSS CSS will be introduced in more detail, showing the proper form of style declarations and some common styles, such as color, font-size and margin. Specific examples will be provided. Saving a Web Page The proper file format will be discussed, as well as the need to publish it on the web for people to see.

Guided Practice

Several specific examples of HTML tags and CSS style declarations, as well as their proper forms, will be shown. The code of a complete basic web page will also be constructed in the video.

Teacher: Specific examples will be included to show the required HTML tags and their proper form, as well as common CSS styles. The code will be presented on the screen as if it is being typed, so the learner can see how the code of the page comes together. Student: The learner will be encouraged to practice typing the tags and style declarations themselves, in the code box provided below the video.


5

Independent Practice

A series of questions will be presented to the learner that are intended to help the learner recognize the correct and incorrect use of HTML tags. They will be prompted to answer the questions and then be given a short period of time to come up with their answer.

Teacher: A series of questions will be presented to the learner, one at a time, prompting a response and then providing feedback. Student: The learner will be expected to come up with their own answers to the questions.

Feedback

Immediate feedback to the questions will be provided. Some of the questions will ask if the code is correct. After waiting for a response, a YES or NO will be shown on the screen, along with an explanation of the correct answer, if needed. Other questions will ask the learner to figure out the correct tag and will give immediate feedback, after the brief waiting period, by giving the correct answer.

Teacher: Specific feedback will be given for each question, including not only the correct answer but positive encouragement, such as “If you said NO, good job!”. Student: The learner will be expected to listen to this feedback, to note any questions that they did not get correct and to remember the correct answers in the future.


6

II. Media Selection & Delivery System This instructional unit is designed to be delivered completely online, in an asynchronous manner. Because of this, it can be used in a variety of settings and does not require the presence of an in-person instructor. The online instruction medium was chosen because not only does it allow for convenient access and an engaging instructional content, but for our particular topic it is also a chance for learners to practice what they are learning in an environment that closely mimics the actual performance context. Online instruction and assessment will be provided through a video lesson and web-based tools, such as a “code playground” and interactive quiz. Learners will need access to a desktop or laptop computer, with a stable internet connection and a recent version of a modern browser, such as Chrome, Edge or Firefox.

Assessment

Assessment for this instructional unit will be done through a short quiz and through a hands-on web page creation project. Learners will get a chance to try out what they have learned inside the code playground and to figure out how to make their completed web page. They will then use the skills that they have learned to complete the quiz.

Teacher: Instructions for completing the web page creation project will be included. Student: Learner will be expected to play around with the tags and styles that they learned, within the code playground, and to put them together into a simple, yet complete and functional web page. They will then be expected to use what they learned to successfully complete the quiz.

Closure

Learner will be encouraged to play around with the tags and styles that they learned, to create their own web pages.

Student: Learner will be expected to retain the information learned from this instructional unit and to build upon it in the future.


7

III. First Draft Materials

Learning Environment

1) Video Lesson The video lesson will be delivered on a web page with the following design:

The instructional video will be within the blackboard and a handwritten font will be used to go with the theme of a lesson being given on the blackboard. The code box at the bottom of the screen will be used by the learner to try out typing the code snippets themselves, as they watch the video lesson.

2) Code Playground The code playground used for the web page creation project will be delivered on a web page with a design like this (still a work in progress):


8

The preview of the web page (as shown on the monitor at the right) will be updated in real time to show changes made to the code. The code boxes at the left side will be used for the learner to type their HTML and CSS code.

3) Assessment Quiz The assessment quiz will use the following design:


9

On-Screen Slides for Video Lesson


10


11


12

Audio Narration Script

1. How to Create a Simple Web Page Hi There! Today we are going to talk about web pages and how they are created. We will go over all of the steps involved in the process and when we are finished you will be able to use this information to create your own simple website from scratch! I’m sure you have used many websites for thing like school projects, entertainment and connecting with family and friends. But have you ever wondered how they are made? If you have ever seen the code behind a website, you might wonder how does this turn into this? Today, we are going to find out! Feel free to use the code box at the bottom of your screen to try out typing the HTML tags and CSS styles as we go.

2. What Are HTML and CSS? First of all, what are HTML and CSS? HTML stands for Hypertext Markup Language. That is a


13

fancy way of saying that it is its own language used for creating the structure of a web page. CSS stands for Cascading Stylesheets, which is a fancy way of saying that they are a way to style your web page. These two work together to create what you see as a web page. I like to think of HTML as the building blocks of the page and CSS as the things we paint on top of the blocks to make them look good! So let’s start with HTML. This language uses tags to tell your web browser important information about your page and how to display it. Tags are special words (or sometimes just letters) used inside greater than and less than brackets. Go ahead and try typing this one yourself in the code box: <head>. This tag tells the browser to create the head section of your page. Some tags are fine by themselves, but most tags, because they are used to hold content (kind of like a box) also need a closing tag. We show a closing tag by adding a forward slash to the beginning of the tag, like this: </head>. This way, everything between the opening tag and the closing tag goes in that box.

3. Required HTML Tags To make a web page, there are some basic tags that we have to include, to tell the browser how to show it. The first tag that any web page needs is the Doctype Declaration. This is a fancy way of saying that we need to tell the browser what kind of document it is. This information goes inside a special tag that says <!DOCTYPE html>. When working with code you will notice that some things need to be done in a very specific way. If they aren’t done in the specific way, your code “breaks” and the results won’t be what you are expecting. So it’s very important to type these tags exactly as you see them. For the doctype declaration tag, it always starts with an exclamation point, followed by the word DOCTYPE (in ALL CAPS), then a space and the word html (in all lowercase). This tells your browser that it is an HTML document. The next required tag is the <html> tag itself, which tells your browser that you are starting to write your HTML code. Because this tag will be used as a box to hold all of the content of your web page, it also needs a closing tag: </html>. The next required tag is the <head> tag. This is the “brain” of our web page and holds the content of the page that controls how it is displayed. Because this is also a box that holds content, we will include a closing tag: </head>. There are many tags that can go inside the <head> of the web page, but we will save most of them for a later lesson. For now, we are just going to include a <title> tag and a closing tag: </title>. The text that you type inside the <title> tag is what shows on the browser tab for your website and also in search engine results, if your page is published for everyone to see. Use a title that is a good description of your page. That is it for the content of the <head> tag for now. The next required tag is <body>. This box will hold all of the other content of your page. We of course need to include a closing tag: </body>. Within the body we can put as much content as we want. Some useful tags and types


14

of content (that you can use when creating your web page) are <h1> (your main heading), <p> for paragraph text and <img> which shows an image on your page. Because they are containers for content, both the <h1> and <p> tags need closing tags. The <img> tag, however, doesn’t need a closing tag, because it is not a container and instead provides a link to the image that you want to show. Notice that the word “image” is abbreviated to “img” and that it needs some extra information to be complete. We need to tell it where to find our image. We can do that by including the word “src” (again, it’s an abbreviation from the word “source”), followed by an equal sign and then the URL (file path on the web) to our image, in between quote signs, like this: <img src=”images/image.png”>. These tags can all work together to create the basic structure of a web page. Without styles, however, it doesn’t look very pretty. You will just see plain text and images. If you want to make your web page look good, you have to style it!

4. Using CSS That’s where CSS comes in! Using CSS you can tell the browser how to show your content. You can control things like colors, text sizes and fonts. You can also tell it how big to make your pictures and where to put them! Rather than using tags like HTML, CSS uses what we call style declarations. That is just a fancy way of saying that we are writing out the styles to use. In order for the browser to use these styles, however, it has to know what content we want it to style! There are several ways to tell the browser which content to style, but for now we are just going to identify content by using the HTML tags from our page. For example, if we want to make our heading text red and bold, we can target it by using the <h1> tag. The next thing we need to do is create a box to hold all of the styles that we want to apply to the <h1> tag. We do this by using curly brackets: { }. The opening curly bracket goes on the first line, next to the tag we are styling, and the closing curly bracket goes on its own line at the very end. On the lines in between, we can put our styles. To make the text red, we can say “ color: red;”. Notice the colon after the word “color”. We use that to separate the attribute (what style we are working on) from its value (the actual style we want to use). Notice also the semicolon at the end of the line. This is how we tell the browser that we are done with that style. All of our styles will follow that pattern. So next, if we want the text in our heading to be bold, we can say “font-weight: bold;”. Some other useful styles are “font-size”, “margin” and “padding”. “Font-size” sets the size of our text. There are several different units that we can use for size, but for now we are going to use pixels (the number of little squares on the screen), which we abbreviate to “px”. For example, to make our text be a size of 20 pixels, we can say “font-size: 20px;”. Margin and padding also refer to sizes and can use the pixel unit. These sizes are both based on our box of content, with margin referring to space outside of our box (the distance between different boxes of content)


15

and padding referring to space inside of our box (the distance between the edges of our box and the content inside). We can set these styles like this: “margin: 20px;” and “padding: 20px;”. This will make our content have 20 pixels of space between it and the edges of the box and then 20 pixels of space between our box and any other boxes!

5. Saving a Web Page The last thing we need to do is save our web page! We need to make sure that it is saved in the correct format, so our browser can use it. For basic web pages, we need to save with the file extension “.html”. Once the file is saved, it can be published to the web! Now you know the basics of creating a web page from scratch!

6. Try It Out Yourself Let’s go through some examples to see how much you have learned! First, let’s see if you can spot any problems with these examples! Is this tag correct? >body< If you said “no”, good job! The correct way to show a tag is like this: <body>. Is this the correct tag for a paragraph of text? <p> If you said “yes”, great! That is correct! Is “text-size” the correct way to style the size of our text? If you said “no”, that’s it! The correct way to style the size of our text is “font-size”. Now let’s see if you can find the correct tag yourself! Which tag is used for the name of our website, that shows in the browser tab? If you said “<title”>, good job! That’s the one! What if we want to include an image on our page? What is the correct tag for that? If you said “<img>” that’s it!

7. What We Learned Let’s review what we have learned. We now know all about what HTML and CSS are used for and how they work together. We know the basic HTML tags that have to be used on a web page, like the doctype declaration, <html> <head> and <body>, along with some other tags that we can use to display our content, such as <h1>, <p> and <img>. We also learned the correct form of CSS styles and some basic styles that we can use to control how our content looks, such as “font-size”, “margin” and “color”. And we learned the file format we need to use to save our


16

page! You can use what you have learned to play around with creating your own web page. After this video, you will get to show off what you have learned through creating a simple web page yourself, followed by a short quiz! Please click on the Part 2: Web Page Project button above to continue. Thanks for joining me! Have fun and see you next time!

Web Page Project The learner will be given the following instructions:

Please use the code playground to create a web page of your own. Be sure to include the following: 1) Required basic HTML tags for the browser to show your page 2) Content for your page 3) Styles for your page, to make it look nice Type the HTML tags of your page in the HTML box and the styles of your page in the CSS box. For images, please choose your desired image from the ones provided and click on it to you’re the URL (web address). You can then paste this URL into your <img> tag, by using Ctrl+V on your keyboard. Your work will be automatically saved. Watch on the preview screen as your web page comes to life and adjust the HTML and CSS as needed until you are satisfied with your page. When you are done, click the SAVE button and save the web page in the correct file format. Then click the PUBLISH button. The URL (web address) will automatically be saved for you and added to your quiz, so your teacher will have access to it for review. Happy Coding!


17

Grading Rubric for Web Page Project

Criteria Description

HTML Page Structure

The structure of the web page has been created completely and all required minimum HTML tags are included. The correct doctype declaration was used, as well as the html, head, title and body tags. The tags are included in the correct places and all closing tags are included. The tags are all done in the proper form.

CSS Style Declarations

The CSS style declarations are all done in the proper form. HTML tags were properly targeted for applying styles. Overall styling of the page is clear and easy to read.

Content

A clear, descriptive page title is included within the <title> tag. Content is included within the relevant tags, such as the page heading being in the <h1> tag and longer paragraph text included in the <p> tag. If an image is included, the URL is correctly linked and the image is visible in the page.

Saving & Publishing

The file is saved in the .html file extension and is accessible at the URL submitted with the quiz.


18

Assessment Quiz The assessment quiz will include 6 questions, including 4 multiple choice and 2 fill-in.

Performance Objective

Assessment Question Correct Response

Using the browser-based code playground (CN), the learner will create a new HTML document (B), with the correct doctype declaration (CR).

1. Which of these is the correct doctype declaration for an HTML page? a) <doctype! HTML> b) <doctype html> c) <!DOCTYPE html> d) <doctype HTML!>

The correct answer is: c) <!DOCTYPE html>

Using HTML (CN), the learner will create the structure of the web page (B), using the correct required tags (CR).

2. What tag is used as a container for ALL of the visible content of the page? a) <footer> b) <section> c) <h1> d) <body>

The correct answer is: d) <body>


19

Using the code playground (CN), the learner will add content to the page (B), in the correct sections (CR).

3. Where would you put the <title> of your page? a) <head> b) <body> c) <section> d) <footer>

The correct answer is: a) <head>

Using CSS (CN), the learner will style the structure and elements of the page (B), using proper style declarations (CR).

4. What tag is used to display blocks of text? a) <a> b) <p> c) <i> d) <br>

The correct answer is: b) <p>

Using the code playground (CN), the learner will save the HTML document (B), in the correct format (CR).

5. What is the correct file extension for an HTML document? _____________________

The correct answer is: .html


20

Using a browser-based code playground (CN), the learner will create a simple web page (B), with the minimum required tags and proper use of HTML and CSS (CR).

6. What is the URL (web address) of the web page you created?

The correct answer will be the URL of their published web page, which will be automatically included for them.

INSTRUCTIONAL UNIT 3 (IU3)...The learner will then move into the next part of this instructional unit: Part 2 - Web Page Project. Learners will use a code playground, which will consist

Documents