Scribd
Upload
4 views

Lesson 1 - Getting Started

This document is an introductory lesson for students learning HTML, emphasizing the simplicity of creating a basic website using Notepad. It explains the fundamental concepts of HTML, including elements and tags, and provides a basic template for HTML files. The author encourages feedback and outlines the usage rights of the purchased resource.

Uploaded by

Zaiga Pizika
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Lesson 1 - Getting Started

This document is an introductory lesson for students learning HTML, emphasizing the simplicity of creating a basic website using Notepad. It explains the fundamental concepts of HTML, including elements and tags, and provides a basic template for HTML files. The author encourages feedback and outlines the usage rights of the purchased resource.

Uploaded by

Zaiga Pizika
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Thank you for purchasing!

This lesson is the first of a series designed to help students learn


how to code in HTML. I try to break down concepts and vocabulary
into easy to understand bites.

Now, my school was fortunate enough to purchase a subscription to


CodingRooms.com, which provides my students with and an IDE they can use
for any computer language. And although I begin by explaining how to use
Notepad to make a basic website, this series will work for any school,
regardless of their resources.

I have found that my students enjoy the simplicity of these slides and I hope
yours do, too! If you have any questions about the lesson, or advice on what
needs to be included, please reach out. Also, please let me know how it goes
in your classroom! I would love the feedback.

©Simply Adamazing
Getting
started
Let’s learn some HTML!
What is html?
HTML is a markup language for web page
creation. It stands for HyperText Markup
Language.
Basically, it’s the language you need to
speak in order to make a website.
Is making a website hard?
Making a website is super easy!
Watch. We’ll make one right now.
Open up Notepad.
Write anything you’d like inside. Try “Hello,
World”
Save the file as index.html
Now close Notepad and double-click on the
file to open it. (It should open up your
default browser. Maybe Chrome, maybe
Safari. Doesn’t matter.)
Look at that! You made a website!
It’s a little…boring. But it’s a website!
Congrats!
Now, let’s learn how to make it better…
Building blocks
The HTML language is a declarative language. Meaning, we
have to declare everything we want the website to do. How do
we declare something? By using ELEMENTS and TAGS! And
what exactly are those? Think of it this way:
The dog played in the park.
When we read this, how do we know where the sentence starts
and where it ends?
Building blocks

The dog played in the park.


Well, most of the time, a sentence starts with a capital letter.
That tells us the sentence is beginning.
Building blocks

The dog played in the park.


And most of the time, it ends with some type of punctuation.
Now we know the sentence has finished.
Building blocks
ELEMENTS and TAGS work basically the same way.

<p>The dog played in the park.</p>


This line of code is called an ELEMENT.
How do we know where an element begins and ends?
Building blocks

<p>The dog played in the park.</p>


Well, most of the time, an element starts with a starting TAG.
That’s this part here, surrounded by angle brackets.
Building blocks

<p>The dog played in the park.</p>


And most of the time, elements end with a closing TAG.
These tags look like starting tags, but include a forward slash.
Building blocks

<p>The dog played in the park.</p>


This ELEMENT is declaring that we want this sentence to
appear on your website in the default paragraph format.
Building blocks
Now that you better understand
what ELEMENTS and TAGS are,
let’s learn a few of them so we
can start building an awesome
website!
Line one… index.ht
ml
Your first line of code should 1 <!DOCTYPE html>
always be <!DOCTYPE html> 2
3
4
Why? 5
6
Well, among other things, this 7
little bit of code tells your 8
9
browser this file actually is an
10
HTML document.

So yeah, it’s important.


Where to start… index.ht
ml
Next, we need to tell the 1 <!DOCTYPE html>
2 <html>
browser where the HTML 3
code begins and ends. We 4
5
do that with two TAGS: 6
<html> and </html> 7
8
9
Put these at the beginning 10 </html>
and end of your file.
Head and body… index.ht
ml
Lastly, a good habit to get into is 1 <!DOCTYPE html>
splitting your file into a Head and 2 <html>
Body. 3
4
5
The Head stores metadata. (More 6
on that later) 7
8
9
The Body holds everything you
10 </html>
want to be seen and heard on
your website.
The head section index.ht
ml
So let’s start by adding 1 <!DOCTYPE html>
2 <html>
these two TAGS: <head> 3 <head>
(HEAD
and </head> 4
SECTION)
5
6 </head>
7
This will define the Head 8
section of your file. 9
10 </html>
The body section index.ht
ml
Now add these two TAGS: 1 <!DOCTYPE html>
2 <html>
<body> and </body> 3 <head>
4
5 </head>
This will define the Body 6 <body>
7 (BODY
section of your file. We’ll SECTION)
8
be adding a LOT of tags in 9
10</body>
</html>
here in the next lesson.
The template index.ht
ml
That’s it! 1 <!DOCTYPE html>
2 <html>
Now you’ve created a great 3 <head>
4
template to use for all your 5 </head>
websites. 6 <body>
7
Before adding pictures and 8
9 </body>
paragraphs to your website, write
10 </html>
these elements first.

You’ll be glad you did.


To wrap up…
HTML is a declarative markup language that
programmers use to make websites.

It’s made up of building blocks called ELEMENTS and


TAGS.

Start every HTML file with the basic template to make


sure your file will work properly.

In the next lesson, we’ll cover what tags go inside the


Head and Body sections.
Thank you for your purchase! By purchasing this resource, you are agreeing that the contents of this
product are the property of Simply Amazing and licensed to only you for classroom or personal use. I
retain the copyright, and reserve all rights to this product.

You may
· Use free and purchased items for your own classroom students, or your own personal use.
· Reference this product in blog posts, at seminars, professional development, workshops, or other
such venues, ONLY if both credit is given to myself as the author, and a link back to my TpT store is
included in the presentation.

You may not


· Claim this work as your own, alter the files in any way, or remove copyright / watermarks.
· Sell the files or combine them into another unit for sale / free.
· Post this document for sale / free elsewhere on the internet (this includes Google Doc links on
blogs).
· Make copies of purchased items to share with others. This is strictly forbidden and is a violation of
the TOU / law.

Thank you for abiding by universally accepted codes of professional ethics while using this product. If
you encounter an issue with your file, notice an error, or are in any way experiencing a problem,
please contact me and I will be more than happy to help sort it out. You can email me at
[email protected].

Please consider leaving a review! I would greatly appreciate it.


©Simply Adamazing

You might also like