Styling pages

Learning Intentions

Learn how to use several HTML tags to create a webpage
Learn how to style a page using basic inline CSS

Success Criteria

I will be able to modify an HTML webpage
I will be able to save and preview a webpage

Some HTML

Below is some HTML similar to what you have been looking at in the last few weeks:

<!DOCTYPE html>
<html>
  <head>
    <title>Orange page</title>
  </head>
  <body style="background-color: orange;">
    <h1>Orange page</h1>
    <p>This is the a paragraph of text</p>
    <img src="oranges.jpg">
  </body>
</html>

Some HTML

Below is some HTML similar to what you have been looking at in the last few weeks:

<body style="background-color: orange;">

What do you think the style="background-color: orange;" means?

Today's task

In today's task you're going to be styling certain parts of the page.
To do this, you look to the opening tag and write style="".
In the quote marks, you put whatever you want to style about that inside there:

You can style multiple things at the one time using semicolons (;) in between them:

<p style="color: green;">

<p style="color: green; font-size: 25pt;">

Activity

Using the information in the worksheet, add the HTML and style the monkeys.html page.

<p style="color: green;">

<h1>Heading</h1>

Hello<br>world

Useful code snippets

<img src="image1.jpg" width="300">

<strong>This is bold</strong>
					This is not

If you finish you can move on to the volcanos.html extension task.

Presentation Overview

Keywords

DragonDocs Management

Random selector

Remove after pick

Set a timer for how long?

10:00

5:00

3:00

2:30

2:00

1:00

...

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

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.

Feedback 👍

Accessibility

Apply a filter:

Apply theme

Blue theme

White theme

More effects:

Dark Mode

Bold Text

Slide Zoom

All slideshow files