Learn html5 Start 5min PDF

HTML
S TART I N 5 M I N
IN A ROCKET
Learn front-end development at rocket speed
FULL HTML COURSE + CODE + QUIZZES + FREE UPDATES
inarocket .com
by miguelsanchez.com
LET'S LEARN HTML!
IN THIS MODULE YOU'LL LEARN:
What is HTML.
Why HTML is a markup language.
How is its basic structure.
How to create your first HTML in 5 minutes.
HTML FOR BEGINNERS: Start in 5 min inarocket.com

in a
ROCKET
WHAT IS HTML
Is it a programming language? How is it related to CSS & JavaScript?
CSS
Content presentation + HTML
Content structure + JAVASCRIPT
Content behavior
WEB PAGE

HTML
HyperText Markup Language
HTML is a markup language, not a programming language.

W3C'S HTML RECOMMENDATIONS TIMELINE
HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01
1995 1997 1997 1999 2014

THE W3C RECOMMENDATION TRACK
RECOMMENDATION
PROPOSED RECOMMENDATION
CANDIDATE RECOMMENDATION
LAST CALL
WORKING DRAFT

HTML5 IS PART OF THE OPEN WEB PLATFORM
CSS3 WOFF
(Web Fonts)
SVG etc.
MathML Geolocation
XmlHttpRequest
SOURCE: Open Web Platform by W3C.

CONGRATULATIONS!
YOU'VE LEARNED:
What is HTML.

in a
ROCKET
HTML MARKUP
What is its goal? How is coded?
A markup language is used to  
structure and define content semantically.
Soon you will learn how to use CSS to control its presentation.

Element
<h1>I'm a header</h1>
Opening
Content Closing
Tag Tag

Element
<p>I'm a paragraph</p>
Opening
Content Closing
Tag Tag

CONGRATULATIONS!
YOU'VE LEARNED:
What is HTML.

in a
ROCKET
BASIC HTML STRUCTURE

What elements are involved? How to use them in your code?
HTML structure HTML code
DOCTYPE <!DOCTYPE html>

<html>
<head>
head
Page metadata goes here.
html </head>
<body>
body
Page content goes here.
</body>
</html>

HTML structure: DOCTYPE
DOCTYPE DOCTYPE (Document Type Declaration) tells

the browser / parser what type of document is
processing. Should always be the first item of
head any HTML file.
html
body

HTML structure: head
DOCTYPE Use head to include information about the

document (title, language, etc.). But for the
title, head content is not shown to users.
head
html
body

HTML structure: head
<!DOCTYPE html> Use head to include your page's title.
<html> Browsers will show it in the tab for your page.

<head>
<title>Page title goes here</title>
</head>
<body>
Page content goes here. Search engines will display that title in their
</body> results.
</html>

HTML structure: body
DOCTYPE Use body to include all the content you want

to show to your users (text, images, links, etc.).
head
html
body

HTML structure: tree view HTML code
<!DOCTYPE html>
<html>
html
<head>
Page metadata goes here.
head body </head>
<body>
Page content goes here.
</body>
</html>

CONGRATULATIONS!
YOU'VE LEARNED:
What is HTML.

in a
ROCKET
YOUR FIRST HTML

How to create your first HTML document in a couple of minutes?
YOUR FIRST HTML
1 2 3
FOLDERS
Project structure + EDITOR
e.g. Notepad + BROWSER
e.g. Firefox

YOUR FIRST HTML
1 2 3
FOLDERS
e.g. Firefox

YOUR FIRST HTML: FOLDERS
Create the folders that will contain the web

project on your computer.
projectname
projectname:
• img
(will hold your site's graphical assets)
• css
(you will use this folder for your site's stylesheets)
img css js
• js (will hold scripts to add interactive features to your site)
Important rules for naming folders and files.
• Never use spaces.
• Never use special characters (%, *, +, etc.).
• Avoid uppercases.

YOUR FIRST HTML
1 2 3
FOLDERS
e.g. Firefox

YOUR FIRST HTML: EDITOR
Editor: pre-installed Editor: additional
You can just use any text editor preinstalled in There are other editors but you won't need
your computer. their advanced features for this course.
Notepad TextEdit Gedit Atom Sublime Text VS Code

YOUR FIRST HTML
1 2 3
FOLDERS
e.g. Firefox

YOUR FIRST HTML: BROWSER
Browser: pre-installed Browser: additional
You can just use any preinstalled browser in There are other browsers that you can also
your computer. install in your computer.
Edge Safari Firefox Chrome Firefox Opera

YOUR FIRST HTML: BASIC WORKFLOW
projectname
EDITOR SAVE OPEN BROWSER

e.g. Notepad e.g. Firefox
index.html

YOUR FIRST HTML: HELLO WORLD!
Editor (what you should write) READY TO USE CODE Browser (what you should view)
<!DOCTYPE html> index.html

My first HTML page
<html>
Hello world!
<head>
<title>My first HTML page</title>
</head>
<body>
Hello world!
</body>
</html>
Save as index.html Open index.html in your browser

CONGRATULATIONS!
YOU'VE LEARNED:
What is HTML.

YOU CAN CONTINUE THIS COURSE FOR FREE ON
inarocket .com
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
by miguelsanchez.com
More straight to the point courses
FLEXBOX & CSS GRID

BOOTSTRAP 4
POSTCSS
inarocket.com
HTML
S TART I N 5 M I N
IN A ROCKET

Learn html5 Start 5min PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Learn html5 Start 5min PDF

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

Why HTML is a markup language.

How is its basic structure.

How to create your first HTML in 5 minutes.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01

1995 1997 1997 1999 2014

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

SOURCE: Open Web Platform by W3C.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Why HTML is a markup language.

How is its basic structure.

How to create your first HTML in 5 minutes.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Why HTML is a markup language.

How is its basic structure.

How to create your first HTML in 5 minutes.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

BASIC HTML STRUCTURE

HTML structure HTML code

DOCTYPE <!DOCTYPE html>

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML structure: DOCTYPE

DOCTYPE DOCTYPE (Document Type Declaration) tells

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML structure: head

DOCTYPE Use head to include information about the

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML structure: head

<!DOCTYPE html> Use head to include your page's title.

<html> Browsers will show it in the tab for your page.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML structure: body

DOCTYPE Use body to include all the content you want

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML structure: tree view HTML code

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Why HTML is a markup language.

How is its basic structure.

How to create your first HTML in 5 minutes.

HTML FOR BEGINNERS: Start in 5 min inarocket.com

YOUR FIRST HTML

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Create the folders that will contain the web

Important rules for naming folders and files.

• Never use spaces.

• Never use special characters (%, *, +, etc.).

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Editor: pre-installed Editor: additional

Notepad TextEdit Gedit Atom Sublime Text VS Code

HTML FOR BEGINNERS: Start in 5 min inarocket.com

HTML FOR BEGINNERS: Start in 5 min inarocket.com

Browser: pre-installed Browser: additional

Edge Safari Firefox Chrome Firefox Opera

HTML FOR BEGINNERS: Start in 5 min inarocket.com