Learn HTML5: Links
-
Upload
in-a-rocket -
Category
Internet
-
view
1.052 -
download
0
Transcript of Learn HTML5: Links
![Page 1: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/1.jpg)
inarocket.com
HTMLLearn at rocket speed
LINKS
![Page 3: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/3.jpg)
What is a URL
![Page 4: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/5.jpg)
inarocket.com - Learn HTML at rocket speed
WHAT IS A URL
URL
http://www.w3.org/htmlDomain NameProtocol Path
![Page 6: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/6.jpg)
Links: Basic Structure
![Page 7: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/9.jpg)
Absolute & Relative URLs
![Page 10: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/10.jpg)
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.
![Page 11: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/11.jpg)
Links: Internal
![Page 12: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/12.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
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/14.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 15: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/16.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 17: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/18.jpg)
Links: External
![Page 19: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/20.jpg)
Links: Anchors
![Page 21: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/21.jpg)
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.
![Page 22: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/22.jpg)
Links: Other Protocols
![Page 23: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/23.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/24.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/25.jpg)
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
![Page 27: Learn HTML5: Links](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b361760da3da068bd59a/html5/thumbnails/27.jpg)
inarocket.com
HTMLLearn at rocket speed
LINKS