Intro to HTML 1

Presentation

•

Computers

•

9th - 12th Grade

•

Practice Problem

•

Easy

Used 8+ times

FREE Resource

18 Slides • 7 Questions

Intro to HTML

How Programmers Create Basic

Websites

LT- I will learn what
language is used to
make most websites.

SC- I can read a source code and find the different parts of a website in the code.

Dropdown

The learning target for this lesson is, "I will learn what

is used to make most websites."

WHAT IS HTML?

The language used to create a website

Allows computers to connect to one another (Hypertext)

Tells the computer how to display the information

What is HTML?

•HTML is a universal language understood
by people all over the world.

•Someone in China can write a code for
a website and someone in Brazil can
understand it.

•It was developed by Tim Berners-Lee
in 1990.

•He wanted a way for different college
professors to be able to read each other's
documents.

•This laid the foundation for the World
Wide Web (WWW.....)

Tim Berners-Lee

Multiple Choice

What does HTML allow computers to do?

Store lots of data

Connect to one another (Hypertext)

Run operating systems

Multiple Choice

HTML was developed by Tim Berners-Lee in the year____.

1985

1987

1990

2000

What does H-T-M-L stand for?

•HyperText Markup Language (HTML)
•It determines what is on a webpage.
•It tells Google Chrome what to display.
•Google Chrome is called a Browser.

•It is not difficult once you learn the language.
•It does not take expensive software to create a webpage. (It's free)

How are Websites Coded?

Click on the picture to view the video.

Multiple Choice

What does HTML stand for?

Hypertile Mashup Language

Hyperstyle Markup Language

Hypotext Markdown Language

Hypertext Markup Language

HTML Structure

•Syntaxis a set of rules on how to put words and phrases together.
•For example, if you speak English, you begin a sentence with a capital
letter and end a sentence with a period.
•That is an example of using proper syntax.
•You must use proper syntax if you want google chrome to display your
website the way you intended.

Tags and Attributes

•There are three parts to writing code in HTML: Tags,
Content, and Attributes

•Tags tell the computer what you want to display.

•Content is what you want people to see on the computer
screen.

•Attributes describe how you want the content to look.

Match

Match the following

Tags

Content

Attributes

instructs what you want to display

what you want people to see

how you want it to look

How they work

•Tags have two parts: The opening and the
closing.

•Tags are enclosed in the angle brackets found
above your comma and period on the keyboard.
They look like this.

<html>

Opening Bracket

Closing Bracket

Tag Name

Open and Close

When a tag is created, you must open it and
close it.
•A closing tag has a slash in it.
•This is called creating a “Container”

<html>
</html>

Opening Tag

Closing Tag

Multiple Choice

Type the closing tag for the <body> of a website.

/body/

\body\

-body-

</body>

Attributes

•The stuff that goes between the tags is called content.

•This is usually words or pictures.

•Let's look at a heading from a website about dogs.

<h1>All About Dogs</h1>

The content in this case are the words that make up my title.

Exception

•Some tags do not need to be closed. For example, if
you wanted to make a space between your heading
and body, you can create a break in your page, and
you don't have to close it.

•We’ll talk more about this later.

<br>

First Things First!

A DOCTYPE declaration must be specified on the first
line of each HTML document:

<!DOCTYPE html>

Structure

•There are three parts to the structure of a basic website that you
need to tell the computer how to display.

•<html> You must tell the computer what language you are using.

•<head> Contains instructions for the browser to work
properly. Anything in the head is not visible on the webpage.
(Back-End)

•<body> The body is the main content of your page. This is what is
displayed on the computer screen. (Front-End)(What do you want
people to know?)

Basic HTML Structure

Multiple Select

What are the three main elements of every website?

<HTML>

<HEAD>

<BODY>

File Extensions
• When you create any type of file that a computer

reads, you must tell the computer which program
to use to open the file.

• This is called a file extension.

• For example, if you type a paper in Microsoft

Word, you can name it myPaper.doc.

• The .doc tells the computer that it can read the file

by opening Microsoft Word.

• When you save your work in this class, you should

always end the file name with the extension .html

• This will tell the computer to use a web browser

(like Google Chrome or Microsoft Edge) to open
the file.

This Photo by Unknown author is
licensed under CC BY-NC.

LT- I will learn what
language is used to
make most websites.

SC- I can read a source code and find the different parts of a website in the code.

Activity: Viewing the Source Code

•Go to your favorite website.
•Right-Click on the webpage.
•Click on "View Page Source".
•Find the <html>, <head>, and <body> tags

•What is one other type of tag that you see?
•Go to Google Classroom and tell us what you think this other tag
is used for.
•Answer the Discussion Board question on Google Classroom.

Intro to HTML

How Programmers Create Basic

Websites

Show answer

Auto Play

Slide 1 / 25

SLIDE

Similar Resources on Wayground

20 questions

Motivation and Emotion

Lesson

•

9th - 12th Grade

20 questions

El Pretérito

Lesson

•

9th - 12th Grade

20 questions

Future Tense- Sp. 3/4

Lesson

•

9th - 12th Grade

20 questions

Energy review

Lesson

•

9th - 12th Grade

20 questions

Properties of Water

Lesson

•

9th - 12th Grade

20 questions

Social Skills for Work

Lesson

•

9th - 12th Grade

20 questions

West African Kingdoms

Lesson

•

9th - 12th Grade

20 questions

Por y Para

Lesson

•

9th - 12th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade

Discover more resources for Computers

10 questions

Exploring Digital Citizenship Essentials

Interactive video

•

6th - 10th Grade

14 questions

[AP CSP] JavaScript Programming Quiz

Quiz

•

9th - 12th Grade

10 questions

Understanding Computers and Computer Engineering

Interactive video

•

7th - 12th Grade

37 questions

Python - Tuples, Lists, and List Methods

Quiz

•

9th - 12th Grade

60 questions

MOS Word Home, Insert, Reference Ribbon Basics

Quiz

•

9th Grade