G5_C1_ForTeacher

Introduction to
Web Development

TA : Teacher Activity

SA : Student Activity

SAA : Student Additional Activity

FOR PREPARATION & REFERENCE

Slide No.	Topic
2	Class Structure
3	Class Prerequisites
17	Repl.it Sign in for Teacher
19-26	TA Code Explanation
43	Activity Links

Ice breaker activity

Teacher Activity 1-2

Introduction to Websites

Wrap-up Quiz

Student Activity 1-2

Additional Activity 1 -2

Introduction to HTMLS, CSS,JS

CLASS STRUCTURE

Activity No:	Slide No.	Time
1	4	2min
2	5	4 min
3	9	4 min
4	15	8 min
5	28	10 min
6	34	5 min
7	39	2 min

PREREQUISITES

FOR TEACHER

1. Computer with good internet connection.

2. Latest browser installed on the computer.

3. Projector to present screen.

4. Repl.it login credentials.

FOR STUDENTS

1. Computer with good internet connection.

2. Latest browser installed on the computer.

3. Repl.it login credentials.

SIT OR STAND

WEBSITES

Have you all used any website on the internet?

www.google.com

WHAT ARE WEBSITES?

JUST LIKE BOOKS!

WEB PAGE

PLACE OF ACCESS

LIBRARY

WEB BROWSER

CSS

HTML

PRESENTATION

JavaScript

STRUCTURE

BEHAVIOR

LANGUAGE OF THE WEB BROWSER

HTML

HYPER

TEXT

MARKUP

LANGUAGE

LANGUAGE OF THE WEB BROWSER

Head

Body

}

Add CSS

STRUCTURE

PRESENTATION

JS-JavaScript

HTML

TAGS

JavaScript

CONTENT

STRUCTURE

BEHAVIOR

LET'S UNDERSTAND THE REPL.IT PLATFORM

About Me Page

Teacher Activity 1 Link

STEPS TA1

1. Open the Teacher Activity1 Link

2. Click the blue button on the top right corner of the webpage.

3. After filling in the information

click on the create accout button.

4. Open the Teacher Activity1 Link and click on

5. Explain repl.it platform to the students. (explained in next slide)

Continued...

FOR TEACHER REFERENCE

The code blocks/lines highlighted in red need to be added.

TO DO: Add the HTML tags ("<h1>","", "", "", "<img>"), add CSS to change background color, add JS to change the background color on click

HTML

CSS

JavaScript

CODING REFERENCE FOR TA

FOR TEACHER REFERENCE

<body>
  <h1>About Me</h1>
</body>

index.html

CODING STEPS

STEP 1 : Adding ''Header" tag

Input :

Output :

Continued...

FOR TEACHER REFERENCE

<body>
  <h1>About Me</h1>
  <p>Hi, my name is Ria Sharma</p>
  <p>I am in Grade 5 and I study in City Public school.</p>
</body>

CODING STEPS

index.html

STEP 2 : Adding ''Paragraph" tag

Input :

Output :

Continued...

FOR TEACHER REFERENCE

Output

CODING STEPS

index.html

STEP 3 : Adding ''italic" and "bold" tags

Output :

Continued...

<body>
  <h1>About Me</h1>
  <p>Hi, my name is <i>Ria Sharma</i></p>
  <p>I am in Grade 5 and I study in City Public school.</p>
  <p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>

FOR TEACHER REFERENCE

CODING STEPS

index.html

STEP 4 : Adding an image to our project

Output :

Continued...

<body>
  <h1>About Me</h1>
   <img src="picture.png" />
  <p>Hi, my name is <i>Ria Sharma</i></p>
  <p>I am in Grade 5 and I study in City Public school.</p>
  <p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>

Input :

FOR TEACHER REFERENCE

body {
    background-color:orange;
    color: white;  
}

style.css

CODING STEPS

STEP 5 : Adding background colors in the "style.css" file

Output :

Input :

FOR TEACHER REFERENCE

<body id="b1" >
  <h1>About Me</h1>
   <img src="picture.png" onclick="changecolor()"/>
  <p>Hi, my name is <i>Ria Sharma</i></p>
  <p>I am in Grade 5 and I study in City Public school.</p>
  <p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>

index.html

function changecolor(){

  document.getElementById("b1").style.background="red";
  
}

script.js

Step 1

Step 3

Step 2

CODING STEPS

STEP 6 : Add JavaScript code

Input :

FOR TEACHER REFERENCE

Step 7:

Output

Add JavaScript code

Teacher Activity 1 Solution Link

CODING STEPS

FOR TEACHER REFERENCE

Replit Sign in

1. Open www.replit.com on the new tab.

2. Click the Blue Sign up button on the top right corner of the webpage.

3. Enter email ID and password to create an account and click on the

Create account button.

Continued...

1. Search for: bit.ly/activityC1

2. Click on Fork

Student Activity 1

Question 1

Inside the "script.js" file, in place of "red" type "#000000".
RUN and check by clicking on the image.
Select the correct output from below:

Q.01

A

B

C

B

On line no 15 of the "index.html" file, add this code: This is my project

Run and check.

Select the correct output from the following:

Q.02

<This is my project>

This is my project

A

This is my project

B

C

This is my project

Inside "style.css" file, change "background-color" to "red":
RUN and Check by clicking on the image.

Q.03 The background color of the web page is now red:

TRUE

FALSE

AA1 Slide Link >>

Which of the following can also be called the skeleton of a web page?

HTML

CSS

JavaScript

B

C

A

HTML

CSS

HTML

JavaScript

PRESENTATION

BEHAVIOR

STRUCTURE

As we learned at the beginning of our class, "HTML" is the base of our website. So, it is also called the skeleton of our web page.

WRAP-UP QUIZ !

Q.01

A

 tag stands for:

A border tag

B paragraph tag

C background tag

<body>
  <h1>About Me</h1>
   <img src="picture.png" />
  <p>Hi, my name is <i>Ria Sharma</i></p>
  <p>I am in Grade 5 and I study in City Public school.</p>
  <p>I am a <b>Junior Coder</b> and I love making apps.</p>
</body>

B

paragraph tag

We used the "" tag to write a description of our webpage.

WRAP-UP QUIZ !

Q.02

CSS

HTML

PRESENTATION

JavaScript

STRUCTURE

BEHAVIOR

Let's add your name and your school name to personalize your ABOUT ME page.

Hint:

Implement the changes on line number 12 and 13

Additional Activity 1

Additional Activity 1 Link- bit.ly/aactivityc1

<< Quiz Slide Link

Let's change the background color of your About Me page.

Additional Activity 2

Hint:

Implement the changes in "style.css" file

Additional Activity 2 Link- bit.ly/aactivityc1

<< Quiz Slide Link

https://replit.com/@raveenAnand/G5-U1-C1-TA-Template

https://replit.com/@raveenAnand/G5-U1-C1-TA-Solution

LINKS

	Activity Name	Links
Teacher Activity 1	About Me Page
Teacher Activity 1 Solution	About Me Page
Student Activity 1	About Me Page
Additional Activity 1	About Me Page
Additional Activity 2	About Me Page

Introduction to Web Development

PREREQUISITES

SIT OR STAND

WEBSITES

Have you all used any website on the internet?

www.google.com

WHAT ARE WEBSITES?

JUST LIKE BOOKS!

PAGES

WEB PAGE

PLACE OF ACCESS

LIBRARY

WEB BROWSER

LANGUAGE OF THE WEB BROWSER

HTML

HYPER

TEXT

MARKUP

LANGUAGE

LANGUAGE OF THE WEB BROWSER

}

}

TAGS

HUMAN BODY STRUCTURE

HTML STRUCTURE

<!DOCTYPE>

<head>

</head>

<body>

</body>

<html>

</html>

}

CSS- Cascading Style Sheets

HTML + CSS

HTML

Add CSS

JS-JavaScript

LET'S UNDERSTAND THE REPL.IT PLATFORM

About Me Page

Teacher Activity 1 Link

STEPS TA1

1. Open the Teacher Activity1 Link

2. Click the blue button on the top right corner of the webpage.

3. After filling in the information

click on the create accout button.

4. Open the Teacher Activity1 Link and click on

5. Explain repl.it platform to the students. (explained in next slide)

Continued...

FOR TEACHER REFERENCE

CODING REFERENCE FOR TA

FOR TEACHER REFERENCE

CODING STEPS

STEP 1 : Adding ''Header" tag

Input :

Output :

Continued...

FOR TEACHER REFERENCE

CODING STEPS

STEP 2 : Adding ''Paragraph" tag

Input :

Output :

Continued...

FOR TEACHER REFERENCE

CODING STEPS

STEP 3 : Adding ''italic" and "bold" tags

Output :

Continued...

FOR TEACHER REFERENCE

CODING STEPS

STEP 4 : Adding an image to our project

Output :

Continued...

Input :

FOR TEACHER REFERENCE

CODING STEPS

STEP 5 : Adding background colors in the "style.css" file

Output :

Input :

FOR TEACHER REFERENCE

Introduction to
Web Development

Inside the "script.js" file, in place of "red" type "#000000".
RUN and check by clicking on the image.
Select the correct output from below:

Inside "style.css" file, change "background-color" to "red":
RUN and Check by clicking on the image.