Immersion 1 Coding@Schools

  • In Immersion 1, participants will learn the building blocks of web development with HTML, CSS and JavaScript to create basic websites.
  • Coding@Schools.com
  • 2016 © StartupMalaysia.org
  • 89 pages

ContentsInternet Basics
HTML
CSS
JAVAScript

Internet Basics What are Computers?

Internet Basics What is the Internet?

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

EXERCISES

1. Add a heading to the paragraph with the text "London".

Hint : add a < h1 > element.

< h1 > London< /h1 >

2. Add six headings to the document with the text "Hello" Start with the most important heading and end with the least important heading.

Hint : use < h1 >, < h2 > and so on.

< h1 > Hello < /h1 >
or < h2 > Hello < /h2 >,
or < h3 > Hello < /h3 >,
or < h4 > Hello < /h4 >,
or < h5 > Hello < /h5 >,
or < h6 > Hello < /h6 >

3. Add a paragraph to this document with the text "Hello World!"

Hint :
< !DOCTYPE html >
< html >
< body >

< /body >
< /html >

< p > Hello World! < /p >

EXERCISES

4. From the code below, where to change if I want to double the size of the image?

Hint :
< !DOCTYPE html >
< html >
< body >
< img src="programming.gif" alt="Computer Man" width="48" height="48" >
< /body >
< /html >

width="48" & height="48"

5. Add a link to the code below (make it go to "www.d-code.co" if you click on it).

Hint :
< !DOCTYPE html >
< html >
< body >
< img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:48px" >
< /body >
< /html >

< a href="www.d-code.co">
< img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:48px" >
< /a >

CSS

CSS

CSS

CSS

CSS

CSS

CSS

CSS

EXERCISES

1. Create a background color of a heading "Hello Sabah" and a paragraph "D-code in Sabah"

Hint : any color will do.

< h2 style="background-color: white;"> Hello Sabah < /h2 >
< p style="background-color: white;">
D-code in Sabah < /p >

2. Write the codes in order to display a result below :

Output Result :

< !DOCTYPE html >
< html >
< head >
< style >
body{
background-color: #4f4f4f;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
< /style >
< /head >
< body >
< h1 style="color:yellow;"> This is a Heading < /h1 >
< p style="color:white;" > This is paragraph < /p >
< /body >
< /html >

3. With the same result above, now change the color of the heading to "red" and change the font of the paragraph to "courier".

Hint : change heading color to red and add font family of
paragraph to courier.

< !DOCTYPE html >
< html >
< head >
< style >
body{
background-color: #4f4f4f;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
p {font-family: Courier, "Courier New", monospace;"}
< /style >
< /head >
< body >
< h1 style="color:red;"> This is a Heading < /h1 >
< p style="color:white;> This is paragraph < /p >
< /body >
< /html >

EXERCISES

4. How many ways to link a CSS to HTML? What are they?

Hint : Inline..

There are 3 ways to link CSS to HTML.
1) Inline CSS
2) Internal (Embedded) CSS
3) External CSS

5. Write the codes in order to display the result below :

Output Result :

< !DOCTYPE html >
< html >
< head >
< style >
body{
background-color: #4f4f4f;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
< /style >
< /head >
< body >
< h1 style="color:yellow;"> This is a Heading < /h1 >
< p style="color:white;> This is paragraph < /p >
< p style="color:white;" > This is also paragraph < /p >
< p style="color:white; background-color: red;" > I want to be a special paragraph < /p >
< /body >
< /html >

JAVAScript

JAVAScript

JAVAScript

JAVAScript

Popup Boxes

Popup Boxes

JAVAScript

Working with Variables

Working with Variables

JAVAScript

JAVAScript

JAVAScript

JAVAScript Events

JAVAScript

JAVAScript

EXERCISES

1. How many way(s) to place JavaScript? Name the possible answer(s)?

Hint : In and Out methods

There are 2 ways to place JavaScript.
1) Internal Method
2) External Method

2. From the answer to the question above, write down the codes :

Hint : < head >, < body >..

1) Internal Method :
You can write javascript between the < script > and tags. Put the JavaScript inside a script element either in the "< body >" or the "< head >" sections of an HTML.

< head >
< script type="text/javascript" >
var myVar="hello";
function showAlert() {
alert('Welcome!'); }
< /script >
< /head >

< body >
< script >
alert('Hello World!');
document.write('Welcome to World of JavaScript');
< /script >
< /body >

2) External Method :
Define the scripts in a separate file and link to them using the "src attribute" of the script tag. The type must be set to "text\javascript", and optionally the language attribute set to JavaScript required for your script.
< script type="text/javascript" src="scriptName.js">< /script >

3. JavaScript MUST be written with CSS in order to produce a Webpage, TRUE or FALSE?

Hint : CSS is used to describe the presentation of Webpage.

TRUE

4. What is the tag used for JavaScript?

Hint : script tag

< script > ... < /script >

5. Name 4 event handlers in JavaScript?

Hint : on..()

onBlur()
onChange()
onClick()
onSubmit()

EXERCISES

6. An IF statement does not require an else statement must be preceded by an IF statement. TRUE or FALSE?

Hint : 'if...' statement or 'if...else' statement.

TRUE

7. Write an IF statement with the following condition: 10 is greater than 5.

Hint :
if (condition){
//code executed if condition is true
}

< script >
var x = 10;
if ( x >= 5){
document.write('10 is greater than 5');
}
< /script >

8. Write an IF/ELSE statement with the following condition :
If the variable age is greater that 18, output "Old enough", otherwise output "too young"

Hint :
if (condition){
//code executed if condition is true
} else {
//code to be executed if the condition is false
}

< script >
var age = 30;
var y = 18;

if (age > y){
document.write('Old enough');
} else {
document.write('Too young');
}
< /script >

jQuery