Web Tech (1.3.4)

20p13280
May 19
11 min read

Updated: 3 days ago

This page will cover the following

(a) HTML, CSS and Javascript

(b) Search engine indexing

(d) Server and client side processing

Throughout this post the following example is used:

Harry Styles Together Together Tour Setlist Viewer

Which is available here: https://drive.google.com/drive/folders/101mGdi8SFa3Wcn1U66WKqUPyRT-TSNwb?usp=sharing

HTML

HTML is Hyper Text Markup Language. It's used to define the structure and elements on a web page. Elements are anything that can be seen, so text, images, buttons, forms, etc.

Elements can be identified in one of two ways:

ID - Elements can be given a unique ID that can be used to identify it and address it within JavaScript for manipulation & creating interactive elements and CSS for styling. Within CSS, IDs are used to define a single elements style.

<select id="setlist-viewer-content-select"></select>

Class - Elements can be given a class (or belong to many classes) and this is a group of elements that can all by styled together and be addressed together in JavaScript.

<div class="image-container box">
    <img id="image-container-image" src="" alt="Harry Styles on the Together, Together tour">
</div>

There are many different types of elements within HTML that all have a different purpose. Below in the table are all the elements from the specification.

Element	Description	Example
<html></html>	Defines a html document, all content needs to be within these tags.	<html> <body> <p>Test!</p> </body> </html>
<head></head>	Contains all metadata for the webpage such a title, description. Also contains links to external resources such as fonts, CSS and JS. Anything within here is not rendered by the browser.	<head> <title>Together, Together Setlist Viewer</title> </head>
<link/>	A self-closing tag that is used for linking to external resources like a CSS file or RSS feed. It needs to be in the head tag.	<link rel="stylesheet" href="style.css">
<script></script>	An element to either link to an external JavaScript script or write JavaScript	<script src="script.js"></script> <script> console.log("Hello, World."); </script>
<title></title>	A metadata tag that sets the pages title within the browser.	<title>Together, Together Setlist Viewer</title>
<body></body>	Contains all the visible content of the page that's rendered by the browser.	<body> <h2>HARRY STYLES</h2> <h1>TOGETHER, TOGETHER</h1> </body>
<h1>, <h2>, etc.	Header tags, each tag gives the text a different size to indicate importance.	<body> <h2>HARRY STYLES</h2> <h1>TOGETHER, TOGETHER</h1> </body>
<img />	Self closing tag, image tag. Allows images to be displayed on a web page, takes in a source ("src" property), an alt text (for screen readers and if the image doesn't load, "alt" property) and a height and width property which is also present in CSS.	<img src="N1.jpg" alt="Harry Styles performing at the Together, Together Tour">
<a>	Anchor tag, creates links to other anchor tags and other websites/webpages. All text inside of the a tags will be rendered and treated as link and will link to another page or part of the current page given by the "href" parameter.	<a href="https://ocr2.org.uk">best site ever.</a>
<P>	Paragraph tag, used to display text which comes with a line break below it.	<p>The pre-show song for Together, Together played is Bridge Over Troubled Water, compared to Love On Tour which was Peace Peace.</p>
<div>	A divider, div, is a container element that can contain other elements and be styled. A div can contain an id and class too just like any other element, however it doesn't display content like other elements, it is just a container (although using CSS it can be made visual - whereas normally it's invisible)	<div id="setlist-container" class="box"> <h1>SETLIST</h1> ... </div>
<form>	A container element for <input> elements to create a form for users to input information such as a login form. Forms are used to send data for server and client side processing using the attributes method (can be POST/GET) and "action" attribute which sets where the data is sent.	<form action="/view-setlist"> <input type="text" placeholder="Enter the night, country and venue name"> <input type="submit">Submit</input> </form>
<input>	Input is used to specify an input field where a user can enter data, typically used within a form. There are many types (which can be set using the "type" attribute) such as text, buttons, checkboxes, emails, passwords, datetime. Submit buttons for a form are done with input instead of <button> by setting the type to "submit".	<form action="/view-setlist"> <input type="textarea" placeholder="Enter the night, country and venue name"> <input type="submit">Submit</input> </form>
<li>, <ol>, <ul>	<ol> and <ul> are used for Ordered Lists and Unordered lists. They are containers and contain list elements (<li>) which store the content of the list, the indicator before the list element content will either be a number or a bullet point depending on if it's an ordered list or unordered list.	<ol> <li>Are You Listening Yet?</li> <li>Golden</li> ... </ol>

CSS

Cascading Style Sheets are used to style a web page and customise the appearance of it, unlike HTML which is structural, CSS is aesthetic. Styles can be define in 3 ways.

Inline CSS

Inline CSS is CSS which is defined within the element itself using the attribute "style". This is only per element so for example if there are 2 h3 elements and only one of them has inline CSS the other won't have the same styling. Speaking of style, in the Harry Styles Together Together setlist tracker Inline CSS is used on the header that says "SETLIST" to give it a margin below of 5px.

Internal CSS

Internal CSS is when CSS is defined using the <style> element. Anything between the <style></style> tags will be treated as CSS and style the page. Anything that goes between the style tags can also be valid in an external CSS and the same goes the other way. Classes are addressed using ".class-name" and IDs are addressed using "#class-name". Speaking of names, within the Harry Styles Together, Together setlist tracker the dropdown has internal CSS to style it so that it can be dark-themed and change colour when hovered.

External CSS

External CSS is CSS that's located in another file and is linked to in HTML using the <link> element.

Anything that can be written in Internal CSS can be used in External CSS, so same addressing for classes and IDs. An example of how this was used in the setlist tracker is of the image from each night, within the style.css file it defines styles to ensure that the image is the same height as the setlist box and that the image fills up the entire box without warping it or shrinking it to fit.

There a few CSS properties on the specification.

Property	Description	Example
background-color	Defines the background colour of an element using either a named colour ("coral", "red", etc.) or a hex value such as #FFFFF	body { background-color: red; }
border-color	Defines the colour of a border around an element using named colours or a hex value for colour as above.	input { border-color: blue; }
border-style	Border style defines the type of border an element will have, such as solid or dashed.	input { border-style: dashed; }
border-width	Border width defines how many pixels wide a border is.	input { border-width: 5px; }
color	Defines the colour of text, can take in both a named colour or hex value like in bg colour.	.setlist-item { color: white; }
font-family	Defines the name of the font that the text of that class, id or element will use. It can take in more than one to allow for fallback fonts if a font isn't present on a system or didn't load with the page.	.setlist-item { font-family: "Figtree", "Arial", sans-serif; }
font-size	Defines the vertical height, and as a result size, in pixels of the text.	.setlist-item { font-size: 10px; }
width & height	Height and Width define the height and width of an element in pixels. "auto" can also be taken in to maintain an aspect ratio and automatically set one property based on the other.	img { height: 400px; width: auto; }

JavaScript

JavaScript is used to create interactive element and behaviour on a web page. It can be defined either internally or externally using the <script> tag. JavaScript can be used to manipulate elements on a page and certain browser functions like printing a page or sending an alert.

To create comments, they start with "//".

To define a variable in JavaScript the "const" keyword is used to define constants that wont change, "let" to define variables that can (and will) change and "var" to define any variable (even before a value is set).

let changing = "Harry Styles";
changing = "Together, Together";

const showDate = "24/05/2026";

var randomVariable = "a";
randomVariable = "b";

To define a function, the "function" keyword is used followed by the function name then parenthesis which contains the parameters, followed by {} to contain the code within the function. This is an example used on the input field to update the setlist and image for the Together, Together night selected by the user (it's setup as an event handler for when the input field changes):

function on_show_change() {
    const select = document.getElementById("setlist-viewer-content-select");
    const show = select.value.split(" - ")[0];
    const show_data = shows[show];

    console.log(show_data);

    const rotating_song = document.getElementById("rotating-song");
    rotating_song.innerHTML = "<span id='rotating-song-badge'>ROTATING</span> " + show_data.rotating_song;
    const image_container = document.getElementById("image-container-image");
    image_container.src = show_data.image;
}

This example doesn't have arguments, however if it did it the function line could look something like this:

function on_show_change(new_value) {

To get a HTML element, the following is used:

const rotating_song = document.getElementById("rotating-song");

To set content inside the element, the following is used:

rotating_song.innerHTML = "Medicine";

To create an alert to the user, alert() is used as shown:

alert("Harry Styles is now performing FINE LINE!!")

Search engine indexing

A search engine is a system software that is made to carry out web searches across the World Wide Web, but it's the version of the WWW that the search engine has which is called an index. A search engine index is a large collection of webpages, all tagged using metadata for keywords and other factors such as PageRank.

Indexes are built up by Web Crawlers. Crawlers are programs that will visit pages and extract all the content and metadata (meta tags within head) of a page and store it in the index. Also recording any hyperlinks on the page (anchor tags) and visiting them and doing the same process. This grows the index and then it can be searched.

For example, the Together Together setlist tracker currently isn't visible on any search engines. Once the site has been linked to by another page, once that other page has been crawled the Together Together setlist tracker will be crawled. Whilst crawled it will take into account many keywords such as "Harry Styles", "Setlist", "Together Together", "Amsterdam", and song titles. These will all be stored in the index along with the page link.

When a user enters a query that contains or relates to the keywords such as "Together Together Setlist", "Harry Styles Setlist" and "Was Are You Listening Yet played at the Together Together tour" for example the setlist tracker will be relevant and shown as a result. Some search engines will be able to link other keywords to keyworks, for example if the user searched for "kissco setlist" or "Kiss All The Time, Disco Occasionally setlist" the search engine would be able to tag "kissco"/KATTDO back to Harry Styles and then find the setlist tracker.

PageRank algorithm

PageRank is an algorithm created by Larry Page at Google to rank pages based on their relevance and amount of backlinks (inbound links), giving each page a score and a voting power to influence other sites scores if they get an outbound link from a site to theirs. The formula is public but Google's implementation isn't.

PageRank works by checking the number of and quality of links to a page in order to determine roughly how important that page is by giving each page a "vote share" from a site that links to it (each site has a vote of 1 (by default on the first iteration - it is the PageRank score of the site) which is shared out among all outgoing links). The PageRank score is based on the amount of inbound links and the quality of them from the inbound sites.

The PageRank algorithm takes in the amount of links from other pages and will divide up the amount of links to page X by the total number of links on the page. That's all multiplied by the damping factor and then all values referring to site X are then added together, then 1 minus the damping factor is added too and then that creates the PageRank score. Typically this is run many times (with the voting power of a site changing from 1 to the new pagerank).

PR(A) is the PageRank of Page A
C(Tn) is the total count of inbound links from web page n, including the inbound link to page A.

Each web page has a vote of 1 from the beginning, shared between all the web pages it links to.
As each iteration goes on, the vote value will become it's result from the previous iteration (it's pagerank from the previous iteration)

PR(Tn)/C(Tv) is the share of the vote page A gets from pages T1 through Tn.
Each of these vote fractions are added together and multiplied by d.

d is the dampening factor that prevents PR(Tn)/C(Tn) from having too much influence.
It is notationally set to 0.85, which equates to roughly 6 clickthrough links. Average user will then end their browsing session or enter a new web address rather than following another link. Then (1-d) represents the probability of a user randomly going to a page away from the site and not following a link.

This is equivalent to (INITIAL VALUE*DAMPENING FACTOR)/LINKS PER PAGE

It regularly recalculates page ranks to make sure they are up to date and accurate

It is forgiving with spelling mistakes and typos

It attempts to deal with millions of results in a useful way

Server and client processing

Client and server processing follows the client-server model, where the client accesses data and services from the server. The client initiates communications to the server and the server waits for requests from the clients.

Server-side processing

Server side processing is the processing of data that takes place on the server within the client-server model rather than the on the client's device (in the web browser). Typically an API (Application Programming Interface) is used for interacting with a server. For example the setlist viewer might use setlist.fm and pull the setlist from there. On setlist.fm the server would query their database to get the setlist data then send it back to the setlist viewer for the client to render it and process it.

Another example is PageRank, webpages are ranked on the server side as the client doesn't have the capacity to calculate hundreds of millions of PageRanks quickly with many iterations.

Client-side processing

Client side processing is processing that takes place within the users browser. Data is processed before it is sent off to the server, and in most cases isn't sent to the server as that would be server-side processing, so at this stage processing only takes place on the client. This would be done using JavaScript, there are many different types of processing. For example on the setlist tracker client-side processing happens when the selects a night from the nights dropdown on the setlist tracker, once a night is selected the JavaScript will find the rotating song and the image and update the HTML to reflect that. That all happens on the client with no requests to a server and can be done offline.

Client-side processing typically isn't the only place validation checks happen, the same checks should happen on the server too as they can easily be bypassed using something like Inspect Element or changing the JavaScript, a user can't change the server code so server-side can't be tampered with.

Typically a mix of Server side and Client Side processing happens within a form, data such as emails are validated server-side to ensure they are in the correct format (user@domain.tld) or a length check like on a password. Then once sent to the server the validation should be repeated as client-side validation can be bypassed. The client-side validation happens to prevent unnecessary load on the server by preventing requests that don't meet the validation rules.

Here's an example of processes that happen either on client or server to be processed:

Process	Client	Server
Web-page interactability	X
Applying web page styles	X
Encoding data to HTML		X
Validating a web form	X	X
Updating a database		X

ocr2.org.uk