The very-very basics of web development: websites and a browser
Attention! This article series would be for those, who might have nothing to do with any kind of programming and maybe with the web world at all.
If you tried making some research about web development world, you might find out that it’s currently quite overloaded with lots of different technologies. Angular, ReactJS, VueJS, Meteor, NodeJS, Ember, Aurelia, Svelte 🤯… this endless list can make any newbie frustrated and willing to run away from it as soon as possible, and never come back.
But first things first. Don’t let those names make you frightened. The only words you need to focus on right now are HTML, CSS, JS. And a browser itself, of course. But I won’t even start with those… I’ll start with the very very beginning.
What is a website? What does it have to do with a browser?
I like comparing websites to newspapers, which are several pages joined by a mutual name. By requesting a website name you get its page on your computer and by interacting with it you may go through other pages, which represent its different sections.
You should know, that each website page has its own name/identifier either, but it always starts with the website name, like:
www.worldwildlife.org — website name
https://www.worldwildlife.org/initiatives and https://www.worldwildlife.org/people — its subpages
Any of these addresses is called URL (A Uniform Resource Locator (URL), colloquially termed a web address) and website name is also called a hostname or a domain name.
We’ll figure out a more precise understanding of a website further, but lets, for now, get World Wide Web as a heap of newspapers, each of them you can get and see on your computer by requesting its reserved name, which is called a domain name.
But your computer itself doesn’t know how to deal with those pages. And here is where we need a browser, which is a software application running on your favourite laptop or PC (of course, if you didn’t forget to install it) or mobile phone (which mostly have some browser already set up). Its job is to get your request for a website you want to visit, retrieve it from the internet, prepare it and display for you. I’d rather add some details here.
A normal routine of opening a website page usually looks like that:
- You open a your beloved (or maybe not, depending on your experience) browser window and tap the website URL in its address bar (see image above).
- The browser uses the domain name to send a request to a particular web server, which contains the website resources and sends these resources to your browser in return.
- The browser gets those resources and creates you a page, that you see on your screen in result.
- On the page you may find some blue underlined text called a link or hyperlink (actually, not necessarily blue and underlined nowadays, but that’s how they usually looked before). A hyperlink is a special text element (but maybe an image as well), which references another document, and redirects a user to that one, when is clicked. It is possible as links enclose URLs to another page under the hood, which a browser can read and follow.
So as soon as you click any link, the browser will repeat this algorithm starting with the 2nd step, leading you to a different page (which may be under the same domain name, then you are still on the same site, but in general may reference a different one).
The described above transitioning from a page to a page, from a website to a different website by tapping links is a basic concept of WWW work.
But wait-wait-wait! I’ve come too far and forgotten to explain you some basic things🙈. Let’s return to the 2nd step of the algorithm and I will define you, what a web server is.
Each website resources are stored on its web server, which is, first of all, a machine, probably even the same computer as yours, but configured in a such way that any internet user can reach it out by using certain domain name and access website resources it provides. So a web server is responsible for keeping and returning those to anyone, who request them (in case this anyone is allowed to do that, but it’s a story for a different article). It’s like a card catalogue for website pages.
What are those website resources and how to eat them?
By website resources, we understand files with the information of how the website page content should be composed, styled and behave on user actions. So our old friend browser retrieves these files and based on the information they contain about site layout, styles and component actions makes a page look and behave as you see it in the result. These files are the same as any pieces you can see in folders on your computer, but with the difference that they have special extensions and contain specific information. These files are also called HTML, CSS and Javascript and have .html, .css, .js extensions correspondently.
HTML, CSS and JS are also names of the formats, which point to the way of how information is encoded in these files. Those three are pillars of nowadays web development.
If you are not familiar with a term “file format”, I’d rather try to provide some explanation here. Each file on your computer is some kind of text, which a computer can read. Even an image file is a text, which describes in what colour computer should paint a point at Xth column and Yth row. So a computer reads this data and transforms it to something more understandable for a human. In order to give a hint to a computer in which “language” a file in written (encoded), each file has its own extension at the end of name. Like my_article.txt or cute-kitty-picture.jpg. So .html, .css and .js are also hints to a computer about what kind of information is enclosed in files and how correctly read it.
- HTML is a markup language, which means it’s a format of encoding information about page components structure, probably how they are positioned and also references to other internet pages encoded in those hyperlinks (maybe of the same site, but maybe not). Hence it’s called like that — Hypertext Markup Language.
- CSS (Cascading Style Sheets) is a language for describing those components styles, which includes data about their colour, dimensions, borders, shapes, maybe even some reference to a kitty image, which you see on a page background.
- JavaScript is a programming language, which is used for describing a scenario of page components behaviour in return to a user interaction.
If you ask me, why several different formats were used instead of one, I will answer that each of them allows to store target data in the most concise form. As to render a web page in such pleasant form, which you finally see on the screen, all those web resources (HTML, CSS, JS) should be sent from a web server to a client. And the more resources weight the more data you need to transfer via internet. Hence the more efficient way you use to encode the data, the less traffic you consume and the sooner you see your precious youtube on the display.
Also, these three formats are pretty convenient for developers to encapsulate all those types of information. Why? You’ll probably find out later 😉(If I dare to write a follow-up)
Summary
- A website is a bunch of e-pages accessible via the internet within a unique domain name. Each website page has its URL, which starts with a domain name of the website it belongs to.
- To access and a web page you need to enter its URL in a browser address bar and press enter
- Links on a web page refers to other webpages. As soon as you click a link on a webpage, a browser reads the URL, which links contains, and redirects you to the corresponding web page.
- On the physical level, roughly speaking, each website is a stack of files, which contain data about page components layout, styles and behaviour. These resources are stored on some computer called a web server.
- When a browser requests a webpage, the web server, which contains it, transfers its resources to the browser via the internet, and the browser renders the page basing on the information it found in the returned files.
- Information about a web page layout, styles and behaviour is stored in HTML, CSS and JavaScript files correspondently. Each of these names refers to a format the data is “written” in. On this three terms the nowadays web development world is based. Which also means, that knowledge of how to create these three types of files would be enough for getting your first web page. Well, almost enough.
P.S. Why didn’t I cover the development process itself?
— Well, I do hope, this would be the first article of series. And before starting to learn development, you should fully understand these basic things. Sorry, if it was too obvious for you. But, well… I’ve warned you 😬. And at least, now you are 100% confident in your knowledge.
