Scribd
Upload
47 views

Geometric Abstract Introduction To HTML Tutorial

Uploaded by

cristiankhevin salgo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views

Geometric Abstract Introduction To HTML Tutorial

Uploaded by

cristiankhevin salgo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Write a subtitle for this presentation

INTRODUCTION
TO HTML TUTORIAL
HOW TO USE THIS PRESENTATION
GOOGLE SLIDES POWERPOINT CANVA
Click on the "Google Slides" button Click on the "PowerPoint" button Click on the "Canva" button under
below this presentation preview. Make below this presentation preview. Start this presentation preview. Start
sure to sign in to your Google account. editing your presentation. editing your presentation. You need
Click on "Make a copy." Start editing Alternative: From Canva template to sign in to your Canva account.
your presentation. file, Click on the "Share" button on
Alternative: Click on the "Share" button the top right corner in Canva and
on the top right corner in Canva and click on "More" at the bottom of the
click on "More" at the bottom of the menu. Enter "PowerPoint" in the
menu. Enter "Google Drive" in the search bar and click on the
search bar and click on the GDrive icon PowerPoint icon to download.
to add this design as a Google slide in
your GDrive.
AGENDA
01 Overview of HTML
02 Basic Structure
03 HTML Tags & Elements
04 Best Practices & Tips
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

ABOUT US
ea commodo consequat.
TUTORIAL OVERVIEW
Write a main topic here Write a main topic here

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et
dolore magna aliqua. dolore magna aliqua.
WHAT IS HTML?
EXAMPLE DEFINITION
<!DOCTYPE html> Lorem ipsum dolor sit amet,
<html> consectetur adipiscing elit, sed do
<head> eiusmod tempor incididunt ut labore et
<title>My First Web Page</title>
dolore magna aliqua.
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body> PURPOSE
</html> Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed 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 do consectetur adipiscing elit, sed do consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
123,456,789
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
BRAINSTORM & IDEAS
Lorem ipsum dolor sit amet,
Idea 1 consectetur adipiscing elit.
A
Lorem ipsum dolor sit amet,
Idea 2 consectetur adipiscing elit.

IDEA
1 Lorem ipsum dolor sit amet,
Idea 1 consectetur adipiscing elit.

B
Lorem ipsum dolor sit amet,
Idea 2 consectetur adipiscing elit.
MAIN TOPICS &
Topic 01
Lorem ipsum dolor sit amet,
DETAILS Topic 02
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.

Topic 03 Topic 04
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
STEP-BY-STEP CODING

01 02 03 04

Topic 01 Topic 02 Topic 03 Topic 04


Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit. adipiscing elit.
"LEARNING HTML IS LIKE
LEARNING THE ALPHABET
BEFORE YOU WRITE YOUR
FIRST NOVEL."
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, consectetur

Problem Topic 01 adipiscing elit, sed do eiusmod tempor incididunt


ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur

Solution Topic 01 adipiscing elit, sed do 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 voluptate velit


A esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor in reprehenderit in voluptate velit


B esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor in reprehenderit in voluptate velit


C 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 Presentation.

This presentation template


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

You might also like