Slides badge

HTML

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:

Image copyright jamiebalfour.scot

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>

Work through the HTML workbook from task 1 onwards using what you have seen in this lesson.

 

Remember to save each HTML file as a new file.

Task

Plenary

On your whiteboards, write the tag for each of the following:

  1. The title that appears in the tab in Chrome

  2. An image tag with an image found at image3.png

  3. A paragraph of text containing the word "Welcome!"

  4. A link to a page called page2.html

  5. The second-largest heading containing the words "Stage 1"

HTML practical assessment 1

  • You are going to be building your first webpage from scratch!
    You will have the whole period to do this.
  • Clear everything out of Notepad++

What to remember for your assessment

  • Save with .html at the end of the page
  • Save image files in the same folder or they won’t show
  • Create a folder for your webpage and anything associated with it
  • Open the webpage in your browser and refresh when you want to see changes
  • Save regularly and before you test it out in your browser

What you need to do

  • First identify the elements on the page.
  • When you have done that you must build the webpage shown as best as you can.
 
  • You are not allowed to validate the page
     

What you need to do

  • First identify the elements on the page.
  • When you have done that you must build the webpage shown as best as you can.
 
  • You are not allowed to validate the page
     

Finished solution

<html>
  <head>
    <title>My personal website</title>
  </head>
  <body>
    <h1>Welcome to my first webpage.</h1>
	<p>
	  This webpage is available on the local network for anyone to view.
	</p>
	<p>
	  On my website you will find the following information:
	</p>
	<ul>
	  <li>About me</li>
	  <li>My favourite things</li>
	  <li>People I follow</li>
	</ul>
	<p>
	  If you enjoy using my website, please feel free to visit my other
	  website at <a href="https://www.example.com">this page</a>.
	</p>
	<img src="me.jpg" alt="">
  </body>
</html>
Presentation Overview
Close
JB
HTML
© 2020 - 2024 J Balfour
17:05 | 23-05-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