1.1.3.Core internet technologies - quanganh2001/meta-front-end-developer-professional-certificate-coursera GitHub Wiki
This reading explores the contents of HTTP requests and responses in more depth.
Every HTTP request begins with the request line.
This consists of the HTTP method, the requested resource and the HTTP protocol version.
GET /home.html HTTP/1.1
In this example, GET is the HTTP method, /home.html is the resource requested and HTTP 1.1 is the protocol used.
HTTP methods indicate the action that the client wishes to perform on the web server resource.
Common HTTP methods are:
| HTTP Method | Description |
|---|---|
| GET | The client requests a resource on the web server. |
| POST | The client submits data to a resource on the web server. |
| PUT | The client replaces a resource on the web server. |
| DELETE | The client deletes a resource on the web server. |
| PATCH | The client partially updates a resource on the web server. |
After the request line, the HTTP headers are followed by a line break.
There are various possibilities when including an HTTP header in the HTTP request. A header is a case-insensitive name followed by a: and then followed by a value.
Common headers are:
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en
Content-type: text/json- The
Hostheader specifies the host of the server and indicates where the resource is requested from. - The
User-Agentheader informs the web server of the application that is making the request. It often includes the operating system (Windows, Mac, Linux), version and application vendor. - The
Acceptheader informs the web server what type of content the client will accept as the response. - The
Accept-Languageheader indicates the language and optionally the locale that the client prefers. - The
Content-typeheader indicates the type of content being transmitted in the request body.
HTTP requests can optionally include a request body. A request body is often included when using the HTTP POST and PUT methods to transmit data.
POST /users HTTP/1.1
Host: example.com
{
"key1":"value1",
"key2":"value2",
"array1":["value3","value4"]
}PUT /users/1 HTTP/1.1
Host: example.com
Content-type: text/json
{"key1":"value1"}When the web server is finished processing the HTTP request, it will send back an HTTP response.
The first line of the response is the status line. This line shows the client if the request was successful or if an error occurred.
HTTP/1.1 200 OK
The line begins with the HTTP protocol version, followed by the status code and a reason phrase. The reason phrase is a textual representation of the status code.
The first digit of an HTTP status code indicates the category of the response: Information, Successful, Redirection, Client Error or Server Error.
The common status codes you'll encounter for each category are:
1XX Informational
| Status Code | Reason Phrase | Description |
|---|---|---|
| 100 | Continue | The server received the request headers and should continue to send the request body |
| 101 | Switching Protocols | The client has requested the server to switch protocols and the server has agreed to do so. |
2XX Successful
| Status Code | Reason Phrase | Description |
|---|---|---|
| 200 | OK | Standard response returned by the server to indicate it successfully processed the request. |
| 201 | Created | The server sucessfully processed the request and a resource was created. |
| 202 | Accepted | The server accepted the request for processing but the processing has not yet been completed. |
| 204 | No Content | The server successfully processed the request but is not returning any content. |
3XX Redirection
| Status Code | Reason Phrase | Description |
|---|---|---|
| 301 | Moved Permanently | This request and all future requests should be sent to the returned location. |
| 302 | Found | This request should be sent to the returned location. |
4XX Client Error
| Status Code | Reason Phrase | Description |
|---|---|---|
| 400 | Bad Request | The server cannot process the request due to a client error, e.g., invalid request or transmitted data is too large. |
| 401 | Unauthorized | The client making the request is unauthorized and should authenticate. |
| 403 | Forbidden | The request was valid but the server is refusing to process it. This is usually returned due to the client having insufficient permissions for the website, e.g., requesting an administrator action but the user is not an administrator. |
| 404 | Not Found | The server did not find the requested resource. |
| 405 | Method Not Allowed | The web server does not support the HTTP method used. |
5XX Server Error
| Status Code | Reason Phrase | Description |
|---|---|---|
| 500 | Internal Server Error | A generic error status code given when an unexpected error or condition occurred while processing the request. |
| 502 | Bad Gateway | The web server received an invalid response from the Application Server. |
| 503 | Service Unavailable | The web server cannot process the request. |
Following the status line, there are optional HTTP response headers followed by a line break.
Similar to the request headers, there are many possible HTTP headers that can be included in the HTTP response.
Common response headers are:
Date: Fri, 11 Feb 2022 15:00:00 GMT+2
Server: Apache/2.2.14 (Linux)
Content-Length: 84
Content-Type: text/html- The
Dateheader specifies the date and time the HTTP response was generated. - The
Serverheader describes the web server software used to generate the response. - The
Content-Lengthheader describes the length of the response. - The
Content-Typeheader describes the media type of the resource returned (e.g. HTML document, image, video).
Following the HTTP response headers is the HTTP response body. This is the main content of the HTTP response.
This can contain images, video, HTML documents and other media types.
HTTP/1.1 200 OK
Date: Fri, 11 Feb 2022 15:00:00 GMT+2
Server: Apache/2.2.14 (Linux)
Content-Length: 84
Content-Type: text/html
<html>
<head><title>Test</title></head>
<body>Test HTML page.</body>
</html>Hypertext Transfer Protocols (HTTP) are used on top of Transmission Control Protocol (TCP) to transfer webpages and other content from websites.
This reading explores other protocols commonly used on the Internet.
You've learned that computers need IP addresses to communicate with each other. When your computer connects to a network, the Dynamic Host Configuration Protocol or DHCP as it is commonly known, is used to assign your computer an IP address.
Your computer communicates over User Datagram Protocol (UDP) using the protocol with a type of server called a DHCP server. The server keeps track of computers on the network and their IP addresses. It will assign your computer an IP address and respond over the protocol to let it know which IP address to use. Once your computer has an IP address, it can communicate with other computers on the network.
Your computer needs a way to know with which IP address to communicate when you visit a website in your web browser, for example, meta.com. The Domain Name System Protocol, commonly known as DNS, provides this function. Your computer then checks with the DNS server associated with the domain name and then returns the correct IP address.
Do you check your emails on your mobile or tablet device? Or maybe you use an email application on your computer?
Your device needs a way to download emails and manage your mailbox on the server storing your emails. This is the purpose of the Internet Message Access Protocol or IMAP.
Now that your emails are on your device, you need a way to send emails. The Simple Mail Transfer Protocol, or SMTP, is used. It allows email clients to submit emails for sending via an SMTP server. You can also use it to receive emails from an email client, but IMAP is more commonly used.
The Post Office Protocol (POP) is an older protocol used to download emails to an email client. The main difference in using POP instead of IMAP is that POP will delete the emails on the server once they have been downloaded to your local device. Although it is no longer commonly used in email clients, developers often use it to implement email automation as it is a more straightforward protocol than IMAP.
When running your websites and web applications on the Internet, you'll need a way to transfer the files from your local computer to the server they'll run on. The standard protocol used for this is the File Transfer Protocol or FTP. FTP allows you to list, send, receive and delete files on a server. Your server must run an FTP Server and you will need an FTP Client on your local machine. You'll learn more about these in a later course.
When you start working with servers, you'll also need a way to log in and interact with the computer remotely. The most common method of doing this is using the Secure Shell Protocol, commonly referred to as SSH. Using an SSH client allows you to connect to an SSH server running on a server to perform commands on the remote computer.
All data sent over SSH is encrypted. This means that third parties cannot understand the data transmitted. Only the sending and receiving computers can understand the data.
The data is transmitted insecurely when using the File Transfer Protocol. This means that third parties may understand the data that you are sending. This is not right if you transmit company files such as software and databases. To solve this, the SSH File Transfer Protocol, alternatively called the Secure File Transfer Protocol, can be used to transfer files over the SSH protocol. This ensures that the data is transmitted securely. Most FTP clients also support the SFTP protocol.
When sending a message to another computer, the source and destination are specified using ________________. A. a Domain Name
B. a Web Server
C. an IP Address
When sending a message to another computer, the source and destination are specified using an IP Address. Explain: The source and destination of an IP packet are specified using an IP address.
Which of the following are valid IP addresses? Select all that apply.
- 192.0.2.235
- example.com
- 4527:0db8:0a00:1567:0200:ff00:0042:8329
Explain: this an IP address for protocol version 4 and this is an IP address for protocol version 6
When using TCP, data can arrive out of order.
A. True
B. False
This is true statement. Explain: Data sent via TCP can arrive out of order, but the protocol ensures it's reordered correctly before delivery to the application.
Which of the following are valid HTTP methods? Select all that apply.
- GET
- POST
- SEND
- DELETE Explain: GET is used to retrieve data from the server. POST is used to send data to the server. DELETE is used to delete data on the server.
HTML describes the structure and content of a web page. A. True
B. False
It is true statement. Explain: HTML uses markup tags to describe the structure and content of a web page.
When you type a website address (for example, coursera.org) in your web browser, which protocol is used to find the IP address of the website?
A. Internet Message Access Protocol (IMAP)
B. File Transfer Protocol (FTP)
C. Domain Name System Protocol (DNS)
The correct answer is DNS. Explain: The DNS protocol will return the IP address for a domain name.
A web application is more ________________ compared to a website.
A. Informative
B. Interactive
A web application is more interactive compared to a website. Explain: Web applications are interactive, for example, using a web app to find local restaurants.
In this exercise, you will practice examining an HTML page using the developer tools.
Inspect the HTML document using the developer tools in your browser.
Find the HTML ID of the Little Lemon logo.
Step 1: Download the following file on your local system.
Step 2: Unzip the file.
On Windows, open your Downloads folder, right-click the file examine_the_page.zip and select Extract All.
On Mac, open your Downloads folder and double click the file examine_the_page.zip.
Once unzipped, there will be a folder named examine_the_page.
Step 3: Open the folder and double click index.html to view the file in your local web browser. Verify that it looks like this:
Step 4: Right-click the Little Lemon logo and select Inspect (or Inspect Element)
Step 5: Inspect the line in the HTML for the logo in the developer tools panel. The line begins with <img.
Note: In the line, there is an ID in the following format id="???". Note the value that the ID is equal to.
- If you get stuck, close the developer tools and start over.
- Review the lesson Developer Tools.
After completing the Examine a Page exercise, answer the self-review quiz below.
What is the value of the ID attribute for the Little Lemon logo?
A. logo1
B. lemon
C. little
D. logo
Explain: The HTML defined the ID attribute value as logo1.
In this exercise, you will practice editing an HTML page using the developer tools.
Edit the HTML document using the developer tools in your browser.
Change the text of Our Menu to Little Lemon Menu.
Step 1: Download the following file on your local system.
Note: If you have completed the exercise Examine the Page, you can skip steps 1 and 2 as the file contains the same assets from that exercise.
Step 2: Unzip the file.
On Windows, open your Downloads folder, right-click the file examine_the_page.zip and select Extract All.
On Mac, open your Downloads folder and double click the file examine_the_page.zip.
Once unzipped, there will be a folder named examine_the_page.
Step 3: Open the index.html file in your local browser for preview. Verify that it looks like this:
Step 4: Right-click the Our Menu text and select Inspect or Inspect Element.
Step 5: Double-click the Our Menu text in the Elements tab of the developer tools panel.
Step 6: Change the text to Little Lemon Menu.
Step 7: Close the developer tools.
Step 8: Verify that the text has changed on the web page.
- If you get stuck, close the developer tools and start from the beginning.
- Review the lesson Developer Tools.
This reading walks you through the steps to set up an Integrated Development Environment, or IDE, on a Windows and on a Mac (further down below).
The IDE you'll be using in the course is Visual Studio Code, which Microsoft provides for free and comes with a wealth of plugins and extensions to make your life as a developer easier.
You have two options for using Visual Studio Code to complete your course activities:
Option 1: Use Visual Studio Code in-browser with Coursera Labs
Coursera’s platform offers an in-browser version of Visual Studio Code which is preconfigured and requires no local setup. You can access the Visual Studio Code environment through the “Lab” items included in this course. Your work and files will be saved and available within this in-browser lab while you have course access.
Option 2: Work on your local device
You can also choose to complete your work on your local machine if you prefer. This will require a few steps of set up in advance.
First, you need to download the IDE from Microsoft's website - https://code.visualstudio.com/download .
Select the download based on your operating system.
Step 1: Download the Windows installer.
Step 2: Open the file to install it once the download is complete.
Step 3: Review and accept the license agreement, then click Next.
Step 4: Keep the default value when prompted for the destination location and click next.
Step 5: On the additional tasks view, make sure that Add to PATH is selected.
Step 6: Click next.
Step 7: Click install when the ready to install page appears.
Step 8: Click finish once completed, and the application will launch.
Step 1: Download the application based on the chipset you have. M1 macs use Apple Silicon, and older Macs use Intel. If you are not sure, choose the Universal option.
Step 2: Go to your Downloads folder once the download is complete.
Step 3: Double-click the zip file to extract the contents.
Step 4: Drag and drop the .app file to the application link in Finder below.
Step 5: Open the app.
Please refer to the official Linux installation guide for Visual Studio Code.
Now that you have Visual Studio Code set up create a folder on your device that you'll use to do course exercises.
Open Visual Studio Code, go to File and select Open Folder. Using the file browser, select the folder you just created.
Congratulations, you're set up now to begin writing some code.
In addition to having Visual Studio Code installed on your own computer, in this course and throughout this program, you'll have the opportunity to work in Visual Studio Code right here on Coursera!
As you progress through the course, you'll be able to write code in hands-on activities called Labs. In these labs you'll be able to open Visual Studio Code and start writing code without ever leaving the course.
You'll have plenty of opportunities to see Labs in action later in the course, but for now, use the images below as a visual guide to how Labs will look and operate in your browser.
The Labs contain instructions explaining the coding task.
When you click the button to open the lab, a new tab will open with Visual Studio Code already setup and ready for you to start writing code!
You'll see all the files for the lab in the Project folder in the left sidebar.
And the large editor area where you write your code for the lab.
You may need to use a tool called the Terminal from time to time to complete course activities. You can open this by selecting the Terminal option in the upper Visual Studio Code toolbar.
- Select the Lab Files button in your Lab Toolbar.
- You'll be able to download your full workspace, specific folders, or individual files through the checkbox selection tool.
- After you've selected these files, use the Download link to download your files to your local device.
If you'd like to upload your course files from your local device to your Visual Studio Code lab, drag and drop your file from your local device into the Visual Studio Code file tree.
Your work will be saved and persist within your Visual Studio Code lab while you are enrolled in the course. If you'd like to get a fresh copy of the original instructor-provided files at any time, you can do this through the Lab Help option in your Lab Toolbar. Don't worry - your original work and files will still remain in your lab until you personally remove or delete them, even when refreshing your files through the steps below.
- First rename your original files to something like [yourfilename] [original].[your file extension]`. You can do this by right-clicking on your file in the Visual Studio Code file tree, selecting Rename, and providing a new file name.
- For example for index.html, this could be renamed to
index [original].html
- Select Lab Help from your Lab Toolbar and then select Get latest version.
- You should now see a fresh copy of the original instructor-provided files in your lab, in addition to your own (renamed) files.
Which of the following can be done using the developer tools in your browser? Select all that apply.
- Inspect the HTML elements of a web page.
- CHeck Javascript error logs
- Inspect a timeline of HTTP requests and responses.
- Upload images to the web server.
- Inspect the performance and memory page of a webpage.
Explain: The Elements tab of the web browser's developer tools allows you to inspect the HTML of a web page. JavaScript error logs will be output in the Console tab of the web browser's developer tools. The Network tab of the web browser's developer tools allows you to inspect the timeline of HTTP requests and responses. The Performance and Memory tabs of the web browser's developer tools allow you to inspect how the web browser is performing while displaying your web page.
In software development, a library provides _________________________.
A. Reusable pieces of code that can be used by your application.
B. A structure for developers to build an application with.
In software development, a library provides reusable pieces of code that can be used by your application. Explain: Libraries help you to be more efficient while developing your application by providing you with reusable code.
In software development, an API is _________________________.
A. a set of functions that an application component or service can provide.
B. a text editor to write code with.
In software development, an API is a set of functions that an application component or service can provide. Explain: As a developer you’ll use APIs to interact with application components and services.
Which of the following are benefits of using an Integrated Development Environment (IDE) such as Visual Studio Code? Select all that apply.
- Syntax Highlighting
- Error Highlighting
- Autocomplete
- Autodelete
- IntelliSense
Explain: IDEs will highlight keywords in programming languages for you. IDEs will display syntax errors for you. IDEs will suggest code while you type. IDEs will help you rename functions and change function parameters throughout your application.
When two computers connect directly to each other, this forms ______________.
A. the Internet
B. a Network
C. a Server
When two computers connect directly to each other, this forms a network.
The programs that run on a computer are called the ______________.
A. Hardware
B. Software
The programs that run on a computer are called the software.
The structure of a web page is defined using ______________.
A. HTML
B. CSS
C. Javascript
The structure of a web page is defined using HTML. Explain: HTML defines the structure and content of a web page.
The style of a web page is defined using ______________.
A. HTML
B. CSS
C. Javascript
The style of a web page is defined using CSS. Explain: CSS defines how HTML elements are displayed on a web page.
Computers communicate with each other using which protocol?
A. Network Protocol
B. Mail Protocol
C. Mobile Protocol
D. Internet Protocol
The correct answer is Internet Protocol. Explain: Internet Protocols version 4 and 6 are most commonly used for communication.
To communicate with another computer on a network, your computer sends a message called an __________________.
A. IP Packet
B. IP Mail
C. IP Container
To communicate with another computer on a network, your computer sends a message called an IP Packet. Explain: IP packets contain the data being sent between computers.
The web browser and web server use which protocol to transfer data?
A. DNS
B. SMTP
C. HTTP
D. IMAP
The correct answer is HTTP. Explain: HTTP is used to transfer HTML documents, images and files to the web browser.
In software development, a framework provides a structure for developers to build an application.
A. True
B. False
It is true statement. Explain: Frameworks allow developers to build applications quicker by providing a structure to build with.
As a developer, it is best to use a _____________ to write and maintain code.
A. Word Processor
B. Integrated Development Environment
C. Web Browser
D. Development Book
As a developer, it is best to use a Integrated Development Environment to write and maintain code. Explain: You will use an Integrated Development Environment to effectively and efficiently write and maintain code.
In software development, an API is a set of functions that an application component or service can provide.
A. True
B. False
It is true statement. Explain: As a developer you will interact with many APIs while developing applications.
Here is a list of resources that may be helpful as you continue your learning journey.