Day 3-4,5: Basic HTML - Paragraph, Header, Strong, and EM Tags Lesson Plan: Day 3-4 Basic HTML


#1

We do an activity every year within the first week or two we call All About Me, which typically we do it in powerpoint and have the students present to the class. I would like to start doing this as a website that the students could build upon throughout the year, adding photos, favorite projects etc. We would start with the Rubric for the old All About Me project and have them develop a storyboard and progress to the rest of the lessons.

At the end of the year the students can share their websites with their parents during our Certificate Ceremonies.

We can also use the student websites for recruiting purposes and during Open House.

ALL ABOUT ME RUBRIC.docx (18.9 KB)


#2

I would review previously learned information (html codes) and resulting outcomes as they relate to webpage design. Then introduce 2 new codes (strong = bold, and emphasized = italic text). I would ask students to predict what they thing these two html codes would do / produce and share / brainstorm as a class. I would then use an online html simulator / tutorial (as is provided in the lesson plan) so students can investigate these new codes for themselves. I would then ask students to share what they learned from their independent investigations. As an extension activity, I would play a game (“I have, who has?”) to review all the html codes we learned so far. This game is completely interactive and gets all students to pay attention and be engaged. It also reinforces important terms learned so students can be more successful when completing their own webpages. I would then have students explore each other’s web pages and offer suggestions (in html format) and then have them update their pages using this feedback (where they would have to interpret the feedback provided and actually implement the changes using their knowledge of html again.


#3

What a creative interactive activity - “I have, who has?” to get students to review terms or share what they’ve used and learned which might be different that other students.


#4

Do you have the “I have, who has?” game cards in an electronic format that can be shared?


#5
  1. I would start this lesson with a journal question: What are HTML tags and why do we need them?
    After students have finished journaling, I would have volunteers share with the class. I would assume that most students will not have much of an understanding of this topic because it will be new to them.
  2. The next planned activity will be tags and meanings separated where students will have to try to identify the meaning of the tag. To make sure that every student is given an opportunity to think through this on their own, I will have students complete this activity individually. After every student has had the opportunity to complete it, I will have the tags and meanings projected for students to review as a whole class and together we will discuss what each tag means and how it is or is not logical (tag and result). Since students are used to using Word, I will ask for input on coordinating Word icons or commands that have the same results (for example, strong would be bold). This activity will give students both a hands-on activity and an opportunity for group discussion.
  3. Students would then view https://www.tutorialspoint.com/html/html_basic_tags.htm and then try to create a webpage. By allowing students to reference this tutorial, students can work at their own level and pace and have the opportunity to use trial and error to complete their task. I would ask them to write me a simple multi-paragraph webpage answering the question: When I go to the grocery store, I need to buy the following items. They will need to include a title, headings, list items in paragraphs, and put their favorite item in bold and least favorite in italics . They will submit their completed assignment online for teacher feedback and grading.
  4. Follow-up reflection question for journal: What other activities have we done where we had to be very specific in our instructions to get the desired results? What happens if you do not give a computer every step in the right order with all of the necessary expectations? How did you find this true with today’s activity?

I believe that some students will struggle with this assignment because it is new material. Like always, students who have a better understanding of the material, will also be able to expand their submission and explore additional tags if desired.


#6

@katrina_dunlap the link you shared has some great visual examples of the html tags - what kind of web page are you going to have your students create?

I like the way you added in the follow-up journal reflection which ties back to Unit 1 and the following instructions activity.


#7

I start off with an KWL chart in their Journals:
I then go into an Introduction of HTML:
HTML (Hyper-Text Markup Language) documents are plain-text files that can be created using any text editor. I then display an already exist web page and explain that HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>) to the students. I also introduce the basic elements that need to be contained in a HTML document, such as html, head, title, and body. This then lets students have background knowledge of HTML and know what they are going to expect. and explain some HTML elements might not display well in different browser I give examples.

It’s a beginner’s guide to HTML. This part has HTML introduction.
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html

I have students then go back and complete KWL chart in there Journal the L for Leaned


#8

Great idea. Students do a similar activity in MS Word or Google Docs. I love your idea of having them start to design a site that can be shared in a small community.


#9

@csaablack Thanks for sharing the link to the beginner’s guide to HTML. This can be a great resource to share with students.


#10

No, I don’t…sorry. They do need to be made specifically for each activity because of vocab relevance.


#11

#12

@shelly_toth

I like that students are predicting what they think the codes will do and then trying it out in an online environment that lets them explore using the code.


#13

HTML Webpage Worksheet.docx (27.5 KB)

Attached is the worksheet for the first assignment of Unit 3.


#14

Carol,

I think this is a great idea. My students really make me laugh with the HTML unit. Some of them get so excited and others can’t figure out why they need to do all this work when they could just create a website on Weebly or some other template based hosting site. I think that the idea of having the students create a site that highlights who they are can really help with this issue of why we might want to start creating sites that aren’t from a template.


#15

This is a very smart idea!!


#16

https://welookups.com/html/html_basic.html