HTML 5 Flashcards
basic html document
<!DOCTYPE html>
Example 01 This is my first document.
XHTML Example
An HTML Document
Example
This is an example HTML document.
Why XHTML document does not need to include the DOCTYPE
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.
Metadata elements
appear within the head of a document. Some common examples of metadata elements include: title, meta, link, script and style.
It is considered good practice to specify the primary language of the document on this element using the ____________ tag
<!DOCTYPE html>
... ...
xmlns attribute
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.
base element (explanation)
specifying a base URL against which relative links will be resolved, and the name of the default target for opening links and form submissions
base element (example)
- Notice that we have only specified a relative address
….
link element (explanation)
The link is for linking to other resources, such as stylesheets, favicons and syndication feeds.
embed style in document
<!--
...css goes here..
-->
embed java script in a document
My First Web Page
” + Date() + “
noscript element (explanation)
used to provide alternative content for users using browsers that do not support scripting or have it disabled.
noscript element (code)
Check out the current time:
World Time Server
element attributes (list)
onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpopstate onresize onstorage onunload
Tag
WWF
The World Wide Fund for Nature (WWF) is….
Tag
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.
Tag
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.
Tag
Epcot Center
The Epcot Center is a theme park in Disney World, Florida.
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.
Tag
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.
Tag (explanation)
<!DOCTYPE html>
Written by Jon Doe.
Visit us at: Example.com
Box 564, Disneyland USA
Tag
tag is supported in all major browsers.
Tag
represents the title of a work, such as an article, a book, a poem, a song, a film, or any other creative work.
, , , , , , and element
The , , , , , , and tags are all phrase tags. They are not deprecated, but it is possible to achieve richer effect with CSS.
Tag
tag defines marked text.
Use the tag if you want to highlight parts of your text.
progress element (code)
Only in Firefox, Opera, Chrome
<!DOCTYPE html>
Downloading progress:
Note: The progress element is currently supported in Firefox, Opera, and Chrome.
meter element (code) Chrome, Opera
<!DOCTYPE html>
2 out of 10
60%
code element (expl+code)
represents a fragment of computer code.
<!DOCTYPE html>
Computer code
var element (expl+code)
represents a fragment of computer code.
<!DOCTYPE html>
variable
sample element (expl+code)
represents a fragment of computer code.
<!DOCTYPE html>
variable
HTML5 and Tags
<!DOCTYPE html>
This text contains subscript text.
This text contains superscript text.
HTML5 Tag (expl)
tag specifies a ruby annotation.
Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian characters.
html comment
<!-- Text here-->
HTML5 <!DOCTYPE> Declaration
The <!DOCTYPE> declaration must be the very first thing in your HTML5 document, before the tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
HTML5 Tag code
<!DOCTYPE html>
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.
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.
HTML5 Tag (code)
<!DOCTYPE html>
Click on the sun or on one of the planets to watch it closer:
HTML5 Tag
Your browser does not support the audio tag.
HTML5 Tag
Click Me!
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.
disabled
Specifies that a button should be disabled
The form attribute is supported in all major browsers, except Internet Explorer.
First name:
Last name:
Submit
HTML5 formaction 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”:
Not in Explorer
First name:
Last name:
Submit
Submit to a new window
HTML5 name Attribute
Choose your favorite subject:
HTML
CSS
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)
HTML5 Tag code
<!DOCTYPE html>
Your browser does not support the canvas tag.
HTML5 height & weight Attribute
specifies height and weight of the cavans
————————————-
HTML5 Tag
The tag defines a table caption.
HTML5 Tag
The tag specifies column properties for each column within a element.
<!DOCTYPE html>
ISBN Title
3476896 My first HTML
5869207 My first CSS
First column will bre read second yellow
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.
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.
HTML5 Tag
The tag defines a caption for a element.
The element can be placed as the first or last child of the element.
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.
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: • • • • • • • • • •
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.
HTML5 width Attribute
The width attribute specifies the width of the element.
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 .
Refresh document every 30 seconds
Define the last revision of your page:
Define a description of your web page:
Define keywords for search engines:
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.
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)
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
Create a Canvas
Create a Canvas
A canvas is specified with the element.
Specify the id, width, and height of the element:
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.
code to make drag and drop
div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
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()
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
Make an Element Draggable key to add to tag
First of all: To make an element draggable, set the draggable attribute to true:
tag to prevent a page from being cached on users browser
opens the new document in a new window.
a new window
is
non breaking space
What is the tag in HTML5 used for?
The tag is not supported in HTML5. Use the tag instead.
Tag code
W3Schools
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.
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.
all major browsers, except Internet Explorer.
The Word Break Opportunity () specifies where in a text it would be ok to add a line-break.
Tag
The tag is supported in all major browsers.
Tag
The element is used to create a drop-down list.
Volvo
Saab
Opel
Audi
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.
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.
all major browsers, except Internet Explorer.
The form attribute specifies one or more forms the drop-down list belongs to.
multiple Attribute
The multiple attribute is a boolean attribute.
When present, it specifies that multiple options can be selected at once.
name Attribute
The name attribute specifies the name for a drop-down list.
Volvo
Saab
Opel
Audi
size Attribute
Volvo
Saab
Opel
Audi
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.
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.
Tag
tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
Tag
tag defines what to show if a browser does NOT support ruby annotations.
Tag
dir Attribute
ltr
Specifies left-to-right text direction
rtl
only supported by Internet Explorer 9.
The tag defines a command (a radiobutton, a checkbox, or a command button) that the user can invoke.
Save
Tag
tag is used to describe an item in a definition list.
Tag
same as
del> tag defines a text that has been deleted from a document.
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.
Tag
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).
Tag
tag defines a container for an external application or interactive content (a plug-in).
height & weight Attribute
The height and weight attribute specifies the height adn weight of the embedded content, in pixels.
src Attribute
src attribute specifies the address of the external file to embed.
type Attribute
The type attribute specifies the MIME type of the embedded content.
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.
Tag
HTML5 Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>
HTML5 <hgroup> Tag
Example
Use <hgroup> to group headings:
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
Browser Support
The <hgroup> tag is supported in all major browsers.
Definition and Usage
The <hgroup> tag is used to group heading elements.
The <hgroup> element is used to group a set of <h1> to <h6> elements, when a heading has multiple levels (subheadings).
Tag
The tag defines a thematic break in an HTML page (e.g. a shift of topic).
The element is used to separate content (or define a change) in an HTML page.
Tag
tag defines a part of text in an alternate voice or mood. The tag is typically displayed in italic type.
Tag
tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
name Attribute
The name attribute specifies a name for the .
height & weight Attribute
src Attribute
The src attribute specifies the address of the document to embed in the inline frame.
Tag
tag specifies video, such as a movie clip or other video streams.
autoplay Attribute
The autoplay attribute is a boolean attribute.
height & weight Attribute
specifies the height and weight of the video
loop Attribute
The loop attribute is a boolean attribute.
When present, it specifies that the video will start over again, every time it is finished.
all major browsers, except Internet Explorer and Safari.
The muted attribute is a boolean attribute.
When present, it specifies that the audio output of the video should be muted.
poster Attribute
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
preload Attribute
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
Tag
tag defines a row in an HTML table.
Tag
The tag defines an ordered list.
Use the tag to define list items.
Tag
tag is used to group header content in an HTML table.
The element is used in conjunction with the and elements to specify each part of a table (header, body, footer).
Tag
The tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
- Header cells - contains header information (created with the element)
- Standard cells - contains data (created with the element)
The text in elements are bold and centered by default.
The text in elements are regular and left-aligned by default.
scope Attribute
The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
rowspan Attribute
rowspan attribute defines the number of rows a header cell should span.
Tag
tag is supported in all major browsers.
cols Attribute
The cols attribute specifies the visible width of a text area.
Tip: The size of a textarea can also be set by the CSS height and width properties.
disabled Attribute
The disabled attribute is a boolean attribute.
When present, it specifies that the text area should be disabled.
A disabled text area is unusable and the text is not selectable (cannot be copied).
form Attribute
The form attribute specifies one or more forms the text area belongs to.
all major browsers, except Internet Explorer and Safari.
The required attribute is a boolean attribute.
When present, it specifies that a text area is required/must be filled out (in order to submit the form).
readonly Attribute
The readonly attribute is a boolean attribute.
When present, it specifies that a text area should be read-only.
wrap Attribute
The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
Tag
The tag defines a standard cell in an HTML table.
Tag
The tag is used to group the body content in an HTML table.
The element is used in conjunction with the and elements to specify each part of a table (body, header, footer).
Tag
The tag defines an HTML table.
An HTML table consists of the element and one or more , , and elements.
Tag
The tag is used to define style information for an HTML document.
Inside the element you specify how HTML elements should render in a browser.
Each HTML document can contain multiple tags.
Tag
The tag is used to specify multiple media resources for media elements, such as and .
The tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.
Tag
Browsers often insert quotation marks around the quotation.
Tag
tag defines preformatted text.
Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Tag
The tag is used to define parameters for plugins embedded with an element.
Tip: HTML 5 also includes two new elements for playing audio or video: The and tags.
Tag
The tag defines an option in a select list.
The element goes inside a or element.
Tag
The is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.
Tag
The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
You can also use the tag to embed another webpage into your HTML document.
You can use the tag to pass parameters to plugins that have been embedded with the tag.
Tagv
Not Supported in HTML5.
Tag
areas.
The name attribute of the element is associated with the ‘s usemap attribute and creates a relationship between the image and the map.
The element contains a number of elements, that defines the clickable areas in the image map.
Tag
The tag defines the relationship between a document and an external resource.
The tag is most used to link to style sheets.
type Attribute
The type attribute specifies the MIME type of the linked document/resource.
This attribute is only used if the href attribute is set.
A very common MIME type for is “text/css”, which specifies a style sheet.
rel Attribute
The required rel attribute specifies the relationship between the current document and the linked document/resource.
rel Attribute values 1
- alternate - Links to an alternate version of the document (i.e. print page, translated or mirror)
- author - Links to the author of the document
- help - Links to a help document
- icon - Imports an icon to represent the document
- license - Links to copyright information for the document
rel Attribute values 2
- next - Indicates that the document is a part of a series, and that the next document in the series is the referenced document
- prefetch - Specifies that the target resource should be cached
- prev - Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
- search - Links to a search tool for the document
- stylesheet - URL to a style sheet to import
Tag
The tag defines a list item.
The tag is used in ordered lists(), unordered lists (), and in menu lists ().
Tag
The tag defines a caption for the , , and the elements
Tag
tag defines a label for an element.
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
Tag
tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
Tag
tag defines a text that has been inserted into a document.
Tag
The tag defines an image in an HTML page.
The tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the tag inside tags.
Make an Element Draggable
What to Drag - ondragstart
ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
method sets the data type and the value of the dragged data
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}Where to Drop - ondragover
The ondragover event specifies where the dragged data can be dropped.
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()
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
draww lines in canvas code
<!DOCTYPE html>
Your browser does not support the canvas element.
HTML5 Geolocation
HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
method to get the user’s position
getCurrentPosition()
Geolocation error codes
- Permission denied - The user did not allow Geolocation
- Position unavailable - It is not possible to get the current location
- Timeout - The operation timed out
simple Geolocation example returning the latitude and longitude of the user’s position code
<!DOCTYPE html>
Click the button to get your coordinates:
Try It Longitude: “ + position.coords.longitude; }
display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps
<!DOCTYPE html>
Click the button to get your position:
Try It
“; }
getCurrentPosition() Method - Return Data
coords.latitude - The latitude as a decimal number
coords.longitude - The longitude as a decimal number
coords.accuracy - The accuracy of position
coords.altitude - The altitude in meters above the mean sea level
coords.altitudeAccuracy - he altitude accuracy of position
coords.heading - The heading as degrees clockwise from North
coords.speed - The speed in meters per second
timestamp - The date/time of the response
watchPosition()
Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
clearWatch()
Stops the watchPosition() method.
What is HTML5 Web Storage?
With HTML5, web pages can store data locally within the user’s browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.
localStorage
stores data with no expiration date
sessionStorage
stores data for one session
Before using web storage, check browser support for localStorage and sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}localStorage Object note
localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
sessionStorage Object notes
sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.
localStorage Object example set a local storage
<!DOCTYPE html>
