G5_C1
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-23 | TA Code Explanation |
39 | Activity Links |
CLASS STRUCTURE
Activity No: |
Slide No. |
Topic | Time |
---|---|---|---|
1 | 4 | 2min | |
2 | 5 | 5 min | |
3 | 9 | 4 min | |
4 | 14 | 6 min | |
5 | 25 | 10 min | |
6 | 30 | - | |
7 | 33 | 3 min |
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.
CSS
HTML
PRESENTATION
JavaScript
STRUCTURE
BEHAVIOR
Head
Body
Bones
STRUCTURE
PRESENTATION
HTML
TAGS
JavaScript
CONTENT
STRUCTURE
BEHAVIOR
The code blocks/lines highlighted in red need to be added.
TO DO: Add the HTML tags ("<h1>","<p>", "<b>", "<i>", "<img>"), add CSS to change background color, add JS to change the background color on click.
HTML
CSS
JavaScript
<body>
<h1>About Me</h1>
</body>
index.html
index.html
<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>
index.html
<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>
body {
background-color:orange;
color: white;
}
style.css
<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
Step 5 :
Output
Add JavaScript code
For example
Username: dodo2021
Password: Dodo@2021
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
Let's change the background color of your About Me page.
Hint:
Implement the changes in "style.css" file
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.
<p> tag stands for:
<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>
We used the "<p>" tag to write a description of our web page.
CSS
HTML
PRESENTATION
JavaScript
STRUCTURE
BEHAVIOR
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 |
Add Name | |
Additional Activity 2 |
Change Background |