html & css lesson 1: html basics lesson 2: adding ... & css lesson 1: html basics create...
TRANSCRIPT
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
HTML & CSS Lesson 1: HTML Basics
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
HTML & CSS Lesson 1: HTML Basics
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 Lesson 1: HTML Basics
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 Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
Getting
prepared
• Start
• Documents
In your Year 9 Computing
folder:
✓ Create a new folder called
HTML and CSS
HTML & CSS Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
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
HTML & CSS Lesson 1: HTML Basics
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
HTML & CSS Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
Create your
first
webpage1. File Save2. Save in your HTML and CSS folder3. Call it Index.html
HTML & CSS Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
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
HTML & CSS Lesson 1: HTML Basics
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>
HTML & CSS Lesson 1: HTML Basics
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.
HTML & CSS Lesson 1: HTML Basics
Learning
ObjectivesUnderstand the difference
between HTML and CSS
Be able to create a basic
webpage
Apply and extend your knowledge
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
HTML & CSS Lesson 2: Adding Tables
Learning
ObjectivesBy the end of the lesson you
will:
Understand how to add a table.
Be able to create a basic
webpage and add a table.
Apply and extend your knowledge
to create a basic social
networking homepage.
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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.
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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:
HTML & CSS Lesson 2: Adding Tables
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>
HTML & CSS Lesson 2: Adding Tables
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
HTML & 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>
HTML & CSS Lesson 3: Intro to CSS
Starter<!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>
1
2
3
4
5
6
HTML & CSS Lesson 3: Intro to CSS
Learning
ObjectivesBy the end of the lesson you
will:
Understand how CSS is used to
style HTML
Be able to create a basic CSS
file
Apply and extend your knowledge
to add elements to CSS file
HTML & CSS Lesson 3: Intro to CSS
<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
HTML & CSS Lesson 3: Intro to CSS
<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.
HTML & CSS Lesson 3: Intro to CSS
<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>
HTML & CSS Lesson 3: Intro to CSS
<div>
tag<div></div>
✓ Useful for CSS
✓ Allows us to create visual
objects like menus, sidebars and
more...
HTML & CSS Lesson 3: Intro to CSS
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.
HTML & CSS Lesson 3: Intro to CSS
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
✓ Open it in Notepad
HTML & CSS Lesson 3: Intro to CSS
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…
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"/>
HTML & CSS Lesson 3: Intro to CSS
CSS
<link /> is where we link the CSS file to the
HTML document. It is self-closing (doesn’t
need </link>)
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"/>
type should always be equal to “text/css”
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"/>
rel should always be equal to “stylesheet”
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"/>
href (remember this is how we add a link) This
should point to your CSS file
HTML & CSS Lesson 3: Intro to CSS
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/
}
HTML & CSS Lesson 3: Intro to CSS
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;}
HTML & CSS Lesson 3: Intro to CSS
Here is
what we
have so far
<!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>
p {
color: red;
}
span {
color:blue;
}
HTML & CSS Lesson 3: Intro to CSS
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
HTML & CSS Lesson 3: Intro to CSS
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
HTML & CSS 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
HTML & CSS Lesson 4: CSS in more detail
Learning
ObjectivesBy the end of the lesson you
will:
Understand CSS syntax.
Be able to amend CSS file and
add new <div></div> tags to HTML
document.
Apply and extend your knowledge
to create a ‘family tree’ for
HTML.
HTML & CSS Lesson 4: CSS in more detail
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.
HTML & CSS Lesson 4: CSS in more detail
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;
}
HTML & CSS Lesson 4: CSS in more detail
CSS Syntax
p {
color: green;
font-size:100px;
}
span {
color:red;
font-family:cursive;
}
<!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 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
✓ Open it in Notepad
HTML & CSS Lesson 4: CSS in more detail
HTML & CSS Lesson 4: CSS in more detail
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
HTML & CSS Lesson 4: CSS in more detail
Create your
own stylesheet
h3 {
color:blue;
font-family:arial;
font-size:50px;
}
p {
color: red;
font-size:30px;
}
span {
color:green;
font-family:cursive;
font-style:italic;
}
HTML & CSS Lesson 4: CSS in more detail
Adding HTML
Add a new <div></div> to add the
following underneath what you already
have in the body of More CSS.html
HTML & CSS Lesson 4: CSS in more detail
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.
HTML & CSS Lesson 4: CSS in more detail
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 & CSS Lesson 4: CSS in more detail
HTML Tree.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="stylesheet.css"/>
<title>HTML Tree</title>
</head>
<body>
<table border="1px">
<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>
HTML & CSS Lesson 4: CSS in more detail
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
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
HTML & CSS Lesson 5: Review of HTML & CSS
www.codeacademy.com
Complete the following lessons.
HTML Basics
CSS: An Overview
Extension:
HTML Basics II
CSS Selectors