learn html5 for beginners at rocket speed

HTMLat rocket speed

FOR BEGINNERS

inarocket.com

Learn front-end development at rocket speed

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

car.png

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

Element

HTML tags are not case sensitive

DOCUMENT STRUCTURE

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

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

Very important

Less important

HEADERS

Browser

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

Editor

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>

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>

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 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

javascript1.js

javascript2.js

list.html

catalog.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

javascript1.js

javascript2.js

list.html

catalog.pdf

LINKS: INTERNAL

Browser

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

Editor

LINKS: INTERNAL

image1.png

javascript1.js

javascript2.js

list.html

catalog.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

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

TABLES: BASIC

Browser

2014 2015

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

rocket speedwhat

html files

rocket speedinarocket

rocket speedheadershttp

rocket speedparagraphshttp

rocket speedhello world

rocket speedmarkup structureim

british computer scientist

Internet

html5 소개 및 배우기- html5 open conference

for rockets rocket systes m rocket fuzes rocket …...

javascript for beginners workshop module 1 - html5 developer...

ninja101.yolasite.comninja101.yolasite.com/resources/beginners...

html5 viewer html5 office kukudocs

pub html5 - lib.kmutt.ac.th · what is pub html5? pub html5...

html5-caniuse 1 html5-tags ordered alphabetically 6 html5...

learn css3 for beginners at rocket speed

datasheet rocket unidata · 2018-05-14 · rocket unidata...

“html5”: more than just html5

from html5 websites to html5 games

ny html5 - game development with html5 & javascript

rocket model 204 sirpro - rocket software

learn html5 canvas for beginners

fly rocket fly rocket report - naturalphilosophers.org

datasheet rocket® corvu ng for rocket multivalue ·...

hire html5 developer for html5 development and html5 game...

html5 + css3+ java script for future - html5

design of rocket stages of rocket design of rocket three...

rocket business connect - rocket software