Learn HTML5: Links

Post on 16-Apr-2017

1.047 views 0 download

Transcript of Learn HTML5: Links

inarocket.com

HTMLLearn at rocket speed

LINKS

Learn front-end development at rocket speed

inarocket.com

What is a URL

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

inarocket.com - Learn HTML at rocket speed

WHAT IS A URL

URL

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

Links: Basic Structure

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

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

Absolute & Relative URLs

inarocket.com - Learn HTML at rocket speed

NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.

Links: Internal

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.

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

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

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

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

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

Links: External

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

Links: Anchors

inarocket.com - Learn HTML at rocket speed

NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.

Links: Other Protocols

inarocket.com - Learn HTML at rocket speed

LINKS: OTHER PROTOCOLS

Contact the W3C staff

Elem

ent

<a href=“mailto:contact@w3.org”>

</a>

URLHypertext reference

Text that will work as a link

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

Are you also interested in learning

BOOTSTRAP 4POSTCSS?+

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

More tutorials

inarocket.com

inarocket.com

HTMLLearn at rocket speed

LINKS