HTML5 Flashcards
What is the section tag used for?
It is typically used to contain a blob of data. It is usually only used if the data would have a natural heading. The spec says that a section should usually be identified by having a heading (h1-h6) as a child of the section element.
What are the two elements used when quoting text?
< q> and <blockquote>
What is the difference between a block element and an inline element?
Block elements are always displayed as if they have a linebreak after them, inline are displayed inline with text.
What do you call an element with no content?
A void element (br element for example)
HTML has ordered and unordered lists - are there any others?
yes, definition lists. < dl> <dt>Definition term</dt> <dd>Definition Description</dd> < /dl>
What is nesting?
When separate HTML elements are included within each other.
Is the img tag a block or inline element?
inline block (i.e. it is inline, but has some behaviors of block elements)
What role does the h1, h2 etc tags play in SEO?
The higher numbers (i.e. h1) have a higher priority in a search engine result - prioritising sections of page based on heading numbers
What is SEO?
Search Engine Optimisation
How do you configure an “a” element to make a link open in a new window?
Use the “target” attribute - to make it ALWAYS open in a new window, use the value “_blank”.
What is responsive web design?
When a web layout automatically conforms to a devices screen / limitations through use of CSS
What tag do you use to make sure the web page starts at the right scale for a device?
< meta name=”viewport” content=”width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0” />
What do you use to ensure IE 7 and 8 can deal with HTML5 tags?
HTML5Shiv
How do you make your website use a specific CSS style sheet based on device?
Use the media attribute on the link tag..
< link rel=”stylesheet” type=”text/css” media=”only screen and (min-width:50px) and (max-width:500px)” href=”css/screen_layout_small.css” />
What would be a cause for fonts getting progressively bigger throughout a page?
Not closing off h1 (h2 etc) tags. Opening the tag tells the browser to increase the font, closing it tells it to decrease - not closing means it’s additive.
What does the canvas tag look like?
<canvas></canvas>
How do you obtain a 2d context for a canvas?
var canv = document.getElementById("canvas");
var context = canv.getContext("2d");How would you fill the background of a canvas with the color blue?
(Having obtained a 2d context and a handle to ‘canv’)
context. fillStyle = “blue”;
context. fillRect(0, 0, canv.width, canv.height);
What is one significant difference between declaring a function and assigning a function to a variable?
If the function is simply declared, the order that it is called (i.e. before it is declared in code) does not matter. However, if it is assigned to a variable, the function is only parsed in the second pass of the compiler - and will therefore cause an error if the function is called before it is declared (via the variable).
foo();
var foo = function() {}
// ERROR!How do you load a sprite?
var image = new Image(); // Then set the src attribute image.src = 'nameoffile.png';
How do you draw a sprite?
using the context
Game.context.drawImage();
// There are a large number of params for this
How do you create a new drawing state?
Game.canvasContext.save();
How do you remove an existing drawing state?
Game.canvasContext.restore();
How would you translate a sprite (in a new drawing state)?
Game.canvasContext.translate(100, 100);
What steps would you use to translate and draw a sprite using draw states?
Game.canvasContext.save();
Game.canvasContext.translate();
Game.canvasContext.drawImage();
Game.canvasContext.restore();
When passing data as a parameter - what is the syntax for passing a struct like data structure?
function_name({ x: 100, y: 200 });
This is an object literal and lets you reference it by..
param_name.x
param_name.y
How do you create an audio object to play an mp3 music track?
Game.music = new Audio(); Game.music.src = "mymusic.mp3";
Given an initialised music clip - how do you play the music?
Game.music.play();
Given an initialised music clip - how do you change the volume of the music?
Game.music.volume(0.4);
from 0 - 1
There are two parameters that give position in a mouseMove handler - what are they?
pageX and pageY
clientX and clientY
What is the difference between pageX and clientX?
clientX (parameter passed in a mouseMove handler) doesn’t take into consideration scrolling.
What is the difference between Math.atan and Math.atan2 ?
Math.atan2 takes two parameters (the adjacent and opposite lengths) and returns and returns the equivalent in radians of 90 degrees). It is useful because the two parameters allow the function to detect whether a value of 0 was passed (not possible with atan) and gives an appropriate value.
What steps would you use to translate, ROTATE and draw a sprite using draw states?
Game.canvasContext.save(); Game.canvasContext.translate(); Game.canvasContext.rotate(); Game.canvasContext.drawImage(); Game.canvasContext.restore();
When you receive an event for a mouse button press, there are three possible values for evt.which. What are they?
left button = 1
middle button = 2
right button = 3
What is the issue with spreading your classes across multiple files?
There is no simple way to enforce loading in order to preserve dependencies. Therefore you need to write a script that will load the files / and wait until it has finished before loading the next one. (such as LABjs)
