Slides badge

HTML

Draw a sitemap for the following website

Learning Intentions

  • To develop a simple webpage using just HTML

  • To develop an understanding of what HTML is used for and what it is not capable of

Success Criteria

  • I can build a webpage using HTML
  • I understand that there are limitations to web technologies such as HTML

What is HTML?

  • HTML or Hyper Text Mark-up Language, is a coding language that is used to develop webpages.
  • HTML deals with the content that we put in our pages but doesn’t deal with the appearance of the content.

HTML tags

HTML pages are made up of tags:

What you need to know for S3

  • For S3, you need to know about several different tags including:
    • Paragraph tags
    • The list tags (unordered and ordered)
    • The link tag
    • The heading tags (H1 - H6)
    • The image tag

HTML structure

<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

HTML structure

<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

Building a simple webpage with HTML

Some tags

<a href="page2.html">To another page</a>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

Some tags

<p>A short paragraph</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<img src="image1.png">

Sample webpage

<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Complete the HTML task

Build a webpage about you. You should include:

  • An image
  • Several paragraphs
  • A bulleted list
  • A numbered list
  • Headings

Task

Plenary

Presentation Overview
Close
JB
HTML
© 2020 - 2024 J Balfour
16: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:

      ×
      All slideshow files