G5_C2_TeacherCopy

About Me Page

Topic

 

TA :   Teacher Activity    

SA :    Student Activity  

SAA : Student Additional Activity

FOR PREPARATION & REFERENCE

Slide
No. 		Topic
2 Class Structure
3 Class Prerequisites
13-21 TA Code solution
31-34 SAA  Code Solution
42 Activity Links

CLASS STRUCTURE

Activity
No: 		Slide
No. 		Topic Time
1 4 2min
2 5-7 3 min
3 9 3 min
4 10 2 min
5 11-22 6 min
6 23-29 12 min
7 30-34 -
8 35-37 2 min

Ice Breaker activity

Heading Tags

Warm-Up quiz

Student Activity

Teacher  Activity

Wrap-Up quiz

Introduction to Tags

Student Additional Activity 1-2

PREREQUISITES

FOR TEACHER

1. Computer with internet connection.

2. The latest browser installed.

3. Projector to present screen.

4. Repl.it login credentials.

 

 

FOR STUDENTS

1. Computer with internet connection.

2. The latest browser installed.

3.  Repl.it login credentials.

 

 

If you had a chance to meet a famous person, who would it be?

3

Q.1

Which one of the following languages is used to style our web page?

HTML

1

CSS

3

2

JavaScript

"HTML" is associated with the structure, "CSS" with the presentation, and "JavaScript" with the behavior of the page.

CSS

HTML

PRESENTATION

JavaScript

STRUCTURE

BEHAVIOR

Q.2

In the given image, which tag is used to bold the words "Junior Coder"?

3

<i>...</i>

1

<body>...</body>

2

<b>...</b>

3

Yes, the "<b>" tag is used to bold the words present in a paragraph.

<img>: image tag

<b>: bold tag

<h2>: heading tag

<h3>: heading tag

<p>: paragraph tag

<i>: italic tag

<h1>: heading tag

Heading Tag

All About Me Page

Teacher Activity 1: bit.ly/g5me1

1. Open the Teacher Activity 1 Link

2. Click on Fork​

FOR TEACHER REFERENCE

TO DO: Create an "About Me" page. Add the following HTML tags.

<h1>, <p>, <b>

<i>

<img>

<br>

<h2>, <h3>

FOR TEACHER REFERENCE

 Add CSS to change text alignment

function changecolor()
{
  document.getElementById("b1").style.color="blue";
}

body{
  text-align:center;
}

style.css

script.js

 

Teacher Activity 1 Solution 

bit.ly/g5me02

 

Add JS to change text color on click

Code Reference for TA 1

FOR TEACHER REFERENCE

Brief summary of all the tags used in "index.html"

Header tags: We have used 3 header tags here "<h1>", "<h2>", and "<h3>"

FOR TEACHER REFERENCE

Add the "h1", "p" and "img" tags

Step 1: 

<body>
    <h1>All About Me</h1>
    <img  src="girl.jpg">
    <p>Hey, my name is Ria Sharma. I am 10 years old.
    I am in Grade 5 and I study in City public school. 
    I am a Junior Developer.
    I love to code and create websites!</p>
 </body>

Input

Output

Coding Steps

FOR TEACHER REFERENCE

<body>
    <h1>All About Me</h1>
    <img  src="girl.jpg">
    <p>Hey, my name is <i>Ria Sharma</i>. I am 10 years old.<br>
    I am in Grade 5 and I study in City public school. 
    I am a <b>Junior Developer</b>.
    I love to code and create websites!</p>
  </body>

Add "i", "b", and "br" tags

Step 2:

Input

Output

Coding Steps

FOR TEACHER REFERENCE

<body>
    <h1>All About Me</h1>
    <img  src="girl.jpg">
    <p>Hey, my name is <i>Ria Sharma</i>. I am 10 years old.<br>
    I am in Grade 5 and I study in City public school. 
    I am a <b>Junior Developer</b>.
    I love to code and create websites!</p>
    <h2>My Hobbies</h2>
    <p>I like to draw and play outdoor games. </p>
    <h3>My Favourite Foods</h3>
    <p>I love to eat chinese cuisine. </p>
  </body>

Add header tags

Step 3:

Input

Output

Coding Steps

FOR TEACHER REFERENCE

body{
  text-align:center;
}

style.css

Before

After

Align the texts to center

Step 4:

Input

Output

Coding Steps

FOR TEACHER REFERENCE

Input

Output

function changecolor()
{
  document.getElementById("b1")
  .style.color="blue";
}

<body id="b1">
    <h1>All About Me</h1>

index.html

script.js

<img  src="girl.jpg" onclick="changecolor()">

index.html

image 1

image 2

image 3

Steps to code

Step 5:

Coding Steps

FOR TEACHER REFERENCE

<img>: image tag

<b>: bold tag

<h2>: heading tag

<h3>: heading tag

<p>: paragraph tag

<i>: italic tag

<h1>: heading tag

1. Search for bit.ly/g5me03

2. Click on Fork

Student Activity 1

STEP 1: Add "img" tag and "img src"

Input

Output

Before

After

 <body>
    <h1>All About Me</h1>
    <img  src="boy.jpg" onclick="">

 <body>
    <h1>All About Me</h1>
    <img  src="girl.jpg" onclick="">

index.html

index.html

or

Student Activity 1

STEP 2: Resolve the error

Input

Output

<p>Hey, my name is <i>Ria Sharma</i>. 
I am 10 years old. 
I am in Grade 5 and I study in City public school.
I am a <b>Junior Develeoper</b>. 
I love to code and create websites!</p>

index.html

Before

After

Student Activity 1

STEP 3: Using "header" tags

Input

Output

Before

After

<h2>My Hobbies</h2>
    <p>I like to draw and play outdoor games. </p>
<h3>My Favourite Foods</h3>
    <p>I love to eat chinese cuisine. </p>

index.html

Student Activity 1

STEP 4: Change the layout from the "style.css" file

body{
  text-align:center;
}

Input

Output

style.css

Before

After

Student Activity 1

show, Carol is giving 3 coins from wallet

 Run and check the output, click on the image to change the text color

TO DO: Change the text color to "red" on click of the "<p>" tag 

function changecolor()
{
  document.getElementById('').style.color="red";
}

 <p id="p1" onclick="changecolor()">

index.html

script.js

Additional Activity 1: Link: bit.ly/g5me04

Hint:

ADDITIONAL ACTIVITY 1

 <!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
     <script src="script.js"></script>
  </head>
  <body>
 <h1>Importance Of Education</h1>
    <p id="p1" onclick="changecolor()">
	The first thing that strikes our minds when we think about 
    education is gaining knowledge. Education is a tool that 
    provides people with knowledge, skill, technique, information, 
    and it enables them to know their rights and duties towards 
    their family, society, as well as the nation. It expands a
    vision and outlook to see the world. It develops the 
    capabilities to fight against injustice, violence, 
    corruption, and many other bad elements in society.
    </p>
   </body>
</html>
    
function changecolor()
{
  document.getElementById('p1').style.color="red";
}

index.html

script.js

AA1 Solution

bit.ly/g5me05

FOR TEACHER REFERENCE

TO DO: Change the text color to "red" on click of the "<p>" tag

TO DO: In the same code, change the background color

Hint:

In the "script.js" file, change the background-color to "lightblue"

ADDITIONAL ACTIVITY 2

Additional Activity 2: bit.ly/g5me04

<body id="b1">
    <h1>Importance Of Education</h1>

index.html

function changecolor()
{
  document.getElementById('p1').style.color="red";
  document.getElementById('b1').style.background="lightblue";

}

FOR TEACHER REFERENCE

 AA2 Solution 

bit.ly/g5mee06

TO DO: In the same code, change the background color

script.js

Which tag will help us get the desired output?

Before

After

<p> tag

<i> tag

<b> tag

WRAP-UP QUIZ!

Q.01

C

A

B

B

WRAP-UP QUIZ!

Q.02

A

C

B

4

5

6

C

How many heading tags does HTML have?

LINKS

Activity Name Links
Teacher Activity 1
 		 All About Me Page
 
Teacher Activity 1
 Solution		 All About Me Page
 
Student Activity 1
 		 All About Me Page
 
Additional Activity 1
 		 All About Me Pagev
Teacher Reference: Additional Activity 1
 Solution		 All About Me Page
Additional Activity 2
 		 All About Me Page
Teacher Reference: Additional Activity 2
 Solution		 All About Me Page

bit.ly/g5me1

bit.ly/g5me02

bit.ly/g5me03

bit.ly/g5me04

bit.ly/g5me05

bit.ly/g5me04

bit.ly/g5mee06

Copy of Copy of Grade 5 Session -2- PO

By Akshit Sharma

Made with Slides.com

Copy of Copy of Grade 5 Session -2- PO

  • 182

More from Akshit Sharma