Web sites: how the Internet works

Содержание и основные понятия

Back to the table of contents
Alterna · Chapter 6 · page 6.3
Web sites: how the Internet works
Each site is the files on the server that the browser turns into a beautiful page. Let's take apart the three pillars of the web: XML, CSS and JavaScript.
In chapter 4, you found out that the browser is sending
HTTP Request
Now let's see,
That's exactly what it is.
comes in response and how the browser turns the text into a page.
Web =
HTML
(structure) +
CSS
(formation) +
JavaScript
(behavior)
GEF · Basic
PLF · Infred
EEG · task 13
01
Three pillars of the web
HTML is a skeleton, CSS is a garment, JavaScript is a muscle.
GEF
EEG 13
HTML — HyperText Markup Language
Marking
Page structure: headings, paragraphs, lists, links, images, tables, forms.
HTML —
not programming language
The tags describe it.
That
page, not
How?
It works.
HTML Example
<h1>Привет, мир!</h1>
- Level 1 title.
<p>Это параграф.</p>
- Text paragraph.
<a href="https://example.com">Ссылка</a>
- hyperlink.
CSS — Cascading Style Sheets
Formation
: Colors, fonts, derogations, location of elements, animation, adaptive.
CSS Segregates
Appearance
from
structure
One CSS file can stylize the entire site.
JavaScript – Programming Language
Conduct
and
interactiveity
:: Process clicks, animation, request to server without rebooting, validation of forms.
JS is the only programming language that works
Directly in the browser
.
📄
HTML
analogy: skeleton of the building
It defines the structure: where the title is, where the text is, and where the picture is. Without the CSS, it's ugly, but it is readable.
🎨
CSS
analogy: paint and trim
Makes the page beautiful: colors, fonts, shadows, animations. Without a TML, there's nothing to apply to.
⚡
JavaScript
analogy: Electricians and elevators
Makes the page live: the buttons work, the data are downloaded, the menu opens.
🛠️
HTML Live Editor
Edit code · result to the right
Interactor
Change the XML code on the left -- the result will be updated to the right in real time.
02
Frontend and Backend
Client and server parts: Who is responsible for what
GEF
EEG 13
Frontend (client)
Anything that the user sees and interacts with in
browser
:
HTML
- Page Mark
CSS
- styles and adaptiveness
JavaScript
– Interactive, animation, AJAX requests
Frameworks: React, Vue, Angular, Svelte
Backend (store)
Everything that works for
server
And you can't see the user:
Web server
- takes HTTP requests, gives files (Nginx, Apache)
Languages
— Python, Node.js, PHP, Go, Java, C#
Database
- Keeps data (PostgreSQL, MySQl, MongoDB)
API
===Frentend and Backend interface===The interface between Frantend and backend (REST, GraphQL)
Frontend
User browser
HTML
CSS
JavaScript
React / Vue / Angular
Shows Page
Backend
The server
Python / Node.js
Nginx / Apache
PostgreSQL
REST API / GraphQL
Logic + Data
HTTP Request (GT /api/data)
HTTP Response (JSON / HTML)
The Frontend requests the Backend process the Frontend shows
Figure 1.
Web application architecture: client requests, server processes
03
Web servers and hosting
Where websites live and how they get on the Internet
GEF
Web server
Web server
– a program (or computer) that:
Accepts HTTP request from browsers
Finds the requested file or forms the answer
Sends HTTP back.
Popular web servers:
Nginx
(rapid, for static and reverse proxie),
Apache
(Oldest, flexible)
Hosting
Hosting
The website is a permanent Internet server service.
Type
Description
For whom?
Virtual hosting
Lots of sites on one server sharing resources.
Blogs, small sites
VPS
(Virtual server)
Your root-access "kick" server
Medium projects, shops
Selected server
Whole physical server leased
Highly burdened projects
Cloud
(IaaS)
Virtual Cloud Cars (AWS, Yandex Cloud)
Large-scale projects
Static hosting
Only HTML/CSS/JS files (GitHub Pages, Netlife)
Landsingy, documentation
Domain and DNS
Domain
(Alterna-edu.ru) is the name of the site that is read and recorded with the registrar (REG.RU, GoDaddy).
DNS
connects the domain to the server &apos; s IP address
Page 6.2
).
How the site gets to the user
1. You register the domain . 2. rent the hosting . 3. upload the files to the server . 4. Set up the DNS: the domain of the IP server ~ 5. The site is available to the world!
04
How a browser rendezvouss a page
From HTML text to pixels on screen
PLF · Infred
Five Steps of Rendering
HTML Parsing
DOM (Document Project Model) is a tree of elements.
CSS Parsing
CSSOM (CSS Project Model) is a style tree.
Merger
DOM + CSSOM →
Render Tree
(picture wood)
Layout
(reflow) is the calculation of the dimensions and positions of each element
Paint
Paint (paint) is the drawing of pixels on the screen.
HTML
text
DOM
tree
Render Tree
DOM + CSSOM
Layout
dimensions
Paint
Pixels!
CSS
HTML + CSS DOM + CSOM ♪ Render Tree ♪ Layout ♪ Paint ♪
Figure 2.
Five stages of branding, from text to pixels
Why does it matter?
If the CSS downloads long, the page "Migage" (first without styles, then complete). If the JS blocks, the "Hangs" page. Optimizing downloads = fast site.
05
Modern Web: SPA, API, CDN
How are the websites you use every day?
PLF · Infred
SPA — Single Page Application
One-page application
: is downloaded once, then JS updates the parts of the page without rebooting. Examples: Gmail, Telegram Web, Google Maps.
Adds: It works fast like a desktop app. Minus: More difficult for SEA, first download is slower.
API — Application Programming Interface
API
The most popular style is the one used by Frantend to communicate with backend.
REST
:
Method
Action
Example
GET /api/users
Get List
User list
GET /api/users/5
Get one.
User Profile 5
POST /api/users
New
Register new
PUT /api/users/5
Update whole
Change All Fields
PATCH /api/users/5
Update Partly
Change Name Only
DELETE /api/users/5
Remove
Remove User
CDN — Content Delivery Network
CDN
A network of servers around the world that store copies of content. The user is obtained from the nearest point. Examples are Cloudflare, Akamai.
How it works together
You're opening
Telegram Web
(SPA) Browser downloads HTML/CSS/JS with
CDN
(rapidly, from the nearest server)
API Requests
"Show the messages from chat room X." Backend answers.
JSON
- Ooh. JS updates the page without rebooting.