Web standards
Blueprints of consistency. Implemented in browsers, blogs, search engines and other software to do with the web
HTTP
Hyper Text transfer protocol.
Application layer protocol
Used on web
Client-server model
HTTP messages
Types: request and response
Request - includes method specifying operation to be performed by server. Includes a request line (GET, POST, Head commands), header lines and carriage return (with a line feed indicating end of header lines)
response - includes results of the processing the request (almost same meta data and status codes). Includes status line (protocol status code and status phrase), header lines, and data.
HTTP headers
info about client, server and message body. Includes Directives and/or parameters. Keep alive header used to specify parameters (timeout and max num of requests)
Types (for context): request, response, representation (content type) and payload (checksum).
Types (for proxy handling): End-to-end (shouldn’t be modified by intermediates and can be cached), hop-to-hop (only relevant between nodes)
Categories: Authentication, caching, client hints, network client hints, conditionals, connection management, content negotiation etc
HTTP methods
GET: gets data from server without altering it
HEAD: fetches headers, like get but without response body
OPTIONS: gives the communication options for the target resource
TRACE: Echoes the received request to help with debugging
DELETE: removes resource from server
PUT: replaces resource with uploaded content
POST: submits data to server, causing change or creation of resource
PATCH: partially updates resource with target data
CONNECT: Establishes tunnel to server (for SSL/TLS communication)
HTTP Method properties
Safe
client intends safe data access with no intention to change server state
GET, HEAD, OPTIONS, TRACE
Idempotent
Identical output if called multiple times
GET, HEAD, OPTIONS, TRACE, DELETE, PUT
Cacheable
cacheable response generated.
GET, HEAD
HTTP response status code
Appears in 1st line in server-client response message
200 - ok (request success)
301 - Moved permanently (new location specified)
400 - bad request (msg not understood by server)
404 - not found
505 - HTTP version not supported
HTTP/0.9 (one line protocol)
First version of HTTP
Features:
- only supported get
- No headers (so no metadata)
- one request per connection (html content only)
Limitations:
- did not support multimedia content, status codes, non-persistent connections
HTTP 1.0
Features:
- Supported POST and HEAD as well
- Allowed headers and metadata through headers
- Status codes introduced
Limitations:
- Non-persistent connections: lacked efficient connection reuse and thus had higher latency
HTTP 1.1
Features:
- persistent connections allowing multiple requests
- Pipelining
- Added PUT, DELETE, OPTIONS, TRACE, CONNECT
Limitations:
- Head of line blocking: requests processed sequentially leading to inefficiency
HTTP 2.0
Features:
- Transmitted data is binary not text based
- Multiplexing allowing multiple requests and responses to be processed simultaneously over single connection
- Header compression reducing overheads from headers
Limitations:
- More complex implementations required due to multiplexing and header compression
- TCP head of line blocking
HTTP 3.0
Features:
- Replaces TCP with QUIC (faster and more efficient)
- Improved performance (faster connection, so reduced latency. Also reduced packet loss impact)
Limitations:
- Modern infrastructure and not yet widely adopted as HTTP 2 (HTTP 3 only introduced in 2022)
HTML and HTML elements
HyperText Markup Language. Tags define a Hierarchical structure called the Document Object model
HTML structures the web page using elements and tags (its the skeleton of the webpage)
Elements contain opening and closing tags e.g if this is a paragraph it would be in between these tags <p> here </p>
Block-level elements
Occupy full width available and start on new line e.g. <div>, <p>, <h1>
Inline elements
Occupy only space bounded by tags e.g. <span>, <a>, <img></img>
These are in a line and cannot contain block elements. For example to insert a link you would do this:</a></span>
<p><a>Lancaster</a></p>
This is using block (<p>) and inline (<a>).</a>
HTML attributes and text formatting
Attributes
provide additional info about element
e.g. <div class="board">
attributes:
- id
- class
- href (URL for links)
- src (Source URL for images)
Formatting
<b> bold
<em> emphasised
<strong> strong
<i> italics
<u> underline
line one <br></br> line two</u></i></strong></em></b>
<p> paragraph
</p>
HTML Lists
<ul>
<li> this makes an unordered list with the ul at the top.
<li> list item 2
</ul>
<ol>
<li> this makes an ordered list with the ol at the top
<li> this would have a 2 next to it in the webpage
</ol>
</li></li></ol></li></li></ul>
HTML tables
<table> defines table
<tr> table row
<td> table data cell
<th> table header cell
<table>
<tr>
<th> Header one </th>
<th> Header two </th>
</tr>
<tr>
<td> data one </td>
<td> data two </td>
</tr>
</table>
Creates a table with two columns (Header one and two) and one row (data one and two)
</th></td></tr></table>
HTML forms
Collect user input
<input></input> various input types (text, email, password etc)
<textarea> multiline text input
<button> clickable button
<select> dropdown menu
<form> defines the form
<label> gives a label
</label></form></select></button></textarea>
Semantic HTML
Elements that reflect content role.
e.g.
<header> intro content
<nav> navigation links
<article> self-contained content
<section> thematic grouping of content
<footer> footer for section of document
</footer></section></article></nav></header>
CSS
Cascading Style Sheets
Determines how elements are rendered on scree (the style of it). Its the skin of the webpage.
Enhances user experience by making webpage visually pleasing.
Improves performance as it reduces file size and loading times (external style sheets).
CSS structure
Selectors
- select element we want to style (element types, classes, ids etc)
- .class, #id, p, [type=”text”]
- pseudo-class (target based on state) a:hover
-pseudo-element (target specific parts) ::first-letter
Properties
- define aspect of element to style (background-color, font etc)
Values
- assigned to properties to dictate how styles will appear (color: red)
CSS box model
Content - actual content like text
padding - clears area around content inside the border
margin - spacing between element and its surrounding elements
border - space between padding and border
CSS inheritance
Descendants inherit from ancestors unless style overridden.
Properties related to block-style e.g. margin, padding and border aren’t inherited from ancestors
Responsive design
web page adapts to different screen sizes, orientations or resolutions.
Fluid layouts
Uses relative units, % or vw (viewport) or vh (viewport height), em and rem (font-relative units)
Flexbox
Distributes space and algins items with single row or column
Properties:
- display
- flex-direction
- justify-content
- align-items
Grid
properties:
- display
- grid-template-columns
- grid-template-rows
- gap
Media queries
Applies CSS rules based on conditions like screen size.
Improving performance of webpage
Order
- CSS in head and Java in body
Simplicity
- simple page faster
- combine files
- remove redundant code
Smaller
- optimise - enable compression
Load later
- Delay loading of components that are not visible until they’re needed
