Slides badge

html

Spot the mistakes

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

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>

Learning Intentions

  • Understand how websites are built with HTML, CSS and JavaScript

  • Be able to write some HTML

Success Criteria

  • I can explain how HTML, CSS and JavaScript are needed to build a webpage
  • I can write HTML tags such as the paragraph, image, link and break

What is HTML?

  • HTML is one of the three components for front-end web development, with the others being CSS and JavaScript.
  • HTML is composed of elements and tags.
  • Every webpage, even if built with a WYSIWYG editor like Google Sites, uses HTML underneath. The client's web browser translates the HTML into a webpage.

What is HTML?

  • As part of the three programming languages that make a website, HTML focuses only on the content of the webpage, with CSS focusing on the layout and style of the page and JavaScript on the interaction that the users have with the webpage.
  • On its own, HTML is the most boring thing in computer science since it lacks any colour or layout.

What does HTML look like?

  • HTML pages are made up of tags:

What does HTML look like?

<!doctype html>
<html>
  <head>
    <title>A sample webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Welcome to my website!</p>
    <p>This is my first HTML webpage!</p>
  </body>
</html>

HTML webpage

Using HTML

  • As mentioned previously, HTML is composed of tags and attributes. Tags normally, but not always, also feature a closing tag:
<!doctype html>
<html>
  <head>
    <title>A sample webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Welcome to my website!</p>
    <p>This is my first HTML webpage!</p>
  </body>
</html>

Some HTML tags

Paragraph:

<p>Text in here</p>

An image

<img src="image1.jpg" alt="Image 1">

A link

<a href="example.com">Click here to go to example.com</a>

Some HTML tags

Numbered (ordered) list

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Bulleted (unordered) list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Some HTML tags

A division

<div>Other code goes here</div>

A span

<span>Other code goes here</span>

A link with an image in it

<a href="example.com">
  <img src="image1.jpg" alt="Image 1">
</a>

Some HTML tags

A table

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Using the HTML workbook and the HTML tags shown in this lesson you will be creating a simple webpage, and eventually website, about you. 

Task

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