Web Technologies
Website languages
Websites are generally written with several languages
HTML
HTML (HyperText Markup Language) is a scripting language that defines how a website is laid out.
When the browser receives HTML, it renders the HTML to produce the website.
Tags you should know:
| Tag | Stuff |
|---|---|
<html></html> | The HTML content |
<head></head> | Set Page metadata/information |
<title></title> | Title |
<body></body> | Body content |
<script></script> | Defines either embedded JS or links to a .js file |
And more
CSS
CSS (Cascading Style Sheet) is a language that defines how a website is styled and its overall appearance.
HTML files have linked to associated CSS tags in the <head></head> tags
CSS identifier syntax #identifier {} correlates to the HTML id="" property.
CSS classes syntax .class {} correlates to the HTML class="" property.
There are 3 ways of implementing CSS:
| Type | Usage |
|---|---|
| External | Linking to an external .css file in the header |
| Internal | Defining the styles using <styles></styles> in the header |
| Inline | Adding CSS properties to a specific element during declaration in the HTML: <h1 style="color: blue"></h1> |
CSS precedence uses the following order:
- Inline
- External/internal based on declaration order in the header
- Browser defaults
Search Engine Indexing
When search engines provide a result, they do not search the entire web. They instead search a search engine index which is a database that contains webpages and their metadata. Since searching the entire web is practically impossible, the index is used to provide faster, and sometimes more reliable, results.
The search engine index is populated by web crawlers which are a type of bot that harvest data (specifically keywords and metadata) from websites to populate the index. They will navigate between each webpage’s links to find more pages to travel through.
Some information that can be gathered is:
- Word counts
- Date of last update
- Specific keywords on a page
- Keywords in the
<title></title>tags - URLs
Since a search can return many different results, these results need to be ranked in order to determine which to present.
Page Rank Algorithm
Developed by Larry Page and Sergey Brin (Google, formerly Backrub), this ranks pages. (holy shit really???)
The PRA determines the importance and quality of a webpage by considering how many links to and from a website has.
If a webpage has more incoming and outgoing links, it will be considered more valuable and higher ranked.
PRA has a higher weighting towards incoming links, so web pages with more link towards that page are considered more valuable. It also evaluates the quality of the source of each link.
After the search has performed the search, the PRA is performed to provide the user with a set of results that match their query but also are of high quality.
The PRA uses the formula:
\( PR(A) = (1-d) + d(\frac{PR(T_1)}{C_1} + … + \frac{PR(T_{n})}{C(T_n)})) \)
\(PR(T_1)\) The pagerank of a page that links directly to page A
\(C(T_1)\) the number of outbound links on page \(T_1\)
\(PR(T_n)\) Pagerank of \(page_n\) linking to page A
\(C(T_n)\) The number of outbound links on page n
\(d\) Dampening factor that contains the probability that a surfer clicks to the page.
Basically, the pageRank of an external page that links to A is divided by the importance of that website, then sums all of the websites that match that condition.
Then it is multiplied by the dampening factor, to reduce the page rank of pages linked to page A from having a large effect. This emulates the user, where the user is less likely to go down an infinitely long chain.
The algorithm uses an initial estimate to start the algorithm, since PRA relies on the PRA of neighbouring websites.
Client/Server Side Processing
When validating and processing data, you can either do this on the client or the server.
Serverside processing
Web activities often involve a lot of processing. Different parts of each activity may happen clientside or serverside.
For example, password hashing would be done clientside to prevent an unencrypted transmission of a password, but the password would be checked serverside.
- Used for secure validation
- Uses php/sql
- Puts additional strain on the CPU
Clientside processing
Where suitable, processing tasks can be offloaded to the user’s client to reduce the load on the server.
This should generally be only tasks that are not security critical.
There are also often additional things that can be done clientside, simply because it’s more performant or makes sense.
If the client has specialised software locally, or network traffic needs to be minimised, or the latency of sending the data over the network is too slow, then clientside processing could be preferable.
- Generally used for initial data entry validatation
- Generally uses JS
- Redues webb traffic
- reduces load on server
Thin and Thick clients
The thickness of a client is esssentially how much processing or data storage is being done on the client.
A thin client is like a wrapper over the server and only sends/receives data for the server to process, while thick clients often would do a significant amount of processing and store data locally, rather than send it to the server.
| Advantages | Disadvantages | |
|---|---|---|
| Thin client | Easy to setup, main, add terminals on a network | Reliant on the server |
| Software can be managed centrally | Relies on a good server | |
| More secure as ata is kept centrally | More data transferred and more network traffic from C2S | |
| – | – | – |
| Thick client | More indepedent and higher uptime | Client should be more powerful |
| Can operate without continuous server connection | Installation of software on the client is needed | |
| Better for running powerful applications | Data integrity issues (desync) with shared data |