Section 1
Preview this deck
How do you use id selectors
Front
| 5 | 2 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
15
All-time users
17
Favorites
0
Last updated
5 years ago
Date created
Mar 1, 2020
Cards (244)
Section 1
(50 cards)
How do you use id selectors
#id {}
How do you format text within HTML
What is the <title> tag
specifies title for the document
What is the <br> tag
specifies a line break. Note this is an empty tag so doesn't need to be closed
What is the <textarea> tag
defines a mutli-line input field e.g. a comment field
What is the <nav> element
used to encapsulate large navigation blocks
What are the rules for XHTML attributes
What is the <pre> tag
used for printing text however unlike a <p> tag it retains formatting i.e. new lines and spaces
What is the <h1> tag
element that defines a heading, goes from h1 to h6 in size
How does inheriting styles work
All HTML elements inherit the properties of elements above them in the hierarchy e.g. <h1> elements will all inherit the <body> styling
What are the padding properties for CSS
It has the exact same properties as margin except with padding instead of margin padding also cannot have a length set to auto
How do you make multiple selections in CSS
separate each selection with a comma
what is the <p> tag
defines a paragraph, all text within the element is printed on 1 line
What is the <datalist> element
specifies a list of pre-defined options for an <input> element different to select because the user types in an option but can also choose directly from the drop down. If they start typing they will get suggestions dropping down
What are the margin properties for CSS
margin-top/right/bottom/left the value can be set to auto, inherit, a specific length e.g. 10px or a % which is a % of the width of the containing element
How do you define a table in HTML
the <table> tag defines the whole element <tr> defines table rows within each row define <td> elements which are the table data
What are inline elements, give an example
- Can begin within a line - doesn't start a new line It's width only extends as far as it is defined by its tag - e.g. <span>
How do you link a stylesheet to an HTML document
How do you use class selectors
.classname, you can put the element type before the classname e.g. p.class which will style all of that element type with that class
What is the <output> element
represents the results of a calculation
How do you specify colours in CSS
- colour names - RGB values using the formula rbg(red, green, blue), values go from 0 to 255 - HEX values using #RRGGBB where values are between 00 and FF
What is the <head> element
Holds the header elements of a section or page
What are block level elements, give an example
- Begin a new line - Extend to the full width of its parent element - e.g. <div>
How do you specify style directly from HTML
you can use a <style> tag and write CSS inside the element Alternatively you can set it using attributes within the given HTML element e.g. style = "property:value;"
What are the rules for XHTML elements
What is the <head> tag
contains meta information information about the document
What are the mandatory elements within XHTML
<!DOCTYPE> <html> <head> <title> <body>
What is the <section element
a generic section of a document, groups content by themes like sections in a document
Explain CSS syntax
What is the <aside> element
similar to a sidebar, could be used to hold adds
What is a <div> tag
Used as a container that groups related items together
what is special about the <img> tag
it is an empty tag so doesn't need to be closed
How do you create unordered and ordered lists in HTML
<ul> defines an unordered list <ol> defines an ordered list Each element within the list has the <li> tag
List the main input types
text, password, reset, radio, checkbox, color, email, date
What is XHTML
It is a stricter version of HTML, it is HTML redesigned as XML, a markup language used to store, send and receive data
What is the <footer> element
contains the footer elemtents, e.g. author, copyright, contact info
What is a select element in a form
It is a drop-down list, you specify options within the drop down using the <option> tag
What information is held within the <meta> tag in the <head> element
What is the xmlns attribute in XHTML
it's an attribute of the html tag it is mandatory and specifies the xml namespace - this specifies a simple method for qualifying element and attribute names used in XML and associated them with namespaces identified by URL references
What is the <canvas> element
it is used to draw graphics via javascript
what is the <body> tag
defines the document body, the visible content
What is the <html> tag
the tag that defines the whole document
What is the <article> element
a self-contained item of content, such as a blog post
What are the CSS properties for borders
border-style specifies what kind of border to display border-width specifies the width of the four borders border-color sets the colour of the four borders border radius can be used to add rounded borders to an element border-image
What are the CSS properties that define the background
background-color background-image background-repeat background-position
What is an HTML attribute and how do you use them
provide additional information about an element specified in the start tag in name/value pairs like name="value"
What is the <time> element
represents dates and time within javascript
How do you use the CSS border-radius property
How do you use an element selector in CSS
element-name {styling}
How do you use HTML forms
The whole form is within the <form> element <input> elements sit within the form element the form should have a <input type="submit"> element which is a button which submits the form when the user completes it
Section 2
(50 cards)
Explain how you would use a CSS counter
What are the properties for counters
How do you specify the font in CSS
using the font-family property when specifying the value you start with the font you want and then end with a generic family.
How do you define an array in PHP
What is the resize property
defines whether or not an element should be resizable by the user
How do you make images adjust to fit the size of the screen
How do you iterate through an array in PHP
What are the CSS properties for formatting text
What is the clear property and what value does it take
Used to control the behaviour of floating elements
What is the syntax of pseudoclasses in CSS
What is the word-break property
What is a CSS pseudoclass
used to define a special state of an element i.e. when a user mouses over something
What is the filter property in CSS
adds visual effects such as blur or saturation to an element
How do you left/right align and object
using the float property or using position absolute
What values can the CSS position property take
What are the values of the text-overflow property
How do you centre text inside an element
text-align:centre
What are the CSS list properties
list-style-type specifies the list item markers list-style-image sets an image as the list item marker
What must PHP statements lie between
<?php and ?> elements
How do you use transform methods in CSS
transform: method()
What is the object-fit property in CSS and what values can it take
Specifies how an image or video should be resized to fit its container
How do you do 3-D transformations
using the rotateX and rotateY properties that rotate the element around the specified axis
What is the <a> HTML element
it specifies a link
What a CSS transition and how do you use them
Allows you to change property values smoothly from 1 value to another. This doesn't carry out the change, you would specify the change using pseudoclasses but this specifies how any changes will happen to said class/element Syntax: transition: property time(s);
What values does the ob pacity property take in CSS
0.0-1.0
How do you create a zebra striped table in CSS
How does PHP run on the web
1. User accesses a website (e.g. www.linkedin.com) 2. Browser sends a message over the internet to the computer named www.linkedin.com 3. Apache, a program running on www.linkedin.com, gets the message and asks the PHP interpreter "what does /index.php look like?" 4. The PHP interpreter reads the file from it's disk drive/file system 5. The PHP interpreter runs the commands in the index.php file possibly exchanging data with a database program such as MySQL 6. The PHP interpreter takes the index.php program outputs and sends it back to Apache as the answer Apache sends the page contents it got from the PHP interpreter back to the computer over the internet. The users browser then displays the page on the screen following the HTML tags in the page.
What are the benefits of PHP
- runs on various platforms - is compatible with almost all servers used today - Supports a wide range of databases - Free - Easy to learn and runs efficiently
What is the border collapse property in CSS
used in tables to combine all overlapping borders
How do you add icons to your webpage
link an online icon style sheet such as google icons, then add classes to HTML elements and this will style them with the icons
How do you define the time it takes for transformations to take place
use the transition property
What are the values of the overflow property
What are the CSS properties for animations
animation-name animation-duration animation-iteration-count (how many times to run the animation) animation-delay (which specifies the delay at the start of the animation)
What are the outline properties in CSS
outline-style outline-color outline-width outline-offset, adds space between an outline and the margin of an element
How do you specify a transition property for multiple properties
What is an outline in CSS
It is a line drawn around the element outside the margin. It doesn't effect the elements dimensions
What are the values for the transition timing function
What is the float property and what values can it take
It can be used to wrap text around images
How do you centre images and block elements
margin:auto
What CSS properties can be used to format links
What is the padding property for tables in CSS
specifies the space between the cell content and its borders
what is the box-shadow property
applies shadow to elements
What are the CSS properties for styling fonts
font-style e.g. normal, italic font-size, 1em is equal to the current fontsize, you can specify absolute sizes in px font-weight specifies how thick/thin characters should be font-variant specifies whether or not text should be displayed all in caps or not
Explain the CSS display property
It can take the values: none block inline inline-block (this makes the elements like inline elements but they can have a width and height)
Explain the CSS box model
What are the basic 2D translation methods in CSS
translate() - moves an element, 2 params, lateral then vertical movement rotate() - takes deg as a param e.g. 20deg scale() - takes 2 values, first the scale to increase width by and then height by skew() - takes deg as a param e.g. 20deg
What are the CSS properties for the size of an element
height, width and maximum width the values can be set to auto, length and %
What is the CSS matrix transform method
Combines all 2D tranform methods in to one matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) Simply insert the values for each method separated by commas in that order
How do you use CSS animations
you define the animation within an @keyframes rule and then apply it to elements using the animation-name: animation; property
What are CSS counters
they are variables maintained by CSS that can be incremented
Section 3
(50 cards)
How do you insert values into an SQL table
What are the benefits of POST over GET
Much less visible because data isn't transferred in the URL The data is not logged Users cannot inavertently share sensitive data in a URL
How do you define a database in PHP
You specify the hostname, username, password and database name in that order
what happens if you set a cookie to "HTTP Only"
Ensures that a cookie is only available via HTTP request Prevents the cookie from being accessed within JavaScript and reduces the potential for cross-set scripting attacks
What is the stripslashes() PHP function
removes backslashes
What does it mean if you set a cookie as "secure"
only send cookies to the server if the request is using HTTPS
What is the HTML required attribute
if you add the attribute to an input element it will be mandatory before submitting a form
What do we need statefulness for on a website
- session management e.g. shopping carts - User identification e.g. login - Analytics e.g. footprints
How do you define the submit button and what do the attributes do
you set the input type as submit the value will define what is shown on the button the name will define how you access the button from the action script
what is the "path" that is stored in a cookie
specific paths on the server to which the cookie can be sent
What is the trim() PHP function
removes whitespace and other predefined characters from both sides of a string
What is the action in an HTML form
it is the location of the script that will process the form.
What makes up a MySQL table
Fields: columns, each describing an aspect of the data Records: each row is a record and has a single entry for each field Data types: as in a programming language each piece of data has a specific type
What is the syntax for the setcookie command in PHP
only the first param is required, others are optional
How do you create a table in MySQL
CREATE TABLE "tablename" (fieldname DATATYPE(x), fieldname DATATYPE(x));
What are the MySQL data types
What should you know about the expiration date that is stored in a cookie
The expiring time is the number of seconds since 01/01/1970 00:00 If not specified the cookie expires when the browser is closed
How do you setup checkboxes in an HTML form
each input is given a name but no value, this is because either the input is set or it isn't So you check it in the script using isset(), the value is irrelevant
How do you delete data from a MySQL table
How do you handle database errors in PHP
using mysqli_connect_errno
How do you query a database using PHP
where $db is the database variable you've already created define the query as a string taking the exact same format as MySQL queries Then submit the query using $db->query($query)
What is meant by the fact that HTTP is a stateless protocol
Once the server has supplied the client with a web page, all connection between them is forgotten
How do you retrieve data from a MySQL table using PHP
What is the size of a cookie
4kb
What are the attributes of GET messages
- Are cached - Are kept in the browser history - Can be bookmarked - Limited by any restriction on URL size
How are POST messages sent
using the HTTP headers
How do you setup a form to show required values and errors if an incorrect value is entered
In the picture is an example. The $error variable is set by a PHP if an incorrect value is send to it
What is the method for HTML forms
either POST or GET, these are methods of sending the data to the script defined by the action attribute
How can you prevent cookies
A client can inform a server that it does not want tracking by setting the Do Not Tracker header in the HTTP request, this is visible to the server as HTTP_DNT
How do delete a cookie
you set its expiring time to a negative value so it "expires"
What is the NOW() function in mySQL
it inserts the current and or time YYYY-MM-DD HH-MM-SS
How do you setup a set of radio buttons
You give each button the same name="" value and a different value="" This way whatever option they pick will have the same name in the PHP script but different values
What is the htmlspecialchars() function in PHP
This avoids the browser displaying HTML tags and other HTML entities that will alter the output of the webpage, this prevents a user entering HTML into a form and then altering what is displayed
How do you use a JS script to validate a form
in the form add an attribute onsubmite="return validateForm()" this would reference a JS script/function you've written called validateForm()
What are the characteristics of POST messages
- Cannot be cached - Are not kept in the browser history - Cannot be bookmarked - Can transfer unlimited data
How do you start a PHP session
session_start()
What properties should a cookies value have
should be a unique and unforgettable number, it should be meaningful to the server and meaningless to the client
What is contained within a cookie
name, value, expiration date/time, domain, path
What is the syntax for querying MySQL tables
conditions are written as: WHERE column LIKE value
What is the syntax for the LIKE operator
a % sign represents any number of characters (inc 0) an _ represents a single character You place these before or after the value you're querying to make your search broader e.g. Where CustomerName Like "a%" represents any name beginning with a
What is the syntax for the Update method in MySQL
What are the advantages of GET over POST
Useful to bookmark pages Caching- faster response
How do you specify the order a MySQL table is displayed in
at the end of your query add ORDER BY field DESC/ASC;
How do you access cookies
Much like GET and POST you access cookies using the $_COOKIE array indexed by the cookie names
What is a cookie, who can read a cookie
It is a piece of data that the server asks the client to store, and the client returns to the server with its requests Cookies can only be read by the issuing domain
How do you access variables send via POST and GET in PHP scripts
the values are stored in $_POST and $_GET arrays which you can use the access the values as shown in the example. It is good practise to use if(isset()) before using a POST/GET value to avoid errors (as is done in the example)
What is the syntax for defining a textarea in a form
What is the "domain" stored in a cookie
the host that sent the cookie, only the original host will receive the cookie back from the client
What is a PHP session
stores variables across multiple pages. unlike a cookie the information is not stored on the users computer. They hold information about one single user and are available to all pages in one application
How do you define a function in PHP What ways can you pass in values in PHP
function functionname(params){code} You can pass values into functions and make any changes to them global by adding an & sign before the variable. Otherwise any changes will be local
Section 4
(50 cards)
What is phishing in terms of XSS
the attacker manipulates the DOM to add a form that appears to be a part of the website - the user submits it and sends the information to the attacker's server
What is the structure of an HTTP response
What are the 3 ways a server can interpret an HTTP request
- server maps the request into a file on the server and returns the file request to the client - Server maps the request into a program on the server, executes it and returns the output to the client - An error is returned if the request cannot be satisifed
What are the most common codes for an HTTP response
200 - OK 301 - Moved Permanently 404 - Not found 500 - Internal Server error. 200s are mainly +ve 400s are a client error 500s are always a server error
How do you prevent XSS
use htmlentities/htmlspecialchars to sanitise any user input so that the code is no longer interpretable as HTML and will have no effect
What are the pros and cons of sessions
Pros: - Data is held on the server so is more secure - No 4kb restrictoin - No transmission latency Cons: - Still reliant on cookies which can be disabled - Don't persist between browser sessions
How do you use real_escape string to prevent SQL injections
What object do all JS functions below to as default
the window object, so window.myfunction always works if you have defined the function as part of another object
What are the attributes of the model, give a practical example
- Stores data - Does not have any responsibility for presentation matters - Does not do any computation - Model objects often used to store data within a program The model could be implemented as HTML
How do you write to an HTML element using JS
using element.innerHTML
How does HTTP work on a basic level
An HTTP client sends a request message to an HTTP server The server, returns a response message The Uniform Resource locator (URL) is used to uniquely identify a resource over the web
How do you insert JS code into HTML
between <script> and </script> tags
How do you define a variable in JS
using var e.g. var x - 4;
How do you write into an alert box using JS
window.alert()
How do web servers and browser ensure safe transfer of passwords
HTTPS communications using an encrypted channel (either transport layer security (TLS) or secure sockets layer (SSL) Server sends its digital certificate to the browser Once the certificate is received the secure communication channel can be established, handshaking
What are the attributes of the controller, give a practical example
- Sits between the model and the view, acts as an intermediary - Updates models and views when they change The controller is generally the browser
What is the structure of an HTTP Request
What are the 3 types of XSS
Reflect XSS: User is tricked nto requesting an injected URL DOM XSS: when javascript is executed the DOM is changed by malicious script Persistent XSS: a page displays data stored in a database that contains malicious code
What data forms is HTTP the protocl for
- Plaintext - Hypertext - Images - Video - Sound
How do you write into the browser console using JS
console.log()
How can you access properties in JS
What are the two ways to prevent an SQL injection
Using real_escape_string() Using prepared statements
When should you use sessions and when should you use cookies
Cookies should be used to preserve state over a series of unconnected sporadic visits Sessions should be used when the state is to be preserved over a connected sequence of visits.
How do you delete a property in JS
use delete object.property
How can we break a website down from a design perspective and why do we do this
It can be organised into: The model: handles the data and business logic The view: handle user interface application The controller: handle user interface objects and presentation This supports decoupling which reduces dependencies between different components of the system
What is an HTML injection/cross site scripting (XSS)
involves pasting HTML code from a client to a server and back to another client
How do you write into HTML output using JS
document.write()
What are the ways you can close a session or clear all variables
session_unset() removes all the current variables session_destroy() removes all variables and destroys the session until one is started again
How do you iterate through an objects properties
for(property in object)
How do you access session variables
using the $_SESSION array
What are the attributes of the view, give a practical example
- Present the data stored in the model and display in the browser - various approaches and multiple views for the same data e.g. lists, tables, visualzations The view could be implemented as CSS
What is an SQL injection
passing SQL from a web client to a server and onto a database
What are the HTTP request methods
How do you new keyword to define an object in JS
Why should you use a salt
prevents recovery of the password by looking up the hashed password in a rainbow lookup table It prevents 2 users with the same password having the same hashed password
What is the header() command in PHP
it redirects a user to a different page Syntax: header("Location: domain.com/path/to/resource")
How do you add new properties to an object in JS
simply use object.property = "value" and a property with the given name and value will be added to the object
What is a hashing function
it takes a password (string), M and returns a number, H(M). It is a one way function. Even if the input changes a tiny bit, the resulting hash is completely different
What is special about how JS handles function parameters
it doesn't type check them it doesn't check the number of arguments received missing params are just set as undefined
How do you use prepared SQL statements
How can hashing be cracked
Dictionary attack Brute-force attack Look-up tables Rainbow tables
How do you use sessions to allow users to log-in to a site
get the user to enter a username and password. Then check these using a PHP script, If they are correct start a session and assign a session variable for their username. You can then check if the username variable is set to see if a user is logged in. You can also use the session variable to customise the webpage and show their username where appropriate
What are the wrong ways to use a salt
reusing a salt for all users using a very short salt
What is salting
Adding a random string to the password string
How do you define a function in JS
function myFunction(a, b) {code} note that the data type of parameters isn't specified You can assign function to variables as well, so I could say var x = function (a, b) {code} and x(a, b) would run the relevant function
what is the PHP function that can be used to check the contents of a string
preg_match(check-to-carryout, string)
How do sessions work, how are they stored
The session uses the clients cookie storage to save a key which is used to identify one particular repository of variables When a session is opened on another page it scans the computer for a user-key If there is a match, it accesses that session, if not it starts a new session
How do you use salts when creating a password system
Add the random string to the password string, hash the combination of the two, then store the hashed password along with the salt in the database When the user tries to login, retrieve their salt and add it to the password they gave, hash this and see if it matches the hash in the database
what is the PHP strlen() function
it returns the length of a string
How do you define an object using an object literal
A list of name:value pairs inside curly braces
Section 5
(44 cards)