Intro to HTML 1
Presentation
•
Computers
•
9th - 12th Grade
•
Practice Problem
•
Easy
Used 8+ times
FREE Resource
18 Slides • 7 Questions
1
Intro to HTML
How Programmers Create Basic
Websites
2
LT- I will learn what
language is used to
make most websites.
2
SC- I can read a source code and find the different parts of a website in the code.
3
Dropdown
4
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
3
5
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
6
Multiple Choice
What does HTML allow computers to do?
Store lots of data
Connect to one another (Hypertext)
Run operating systems
Run operating systems
7
Multiple Choice
HTML was developed by Tim Berners-Lee in the year____.
1985
1987
1990
2000
8
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)
9
How are Websites Coded?
Click on the picture to view the video.
10
Multiple Choice
What does HTML stand for?
Hypertile Mashup Language
Hyperstyle Markup Language
Hypotext Markdown Language
Hypertext Markup Language
11
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.
12
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.
13
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
instructs what you want to display
what you want people to see
how you want it to look
14
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
15
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
16
Multiple Choice
Type the closing tag for the <body> of a website.
/body/
\body\
-body-
</body>
17
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.
18
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>
19
First Things First!
A DOCTYPE declaration must be specified on the first
line of each HTML document:
<!DOCTYPE html>
20
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?)
21
Basic HTML Structure
22
Multiple Select
What are the three main elements of every website?
<HTML>
<HEAD>
<CONTENT>
<BODY>
23
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.
24
LT- I will learn what
language is used to
make most websites.
17
SC- I can read a source code and find the different parts of a website in the code.
25
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
Cell Differentiation and Specialized Cells
Presentation
•
9th - 12th Grade
20 questions
Vocabulary Things Fall Apart
Presentation
•
KG
20 questions
2.5 Introduction to Proofs- Uno
Presentation
•
9th - 12th Grade
20 questions
Influences On American Government
Presentation
•
9th - 12th Grade
19 questions
Angle of Elevation & Depression
Presentation
•
9th - 12th Grade
19 questions
Points of ConCurrency
Presentation
•
9th - 12th Grade
20 questions
Storyboard Layers
Presentation
•
9th - 12th Grade
19 questions
Protokoły sieciowe TCP/IP
Presentation
•
8th - 12th Grade
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade