1 of 20

HTML�BASICS

HTML�BASICS

Content developed by Kathryn Barrett and Kassandra Lenters for Canada Learning Code

2 of 20

WHY DO WE MAKE WEBSITES?

3 of 20

HOW IS A WEBSITE MADE?

  1. Draw it on a piece of paper and take a photo
  2. Use a writing program like Microsoft Word
  3. Yell at the computer until it makes a website
  4. Write code

4 of 20

WEBSITES ARE MADE USING CODE!

5 of 20

WHAT DOES CODE LOOK LIKE?

???

6 of 20

WHAT DOES CODE LOOK LIKE?

???

7 of 20

CODING IN HTML

8 of 20

A LITTLE BIT ABOUT BROWSERS...

  • They show us websites
  • They don’t understand English, but they do understand HTML

9 of 20

HTML: HYPER TEXT MARKUP LANGUAGE

  • Remember: we use HTML to communicate with our browsers
  • When we use HTML, we are telling our browser information about our webpage and what kind of content to display

​

10 of 20

SO… HOW DO WE READ AND WRITE IN HTML?

11 of 20

HTML IS MADE UP OF ELEMENTS

​

<p>This is a paragraph of text.</p>

​

element

​

12 of 20

WE USE TAGS TO MAKE ELEMENTS

​

<p>This is a paragraph of text.</p>

​

opening tag closing tag

​

  • what’s the main difference between the two?

​

13 of 20

TAGS USE < AND > AND /

14 of 20

TAGS ALWAYS COMES IN PAIRS

​

<p>This is a paragraph of text.</p> =

​

<p>This is a paragraph of text. =

​

​

​

15 of 20

REMEMBER: TAGS HAVE TO BE PERFECT

​

<p>This is a paragraph of text.</p>

​

opening tag closing tag

16 of 20

IS THIS RIGHT?

​

<p>This is a paragraph of text.<p>

​

17 of 20

IS THIS RIGHT?

​

<p>This is a paragraph of text.

​

18 of 20

IS THIS RIGHT?

​

p>This is a paragraph of text.</p>

​

19 of 20

IS THIS RIGHT?

​

<p>This is a paragraph of text.</b>

​

20 of 20

BASIC HTML ELEMENTS

<html>

<head>

</head>

<body>

</body>

</html>

We’re going to start communicating in HTML

Information about our webpage starts here

Information about our website ends here

Content to display starts here

Content to display ends here

We’re going to stop communicating in HTML

​