URLs and their structure in Intro to Computing - Full Explanation

Introduction

Imagine you want to visit a friend's house but you only know their name. You need a clear address to find the exact location. The internet works the same way: to visit a website, you need a clear address called a URL that tells your computer where to go.

Explanation

Scheme

The scheme is the first part of a URL and tells your computer how to access the resource. Common schemes include 'http' and 'https', which are used to visit web pages securely or not. It acts like the mode of transportation to reach the destination.

The scheme defines the method used to access the resource on the internet.

Host

The host is the main address of the website, like the name of a building or house. It usually looks like 'www.example.com' and tells your computer which server to connect to. This is the key part that directs your request to the right place.

The host specifies the exact server where the resource lives.

Port

The port is a number that tells your computer which door to use when entering the server. Most URLs leave this out because the computer uses a default door based on the scheme, like door 80 for 'http' or 443 for 'https'. It helps the server know which service you want.

The port directs the request to a specific service on the server.

Path

The path is like the street and apartment number inside the building. It tells the server exactly which page or file you want to see. For example, '/about' might take you to the About Us page of a website.

The path locates the specific resource within the server.

Query

The query is extra information added to the URL after a question mark '?'. It often contains details like search terms or filters, helping the server customize the response. For example, '?search=books' tells the server you want to search for books.

The query passes additional instructions or data to the server.

Fragment

The fragment comes after a '#' symbol and points to a specific part of the page, like a chapter in a book. It helps your browser jump directly to that section without reloading the whole page.

The fragment directs the browser to a specific section within the page.

Real World Analogy

Think of a URL as a full mailing address. The scheme is the type of delivery like mail or courier, the host is the city or building, the port is the specific entrance door, the path is the street and house number, the query is extra instructions like 'leave at the back door', and the fragment is the room number inside the house.

Scheme → Type of delivery service (mail, courier)

Host → City or building name

Port → Specific entrance door number

Path → Street and house number

Query → Extra delivery instructions

Fragment → Room number inside the house

Diagram

Diagram

┌─────────┬───────────────┬───────┬───────────────┬───────────────┬───────────┐
│ Scheme  │     Host      │ Port  │     Path      │    Query      │ Fragment  │
├─────────┼───────────────┼───────┼───────────────┼───────────────┼───────────┤
│ https   │ www.example.com │ :443  │ /about/us     │ ?id=123&ref=4 │ #section2 │
└─────────┴───────────────┴───────┴───────────────┴───────────────┴───────────┘

This diagram shows the main parts of a URL arranged in order from scheme to fragment.

Key Facts

URL → A URL is the full address used to find a resource on the internet.

Scheme → The scheme specifies how to access the resource, like http or https.

Host → The host is the domain name or IP address of the server hosting the resource.

Path → The path points to the specific location or file on the server.

Query → The query provides extra parameters to customize the request.

Fragment → The fragment directs the browser to a specific part of the page.

Common Confusions

Believing the port is always visible in URLs.

Believing the port is always visible in URLs. Ports are often hidden because browsers use default ports for common schemes like 80 for http and 443 for https.

Thinking the fragment is sent to the server.

Thinking the fragment is sent to the server. The fragment is handled only by the browser and is not sent to the server.

Assuming the query is part of the path.

Assuming the query is part of the path. The query is separate from the path and starts after a '?' symbol to pass extra data.

Summary

A URL is like a full address that tells your computer exactly where and how to find something on the internet.

It has several parts: scheme (how to connect), host (where to go), port (which door), path (which room), query (extra info), and fragment (specific section).

Understanding each part helps you read and use URLs better, making internet navigation clearer.

Practice

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