!
Spot the mistakes in the HTML
<!doctype html>
<hmtl>
<head>
<h1>Sample webpage</h1>
</head>
<body style="colour:green;">
<title>My website</title>
<para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
</body>
</hmtl>Spot the mistakes in the HTML
<!doctype html>
<hmtl>
<head>
<h1>Sample webpage</h1>
</head>
<body style="colour:green;">
<title>My website</title>
<para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
</body>
</hmtl>Understand how websites are built with HTML, CSS and JavaScript
Be able to write use CSS to style a webpage
You will not learn to code from simply being told how to do it, learning to code becomes more natural the more you do by learning it yourself.
Image copyright jamiebalfour.scot
p {
color : green ;
}
The selector
The properties and property values
p {
color : green ;
}
Describes what we want to style
Describes how we want to style it
<!doctype html>
<html>
<head>
<title>A sample webpage</title>
<style>
h1 {
background : green;
}
p {
font-size: 25px;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>Welcome to my website!</p>
</body>
</html>h1 {
background: green;
}
.green_text {
color: green;
}
#main_content {
width: 600px;
}(Text) colour
font-color: green;
font-color: #0a0;Background colour
background-color: red;
background-color: #a00;Font size
font-size: 14px;
font-size: 12pt;Font family
font-family: "Times New Roman", serif;
font-family: "Helvetica", "Calibri", sans-serif;Width
width: 500px;
width: 50%;Height
height: 300px;
height: 50%;Padding
padding: 5px;Margin
margin: 5px;Border
border: 1px gray solid;h1 {
}h1 {
}<p class="green_bg">
This paragraph should be green
</p>
<img id="big_image" src="image1.jpg">h1 {
}Notice the class attribute
Notice the ID attribute
.green_bg{
background: green;
color: #fff;
}
#big_image {
width: 600px;
height: 500px;
}h1 {
}A dot represents a class selector
A hash sign represents an ID selector
<div>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</div>.column {
display: inline-block;
width: 50%;
margin: -1px;
padding: 0;
}.column {
display: inline-block;
width: 50%;
margin: -1px;
padding: 0;
}Now that you have a bit of CSS knowledge, you can now add some CSS to your own websites!
Use the CSS booklet to help you to add CSS to your websites.
<head>
<style>
#main_content{
padding:10px;
}
.clear_image{
background: #eee;
border: 2px #000 solid;
border-radius:7px;
}
</style>
</head>
<body>
<div id="main_content">
<img class="clear_image" src="" alt="Me" />
</div>
</body><head>
<style>
#main_content{
padding:10px;
}
.clear_image{
background: #eee;
border: 2px #000 solid;
border-radius:7px;
}
</style>
</head>
<body>
<div id="main_content">
<img class="clear_image" src="" alt="Me" />
</div>
</body>Internal stylesheets are placed within a <style> tag in the head of the HTML page
<head>
<style>
#main_content{
padding:10px;
}
.clear_image{
background: #eee;
border: 2px #000 solid;
border-radius:7px;
}
</style>
</head>
<body>
<div id="main_content">
<img class="clear_image" src="" alt="Me" />
</div>
</body>Internal stylesheets are placed within a <style> tag in the head of the HTML page
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="main_content">
<img class="clear_image" src="" alt="Me" />
</div>
</body>#main_content{
padding:10px;
}
.clear_image{
background: #eee;
border: 2px #000 solid;
border-radius:7px;
}<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main_content">
<img class="clear_image" src="" alt="Me" />
</div>
</body>#main_content{
padding:10px;
}
.clear_image{
background: #eee;
border: 2px #000 solid;
border-radius:7px;
}style.css
home.html
<body>
<div id="main_content">
<img style="background:green; border: 2px #000 solid;" src="" alt="Me" />
</div>
</body>Answer the following questions:
The following are key shortcuts for using DragonSlides and reveal.js.
| Key combination | Action |
|---|---|
| →, PAGE DOWN, SPACE | Next slide |
| ←, PAGE UP | Previous slide |
| SHIFT + → | Last Slide |
| SHIFT + ← | First slide |
| B | Whiteboard |
| W | Widget Board/White Screen |
| C | Toggle Notes Canvas |
| DEL | Clears Whiteboard/Notes Canvas |
| S | Show Presenter Mode |
| SHIFT + D | Toggle Dark Mode |
| H | Goes to the Home Slide |
| META + P | Show Print options window |
In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.
DragonSlides and jamiebalfour.scot are copyright © Jamie B Balfour 2017 - 2024, 2010 - 2024. Content is copyright © Jamie B Balfour