learn html5 for beginners at rocket speed
DESCRIPTION
http://inarocket.com Learn HTML5 fundamentals as fast as possible. Basic work overflow, document structure, essential tags, text formatting, links, ordered and unordered lists, images, tables, forms, etc.TRANSCRIPT
![Page 1: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/1.jpg)
HTMLat rocket speed
FOR BEGINNERS
inarocket.com
![Page 3: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/3.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
![Page 4: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/4.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: FOLDERSCreate the folders that will contain the web project on your computer. !
projectname: • img • css • js
projectname
img
car.png
css
js
Here you can save the HTML files that you will create in this course.
Important rules for naming folders and files. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases.
(for this course put an image in this folder, please)
![Page 5: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/5.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: 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
![Page 6: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/6.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: BROWSER
Browser: pre-installed
You can just use any preinstalled browser in your computer.
Explorer Safari Firefox
Browser: additional
There are other browsers that you can also install in your computer.
Chrome Firefox Opera
![Page 7: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/7.jpg)
Hello world!
![Page 8: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/8.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT IS HTML
+HTMLContent structure
JAVASCRIPTContent behavior
CSSContent presentation +
![Page 9: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/9.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT IS HTML
H T M LHyperText Markup Language
HTML is a markup language, not a programming language
![Page 10: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/10.jpg)
inarocket.com - Learn HTML at rocket speed
MARKUP STRUCTURE
<p>I’m a paragraph</p>ContentOpening
TagClosing
Tag
Element
HTML tags are not case sensitive
![Page 11: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/11.jpg)
inarocket.com - Learn HTML at rocket speed
DOCUMENT STRUCTURE
body
head
html
Use head to include information about the document (e. g. title, language). But for the title, head content is not shown to users.
Use body to include all the content (text, images, links, tables, etc.) you want to show to your users.
![Page 12: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/12.jpg)
inarocket.com - Learn HTML at rocket speed
DOCUMENT STRUCTURE
body
head
html
Editor (what you should write)
<!doctype html> <html> <head> </head> <body> </body> </html>
![Page 13: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/13.jpg)
inarocket.com - Learn HTML at rocket speed
HELLO WORLD!
<!doctype html> <html> <head> </head> <body> Hello world! </body> </html>
Editor (what you should write)
Save as index.html
Browser
Hello world!
(what you should view)
Open index.html in your browser
![Page 14: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/14.jpg)
inarocket.com - Learn HTML at rocket speed
BASIC WORKFLOW
index.html
EDITOR BROWSERe.g. Notepad e.g. Firefox
![Page 15: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/15.jpg)
Texts
![Page 16: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/16.jpg)
inarocket.com - Learn HTML at rocket speed
HEADERS
<h1> <h2> <h6><h3> <h4> <h5>
Very important
Less important
![Page 18: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/18.jpg)
inarocket.com - Learn HTML at rocket speed
HEADERS
Browser
Tim Berners-Lee<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> </body> </html>
Editor
![Page 20: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/20.jpg)
inarocket.com - Learn HTML at rocket speed
PARAGRAPHS
Browser
Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, best known as the inventor of the World Wide Web.</p> </body> </html>
Editor
![Page 21: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/21.jpg)
Spaces
![Page 22: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/22.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES:
The character entity stands for “non breaking space”
Inserts a single space into your content
![Page 23: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/23.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES:
Browser
Hello world!<!doctype html> <html> <head> </head> <body> <p>Hello world!</p> </body> </html>
Editor
Three spaces
![Page 24: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/24.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES: <br>
<br>
HTML elements with no content are called empty elements and they have no closing tag in HTML5
Inserts a line break into your content
![Page 25: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/25.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES: <br>
BrowserEditor
<!doctype html> <html> <head> </head> <body> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, <br>best known as the inventor of the World Wide Web.</p> </body> </html>
Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
![Page 26: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/26.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES: <hr>
<hr>
HTML elements with no content are called empty elements and they have no closing tag
Inserts a horizontal line and can be used to separate content
![Page 27: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/27.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES: <hr>
Browser
Tim Berners-Lee !
Sir Timothy John "Tim" Berners- Lee is the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <hr> <p>Sir Timothy John "Tim" Berners-‐ Lee is the inventor of the World Wide Web.</p> </body> </html>
Editor
![Page 28: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/28.jpg)
Images
![Page 30: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/30.jpg)
inarocket.com - Learn HTML at rocket speed
IMAGES
<img src=“car.png” alt=“Car”>TAG Attribute Attribute
The value of alt can be read by screen readers and is shown when an HTML element cannot be displayed
![Page 31: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/31.jpg)
inarocket.com - Learn HTML at rocket speed
IMAGES
BrowserEditor
Tim Berners-Lee !
!
!
!
!
!
Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <img src=“img/berners-‐lee.png” alt=“Tim Berners-‐Lee”> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, best known as the inventor of the World Wide Web.</p> </body> </html>
![Page 32: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/32.jpg)
Links
![Page 33: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/33.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
![Page 34: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/34.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
Jobs<a href=“jobs.html”>Jobs</a>
Editor
Opens the link when clicked
![Page 35: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/35.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
![Page 36: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/36.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
PDF list<a href=“pdf/list.html”>PDF list</a>
Editor
Opens the link when clicked
![Page 37: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/37.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
![Page 38: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/38.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
Home<a href=“/index.html”>Home</a>
Editor
Opens the link when clicked
(list.html)
![Page 39: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/39.jpg)
inarocket.com - Learn HTML at rocket speed
LINKS: EXTERNAL
Browser
Wikipedia<a href=“http://wikipedia.org”> Wikipedia</a>
Editor
Opens the link when clicked
![Page 40: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/40.jpg)
Lists
![Page 41: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/41.jpg)
inarocket.com - Learn HTML at rocket speed
LISTS: UNORDERED
Browser
• Spielberg • Coppola • Scorsese
<ul> <li>Spielberg</li> <li>Coppola</li> <li>Scorsese</li> </ul>
Editor
li = list item.
![Page 42: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/42.jpg)
inarocket.com - Learn HTML at rocket speed
LISTS: ORDERED
Browser
1. Usain Bolt - Gold 2. Yohan Blake - Silver 3. Justin Gatlin - Bronze
<ol> <li>Usain Bolt -‐ Gold</li> <li>Yohan Blake -‐ Silver</li> <li>Justin Gatlin -‐ Bronze</li> </ol>
Editor
![Page 43: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/43.jpg)
inarocket.com - Learn HTML at rocket speed
LISTS: NESTED
Browser
• Red • Light • Dark
• Green • Blue
<ul> <li>Red <ul> <li>Light</li> <li>Dark</li> </ul> </li> <li>Green</li> <li>Blue</li> </ul>
Editor
![Page 44: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/44.jpg)
inarocket.com - Learn HTML at rocket speed
LISTS: DESCRIPTION
Browser
W3C Is the main international standards organization for the World Wide Web. HTML Is the standard markup language used to create web pages.
<dl> <dt>W3C</dt> <dd>Is the main international standards organization for the World Wide Web.</dd> <dt>HTML</dt> <dd>Is the standard markup language used to create web pages.</dd> </dl>
Editor
![Page 45: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/45.jpg)
Tables
![Page 46: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/46.jpg)
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
tbody
thead
table
tfoot
tr
tr
tr
tr
td td td
td td td
td td td
th th th
td td tdtr
![Page 47: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/47.jpg)
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
<table> <thead> <tr> <th>2014</th><th>2015</th> </tr> </thead> <tfoot> <tr> <td>Total: 3</td><td>Total: 5</td> </tr> </tfoot>
Editor
<tbody> <tr> <td>1</td><td>2</td> </tr> <tr> <td>2</td><td>3</td> </tr> </tbody> </table>
![Page 48: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/48.jpg)
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
Browser
2014 2015
1 2
2 3
Total: 3 Total: 5
![Page 49: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/49.jpg)
Forms
![Page 51: Learn HTML5 for beginners at rocket speed](https://reader037.vdocuments.net/reader037/viewer/2022102922/54706ae1af7959ef458b458f/html5/thumbnails/51.jpg)
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.