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;
91 Cards in this Set
- Front
- Back
|
XHTML proper Internet MIME type
|
application/xhtml+xml
|
|
|
Anatomy of an HTML5 document
|
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>HTML5 Apprentice</title> </head> <body> <p>Hello World</p> </body> </html> |
|
|
Boolean attributes
|
Boolean attributes provide an effect solely based on their presence or absence within an element. In XHTML,
which requires that each attribute have a value, their value either is left empty or is set to a text string that is the same as the attribute name |
|
|
DOM
|
Document Object Model
a standard way of representing a document as a treelike data structure composed of connected nodes. The nodes represent the elements, attributes, and text content in the page. Through its branching, tree-like structure, the DOM describes how the nodes are nested inside of each other. |
|
|
HTML5 doctype
|
<!DOCTYPE html>
|
|
|
Doctypes in HTML serve two important purposes.
|
First, they inform user agents and validators what DTD the document is written against.
Second, doctypes inform browsers which parsing algorithm to use to read a document. |
|
|
web browsers commonly have three ways they can parse an HTML document
|
• No-quirks (or “standards”) mode
• Quirks mode • Limited-quirks (or “almost standards”) mode |
|
|
In order to be compatible with legacy systems that generate HTML code the doctype is
|
<!DOCTYPE html SYSTEM "about:legacy-compat">
|
|
|
In HTML 4.01, the meta element looked like this
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
|
HTML5 for backward-compatibility, but the preferred syntax is shorter and includes a new attribute, charset
|
<meta charset="UTF-8">
|
|
|
Traditionally, HTML elements have fallen under two categories
|
block and inline
|
|
|
in HTML5 we have 7 element categories
|
• Metadata content
• Flow content • Sectioning content • Heading content • Phrasing content • Embedded content • Interactive content |
|
|
MathML and SVG
|
Mathematical Markup Language (MathML)
Scalable Vector Graphics (SVG) since HTML5 may include XML-style syntax, both of these languages can be embedded within a regular HTML page |
|
|
a Obsolete attributes
area Obsolete attributes fieldset Obsolete attr |
a Obsolete attributes
charset, coords, datafld, datasrc, methods, name, rev, shape, urn area Obsolete attributes nohref fieldset Obsolete attr datafld |
|
|
body Obsolete attributes
br Obsolete attributes form Obsolete attr |
body Obsolete attributes
alink, background, bgcolor, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, text, vlink br Obsolete attributes clear form Obsolete attr accept |
|
|
button Obsolete attributes
caption Obsolete attributes h1 - h6 Obsolete attr |
button Obsolete attr
datafld, dataformatas, datasrc caption Obsolete attr align h1 - h6 Obsolete attr align |
|
|
col Obsolete attributes
div Obsolete attributes head Obsolete attr |
col
align, char, charoff, valign, width div align, datafld, dataformatas, datasrc head profile |
|
|
dl obsolete attributes
embed obsolete attributes hr Obsolete attr |
dl
compact embed align, hspace, name, vspace hr align, color, noshade, size, width |
|
|
html Obsolete attr
iframe Obsolete attr img Obsolete attr |
html Obsolete attr
version iframe Obsolete attr align, allowtransparency, datafld, datasrc, frameborder, hspace, longdesc, marginheight, marginwidth, scrolling, vspace img Obsolete attr align, border (except if value is 0), datafld, datasrc, hspace, longdesc, lowsrc, name, vspace |
|
|
input Obsolete attr
label Obsolete attr legend Obsolete attr |
input Obsolete attr
align, datafld, dataformatas, datasrc, hspace, usemap, vspace label Obsolete attr datafld, dataformatas, datasrc legend Obsolete attr align, datafld, dataformatas, datasrc |
|
|
label Obsolete attributes
legend Obsolete attributes li Obsolete attributes span obsolete attributes |
label Obsolete attributes
datafld, dataformatas, datasrc legend Obsolete attributes align, datafld, dataformatas, datasrc li Obsolete attributes type span datafld, dataformatas, datasrc |
|
|
link Obsolete attributes
menu Obsolete attributes meta Obsolete attributes table Obsolete attributes |
link Obsolete attributes
charset, methods, rev, target, urn menu Obsolete attributes compact meta Obsolete attributes scheme table Obsolete attributes align, background, bgcolor, border (except if value is 1 or ""), cellpadding, cellspacing, dataformatas, datapagesize, datasrc, frame, rules, summary, width |
|
|
object Obsolete attributes
ol Obsolete attributes option Obsolete attributes select Obsolete attributes |
object
align, archive, border, classid, code, codebase, codetype, datafld, dataformatas, datasrc, declare, hspace, standby, vspace ol compact option dataformatas, datasrc, name select datafld, dataformatas, datasrc |
|
|
p Obsolete attributes
param Obsolete attributes pre Obsolete attributes script Obsolete attributes |
p
align param datafld, type, valuetype pre width script event, for, language |
|
|
tbody Obsolete attributes
td Obsolete attributes textarea Obsolete attributes tfoot Obsolete attributes |
tbody
align, background, char, charoff, valign td abbr, align, axis, background, bgcolor, char, charoff, height, nowrap, valign, width textarea datafld, datasrc tfoot align, background, char, charoff, valign |
|
|
th Obsolete attributes
tr Obsolete attributes ul Obsolete attributes tfoot Obsolete attributes |
th
abbr, align, axis, background, bgcolor, char, charoff, height, nowrap, valign, width thead align, background, char, charoff, valign tr align, background, bgcolor, char, charoff, valign ul compact, type |
|
|
Web browser - layout engine
Chrome - ? Firefox - ? Opera - ? Safari - ? IE - ? |
Chrome - WebKit
Firefox - Gecko Opera - Presto Safari - WebKit IE - Trident |
|
|
accesskey attribute (general attributes for any element)
|
rovide access to elements on the page using the keyboard
Precisely which keyboard combination to use varies by browser and operating system, degrading the usefulness of this feature. |
|
|
tabindex attribute (general attributes for any element)
|
Press the Tab key repeatedly on your keyboard while on a web page, and you’ll see different page elements become highlighted
<ul> <li><a href="first.html" tabindex="1">First Item Active</a> <li><a href="third.html" tabindex="3">Third Item Active</a> <li><a href="second.html" tabindex="2">Second Item Active</a> </ul> |
|
|
title attribute
|
provides advisory information for an element. Often this is seen in the form of a tool tip when hovering over a link, form input field, or abbreviation or acronym
<a href="http://w3.org" title="World Wide Web Consortium">W3C</a> |
|
|
lang attribute
|
specifies what language the text within an element is written in
<html lang="en"> |
|
|
id attribute
|
used for assigning a unique identifier to a specific element on the page, which can subsequently be accessed using CSS or JavaScript for styling or scripting purposes
The value may appear once and only once per page so as to identify a single element |
|
|
class attribute
|
used for assigning a class identifier to a specific type of element on the page, which can subsequently be accessed using CSS or JavaScript for styling or scripting purposes
The value may appear multiple times per page. A particular class attribute value may contain multiple class names, each separated by a space. |
|
|
how to reference element with id="about"
class="test" using JS |
document.getElementById("abou")
document.getElementsByClassName("test") |
|
|
spellcheck attribute
|
specifying whether an element should be spellchecked
|
|
|
hidden attribute
|
is equivalent to using the CSS property and value display:none
|
|
|
data-* attribute
|
catchall of attributes, allowing any attribute name to be added for the purposes of storing custom data in HTML elements for the use of, for instance,
JavaScript applications |
|
|
data-* example
HTML: <button id="show-score-button">Show Scores</button> <ul> <li data-score="3200">Top Blaster Tom</li> <li data-score="2250">Middle Range Merv</li> <li data-score="1100">Last Pop Louis</li> </ul> A JavaScript function could then be written that replaces the user name with the winning score when clicking a button: |
function showScore() {
document.getElementById("show-score-button").onclick = function() { var entries = document.getElementsByTagName("li"); entries[0].innerHTML = entries[0].dataset["score"]; entries[1].innerHTML = entries[1].dataset["score"]; entries[2].innerHTML = entries[2].dataset["score"]; } } window.onload = showScore; |
|
|
transparent elements (def)
hybrid elements/content model (def) |
transparent elements - an element may not fit into any of the 7 model categories (like <html>)
hybrid elements fit into more than one category |
|
|
manifest attribute of html
|
used in a new API for creating offline applications
the essential functional components of a web application (the JavaScript, for instance) can be cached in the browser so that the page will still function if the user goes offline and reloads the page |
|
|
To redirect the page after a pause, a URL is added to the content attribute when using the refresh pragma directive. After the specified number of seconds, the page is redirected to the URL. A redirect would look like so:
|
<meta http-equiv="refresh" content="3; URL=homepage.html">
|
|
|
pragma directive def
|
When the http-equiv attribute is specified on a meta element, the element is a pragma directive.
<meta http-equiv="refresh" content="3; URL=homepage.html"> |
|
|
http-equiv attribute keyword list
|
State Keyword Notes
Content Language content-language Non-conforming Encoding declaration content-type Default style default-style Refresh refresh Cookie setter set-cookie Non-conforming |
|
|
base element def
|
Only one base element may be used per document
It should appear in the head before any other elements that include a URL in their attributes <base href="http://example.com/portfolio/" target="_blank" /> and this appeared in the body section: <a href="photographs.html">Photography</a> |
|
|
link element def
|
link element has the attributes href, rel, media, hreflang, type, and sizes
href specifies the address (URL) of the linked resource rel specifies the type of resource |
|
|
reference an RSS feed in
the head of your web page, like this: |
<link rel="alternate" href="http://example.com/feed/" type="application/rss+xml" />
|
|
|
style element
|
style element allows CSS style rules to be embedded directly into an HTML document
|
|
|
pre element
|
preserve the whitespace in your markup, so if that whitespace is important in understanding the content, such as in computer code samples, then use pre.
|
|
|
Three list types are available in the current HTML specification
|
unordered lists (ul),
ordered lists (ol), description lists (dl). |
|
|
reversed, start attributes for <ol>
|
reversed, determines what direction a list should be ordered. It is a Boolean attribute,
start - allows authors to start the numbering of an ordered list at a number other than 1 |
|
|
dl, dt, and dd
|
description list consists of an opening dl, followed by a term (dt), and then any number of descriptions (dd).
|
|
|
rowspan and colspan attributes
|
If you need a table cell to span more than one row or column, you can achieve this effect with the rowspan and colspan attributes, each of which takes a numerical value indicating how many cells a particular cell should stretch across.
|
|
|
placeholder attribute
new |
adds grayed-out text in the textarea element that provides a tip on what should be entered
|
|
|
fragment identifier
|
<a href="newpage.html#parttwo">link</a>
To link to a fragment identifier, a hash sign and value are added at the end of the URL, If you want to link to a fragment identifier element on the same page, there is no need to include the document filename: <a href="#parttwo">link</a> This would link to the element with the id of "parttwo," which may look like this: <h3 id="parttwo">Part Two</h3> |
|
|
fragment identifier
|
<a href="newpage.html#parttwo">link</a>
To link to a fragment identifier, a hash sign and value are added at the end of the URL, If you want to link to a fragment identifier element on the same page, there is no need to include the document filename: <a href="#parttwo">link</a> This would link to the element with the id of "parttwo," which may look like this: <h3 id="parttwo">Part Two</h3> |
|
|
how to print “Oh là là”
|
<i lang="fr">Oh là là!</i>
|
|
|
mark element
|
mark is a new element that can be used for highlighting some text for reference purposes
|
|
|
GET method
|
the data from a form submission appears in the website’s address URL
|
|
|
A simple web form for gathering user input
<form method="get" action="handle_form.php"> <p><label>Name: <input name="name" /></label></p> <p><label>Age: <input type="number" name="age" /></label></p> <p><button type="submit">Submit</button></p> </form> |
<p>
<?php if (isset($_REQUEST["name"]) && isset($_REQUEST["age"])){ echo "Name: " . $_REQUEST["name"] . "<br />"; echo "Age: " . $_REQUEST["age"]; } ?> </p> |
|
|
form action attribute
|
action attribute tells the user agent (the web browser) what it’s supposed to do with the contents of the form when the form is submitted (with a submit button, which is a form control element we’ll discuss later)
|
|
|
form method attribute
|
method attribute is where the form is set to use GET (the default) or POST
Use POST. when updating sever-side db or sendind sensitive data GET - for passive submission of data like query to search engine |
|
|
form accept-charset attribute
|
accept-charset attribute allows you to specify which character encodings the server can handle in the submitted form data. If not specified (the usual scenario), the character set of the page is used
|
|
|
form enctype attribute
|
enctype attribute is used to specify how to encode the form data when it is sent. It takes three possible values:
application/x-www-form-urlencoded, multipart/form-data, text/plain. |
|
|
form enctype attribute - text/plain value
|
sends the form data unencoded.
This value generally should not be used because it makes it difficult to pick out the form data. It is available mostly for historical reasons |
|
|
form enctype attribute - multipart/form-data value
|
when using a file input element (for uploading files, which is described later), in which case this attribute should contain a value of multipart/form-data
|
|
|
form enctype attribute - application/x-www-form-urlencoded value
|
default value for enctype
will encode the data in a URL-safe manner |
|
|
form target attribute
|
tells the browser where to open the URL specified in the action attribute
_blank - open form for submittal result in new window _self - open in same window _parent - will open it in the parent browsing context |
|
|
form name attribute
|
name, is used to identify the form to scripts. It’s essentially a unique ID given to a form
to identify it among all forms used on a page JS - use document.forms property if form is named name="contactform access with document.forms.contactform |
|
|
form autocomplete and novalidate attributes
|
they tell the browser whether to automatically fill in remembered values in the form and whether to validate the form’s input, respectively
|
|
|
color - form input type
support: Chrome, Opera date - form input type support: C,O,S |
<input type="color" name="favcolor">
<input type="date" name="datepic"> |
|
|
datetime - form input type
support: C,O,S datetime-local - form input type support: C,O,S |
<input type="datetime" name="bdaytime">
<input type="datetime-local" name="bdaytime"> |
|
|
email - form input type
support: F,C,O file - form input type support: all |
E-mail: <input type="email" name="usremail">
File: <input type="file" name="favcolor"> |
|
|
month - form input type
support: S,C,O number - form input type support: S,C,O |
Birthday (month and year): <input type="month" name="bdaymonth">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> |
|
|
password - form input type
radio - form input type range - form input type support: S,C,O |
<input type="password" name="favcolor">
<input type="radio" name="favcolor"> <input type="range" name="points" min="1" max="10"> |
|
|
reset - form input type
search - form input type support: S,C submit - form input type |
<input type="reset" name="favcolor">
<input type="search" name="googlesearch"> A button for submitting the form |
|
|
tel - form input type
support: No time - form input type support: S,C, O url - form input type support: F,S,O |
<input type="tel" name="usrtel">
<input type="time" name="usr_time"> <input type="url" name="homepage"> |
|
|
<input type="file" name="filedata" multiple />
|
By default only one file can be uploaded at a time; however, by adding the Boolean multiple
attribute to the file input control, multiple files can be selected for uploading: <input type="file" name="filedata" multiple /> |
|
|
file input includes an accept attribute
|
file input includes an accept attribute, which can in theory be used to restrict the types of files uploaded; however, in practice it is purely advisory and likely will be ignored. It accepts a commaseparated list of MIME types pertaining to acceptable file types, which, for example could look like accept="image/gif,image/jpeg,image/jpg".
|
|
|
pattern attribute
|
attribute takes a regular expression (regex)
<input type="tel" name="usphone" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" /> first digit would be a number between 2 and 9 and the rest would be between 0 and 9 NNN-NNN-NNNN |
|
|
Making input read-only
|
<input type="text" value="You can't delete this" readonly />
|
|
|
<datalist> Element example
no IE & Safari |
Creates a pre-populated list for an input element that works like type ahead
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
|
|
<select> multiple
|
Allows you to select multiple options from the select list
<select multiple="multiple" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> |
|
|
<fieldset> element
|
allows web authors to divide form controls into thematically linked sections, making it easier for users to work through the form while also enhancing accessibility for assistive devices.
<fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> |
|
|
<label> two ways to set up
|
<label>Favorite cheese: <input type="text" name="ch" /></label>
<label for="favcheese">Favorite cheese: </label> <input type="text" id="favcheese" name="ch" /> |
|
|
CSS sprites
|
used to consolidate a number of images together in one image for the purposes of reducing server requests. The images are laid out side-by-side and cropped to show different images from the one source image. Because this requires only one request as opposed to one for each image, there is a performance improvement to be gained.
|
|
|
There are two varieties of image
maps: |
server-side
client-side |
|
|
server-side sprite (def)
|
In a server-side image map, the pixel coordinates of the mouse click are sent to the server as an x, y coordinate pair. The server can then use that information to determine
where on the image the user clicked and respond with a subsequent action. All that is required to enable this functionality is to add the Boolean ismap attribute to an img element that is enclosed in an anchor element (a): <a href="process.php"><img ismap src="map.png" alt="" /></a> After clicking the image, the coordinates of where the image was clicked (relative to the upper-left corner of the image) appear in the URL as a querystring, like process.php?54,77. |
|
|
client-side sprite (def)
|
works on the same principle as a server-side image map, but the hotspot areas are defined at the client (the web browser) instead of the server. This is a preferable method.
|
|
|
client-side sprite (code)
|
<img src="banner.png" alt="" width="300" height="272" usemap="#bannermap" />
<map name="bannermap"> <area shape="circle" coords="52,76,39" href="/about.html" alt="About" />• <area shape="rect" coords="120,56,187,102" href="/contact.html" alt="Contact" /> <area shape="poly" coords="265,148,221,99,221,42,266,24" href="/portfolio.html" alt="Portfolio" /> <area shape="default" href="/index.html" alt="Homepage" /> </map> |
|
|
HTML vs XHTML syntax
|
<img>, <br> vs <img />, <br />
<a href=contact.html> vs <a href="contact.html"> XHTML syntax is recommended for clarity |
|
|
DTD
|
Document Type Definition
DTD is basically a page detailing the rules and grammar of the markup. |
