Section1: Implement and Manipulate Document Structures and Objects Flashcards
used to differ seperate articles within an HTML doc, such as post, blog entry, new story, etc.
hold a major chunk of site navigation such as top or side.
Contains header info for HTML doc OR or elements.
related to surrounding content but not a part of it, such as a quote from the article.
HTML5 Doctype
<! DOCTYPE html >
getElementsByTagName()
returns all the elements in the document with the matching tag name
getElementById()
searches the document for the element matching the id
getAttribute()
gets the named attribute of the element
setAttribute()
sets the value for the named attribute
attributes
src, controls, width, height, autoplay, loop, preload, poster, audio
video elements
src, type (mime type), codecs
inner HTML
will display if the browser does not support the video element
onError
will run if video element is not supported
javascript
play(), pause()
attributes
src, controls, loop, preload, autoplay
audio elements
src, type(mime type)
inner HTML
will display if the browser does not support the audio element
a drawing surface for dynamically creating images, drawings or animation.
document.getElementById(?mycanvas?).getContext(“2d”)
Get canvas context
fillStyle
canvas property sets the fill color on gradiant used during fills
moveTo(x,y)
canvas method moves the drawing cursor to x,y coordinate
lineTo(x,y)
canvas method draws a line from the current drawing cursor to the x,y coordinate specified
arc(x,y,r,start,stop)
canvas method draws an arc centered on the x,y position, with radius r, beginning at the angle given by start and ending at the angle given by stop
stroke()
draws line created by prev drawing command
fill
canvas method fills the area created by prev drawing command
fillRect(x1,y1,x2,y2)
canvas method fills the rectangle with x1,y1 and x2,y2 as the corner coords
font
a canvas property that sets the font face and size for text drawn on canvas
fillText(text, x,y)
canvas method draws the given “text” at the x,y coords and fills the text in.
strokeText(text,x,y)
canvas method draws the outline of the given text at the x,y coords
scalable vector graphics is an xml based vector drawing language
svg shapes
circle, ellipse, image, line, path, polygon, polyline, rect, text
svg attributes
width, height, viewPort, version, xmlns
svg shape attributes
x, y, width, height
static
the default positioning. This positions the element according to the normal HTML flow without any CSS
fixed
positioning is relative to the browser window, NOT the document. Fixed position elements do not move even if the window is scrolled.
relative
positioning is relative to the position the element would occupy if its positioning was static.
absolute
positioning is relative to the first parent element that has a position other than static (meaning fixed, relative, or absolute). If no parent element exists with the correct positioning type, the < html > block is treated as the containing element.
non static elements
fixed, relative, absolute
non static element properties
top, bottom, left, right
z-index
the element with higest z-index will be displayed on top.