1 / 12

Understanding URLs in Web Design

Explore the importance of URLs in web design, understand different protocols, server domains, and file naming conventions. Learn how to structure directories, use relative URLs, and include fragments effectively.

kale
Télécharger la présentation

Understanding URLs in Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS110: Computer Science and the Internet More HTMLWell designed websitesURLs

  2. Warm-up

  3. What will the browser display? And the answer is…

  4. The answer is …

  5. Questions from quiz • http://cs.wellesley.edu/~cs110/scott/L02-urls-etc/main.html

  6. Other questions

  7. And now… http://www.youtube.com/watch?v=3iVVM_DgWY4

  8. Well-designed sites discussion • group 1 • group 2 • group 3 • group 4 • group 5 • group 6

  9. URLs: Uniform Resource Locators Link to today’s lecture notes using an absolute URL: <a href=“http://cs.wellesley.edu/~cs110/lectures/L03-html/URLs.html”> lecture notes on URLs</a> • Other protocols? • Another server at the wellesley.edu domain? • server.domain must be unique in the world! • ~cs110 is an abbreviation for the public_htmlfolder in the • cs110 home directory • Tips on directory and file names: • - use only letters and digits (no spaces or special characters) • - case matters! URLs.html ≠ URLS.html ≠ urls.html

  10. Tree Structured Directory Subfolders and files inside the Joss folder, using “list” view on a Mac

  11. Tree Structured Directory Using Relative URLs • File in same folder: link in buffy.html to willow.html • File in sibling folder: link in mythology.html to angel.html • File in a folder “above”: link in host.html to season3.html • File in folder multiple levels up: link in buffy.html to comics.html • Add link in comics.html to gunn.html • Add link in host.html to buffy.html

  12. Fragments • Examples: navigation menu, e-mail your instructors • Create in two steps: (1) Give the destination a name <h2 id=“relative”>Relative URLs</h2> (2) Add destination name to the link in the same file: <a href=“#relative”>Relative URLs</a> from a different file: <a href=“http://cs.wellesley.edu/~cs110/lectures/L03-html/URLs.html#relative”> Relative URLs</a>

More Related