Slides badge

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.

Presentation Overview
Close
JB
Styling pages
© 2020 - 2024 J Balfour
11:33 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files