add web and http slides
- change numbering - add snippets for html and css - add imagesmain
borb
1 month ago
parent
e6612bdccf
commit
86ce67dbf1
File diff suppressed because one or more lines are too long
@ -0,0 +1,252 @@
|
|||||||
|
---
|
||||||
|
marp: true
|
||||||
|
paginate: true
|
||||||
|
math: mathjax
|
||||||
|
theme: buutti
|
||||||
|
title: 1. Introduction to the Web
|
||||||
|
---
|
||||||
|
|
||||||
|
# Introduction to the Web
|
||||||
|
|
||||||
|
<!-- headingDivider: 5 -->
|
||||||
|
<!-- class: invert -->
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
1) Web and the Internet
|
||||||
|
2) Frontend and backend
|
||||||
|
3) Anatomy of a website
|
||||||
|
4) Web APIs
|
||||||
|
|
||||||
|
## Web and the Internet
|
||||||
|
|
||||||
|
### What is the Internet?
|
||||||
|
|
||||||
|
<div class='columns' style='grid-template-columns: 4fr 1fr;' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* World Wide Web is not the Internet
|
||||||
|
* Internet: connected networks that use the TCP/IP protocol
|
||||||
|
* made out of billions of computers, cables and antennae directing data to the right direction
|
||||||
|
* World Wide Web: URL-based information system
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
* WWW is a big part of the Internet but it consists of other kinds of traffic, too:
|
||||||
|
* Email
|
||||||
|
* VoIP (Skype, Discord, etc)
|
||||||
|
* File transfer between computers (FTP)
|
||||||
|
* remote connections to other computers
|
||||||
|
* In other words, the Internet is an infrastructure and WWW is served via it
|
||||||
|
|
||||||
|
### What is the Web?
|
||||||
|
|
||||||
|
<div class='columns21' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* World wide web (www) is the part of the Internet where browsers fetch and show websites
|
||||||
|
* WWW makes sites and applications accessible to all kinds of devices:
|
||||||
|
* mobile phones, computers, smart watches, TVs...
|
||||||
|
* For the websites to appear on all the different devices similarly, strict rules are needed
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
| | Browser | Engine |
|
||||||
|
|---------------------------------------------|---------------|---------|
|
||||||
|
|  | **Chrome** | Blink |
|
||||||
|
|  | **Edge** | Blink |
|
||||||
|
|  | **Firefox** | Gecko |
|
||||||
|
|  | **Safari** | WebKit |
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Frontend vs Backend
|
||||||
|
|
||||||
|
* Web development is split into [**_frontend_** and **_backend_**](https://en.wikipedia.org/wiki/Frontend_and_backend)
|
||||||
|
* Frontend is the website users can actually see
|
||||||
|
* Visual elements of a website or app the user can interact with
|
||||||
|
* Backend is the invisible part
|
||||||
|
* "Server side" where user's data is stored
|
||||||
|
* Backend is not interacted with directly, but gives and modifies its stored data based on user requests
|
||||||
|
* _**Full stack development**_ refers to working on both backend and frontend!
|
||||||
|
|
||||||
|
### What is a server or "the cloud"
|
||||||
|
|
||||||
|
<div class='columns32' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* A server or "the cloud" is just another computer, or multiple ones
|
||||||
|
* Server software is constantly running on it
|
||||||
|
* Your own computer could be a server!
|
||||||
|
* If you need to save an image, post a comment on a news website, or just load a website, you send a **_request_** to a server
|
||||||
|
* Server then gives an appropriate **_response_** based on the request
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
<div class='columns21' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* Backend handles e.g.,
|
||||||
|
* saving and fetching user data from a **_database_**
|
||||||
|
* user authentication and connecting multiple users together (chat apps!)
|
||||||
|
* Databases are used with _**query languages**_ like **_SQL_**
|
||||||
|
* Backend software can be written with various different programming languages
|
||||||
|
* even with JavaScript! See: [Express](https://expressjs.com/)
|
||||||
|
* Simple websites don't require a dedicated backend
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Anatomy of a website
|
||||||
|
|
||||||
|
### Building blocks of a website
|
||||||
|
|
||||||
|
* Historically, websites looked something like this
|
||||||
|
* [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
|
||||||
|
* Nowadays, a website can even be a full-blown application!
|
||||||
|
* [https://open.spotify.com/](https://open.spotify.com/)
|
||||||
|
* Old and new sites alike are written in **_HTML_**, which describes the **_structure_** of the site
|
||||||
|
* In mid-90s, plain HTML was extended with **_CSS_** to implement **_styling_**
|
||||||
|
* The third building block of a website is JavaScript, or **_JS_**, which is used to add **_interactivity_**
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
<div class='columns32' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* HTML stands for **_Hypertext markup language_**
|
||||||
|
* HTML defines the structure of a website
|
||||||
|
* It tells what text, images and containers the website has
|
||||||
|
* You might have seen raw html if your browser has failed due to a slow connection $\Rightarrow$
|
||||||
|
* [motherfuckingwebsite.com](https://motherfuckingwebsite.com/)
|
||||||
|
* http://catb.org/~esr/open-source.html
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<h1>This is a Heading</h1>
|
||||||
|
<p>This is a paragraph.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
<div class='columns' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* CSS stands for **_Cascading style sheets_**
|
||||||
|
* CSS defines the ***look*** of the website
|
||||||
|
* It tells the fonts, sizes, colors and locations of elements
|
||||||
|
* Can be used to animate elements
|
||||||
|
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-family: verdana;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
* [bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com/)
|
||||||
|
* https://www.emuurom.com/
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### JavaScript
|
||||||
|
|
||||||
|
* With a dedicated programming language, JavaScript, your website can become interactive
|
||||||
|
* It allows you to add functionality to buttons, send data to / fetch data from a server in real time
|
||||||
|
|
||||||
|
<div class='columns' markdown='1'>
|
||||||
|
<div markdown='1' class='centered'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1' class='centered'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Web APIs
|
||||||
|
|
||||||
|
### What is a Web API
|
||||||
|
|
||||||
|
* ***API (Application Programming Interface)*** defines a way of communicating between applications
|
||||||
|
* A Web API defines how a client can communicate with a web server
|
||||||
|
* With the help of APIs, you don't need to create all functionality yourself
|
||||||
|
* Each program that wants to communicate to the outside world defines their own interface
|
||||||
|
* There are some architectural models like **_REST (Representational State Transfer)_** that exist to generalize API design
|
||||||
|
|
||||||
|
### Client-side and Server-side APIs
|
||||||
|
|
||||||
|
* [Client-side APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction) — called on the web browser (client side):
|
||||||
|
* Browser APIs, built into the browser itself and extend its functionality
|
||||||
|
* For instance, the geolocation API returns coordinates where the browser is located
|
||||||
|
* Third-party APIs, for retrieving data from somewhere on the Web
|
||||||
|
* Server-side APIs — called on the server:
|
||||||
|
* For communicating between servers or the client
|
||||||
|
* Consist of multiple exposed ***endpoints*** with a defined request-response system
|
||||||
|
|
||||||
|
### API communication
|
||||||
|
|
||||||
|
<div class='centered'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Third party APIs
|
||||||
|
|
||||||
|
* Many services have public APIs that anyone can use
|
||||||
|
* Some services require users to have an [API key](https://en.wikipedia.org/wiki/API_key)
|
||||||
|
|
||||||
|
<div class='centered'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,185 @@
|
|||||||
|
---
|
||||||
|
marp: true
|
||||||
|
paginate: true
|
||||||
|
math: mathjax
|
||||||
|
theme: buutti
|
||||||
|
title: 2. HTTP
|
||||||
|
---
|
||||||
|
|
||||||
|
# HTTP
|
||||||
|
|
||||||
|
<!-- headingDivider: 5 -->
|
||||||
|
<!-- class: invert -->
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
1) What is HTTP?
|
||||||
|
2) HTTP Requests
|
||||||
|
3) HTTP Responses
|
||||||
|
4) IP address and ports
|
||||||
|
|
||||||
|
|
||||||
|
## What is HTTP?
|
||||||
|
|
||||||
|
* **_HTTP_** (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other
|
||||||
|
* The communication happens between a client (browser, application…) and a server
|
||||||
|
* The client sends a **_request_**, and the server returns a **_response_**
|
||||||
|
* HTTP is *__connectionless__*:
|
||||||
|
* The client and server are only aware of each other during the request-response phase
|
||||||
|
* After that, each new request is sent through a new connection
|
||||||
|
|
||||||
|
### But what is TCP/IP?
|
||||||
|
|
||||||
|
* It is known as the [Internet protocol suite](https://en.wikipedia.org/wiki/Internet_protocol_suite)
|
||||||
|
* Framework used for organizing communication protocols over the Internet
|
||||||
|
* TCP = Transmission Control Protocol
|
||||||
|
* Controlled stream of bytes between applications communicating via an IP network
|
||||||
|
* IP = Internet Protocol
|
||||||
|
* Delivering packets from host to destination with IP addresses
|
||||||
|
|
||||||
|
### HTTP structure
|
||||||
|
|
||||||
|
<div class='columns' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* The HTTP protocol acts as a communication bus between the web client (e.g. web browser) and the web server
|
||||||
|
* There can be multiple clients connected to the server simultaneously
|
||||||
|
* The clients are not connected to each other but only to the server
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## HTTP requests
|
||||||
|
|
||||||
|
* HTTP defines a set of request methods
|
||||||
|
* The most common requests are `GET`, `POST`, `PUT` and `DELETE`
|
||||||
|
* These are needed to create a basic CRUD app *(Create, Read, Update, Delete)*
|
||||||
|
* More requests are listed in the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods)
|
||||||
|
|
||||||
|
| HTTP Method | Usage | Example Use |
|
||||||
|
|-------------|:---------------------|:------------------------------------------|
|
||||||
|
| `GET` | Retrieve content | Browser fetching a webpage |
|
||||||
|
| `POST` | Add new data | Submitting a form to create a new account |
|
||||||
|
| `PUT` | Update existing data | Updating user profile information |
|
||||||
|
| `DELETE` | Remove existing data | Deleting a user account |
|
||||||
|
|
||||||
|
### Note: URI vs URL
|
||||||
|
|
||||||
|
* The website address is more formally known as the ***URL (uniform resource locator)***
|
||||||
|
* `https://maps.google.com`
|
||||||
|
* `https://maps.google.com/maps?q=Oulu` (includes a ***query***)
|
||||||
|
* It is a subset of an ***URI (uniform resource identifier)***
|
||||||
|
* This identifies a resource on a webpage
|
||||||
|
|
||||||
|
### HTTP request format
|
||||||
|
|
||||||
|
* Request line: `<request method> <request URI>`
|
||||||
|
* Example: `GET https://example.com/products`
|
||||||
|
* Headers (optional)
|
||||||
|
* Example: `Date: Mon, 07 Sep 2020 08:39:33 GMT`
|
||||||
|
* Example: `Content-Type: application/json`
|
||||||
|
* Body (optional)
|
||||||
|
* Example in the JSON format:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"date": "2020-09-08T11:39:34.2837813+03:00",
|
||||||
|
"temperatureC": 11,
|
||||||
|
"temperatureF": 51,
|
||||||
|
"summary": "Cool"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### HTTP request examples
|
||||||
|
|
||||||
|
| Method | URI | Headers | Body |
|
||||||
|
|:---------|:--------------------------------|:---------------------------------|:--------------------|
|
||||||
|
| `GET` | `http://server.com/` | | |
|
||||||
|
| `GET` | `http://server.com/10` | | |
|
||||||
|
| `POST` | `http://server.com/users` | `Content-Type: application/json` | `{"name": "Dan"}` |
|
||||||
|
| `PUT` | `http://server.com/users/2` | `Content-Type: application/json` | `{"name": "Danny"}` |
|
||||||
|
| `DELETE` | `http://server.com/users/2` | | |
|
||||||
|
|
||||||
|
|
||||||
|
## HTTP response format
|
||||||
|
|
||||||
|
* HTTP responses have the following format:
|
||||||
|
* Status line: `<HTTP version> <status code> <reason phrase>`
|
||||||
|
* Example:`HTTP/1.1 200 OK`
|
||||||
|
* Headers (optional)
|
||||||
|
* `Date: Mon, 07 Sep 2020 08:39:33 GMT`
|
||||||
|
* `Content-Type: application/json`
|
||||||
|
* Body (optional)
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"date": "2020-09-08T11:39:34.2837813+03:00",
|
||||||
|
"temperatureC": 11,
|
||||||
|
"temperatureF": 51,
|
||||||
|
"summary": "Cool"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### HTTP status codes
|
||||||
|
|
||||||
|
* The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request:
|
||||||
|
* Did the operation succeed? (`2xx` status codes)
|
||||||
|
* Was there an error with the request? (`4xx` status codes)
|
||||||
|
* E.g., the request line was malformed, or the server doesn't support it
|
||||||
|
* Did a server-side exception occur? (`5xx` status codes)
|
||||||
|
* This is never the client's fault!
|
||||||
|
|
||||||
|
### Status codes for a CRUD app
|
||||||
|
|
||||||
|
* Your APIs should use the following status codes for responses to CRUD operations
|
||||||
|
* See [Restfulapi.net](https://restfulapi.net/http-status-codes/) and [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) HTTP status code listings
|
||||||
|
|
||||||
|
| `2xx SUCCESS` | `4xx CLIENT ERROR` | `5xx SERVER ERROR` |
|
||||||
|
|:-------------------|:---------------------|:------------------------------|
|
||||||
|
| `200 - OK` | `400 - Bad Request` | `500 - Internal Server Error` |
|
||||||
|
| `201 - Created` | `401 - Unauthorized` | |
|
||||||
|
| `204 - No Content` | `403 - Forbidden` | |
|
||||||
|
| | `404 - Not Found` | |
|
||||||
|
| | `409 - Conflict` | |
|
||||||
|
|
||||||
|
## IP and ports
|
||||||
|
|
||||||
|
### IP addresses
|
||||||
|
|
||||||
|
* Every node, or ***host*** on a computer network needs an IP (Internet Protocol) address
|
||||||
|
* These can be public or private
|
||||||
|
* Serves two functions: identifies and provides the location of the host
|
||||||
|
* The old 32-bit IPv4 addresses are of the form `192.0.2.1`
|
||||||
|
* The 128-bit IPv6 addresses are of the form `2001:0db8:0000:0000:0000:8a2e:0370:7334` (can be shortened to `2001:db8::8a2e:370:7334`)
|
||||||
|
|
||||||
|
### Port numbers
|
||||||
|
|
||||||
|
<!-- Note: older version in the backend-basics repo -->
|
||||||
|
|
||||||
|
* The IP address is often followed by a ***port*** number separated by a colon: `192.0.2.1:8080`
|
||||||
|
* The port number (16-bit unsigned integer) defines the port through which communication to your application happens
|
||||||
|
* Ports allow multiple applications to be located on the same host
|
||||||
|
* The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate
|
||||||
|
* Computers have several different ports at their disposal
|
||||||
|
|
||||||
|
### Reserved ports
|
||||||
|
|
||||||
|
<div class='columns' markdown='1'>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
* Some of them are reserved and your application might not be able to assign those ports to itself
|
||||||
|
* Ports from 0 to 1023 are ***system ports***
|
||||||
|
* There are restrictions in manually assigning applications to use them
|
||||||
|
* Generally, ports from 1024 to 65535 are available for the user to assign for applications
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div markdown='1'>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -1,158 +1,3 @@
|
|||||||
# Web & HTML
|
|
||||||
|
|
||||||
1. Websites and The Internet
|
|
||||||
|
|
||||||
A short overview of the Internet and WWW
|
|
||||||
|
|
||||||
Anatomy of a website (or web app)
|
|
||||||
|
|
||||||
HTML, CSS, JS
|
|
||||||
|
|
||||||
2. HTML basics
|
|
||||||
|
|
||||||
Setting up
|
|
||||||
|
|
||||||
tags: p, h1, img src, a href, div
|
|
||||||
|
|
||||||
boilerplate
|
|
||||||
|
|
||||||
3. Chrome Dev Tools
|
|
||||||
|
|
||||||
4. HTML continued
|
|
||||||
|
|
||||||
Title, span, text-align, br..
|
|
||||||
|
|
||||||
User input
|
|
||||||
|
|
||||||
Tables
|
|
||||||
|
|
||||||
5. CSS basics
|
|
||||||
|
|
||||||
Websites and the Internet
|
|
||||||
|
|
||||||
# A short overview of the Internet and WWW
|
|
||||||
|
|
||||||
© Buutti Oy, All Rights Reserved
|
|
||||||
|
|
||||||
# What is the Internet?
|
|
||||||
|
|
||||||
* Web != the Internet
|
|
||||||
* Internet: connected networks that use the TCP/IP protocol
|
|
||||||
* made out of billions of computers, cables and antennae directing data to the right direction.
|
|
||||||
* World Wide Web: URL-based information system.
|
|
||||||
* a big part of the Internet but it consists of other kinds of traffic, too:
|
|
||||||
* Email
|
|
||||||
* VoIP (Skype/Teamspeak)
|
|
||||||
* File transfers between computers
|
|
||||||
* remote connections to other computers
|
|
||||||
* In other words, the internet is an infrastructure and WWW
|
|
||||||
* is served via it
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# What is the Web?
|
|
||||||
|
|
||||||
* World wide web (www) is the part of the Internet where browsers fetch and show websites
|
|
||||||
* Browsers ( _rendering engine_ in parentheses)
|
|
||||||
* Chrome (Blink)
|
|
||||||
* Firefox (Gecko)
|
|
||||||
* Edge (Blink)
|
|
||||||
* Safari (WebKit)
|
|
||||||
* WWW makes sites and applications accessible to all kinds of devices:
|
|
||||||
* mobile phones, computers, smart watches, TVs...
|
|
||||||
* For the websites to appear on all the different devices similarly, we need strict rules
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Back-end vs Front-end
|
|
||||||
|
|
||||||
* Web development is split into _Back-end_ and _Front-end_
|
|
||||||
* Front-end is the website users can actually see
|
|
||||||
* visual elements of a website or app the user can interact with
|
|
||||||
* Back-end is the invisible part
|
|
||||||
* "server side" where user's data is stored
|
|
||||||
* back-end is not interacted with directly, but gives and modifies its stored data based on user requests
|
|
||||||
* _Full stack development_ refers to working on both back-end and front-end!
|
|
||||||
|
|
||||||
# What is a server or "the Cloud"
|
|
||||||
|
|
||||||
* A Server or "the cloud" is just another computer
|
|
||||||
* server software is constantly running
|
|
||||||
* Your own computer could be a server!
|
|
||||||
* If you need to save an image, post a comment on a news website, or just load a website, you send a _request _ to a server
|
|
||||||
* Server then gives an appropriate _response_ based on the request
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Backend
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* Backend handles e.g.,
|
|
||||||
* saving and fetching user data from a _database_
|
|
||||||
* user authentication and connecting multiple users together (chat apps!)
|
|
||||||
* Databases are used with _query languages_ like _SQL_
|
|
||||||
* Back-end software can be written with various different programming languages
|
|
||||||
* even with JavaScript! See: [Express](https://expressjs.com/)
|
|
||||||
* Simple websites don't require a dedicated back-end
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Anatomy of a website
|
|
||||||
HTML, CSS and JS
|
|
||||||
|
|
||||||
# Anatomy of a website
|
|
||||||
|
|
||||||
* Historically, websites looked something like this
|
|
||||||
* [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
|
|
||||||
* Nowadays, a website can even be a full-blown application!
|
|
||||||
* [https://open.spotify.com/](https://open.spotify.com/)
|
|
||||||
* old and new sites alike are written in _HTML_ __, __ which describes the _structure _ of the site
|
|
||||||
* In mid-90s, plain HTML was extended with _CSS_ _ _ to implement _styling_
|
|
||||||
* The third building block of a website is JavaScript, or _JS,_ which is used to add _interactivity_
|
|
||||||
|
|
||||||
# HTML
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
HTML stands for _Hypertext markup language_
|
|
||||||
|
|
||||||
HTML defines the structure of a website
|
|
||||||
|
|
||||||
It tells what text, images and containers the website has
|
|
||||||
|
|
||||||
You might have seen raw html if your browser has failed due to a slow connection ->
|
|
||||||
|
|
||||||
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)
|
|
||||||
|
|
||||||
# CSS
|
|
||||||
|
|
||||||
CSS stands for _Cascading style sheets_
|
|
||||||
|
|
||||||
CSS defines the __look __ of the website
|
|
||||||
|
|
||||||
It tells what sizes, colors and where everything is
|
|
||||||
|
|
||||||
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# JavaScript
|
|
||||||
|
|
||||||
With a dedicated programming language, JavaScript, your website can become interactive
|
|
||||||
|
|
||||||
It allows you to do computations, send data to a server or fetch new data in real time
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# HTML basics
|
# HTML basics
|
||||||
|
|
||||||
# Setting up
|
# Setting up
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,90 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 750 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-115.02)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip1">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip1)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-361.638,-258.165)">
|
||||||
|
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,173.804,-115.02)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip2">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip2)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
|
||||||
|
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,412.374,-115.02)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip3">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip3)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
|
||||||
|
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-115.02)">
|
||||||
|
<path d="M182.034,207.146L182.034,300" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
<g transform="matrix(1.65073,0,0,1,-118.455,0)">
|
||||||
|
<path d="M182.034,300L371.054,300" style="fill:none;stroke:white;stroke-width:1.67px;"/>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,387.126L457.758,387.126" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
<g transform="matrix(1,0,0,1,123.002,0)">
|
||||||
|
<path d="M371.054,300L371.054,358.506" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1,0,0,0.314851,0,141.926)">
|
||||||
|
<path d="M401.053,358.506L401.053,207.146" style="fill:none;stroke:white;stroke-width:3.08px;"/>
|
||||||
|
</g>
|
||||||
|
<path d="M401.053,254.802L553.145,254.802" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
<path d="M553.145,254.802L553.145,358.506" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
<g transform="matrix(1,0,0,1.53247,0,-110.298)">
|
||||||
|
<path d="M612.234,300L612.234,207.146" style="fill:none;stroke:white;stroke-width:1.77px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(2.83792,0,0,2.83792,-288.573,-273.63)">
|
||||||
|
<text x="174.563px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">H<tspan x="183.176px 189.833px 195.844px " y="170.366px 170.366px 170.366px ">TTP</tspan> P<tspan x="213.715px 218.719px " y="170.366px 170.366px ">ro</tspan>tocol</text>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(2.83792,0,0,2.83792,-264.741,-138.83)">
|
||||||
|
<text x="194.942px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">Serv<tspan x="219.768px " y="170.366px ">e</tspan>r</text>
|
||||||
|
<text x="202.064px" y="182.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">side</text>
|
||||||
|
<text x="197.746px" y="194.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">script</text>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,343.926,124.88)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(110,105,255);"/>
|
||||||
|
<clipPath id="_clip4">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip4)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||||
|
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Serv<tspan x="232.676px " y="170.366px ">e</tspan>r</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,124.88)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(255,163,254);"/>
|
||||||
|
<clipPath id="_clip5">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip5)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||||
|
<text x="188.066px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">Database</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 248 KiB |
@ -0,0 +1,105 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 750 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,-63.6323,-117.155)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip1">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip1)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||||
|
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||||
|
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,175.424,-117.155)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip2">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip2)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||||
|
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||||
|
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,409.366,-117.155)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(13,255,178);"/>
|
||||||
|
<clipPath id="_clip3">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip3)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
|
||||||
|
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
|
||||||
|
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.16187,1.32806,-1.32806,1.16187,156.137,-287.533)">
|
||||||
|
<text x="177.449px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">Send r<tspan x="212.67px " y="170.366px ">e</tspan>quest</text>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.16187,1.32806,-1.32806,1.16187,218.301,-295.039)">
|
||||||
|
<text x="179.063px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;fill:white;">R<tspan x="186.651px " y="170.366px ">e</tspan>ceiv<tspan x="214.389px " y="170.366px ">e</tspan> data</text>
|
||||||
|
</g>
|
||||||
|
<path d="M262.754,246.006L272.384,267.87L251.562,256.157L262.754,246.006Z" style="fill:white;"/>
|
||||||
|
<path d="M130.252,111.152C130.252,111.152 225.778,216.481 260.203,254.439" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
<g transform="matrix(0.960553,-0.0434951,-0.0434951,0.952041,243.351,10.996)">
|
||||||
|
<g transform="matrix(1.04322,0.047661,0.047661,1.05255,-254.394,-23.1723)">
|
||||||
|
<path d="M371.963,231.459L364.555,254.172L356.854,231.557L371.963,231.459Z" style="fill:white;"/>
|
||||||
|
<path d="M363.631,111.152C363.631,111.152 364.189,197.547 364.438,236.041" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.960814,0.0372899,0.0496436,-0.95174,506.492,353.564)">
|
||||||
|
<g transform="matrix(-1.0429,-0.0408614,-0.0543983,-1.05284,547.451,392.942)">
|
||||||
|
<path d="M379.307,132.275L386.861,109.61L394.416,132.275L379.307,132.275Z" style="fill:white;"/>
|
||||||
|
<path d="M386.861,252.634L386.861,127.742" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.955913,-0.0486114,-0.0486114,0.9464,43.8756,13.9008)">
|
||||||
|
<g transform="matrix(1.04886,0.0538742,0.0538742,1.0594,-46.7683,-17.0903)">
|
||||||
|
<path d="M183.804,124.476L162.982,112.763L172.612,134.627L183.804,124.476Z" style="fill:white;"/>
|
||||||
|
<path d="M175.163,126.194C207.176,161.492 291.23,254.172 291.23,254.172" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.0458035,1.00176,-1.00206,0.0520008,735.141,-22.6338)">
|
||||||
|
<g transform="matrix(0.0516801,-0.995581,0.995882,0.045521,-15.4516,732.923)">
|
||||||
|
<path d="M619.042,134.996L629.727,113.627L608.358,124.312L619.042,134.996Z" style="fill:white;"/>
|
||||||
|
<path d="M616.905,126.449C580.514,162.84 479.195,264.159 479.195,264.159" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.0843615,-0.9632,0.959546,-0.00948568,360.807,379.147)">
|
||||||
|
<g transform="matrix(-0.0102544,1.04126,-1.03731,-0.0911981,396.992,-341.116)">
|
||||||
|
<path d="M467.158,231.265L456.474,252.634L477.843,241.949L467.158,231.265Z" style="fill:white;"/>
|
||||||
|
<path d="M469.295,239.812C503.593,205.514 594.862,114.245 594.862,114.245" style="fill:none;stroke:white;stroke-width:2.52px;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,174.897,108.934)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(110,105,255);"/>
|
||||||
|
<clipPath id="_clip4">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip4)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||||
|
<text x="203.919px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">AP<tspan x="219.042px " y="170.366px ">I</tspan></text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.10215,0,0,1.10215,173.845,194.609)">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:rgb(255,163,254);"/>
|
||||||
|
<clipPath id="_clip5">
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
|
||||||
|
</clipPath>
|
||||||
|
<g clip-path="url(#_clip5)">
|
||||||
|
<g transform="matrix(2.57489,0,0,2.57489,-366.909,-258.243)">
|
||||||
|
<text x="183.212px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">Application</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue