Draw This - beginner

Draw a labeled diagram showing the main parts of the URL: https://www.example.com:8080/path/to/page?search=books#section2. Label each part clearly.

10 minutes

Hint 1

Hint 2

Hint 3

Grading Criteria

All main URL parts labeled: Protocol, Domain, Port, Path, Query, Fragment

Labels correctly point to the right part of the URL

Diagram clearly shows the full URL with parts separated

Neat and readable layout with arrows or lines connecting labels

No missing parts or incorrect labels

Solution

URL: https://www.example.com:8080/path/to/page?search=books#section2

  |-------|  |----------------| |----| |--------------| |----------| |---------|
  Protocol   Domain name       Port   Path           Query      Fragment
  (https)   (www.example.com) (8080) (/path/to/page) (search=books) (#section2)

Diagram:

+-----------------------------+
| https://                   |  <-- Protocol (How to connect)
|  www.example.com            |  <-- Domain (Website address)
|           :8080             |  <-- Port (Optional number)
|               /path/to/page |  <-- Path (Page location)
|                          ?search=books |  <-- Query (Extra info)
|                                #section2 |  <-- Fragment (Page section)
+-----------------------------+

This URL has several parts:

Protocol: https tells the browser to use a secure connection.
Domain: www.example.com is the website's address.
Port: 8080 is an optional number specifying the server port.
Path: /path/to/page shows the exact page or folder on the website.
Query: search=books provides extra information to the server, like a search term.
Fragment: #section2 points to a specific part of the page.

Think of the URL like a mailing address: protocol is the delivery method, domain is the city, port is the building entrance, path is the street and house, query is a note for the delivery person, and fragment is the room inside the house.

Variations - 2 Challenges

[intermediate] Draw a labeled diagram showing the main parts of the URL: http://blog.site.org/articles/2024?tag=technology#comments. Label each part clearly.

[advanced] Draw a detailed diagram of the URL: ftp://files.server.net/downloads/manual.pdf. Label all parts and explain why this URL uses ftp instead of http.