Comment on page
2. More Html/CSS
- 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
2 hours
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
Web Dev Lesson 2.pptx
704KB
Binary
Jacob Deck:
Web Dev_Lesson 2.pptx
173KB
Binary
Make sure to explain you must close every Tag
How do you split this address up?
<p> 12 Fox Lane
London
SW1 8DD
</p>
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
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
<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
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>
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>
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
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
Html page
|-> Css files
|-> Js scripts
- 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
Last modified 2yr ago