learn html5: getting started

inarocket.com

HTMLLearn at rocket speedGETTING STARTED

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

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

FULL COURSE

http://www.inarocket.com

http://miguelsanchez.com

What is HTML

inarocket.com - HTML / Getting Started

WHAT IS HTML

+HTMLContent structure

JAVASCRIPTContent behavior

CSSContent presentation +

WEB PAGE

http://inarocket.com


WHAT IS HTML

HT M LHyperText Markup Language

HTML is a markup language, not a programming language



WHAT IS HTML

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999 2014

HTML 4.0

1997

W3C Recommendations



WHAT IS HTML

CSS3

Geolocation

WOFF

MathML

XmlHttpRequest

etc.SVG

(Web Fonts)

Open Web Platform

SOURCE: Open Web Platform by W3C.


https://www.w3.org/wiki/Open_Web_Platform

HTML markup


HTML MARKUP

A markup language is used to structure and define content semantically

Soon you will learn how to use CSS to control its presentation



HTML MARKUP

Element

<h1>I’m a header</h1>ContentOpening

TagClosing

Tag

HTML tags are not case sensitive



HTML MARKUP

<p>I’m a paragraph</p>

HTML tags are not case sensitive

ContentOpening Tag

Closing Tag

Element


Basic HTML structure


BASIC HTML STRUCTURE

HTML code

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

HTML structure

html

DOCTYPE

body

head




html

DOCTYPE

HTML structure: DOCTYPE

DOCTYPE (Document Type Declaration) tells the browser / parser what type of document is processing. Should always be the first item of any HTML file.

body

head




HTML structure: head

Use head to include information about the document (title, language, etc.). But for the title, head content is not shown to users.

html

DOCTYPE

body

head




HTML structure: head

Use head to include your page's title.Browsers will show it in the tab for your page.

<!DOCTYPE html><html> <head> <title>Page title goes here</title> </head> <body> Page content goes here. </body></html>

Search engines will display that title in their results.




HTML structure: body

Use body to include all the content you want to show to your users (text, images, links, etc.).

html

DOCTYPE

body

head




HTML code

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

HTML structure: tree view

html

head body


Your first HTML in 5 minutes


YOUR FIRST HTML IN 5 MINUTES

+EDITORe.g. Notepad

BROWSERe.g. Firefox

FOLDERSProject structure +

21 3



YOUR FIRST HTML IN 5 MINUTES: FOLDERS

+EDITORe.g. Notepad

BROWSERe.g. Firefox


21 3



YOUR FIRST HTML IN 5 MINUTES: FOLDERSCreate the folders that will contain the web project on your computer.

projectname: • img • css • js

Important rules for naming folders and files. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases.

(will hold your site's graphical assets)

projectname

css jsimg(you will use this folder for your site's stylesheets)

(will hold scripts to add interactive features to your site)



YOUR FIRST HTML IN 5 MINUTES: EDITOR

+EDITORe.g. Notepad

BROWSERe.g. Firefox


21 3



YOUR FIRST HTML IN 5 MINUTES: EDITOR

Editor: pre-installed

You can just use any text editor preinstalled in your computer.

Notepad TextEdit Gedit

Editor: additional

There are other editors but you won't need their advanced features for this course.

Sublime Text Atom



YOUR FIRST HTML IN 5 MINUTES: BROWSER

+EDITORe.g. Notepad

BROWSERe.g. Firefox


21 3



YOUR FIRST HTML IN 5 MINUTES: BROWSER

Browser: pre-installed

You can just use any preinstalled browser in your computer.

Edge Safari Firefox

Browser: additional

There are other browsers that you can also install in your computer.

Chrome Firefox Opera



YOUR FIRST HTML IN 5 MINUTES: BASIC WORKFLOW

index.html

EDITOR BROWSERe.g. Notepad e.g. Firefox

SAVE OPEN

projectname



Save as index.html

YOUR FIRST HTML IN 5 MINUTES: HELLO WORLD!

<!DOCTYPE html><html><head> <title>My first HTML page</title></head><body>Hello world!</body></html>

Editor (what you should write) Browser

Hello world!

(what you should view)

Open index.html in your browser

index.html

READY TO USE CODE


http://codepen.io/inarocket/pen/vGYKZY

CONGRATULATIONS! NOW YOU KNOW:

What is HTML Why HTML is a markup language How is its basic structure How to create your first HTML in 5 minutes

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

FULL COURSE

http://www.inarocket.com

http://miguelsanchez.com

Are you also interested in learning

BOOTSTRAP 4POSTCSS?+

http://inarocket.teachable.com/courses/css-postcssPlease visit:

http://inarocket.teachable.com/courses/css-postcss

http://inarocket.teachable.com/courses/css-postcss

inarocket.com

HTMLLearn at rocket speedGETTING STARTED

learn html5: getting started

Internet