HTML 5 Flashcards
HTML 5 extended it’s markup from syntactic to what?
semantic
`Doctype
A DOCTYPE is a required preamble.
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
<!--!DOCTYPE html-->
Header tag
first element on page
fat header
Page with h1 and h2 (header and subheader), you can group using h2 ties to h1 as subheader you can now use headers in ‘s
footer change
footer now relates to nearest ancestor section content– this means you can have multiple footers
footers should contain
info about section, who wrote it, copywright, etc.
article tag
new tag should be self contained document, page, etc
Article tag to be used for
forum posts, blog posts, comments, individual email, article
section
can section page to subject areas
can mark sections in an article
but dont create standalone rticle–which is the difference btween this and section tag
can you have multiple sections in article
yes– indicates how article is divided
aside tag
new tag
a way of saying it’s related to but not part of the main flow
sidebars
nav tag
used to maerk navigation sections but not every link or list of links or search results
primarily intended for sections that consist of major navigation links
mark tag
new tag
used to highlight section of text
time tag
used to dematk time; universal format
<time> 1:30 pm on July 10 2013</time>
changed elements
address
cite
dl
em
hr
ol
s
small
strong
u
address
used for contact address of author not postal
can have multiple in onde doc–one per article tag
can be email postal or any other address
cite
more constrained– technically no longer supposed to mark up a name of a speaker
rather use to mark publication
dl
now expended to cover any name/value group (glossary usage)
dl
dt moby dick /dt dd herman mellivelle /dd
/dl
em and i change
use em wehn you are subtly changing meaning of a statement
use i for technical terms whose typical typographic presentation is italicized
hr
used to indicate a paragraph level thematic break
almsot but not quit obsolete
use to create horizontal rule
ol
two new attrs
start attr to determine what number counting can begin at
s tag
used to be strikethrough
small
no longer makes print small
now used for small print as in legal docs
strong and b
strong indicates importance
b indicates bold without indicating importance
forms
new input types:
date
time
month
week
range
search
tele
color
and related type called data list: progress bar and meter
link a css style
in header
form code with example inner html
css3 implementation for slider
search tag
input type, can take placeholder=”some text”
required
add required to end of input type,
requires input typr submit following it to really do anything.
The result is a notice that a field is required
input type submit can take this param to set its text
value=”text”
what key word for required allows for multiple entrys seperated by a comma
require multiple (will accept just one as well)
how do you add an element to a form outside of the closing form tag?
how to implement a color picker
simple add input type=”color”
implement a data list
implement a progress bar
ignore meter leabel
implement a meter bar
Benefit of audio and video elements of html5?
no longer need to require a plugin like flash
video element attributes
src (takes url)
controls
autoplay
loop
poster (takes a url)– displays image in place of video b4 starting
preload
- none
- metadata
- auto (default)
video preload attribute
allow for precaching for the video
audio attrs
srts(url)
controls
autoplay
loop
- preload
- non
- metadata
- auto (default)
&nbps
create white space bbetween word or item
post request
happens when you submit a form
get request
happens when you request a page
’!– comment here –’
what goes in the header
links, titles, includes, css
what does the meta tag do in html 5 (where is it placed also?)
insdide the header: tells browser what type of char set you are using
if you wternate name (hove-over peraps)ant to have an image with an alt name, hover over perhaps what sht keyword after src
alt=””
css reset vs cross browser compatability
reset tries to make it look similar, cross loads different css
difference between meda=”screen” and others
alternatives are print
whats a wrapper div
wraps most of the bodys content into a div
how to specify language of a page
is a div tag a block level element
t, a blovk level elem will push elemnts around
is a span tag a block level elemnt
f, inline, doesnt’ push elements out of way
what is a blockquote
used to denote a quote, adds some white space around it
how to use a quote tag
puts quotes around a line using ‘q’
code tag
changes text to make it obious that somethign is refering to code
pre tag
keep direct formating, spaces, breaks, etc
what is the abbr tag
used for abbreviated items. by itself it changes nothing but you can use abbr title=”drug abuse resistane education” so when you hover over the element it will actually create a tool tip
what does the addr tag do to the text
italicizes it
whats the cite tag do
italicize
what does the wbr tag do
its like a conditonal br, it will only break if not enough horizontal room
what is the dt tag and dl tag
dt=definition title, dl= definition list; dl will add indentiation with know bullets, etc
you can use an anchor tag link to link to an element on the page t/f
t, using id (#idname)
wht does href stand for
hyperlink refernece
prior to html 5 how could you embed a youtube video
object tag: width, src, name, value, script access, interadction, and embed fro cross browser support
iframe tag
width,height,src
table element
can set border; rows use tr(row) and td(to hold row content), th is the table header: ex
‘table’
‘thead’
‘tr’
‘th’Table title’/th’ (repeat for second column, and add second tr/td before closing tr)
‘/tr’
‘/thead’
‘tfoot’
‘tr’
‘td’ row text ‘/td’
‘/table’
Table title row text
how do you span a cell across columns
td colspan=”2”
align text in a sell
td align=”center” (horizontal)
valign=”top”, center, etc. (vertical)
cell padding and spacing and border
table border=”5” cellpadding=”5” cellspacing=5”
cell spacing does what
puts whitespace between cells
cell padding does what
puts spacing inside cell
in creating the form tag, itss attribute of action has to be set to what
you can also set a method attribute that takes what as input
and name does what
the page that is loaded after submitting the form; things like post and get;name is how the server knows what forms being used
in a form, what keeps a radio button from only allowing one selection
the name attribute
example of a textarea element
‘textarea name=”x” rows =”10” coloumns=”10) (doesnt limit text amount input, just a way of resizing the form
how to create drop down box
using selct attr with options nested; you can use an optgroup element to divide things up like continenets (Cant select the group, only the sub items within them)
fieldset
divides forms up by adding a box around them.
legend
used in a fieldset for a form to name its purpose
how to add a label to a form element
firslty, the form element needs an id set identical to the label elements name (additionally if you click the label it will auto put your cursor inside its form element)
label for=”id”\ blah /label
how to display a copywright symbol using ampersand
©
ampersand for a quote
&rsquo
adding the word on after a class name “class test on” does what
underlines
in html, what is the ml
markup language– basically those keywords with which you denote a section like div or span or article
in html, the default meta char type is what
utf-8 (‘meta charset=”utf-8”’)
in html5 doctype, what type of doctype is specified
just lowercase html ‘!DOCTYPE html’
in html what is the ampersand to use a copyright graphic
©
in html5 a ul uses what (numbers/bullets)? how to add a new item to a ul or ol?
bullets, ‘li’
