Geometric Abstract Introduction to HTML Tutorial
Uploaded by
kushkumarverma112Geometric Abstract Introduction to HTML Tutorial
Uploaded by
kushkumarverma112Write a subtitle for this presentation
INTRODUCTION
TO HTML TUTORIAL
AGENDA
01 Overview of HTML
02 Basic Structure
03 HTML Tags & Elements
04 Best Practices & Tips
WHAT IS HTML?
EXAMPLE DEFINITION
<!DOCTYPE html> Lorem ipsum dolor sit amet,
<html> consectetur adipiscing elit, sed
<head> do eiusmod tempor incididunt
<title>My First Web
ut labore et dolore magna
Page</title>
aliqua.
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML PURPOSE
document.</p> Lorem ipsum dolor sit amet,
</body> consectetur adipiscing elit, sed
</html> do eiusmod tempor incididunt
ut labore et dolore magna
aliqua.
BASIC STRUCTURE
01 02 03
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed consectetur adipiscing elit, sed consectetur adipiscing elit, sed
do eiusmod tempor incididunt do eiusmod tempor incididunt do eiusmod tempor incididunt
ut labore et dolore magna ut labore et dolore magna ut labore et dolore magna
aliqua. aliqua. aliqua.
123,456,789
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
BRAINSTORM &
A
IDEAS
Idea
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
1
Lorem ipsum dolor sit
Idea amet, consectetur
adipiscing elit.
2
IDEA
1 Lorem ipsum dolor sit
Idea amet, consectetur
adipiscing elit.
B 1 Lorem ipsum dolor sit
Idea amet, consectetur
adipiscing elit.
2
MAIN TOPICS &
Topic
Lorem ipsum
01 dolor sit
DETAILS Topic
Lorem ipsum
02 dolor sit
amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit.
Topic Topic
Lorem ipsum
03 dolor sit Lorem ipsum
04 dolor sit
amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit.
STEP-BY-STEP
CODING
01 02 03 04
Topic Topic Topic Topic
Lorem ipsum
01 dolor Lorem ipsum
02 dolor Lorem ipsum
03 dolor Lorem ipsum
04 dolor
sit amet, sit amet, sit amet, sit amet,
consectetur consectetur consectetur consectetur
adipiscing elit. adipiscing elit. adipiscing elit. adipiscing elit.
"LEARNING HTML IS LIKE
LEARNING THE
ALPHABET BEFORE YOU
WRITE YOUR FIRST
MAIN TOPICS &
DETAILS
01 Topic
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
02 Topic
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
03 Topic
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
CAUSE &
EFFECT
Lorem ipsum dolor sit amet,
Problem Topic consectetur adipiscing elit, sed do
01 eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Lorem ipsum dolor sit amet,
Solution Topic consectetur adipiscing elit, sed do
01 eiusmod tempor incididunt ut labore et
dolore magna aliqua.
STEP 01
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
STEP 02
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
A voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
Duis aute irure dolor in reprehenderit in
B voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
Duis aute irure dolor in reprehenderit in
C voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
STEP 03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<p>This is a simple example of an HTML document.</p>
</header>
THANK
YOU
Write a brief description here
RESOURCE
PAGE
Use these design
resources
in your Canva
This presentation template
Presentation.
uses the following free
fonts:
Titles: Paytone One
Headers: Lato
Body Copy: Lato
You can find these fonts
online too. Happy
designing!
Don't forget to delete this
page before presenting.
CREDITS
This presentation template is free
for everyone to use thanks to the
following:
SLIDESCARNIVAL for the presentation
template
PEXELS for the photos