Slides badge

HTML tags and elements

Learning Intentions

  • Learn how to build a website

  • Understand the different requirements that are needed for creating a webpage

Success Criteria

  • I will be able to modify an HTML webpage
  • I will be able to use tools to examine existing web pages
  • I will be able to save and preview a webpage

Starter

Get in to groups and discuss what is needed to create and view a Google Site.

What are we learning and why?

  • The basis of computer science is code. We've looked at building projects using programming environments like Scratch in S1.

  • This will introduce you to code.

  • Web[site] development is one of the biggest areas of development in today's technology environment.

  • That means, yes, you are going to be writing some code in this unit!

How websites work

  • To create a website, you often need to code. However, there are alternatives. In S1 you developed your own profile websites. The software we were using was Google Sites.

  • Computers require certain hardware in order to connect to the internet. For a start, we need a computer, and an internet connection.

How websites work

  • Since we drag-and-drop the content on to the page in Google Sites, we called this a What You See Is What You Get (WYSIWYG) editor.

  • This is much easier to do than writing code at first, but it slowly becomes more complicated to manage. 

  • On top of this, we can do a lot more with code than we can ever do with WYSIWYG.

Warm up activity

Open up the interactive worksheet from Google Classroom. Answer the questions up to Working with a webpage

Viewing the source code of a page

Inspecting and changing a page

Activity

Complete the worksheet up to Your First Webpage.

HTML

  • Webpages are created with HTML or Hyper Text Markup Language

  • Throughout the next few lessons we are going to be using HTML to build several webpages.

HTML tags

  • HTML is made up of tags. The following image is the structure of a tag.

Image copyright jamiebalfour.scot

The basic structure of a page

  • This is sometimes referred to as the basic structure of a webpage.

  • For the next task, you are going to be creating a very simple page about yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>My wee about page</title>
  </head>
  <body>
    <p>My name is</p>
    <p>My favourite subject is</p>
    <p>My favourite food is</p>
    <p>My favourite colour is</p>
  </body>
</html>
Presentation Overview
Close
JB
HTML tags and elements
© 2020 - 2025 J Balfour
14:29 | 15-05-2025
Join Live Session
Go Live
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Fullscreen
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:

      Apply theme

      Blue theme
      White theme

      More effects:

      ×
      Loading
      All slideshow files