learn html5: getting started
Post on 21-Apr-2017
5.053 Views
Preview:
TRANSCRIPT
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
What is HTML
inarocket.com - HTML / Getting Started
WHAT IS HTML
+HTMLContent structure
JAVASCRIPTContent behavior
CSSContent presentation +
WEB PAGE
inarocket.com - HTML / Getting Started
WHAT IS HTML
HT M LHyperText Markup Language
HTML is a markup language, not a programming language
inarocket.com - HTML / Getting Started
WHAT IS HTML
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999 2014
HTML 4.0
1997
W3C Recommendations
inarocket.com - HTML / Getting Started
WHAT IS HTML
CSS3
Geolocation
WOFF
MathML
XmlHttpRequest
etc.SVG
(Web Fonts)
Open Web Platform
SOURCE: Open Web Platform by W3C.
HTML markup
inarocket.com - HTML / Getting Started
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
inarocket.com - HTML / Getting Started
HTML MARKUP
Element
<h1>I’m a header</h1>ContentOpening
TagClosing
Tag
HTML tags are not case sensitive
inarocket.com - HTML / Getting Started
HTML MARKUP
<p>I’m a paragraph</p>
HTML tags are not case sensitive
ContentOpening Tag
Closing Tag
Element
Basic HTML structure
inarocket.com - HTML / Getting Started
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
inarocket.com - HTML / Getting Started
BASIC HTML STRUCTURE
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
inarocket.com - HTML / Getting Started
BASIC HTML STRUCTURE
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
inarocket.com - HTML / Getting Started
BASIC HTML STRUCTURE
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.
inarocket.com - HTML / Getting Started
BASIC HTML STRUCTURE
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
inarocket.com - HTML / Getting Started
BASIC HTML STRUCTURE
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
inarocket.com - HTML / Getting Started
YOUR FIRST HTML IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
inarocket.com - HTML / Getting Started
YOUR FIRST HTML IN 5 MINUTES: FOLDERS
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
inarocket.com - HTML / Getting Started
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)
inarocket.com - HTML / Getting Started
YOUR FIRST HTML IN 5 MINUTES: EDITOR
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
inarocket.com - HTML / Getting Started
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
inarocket.com - HTML / Getting Started
YOUR FIRST HTML IN 5 MINUTES: BROWSER
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
inarocket.com - HTML / Getting Started
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
inarocket.com - HTML / Getting Started
YOUR FIRST HTML IN 5 MINUTES: BASIC WORKFLOW
index.html
EDITOR BROWSERe.g. Notepad e.g. Firefox
SAVE OPEN
projectname
inarocket.com - HTML / Getting Started
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
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
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
inarocket.com
HTMLLearn at rocket speedGETTING STARTED
top related