HTML 5 Flashcards
1
Q
basic html document
A
<!DOCTYPE html>
Example 01 This is my first document.
2
Q
XHTML Example
A
An HTML Document
Example
This is an example HTML document.
3
Q
Why XHTML document does not need to include the DOCTYPE
A
because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode. However, the DOCTYPE may optionally be included, and should be included if the document uses the compatible subset of markup that is conforming in both HTML and XHTML, and is ever expected to be used in text/html environments.
4
Q
Metadata elements
A
appear within the head of a document. Some common examples of metadata elements include: title, meta, link, script and style.
5
Q
It is considered good practice to specify the primary language of the document on this element using the ____________ tag
A
<!DOCTYPE html>
... ...
6
Q
xmlns attribute
A
In the XHTML syntax, the xmlns attribute needs to be specified on this element to declare that it is in the HTML namespace. You may use either the lang or xml:lang attribute to specify the langauge.
7
Q
base element (explanation)
A
specifying a base URL against which relative links will be resolved, and the name of the default target for opening links and form submissions
8
Q
base element (example)
A
- Notice that we have only specified a relative address
….
9
Q
link element (explanation)
A
The link is for linking to other resources, such as stylesheets, favicons and syndication feeds.
10
Q
embed style in document
A
<!--
...css goes here..
-->
11
Q
embed java script in a document
A
My First Web Page
” + Date() + “
12
Q
noscript element (explanation)
A
used to provide alternative content for users using browsers that do not support scripting or have it disabled.
13
Q
noscript element (code)
A
Check out the current time:
World Time Server
14
Q
element attributes (list)
A
onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpopstate onresize onstorage onunload
15
Q
Tag
A
WWF
The World Wide Fund for Nature (WWF) is….
16
Q
Tag
A
The tag defines a section of navigation links.
Not all links of a document must be in a element. The element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
17
Q
Tag
A
tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
18
Q
Tag
A
Epcot Center
The Epcot Center is a theme park in Disney World, Florida.
19
Q
Tag
A
The tag specifies a header for a document or section.
The element should be used as a container for introductory content or set of navigational links.
You can have several elements in one document.
20
Q
Tag
A
tag defines a footer for a document or section.
A element should contain information about it’s containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You can have several elements in one document.
21
Q
Tag (explanation)
A
<!DOCTYPE html>
Written by Jon Doe.
Visit us at: Example.com
Box 564, Disneyland USA
22
Q
Tag
A
tag is supported in all major browsers.
23
Q
Tag
A
represents the title of a work, such as an article, a book, a poem, a song, a film, or any other creative work.
24
Q
, , , , , , and element
A
The , , , , , , and tags are all phrase tags. They are not deprecated, but it is possible to achieve richer effect with CSS.
25
Tag
tag defines marked text.
Use the tag if you want to highlight parts of your text.
26
progress element (code)
Only in Firefox, Opera, Chrome
Downloading progress:
Note: The progress element is currently supported in Firefox, Opera, and Chrome.
27
```
meter element (code)
Chrome, Opera
```
2 out of 10
60%
28
code element (expl+code)
represents a fragment of computer code.
Computer code
29
var element (expl+code)
represents a fragment of computer code.
variable
30
sample element (expl+code)
represents a fragment of computer code.
variable
31
HTML5 and Tags
This text contains subscript text.
This text contains superscript text.
32
HTML5 Tag (expl)
tag specifies a ruby annotation.
Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian characters.
33
html comment
34
HTML5 Declaration
The declaration must be the very first thing in your HTML5 document, before the tag.
The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
35
HTML5 Tag code
The WHO was founded in 1948.
-------------------------------------------
The WHO was founded in 1948.
------------------------------------------
By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.
36
HTML5 Tag (expl)
The tag defines an area inside an image-map (an image-map is an image with clickable areas).
The element is always nested inside a tag.
37
HTML5 Tag (code)
| Click on the sun or on one of the planets to watch it closer:
38
HTML5 Tag
The tag defines sound, such as music or other audio streams.
-----------------------------------------
Your browser does not support the audio tag.
39
HTML5 Tag
tag defines a clickable button.
----------------------------------------
Click Me!
40
autofocus
---------------------------------
The autofocus attribute is supported in all major browsers, except Internet Explorer and Opera.
The autofocus attribute is a boolean attribute.
When present, it specifies that a button should automatically get focus when the page loads.
41
disabled
Specifies that a button should be disabled
42
HTML5 form Attribute
--------------------------------------------
The form attribute is supported in all major browsers, except Internet Explorer.
A button located outside a form (but still a part of the form):
------------------------------------------
First name:
Last name:
Submit
43
HTML5 formaction Attribute
The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute.
----------------------------------------
First name:
Last name:
Submit
Submit as admin
---------------------------------------
A form with two submit buttons. The first submit button submits the form data to "demo_form.asp", and the second submits to "demo_admin.asp":
44
HTML5 formtarget Attribute
-------------------------------
Not in Explorer
A form with two submit buttons. The first submit button submits the form data with default target ("_self"), and the second submits the form data to a new window (target="_blank"):
--------------------------------------------
First name:
Last name:
Submit
Submit to a new window
45
HTML5 name Attribute
Two buttons with equal names, that submit different values when clicked:
------------------------------------------
Choose your favorite subject:
HTML
CSS
46
HTML5 type Attribute
A form with two buttons. One submit button and one reset button:
------------------------------------------
First name:
Last name:
Submit
Reset
-------------------------------------
button - clickable button
submit - Default submits form-data
reset - button is a reset button (clears form-data)
47
HTML5 Tag code
Your browser does not support the canvas tag.
48
HTML5 height & weight Attribute
specifies height and weight of the cavans
| -------------------------------------
49
HTML5 Tag
The tag defines a table caption.
50
HTML5 Tag
The tag specifies column properties for each column within a element.
The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
-----------------------------------------
ISBN Title
3476896 My first HTML
5869207 My first CSS
---------------------------------
First column will bre read second yellow
51
HTML5 Tag
The tag specifies a group of one or more columns in a table for formatting.
The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
52
HTML5 Tag
The tag is used to group related elements in a form.
The tag draws a box around the related elements.
Tip: The tag defines a caption for the element.
53
HTML5 Tag
The tag defines a caption for a element.
The element can be placed as the first or last child of the element.
54
HTML5 Tag
The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
55
HTML5 Tag
The tag is used to create an HTML form for user input.
```
The element can contain one or more of the following form elements:
•
•
•
•
•
•
•
•
•
•
```
56
HTML5 Tag
The tag specifies an input field where the user can enter data.
elements are used within a element to declare input controls that allow users to input data.
An input field can vary in many ways, depending on the type attribute.
57
HTML5 width Attribute
The width attribute specifies the width of the element.
58
HTML5 value Attribute
The value attribute specifies the value of an element.
The value attribute is used differently for different input types:
•For "button", "reset", and "submit" - it defines the text on the button
•For "text", "password", "hidden" - it defines the initial (default) value of the input field
•For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)
Note: The value attribute is required with and .
Note: The value attribute cannot be used with .
59
Refresh document every 30 seconds
60
Define the last revision of your page:
61
Define a description of your web page:
62
Define keywords for search engines:
63
HTML5 Tag
The tag specifies a header for a document or section.
The element should be used as a container for introductory content or set of navigational links.
You can have several elements in one document.
Note: A tag cannot be placed within a , or another element.
64
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
•SVG images can be created and edited with any text editor
•SVG images can be searched, indexed, scripted, and compressed
•SVG images are scalable
•SVG images can be printed with high quality at any resolution
•SVG images are zoomable (and the image can be zoomed without degradation)
65
What is SVG?
* SVG stands for Scalable Vector Graphics
* SVG is used to define vector-based graphics for the Web
* SVG defines the graphics in XML format
* SVG graphics do NOT lose any quality if they are zoomed or resized
* Every element and every attribute in SVG files can be animated
* SVG is a W3C recommendation
66
Create a Canvas
Create a Canvas
A canvas is specified with the element.
Specify the id, width, and height of the element:
67
What is Canvas?
element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The element is only a container for graphics, you must use a script to actually draw the graphics.
A canvas is a drawable region defined in HTML code with height and width attributes.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
68
code to make drag and drop
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
69
event.preventDefault()
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
70
Steps to make an element draggable
1) Make an Element Draggable
2) What to Drag - ondragstart and setData()
3) Where to Drop - ondragover
4) Do the Drop - ondrop
71
Make an Element Draggable key to add to tag
First of all: To make an element draggable, set the draggable attribute to true:
72
tag to prevent a page from being cached on users browser
73
opens the new document in a new window.
a new window
74
is
non breaking space
75
What is the tag in HTML5 used for?
The tag is not supported in HTML5. Use the tag instead.
76
Tag code
W3Schools
77
Tag explanation
tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one element in a document, and it must be inside the element.
78
Tag
--------------------
currently supported only in Firefox and Chrome.
bdi stands for Bi-directional Isolation.
The tag isolates a part of text that might be formatted in a different direction from other text outside it.
This element is useful when embedding user-generated content with an unknown directionality.
79
Tag
-------------------------
all major browsers, except Internet Explorer.
The Word Break Opportunity () specifies where in a text it would be ok to add a line-break.
80
Tag
The tag is supported in all major browsers.
81
Tag
The element is used to create a drop-down list.
The tags inside the element define the available options in the list.
--------------------------------------
Volvo
Saab
Opel
Audi
82
autofocus Attribute
---------------------------------
currently supported in Opera, Chrome, and Safari.
The autofocus attribute is a boolean attribute.
When present, it specifies that the drop-down list should automatically get focus when the page loads.
83
disabled Attribute
The disabled attribute is a boolean attribute.
When present, it specifies that the drop-down list should be disabled.
A disabled drop-down list is unusable and un-clickable.
84
form Attribute
--------------------------
all major browsers, except Internet Explorer.
The form attribute specifies one or more forms the drop-down list belongs to.
85
multiple Attribute
The multiple attribute is a boolean attribute.
When present, it specifies that multiple options can be selected at once.
86
name Attribute
The name attribute specifies the name for a drop-down list.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
----------------------------
Volvo
Saab
Opel
Audi
87
size Attribute
size attribute specifies the number of visible options in a drop-down list.
--------------------------------------
Volvo
Saab
Opel
Audi
88
Tag
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
89
Tag
The tag specifies text that is no longer correct, accurate or relevant by stricking it out.
The tag should not be used to define replaced or deleted text, use the tag to define replaced or deleted text.
90
Tag
tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
91
Tag
tag defines what to show if a browser does NOT support ruby annotations.
92
Tag
dir Attribute
tag is used to override the current text direction.
---------------------
ltr
Specifies left-to-right text direction
rtl
Specifies right-to-left text direction
------------------------
93
Tag
----------------------
only supported by Internet Explorer 9.
The tag defines a command (a radiobutton, a checkbox, or a command button) that the user can invoke.
A command can be part of a context menu or toolbar, using the element, or can be put anywhere else in the page, to define a keyboard shortcut.
--------------------------------------
Save
94
Tag
tag is used to describe an item in a definition list.
95
Tag
same as
del> tag defines a text that has been deleted from a document.
96
Tag
The tag defines a division or a section in an HTML document.
The tag is used to group block-elements and format them with CSS.
97
Tag
------------------------------------
Tag
defines a definition list.
----------------------------------
tag defines an item in a definition list.
----------------------------------
tag is used in conjunction with (defines the definition list) and (describes the item in the list).
98
Tag
tag defines a container for an external application or interactive content (a plug-in).
99
height & weight Attribute
The height and weight attribute specifies the height adn weight of the embedded content, in pixels.
100
src Attribute
src attribute specifies the address of the external file to embed.
101
type Attribute
The type attribute specifies the MIME type of the embedded content.
102
Tag
The tag is not supported in HTML5.
The tag was used to define one particular window (frame) within a frameset.
The and tags are not supported in HTML5, because they have a negative effect on the usability of a web page.