Learn HTML5: Links

27
inarocket.com HTML Learn at rocket speed LINKS

Transcript of Learn HTML5: Links

Page 1: Learn HTML5: Links

inarocket.com

HTMLLearn at rocket speed

LINKS

Page 2: Learn HTML5: Links

Learn front-end development at rocket speed

inarocket.com

Page 3: Learn HTML5: Links

What is a URL

Page 4: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

WHAT IS A URL

U R LUniform Resource Locator

Is the syntax and semantics of formalized information for location and access of resources on the Internet

Page 5: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

WHAT IS A URL

URL

http://www.w3.org/htmlDomain NameProtocol Path

Page 6: Learn HTML5: Links

Links: Basic Structure

Page 7: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

LINKS: BASIC STRUCTURE

Go to the W3C website

Elem

ent

<a href=“http://www.w3.org/html”>

</a>

URLHypertext reference

Text that will work as a link

Page 8: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

index.html

LINKS: BASIC STRUCTURE

Browser

Go to the W3C website

<a href=“http://www.w3.org/html”>Go to the W3C website</a>

Editor

Opens the link when clicked

Page 9: Learn HTML5: Links

Absolute & Relative URLs

Page 10: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.

Page 11: Learn HTML5: Links

Links: Internal

Page 12: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

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

Imagine you need to create a link from index.html to jobs.html.

They’re both on the same website, so you just need to include a relative path to jobs.html.

Please find an example in the next slide.

Page 13: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

index.html

LINKS: INTERNAL

Browser

Jobs

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

Editor

Opens the link when clicked

Page 14: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

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

Page 15: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

index.html

LINKS: INTERNAL

Browser

PDF list

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

Editor

Opens the link when clicked

Page 16: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

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

Page 17: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

index.html

LINKS: INTERNAL

Browser

Home

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

Editor (list.html)

Opens the link when clicked

Page 18: Learn HTML5: Links

Links: External

Page 19: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

index.html

LINKS: EXTERNAL

Browser

Wikipedia

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

Editor

Opens the link when clicked

Page 20: Learn HTML5: Links

Links: Anchors

Page 21: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.

Page 22: Learn HTML5: Links

Links: Other Protocols

Page 23: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

LINKS: OTHER PROTOCOLS

Contact the W3C staff

Elem

ent

<a href=“mailto:[email protected]”>

</a>

URLHypertext reference

Text that will work as a link

Page 24: Learn HTML5: Links

inarocket.com - Learn HTML at rocket speed

LINKS: OTHER PROTOCOLS

Download document

Elem

ent

<a href=“ftp://university.edu/doc.pdf”>

</a>

URLHypertext reference

Text that will work as a link

Page 25: Learn HTML5: Links

Are you also interested in learning

BOOTSTRAP 4POSTCSS?+

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

Page 26: Learn HTML5: Links

More tutorials

inarocket.com

Page 27: Learn HTML5: Links

inarocket.com

HTMLLearn at rocket speed

LINKS