Intro
The internet came to be in 1969 with the ARPANET. It was made for an American university to share information quickly between locations. This was later expanded to a few more locations, then a few more countries, to eventually everyone with an internet connection in their home.
Tim Berners-Lee invented common internet things like HTML and the http(s) protocol.
Your computer and the internet
Jour computer works as a client. It sends requests to a server on a certain address, receives the response and in the case of a web browser, it visualises it in the form of a webpage.
Cables
The internet may seem invisible, but its actually a large and complex web of cables made of copper and fiberglass which runs trough countries and seas. Many of Europe’s cables run from Amsterdam to England, which then sends it to other places over the world.
Here’s an image of a shark eating a fibre optic cable
Transclude of 87b79ce6-bb1c-42ca-ab42-9931a6284fe5.avif
Protocol
Addressing
When browsing websites, you enter an url into your search bar, for example: https://www.tominhisroom.dev/pages/fridge.html
it consists of multiple parts.
- The protocol
- https:// is the protocol HTTP with a Secure connection
- The subdomain
- www. is the subdomain, www is commonly used for websites but it can be anything, like docs. or login. depending on whats configured on the domain provider
- The domain
- tominhisroom.dev is the domain, it points to the website, which is just an IP address (the address given to the connected server) in disguise.
- The folder
- /pages/ is a subfolder within the server, it points to either a default page in the folder(usually index.html), or something specified to the right of the /
- The page + file format:
- fridge.html is the file specified on the server, fridge is the file name and .html is the file extension name
This all tells the server what file you are trying to receive the page + file format is usually hidden on most things and is handled by the website
Web browsers
Web browsers are used to request web pages using a URL servers and shows it to the user.
Html
Html: Hyper Text Markup Language
Html is the main language used for web pages. It consists of tags with attributes and values, which the webbrowser interprets and shows a certain way.
Tags
Tags are specific pieces of text encapsulated witin <> like <body>.
every tag has an opening and a closing tag, theyre both typed the same way but the closing tag has a slash before the specifier, for example: <body> </body>.
Text within a tag is normally just the same outside, except for tags that manipulate the text inside. They can either change how a letter looks like its size or wether its bold or italic. Some of these tags are things like:
h1-h6: changes the text to an header (bigger text, higher numbers are bigger)p: changes the text to a paragraph text. its the same size but it is best practice to put every part of text within a tag because that way its easier to style later onstrong: changes the text to boldem: changes the text to italica: changes the text to a hyperlink, a piece of text when clicked, sends the user to the location or website specified withinul: an unordered list (uses bullet points)ol: an ordered list (uses numbers)li: a list item (goes within ordered and unordered lists)
A full list of html tags
For a full list of html tags, go to the w3schools list of all html tags
Theres also a second property to a tag, the attribute
Attributes
Attributes go inside the first tag, after the specifier, for example: <a href="https://google.com">. In the case of the a tag, it specifies where the link will lead it to. The attribute can be anything from links, to (sometimes) text, to styling, to (the most important part in my opinion) ids and classes.
Ids and classes
Id’s and classes are used to categorize or group certain tags. Where id’s are used for single tags and for more specific names, classes are used for a more broad range of elements.
For example: <div id="leftToolBar"> would be a good id name, and <div class="toolbars"> would be used for a good class name.
Both classes and id’s can be used to stylize specific parts of your website
Stylizing
If you wouldnt stylize your page, itd just be plain black on white text with no pretty looks. Stylizing in html goes very far, it even has its own “language”.
inline styles
If youre lazy and dont want to use a dedicated style file, you can put the style tag inside of the element tag. you’d use the style attribute.
For example: <h1 style="color: red">text</h1> would look like this
text
Inspector tool
Most web browsers have a certain hotkey which opens a window that shows all the HTML elements in the website, what things were given with the server response and a whole other bunch of things.
It usually looks something like this:
