HTML & CSS Lesson 1: HTML Basics Lesson 2: Adding ... & CSS Lesson 1: HTML Basics Create your first webpage is where you put the content e.g. text, images etc. You’re

HTML & CSS

Lesson 1: HTML Basics

Lesson 2: Adding Tables

Lesson 3: Intro to CSS

Lesson 4: CSS in more detail

Lesson 5: Review

Lesson 1: HTML Basics

HTML & CSS Lesson 1: HTML Basics

Starter1. Write main tile HTML & CSS 2. Write today’s date

Match the HTML tags with the description of what they do.

<u> </u> Makes the text BOLD

<head></head> Underlines the text

<body></body> Encloses the head of the HTML document

<p></p> Creates a link to another webpage

<h1></h1> Makes the text italic

<a href=”http://www.google.com”></a>

Encloses the body of the HTML document

<b></b> Formats the text to heading 1

<i></i> Creates a new paragraph of text


StarterHow did you do?

<u> </u> Underlines the text

<head></head> Encloses the head of the HTML document

<body></body> Encloses the body of the HTML document

<p></p> Creates a new paragraph of text

<h1></h1> Formats the text to heading 1

<a href=”http://www.google.com”></a>

Creates a link to another webpage

<b></b> Makes the text BOLD

<i></i> Makes the text italic


Learning

ObjectivesBy the end of the lesson you

will:

Understand the difference

between HTML and CSS

Be able to create a basic

webpage

Apply and extend your knowledge

to improve your basic webpage


HTML & CSS

Use the internet to find out what

the following stands for:

✓ HTML

✓ CSS

Extension - write one sentence to

explain the difference between the

two.


HTML & CSS

HTML (Hypertext Markup Language)

HTML is the language for describing web

pages.

CSS (Cascading Style Sheets)

A style sheet is a file that describes how

a HTML file should look.

The difference: HTML describes a webpage but CSS describes how it will look.


Getting

prepared

• Start

• Documents

In your Year 9 Computing

folder:

✓ Create a new folder called

HTML and CSS


Create your

first

webpage

A HTML page is called a

WEBPAGE

• Start

All

Programs

•

Accessories

• Notepad

• Type the

following

<!DOCTYPE html><html></html>

<!DOCTYPE html> Declares this is a HTML document<html> Opens the HTML code.</html> Closes the HTML code.

< > = opening tag</> = closing tag

All our HTML code must be enclosed in tags.


Create your

first

webpageAdd the following to your code.

<!DOCTYPE html><html><head></head></html>

<head>

contains

info about

your HTML

file e.g.

title

CHALLENGE

In between your head tags:

✓ Add title tags

✓ Insert your title as your name

Hint: your name would go in between the opening

and closing title tags


Create your

first

webpageThis is what it should look like.

<!DOCTYPE html><html><head><title> Mrs Dutta </title></head></html>

<head>

contains

info about

your HTML

file e.g.

title


Create your

first

webpage<body> is where you put the content e.g. text, images etc.

You’re getting the hang of it:After your closing head tag:✓ Add body tags (in the same way you added head tags) <body> </body>

You got it!In between your body tags:✓ Add your paragraph tags (in the same way you added title tags)

You superstar!In your paragraph tags:✓ Add Hi my name is ____. Here is an optical illusion.


Create your

first

webpageThis is what it should look like.

<!DOCTYPE html><html><head><title> Mrs Dutta </title></head><body><p>Hi my name is Mrs Dutta. Here is an optical illusion.</p></body></html>

<head>

contains

info about

your HTML

file e.g.

title

<body> is

where you

put the

content

e.g. text,

images etc.


Create your

first

webpage1. File Save2. Save in your HTML and CSS folder3. Call it Index.html


Congratulations!

1. Double click on your Index

file

YOU HAVE JUST CREATED A WEBPAGE!

In your books write the following:

The three things I would like to add to my webpage to make it look better are:

1.2.3.


Add the 3 things

to your websiteYou may go online

and find out how.

Struggling for ideas? Here are my 3 things:

1. Add a heading in the body

2. Add a picture in the body

3. Change the body background colour to light

green


Add the 3 things

to your website

1. Add a heading in the body <h1>Mrs Dutta</h1>

2. Add a picture in the body <img src=

“N:\Pictures\EHS logo.jpg” />

3. Change the background colour to light green

<body bgcolor=#A0DB8E>


Congratulations!

In your books write the following:

The three things I would like to add to my

webpage to make it look better are:

1.

2.

3.

Add which tags you used for each one.


Learning

ObjectivesUnderstand the difference

between HTML and CSS


webpage


to improve your basic webpage

In your book write the following:

3 things I have learnt today are:

1 thing I would like to learn about HTML is:

Lesson 2: Adding Tables

HTML & CSS Lesson 2: Adding Tables

Starter

In your books write down the tags used

1

2

3

Mark your work:

1. <h1> </h1>2. <p> </P>3. <img src= />

Don’t forget today’s date and title HTML Continued


Learning


will:

Understand how to add a table.


webpage and add a table.


to create a basic social

networking homepage.


Adding

Links<a href </a> adds a link.

Add the following to your code (Index.html) and see

what happens

<a href=http://www.esherhigh.surrey.sch.uk>Esher High School</a>

<!DOCTYPE html><html><head><title> Mrs Dutta </title></head><body bgcolor=#A0DB8E><h1>Mrs Dutta</h1><p>Hi my name is Mrs Dutta. Here are some little known facts about me.</p>

<a href=http://www.esherhigh.surrey.sch.uk>Esher High School</a><img src= "C:\Users\Sumantha\Pictures\EHS logo.jpg"/>

</body></html>


Adding

Links<br> </br> adds a new line.

Before: After:

Add <br> </br> so that your image appears on a new line after your link.


Social

Networking

•On Notepad click File New•File Save As Go to your Year 9 folder and HTML & CSS folder• Call it Social Networking.html

1. Create the basic HTML page using:

a. <!DOCTYPE html>b. <html> </html>c. <head> </head>d. <title></title> The title should be Friends Booke. <body> </body>


Tables

<table></table>

Add the table tags to the body of your HTML document.

<!DOCTYPE html><html><head><title> Friends Book </title></head>

<body></body></html>


Tables<tr></tr>

Adds rows to your table.

<!DOCTYPE html><html><head><title> Friends Book </title></head><body>

<table><tr> </tr>

</table>

</body></html>

Add two more rows to your table


Tables<!DOCTYPE html><html><head><title> Friends Book </title></head>

<body>

<table border="1px"><tr> <td>Header</td> </tr><tr> <td>Main</td></tr><tr> <td>Footer</td> </tr>

</table>

</body></html>

Add:

A border to your table

The table data<td> </td>


Tables

This is how it looks.

<table border="1px"><tr> <td>Header</td> </tr><tr> <td>Main</td> <td>2nd column</td></tr><tr> <td>Footer</td> </tr>

</table>


Tables<table border="1px"><tr> <td>Header</td> </tr><tr> <td>Main</td> <td>2nd column</td></tr><tr> <td>Footer</td> </tr>

</table>

Add to your HTML code to create the following:


Tables<!DOCTYPE html><html><head><title> Friends Book </title></head><body>

<table border="1px"><tr> <td>Header</td> </tr><tr> <td>Name</td> <td>Mrs Dutta</td></tr><tr> <td>School</td> <td>Esher High School</td> </tr><tr> <td>Footer</td> </tr></table>

</body></html>


PlenaryIn Fireworks:

• Create a new file that is 800px x 200 px

• Design a header for your social networking page

• Save it in your HTML & CSS folder and call it HeaderFile Export Wizard Save as JPG or GIF

Replace Header with your image

(look at Index.html to see how)

HTML & CSS Lesson 3: Intro to CSS

Lesson 3: Intro to CSS


Starter

Annotate

the

HTML

code.

<!DOCTYPE html>

<html>

<head>

<title> Friends Book </title>

</head>

<body>

<table border="1px">

<tr> <td>Header</td> </tr>

<tr> <td>Name</td> <td>Mrs

Dutta</td></tr>

<tr> <td>School</td> <td>Esher

High School</td> </tr>

<tr> <td>Footer</td> </tr>

</table>

</body>

</html>


Starter<!DOCTYPE html>

<html>

<head>

<title> Friends Book </title>

</head>

<body>


<tr> <td>Header</td> </tr>

<tr> <td>Name</td> <td>Mrs

Dutta</td></tr>

<tr> <td>School</td> <td>Esher

High School</td> </tr>

<tr> <td>Footer</td> </tr>

</table>

</body>

</html>

1

2

3

4

5

6


Learning


will:

Understand how CSS is used to

style HTML

Be able to create a basic CSS

file


to add elements to CSS file


<div>

tag<div></div> Allows us to divide the page into different

pieces.

✓ Start Computer Student Share✓ ICT ICT✓MISS DUTTA✓ Year 9✓ HTML & CSS✓ Copy and paste DIV.html into your Year 9 HTML & CSS folder

✓ Open it in Notepad


<div>

tag

<div></div> Allows us to divide the page into different

pieces.

<!DOCTYPE html><html><head><title>Result</title></head><body>

<div style="width:50px; height:50px; background-color:red"></div><div style="width:50px; height:50px; background-color:blue"></div><div style="width:50px; height:50px; background-color:green"></div>

</body></html>

Create a new <div> and give it the

background yellow.


<div>

tag<!DOCTYPE html><html><head><title>Result</title></head><body>

<div style="width:50px; height:50px; background-color:red"></div><div style="width:50px; height:50px; background-color:blue"></div><div style="width:50px; height:50px; background-color:green"></div><div style="width:50px; height:50px; background-color:yellow"></div>

</body></html>


<div>

tag<div></div>

✓ Useful for CSS

✓ Allows us to create visual

objects like menus, sidebars and

more...


CSS

CSS (Cascading Style Sheets)

A style sheet is a file that describes how

a HTML file should look.

The difference: HTML describes a webpage but CSS describes how it will look.

We need to create a different CSS file which

will be attached to our HTML document.


CSS

✓ Start Computer Student Share

✓ ICT ICT

✓ MISS DUTTA

✓ Year 9

✓ HTML & CSS

✓ Copy and paste CSS Intro.html into your Year 9

HTML & CSS folder



CSS<!DOCTYPE html>

<html>

<head>

<link type="text/css"

rel="stylesheet"

href="stylesheet.css"/>

<title>Fancy Fonts</title>

</head>

<body>

<p>I'm a paragraph written in

red font, but one of my words

is <span>blue</span>!</p>

</body>

</html>

This is where we attach the CSS file which says that text

should be in red…


rel="stylesheet"



CSS

<link /> is where we link the CSS file to the

HTML document. It is self-closing (doesn’t

need </link>)


rel="stylesheet"


type should always be equal to “text/css”


rel="stylesheet"


rel should always be equal to “stylesheet”


rel="stylesheet"


href (remember this is how we add a link) This

should point to your CSS file


CSS

•Create a new Notepad file

•File Save (in your HTML & CSS

folder)

•Call it stylesheet.css

p {

color: red;

}

span {

/write your CSS here/

}


CSS

1. Type the above code in your CSS file

2. Replace /write your CSS here/ to make the

color blue

p {color: red;}

span {color:blue;}


Here is

what we

have so far

<!DOCTYPE html>

<html>

<head>


rel="stylesheet"



</head>

<body>

<p>I'm a paragraph written in red

font, but one of my words is

<span>blue</span>!</p>

</body>

</html>

p {

color: red;

}

span {

color:blue;

}


CSS

1. Add to the CSS file so that the text in the <span></span> tags are cursive.

font-family: cursive;

2. Add to the CSS file so that the text in the <p></p> tags are size 100px.

font-size: 100px;

p {

color: red;

font-size:100px;

}

span {

color:blue;

font-

family:cursive;

}

Open your CSS

Intro.html in the

Internet browser to

see what it looks

like now.

BEFORE


Plenary

In your books: Today’s date and Title: Intro to

CSS

1. What does CSS stand for?

2. What are 3 advantages of using CSS stylesheets

instead of including all the formatting within

the HTML document?

In your books:

1. What does CSS stand for? Cascading Style

Sheets.

2. What are 3 advantages of using CSS stylesheets

instead of including all the formatting within

the HTML document?

You can re-use the CSS file for other HTML files;

saves time because you don’t have to keep

typing the formatting rules; keeps the code

neat.

HTML & CSS Lesson 4: CSS in more detail

Lesson 4: CSS in more detail


Recap of previous lessons

In your books write today’s date and title:

CSS in more detail

Complete the following sentences:

• The difference between HTML and CSS is…

• The opening and closing tags for a HTML

document are…

• I would write the following on a CSS

stylesheet if I wanted to change the

writing in a paragraph to red…

Starter


Learning


will:

Understand CSS syntax.

Be able to amend CSS file and

add new <div></div> tags to HTML

document.


to create a ‘family tree’ for

HTML.


CSS Syntax

What does syntax mean?

The grammar of a programming language.

Syntax of CSS:

Selector {

Property: value;

}

Example:

p{

color: red;

}

Your Year 9 HTML & CSS folder

Open stylesheet.css from last lesson

in notepad.


CSS Syntax

TASKS1. CSS - Change the font color for paragraphs to green2. CSS - Change anything in <span></span> tags into the color

red3. HTML - Open your CSS Intro.html file in notepad and change

the writing in <p></p> to say I’m a paragraph written in green font, but one of my words is green

p {

color: red;

font-size:100px;

}

span {

color:blue;

font-family:cursive;

}


CSS Syntax

p {

color: green;

font-size:100px;

}

span {

color:red;


}

<!DOCTYPE html>

<html>

<head>


rel="stylesheet"



</head>

<body>

<p>I’m a paragraph written in green

font, but one of my words is

<span>green </span>!</p>

</body>

</html>

✓ Start Computer Student Share

✓ ICT ICT

✓ MISS DUTTA

✓ Year 9

✓ HTML & CSS

✓ Copy and paste More CSS.html into your Year 9

HTML & CSS folder




You can see that it re-uses the

stylesheet.css that we used for CSS

Intro.html

Create your

own stylesheet

TASK: Change stylesheet.css so that your

HTML webpage looks like this:

Font = arialSize= 50px

Size= 50px

Font=cursiveStyle=italic


Create your

own stylesheet

h3 {

color:blue;

font-family:arial;

font-size:50px;

}

p {

color: red;

font-size:30px;

}

span {

color:green;


font-style:italic;

}


Adding HTML

Add a new <div></div> to add the

following underneath what you already

have in the body of More CSS.html


Adding CSS

You can add one rule for the whole

HTML document by using the * symbol.

Add a border to every element on the

HTML page by adding the following to

your CSS:

* {

border: 2px solid black;

}

Change your CSS so that ALL the text is

blue. Hint: you need to delete the other

colours you have set.


Plenary

You can think of the structure of an

HTML document as a family tree.

Example: <HTML> is the trunk of the

tree and <head> and <body> are its

children.

TASK: Create a new html

file called HTML Tree.html

Create the HTML code and

amend the CSS to create

this page.

Table with border 1 px

Font is Arial

h1 size 100px

h2 size 60px

h3 size 30px


HTML Tree.html

<!DOCTYPE html>

<html>

<head>

<link type="text/css" rel="stylesheet"


<title>HTML Tree</title>

</head>

<body>


<tr><td><h1>HTML</h1></td></tr>

<tr><td><h2>Head</h2></td><td><h2>Body</h2

></td></tr>

<tr><td><h3>Table</h3></td><td><h3>Div</h3

></td></tr>

<tr></tr>

</table>

</body>

</html>


stylesheet.css

h1 {

color:green;

font-size:100px;

}

h2 {

color:blue;

font-size:60px;

}

h3{

color:red;

font-size:30px;

}

* {

font-family:arial;

}

HTML & CSS Lesson 5: Review of HTML & CSS

Lesson 5: Review of HTML & CSS


www.codeacademy.com

Open in Google Chrome.

Log in using your school email address

and password esher

Select HTML & CSS


www.codeacademy.com

Complete the following lessons.

HTML Basics

CSS: An Overview

Extension:

HTML Basics II

CSS Selectors