Web Technologies

Question 1

How do we access a webpage?

Answer 1

Connect to web via ISP (Internet Service Provider), comp contacts DNS (Domain Name System) servers, returns IP address, comp uses num provided by DNS to go to web server hosting website to visit, web server sends page to web browser.

Question 2

What is HTML used for?

What is CSS used for?

Answer 2

HTML: Text, vid, tables, audio, links, forms, images + lists (STRUCTURE)
CSS: Presentation + layout

Question 3

What are attributes?

Answer 3

Tell us more about elements e.g. <a> Attribute name is lang, attribute value is en-us. Require name + value.</a>

Question 4

What is the structure of a webpage?

Answer 4

Head, including title, body, headings such as h1, h2 and main body, usually in paragraphs. Anything in body displayed on webpage. HTML pages are text docs, use tags/elements (containers), tell us about info between them, usually in pairs.

Question 5

What is markup?

Answer 5

Creating a page, involving adding tags to content. 2 types, structural + semantic. Headings go from level 1 – 6. Whitespace is collapsed so only displays 1 normal space. Semantic markup is a set of elements which provides extra info about content, not used to alter presentation of elements differently.

Question 6

What are the 3 types of lists?

Answer 6

Ordered (numbered), unordered (bullet point) & definition (define terms). Can be nested inside one another. <li> stands for list item.</li>

Question 7

What is directory structure?

Answer 7

Root folder at top, each child folder which also has parent folder, may also have grandchild folders (esp. root folder) + so grandparent folder.
If linking to page within own site, use relative links rather than qualified URLs. Can use id attribute to target elements within a page that can be linked to.

Question 8

How do forms work?

Answer 8

User fills in form + presses button to submit info to server, name of each form control sent with value user entered, server processes info using programming language, server creates new page to send back to browser based on info received.

Question 9

How is info sent in forms?

Answer 9

Info from form sent in name/value pairs. Each form control given name + text user types in/values selected sent to server.

Question 10

What is involved in CSS?

Answer 10

Selector (p) + declaration e.g. p {font-family: Arial;}. Associates style rules with HTML elements + affects how elements displayed. Treats each HTML element as if it appears inside own box, uses rules to indicate how it looks.

Question 11

How do we display different colours in CSS?

Answer 11

Hexcode, colour name or RGB values for colours. CSS3: RGBA indicates opacity, also allows to specify colours with HSL values + optional opacity value (HSLA). A stands for alpha.

Question 12

What are the different CSS selectors?

Answer 12

Universal (*{}), Type (h1, h2, h3{}), Class (.note{} p.note{}), ID (#introduction{})

Question 13

Why would we use external CSS stylesheets?

Answer 13

Same CSS used for every page of website, don’t have to copy style code into each webpage, changes automatically applied, faster download for subsequent pages, easier to create new pages in same style.

Question 14

Why does CSS having diff versions affect how it displays?

Answer 14

Some browser quirks/bugs as browsers don’t implement all features, older browsers don’t support each property.

Question 15

How do rules work in CSS?

Answer 15

Made up of selectors (to specify which elements rule applies to) + declarations (to say appearance). Diff selectors allow targeting rules at diff elements. Declarations have 2 parts: properties of element changing + value of properties.

Question 16

What are the previous versions of HTML?

Answer 16

First in 1990. HTML 2.0 was 1st to support GUI (1995).
3.2 introduced web forms + tables (1997). 4.01 added stylesheets & scripting technologies (1999). XHTML 1.0: XML is scripting lang, lets developers define own markup lang. (2000). 5.1 Follows XML rules, compatible with HTML, CSS + XHTML, logical layout elements, support for apps/rich media, removes HTML display elements in favour of CSS. (2016)

Question 17

What are the rules of XML?

Answer 17

Every element in doc needed closing tag, element names lowercase, old elements not used, attribute values in quote marks, tags nested correctly + shouldn’t overlap.

Question 18

What is the DOCTYPE variable for?

Answer 18

Tells browser how each page should be viewed. For HTML5, it’s . HTML comments appear inside . Escape characters: e.g. pound sign (£), copyright (©), trademark (™).

Question 19

What is the HTML id/class attribute for?

Answer 19

Uniquely identifies 1 element within page, used by CSS &amp; JavaScript. E.g. <p>
Every element can also have class attribute, sev elements grouped under 1 class attribute. E.g. </p><p class="“red”">.</p>

Question 20

What are the 2 categories of HTML elements?

Answer 20

Block level (starts on new line in browser window e.g. <p>) i.e. div tag, most useful for defining sections in webpage, each tag should have id/class to be unique. 
Inline level (continues on same line e.g. <b>) i.e. span tag allows elements to be differentiated, can be grouped, most useful with CSS.</b></p> div can create box.

Question 21

What is an iframe?

Answer 21

Cuts window into webpage, allows us to see other webpage behind it e.g. Google Map

Question 22

What is metadata?

Answer 22

Stores info about webpages, lives inside . E.g. description (describe content), keywords (commonly used search words), robots (indicates whether search engines should add it to their search results), author, pragma (prevents caching) & expires (indicates when cached versions expire)

Question 23

What are some of the different typefaces?

Answer 23

Typeface Terms: Serif (Arial, Verdana, Helvetica), sans-serif (Georgia, Times, Times New Roman), monospace (Courier, Courier New), Cursive (Comic Sans MS, Monotype Corsiva), Fantasy (Impact, Haettenschweiler)

Question 24

What are some ways we can manipulate text using CSS?

Answer 24

Weights (light, medium, bold, black), styles (normal, italic, oblique), stretches (condensed, regular, extended). Type scales (developed in 1500s e.g. 12pt)

Question 25

What is true of font-face?

Answer 25

Must be supplied in several formats, fontsquirrel.com provides CSS rules + conversion, fonts subject to copyright + need appropriate license.

Question 26

What are the different attribute selectors?

Answer 26

Existence, equality, space, prefix, substring + suffix.

Question 27

What is alt for?

Answer 27

Provides text description of what shown in image. Must have by law.

Question 28

What is the action attribute for?

Answer 28

Allows us to specify URL data sent to.

Question 29

What does method attribute of form element needs when used for file upload box?

Answer 29

Post

Question 30

What does HTML5 placeholder attribute provide on text input?

Answer 30

Text to show until user clicks box.

Question 31

What are the rules for CSS rule application?

Answer 31

If 1 rule applied to multiple elements, use comma to separate. If multiple declaration, separate with semicolon.
To apply to <p> that follows </p><h1>: h1 + p { }
</h1>

Question 32

Describe the div tag’s use as a box.

Answer 32

It includes a min/max-width and min/max-height function, alongside text-align, margin, border + padding (out to in). Border has diff available styles: solid, dotted, dashed, double, groove, ridge, inset, outset. To centre div, must use margin inside of align feature. Can create diff shapes using border radius.

Question 33

Ordered List Styles

Answer 33

decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman.

Question 34

Unordered List Styles

Answer 34

none, disc, circle, square.

Question 35

Table Styling Elements

Answer 35

width, padding, text-transform, letter-spacing, font-size, border, text-align, background-color, :hover.

Question 36

Text Input Styling

Answer 36

font-size, color, background-color, border, border-radius, :focus, :hover, background-image, padding.

Question 37

Styling Submit Buttons

Answer 37

color, text-shadow, border-bottom, background-color, border-radius, :hover.

Question 38

Key concepts in positioning elements

Answer 38

Building blocks – bock level & inline. Normal flow, relative positioning, fixed positioning & absolute positioning.

Question 39

What are layout grids?

Answer 39

Long tradition of use in print design. Help make pages look professional, position items on page + set consistent proportions between items. Help create continuity between diff pages, new content, multiple designers + helps user predict where info will be on page.

Question 40

What are CSS Frameworks?

Answer 40

Provide CSS for common tasks, layout grids, styling forms + print-friendly pages. Saves repeating same code + has been tested across multiple browsers but often requires class names in HTML + to satisfy wide requirements will contained unused styles (bloat).

Question 41

What is a script?

Answer 41

Series of instructions comp follows to achieve goal. Define goal, design script, code steps. Comps create models of world using data. Objects in them use properties, events + methods. Can do diff things dep on what values has been passed.

Question 42

What are properties, events + methods?

Answer 42

Properties tell comp about object’s characteristics. Events tell comp how user interacts with object.
Methods tell comp how to change object’s properties.

Question 43

How do web browsers work?

Answer 43

Web browsers use models of browser window + webpages contained in them, use models to understand how to interpret webpages. Receives page, creates model + stores in memory, shows page using rendering engine. Web design works by progressive enhancement (content, presentation + behaviour).

Question 44

What are the comparison operators?

Answer 44

== (equal to), != (not equal to), === (strict equal to), !== (strict not equal to).

Question 45

What does the DOM do?

Answer 45

Specifies how browsers create a model of an HTML page + JS accesses/updates HTML page. There are element nodes, text nodes & attribute nodes. To access + update HTML, select elements you want to work with.

Question 46

How do DOM queries work?

Answer 46

Use DOM queries to select element nodes. DOM queries: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll(). If DOM query returns multiple elements, it’s a NodeList, elements within these are numbered + selected like an array, can check if there are elements before using NodeList (if length >=1). Can move from 1 node to another if it’s a relation of it (traversing the DOM). parentNode, previousSibling, nextSibling, firstChild, lastChild. To access content, can use nodeValue on text nodes, textContent for text content of elements, innerHTML for text + markup. DOM Manip: createElement(), createTextNode(), appendChild(). Inner HTML: builds string, contains markup, updates elements.

Question 47

What are cross site scripting attacks?

Answer 47

XSS attacks. Untrusted data is content you don’t have complete control over, can contain malicious content. Sources: user creates profile, multiple contributors, data from 3rd party sites, files uploaded. Defence: Validate input sent to server, escape data coming from server.

Question 48

What are the timing event types?

Answer 48

Timing event types: setTimeout (function, milliseconds). setInterval (function, milliseconds).

Question 49

What is a session?

Answer 49

Temp + interactive info interchange between 2+ computing devices. More specifically, a page session lasts as long as browser is open + survives over page reloads + restores. In JS, sessionStorage property of Storage object can be used to store values (key value pairs). E.g. save data, get saved data, remove saved data. Opening a page in new tab/window creates new session. Opening multiple tabs with same URL creates sessionStorage for each tab. Closing a tab ends session + clears data. Relation: localStorage property which stores data with no expiration date, data not cleared when browser closed, data remains available until manually cleared, read only.

Question 50

What is cross site scripting?

Answer 50

Type of cyber attack which exposes security vulnerabilities in web applications. (Web app accepts user input, input used to create dynamic content, input insufficiently validated).

Question 51

Who is involved in cross site scripting?

Answer 51

An attacker (anon internet user/malicious internal user), company’s web server (external (shop, info, supplier) + internal (employees self service portal)) + client (customer, anon user accessing web server).

Question 52

What are scripting, cross-site and attack about?

Answer 52

Scripting: Web browsers can execute commands (embedded in HTML page, supports diff languages, most prominent is JS). Cross-site: Foreign script sent via server to client, attacker makes web server deliver malicious script code, malicious script executed in client’s web browser. Attack: Steal access credentials, denial of service, modify webpages, execute any command at client machine.

Question 53

What is XSS?

Answer 53

Old problem, first realised 20 years ago, now regularly listed on BUGTRAQ, many web apps affected. Insufficient IO checking. First target is client, client trusts server + browser executes malicious script. Company running server loses public image, customer trust + money. Ends with denial of service (client’s browser crashes, pop up flooding, redirection), access to user machine (ActiveX object controls machine, upload local data to attacker machine), spoil company’s image (load main frame content from other locations, redirect to dialer download).

Question 54

How can we avoid cross site scripting?

Answer 54

Use Whitelist texting, only pass what you expect to pass. Use regular expressions, HTML5 forms, don’t check for bad input, don’t use blacklist testing as these never complete. HMTL encoding transforms tags into plaintext so cannot run in browser, makes websites slower + not always possible e.g. when constructing URLs from input, meta refresh, generating JS from user input, when script enabled HTML tag attributes. Implement CSS-prevention in application, don’t assume input values are benign, don’t trust client side validation, check + validate all input before processing, don’t echo any input value without validation, use 1 conceptual solution in all apps.