Word Wide Web
What is The World Wide Web?
The World Wide Web is an interconnected system that connects a set of web pages between the internet. It is important to not confuse the Internet with WWW. WWW is only one of the applications that was built above internet.
Who was the creator?
Tim Berners-Lee proposed the architecture of the WWW, creating the first Server and the first browser in 1990, and published in 1991
Components of the Word Wide Web
HTTP Protocol
HTTP Methods:
This protocol provides a series of methods to communicate with a server from a client. There are 6 methods with different uses and rules:
DELETE
Method in charge of delete a resource from the server. The resource could be a file, an entry on a database, or whatever. This method is not a default method, so should be implemented by the server.
GET
The get method is used to ask for a resource from a serve. This method can’t send data to the server. The answer is a text which could be in different formats, like HTML, JSON and so on.
To make the request more specific, you can send some information about what you are looking up. This
values are append to the URL, as a key value, separate each one with the ampersand &
symbol and
after the close question mark of the URL.
In most cases, is enough to append the request values to the URL. But there are occasions on which it is not enough and you need to use the FORM ENCODING format
user_agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" curl -vvv -G http://localhost:8000/test -H "User-Agent: $user_agent" -d query=scope=1
Connected to localhost (127.0.0.1) port 8000 (#0) > GET /test?query=scope=1 HTTP/1.1 > Host: localhost:8000 > Accept: */* > User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 > HTTP 1.0, assume close after body < HTTP/1.0 404 File not found < Server: SimpleHTTP/0.6 Python/3.11.4 < Date: Mon, 14 Aug 2023 12:28:11 GMT < Connection: close < Content-Type: text/html;charset=utf-8 < Content-Length: 335
HEAD
This method asks for the same headers which will be returned with the get method. It is useful in some contexts as small computer capabilities. Imagine you haven’t RAM available. You, could ask first for the headers of the request, evaluate the content-length property and act according to this value.
OPTIONS
The method OPTIONS retrieves a list of methods availables for a resource. This method is implement by default in most of the servers
curl -X OPTIONS https://example.org -i
HTTP/2 200 allow: OPTIONS, GET, HEAD, POST cache-control: max-age=604800 content-type: text/html; charset=UTF-8 date: Wed, 16 Aug 2023 15:06:45 GMT expires: Wed, 23 Aug 2023 15:06:45 GMT server: EOS (vny/044F) content-length: 0
POST
The POST method allows to send data to the server. Normally, this method, produces a change in the state of the server, for example, when a login process ends successfully, the server creates a session for the user and works in a different way. That means that the post method is not indepondent.
POST /test HTTP/1.1 Host: foo.example Content-Type: application/x-www-form-urlencoded Content-Length: 27 field1=value1&field2=value2
PUT
With this method, we can create or update an existing resource. It means that the method is indepondent.
PUT /new.html HTTP/1.1 Host: example.com sontent-type: text/html Content-length: 16 <p>New File</p>
HTTP CODES
When we ask for a resource using the HTTP protocol, the response has a status code to identify if the answer was successful or not. The codes are grouped in five categories.
1XX INFORMATION RESPONSE
When a request gets a code between 100 and 199, the value of the response is informative
2XX SUCCESS RESPONSE
In this case, the request ends successfully. The most common response is 200 which means OK. But there is a lot of entries.
3XX REDIRECT RESPONSE
With this response, the client should make another request following a new URL because the resource has been moved temporally or permanent
4XX CLIENT ERROR RESPONSE
When the client gets an error code between 400 and 499, the client performs the request with some errors that should be fixed before trying again. These errors could be from a badly formed URL to an incorrect data provided to the server, including trying to access some inexistent resource, the famous 404 Page not found
5XX SERVER ERROR
With the 5XX error, the server informs the client, that there was an error processing the request, but it could be temporally and the error is not caused by a client’s action.
THE URL
The URL is an id for a resource on the WWW. The URL is formed by different parts:
The protocol
The protocol specify the communication schema to be used. The most known are:
- HTTP:
- HTTP:
- FTP
- FTPS
- file: This is not a protocol by itself, it is an instruction for some programs which tell the software that the resource is on the computer.
The domain
The domain is the namespace of the resource. When the client writes a domain, there is a process in which the computer ask for an ip associated with the domain to a DNS Server. That means, that the client could use the domain or the ip elsewhere.
PORT
The server can open many ports as sockets. When the protocol is http, the default port is 80 or 443 if uses https.
The first 210 numbers are ports used by the operative system. After that, the user could open and use the port which desired.
This is specially useful when working with live servers such as the one provided by Visual Studio.
The path
The path or location of the resource on the server. Normally, it represents a physical location for a file. But now, it could work as an abstraction to the server.
The query parameters
A list of key value pairs, joined by an ampersand, that follows the path of the URL and separate from it with a closed question marked.
Anchor
The anchor is a key inside the web-page, like a section. This allows the user to go directly to the section which is refereed. The character used to separate the anchor from the rest of the URL is a hashtag, because that, we can refer to it as a hash part.
http://example.org:80/index.html?user=pedro
Characteristics
The main characteristic of the WWW is the capability to connect sites with hyperlinks. This provides an architecture not hierarchy, allowing users to explore the content in a different way connecting different ideas, instead of following a path.
W3C
The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy, and security.
Standards and Guidelines
The standards are rules developed to help web developers and browsers to render well a web page, helping to make it accessible, with semantic meaning. The most important advantage about this standard is that help to make the site visible on many devices, without many headaches.
HTML
HTML is a markup language (HyperText Markup Language). Is the most basic tool to build websites. With HTML we can define the structure of the page and give meaning to its part. Currently, the html is combined with CSS and JavaScript
Basic Syntax
The syntax of HTML has been evolving in recent years. Now the standard is HTML5 which proved more tag and functionalities.
<p>This is a paragraph</p>
The tags have an opening part which indicates the start of this part and a closed tag end indicates the end of the tag. The main difference between both is the slash character after the less than symbol.
The tag could be wrapped by another tag. One example of that is the use of ordered or unordered
lists. The tags ol
and ul
create it respectively.
<p> Ingredients: </p> <ul> <li> salt</li> <li> 2 eggs </li> <li> ... </li> </ul> <p>Steps:</p> <ol> <li> Step 1</li> <li> Step 2</li> <li> Step 3</li> <ol>
Attributes
To provide more meaning to an element, the developer could use attributes. They are a key, value pairs which give some additional information or functionalities to an element. There are a lot of predefined attributes like:
- class
- id
- href
- value
And so on. Also, the developer could use their own attributes, but is a good practice to prepend it
with data-
to ensure that doesn’t override the default behavior.
<img src="img/my_image.png" /> <ul data-type="quizz"> <li data-correct="false"> Answer one</li> <li data-correct="false"> Answer two</li> <li data-correct="true"> Answer three</li> </ul>
Semantic tags
As I mentioned, there is a meaning behind some tags. This helps the browser and search engine.
header
Inside the header should be the most important part of the page. With the title, logo and, description.
main
The main part of the site. In this element couldn’t be repeated elements from other pages, likes navigation links, footer or introduction
section
The section wraps related content, it works as a chapter of a book.
article
Inside the section should be at least one article that talks about a single topic formed by paragraphs
nav
The navigation bar. This element contains the links to the other page or section of the web site
aside
The aside tag defines indirectly related content surrounding the main text.
footer
The footer of a document. Typically contains:
- authorship information
- copyright information
- contact information
- site map
- back to top link
- related documents
references:
External links
- WCSCHOOL This page has content about different technologies, includes html, css and javascript
- mdn documentation Mozzila has an excellent documentation about any content related to the web
- can i use? When you are not sure if something is supported in some browser