Learn HTML5 for beginners at rocket speed

HTMLat rocket speed

FOR BEGINNERS

inarocket.com

Learn front-end development at rocket speed

inarocket.com

http://inarocket.com

inarocket.com - Learn HTML at rocket speed

WHAT DO YOU NEED TO START

+EDITORe.g. Notepad

BROWSERe.g. Firefox

FOLDERSProject structure +



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)



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



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


Hello world!


WHAT IS HTML

+HTMLContent structure

JAVASCRIPTContent behavior

CSSContent presentation +



WHAT IS HTML

H T M LHyperText Markup Language

HTML is a markup language, not a programming language



MARKUP STRUCTURE

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

TagClosing

Tag

Element

HTML tags are not case sensitive



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.



DOCUMENT STRUCTURE

body

head

html

Editor (what you should write)

<!doctype html> <html> <head> </head> <body> </body> </html>



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



BASIC WORKFLOW

index.html

EDITOR BROWSERe.g. Notepad e.g. Firefox



HEADERS

<h1> <h2> <h6><h3> <h4> <h5>

Very important

Less important



HEADERS

<h1>

<h2>



HEADERS

Browser

Tim Berners-Lee<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> </body> </html>

Editor



PARAGRAPHS

<p>



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


Spaces


SPACES:

The character entity stands for “non breaking space”

Inserts a single space into your content



SPACES:

Browser

Hello world!<!doctype html> <html> <head> </head> <body> <p>Hello world!</p> </body> </html>

Editor

Three spaces



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



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.



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



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


Images


IMAGES

<img>



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



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>



LINKS: INTERNAL

image1.png

image1.png

img

javascript1.js

javascript2.js

js

list.html

catalog.pdf

pdf

index.htmlproducts.html services.html jobs.html contact.html



LINKS: INTERNAL

Browser

Jobs<a href=“jobs.html”>Jobs</a>

Editor

Opens the link when clicked



LINKS: INTERNAL

image1.png

image1.png

img

javascript1.js

javascript2.js

js

list.html

catalog.pdf

pdf




LINKS: INTERNAL

Browser

PDF list<a href=“pdf/list.html”>PDF list</a>

Editor




LINKS: INTERNAL

image1.png

image1.png

img

javascript1.js

javascript2.js

js

list.html

catalog.pdf

pdf




LINKS: INTERNAL

Browser

Home<a href=“/index.html”>Home</a>

Editor


(list.html)



LINKS: EXTERNAL

Browser

Wikipedia<a href=“http://wikipedia.org”> Wikipedia</a>

Editor




LISTS: UNORDERED

Browser

• Spielberg • Coppola • Scorsese

<ul> <li>Spielberg</li> <li>Coppola</li> <li>Scorsese</li> </ul>

Editor

li = list item.



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



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



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


Tables


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



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>



TABLES: BASIC

Browser

2014 2015

1 2

2 3

Total: 3 Total: 5



NOTICE

Coming soon.



NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.


Learn front-end development at rocket speed

inarocket.com


Learn HTML5 for beginners at rocket speed

Internet

Transcript of Learn HTML5 for beginners at rocket speed