HTML

Introduction

Stands for HyperText Markup Language.

HTML is a semantic language it describes the structure of the document and not the content.

HTML Nesting Structure

Parent

A tag is a parent of another if it immediately encloses the tag.

Child

A tag is a child of another if it is immediately enclosed by the tag.

Ancestor

A tag is an ancestor if it is the parent or the parent of an ancestor of a tag.

Descendant

A tag is an descendant if it is the child or the child of a descendant of a tag.

Sibling

Two tags are siblings if they share a parent.

Document Object Model

The HTML document object Model is a tree of the objects within a documet

starts with the document ant root element <html> includes all the tags in a structured tree to allow for navigation.

Basic Syntax

HTML uses code tags for opening and closing to give information about the content inside, opening use <> and closing starts with a backslash </>

The tags can also contain attributes with additional information like the class or ids.

Desc	Code
Opening tag	`<a href="www.google.com">`
element Name	`<a`
Attribute	`href="www.google.com"`
content	`a search engine`
closing tag	`</a>`

Example of a HTML tag: <a href="www.google.com"> a search engine </a>

Empty Tags

Some tags have no content and so are empty, a closing tag is not needed. <meta charset="utf-8">

HTML Nesting

All closing tags should occur in the reverse order they were opened. e.g

<h1> Share your <strong> Travels </strong><h1>

is correct

<h1> Share your <strong> Travels <h1></strong>

is incorrect

Character Entities

Some symbols need to be represented with special characters so they are formatted correctly.

Entity	Description
` `	non breakable space
`<`	<
`>`	>
`©`	©
`™`	™

Block vs Inline

Some elements are blocks these start and end with a new line. Examples are:

<h1>
<p>
<ul>
<table>
<div>

Other elements are inline and can normally be integrated into a line of text without breaking it up.

<a>
<img>
<span>

Validation

for validation visit W3c There is also a live html validation extension in VSCODE called: VS Code W3C Validation extention.

Common Tags

Doctypes (R)

Every HTML document has a doctype definition Variations of HTML, tells the browser what to expect.

<!DOCTYPE html>

HTML (R)

Specifies content as html.

<html> Content </html>

Head (R)

Typically contains information about the page title etc.

<head> </head>

Title

Title of the page shown in the browser tab.

<title> Title of the page </title>

Meta / Text encoding

character encoding can be declared using the meta tag.

<meta charset="utf-8">

Body (R)

contains the main page of information.

<body> content </body>

Headings

uses h1 through h6 in decreasing size.

<h1>Welcome to cs136</h1>
<h2>Welcome to cs136</h2>
…..
<h6>Welcome to cs136</h6>

A (Links)

produces a link that whn clicking on the content redirects to another page uses attribute href to specify page.

<a href="www.google.com"> a search engine </a>

href can link to external sites but can also link to within the page e.g href="#top" will move the page to a tag with id top.

Img (Image)

Displays an image on the page.

Uses attribute src to specify location.

alt attribute is a description for software to interpret the image.

<img src="file.gif" alt="file">

Strong

makes any content bold

<strong> content </strong>

P

specifies a paragraph of text

<p> paragraph </p>

Div (Division)

defines site structure

<div> content </div>

Abbr (Abbreviation)

used to define an abbreviation

<abbr title="World Health Organization">WHO</abbr> was founded in 1948

Br break

a break similar to newline no content

<br>

Code

give content a code like look

<code> this is code </code>

Em (emphasis)

provides emphasis usually italics

<em> no </em>

Mark

highlights the content

<mark> highlight </mark>

Small

makes text small

<small> small text </small>

Span

used to specify text for specific font and color changes

the sky is <span style="color:blue;font-weight:bold">blue</span>

Lists

ordered list <ol>
- List item <li>
Unordered list <ul>
- List item <li>
descriptive list <dl>
- list terms <dt>
- List descriptions <dd>

Tables

Allows displaying data in rows and columns uses 3 tags.

<table> </table> overall table
<tr> </tr> table row
<td> </td> table data

example:

<table>
<tr>
    <td>Name</td>
    <td>Age </td>
<tr>
<tr>
    <td>Kate</td>
    <td>24 </td>
<tr>
<tr>
    <td>James</td>
    <td>35 </td>
<tr>
<tr>
    <td>John</td>
    <td>56 </td>
<tr>

Tables default to no lines. To include lines they should be specified in css.

Modifying tables

table header

using <thead> around the first <tr> specifies it as a header row

using <tfoot> around the last <tr> specifies it as a footer row

caption

Just inside the table a caption can be added using <caption> </caption>

rowspan

Data can cross multiple rows through the use of rowspan

<td rowspan="3"> Data </td>

column span

Data can cross multiple columns through the use of colspan

<td colspan="2"> Data </td>

HTML Forms

These are a way of gathering data form the user specified by <form> and providing them to the server has attributes:

action - what to do when the data is submitted
method - The way the data is sent Get or Set
accept-charset - The charset accepted by the form

<form method ="post" action="auth.php"

Form Elements

A form element allows the user to add information to the form for submission there are several types

The element can also have a name attribute this can be used to reference the data the user entered

Input

used to select data form the user can have many different types

text - text input
password - input only shows dots
submit - a button the user can use to submit the form
radio - a circular checkbox can only select one in a group ,grouped by the attribute name, need attribute value, use checked for the default

other types

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week support is patchy and not uniform across browsers
Other Attributes
value - the default value needed to be deleted before entering info
placeholder - the suggested value is a ghost value

<input type="text", name="name">

Select

Allows the user to select from pre-chosen options uses option

<select name="location">
    <option> Choose a country</option>
    <option> France</option>
    <option> United Kingdom </option>
    <option> Germany </option>
</select>

in options

attribute value can be used but defaults to the content attribute selected can be used to select the default

Accessibility

A label can be created with the attribute for, by making it equal to an element software can interpret it to aid in accessability for people with assistive tools.

<label for=first_name>First Name:</label>
<input type="text" name="fname" id="first_name">

CSS

Introduction

CSS stands for Cascading Style Sheets

Intended to modify the appearance of HTML documents

Placement of Styles

The code for the stylesheet can be placed in 3 possible locations.

Inside Respective Tags

This method is often discouraged because it causes HTML code to be very messy and if you want to change the styling, you have to go to individual HTML tags. <h1 style ="color:blue"> content </h1>

In a Style Tag

Inside the <head> tag:

<style>
 h1 {color:blue;}
</style>

This method is used for certain styles.

In a Separate File

The file containing the stylesheet is then linked in the <head> tag. This method is most commonly used. <link rel="stylesheet" href="styles.css">

Types of Stylesheet

There are 3 types of stylesheet

Author created style sheets
User created style sheets
Browser style sheets

These are in decreasing importance the browser will always look for the most immediate style sheet for any definition

The browser will Cascade onto the next style sheet up in the hierarchy if one there is no definition for the current style sheet and will be applied in the following order

Browser Default
External Stylesheet
internal stylesheet (<head>)
inline styling

Syntax

CSS is formed from selectors and declarations.

Name	example
Selector	`h1`
Declaration	`{color:blue; ....}`
property	`color:`
value	`blue;`

Example:

h1 {
    color:blue;
    font-size:12px;
}

Box Model

Every element is made form boxes and contains

Content
Padding
Border
Margin

These can be use to adjust size and location . using properties like margin and border

Positioning

Static is the default and positions boxes according to the normal flow

Other ways include fixed and floating

Selectors

There are 3 ways of specifying a html element

Using the Tag Name

This will modify all tags of that type

h1 {color:blue;}

Using a Class Selector

uses to modify just some elements uses .

.large {color:blue;}

Using an Id

id is unique used to modify a single element

#page_title {color:blue;}

Attribute Selectors

attribute selectors style HTML elements that contain an attribute use [] to specify an attribute

Selector	Matches
`[]`	A specific attribute
`[=]`	an attribute with a specific value
`[~=]`	A specific attribute whose value matches at at least one of the words in a space delimited list of words
`[^=]`	A specific attribute whose value begins with a specified value
`[*=]`	A specific attribute whose value contains a substring
`[$=]`	A specific attribute whose value ends with a specified value

Example:

[title=main] would match <h1 title="main">

[title*=subtitle] would match <h1 title="first_subtitle">

Pseudo Selectors

A pseudo-element selector is recognized but does not explicitly point to an html element

::first-letter{}
::first-line{}
::selection{}

A pseudo-class selector targets a particular state or relationship

a:link{}
a:visited{}
a:hover{}
a:active{}

Contextual Selectors

A contextual selector targets other tags within the document hierarchy

Selector	Matches	Example
Descendant	A specified element contained within another specified element	div p
Child	A specified element that is a direct child of the specified element	div>p
Adjacent Sibling	A specified element that is the next sibling of the specified element	h3+p
General Sibling	A specified element that shares the same parent as the other specified element	h3~p

Properties

There are hundreds of properties, some key ones you should know are:

Property-type	Property
Fonts	font
Fonts	font-family
Fonts	font-size
Fonts	font-style
Fonts	font-weight
Text	letter-spacing
Text	line-height
Text	text-align
Text	text-decoration
Text	text-indent
Text color	color
Background	background
Background	background-color
Background	background-image
Background	background-position
Background	background-repeat
Color	opacity
Borders	border
Borders	border-color
Borders	border-width
Borders	border-style
Borders	border-top , border-left …..
Borders	border-image
Borders	border-radius
Borders	box-shadow
Spacing	padding
Spacing	padding-bottom , padding-left ….
Spacing	margin
Spacing	margin-bottom, marin-left…..
Sizing	height
Sizing	max-height
Sizing	max-width
Sizing	min-height
Sizing	min-width
Sizing	width

Different properties take different values.

Color properties can use RGB, hex, RGBa .. values
Size based properties can use px, em , % , in , cm , pt

Know the different value types for the main properties

Table Styling

Table Borders

Borders around tables can increase readability

table, th, td {
  border: 1px solid black;
}

The border collapse property collapses the borders into a single line over 2 in parallel

table {
  border-collapse: collapse;
}

Text Alignment

Text in Tabels can be aligned within the cells

td {
  text-align: center;
  text-align: left;
  text-align: right;
}

Styling

Tables can be stripted usin nth-child()

tr:nth-child(even) {
    background-color: #f2f2f2;
}

color can be altered

th {
  background-color: #4CAF50;
  color: white;
}

Python

These notes will not cover everything Python has to offer or go into intricate detail of how python works under the hood, the purpose is to cover the basics and anything else which you may need to know to make use of Flask.

Introduction

Python is a high-level interpreted language.

In the context of web development it is mostly used for server-side programming. Many popular web frameworks such as Django and Flask are Python-based.

Python was designed by Guido van Rossum with the purpose of allowing programmers to do more in fewer lines of code.

Basic

Python files use the py extensions, for example: test.py

Unlike with many other popular programming languages like Java or C, statements in python do not end with a semicolon ;

Curly brackets are also not used. Instead, scope (Part of the code in which a specific variable or method can be accessed) is denoted through the use of indentation. This means that whitespace in python is also considered code, it does not get removed before interpretation/compilation.

Outputting to the console is handled using the print() function.

Variables

Python is a dynamically typed language hence variable types are not declared in code.

Python also does not have any way to declare a variable without also initialising it hence a variable is created when a value is assigned to it a = 5

Valid variable names must * Start with a letter or the underscore character * Not start with a number * Only contain alpha-numeric characters and underscores

Constants (variables that won’t change) should be all uppercase. This isn’t required however it is common practice among programmers.

Once a variable is created, you are able to change its value even if it’s of a different type

a = 5
a = 10
a = "hello"
a = True

Data types

As stated previously, the types of variables in python are not declared however values that you assign to variables do have a type nevertheless

Integers: 1, -200, 1123123123123123123123123123123
Complex numbers: 2+3j, -1+1j, 2.5-2.5j (Notice that a j is used as opposed to an i to denote imaginary)
Floating point numbers: 1.0, -11.27, 999.9
Strings: “hello world”, “1”, ‘hello world’, ‘1’, “”, “‘quote’”, ‘“quote”’
Boolean: True, False

Strings

Concatenation:

a = "hello"
b = "world"
c = a + " " + b

Formatting:

Python 3.6 added f-strings which provide an easy readable way of formatting strings. In order to format a string you must prefix it with f or F and add any variables or expressions that you want to include in the string within {}.

Examples:

moduleCode = 139
moduleName = "Web Development Technologies"
print(f"Module name: {moduleName}. Module Code: {moduleCode}")

daysInAWeek = 7
weeksInAYear = 52
print(f"Days in a year: {daysInAWeek * weeksInAYear}")

Casting

You may cast a value of one type to a different type through the use of casting functions which are usually named after the type that they cast to.

Examples: a = int("1") #Cast from string to integer b = str(2.5) #Cast from float to string

Be wary when casting to boolean from a string as anything apart from the empty string will be parsed as True hence bool(“False”) evaluates to True

Operators

Arithmetic Operators

+ : Addition and string concatenation
- : Subtraction
/ : Division
% : Modulus (Finding the remainder of division)
** : Exponentation
// : Integer division (floor division)

Comparison Operators

== : Equality
!= : Inequality
> : Greater than
< : Less than
>= : Greater than or equal to
<= : Less than or equal to

Assignment Operators

Any of the arithmetic operators can be combined with = to combine the operation with assignment. For example, a += 5 is equivalent to the expression a = a + 5

Lists

Python does not have built-in support for arrays. Lists are used instead, they differ from arrays as they are dynamic (hence their size can change at runtime) and can store data of different types. Lists are zero-indexed.

Initialisation:

aList = []
bList = [1,2,3,4,5,6,7,8,9,10]
cList = ["hello", 1.0, True, 20]

List access:

bList[0] #Used to access the first element which is 1
bList[4] #Used to access the fith element which is 5
bList[-1] #Used to access the last element which is 10

Multi-dimensional lists

A list can be an element of another list which allows you to create lists of multiple dimensions:

twoDList = [[1,2,3,4],[5,6,7,8],[9,10]]

List access is very similar except now two values are used to access an element, the first is the index of the first list and the second is the index of the inner list:

twoDList[0][3] #This will return the fourth element of the first list element which is 4.

Python includes many useful list functions that handle basic operations such as appending, removing and sorting. You can find out more in the official documentation

Tuples

Tuples are similar to lists in the sense that they store a collection of elements however they also adhere to the following restrictions: * Elements stored in a tuple must all be of the same type * Once a tuple is created, it cannot be changed (hence it is immutable)

A tuple is created using () and accessed using an index just like with a list

testTuple = (1,2,3,4,5,6,7,8,9)
testTuple[1] #returns the second element which is 2
testTuple[1] = 5 #ERROR: This code will not run as tuples are immutable

Dictionaries

Dictionaries are used to store key:value pairs. You can think of them as a list however instead of using an index to access an element you use a key which can be of almost any type. A dictionary is created using {}. The keys do not all have to be of the same type however in practice they almost always are.

testDictionary = {"key1" : "value1", "key2" : "value2", "key3" : "value3"}
testDictionary["key1"] #This code will return the value associated with "key1" which is "value1"

unusualDictionary = {"key1" : "value1", 1 : "value2", 0.5: 1} #Also a valid dictionary in python

Conditional Statements

Pay close attention to the indentation used, in python whitespace counts as syntax hence using incorrect indentation will prevent your code from running

If

if condition1:
    print("Condition 1 true")
elif condition2:
    print("Condition 2 true")
else:
    print("Neither condition 1 or condition 2 are true")

Match

Since the release of Python 3.10, match statements can be used to control execution flow. They are very similar to switch statements in other languages.

match dataToMatch:
    case pattern1:
        print("dataToMatch is equal to pattern1")
    case pattern2:
        print("dataToMatch is equal to pattern2")
    case pattern3:
        print("dataToMatch is equal to pattern3")
    case _:
        print("The _ wildcard is used to execute code when none of the other patterns match")

Iteration

For

The for loop in python can iterate over any object which is considered iterable (this includes lists, dictionaries and tuples).

for x in iterable:
    #action

To iterate over a range of values use the range function

for x in range(0,10): #generates a range between 0 and 9 inclusive
    #action

While

while condition:
    #action

Functions

Functions in python are defined using the def keyword. There is no need to declare a return type and any parameters are defined within ()

def testFunction(arg1, arg2, arg3):
    return "returning this string"

You can pass default value to functions using = which will be used if not argument is passed to the function call

def testFunction2(arg1="default"):
    print(arg1)

You can call a function in code by referencing its name and passing any required arguments in ()

result = testFunction(1, 2, "third argument")

This is all you really need to know for the module however there is a lot more to defining functions such as argument lists and passing functions as arguments. You can find read about this in the official python documentation

Function wrappers

Function wrappers (also known as function decorators) allow you to add functionality to existing functions. A function wrapper starts with the @ symbol. For this module, all you need to know is that they exist as you will be using them in Flask however you won’t need to define your own function wrappers.

Object-oriented Programming

This section will cover the very basics of OOP in python which is all that is required for the module, check the official python documentation for more.

The self keyword is used in code to refer to the current class instance. In other languages the this keyword is often used instead.

Attributes and methods of an instance are accessed using .

Creating a class definition:

class className:

    classVar = "this will stay the same among all class instances"

    def __init__(self, value1): #The constructor must be called __init__
        self.attribute1 = value1
        #Other initialisation is done here
    
    def method1(self):
        pass

Creating an instance of a class and accessing attributes:

instance1 = className("value1")
instance2 = className("value2")
instance3 = className("value3")

instance1.attribute1 #This will return "value1"
instance2.attribute1 #This will return "value"

instance1.classVar
instance2.classVar #Both of these calls return the same value as classVar is a class variable
                   #hence stays the same across instances

instance1.method1() #Methods are also accessed using dot notation

Flask

Introduction

Flask is a micro-framework used for developing web applications. It utilises python for server-side scripting.

It is classified as a micro-framework as it has comparatively fewer features than other frameworks such as Django. This does not necessarily mean that it is worse or less powerful, as flask is utilised by companies such as Netflix, Reddit and Uber.

Flask was released in 2010 making it much more recent than PHP which was released in 1995

Flask uses templates to generate web pages dynamically based on the client’s request.

Basic

Notes on installation can be found on the official flask website

Initialisation

Create a python file in your flask project directory
Import flask
Create an instance of the flask class

A minimal flask application with no routes lookes like this:

from flask import Flask

app = Flask(__name__)

Adding routes

A route represents a unique URL path that is used to make a request to the webserver. Routes are often used to navigate to a specific web page however they may also be used to pass data to the server or carry out a different function.

A route is defined using a function and a corresponding decorator.

@app.route("/routeName")
def routeName():
    #Some computation may occur here
    return someResource

Whatever is returned by the function is going to be the response of the webserver to the request made by the client.

Escaping

When returning HTML, which includes user-provided values, any of the data provided by the user should be escaped to protect against XSS attacks. Escaping involves replacing any special characters which may be used to execute a script with character escapes that are treated as regular text and not interpreted as code.

You can escape text using the escape() method from the markupsafe module that is installed alongside flutter.

from markupsafe import escape

@app.route("/<name>")
def hello(name):
    return f"Hello, {escape(name)}!"

Templates

A template is a html file that acts as a skeleton of a web page which is often combined with some data to generate the full web page so it can be sent as a response to a client’s request.
They often contain some static data, which is included in all responses, and placeholders for dynamic data that will be replaced with specific data when a request is made.
Templates in Flask are stored in the templates folder.
In order to render a template and send it back as a response, you must use the render_template() function which needs to be imported from flask.
You can pass data to render_template() using named parameters which can then be used when generating the web page.
Flask uses Jinja2 for generating templates

@app.route("/CS139")
def CS139():
    return render_template("coursePage.html", code="139", name="Web Development Technologies")

Note that render_template() automatically escapes any input data hence there is no need to do it manually.

Jinja

As stated previously, Jinja (AKA Jinja2) is the template generation engine used by Flask. Jinja has its own syntax which is somewhat similar to that of python. All Jinja code should be included within html templates.

{{ }} Is used to add content to the HTML file. Anything between the braces will be added to the final generated web page as content. {% %} Is used to surround program components such as if statements or loops. {# #} Can be used to add comments to your Jinja code.

Setting Variables

{% set var = "<h1>Page Title</h1>" %}
{{ var }}

The second line is used to add the contents of var to the page.

You can define and access lists and tuples in Jinja in the same way that you would in python

Conditional statements

Conditional statements can be used to omit certain HTML depending on the data passed to the template. For example, you may decide to only show the login button when the user is logged out, once a user signs in you may want to hide it.

{% if condition1 %}
...
{% elif condition2 %}
....
{% else %}
...
{% endif %}

For loops

You can iterate over items in a sequence using for, very similarly to how you would do it in Python. A for loop can be combined with an else statement that will execute in the case that there are no items to iterate over.

<ul>
{% for user in users %}
    <li>Username: {{ user.username }}</li>
{% else %}
    <li>No users found</li>
{% endfor %}
</ul>

This is likely all you will need to know about Jinja for the module however if you’re interested in the rest of Jinja’s features, you can read more about it on the official website

Accessing Requests Data

In order to access request data you must import the request module from flask from flask import request

Handling GET requests

Flask routes respond to GET requests by default. If any data is passed through the URL as a query string you can access it by defining it in the route name like so:

@app.route("/payBill/<billID>)
def payBill(billID):
    pass #Now the billID that was passed using the GET request can be accessed as a normal variable

Handling POST requests

In order to accept POST requests, you must add it to the methods that the route can handle in the function wrapper like so @app.route("/routeName", methods=["POST", "GET"])

To access form data passed through a post request use request.form which is essentially just a dictionary of key value pairs with the keys corresponding to the name of the input element from the form.

@app.route("/register", methods=["POST", "GET"])
def register():
    if request.method == "POST":
        username = request.form["username"]
        password = request.form["password"]
        return "User registered successfully"

When handling a post request, it is common to redirect the user once the request has been handled to prevent a duplicate request being sent if the user decides to refresh the page. This can be done using the redirect() function.

    ...
    return redirect("/routeName")

Cookies

Cookies are one way of maintaining state when using HTTP/S which involves creating a “cookie” file that is sent to a client who doesn’t already possess one. The cookie is then sent by the client in subsequent requests and will include any relevant data about the client and their past sessions (time spend on the site).

Each cookie is a single key:value pair. You can get around this restriction by setting the value to be a JSON string storing multiple key:value pairs which can then be deserialised when sent back to the server. You may also simple set multiple cookies on a single response, ensuring that each one has a different key to prevent overwriting.

When a server sends a cookie to a client the browser will store it locally on the machine so that next time you visit the site it can be sent alongside your requests.

Cookies are often given an expiration date which will allow the browser to determine when they should be deleted. A cookie that does not have an expiry date specified will be deleted when the browser is closed.

An online retailer may use cookies to keep track of what is stored in your shopping cart so it does not have to be rebuilt each time you visit the site.

Flask implementation

To create and send a cookie in Flask you must first create a response object then set the cookie of that response.

This is achieved using the make_response() and set_cookie() functions.

from flask import make_response

@app.route('/')
def index():
    resp = make_response(render_template("index.html"))
    resp.set_cookie('attribute', 'value')
    return resp

Storing multiple key value pairs in a single cookie:

from flask import make_response
import json

@app.route('/')
def index():
    resp = make_response(render_template("index.html"))
    resp.set_cookie('attribute', json.dumps({"attr1" : "val1", "attr2" : "val2", "attr3 : val3"}))
    return resp

A cookie is read from the response object, the cookies dictionary is used to access all of the cookies sent as a part of the request.

from flask import request

@app.route('/')
def index():
    attribute = request.cookies.get('attribute')

if attribute is None is true then the cookie has not yet been set or has expired.

If the value stored in the cookie is a JSON string you will need to make use of the json.loads() function from the json module.

Sessions

A session is an alternative way of managing state when using HTTP/S.

There are two main types of sessions, client-side and server-side.

Server-side sessions

Data about a session is stored on the server.
Client is given a session identifier which is then sent alongside subsequent requests to identify them.
No size limit on data stored.
Suited to large web applications which store a lot of data about each user.

Client-side sessions

Implemented on top of cookies.
Cookie signed cryptographically, any modifications will invalidate it unless signed with secret key.
Suited to applications which do not store large amounts of data per session.
This is the type of session that you can set up using Flask without any additional extensions.

In both cases, session ends when the user closes their browser or logs out of the website. A session may also have an expiry time which will cause the session to expire after a certain period of inactivity.

Less confidential websites such as Facebook may use long-lived sessions to prevent the number of logins you must carry out however websites of banks often have very short-lived sessions to ensure that others cannot access your bank account if you accidentally forgot to log out of it on your computer.

Flask implementation

Generating a session

from flask import session

# Set the secret key to some random bytes. Keep this really secret!
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template("login.html")

Reading from a session

from flask import session

app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

@app.route('/')
def index():
    if 'username' in session:
        return f'Logged in as {session["username"]}'
    return 'You are not logged in'

@app.route('/logout')
def logout():
    # remove the username from the session if it's there
    session.pop('username', None)
    return redirect(url_for('index'))

Flask-SQLAlchemy

Flask-SQLAlchemy adds support for SQLAlchemy which is allows you to access and modify your database from within your Flask application.

Creating a database schema

A Schema is a file which defines the structure and configuration of your database. It acts as a blueprint used when constructing your database.

In SQLAlchemy, each table is represented as a class, the attributes of which represent different columns.

This is the structure of a table defined in SQLAlchemy:

from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()

class tableName(db.Model):
    __tablename__='tableName'
    pKey = db.Column(db.Integer, primary_key=True)
    attribute1 = db.Column(db.type)
    attribute2 = db.Column(db.type)
    ...
    
    def __init__(self, attribute1, attribute2, ...):
        self.attribute1 = attribute1
        self.attribute2 = attribute2
        ...

The most used column types are:

Integer
String(size)
Text
DateTime #Expressed as a datetime object in python
Float
Boolean

When defining a primary key you should set the primary_key parameter of db.Column to true. To define a composite key you must set primary_key to true on all columns used to create the composite key.

Creating the database

To create the database you must run the following commands:

db.create_all()
db.session.commit()

Replace db with whatever you called your SQLAlchemy instance when initialising it

Making queries

In order to access your database you will need to import your database and any of the models you created into your flask application python file.

from db_schema import db, table1, table2, table3

You can either make queries using raw SQL or by using the predefined methods. The second way can be more secure as it prevents SQL injection attacks however it is fine to use raw SQL queries as long as you sanitise and/or validate the input.

Raw SQL

To execute raw SQL queries use db.engine.execute()

result = db.session.execute("SELECT * FROM tableName WHERE columnName = value;").fetchall() #Using fetchall() will return a tuple representing the query result

db.session.execute("INSERT INTO tableName (column1, column2) VALUES (value1, value2);")
db.session.commit() #Used to commit changes to the database.

Using functions

Insertion

newEntry = ModelName("value1", "value2")
db.session.add(newEntry)
db.session.commit()

Deletion

db.session.delete(newEntry)
db.session.commit()

Making queries

results = ModelName.query.filter_by(attribute="value", attribute2="value2") #Checking for equality
moreComplexQuery = ModelName.query.filter(ModelName.attribute == "value", ModelName.attribute3 > 0) #Use filter for more complex queries

To retrieve a record using a primary key use the get function:

userRecord = Users.query.get("primaryKey")

To update a record simply query it, change an attribute then use db.session.commit() to save the changes to the database.

queriedRecord.attribute = "newValue"
db.session.commit()

PHP

Introduction

PHP is a server side scripting language

Stands for PHP hypertext programing (go and figure what that stands for)

Released in 1995

Has some issues:

30% of vulnerabilities are related to PHP
Sloppy code leads to errors.

PHP is run on the server side can collect data from:

databases
web services
files
email
other software

Basic

the file name needs to be changes from .html to .php

all php code must be written inside <?php and ?>

all php statements end with a semicolon

comments are:

//single line
/* multi-line */

Simple Commands

echo inserts the output into the larger html page including any tags

echo <p><strong> Hello </strong></p>

print f

print f produces formatted statements form variables

printf("String",variables)

$product= box;
$weight = 1.756723;
printf("the %s is %.2f kilos",$product,$weight);

Specifier	Type
%f	float
%s	string
%d	decimal

NUll Coalescing Operator

?? can be used to assign a value if a variable is null $username= $GET_["username"]??default

more here

Variables

Variable prefixed with $
must start with letter or _
only contain alphanumerical characters and _
No spaces
case sensitive
Dynamically typed

$a = 3;
$b = 4;
echo $a+$b;

constants

Use define()

define("PI",3.141592653);
$pi=PI;

Data Types

Scalar types

integer
float / double (these are the same)
boolean
string

Compound Types

Array
Object

Strings

need double quotes

concatenation uses . can use .= for append

$a = "Hello"
$b = "World"

$c = $a." ".$b
$a .= " "
$a .= $a

--
$a -> Hello World
$c -> Hello World

Arrays

Two types

Numeric Array
Associative array

Numeric Array

Creation: $courses=("CS139","CS132","CS133");

You can also do:

$courses[0]="CS139";
$courses[1]="CS132";
$courses[2]="CS133";

Associative Array

Creation:

$courses=("CS139"=>"Web Dev","CS132"=>"Not A Cult","CS133"=>"Professional Skills");

You can also do Representation:

Operators

Arithmetic Operators

Operator	Name
`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`%`	Modulus
`++`	Pre/Post increment
`--`	Pre/Post decrement

Comparison Operators

Identical same value and same type 5 is not identical to “5”

Logical Operators

Operator	Name
`&&`	AND
`\|\|`	OR
`!`	NOT

Array Operators

Operator	Name
`$arr1 +$arr2`	Union
`$arr1 == $arr2`	Equal
`$arr1 === $arr2`	Identical

Branching

If

similar to Java

if ($course == "CS139") {
    echo "Web Dev";
} elseif ($course =="CS132"){
    echo "not a cult";
} else{
    echo "Not Web Dev and not not a cult";
}

can use : instead of {}

Switch

switch($course){
    case "CS139":
        echo "Web Dev";
    break;
    case "CS132":
        echo "not a cult";
    break;
    default:
        echo "Not Web Dev and not not a cult";
}

only judges by equality by if they are identical.

Looping

For loop

for ($x=0; $x <=10; $x++){
    echo "$x <br>";
}

While Loop

$x=0;
while ($x<=10){
    echo "$x <br>";
    $x++;
}

do while loop

$i=0;
do {
    echo "$x <br>";
    $x++;
} while ($x<=10);

Array Iteration

iterate over an array obtaining the value at each location

foreach($array as $item){
    echo $item;
}

for associative arrays

foreach($array as $key => $value){
    echo $key."is".value;
}

Function

Functions that have a return value can also (optionally) have a a return type

function FunctionName ($arg1,$arg2):string{
    return $arg1.$arg2;
}

Pass by Reference

Adding an & in front passes by reference, a variable change in a function is reflected outside the function scope

function add(&$arg){
    $arg+=100;
}

Global

Global scoped variables can be included in functions with global

SHOULD BE AVOIDED

$a ="a";
$b ="b";
function findAB(){
    global $a,$b
    echo $a.$b
}

HTML Forms

In PHP the data is converted from the requests to associative arrays. Post requests are $_POST get requests are $_GET

PHP From Another File

Php can insert the contents of another file

require <script.php>, script stops if file can’t be found

include <script.php>, script attempts to continue if file cant be found

also

include_once , require_once

Elements such as header or nav bar only need to be made once then can be copied over

Objects and Classes

class Person{
    var $name;
    function get_name(){
        return $this->name;
    }
    function set_name($new _name){
        $this->name=$new_name;
    }
}

All object variables need to be specified through $this->

Call Methods

To call a method $object->method(<args>)

Constructor

The constructor function is always __construct()

Objects can be created through the new keyword

$James= new Person();

Access Modifier

public
private
protected

can all be used to define access these should replace the var keyword or put in front of a function

Inheritance

class Admin extends User

parent class method id called by

parent::method();

Cookies

Cookies can be added with the setcookie() function

$expiry = time()+60*60*24*7;
$name="Username";
$value="James";
setcookie($name,$value,$expiry);

cookies can be fetched using $_COOKIE[value]

if (isset($_COOKIE["Username"])){
    echo $_COOKIE["Username"];
}

Sessions

To create a session use session_start() this must occur at the start of the file

can be used with $_SESSION[]

set with $_SESSION['Key'] = $value;

and retrieve with $value =$_SESSION['Key'];

values can be checked with isset($_SESSION['Key'])

session_destroy() can be used for logging out and removing all values

example to check if a user is logged in

<?php
session_start();
if (isset($_SESSION['UserID'])){
    // show page content here
}
else{
    header(`location:HomePage.php`);
}
?>

Password Hashing

Passwords should be hashed for storing to ensure security the hashes can be created with password_hash() and verified with password_verify($password,$hashedPassword)

if (isset($_POST['username']) && isset($_POST['password'])){
    $password = $_POST['password'];
    $hashedPassword = getHashedPassword($_POST['username']);
    if (password_verify($password ,$hashedPassword)){
        header(`location:restrictedPage.php`);
    }else{
        header(`location:HomePage.php`);
    }
}else{
    header(`location:HomePage.php`);
}

It is important to verify that a user is logged in before they can access a page

<?php
require `access.php`;
require_login();
?>

can be put at the top of pages to check if the user is logged in.

inside access.php:

<?php
function require_login(){
    if (!isset($_SESSION['id'])){
        header("Location:index.php");
        exit();
    }
}
?>

if $_SESSION['id'] is set when the user logs in this will prevent users from accessing pages unless they have logged in

SQL

first a database connection must be established

$db = new SQLite3('database.db');

the database can then be queried

$db->exec(<SQL>) for result less queries

$db->query(<SQL>) which returns a result

handing a query result

$result = $db->query("SELECT * FROM Users");

while ($row = $result->fetchArray()){
    echo $row['username'];
}

Serialization

can be used for storing objects and complex data as a string $string = serialize($object);

the text can then be un-serialized $object= unserialize($string);

Reading and Writing Files

two types oif access stream access, will read a small portion at a time. All-in-Memory access can read the entire file to memory.

Stream Access

similar to ‘C’

fopen() - opens the file
fgets() - gets a portion of the file
fclose()- closes the file

In-memory Access

file() Reads the entire file and returns an array of each line in the file
file_get_contents() Read the entire file and return a string
file_put_contents() Writes the contents of a string variable to a file

Errors

3 types of errors

Expected Errors - typing in the wrong name
Warnings - thing to warn the user about, start before end dates
Fatal Errors - things that stop the process, should still be recoverable

Reporting

error reporting can be done with

error_reporting(E_ALL);
ini_set("display_errors",1);

Superglobals

Name | Description –|– $Globals | Array For storing data that needs the superglobal scope $_Cookies | Array of cookie data passed via HTTP request $_ENV | Array of server environment data $_FILES | Array of files uploaded to the server $_GET | Array fo query string data passed to the server via the URL $_POST | Array fo query string data passed to the server via the HTTP header $_REQUEST | Array containing the contents of $_GET, $_POST, $_COOKIES $_SESSION | Array containing session data $_SERVER | Array containing information about the request and the server

$_SERVER["HTTP_REFERRER"] information about where the user came from

$_FILES used with post requests HTTP should have a file input type for a form

$_FILES["File1"]["name"] - anme fo the file
$_FILES["File1"]["type"] - e.g img.png
$_FILES["File1"]["tmp_name"] where is was upladed to
$_FILES["File1"]["error"] “UPLOAD_ERR_OK” if no error
$_FILES["File1"]["size"] in bytes

then move_uploaded_file($tmp_file,$new_file);

JavaScript

Introduction

Javascript is an interpreted programming language

developed by Brendan Eich at Netscape in 1990s

Formalized as ECMAScript language standard

Mostly Client side but can be used server side

Uses

Dynamically creating HTML

Changing existing html

Responding to user events

Validating input

Background upload of data

Basic

Javascript is written between <script> </script> tags in html

Alternatively can be written in an external file using

<script src="myjs.js" type="text/javascript" charset="utf=8"></script>

All statement lines end with a colon.

Javascript is executed when the page loads

Commands

alert(""); Displays a popup to the user

document.write(""); Writes content to the web page

console.log(""): Can add text to the hidden browser console

Variables

Variables are loosely typed

Names must start with letters $ or _ and are case sensitive

created with var keyword

Var x = 2;

var y = "Hello";

DataTypes

strings - text inside single or double quotes
Numbers - both decimals and integers
Boolean - true/false
Arrays
objects
Null - Empty variable
Undefined - unset variable
Function

Arrays

Arrays are 0 indexed

var animals = new Array();
animals[0]="Dog";
animals[1]="Cat";
animals[3]=2;

Arrays can sore different object types

Common Methods

length - animals.length
index - animals.indexOf("Cat")

Functions

a java script function can be created with the keyword function

function Name(args){

}

can return a value using the return keyword

Control Flow

IF

if (course==`cs139`){
    alert("Web dev");
}else if (course == 'cs132'){
    alert("Not a Cult");
}else{
    alert("Something else");
}

Switch

switch (course){
    case 'cs139':
        alert("Web dev");
        break;
    case 'cs132':
        alert("Not a Cult");
        break;
    default:
        alert("Something else");
}

For Loop

var i;
for (i=0;i<10,i++){
    alert(i);
}

While Loop

var x =0;
while (x<5){
    alert('hello');
    x++;
}

Objects

Objects are a collection of properties similar to Key-value pairs.

var person = {first_name:"Adam",last_name:"Chester"};

As variables can be functions methods are handles the same way

Properties can be accessed using dot notation person.first_name

Properties can be created arbitrarily person.age = 60

Constructor Function

JavaScript can create an object from a single function

Uses the this keyword to reference object variables

function Person(firstName,lastName,age){
    this.FirstName=FirstName;
    this.LastName=LastName;
    this.age=age

    this.bio= function(){
        return this.firstName+" "+this.lastName+" is "+this.age+" years old";
        };
}

var person = new Person("John","Smith",60);
alert(person.bio());

Classes

Full javascript object classes do exist but were not discussed in the videos.

Navigating the DOM

Javascript can manipulate the objects within the document object model

Number of ways to refer to a HTML element

by ID document.getElementById("");
by tag Name document.getElementsByTagName("");
by the class document.getElementsByClassName("");

Changing the inner element:

document.getElementById("").innerHTML="Changed it";

Changing the attributes, in this example src is the image source attribute:

document.getElementById("image").src="new.gif";

Changing the style can be accessed with style then altering the style properties:

document.getElementById("main").style.color="blue";

other commands

<element>.parentNode
document.createElement("")
<element>.InsertBefore(newNode,ReferenceNode)

elements can be stored in variables

var heading = document.getElementById("heading");
heading.innerHTML="Changed it"

Event Handling

one way to handle events is using attributes:

<h1 onclick="this.innerHTML='changed'"> CLICK ME </h1>

Function can be used for the onclick attribute

Can be aded programmatically:

document.getElementById("main").onclick = alert("hello");

Forms

Forms have a special event handler called onsubmit

function validateForm(){
    username = document.getElementById("Username").value
    if (username==null || username==""){
        alert("No username");
        return false;
    }
    return true
}

Can be used in the form with:

<form onsubmit="return validateForm()" action="submit.php">

jQuery

JQuery is a framework to shorten document navigation and event handling

Attempts to standardize a lot commands across browsers

JQuery can be added in the same was as an external javaScript program

<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf=8"></script>

jQuery uses the $ function

Starting Scripts

Typically it is desirable for scripts to start after the while file has loaded this can be achieved using the DOM ready event.

$(document).ready(function(){...});

When using the jQuery function a jQuery object is crated this wraps the HTML and provided it with additional functionality.

Magical Objects

$('H1') - all of the H1 elements on a a page
$("#header") - element with id header
$('.title') - elements with a class of title

Many Items

There are also several ways fo obtainging the first itme of sevveral

$('H1')[0]
$('H1:first')
$('H1').first() all get the first element

Methods

html(); - gets the inner html of an object
html('HERE'); - sets the inner html of an object
append("More content"); - add content to the end of the element
prepend("More content"); - add content to the start of the element
remove(); - removes an element

Traversing

parent()
children()
siblings()

Styling

addClass("newClass")
removeClass("newClass")
toggleclass("newClass")
hasClass("newClass")
height()
width()
css("background-color") - gets the css values
css("background-color","green") - sets the css values

I the html content has changed the jQuery variables must be refreshed by calling the jQuery function again

JQuery Events

To bind events in jQuery

Give the element an ID
Tell jQuery that something should happen to the element
Give JQuery the code ot run when the event occurs

Example HTML

<button id='hello'>Say hello</button>

$(document).ready(function()){
    $("#hello").click(function(event)){
        alert("hello");
    });
});

There are many different Events

Keyboard

focusIn - user clicks on the element
focusOut - user leaves element
keyDown
KeyUp
keyPress - up/down combination

Mouse Events

click
dblClick
hover
mousedown/ mouseup
mouseenter / mouseleave

There can be multiple handlers for a single event type

There is no guarantee about what order the events are called

Event Binding

Events can only be bound when an element exists.

This can be fixed by creating an event listener that captures all squares

Uses JQuery’s built in ON

$('#container').on("click",".square",function()){
    $this.css("background-color",generateColor());
});

This monitors the parent for events then checks the chid it check if it matches no updated events are needed for newly created elements

Event Bubbling

DOM elements are nested

When an event is triggered on an element is it is triggered on the parent clicking on a paragraph also clicks the body

This can be stopped with event.stopPropagation() and is placed inside the function.

Animation

JQuery can do simple animations

show()
hide()
fadeIn()
fadeOut()
fadeToggle()
slideUp()
slideDown()

and more

AJAX

Traditionally webpages were static. However now new data and information is needed from the server

Ajax Asynchronous JavaScript and XML is a collection of inter related web technologies that can sent and receive data form a server without a full refresh.

Data can be sent in the background the user can do other things

Data can be returned as XML

More likely to bs JSON, Javascript Object Notation

Steps

An Event occurs
Crate an XMLHttpRequest object
Send HTTPRequest
Server receives and processes that data
Server sends a response to the browser
Browser receives response using javascript
Update page content

Implementations

using the XMLHttpRequestObject which can be created using XMLHttpRequest();

The request can the be opened using xmlhttp.open("method","url","asynchronous");

Method - typically GET or POST
URL - the resource location
asynchronous true/false

To send the data to the server

xmlhttp.send(): for GET requests
xmlhttp.send(string): for POST requests

When the request is sent an onreadystatechange event is triggered

the readyState attribute holds the status of the event as an integer

request not initialized
Server connection established
Request received
Processing request
Request finished and response complete

The response can be accessed with tht following

responseText - the response data as a string
responseXML - the response data as XML

example:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","names.php?var=<DATA>",true);
xmlhttp.send();

JQuery and AJAX

$.get("names.php?var=<DATA>", function(data){
    $("#myDiv").html(data);
});

another way

$.ajax({
    url="/names.php",
    data: "{var:'<DATA>'}"
    success: updatePage();
});

url
data - json data to be passed to the server
success- A function to call when the request completes

SQL

Key Commands

Database Theory

“Keep what changes abd what stays the same separate”

Keep structure and date separate

SQL

Structures Query Language

interact with a relational database

Relational Database

Data is linked to other data through the use of, unique id and links/ references

Database Management

Databases need to be managed

Users, password access rights

Mostly beyond scope of this course

NoSQL

Store data in Key value Pairs

Similar to accusative arrays

Fast retrieval through hash functions Uses HAsh functions rather ehn

ACID Compliance

ensures transactions are robust

atomicity - each transaction is a single unit
consistency - only take the database from one valid state to another
isolation - Transactions occurring in parallel are result in the same result as transactions in series
durability - Once a transaction has occurs it will remain regardless of system failure

Database Table

Place to store data of the same type

Columns are decides on creation

Rows are data that is entered

Unlimited number of rows are available but fixed number of columns.

Identifiers

Each data row has an ID that can be used to reference the data.

Schema

A script used to create a database from scratch, used to define tables.

The script may also contain default/ demo values

Detailed Commands

Data Types

integer - whole Numbers
real - decimal numbers
text
varchar (length)- fixed length text
date
datetime - date and time
blob - binary data

Data Modifiers

Auto increment

id integer PRIMARY KEY when inserting values use NULL

Table Operations

Create Table

CREATE TABLE <table name>(
    <column1> <Datatype>,
    <column2> <Datatype>,
    <column3> <Datatype>,
    <column4> <Datatype>,
);

Delete Table

DROP TABLE table1;

Add Data

INSERT INTO table1 VALUES (value1,value2,value3,....);

Updating Records

UPDATE table1 SET column1 = value1 WHERE column2=value2;

Multiple records
UPDATE table1 SET column1 = value1,column2 = value2 WHERE column3=value3;

Deleting Records

DELETE FROM table1 WHERE <column1=value1;

Find Data

SELECT column1,column2,.. FROM table1 WHERE column1=value1;

* is a wildcard can be used in place of fields for all fields

can add order

ORDER BY column1,column2 ASC|DESC ;

Multiple Tables

Select * from table1,table2 where column1=value2 AND column1=table2.column2;

History of the Internet

Telephone and Circuit Switching

Circuit switching uses a physical connection for the duration of the connection, a dedicate line is needed for each connection.

Packet Network

The information is slit up into small chunks and then sent across many different line the line switches between many different packets from deferent sources, allows many people to use a single line for data transmission.

Internet vs World Wide Web

Email
The Word Wide Web
Online Gaming
File transfer
and more

Are all part of the internet the worldwide web is mainly webpages, things you access with a browser.

Early Web

pre 1995

Tim Berners-Lee wrote the first web browser (WorldWideWeb), web editor and a separate web server

Static pages of text with inks between them (Hypermedia)

Invented 3 technologies

Uniform Resource Locator (URL)
Hypertext Markup Language (HTML)
HyperText Transfer Protocol (HTTP)

Web vs Desktop Applications

Web advantages

Accessible form any internet enabled computer
Usable with different operating systems
Easier to roll out program updates
Fewer security issues with local storage

Web disadvantages

Need an internet connection
Data is transmitted over the internet
Issues over storage licencing use od data
Websites many not have identical appearance across browsers
Restrictions to OS resources
Possible interference form additional plugins

Web Servers

Static Websites vs Dynamic Websites

Static Websites

The user makes a page request the sever runs a script and returns the requested page to the user as fixed HTML.

Dynamic Websites

Processing occurs on the clients machine

The user makes a page request the sever runs a script and returns the requested page to the user as HTML and JavaScript.

The JavaScript then may make additional requests to the server and updates the web page accordingly.

Client Server Model

The client requests data from a server that then then responds

Peer to Peer

Devices are both requesting an serving data concurrently

Data Centers

Servers

Server’s can have many different uses

Web
Application
Database
Mail
Media
Authentication

Support Hardware

Data centers contain hardware to support and maintain the servers:

Server racks
Backup servers
Air conditioning
Backup generators
UPS (uninterruptible power supply (Batteries))

Data Duplication

In data centers data is duplicated so that if a server breaks then another server can take over and continue to provide the data

The Internet

Communication

The majority of data traves through wires and cables.

Undersea cables are the primary way for continental communication

Satellites and other communication methods may be used but this is generally rare.

Data Locality

Generally the shortest path is used to obtain data if data is in the UK requests and information typically will not leave the country. If the data is in America then a request will be mad to America. The shortest path is not guaranteed as the internet is a web many different paths exist.

Packets

Packet’s are addressed and then routed to the correct location. Packets are transmitted across many computers on the way to the destination

Routing

Routing involves checking if the destination is known to a computer and then directing the traffic in the correct location, if the location is not known then another computer higher up the chain is asked.

Mobile Web applications

Phone and tablets have many constraints

Lacks hover
Lack processing power
Lack screen sizes
Variety of screen sizes

However rather than having a dedicated web app browser apps can be made to run in small browsers on the phone and websites can be converted over.

GET and POST

GET

A get request is a more simple request with a combination of variables and values

GET /process.php?title=Central+Park&where=United+States http/1.1

this has the values in the query string of

title=Central Park
where=United States

is from <form action="get" action = "process.php">

This is also found in the url box in browsers https://www.bbc.co.uk/search?q=cs139&page=1

this has the values in the query string of

q=cs1391
page=1

The query sting is limited to 2048 characters

Typically used to request specific data from the server

Response

Responds with 3 sections

Header - status fo the request
Body - (optional) response to the request

Response codes

2## codes for successful response
3## redirection response
4## codes for client errors e.g bad request
5## codes for server errors

Common codes

200 Ok
301 Moved Permanently
304 Not Modified
307 Temporary redirect
400 Bad request
401 Unauthorized
404 Not found
414 Request URI too long
500 InternalServer Error

POST

This request is encoded within the header for the request the query string can can’t be seen within the URL browser

Has a longer Data allowance

Typically used to send data to the server forms etc.

Web Protocols

Protocols

A communication Standard so that computers can transfer data and instructions accurately.

Network Layers

There are 4 (in this course) Network layers each have different protocols and are responsible for parts of data transmission.

Application Layer

Many protocols

HTTP Hypertext Transfer Protocol used for web communication
FTP File Transfer Protocol used for transferring files
POP/IMAP/SMTP Email protocols for transferring and storing email
DNS Domain name service for resolving domain names to IP addresses

HTTP

An Application Protocol for hypermedia information

standard response request

Development by Internet Engineering Task Force (IETF) and World Wide Web Consortium (W3C)

Transport Layer

Ensures Transmissions arrive in order an without error

Internet Layer

Establishes connection, routing and addressing

IPV4
IPV6 An IP address is needed by every computer on the internet

IPV4

Uses 4x8-bit numbers so 4,294,967,296 addresses they are now gone.

Reserved Addresses

127.0.0.1 - LocalHost (the computer itself)

192.168.*.* - Private Networks

10.0.*.* - Private Networks

There are other reserved addresses

NAT Network Address Translation

Used in part to overcome the shortage of IPV4 addresses

A device connects to a router
The router opens a port and
The router connects to the external resource
Data is passed through the router to the device

The port number is added to the end of an Ip address e.g 213.31.218.101:5001 is port 5001 at address 213.31.218.101

A single IP address is need for the router all of the internal computers use one of the reserved addresses for private networks

IPV6

Uses 8x16-bit numbers 340 undecillion numbers (a lot)

Link Layer

Responsible for transmission of raw bits *MAC

Domain Name

DNS Domain Name system acts an a contact list for servers

Translates Human readable Name to IP addresses

Hierarchical distributed naming system

The Domain Name is Linked to an IP address, e.g www.google.com would be given an ip address that can be used to communicate with the servers

can be broken down

Server1. - Fourth level
www. - Third-Level
FunCode. - Second Level
com - Top-Level Domain (TLD)

Server1.www.FunCode.com

A tree of domain Names are created.

Root Zone (TLD) is controlled by the Internet Assigned Numbers Authority (IANA)

Different registrars assign domain names beneath this

Registrars check with interNIC for the names

Domain names are case insensitive

Resolving A Domain Name

Default Base

When connecting to a network the computer is given a DNS server (root)

When Resolving a domain name

The computer asks the root server
The root server provides the top level domain
The top level domain which provides a sub domain server
Repeat until the address is found

Caching

The previous steps are extensive so DNS caching is used.

The computer points to a caching server
The caching server checks if it has the address in memory
- If it does return the memory
- If not perform the other steps
Any requests are saved to memory for next time.

DNS records have a TTL (time to live) which dictates how ling they are valid for

URL

http://www.FunCode.com/index.php?page=17#article

ftp://example.com/abc.txt -> sends an FTP request on port 21 http://example.com/abc.txt -> sends an HTTP request on port 80

No guarantee of a response

Path

A request requests a file the path specifies the file

/ is the root folder for the webserver

if a file is not specified one is usually selected usually index.html

path is case sensitive

Query String :

SEE GET

Fragment

Requests a portion of a page.

Browser will usually jump to the location in the page

Web Browsers, servers and state

Web Browsers

Web browsers interprets data into one in a recognized form

Converting HTML page and rendering as a readable web page

Each browser behaved differently and loosely conform to standards

Each page makes multiple requests

Local caching can reduce load times

Most offer additional features, Search engine auto complete etc…

Web Servers

Typically powerful computer to respond to HTTP requests.

Often running NGINX or Apache

Also contains

Operating System (Linux, Windows….)
Database Software (MySQL , MongoDB)
Scripting Language (PHP, python..)

State

HTTP is a state-less protocol , in a local process the computer only knowns about current memory and instructions

The Server treats every request as a completely new request

Many servers can be responding to many users making it hard to store data.

Rest is used to transfer the current state of the communication between the client and the server. Most common operations are GET and POST

Solutions

there are 3 solutions to store state across requests

Query Strings

limited to 2048 on a get Request A simple store of variables and names

Typically used for requesting Data from a server

Can alow for more dynamic URLS by having a more unique query string that can be more easily interpreted

Cookies

Data unique to the client is created by the server

The cookie is sent to the client when the first request is made

The client includes the cookie in subsequent requests

Cookies can expire - Server sets this

Sessions

Store state like cookies but just for the time the user is active with the site

Security

Hashing Algorithms

md5 - easily calculated but clashes have been found
sha1 - (160 bits) easily calculated
Bcrypt - current best recommendation

Passwords are still susceptible to dictionary attacks

Passwords should be unique when stored

Salt

a salt is a random value for each user and is included when checking the password. Can be stored alongside the password in the database.

11:11:23 + “Password” => asdfkjh67fasf69d8f6aadf4w8…..
22:21:23 + “Password” => flkafj948rj9fjsd9cnyrur94jrf….

harder to crack many passwords only needed for SHA1 php password_hash adds salt automatically

Redirect

When submitting a from the page should redirect to a confirmation page to prevent re entry , and prevent re-submit through refreshing the page. causing a double submit.

Query Strings

Query strings can be modified by the user and should be checked for validity nothing should be assumed

known as sanitizing / validating input

HTTPS

Https is a protocol for secure communication over a network, built on the SSL/TLS protocol.

the HTTP is encrypted but is not changed.

HTTPS should be used for all sensitive data.

Now all services opt for HTTPS and HTTP is rarely used.

Operation

The client sends a list specifications to the server
- what SSL/TLS version it is running
- What ciphersuits it wants to use
- What compression methods it wants to use
The server selects the highest SSL/TLS version and agrees on ciphersuits and compression
The server sends a certificate to the client which must
- be trusted by the client explicitly
- be signed by a party the client trusts
The server has also sends an asymmetric key continued with the certificate
The client and server setup symmetric key encryption
All communication is then encrypted
The server then verifies the MAC
Public Key

These are the keys that are used to encrypt data asymmetrically. They are distributed with a certificate signed by a certificate authority.

Certificate Authority

These are 3rd parties and the public keys are installed with OS/ browser establishing trust and sign certificates to verify identity.

Signatures can be compared with the public key to ensure identity.

Issuing a certificate is done when a domain registrant can prove they own the domain

Drawbacks

Encryption algorithms can be computationally intensive

Dedicated and faster hardware generally now makes this negligible

Man in the Middle

a machine sits in the middle and read the messages

even if keys are transmitted fake keys can be made can can be decrypted in the middle

By signing certificated fake keys cannot be made

SQL Injection

Transmitting SQL strings to modify the database request

Consider the defaut request "SELECT * FROM users WHERE name ='"+UserName+"';"

By adding ``or ‘1’=1` to a username entry box the query becomes

"SELECT * FROM users WHERE name = '' or '1'=1;"

this would return all users from the database

Other issues could be destroying databases or modifying entries.

Prevention

The use of parameterized statements that has placeholder values where the data can be added later

$stmt= $db->prepare("Select bar FORM foo WHERE id=;id");
$stmt->bindValue(";id",1,SQLITE3_INTEGER);
$result = $stmt-> execute();

This treats all data as data and never as instructions.

Alternatively addslashes() can be used to escape any characters but is not a preferred method

Other additional ensures can be database access management such as limits on deletion

Session Sniffing

An attacker observers communication between a server and a victim , Cookies and session data could be reconstructed which could then be used to impersonate the victim.

Session Fixation

An attacker obtains a session ID form the server The attacker then forces the session id of the victim to be identical to theirs The victim logs on, the attacker can then use their session id

XSS

Cross Site scripting, Injects client script into webpages

Accounts for 84% of all security Vulnerabilities documents by Symantec in 2007

Non-Persistent data is provided by a client and is used by a server without proper sanitization. The content is uploaded back to the page could be provided by clicking in a link like a GET request

consider

$name =$_GET['name'];
echo "Hi $name!";

the user gould be given a link with HTTP / javascript as name the javascript would then be run by the browser.

this should be avoided by filtering

$name= filter_input(INPUT_GET,'name',FILTER_SANITIZE_STRING);

and output should be escaped

$name= filter_input(INPUT_GET,'name',FILTER_SANITIZE_STRING);
echo 'Hi '.htmlspecialchars($name,ENT_COMPAT,'UTF-8')

The recommendation is to store the data in as raw form as possible and only convert when it is time to output it.

Persistent-XSS

When data is stored to a database then redisplayed later for a user, e.g a comment.

All data should be escaped.

Directory traversal

A user many insert a path outside the web

Restrict access to only some directories (whitelisting)

Convert paths to absolute and ensure they are in the correct directory

PHP-CGI Vulnerabilities

PHP-CGI had the option to server the php source

another option allows the setting of variables this could allow variable and variable manipulation this should be disable d in sever settings

Other Configuration Advice

allow_url_fopen - indicates wether remote files can be downloaded should be off

allow_url_include - indicated wether scripts can include/ require remote files turn off if not needed

XML and JSON

XML

Extensible MArkup language Similar to HTML

Human and machine readable

emphasis’s simplicity generality and usability

Textual data format

RSS, Atom SOAP are all XML formatted

An XML Element is everything from the start tag to the end tag

XML element is everything form the start tot he end tag

No standard for names aside form the software creating and interpreting the data

Structure - Defining appropriate tag names
Content - The data contained within the structure

Element may contain Other Elements test attributes

an Example Food Menu:

<menu>
    <food>
        <name> Pizza <name>
        <price currency="£"> 50.00 </price>
    </food>
    <food>
        <name> Pasta <name>
        <price currency="£"> 25.00 </price>
    </food>
    <drink>
        <name> Red Wine <name>
        <price currency="£"> 20.00 <price>
        <volume unit="cl"> 200 </volume>
    </drink>
</menu>

Valid Names

Can contain Letter, Numbers, and other characters Names cannot
Start with a number or punctuation
Start with the letters XML (case insensitive)
Cannot contain spaces

Attributes

Attributes provide additional information about the data

They may contain metadata , such as software used to create the XML

Can be used to help parse the data

Well Formed

XML is well formed if ti meets the following requirements

The document contains only unicode characters
None of the special characters appear (e.g < and &)
Begin, end and empty tags are correctly nested
Element tags are case-sensitive
A single root element contains all the other elements

JSON

Javascript Object Notation

XML can be too clunky needed creating and parsing

JSON is smaller and can more easily be converted

JSON is less human readable than XML

Data amy or may not exit for example if there are no ratings for a product the rating data may be empty under some structures an null under others is is important to check that the variables exist if this is the case.

Data Types

Number
String
Boolean
Array
Object (Collection of Key Value Pairs)
null (empty)

Syntax

Data is in Key,value pairs
Data is comma seperated
{ } hold objects
[ ] hold arrays
Whitespace is not relevant can make it more readable

Example

{
    "Food" : [
        {
            "Name" : "Pizza",
            "Price" : 50.00
        },
        {
            "Name" : "Pasta",
            "Price" : 25.00
        }
    ]
    ,
    "Drink" : [        
        {
            "Name" : "Red Wine",
            "Price" : 20.00,
            "volume" : 200
        }
    ]
}

conversion

JSON.parse() Create an object form a json string
JSON.stringify() Create a json string from an object

Usability

Usability is Money

Users will have a poor experience and they won’t use the site again

Should consider usability for all users not just the developer

Rules of Interaction Design

Understand the Computer - Limitations, capacities tools and platforms
Understand People - Phycology, social aspects and human error
Understand Human Error - Human Error is common

An unclear interface is often blamed on user error when it is actually designer error

User centered design

Put the user first
Keep the user in the centre
Remember the user at the end

Software Development Lifecycle

Requirements capture
Design
implementation
Verification
Maintenance

Requirements Capture

Elicitation

work with the stakeholder Interviews and Questionnaires - ask users Ethnography - observe users Scenarios & stories - real life examples

Types of Requirements

Functional
- A service provided by the system
- What it should not do
Non Functional
- Constrains on the functions
- can affect the whole system

Specification

What the system does not how it does it

Describe using:

Natural Language - easy for anyone
Structured Language - pseudoscope
graphical notation - paper prototypes
- Cheap and easy to create
- easy to edit
Design language - Cant be used by everyone
Mathematical specification - very precise

Usability

Learn-ability - How easy it to accomplish basic tasks on first encounter
Efficiency - Once users have performed the design, how quicly can they perform tasks?
Memorability - When users return to the interface how easily can they use it again
Errors - How many, What are they , Are they recoverable
Satisfaction - How pleasant is the design

Visibility

How easy is it for the user to recognize and use a control function. A more visible function is easier to use. Position of the controls and what they do is also important

Affordance

Properties of an object, what can be done with it.

When you first see something how do you know what to do with it?

Text
Icons
Instructions

Don’t make non-working buttons or things that don’t look like buttons

Constraints

Limiting the cations the user can take at any one time

Common is deactivating certain menu options by shading and restricting use

Physical - DVDs , USB, Keyboard : can only be pressed
Logical - The users understanding of how the world works and allows the user to deduce what happens next
Cultural - Cultural conventions: A red light means stop / warning almost anywhere it is shown in the western world but in China celebrates new year and brings good luck. This is a result of culture and fairly arbitrary not any form of logical process.

Feedback

Gives the user a response to an action and what has been accomplished could be

Visual - hourGlass , new page load
Auditory - Beep on mistake
Tactile - Keyboard , vibration
Verbal - Warnings or welcome messages

Mapping

Relationship between the controls and their effect

Good - Steering Wheels, Slider Bars

Poor - Taps: which side , Light switch: Which light?

Consistency

Similar operations for similar tasks

Cut and pase in the same menu File Menu top left

Similar both within systems and cross systems / applications (Xbox controller and PlayStation are similar)

Usability Heuristics

Visibility of System Status - Keep users informed of status by providing feedback e.g 1/10
Match Between system and Real World- Use user’s language rather than systems terms
User Control and Freedom = Provide “escape routes” for users (undo)
Consistency and Standards - Avoid making users wonder if deferent terms mean the same thing (apply / save)
Error prevention - Prevent users form making errors (Do you want to save)
Recognition rather then recall - Make objects ,actions and objects visible
Flexibility and Efficiency of use - Provide accelerators that allow experts to do things faster
Aesthetic and Minimalist Design - Avoid irrelevant functions or information
Help users recognize, diagnose and recover from error - Use Plain language to describe the error. Be informative and non-technical
Help and Documentation - Provide information that is easily searched and provides solutions

Accessibility and the Web

Inclusive practice of making websites usable for all abilities

Required by Equality Act 2010

Meet level AA of the web content Accessibility Guidelines (WCAG 2.1)
Otherwise: you could be sued for discrimination

The site should

Programed using semantically meaningful HTML
Has text equivalents for images
Meaningful link names

Needs

Visual - Blindness, poor vision , colour Blindness Motor - Fine motor control , tremors, slowness Auditory - Deafness Seizures - Epilepsy form flashing lights Cognitive - Learning difficulties (dyslexia,dyscalculia) memory problems

Examples

Making images/ text enlargeable with functionality or browser CSS
Underline Links - for colour blind people
Make clickable areas large - Helps users with poor motor control

Assistive Technologies

Screen Reading Software - Reads to the user with synthesized speech
Braille Terminals - Outputs text as Braille
Screen Magnification
Speech Recognition
Large TrackBalls

WCAG

Web content accessibility Guidelines (WCAG) are published by the Web Accessibility initiative WCAG 2.0 published in 2008 and became an ISO standard in 2012 WCAG 2.1 published in 2018

Principles Behind the Quidlines

Perceivable - Information should pe presented to users in ways they can perceive
Operable - User interface components and navigation must be operable
Understandable - Information and the operation of user interface must be understandable
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Evaluation and Testing

Evaluation

Gather Data about the usability of the design
- what the user does
- The characteristics of the user
- The environment and the context where the evaluation will take place
- The nature of the artefact being examined

Types of evaluation

Formative Evaluation - Evaluation of an existing product, Predictive evaluation
Summative Evaluation - Evaluation at the completion of a product

Evaluation should be done regularly and after each step in the product design development and testing.

Analytical Evaluation

Include Keystroke Model Measure

k (Key-stroking)
P (Pointing)
H (Homing)
D (Drawing)
M (Mental timing of the operator)
R (Response time fo the system)

Observational Evaluation

Observer users interacting with the system
Users complete a et of predetermined tasks
Users can be asked to “Think aloud” - give description of what they are doing and thinking about
Their thoughts are analysed later
Assess the extent of System functionality
Assess the effect of the interface on the user
Identify specific problems

Usability Testing

Introduce a list of tasks
Watch Quietly
Record behavior (take notes, recorded)

Measuring Usability

Ratio of successes to failures
Time to compete a task
Number of errors made
Number fo times the user expresses frustration

Web Architectures and Performance

Three Tier Architecture

Web Tier
- Handles requests
- Serves static assets
- (apache)
Application tier
- Application specific logic
- (PHP C++ C## …)
Database Tier
- File storage
- (SQL MongoDB …)

Scaling

Vertical Scaling

An older way of scaling or for small companies

If the older server is too small

Buy a bigger server

Fairly practical * can fit 3TB of RAM in a 1u server * a Standard rack is 42u

Advantages

Can buy a small system now then expand later
Minimizes immediate capital expenditure

Disadvantages

Whole machine needs to be replaced to scale up
Replacing the machine leads to downtime
Harder to scale down

Horizontal Scaling

Separate the database to a separate computer

Multiple servers can be setup to communicate with the single database computer

Load cam be spread across the servers

Any requests are sorted by a Load Balancer to ensure that all server are equally loaded

Load balancing algorithms

Round Robin - requests sent to each server in turn
Weighted round robin - Request sent to each server in turn but also determined by a weighting for each server
Least active sessions - requests are sent to the most lightly loaded server
Advantages
The individual computers are cheaper
Built in redundancy if a server breaks the others can continue
Easily add more servers

Disadvantages

Higher upfront costs
More complex systems, More Maintenance needed

Cloud Based Infrastructure

Cloud computing can allow users to rent servers

Servers can be leased by the hour

Software can monitor changes and boot up / shutdown servers to scale with demand

Caches

Results of heavy computation can be cached

Calculations does nto need to be run again

Message Queues

Applications hav long running tasks

Warning can take a long time

Applications can drop messages into the queue which are then processed by software which listen’s to the queue

Measuring Performance

There are different Metrics

End to End response time
- Time takes form issuing a request to receiving a response
- measures the application as the user sees it
- Needs to be done for each request type
- use JMeter, Apache BEnchmark , siege
Site Response time
- Time taken for the server to process a request
Request Throughput
- number of requests processed by the server per second
Test for concurrent users
- A test on user capacity

A system under load will perform differently to an idle system

When specifying performance percentiles are used as targets.

"95% of all requests should be processed in less than 5 seconds.
The maximum acceptable processing time is 60 seconds"

Users expect a site ro be responsive.

A poor experience will cause page abandonment.

Throughput

How many responses a system can service per unit time

Range of requests

Simulate possible user actions

Each request represents a different proportion of application actions

Designing For Mobile

Mobile Sites

Large amount of mobile web traffic over the past few years

Different interface

smaller screens
Touch Based Interaction

Two techniques

Responsive Web design
Separate mobile platforms

Responsive Web Design

using an advanced css feature is media

CAn be used to access the device

Height/ width of Window
Height/ width of device
Orientation - landscape / portrait
Resolution

media can be used

In the CSS files
To add different css files in the head element

Adding to the CSS file example

@media only screen and (max-device-width: 480px){
    div#Wrapper {
        width: 400px
    }
    #navigation {
        float: none;
        width: auto;
    }
}

These are applied only to screens smaller than 480px wide

These also override any other styles specified elsewhere

Easier then rewriting pages

Separate Mobile Layout

Previously common not so anymore

Redirects can be done based on the browsers user agent based in the header

can access the user agent against $_SERVER["HTTP_USER_AGENT"]

however needs updating as new devices come out

Pros
- Easy to create fixed views
- Hard to dynamically cater to all screen sizes
Cons
- Many not work if new devices are created
- Can be a lot of work to double the number of pages
- Two sets of pages need updating

Best?

Each has its merits

Some content can work best with different designs

Being A Web Developer

Development

Testing checklist

Functional Testing
- Test all pages for errors
- Test all forms
  - Check the results
  - Check that validation is working correctly
Usability Testing
- Is navigation easy
- Is the content correct
- Links to help docs
Compatibility Testing
- Across browsers
  - Chrome
  - Firefox
  - Safari
  - …
- Mobile Devices
- What happens on unsupported browsers?
Performance Testing
- How fast is the application?
- Can the site be optimized?
  - Caching data/ assets
  - More Efficient queries
Security Testing
- SQL , XSS injection attacks
- Update policy
- Software stack, correct settings, updated software etc…

Test Driven Development

Writing code to satisfy tests

Should know what your code need to do before it is written

Write the test before writing the code

Red
- Write a failing test, should stat what needs to happen
Green
- Code Meeds the test
Refactor
- Make the code safe, secure and beautiful

Run Test frequently

Tests can be run automatically on submission to the central repository

Modern Web

Not always written in PHP

Facebook use a PHP -> C++ compiler for performance reasons

PHP Frameworks can do the heavy lifting

Other language

Ruby on rails
Scala
Play Framework

Many Technologies are combined to build a web application

Ruby

General purpose
OOP and functional styles are supported
Large software library
Rails

Collection of libraries that work together
Active Record - Object relational mapping for database entities
ActiveResource - For web services
ActionMailer - Manages Email Functionality
ActionPack - Manages mapping URLs to correct applications

Front end

some tips

Learn photoshop for simple mockups
Learn ins/outs of Javascript
Find out about browser inconsistencies

Frameworks

Javascript
- Angular.js
- React.js
- Vue.js
Other
- Django (Python)
- Flask (Python)

CSS

Css can be difficult

Sass extends css syntax to offer nested rules, named variables , mixins

This then compiles down to css

Back End

tips

Looks at you language / framework handles background jobs
Look at cloud based storage
Ensure you can use web services
Work out how to do proper performance testing
Learn about the software stack

Setting up a Real Website

Deploying Applications

Registering a Domain Name

Make it memorable
Shorter is better
Most registrars charge £10 - £12 per year

Server for Applications

use a small computer you own
Use a shard host with the domain registrar of Platform as a service
- Advantages
  - Server is preconfigured
  - Simple to use
- Disadvantages
  - Large cost as scale
  - Limited control over software stack
  - May not be able to run certain messages e.g Message Queues
Use a cloud based virtual server
- Advantages
  - Can have fill control over the software stack
  - Cheap to run
- Disadvantages
  - Security can be your problem
  - Limited Hardware
Buy a server and find a data centre
- Advantages
  - Free Hardware choice
  - Full software choice
- Disadvantages
  - Security
  - Cost
Build you own data centre
- Disadvantages
  - Expensive

Software Stack Choices

Database options include

mySQL
PostgreSQL

Many different versions Don’t use SQLite3

Webserver Apache / nginx are both good choices

Configuring the System

After the OS is installed the software stack can be installed form the source or with a package manager

Install apache apt-get install apache2
Setup the virtual host file in /etc/apache2/sites-available/example.com
Create the directories /srv/www/example.com/public_html and logs
Enable the sire a2ensite example.com
Reload apache service apache reload

Installing mysql

apt-get install mysql-server
Secure the basic installation mysql_secure_installation
Start a database session mysql -u root -p
Create a user for the application
Create a database for you application
Grant privileges for your application

Installing PHP

apt-get install php8.0 php8.0-mysql
restart apache service apache2 reload

Additional Software

Imagemagik - Manipulating uploaded images
sendmail - Acts as a mail server
logrotate - To rotate the log files and delete old ones

Updating the DNS

Got to the registrar and register the IP address with the Domain Name
Add a record for www. which points to the server
Save changes
It can take some time for any changes to propagate

Securing the Server

As a minimum always

Install fail2ban blocks ssh users form an IP for failed logins
Configure the firewall to only accept SSH and HTTP(s) traffic
Modify SSH to only accept key based logins from non designated IPs

Maintenance

Keep an eye on the server
Need to install monitoring Software to alert you to issues
Check logs on a daily basis
- Setup an email script
Monitor usage to ensure everyone can use the site

Table of Contents

HTML

Introduction

HTML Nesting Structure

Parent

Child

Ancestor

Descendant

Sibling

Document Object Model

Basic Syntax

Empty Tags

HTML Nesting

Character Entities

Block vs Inline

Validation

Common Tags

Doctypes (R)

HTML (R)

Head (R)

Title

Meta / Text encoding

Body (R)

Headings

A (Links)

Img (Image)

Strong

P

Div (Division)

Abbr (Abbreviation)

Br break

Code

Em (emphasis)

Mark

Small

Span

Lists

Tables

Modifying tables

table header

table footer

caption

rowspan

column span

HTML Forms

Form Elements

Input

Other Attributes

Select

Accessibility

CSS

Introduction

Placement of Styles

Inside Respective Tags

In a Style Tag

In a Separate File

Types of Stylesheet

Syntax

Box Model

Positioning

Selectors

Using the Tag Name

Using a Class Selector

Using an Id

Attribute Selectors

Pseudo Selectors

Contextual Selectors

Properties

Table Styling

Table Borders

Text Alignment

Styling

Python

Introduction

Basic

Variables

Data types

Strings

Casting

Operators