Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
47 Cards in this Set
- Front
- Back
|
What are semantic Tags
|
Markup in HTML5 that helps to clearly describe content and meaning to browser. Help to replace <div class="section" etc. in code
|
|
|
Semantic Structure - Section Tag
|
A thematic grouping of content typically with a header and possibly a footer. Sections are comprised of other elements
|
|
|
Semantic Structure - Article
|
Represents an independent section of the page (i.e. user comment, blog post, etc)
|
|
|
Semantic Structure - Nav
|
Contains primary navigation links within it
|
|
|
Semantic Structure - Aside
|
Section of the page that contains content which is related to the nearby content but has to be considered separate
|
|
|
Semantic Structure - Header
|
Represents the header of a section and contains headings / subheadings as well as introductory content
|
|
|
Semantic Structure - Footer
|
Represents a footer of a section such as auther information and related document information, etc.
|
|
|
Semantic Structure - Figure
|
Represents a self-contented content such as an illustration, photo etc. It's position is independent of main flow so removing it shouldn’t affect main flow
|
|
|
Semantic Structure - FigCaption
|
Represents a caption for the figure element and must be the first or last item in the figure tag
|
|
|
Semantic Structure - Details
|
Provides a collapsable section of data on demand (i.e. has the dropdown arrow)
|
|
|
Semantic Structure - Summary
|
Contained within the details element (only once) and provides the text that should be lcicked to load the dynamic data
|
|
|
Semantic Structure - Mark
|
Highlights part of text
|
|
|
Semantic Structure - Time
|
Used to denote the text within is a set of time (24 hour time or gregorian time)
|
|
|
Semantic Structure - Hgroup
|
Allows you to group together heads and subheaders, i.e. <hgroup><h1><h2>… etc
|
|
|
Forms - How do you mark an input field as required?
|
Required attribute within input. This will make it impossible to submit form without inserting
|
|
|
Html5 Basic - How do you mark a document as an HTML 5 document?
|
<!DOCTYPE html>
|
|
|
Forms - How do you define what page should be navigated to when a form submit button is clicked?
|
action="src" within the form tag
|
|
|
Forms - How do you put some default text in an input field?
|
use the placeholder="text" tag
|
|
|
Forms - How do you change the regex pattern of an input field?
|
patter="" regex to change what is matched against
|
|
|
Audio & Video - What files are supported for audio and video?
|
MP3, WAV, OGG / MP4, WebM, OGG
|
|
|
Audio & Video - How do you embed multiple audio / video sources so certain ones can be fall back upon and how do you enter text if none are supported?
|
In between tags put <source src="" /> tags to indicate different sources. At the bottom put text for default error message
|
|
|
Audio & Video - How do you embed controls for audio and video files
|
Controls = "Controls"
|
|
|
Audio & Video - How do you play audio / video when the page opens, how do you loop audio, how do you mute audio by default, how do you preload audio and video by default and what are the options
|
Autoplay to play, Loop to loop, Mute to auto mute, Preload with auto, metadata, none
|
|
|
Audio & Video - How do you put an image over a video that loads when the video isn't playing or is downloading?
|
Poster=""
|
|
|
Audio & Video - What ability does the controls tag give you for audio and video?
|
For audio, gives volume, play, pause and seek. For video, gives play, pause, seek, volume, fullscreen, captions, subtitle, track
|
|
|
Canvas - How does the canvas element work
|
Embed <canvas> tag into document but then have to use javascript and getContext() method to draw to it.
|
|
|
SVG - What does SVG stand for, what are the benefits and disadvantages and what is it
|
Scalable Vector graphics. Allows shapes to be drawn with an XML format and since they are vectors, they don’t lose quality if zoomed or resize. Also, each object we draw is seen as an object and can be accessed with script but it has performance issues with lots of objects
|
|
|
Audio & Video - Why should you set the width and heigh tof a video?
|
If not, website has to resize while loading. If they are set, it can precalculate size
|
|
|
CSS Selectors - What is a type selector?
|
Allows you to determine the type to pick. Types are objects i.e. table or div, etc. If you select a top level item, it will propogate all the way down unless yo uspecifiy it. I.e. table gets all tds, etc.
|
|
|
CSS - Selectors - What is a class selector?
|
Allows you to determine what to pick based on the class. Use the period(.) to determine class name. Goes all the way down if not specified
|
|
|
CSS - Selectors - What does the * mean
|
The top level object. Will search the whole document when starts with *
|
|
|
CSS - Selectors - How do you search for attributes and what are the build in operators
|
Use the [ATTRIBUTE_NAME] and have $= ends with ^= Starts with *= Contains = Equals
|
|
|
CSS - Selectors - How do you use selectors with data tags?
|
put data-NameHere in an element and then search for it by attribute as [data-NameHere] {color:red;}
|
|
|
CSS - Selectors - How do you provide multiple selectors on the same line and what are the implications of the operator
|
Can use the , to do several i.e. table, div finds all tables and all divs but anything after comma is reset
|
|
|
CSS - Combinators - What does the space operation do
|
Finds any descendent regardless of how deep i.e. div table finds table anywhere within div
|
|
|
CSS - Combinators - > operator
|
Finds direct descendent. Doesn't go lower to find item, only first level
|
|
|
CSS - Combinators - ~
|
Finds the general sibling. Doesn't have to be RIGHT after but they have to have same parent. Picks multiple
|
|
|
CSS - Combinators - +
|
Finds the sibling on the next level that is directly after this elmenet. Only picks one
|
|
|
CSS - Pseudo Elements and Classes - How do you designate them on css
|
use the : operator after your selection
|
|
|
CSS - Pseudo Elements and Classes - How do you get all unvisited links, visited, active, and hovered and what does an active link mean
|
:link, :visited, :active, :hover, active means user is clicking or holding down click
|
|
|
CSS - Pseudo Elements and Classes - How do you get the focused element and what does focus mean
|
:focus only works on input element or elements that have keyboard input
|
|
|
CSS - Pseudo Elements and Classes - How do you enter content and where can you enter it
|
:before, :after, with content="" and then can style the content
|
|
|
CSS - Pseudo Elements and Classes - How do you find elements with a language tag
|
:lang(IT) finds items with lang="" attribute
|
|
|
CSS - Pseudo Elements and Classes - How do you get the first child (2 methods)
|
:first-child or :nth-child(1)
|
|
|
CSS - Pseudo Elements and Classes - How do you enter equations for the nth child operator
|
nth-child(2n+1)
|
|
|
CSS - Pseudo Elements and Classes - How do you get the first line and first letter and what's special about these selectors
|
:first-line, :first-letter; only works on block elements
|
|
|
CSS - Pseudo Elements and Classes - How do the first and nth child items work
|
If you put p:first-child it would look for all paragraph tags that are the first child in whatever structure they belong to
|
