Learn HTML5: Links

Learn HTML5: Links

1. 1. inarocket.com HTML Learn at rocket speed LINKS
2. 2. Learn front-end development at rocket speed inarocket.com
3. 3. What is a URL
4. 4. inarocket.com - Learn HTML at rocket speed WHAT IS A URL URLUniform Resource Locator Is the syntax and semantics of formalized information for location and access of resources on the Internet
5. 5. inarocket.com - Learn HTML at rocket speed WHAT IS A URL URL http://www.w3.org/html Domain NameProtocol Path
6. 6. Links: Basic Structure
7. 7. inarocket.com - Learn HTML at rocket speed LINKS: BASIC STRUCTURE Go to the W3C website Element <a href=“http://www.w3.org/html”> </a> URLHypertext reference Text that will work as a link
8. 8. 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
9. 9. Absolute & Relative URLs
10. 10. inarocket.com - Learn HTML at rocket speed NOTICE Sorry for the inconvenience. This presentation is a work in progress.
11. 11. Links: Internal
12. 12. 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.
13. 13. 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
14. 14. 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
15. 15. 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
16. 16. 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
17. 17. 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
18. 18. Links: External
19. 19. 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
20. 20. Links: Anchors
21. 21. inarocket.com - Learn HTML at rocket speed NOTICE Sorry for the inconvenience. This presentation is a work in progress.
22. 22. Links: Other Protocols
23. 23. inarocket.com - Learn HTML at rocket speed LINKS: OTHER PROTOCOLS Contact the W3C staff Element <a href=“mailto:[email protected]”> </a> URLHypertext reference Text that will work as a link
24. 24. inarocket.com - Learn HTML at rocket speed LINKS: OTHER PROTOCOLS Download document Element <a href=“ftp://university.edu/doc.pdf”> </a> URLHypertext reference Text that will work as a link
25. 25. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
26. 26. More tutorials inarocket.com
27. 27. inarocket.com HTML Learn at rocket speed LINKS