2. More Html/CSS

Previous1. Introduction Next3. Bootstrap and user input

Last updated 4 years ago

Was this helpful?

2. More Html/CSS

Lesson objectives

Understand enough about HTML and CSS inorder to be able to move on to bootstrap tomorrow
Understand CSS is used to change the look and feel of elements on a webpage
Understand how to use CSS classes and selectors to change elements

Lesson time to deliever:

2 hours

Lesson Content

Slide Deck. This slide deck needs to be updated with what we will be covering. Use it & this lesson plan as a starting point for making your own slide deck. Skip the table slide.

Emmanuel Deck

Jacob Deck:

Html

Make sure to explain you must close every Tag

Pre/Br tags

How do you split this address up?

<p> 12 Fox Lane
London
SW1 8DD
</p>

Line breaks in html

A line break is a seperation of text through the creation of a new line, we can use this to format text such as address lines to create a single text with a text on each new line.

We can accomplish this through the use of three different ways

Break tag - Seperates the line where the tag is used - has no ending tags.

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <p>This<br>is<br>a<br>Line<br>Break<br>
    </body>
</html>

Pre tag - Keeps the formatting for the text exactly the same including line breaks and spaces.

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <pre>This is the pre tag              ,
             any information displayed in this tag
             preserves spaces and line breaks.
        </pre>
    </body>
</html>

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <p style="white-space: pre-line">
          abc
          def
          ghi
        </p> 
    </body>
</html>

A Tag

A tags let you link to another website, page or even element

<a href="https://tbhp.gitbook.io/thebeta/">A link to our course notes</a>

More on Divs

Go through Div tag. Explain usefulness: It is a general way to group together elements, especially for styling. Briefly explain and tell them we will be using in more depth when we get to css

What is a div tag? Div is a tag that we use to define a section / division in HTML. Also acts as a container for html elements to be styled in CSS

Class Ex: Practise <pre> <br> and <a> tags

CSS

Allows you to add styles. Styles change the appearance of an element and make it look lovely

Three ways of doing it:

The style tag allows us to do inline styles in the html
Can be a linked style sheet
Can use the style attribute on an element

Example of styling using style tag:

<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

</body>
</html>

The style tag must be placed within the head tag

Style attribute

Explain what an attribute is

Display same with style attribute Get students to do it and save as a new file

<html>
<head>
</head>
<body>

<div style="background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div style="background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

</body>
</html>

CSS in a separate file

Display same with CSS in seperate file and linked on html page. Get students to do it and save as a new file

<head>
	<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

CSS Selectors

How to target element to be styled:

By tag
By element id
By class

Inform we have been using class and demonstrate by tag (e.g. the h2 tag)

See Jacob slide deck for full description of CSS selectors

The box model

The power of Divs

Last lesson went through divs. But didn't explain why so useful. Styling is one of the places as you can group together elements to be styled in a certain way

<html>
<head>
<style>
.text-white{
  color: white;
}
.city-a {
  background-color: tomato;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
.city-b {
  background-color: black;
  text-transform: uppercase;
}
</style>
</head>
<body>
<div class="text-white">
  <div class="city-a">
    <h2>London</h2>
    <p>London is the capital of England.</p>
  </div>
  <div class="city-b">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
  </div> 
  <div class="city-a">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>
</body>
</html>

In this example we've styled all the text white, but styled the three blocks differently using divs

Closing to students

Html page |-> Css files |-> Js scripts

Teacher Recommendations:

Live server in vs code to live reload code
Have a split screen setup so don't have to switch screens as often.
Pre-prepare the html files for the exs for the students so can just jump right in and for example add the style attribute to an element.
DO NOT cover tables: won't be useful in next few days

What worked well in the past

What hasn't worked well in the past

Previous1. Introduction Next3. Bootstrap and user input

Last updated 4 years ago

Was this helpful?

2. More Html/CSS

Lesson objectives

Understand enough about HTML and CSS inorder to be able to move on to bootstrap tomorrow
Understand CSS is used to change the look and feel of elements on a webpage
Understand how to use CSS classes and selectors to change elements

Lesson time to deliever:

2 hours

Lesson Content

Slide Deck. This slide deck needs to be updated with what we will be covering. Use it & this lesson plan as a starting point for making your own slide deck. Skip the table slide.

Emmanuel Deck

Jacob Deck:

173KB

Web Dev_Lesson 2.pptx

Html

Make sure to explain you must close every Tag

Pre/Br tags

How do you split this address up?

<p> 12 Fox Lane
London
SW1 8DD
</p>

Line breaks in html

A line break is a seperation of text through the creation of a new line, we can use this to format text such as address lines to create a single text with a text on each new line.

We can accomplish this through the use of three different ways

Break tag - Seperates the line where the tag is used - has no ending tags.

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <p>This<br>is<br>a<br>Line<br>Break<br>
    </body>
</html>

Pre tag - Keeps the formatting for the text exactly the same including line breaks and spaces.

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <pre>This is the pre tag              ,
             any information displayed in this tag
             preserves spaces and line breaks.
        </pre>
    </body>
</html>

Using css styling:

<html>
    <title>Welcome to Web Development Lesson 2</title>
    <body>
        <p style="white-space: pre-line">
          abc
          def
          ghi
        </p> 
    </body>
</html>

A Tag

A tags let you link to another website, page or even element

<a href="https://tbhp.gitbook.io/thebeta/">A link to our course notes</a>

More on Divs

Go through Div tag. Explain usefulness: It is a general way to group together elements, especially for styling. Briefly explain and tell them we will be using in more depth when we get to css

What is a div tag? Div is a tag that we use to define a section / division in HTML. Also acts as a container for html elements to be styled in CSS

Class Ex: Practise <pre> <br> and <a> tags

CSS

Allows you to add styles. Styles change the appearance of an element and make it look lovely

Three ways of doing it:

The style tag allows us to do inline styles in the html
Can be a linked style sheet
Can use the style attribute on an element

Example of styling using style tag:

<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

</body>
</html>

The style tag must be placed within the head tag

Style attribute

Explain what an attribute is

Display same with style attribute Get students to do it and save as a new file

<html>
<head>
</head>
<body>

<div style="background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div style="background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

</body>
</html>

CSS in a separate file

Display same with CSS in seperate file and linked on html page. Get students to do it and save as a new file

<head>
	<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

CSS Selectors

How to target element to be styled:

By tag
By element id
By class

Inform we have been using class and demonstrate by tag (e.g. the h2 tag)

See Jacob slide deck for full description of CSS selectors

2. More Html/CSS

The box model

The power of Divs

Last lesson went through divs. But didn't explain why so useful. Styling is one of the places as you can group together elements to be styled in a certain way

<html>
<head>
<style>
.text-white{
  color: white;
}
.city-a {
  background-color: tomato;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
.city-b {
  background-color: black;
  text-transform: uppercase;
}
</style>
</head>
<body>
<div class="text-white">
  <div class="city-a">
    <h2>London</h2>
    <p>London is the capital of England.</p>
  </div>
  <div class="city-b">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
  </div> 
  <div class="city-a">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>
</body>
</html>

In this example we've styled all the text white, but styled the three blocks differently using divs

Closing to students

You can get CSS help from here:

Html page |-> Css files |-> Js scripts

Teacher Recommendations:

Live server in vs code to live reload code
Have a split screen setup so don't have to switch screens as often.
Pre-prepare the html files for the exs for the students so can just jump right in and for example add the style attribute to an element.
DO NOT cover tables: won't be useful in next few days