Bird
Raised Fist0
Intro to Computingfundamentals~10 mins

URLs and their structure in Intro to Computing - Draw & Build Visually

Choose your learning style10 modes available
LearnWhyDeepFlowTryChallengeDrawRecallReal

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which part of a URL specifies the protocol used to access a resource?
https://www.example.com:8080/path?query=123#section
easy
A. www.example.com
B. 8080
C. https
D. /path

Solution

  1. Step 1: Identify the scheme in the URL

    The scheme is the part before the first colon (:), which defines the protocol.

  2. Step 2: Locate the scheme in the example URL

    In https://www.example.com:8080/path?query=123#section, the scheme is https.

  3. Final Answer:

    https -> Option C

  4. Quick Check:

    Scheme = https [OK]
Hint: Look before :// for the protocol name [OK]
Common Mistakes:
  • Confusing domain with scheme
  • Thinking port number is the protocol
  • Selecting path as scheme
2. Which of the following is the correct syntax for a URL including a port number?
easy
A. http://example.com:80
B. http://:80example.com
C. http://example.com/80
D. http://example.com?80

Solution

  1. Step 1: Understand port placement in URL syntax

    The port number comes after the domain, separated by a colon (:).

  2. Step 2: Check each option for correct port syntax

    http://example.com:80 uses http://example.com:80, which correctly places port 80 after the domain with a colon.

  3. Final Answer:

    http://example.com:80 -> Option A

  4. Quick Check:

    Port follows domain with colon [OK]
Hint: Port number always follows domain with a colon [OK]
Common Mistakes:
  • Placing port before domain
  • Using slash instead of colon for port
  • Adding port as query parameter
3. What is the full path and query part of this URL?
https://shop.example.com/products/item?id=12345&color=red#reviews
medium
A. /products/item?id=12345&color=red
B. /products/item#reviews
C. ?id=12345&color=red#reviews
D. /products/item?id=12345&color=red#reviews

Solution

  1. Step 1: Identify path and query parts in the URL

    The path is the part after the domain up to the question mark (?), and the query is after the question mark up to the hash (#).

  2. Step 2: Extract path and query from the example URL

    Path: /products/item, Query: ?id=12345&color=red. The fragment #reviews is not part of path or query.

  3. Final Answer:

    /products/item?id=12345&color=red -> Option A

  4. Quick Check:

    Path + Query = /products/item?id=12345&color=red [OK]
Hint: Path starts with /, query starts with ? [OK]
Common Mistakes:
  • Including fragment (#reviews) in path or query
  • Confusing query with fragment
  • Ignoring query parameters
4. Identify the error in this URL:
ftp//files.example.com/downloads/file.zip
medium
A. Path should start with a question mark
B. Missing colon after scheme
C. Domain name is invalid
D. Port number is missing

Solution

  1. Step 1: Check the scheme syntax

    The scheme must end with a colon (:), e.g., ftp:.

  2. Step 2: Locate the error in the URL

    The URL has ftp// missing the colon after ftp. Correct form is ftp://.

  3. Final Answer:

    Missing colon after scheme -> Option B

  4. Quick Check:

    Scheme ends with : [OK]
Hint: Scheme must end with : before // [OK]
Common Mistakes:
  • Ignoring missing colon in scheme
  • Thinking domain is invalid
  • Expecting port number always
5. You want to create a URL to access a user profile page with user ID 789 and show the 'settings' section. Which URL correctly uses path, query, and fragment?
Base URL: https://app.example.com
hard
A. https://app.example.com/user?id=789#settings?section=profile
B. https://app.example.com/user/789#settings?section=profile
C. https://app.example.com/user/789?section=settings#profile
D. https://app.example.com/user/789?section=settings#settings

Solution

  1. Step 1: Understand URL parts for user profile

    The user ID should be part of the path (/user/789), the section to show is a query parameter (?section=settings), and the fragment points to a page section (#settings).

  2. Step 2: Evaluate each option for correct structure

    https://app.example.com/user/789?section=settings#settings correctly places user ID in path, section in query, and fragment as #settings. Others mix fragment and query incorrectly or mismatch sections.

  3. Final Answer:

    https://app.example.com/user/789?section=settings#settings -> Option D

  4. Quick Check:

    Path + Query + Fragment correct [OK]
Hint: Path for ID, query for filters, fragment for page section [OK]
Common Mistakes:
  • Swapping query and fragment parts
  • Putting ID in query instead of path
  • Using fragment with query parameters