G5_C3
Topic
TA : Teacher Activity
SA : Student Activity
SAA : Student Additional Activity
FOR PREPARATION & REFERENCE
Slide No. |
Topic |
---|---|
2 | Class Structure |
3 | Class Prerequisites |
12-20 | TA Code solution |
41-43 | SAA Code Solution |
44 | Activity Links |
CLASS STRUCTURE
Activity No: |
Slide No. |
Topic | Time |
---|---|---|---|
1 | 4 | 2min | |
2 | 5-7 | 4 min | |
3 | 9 | 4 min | |
4 | 10-11 | 8 min | |
5 | 12-22 | 10min | |
6 | 23-31 | 5 min | |
7 | 32-34 | 2 min | |
8 | 39-42 | - |
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.
<h2>
<h1>
<h6>
"h1" tag gas the largest font size followed by the "h2" tag.
"h6" has the smallest font size.
Yes, the "<b>" tag is used to bold the words present in a paragraph.
***note for Illustrator ***
GIF1 Daisy waving hand
In the talk bubble "Create an About Me on your notebook"
Students: Ok MA'AM
Create an About Me on your notebook
Ok MA'AM
Ok MA'AM
Ok MA'AM
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and and draw.
In My free time I play outdoor games.
***For Illustrator reference***
GIF1 Daisy at home on her study table.
Camera shift on her notebook she writes "About herself"
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and paint.
I love to code and I am a Ninja Coder
***For Ilustrator reference***
GIF 1:
Think Bubble: Let me use colors to beautify my page.
***For Ilustrator reference***
GIF 2:
Teacher praising her for her work.
***For Ilustrator reference***
About Me page has a color and About me written with Crayon color and some flowers are made on it
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and draw.
In My free time, I play outdoor games.
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and paint.
I love to code and I am a Ninja Coder
***For Ilustrator reference***
Image 1 and 2 before after of About Me page.
GIF2- Gmail page without CSS and with CSS
***For Illustrator reference***
Add GIFs of all changes
GIF1- background of a website changes
GIF2-
Color of the text changes
GIF3-
Font size Changes
CSS (Cascading Style Sheets) is used to format the layout of the webpage
Color
Font
Text Size
Background
Some Changes CSS can do
Image Size
GIF4-
Text size changes
GIF5-
Images size changes in a website
***For Illustrator reference***
Add GIFs of all changes
GIF1- background of a website changes
GIF2-
Color of the text changes
GIF3-
Font size Changes
TO DO: Revise the concepts from the previous class
<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>
1. An Inline CSS defines the "style" attribute of a single HTML element
2. Add "style" element to "<h1>" and "<p>" tags and run the project
1. An Internal CSS defines the "<style>" attribute of a single HTML page
2. Define "<style>" tag inside "<head>" tag as mentioned in the image
1. An external CSS defines the "style" attribute of many HTML pages.
2. To use an external style sheet, add a link to it in the "<head>" section of the HTML page:
Specifies the location of linked documents
Specifies the relation b/w current document & linked document
Specifies the media type of linked document
3. In the "Files" section, go to the "style.css" file.
3. Add the changes you want to do.
Changes the background color of the page
Aligns the texts
Changes the color of h1 tags to blue
Changes the color of all the paragraphs to red
1. Search for bit.ly/activityc3
2. Click on Fork
STEP 1: Change the first "<p>" tag's color to red and "<h1>" tag's color to darkblue
Input
Output
Before
After
STEP 2: Change the color of all the "<p>" tags to red.
Input
Output
Before
After
External CSS
1. Search for bit.ly/activityc3a in a new tab and click on fork
2. Link the "style.css" file to "index.html" and press Run
Hint:
How many ways are there to add CSS?
2 ways
3 ways
4 ways
Inline CSS, Internal CSS, External CSS
Which type of CSS is shown in the image?
This is an example of "Internal CSS" as you can see "<style>" tag is added in "index.html" file.
TO DO: Add a button and chage the alignment of the text.
TO DO: Add a button and change the alignment of the text.
TO DO: In the same code, change the background color of the screen to powerblue by implementing "Internal CSS"
TO DO: In the same code, change the background color of the screen to powerblue by implementing "Internal CSS"
ACTIVITY NAME | LINK | |
---|---|---|
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 Page | |
Additional Activity 1 Solution |
All About Me Page | |
Additional Activity 1 | All About Me Page | |
AA2- Solution |