Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

World Wide Pond Devlpmnt/Design > IES: HTML > Flashcards

IES: HTML Flashcards

1
Q

<p>
</p>

A
  • Block element
  • Paragraph container separates content into sentences and paragraphs to be more easily read and more readily understood
  • The browser usually separates each paragraph element typically leaving two empty lines between them.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

<article>
</article>

A
  • Article container element
  • contains a stand-alone composition
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

<a></a>

A
  • The anchor is an Inline element that defines a hyperlink which allows users to navigate from one page to another.
  • The href attribute is most important to this element indicating the link’s destination: Without href, there is no hyperlink.
  • The anchor can also include a title attribute displaying a “tooltip” when the hyperlink is hovered over.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

URL

A
  • A web address is formally known as a uniform resource locator
  • Has three parts: protocol, domain, and its path
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

HTML

A
  • hypertext markup language
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

HTTP

A
  • Hypertext transfer protocol
  • This is the first of the three parts that make up the URL: the protocol
  • Always appears as the URL prefix: http://
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

HTTPS

A
  • Hypertext transfer protocol secure
  • Always appears as the URL prefix : https://
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Protocol

A
  • A set of rules governing the exchange or transmission of data between devices
  • Denoted by the prefix on any URL
  • (example http://… or https://…)
  • 1st of 3 parts of the URL
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

IP

A
  • Internet Protocol
  • The numerical address of a specific domain name
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

WHATWG

A
  • Web hypertext application technology working group
  • An organization or group that sustains or supports the standard of the HTML language established by the W3C to prevent that Global Internet language from being fragmented or compromised
  • This agency maintains the ever-evolving HTML living standard as technology in the world wide web culture demands
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

W3C

A
  • Short for World Wide Web Consortium
  • It is the international governing body for the development of platform-independent web standards and specifications
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Domain Or domain name

A
  • The hostname of the computer from which the file can be downloaded. For instance: www.example.com
  • The second of three parts of a URL
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Path

A
  • The file name prefixed by any Parent Directory names where applicable. For instance:/htdocs/index HTML
  • The third of three parts that form a URL
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

DNS

A
  • The domain name system (DNS) Is the phone book of the internet. Humans access information online through domain names, like nytimes.com or espn.com
  • DNS servers translate domain names into IP addresses, so browsers can load Internet resources.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Webserver

A
  • The World Wide Web is comprised of a series of large-capacity computers known as web servers.
  • Upon request from a computer for a resource, a web server will send back response headers and a copy of the requested file or an error message.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

HTML document skeletal structure

A

The skeletal structure has three parts:
* document type declaration
* Head section
* Body section

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Document type declaration

A
  • <!doctype html>
  • Declaring precisely which version of HTML is used to mark up the document.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

<head>
</head>

A
  • provides descriptive data about the document itself, such as the document title and the character set used.
  • Non-empty element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

<body>
</body>

A
  • Contains the content that is to appear when the document gets loaded into a web browser
  • Non-empty element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

HTML fundamental structure (basic coding structure)

A

<!doctype html>

<html>
<head>
<!--Data describing the document to be added here. →
</head>

<body>
<!--Content to appear in the browser to be added here.–>
</body>
</html>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

lang

A
  • attribute of the HTML root element
  • <html lang=”en”> (the previous “lang” attribute code appoints the document’s language as English) (“ar”: Arabic, “fr”: French, “es”: Spanish)
  • attribute of the HTML root element
  • <html lang=”en”> (the previous “lang” attribute code appoints the document’s language as English) (“ar”: Arabic, “fr”: French, “es”: Spanish)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

<meta></meta>

A
  • empty element
  • presents Information or parameters about the document itself
  • always appears in the head of the document’s HTML coding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Charset

A
  • Character-set
  • Charset is an attribute of the meta element
  • Example coding: ( <meta charset=”utf-8”> )
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

UTF-8

A
  • Setting the Charset as utf-8 assigns an 8-bit Unicode Transformation Format For the HTML document
  • A type of character encoding format
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

<title>
</title>

A
  • Text container in the head where the doc’s title is placed
  • very important for SEO.
    Used extensively:
  • bookmarks
  • Title bar
  • Navigation tab
  • History
  • Search engines
  • Title should be short and meaningful: ideal length- 10 characters or less.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

SEO

A
  • Search Engine Optimization.
  • Highly prized process of improving a page’s organic page rankings (rank in search results) presumably, maximizing the number of visitors to a particular website.
  • It is useful to provide sufficient metadata that describes the page content well.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

<h1>
</h1>

A
  • Block element
  • The tags For this element contain the largest of 6 different sizes of headings and subheadings
  • Usually holds the doc’s main heading (Should be only one in doc, but can be more)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

W3C Validator Tool

A
  • Validator.w3.org
  • Validator tools verify that any HTML doc will conform to its specified document type declaration: thereby, always appearing correctly in any standards-compliant browser.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

HTML “character entities”

A
  • In HTML coding, the way of including special characters in the document
  • Begins with an ampersand and ends with a semicolon (& … ;) (W3C Chart of all character entities at: dev.w3.org/html5/html-author/charref)
  • Best avoided in doc titles as the vocal narrator used by visually impaired viewers may read entity as a word.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

<!--"&lt;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (<)
  • These are often needed to avoid confusion with the angled brackets that surround each HTML tag.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

<!--"&gt;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (>)
  • These are often needed to avoid confusion with the angled brackets that surround each HTML tag.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Word of coding:
* begins with “ &…”
* followed by “..nbsp..”
* ending in “..; “

(The only coding relevant to this question lies between the quotes.)

A
  • (a single non-breaking space)
  • A commonly used HTML entity
  • A space that will not break into a new line.
  • Two words separated by a non-breaking space will stick together (not break into a new line).
  • This is handy when breaking the words might be disruptive.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

<!--"&bull;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (bullet point)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

<!--"&copy;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (©)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

<!--"&trade;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (™)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

<!--"&reg;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • (®)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

<!--"&quot;"-->

(The only coding relevant to this question lies between the quotes.)

A
  • ( “ ), (Quotation marks)
  • Example: "HTML in easy steps" (Appears as “HTML in easy steps”)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

To launch the narrator in Windows 10

A
  • WinKey + Ctrl + Enter
  • Press the “tab” button to hear the document title
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Coding in HTML to place a comment that is ignored by the browser

A
  • <!--notes or comments here-->
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Optimize doc view (all screens)

A
  • Optimizes the page view for smaller / larger screens: ensures doc will fill the device screen width
  • Sets the initial zoom level so the content is not zoomed.
  • Coding: <meta name=”viewport” content=”width=device-width, initial-scale=1”>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Auto-page reload

A
  • A technique often used in websites to dynamically update news our status items
  • Does not depend on JavaScript support
  • Coding: <meta http-equiv=”refresh” content=”5”>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Auto page redirection

A
  • Coding: <meta http-equiv=”refresh” content=”5; url=’new-page.html’”>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

SERP

A
  • search engine result page
  • Will Show The Meta description in search results below the page title
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Meta “description”

A
  • Should be between 50 and 160 characters long
  • Including keywords relative to the text content is important for SEO purposes
  • Coding: <meta name=”description” content=”place the page description here including the relevant keywords of the document within”>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

Canonical link

A
  • If a website contains pages of identical or very similar content you can specify which page is to be indexed by including this.
    • designates the original source for a piece of content
  • Coding: <link rel=”canonical” href=”http://www.examplepage.com”/>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

<link></link>

A
  • Empty element
  • Used to incorporate resources in a document
  • ONLY appears in the head of the document (may contain many links)
  • Must contain “rel” and “href” attributes
  • May contain title or type attributes
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

type

A
  • Hints at the MIME type of the link resource.
  • For <button> elements, attribute specifies the type of button.</button>
  • For <input></input> elements, attribute specifies the type of <input></input> element to display.
  • For <embed></embed>, <link></link>, <object>, 
    , <source></source>, and <style> elements attribute specifies the Internet media type (formerly known as MIME type).</style>
    </object>
  • May intend to help search engines to locate resources associated with the HTML document.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

title

A
  • Specifies extra information about an element or resource.
  • The information is most often shown as a tooltip text when the mouse moves over the element.
  • The title attribute is part of the Global Attributes, and can be used on any HTML element.
  • May include a title for the page in another language
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

CSS

A
  • Cascading Style Sheets contain hierarchical information about how the content of a web page will be rendered in a browser or the presentational aspects of the content.
    When multiple rules select the same property, the order of precedence:
  • 1st) Generally, the rule read last by browser;
  • 2nd) In-line rules (style as attribute);
  • 3rd) embedded rules (<style> tags in head);</style>
  • 4th) external rules (<link></link> tag (in head) to stylesheet);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

rel

A
  • Attribute : “relationship”
  • Example : <link rel=”stylesheet” href=”Daigle-style.css”>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

href

A
  • The Hypertext reference is an attribute of the anchor tag, which is
  • used to identify sections within a document (i.e. internal links)
  • used to identify links to pages in other sites (i.e. external links)
  • The HREF contains two components: the URL, which is the actual link, and the clickable text that appears on the page, called the “anchor text.”
  • Example: <a href=”#a”>A</a>
    • (in-document hypertext navigational link anchor)
  • Example: <a href=”laurendaigle.com”>Lauren Daigle’s Site</a>
    • (external hypertext link anchor)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

<style>

</style>

















A



















    

  • Added within or linked to an HTML document To present the rules governing how the content will appear 
    Rules governing the content appearance are linked to the html doc through:
    • 

  • Can be embedded within the head section
    • 

  • Employed as an attribute in-line
    • 

  • Linked by use of an external document to single or multiple HTML documents
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















53










Q













<div>
</div>

















A



















    

  • Block element; semantically meaningless; anonymous. (Best avoided in favor of more meaningful tags)
    • 

  • Not to be used for structural purposes: should be used for stylistic purposes.
    • 

  • Can include an id, class, or style attribute for application of style rules.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















54










Q













<span></span>

















A



















    

  • In-line element; semantically meaningless; anonymous (Best avoided in favor of more meaningful tags)
    • 

  • Not to be used for structural purposes: it should rather be used for stylistic purposes.
    • 

  • Can include an id, class, or style attribute for application of style rules.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















55










Q













<script>

</script>

















A



















    

  • Best placed right before the body closing tag (</body>), so browser Can process doc content before reading script
    • 

  • Embeds JavaScript within an HTML document; links doc to a separate file: <script src=”script.js”> … </script>; or JS can be specified by script in-line to on-event (Ex: a mouse click event - <h1 onclick=”alert(‘Clicked!’)”>
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















56










Q













<noscript>
</noscript>

















A



















    

  • Only displayed when JavaScript functionality is absent or disabled
    • 

  • Text container for Alternative fallback content (Example- <noscript>JavaScript Is Not Enabled!</noscript> )
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















57










Q













<slot>
</slot>

















A



















  • Exists purely for scripting















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















58










Q













<template>
</template>

















A



















  • Exists purely for scripting















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















59










Q













MIME

















A



















    

  • Multipart Internet Mail Extension
    • 

  • Standard for formatting files of different types, such as text, graphics, or audio, so they can be sent over the internet and seen or played by a web browser or email application.
    • 

  • Describes file types: ex.: “text/html”
    • 

  • Official list at: http://www.iana.org/assignments/media-types/media-types.xhtml
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















60










Q













<base></base>

















A



















    

  • Empty element
    • 

  • Specifies an alternate directory holding resources/files to be recognized by the browser. ( <base href=”http://localhost/resources/”> )
    • 

  • Must be placed in doc head before any <link></link> elements.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















61










Q













Absolute address

















A



















    

  • Includes the entire URL: protocol, domain name, and path
    • 

  • Example: “https://www.laurendaigle.com/Daigle-turquoise.jpg”
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















62










Q













Relative address

















A



















    

  • Can reference a file in home directory of the main HTML document by file name and may use the ../ syntax to reference that parent directory. (Example: /Daigle-turquoise.jpg)
    • 

  • By default, the browser will look in HTML doc’s home directory.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















63










Q













Permitted “rel” values

















A



















    

  • (Many are intended to help search engines locate resources associated with that HTML document (a.k.a. Increase traffic to your webpage/website/document))
    • 

  • Alternate
    • 

  • Author
    • 

  • Bookmark
    • 

  • Help
    • 

  • Icon
    • 

  • License
    • 

  • Next
    • 

  • Nofollow
    • 

  • Noreferrer
    • 

  • Prev
    • 

  • Search
    • 

  • Stylesheet
    • 

  • Tag
    • 

  • Shortcut icon
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















64










Q













Icon

















A



















    

  • Established in the head
    • 

  • Force browser to refresh icon- assign “favicon.ico?v=2” to link’s href attribute
    • 

  • Coding: <link rel=”shortcut icon” href=”favicon.ico”>
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















65










Q













Heading elements

















A



















    

  • Order of importance (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) should implicitly convey the document structure through correct sequencing of the heading tags
    • 

  • Correct sequencing and use of meta keywords in headings is important to SEO and allows syndication into another site
    **Never use heading tags for their style qualities
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















66










Q













<hgroup>
</hgroup>

















A





















    

  • Grouping solution to the limited number of heading levels and the need to maintain a correctly sequenced document outline
    • 

  • Doc may contain multiple hgroup elements, but an hgroup may contain ONLY heading elements.
    • 

  • Ex. code
    • 



<hgroup>
<h1>HTML</h1>
<h2>Building better websites</h2>
</hgroup>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















67










Q













<header>
</header>

















A





















    

  • May contain heading; hgroup; intro items like icons, banners, and table of contents; etc
    • 

  • *You cannot Nest header elements one within another
    • 

  • Ex. code
    • 



<header>
<img src=”Daigle-turquoise-banner.jpg” width=”500” height=”72” alt=”Banner”>
<hgroup>
<h1>HTML</h1>
<h2>Building better websites</h2>
</hgroup>
</header>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















68










Q













<nav>
</nav>

















A





















    

  • Acts as a wrapper (not to replace any structural element) enclosing page-wide or site-wide navigation hyperlinks groups
    • 

  • Includes ONLY page-wide or site-wide nav hyperlinks groups
    • 

  • Ex. code
    • 



<nav id=”horizontal”>


<h2>Site Links</h2>


<p>
<a href=”#html”>Markup</a> | 
<a href=”#js”>Scripting</a> | 
<a href=”#css”>Style Sheets</a> </p>


</nav>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















69










Q













<img></img>

















A



















    

  • Empty element
    • 

  • used to embed an image in an HTML page
    • 

  • are not technically inserted into a web page: they are linked to web pages
    • 

  • creates a holding space for the referenced image
    • 

  • Ex. code
    <img src=”Daigle-turquoise-banner.jpg” width=”500” height=”72” alt=”Banner”>
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















70










Q













<menu>
</menu>

















A



















    

  • Includes a list of commands for the webpage or website
    • 

  • Groups of hyperlinks on a webpage navigating around the page or website should be enclosed in nav tags or menu tags
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















71










Q













<br></br>

















A



















  • Line break element Can force the text to wrap to The next line Before It would automatically wrap to the next line at the text container elements edge















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















72










Q













<footer>
</footer>

















A





















    

  • A footer can be included in a doc or article, section, etc. of a doc and provides info about the doc or division of the.doc
    • 

  • Might contain an address element (contact details, etc.); a small element (copyright, etc.); and a nav element
    • 

  • Ex. code
    • 



<footer>
<nav> … </nav>
<small>Copyright &copy; Example Corp.</small>
<address>www.example.com</address>
</footer>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















73










Q













<main>
</main>

















A





















    

  • Page content container located between the header and the footer
    • 

  • Ex. code
    • 



<body>
<header>
</header>
<main>
<p>(Page content goes here.)</p>
</main>
<footer>
</footer>
</body>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















74










Q













<small></small>

















A



















    

  • Formats text (fine print items) within the body of the document, but is only meant to contain short comments that  supplement surrounding content
    • 

  • Regarded as a side comment to surrounding text such as copyright information
    • 

  • *Does not denote content of lesser importance
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















75










Q













<address>
</address>

















A



















    

  • Container for Author’s name, author’s contact info, etc.
    • 

  • Often located in the footer element
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















76










Q













<article>
</article>

















A



















    

  • Contains a stand-alone composition
    • 

  • Might typically begin with its own heading followed by one or more paragraphs
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















77










Q













VPN

















A



















    

  • A virtual private network gives online privacy & anonymity by creating a private network from a public internet connection.
    • 

  • extends a private network across a public network
    • 

  • enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















78










Q













<aside>
</aside>

















A





















    

  • Typically a sidebar or footnote, it should contain stand alone info (*May contain a footer element, but not a nav hyperlink).
    • 

  • Can be nested in an article element incorporating contents SOMEWHAT RELATED to the main content, or used alone containing secondary content RELATED to the entire page, such as advertising.
    • 

  • Ex code
    • 



<article>
<p>Oscar Wilde</p>
<aside>(1854-1900)<br></br>
Was an Irish writer and poet.
</aside>
</article>

















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















79










Q













<section>
</section>

















A



















    

  • A grouping Element
    • 

  • Not  required in short docs unless you want to add section headings and footers
    • 

  • Content placed within a body element and nested within a main element can also then be nested in a section element
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















80










Q













<hr></hr>

















A



















    

  • Empty element
    • 

  • A horizontal rule tag can be inserted between paragraphs drawing a line separating them, but it may not be inserted inside of paragraph to separate sentences
    • 

  • It represents a “paragraph-level thematic break“ such as a scene change in a story
    • 

  • It represents the equivalent of an ellipsis standing alone on its own line
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















81










Q













Flow

















A



















    

  • the arrangement of page elements as defined by positioning statements and the order of html statements
    • 

  • how the different elements take up space and arrange themselves around each other.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















82










Q













Phrasing

















A



















    

  • The use of HTML phrase tags are special purpose tags, which define the structural meaning of a block of text or semantics of text.
    • 

  • Must always be enclosed by a flow element
    • 

  • Ex. <q> , <em></em></q>
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















83










Q













<b></b>

















A



















    

  • Changes font to bold
    • 

  • should <b>only be used as a last resort: One legitimate use is to mark up the lead sentence of an article</b>
    • 

  • No emphasis added or changed
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















84










Q













<q></q>

















A



















    

  • The quotes element causes the browser to automatically add quotation marks around the content
    • 

  • phrasing element
    • 

  • Quote elements can be nested one within another
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















85










Q













<em></em>

















A



















    

  • The emphasis element creates italics in the font and bears an emphasized semantic meaning in the content
    • 

  • Used  as an inline element for stylistic and semantic purposes with the font and content
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















86










Q













<blockquote>
</blockquote>

















A



















    

  • Intended to surround long quotations from another source and bears no quotation marks
    • 

  • Typically produces a rectangular block area to contain the quotation starting on a new line and indented from surrounding content
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















87










Q













<strong></strong>

















A



















    

  • Changes Font to bold
    • 

  • Emphasizes or increases Without changing the meaning of the sentence
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















88










Q













<i></i>

















A



















    

  • Changes font to italics  (should only be used as a last resort)
    • 

  • Text is enhanced without conveying extra importance such as technical terms
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















89










Q













<s>
</s>

















A



















    

  • The strikethrough is a phrasing element marking the text as being superseded by more accurate, relevant, up-to-date content
    • 

  • Typically displayed with a strikethrough line 
    **Should not be used to indicate edited content
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















90










Q













<del></del>

















A



















    

  • The deleted-text element formats text with a strikethrough, and may include a cite attribute to specify a doc’s URL that will explain the changes
    • 

  • Text within is regarded as having been removed from the document such as a completed item in a to-do list
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















91










Q













<ins></ins>

















A



















    

  • The inserted-text element formats text with an underline: may include a cite attribute to specify a docs URL explaining changes.
    • 

  • Text within is regarded as having been added to the document such as a new additional items in a to-do list
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















92










Q













<wbr></wbr>

















A



















    

  • The word-break-opportunity is a phrasing element INVISIBLY marking the text broken by this tag as being a suitable point at which to break the line of text
    • 

  • Particularly suitable for small devices for docs that may contain content that may exceed the width of browser
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















93










Q













<u></u>

















A



















    

  • The unarticulated annotation (underline) is a phrasing element marking the text as being different in some way to normal text content and is TYPICALLY underlined.
    • 

  • Has the purpose of labeling misspelled words or labeling proper names in Chinese.
    **Use is strongly discouraged due to confusion with hyperlinks.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















94










Q













<pre>
</pre>

















A



















    

  • Flow/Block element that preserves the preformatting  of the enclosed text: 
    1.) preserves white space; 
    2) renders all text with a fixed-width font; 
    3) disables automatic word-wrapping; 
    4) does not disable bi-directional processing
    • 

  • *Use spaces in the place of tabs when preparing pre-formatted text
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















95










Q













<mark></mark>

















A



















    

  • The marked-text is a phrasing element indicating the text as being of special significance for reference or notation.
    • 

  • Typically displayed in a colored background block to highlight the text
    • 

  • Not for  emphasis: only to be used to highlight the relevance or importance of the text within a doc
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















96










Q






























A



















    

  • The subscript element specifies inline text typically with a lowered baseline using smaller font displayed for solely typographical reasons.
    • 

  • Numbers (0-9) =   - 
    • 

  • *Any content can be included within the tags, whereas, the availability of character entity references is limited.
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















97










Q















<!--&#8320;-->


html coding : 



















A



















  • subscript “0”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















98










Q













<!--&#8321;-->

















A



















  • subscript “1”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















99










Q













<!--&#8322;-->

















A



















  • subscript “2”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















100










Q













<!--&#8323;-->

















A



















  • subscript “3”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















101










Q













<!--&#8324;-->

















A



















  • subscript “4”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















102










Q













<!--&#8325;-->

















A



















  • subscript “5”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















103










Q













<!--&#8326;-->

















A



















  • subscript “6”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















104










Q













<!--&#8327;-->

















A



















  • subscript “7”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















105










Q













<!--&#8328;-->

















A



















  • subscript “8”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















106










Q













<!--&#8329;-->

















A



















  • subscript “9”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















107










Q













 ; ⊃

















A



















    

  • The superscript (element and entity) specifies inline text typically with a raised baseline using smaller font and displayed for solely typographical reasons.
    • 

  • Numbers =  1= ¹ 2= ² 3= ³ 4= 5=  6=  7=  8=  9=  0= 
    • 

  • *Any content can be included within the tags, whereas, the availability of character entity references is limited.
    • 

    • 
2 appears larger than “ ²” ; however, the entity as opposed to the tag keeps line spacings equal
    • 
















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















108










Q













<!--&sup1;-->

















A



















  • superscript “1”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















109










Q













<!--&sup2;-->

















A



















  • superscript “2”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















110










Q













<!--&sup3;-->

















A



















  • superscript “3”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















111










Q













<!--&#8308;-->

















A



















  • superscript “4”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















112










Q













<!--&#8309;-->

















A



















  • superscript “5”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















113










Q













<!--&#8310;-->

















A



















  • superscript “6”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















114










Q













<!--&#8311;-->

















A



















  • superscript “7”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















115










Q













<!--&#8312;-->

















A



















  • superscript “8”















How well did you know this?






1


Not at all






2




3




4




5


Perfectly
















116










Q













<!--&#8313;-->


















A













  • superscript “9”















117










Q













<!--#8304-->


















A













  • superscript “0”















118










Q













<code></code>


















A













    

  • Inline element with content styled in a fashion intended to indicate that the text is a short fragment of computer code (by default, the text is in monospace font).
    **Remember to always nest a <code> element within a <pre> element to preserve the coding layout.</code>
    • 

  • *Use char entities to avoid conflict with active coding.
    • 
















119










Q













<var></var>


















A













    

  • A phrase tag used to define a variable in programming or in a mathematical expression.
    • 

  • The content inside is typically displayed in italics.
    • 
















120










Q













<sample>
</sample>


















A













    

  • Encloses inline text which represents sample (or quoted) output from a computer program.
    • 

  • Contents are typically rendered using the browser’s default monospaced font (such as Courier or Lucida Console).
    • 
















121










Q













<data>
</data>


















A













    

  • links a given piece of content with a machine-readable translation: used to add a machine-readable translation of a given content
    • 

  • This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.
    **If the content is time- or date-related, the <time> element must be used.</time>
    • 
















122










Q













<time>
</time>


















A













    

  • represents a specific period in time (time on a 24hr clock; a precise Gregorian calendar date; a valid time duration).
    • 

  • It may include the datetime attribute to translate dates into machine-readable format, (*allowing for better search engine results or custom features such as reminders).
    • 
















123










Q













datetime attribute


















A













    

  • Specifies date and time of inserted and deleted text.
    • 

  • Represents the date and time of the <time> element.</time>
    • 

  • Attribute Values: ( YYYY-MM-DDThh:mm:ssTZD (*valid format for datetime value)) : YYYY = year; MM = month; DD = day; T = required separator; hh = hour (Zulu time); mm = minute; ss = second; T = required separator; ZD = Time Zone Designator (Z for Zulu (a.k.a. Greenwich Mean Time)
    • 

  • ? time object (e.g. 40) ?
    • 
















124










Q













<abbr></abbr>


















A













    

  • The abbreviation element is used along with a title attribute to associate a full-text explanation with an abbreviation or acronym.
    • 

  • Full-text is only seen by website visitor using hovering cursor
    • 

  • Browsers, search engines, and assistive technologies do see and use full-text.
    • 
















125










Q













<cite></cite>


















A













    

  • The Citation element is used to reference a cited creative work,
    • 

  • must include the title of that work.
    • 

  • May be in an abbreviated form according to context-appropriate conventions
    • 
















126










Q













<dfn></dfn>


















A













    

  • the “definition element”, and it specifies a term that is going to be defined within the content.
    • 

  • nearest parent tag must also contain the definition/explanation
    • 
















127










Q













<kbd></kbd>


















A













    

  • a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
    • 

  • content displayed in the browser’s default monospace font.
    • 

  • This tag is not deprecated.
    • 
















128










Q













<meter>
</meter>


















A













    

  • defines a scalar measurement within a known range / fractional value. (a.k.a. a gauge).
    • 

  • Must include a value attribute; should not be used to indicate progress; should include alternate text describing the state of the gauge.
    • 

  • may include min or max attributes to define the range with default range being 0-1 assumed; low or high attributes effectively create a three-level sub-optimal range
    • 
















129










Q













<summary>
</summary>


















A













    

  • specifies a summary, caption, or legend for a <details> element’s disclosure box.</details>
    • 

  • toggles the state of the parent <details> element open and closed.</details>
    • 
















130










Q













title attribute


















A













    

  • used to specify extra information about the element.
    • 

  • Hovering cursor reveals the information -most often as a tooltip text
    • 
















131










Q













keycode


















A













    

  • This property of a KeyboardEvent is used for returning the Unicode character code of the key that has been used to trigger an onkeypress event. …
    • 

  • The key codes represent an actual key on the keyboard whereas character codes represent an ASCII character.
    **(The keyCode property is deprecated: It should be avoided to prevent RUN-TIME ERRORS in the future)
    • 
















132










Q













<bdi>
</bdi>


















A













    

  • Stands for Bi-Directional Isolation: Tells the browser’s bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
    • 

  • It’s particularly useful when a website dynamically inserts some text and doesn’t know the directionality of that text (Without, right-to-left languages are read back-to-front).
    • 
















133










Q













<details>
</details>


















A













    

  • specifies additional details that the user can open and close on demand.
    • 

  • By default, the widget is closed. When open, it expands, and displays the content within.
    • 
















134










Q













<bdo></bdo>


















A













    

  • Bidirectional Text Override element
    • 

  • Overrides the current directionality of text, so that the text within is rendered in a different direction (Without the bi-directional override, right-to-left languages are read back-to-front).
    • 
















135










Q













dir


















A













    

  • Specifies the text direction of the element’s content
    • 

  • It is essential to support languages that use right-to-left scripts such as Adlam, Arabic, Hebrew, N’Ko, Syriac, and Thaana.
    • 

  • Possible attribute values: ltr - (default) Left-to-right text direction; rtl - Right-to-left text direction; auto - Let the browser figure out the text direction, based on the content (only recommended if the text direction is unknown)
    • 
















136










Q













<ruby></ruby>


















A













    

  • Represents small annotations rendered above, below, or next to base text and usually used for showing the pronunciation of East Asian characters.
    • 

  • Can also be used for annotating other kinds of text, but this usage is less common.
    • 

  • Don’t confuse the ruby annotation with the Ruby programming language
    • 
















137










Q













<rb></rb>


















A













    

  • Marks the base text component of a <ruby> annotation which are used in East Asian typography.</ruby>
    • 

  • must be nested inside a <ruby> element.</ruby>
    • 

  • can have both semantic (<rtc>) and pronunciation (<rt>) annotations</rt></rtc>
    • 
















138










Q













<rp></rp>


















A













    

  • used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.
    • 

  • optional element used together with <ruby> and <rt> defining what to show for the unsupportive browsers</rt></ruby>
    • 
















139










Q













<rt></rt>


















A













    

  • An inline element specifying the ruby text component of a ruby annotation used to provide pronunciation, translation, or transliteration information for East Asian typography.
    • 

  • Use <rt> together with <ruby> and <rp></rp></ruby></rt>
    • 
















140










Q













<rtc></rtc>


















A













    

  • marks the ruby text container for ruby text components in a ruby annotation
    • 

  • specifies semantic annotations of characters that are presented in <rb> elements used inside a <ruby></ruby></rb>
    • 
















141










Q













hyperlink


















A













    

  • a link from a hypertext file or document to another location or file, typically activated by clicking on a highlighted word or image on the screen.
    • 

  • Each webpage hyperlink is sensitive to three interactive states: Hover, Active, and Visited.
    • 

  • Browsers distinguish links with underlining or colored borders typically.
    • 
















142










Q













accesskey


















A













    

  • Are the keyboard shortcuts to activate/focus specific elements (It supports all HTML elements), and are browser-dependent (may vary from browser to browser)
    • 

  • Designate a character key (must be any, single keyboard character) as specified for a particular hyperlink through the use of the accesskey attribute of an anchor tag
    • 

  • Utilize the shortcuts thus: “Alt+accesskey” for most browsers; “Alt+Shift+accesskey” for Firefox; “Cmd+accesskey” for Mac [and Apple?] users.
    • 
















143










Q













3 ways to access hyperlinks


















A













    

  • Pointer: hover cursor over hyperlink and click
    • 

  • Tab: repeatedly hit Tab until hyperlink is selected, then, click Enter.
    • 

  • Access key: hit a designated character key to focus on hyperlink and click Enter to activate.
    • 
















144










Q













Fragment links


















A















    

  • A short string of characters that refers to a resource that is subordinate to another, primary resource.
    • 

  • In a separate doc, the fragment identifier introduced by a hash mark # is the optional last part of a URL typically used to identify a portion of that doc: In the same doc, the fragment is specified to a hyperlink in the anchor’s href attribute (beginning with a #), and is specified in the target element by its id attribute.
    • 

  • Example code:
    • 



<p id=”top”>…</p> (target element)
<a href=”index.html#top”>Top</a> (nav hyperlink to different doc)
<a href=”#top”>Top</a> (site or page nav hyperlink)

















145










Q













<ul>
</ul>


















A













    

  • Defines an unordered list of items
    • 

  • Typically rendered as a bulleted list.
    • 

  • Use the <ul> tag together with the <li> tag to create unordered lists.
    • 
















146










Q













href protocols


















A













    

  • Typical- http//: … or https//: … (various nav hyperlinks)
    • 

  • Javascript- href=”javascript: …” (various JavaScript event hyperlinks)
    • 

  • Mailto- href=”… @ gmail.com” (auto-adds the email in the “To:” field hyperlink)
    • 
















147










Q













list-style-type property


















A













    

  • style attribute that specifies a Bullet’s style value of (disc(default style), circle, square, or none)
    • 

  • style attribute that specifies a counter’s style value of (Decimals, Roman numerals, Latin  letters, Greek letters, Georgian numbers, Armenian numbers, or none(to suppress numbering))
    • 

  • Ex coding- ( <ul style=”list-style-type: square”> … </ul> )
    • 
















148










Q













<li>
</li>


















A













    

  • The list item is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
    • 

  • Contains individual list items
    • 
















149










Q













list-style-image property


















A













    

  • style attribute that specifies that the list-style-image property replaces the list-item marker with an image.
    • 

  • Note: Always specify the list-style-type property in addition (This property is used if the image for some reason is unavailable).
    • 

  • Ex coding- ( <ul style=”list-style-image: ‘Daigle-turquoise-small.jpg’”> … </ul> )
    • 
















150










Q













<ol>
</ol>


















A













    

  • In the ordered list, each list item is preceded by a numerical or alphabetical identifier (as opposed to bullets or no identifier) (CSS: the bullets and counters (numbers, etc.) are displayed in the padding)
    • 

  • The automatic counters that differentiate Ordered list items from regular text may be one of these six types:.Decimals, Roman numerals, Latin  letters, Greek letters, Georgian numbers, or Armenian numbers or none (to suppress numbering)
    • 

  • A start attribute can be specified to set a different starting point than the Traditional Counting starting point (start with 5 instead of 1).
    • 
















151










Q













<dl>
</dl>


















A













    

  • a description list encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements).
    • 

  • Common uses: implement a glossary or to display metadata (a list of key-value pairs).(<dl>’s are useful to contain a series of questions and related answers, or any other groups of name/value data). .
    • 

  • <dl>’s can contain Multiple terms for a single description or definition,  or they can contain multiple definitions or descriptions for a single term.
    </dl>
    • 
















152










Q













<dt>
</dt>


















A













    

  • The <dt> tag defines a term/name in a description list (<dl>’s are useful to contain a series of questions and related answers, or any other groups of name/value data).
    • 

  • The <dt> tag is used in conjunction with <dd> (describes each term/name) and both are nested in <dl> (defines a description list)
    • 

  • The  <dt> alone does not indicate a  term being defined: that requires a <dfn> nested within the <dt>.</dfn>
    • 
















153










Q













<tr>
</tr>


















A













    

  • Defines a row in an HTML table.
    • 

  • Are nested within a table element
    • 

  • Each table row must contain the same number of data cells (for the purpose of maintaining understandable table columns)
    • 

  • Contains one or more <th> or <td> elements.
    • 
















154










Q













<dd>
</dd>


















A













    

  • The definition description comes in tandem with its term, <dt>; is nested in a <dl> description list; and defines or describes a list item (<dl>’s are useful to contain a series of questions and related answers, or any other groups of name/value data).
    • 

  • Paragraphs, line breaks, images, links, lists, etc. can be inserted inside
    • 
















155










Q













<table>
</table>


















A













    

  • Allows web developers to arrange data into rows and columns.
    • 

  • Consists of table cells inside rows and columns
    • 

  • An HTML table has two kinds of cells: <th> and <td>
    • 

  • Will typically contain multiple table rows
    • 
















156










Q













<td>
</td>


















A













    

  • Defines a standard data cell in an HTML table.
    • 

  • Table data cells are nested within table rows
    • 

    • The closing tag for data cells can be omitted
    • 

  • Text in <td> elements are regular and left-aligned by default.
    • 
















157










Q













<caption>
</caption>


















A













    

  • Defines a table caption.
    • 

  • Must immediately follow the opening table tag
    • 

    • By default, a table caption will be center-aligned above a table (CSS properties text-align and caption-side can be used to align and place the caption).
    • 
















158










Q













Rowspan


















A













    

  • Attribute to a table data element to merge data cells
    • 

  • (Cells in the spanned rows must then be removed to maintain table symmetry)
    • 
















159










Q













<th>
</th>


















A













    

  • The table heading element is used to add row and column headings
    • 

  • Number of headings must exactly match the number of rows and columns.
    • 

    • Closing tag is optional.
    • 
















160










Q













<tfoot>
</tfoot>


















A













    

  • Used in conjunction with the <thead> and <tbody> elements, the table footer groups special table info beneath the table content (table data should not appear here).
    • 

  • Browsers can use these elements to enable scrolling of the table body independently of the header and footer.
    • 

  • These elements can enable the table header and footer to be printed at the top and bottom of each page.
    • 

  • Note: The <tfoot> element must have one or more <tr> tags inside.
    • 

  • The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements.
    • 
















161










Q













<thead>
</thead>


















A













    

  • The table header contains special table info before the table content
    • 

  • Must appear before the table body but after the caption (if one is present)
    • 

  • Table data should not appear here
    • 
















162










Q













<tbody>
</tbody>


















A













    

  • Used to group the body content in an HTML table.
    • 

  • When a table header and/or footer is present, the table rows must all be placed within a table body (which is placed after the header and before the footer)
    • 

  • In long tables, multiple table bodies can be used.
    • 

  • The <tbody> element is used in conjunction with the <thead> and <tfoot> elements.
    • 

  • Browsers can use these elements to enable scrolling of the table body independently of the header and footer.
    • 

  • Note: The <tbody> element must have one or more <tr> tags inside.
    • 

  • The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
    • 
















163










Q













<col></col>


















A













    

  • Column tags can specify greater control over column width and appearance.
    • 

  • (The default width for a column is the width of the column content)
    • 

  • No closing tag
    • 

  • The <col> tag specifies column properties for each column within a <colgroup> element.
    • 

  • Useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
    • 
















164










Q













Colspan


















A













    

  • Defines the number of columns a table cell should span.
    • 

  • Specifies that the parameters and rules of one <th> or <td> is represented/applied over multiple columns.
    • 
















165










Q













Span


















A













    

  • This attribute specifies that the parameters and rules of one column is represented/applied over multiple columns
    • 

  • The span attribute can be used with the <col> or <colgroup> elements.
    • 
















166










Q













<colgroup>
</colgroup>


















A













    

  • Specifies a group of one or more columns in a table for formatting allowing styling of both column groups and individual columns.
    • 

  • Useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
    • 

  • Note: Must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
    • 

  • Tip: To define different properties to a column within a grouping, use the <col> tag within this grouping tag.
    • 
















167










Q













<img></img>


















A













    

  • Adds an image to an HTML doc
    • 

  • Preferably includes these attributes: src, width, height, alt
    • 

  • It is more efficient to adjust an image with a graphics editor  to the actual dimensions of the content area it will occupy
    • 
















168










Q













width


















A













    

  • Specifies the width of an element, in pixels.
    • 

  • Can be used on the following elements: canvas, embed, iframe, img, input, object, and video
    • 

  • <img></img> : Recommended to specify the pixel width of the content area the image will occupy on the page
    • 

  • <img></img> ** Only scale an image down from the actual image size: Scaling up causes pixelation of the image.
    • 

  • <img></img> The image size need not be exact to the specified content area, but the h*w proportion should be maintained to avoid distortion in the image.
    • 

  • Note: For input elements, the width attribute is used only with <input></input>.
    • 
















169










Q













height


















A













    

  • Specifies the height of the element, in pixels.
    • 

  • Can be used on the following elements: canvas, embed, iframe, img, input, object, and video
    • 

  • <img></img> Recommended to specify the pixel height of the area the image will occupy on the page (only scale an image down from the actual image size: Scaling up causes pixelation of the image)
    • 

  • <img></img> The image size need not be exact to the specified content area, but the h*w proportion should be maintained to avoid distortion in the image.
    • 
















170










Q













src


















A













    

  • Specifies the location (URL) of an external resource by either its absolute or relative path.
    • 

  • The src attribute can be used on the following elements: Audio, embed, iframe, img, input, script, source, track, and video
    • 
















171










Q













alt


















A













    

  • Provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
    • 

  • Can be used on the following elements: area, img, and input.
    • 

  • <area></area>(* validation will fail unless each area tag includes an alt attribute).
    • 

  • Note: Required for the <img></img> element.
    • 

  • Note: For <input></input> elements, can only be used with <input></input>.
    • 
















172










Q













bmp


















A













  • Bitmap file format for web graphics
    ** Should avoid for web graphics as the file sizes are quite large.















173










Q













png


















A













    

  • The Portable Network Graphics file format is designed to transfer images on the internet (with some applications, with lots of editing effects).
    • 

  • Optimum file type for web bitmap graphics: popular and non-proprietary (openly-published specification that anyone can use: no copyright limitations)
    • 

  • The most frequently used uncompressed raster image format on the internet (raster: a rectangular pattern of parallel scanning lines followed by the electron beam on a tv screen or monitor).
    • 

  • Lossless data compression format (file’s size is reduced with no loss of quality) created to replace the .gif file.
    • 

  • Has the ability to display transparent backgrounds. Capable of containing 24bit RGB color palettes and greyscale images.
    • 
















174










Q













Single image targeting multiple hyperlink resources


















A













    

  • Possible if an image map is added to define hotspot areas for each hyperlink
    • 

  • Required: the image tag must include a usemap attribute to specify a map name prefix by a hashtag
    • 

  • The image map itself is contained between <map> tags and it’s name is specified by a name attribute.
    • 
















175










Q













<map>
</map>


















A













    

  • Used to define an image map (an image with clickable areas).
    • 

  • The required “name” attribute is associated with the <img></img>’s usemap attribute and creates a relationship between the image and the map.
    • 

  • Contains a number of <area></area> elements that define the clickable areas in the image map.
    • 
















176










Q













usemap


















A













    

  • To use an image map the img tag must include this attribute to specify a map name prefixed by a hashtag character
    • 

  • Specifies an image (or an object) as an image map (an image with clickable areas).
    • 

  • Associated with a <map> element’s name or id attribute, and creates a relationship between the <img></img> and the <map>.
    • 

    • Note: The usemap attribute cannot be used if the <img></img> element is a descendant of an <a> or <button> element.</button></a>
    • 
















177










Q













name


















A













    

  • Specifies a name for an HTML element.
    • 

  • Can be used to reference the element in a JavaScript.
    • 

  • <form> Used as a reference when the data is submitted.
    </form>
    • 

  • <iframe> Can be used to target a form submission.
    </iframe>
    • 

  • <map> Associated with the <img></img>'s usemap attribute and creates a relationship between the image and the map.
    </map>
    • 

  • <meta></meta>Specifies a name for the information/value of the content attribute.
    • 

  • <param></param>Used together with the value attribute to specify parameters for the plugin specified with the <object> tag.</object>
    • 

  • Can be used on the following elements:   button,  fieldset,  form,  Iframe,  input, map, meta,  object, output, param, select, textarea.
    • 
















178










Q













<area></area>


















A













    

  • Defines an area inside an image map (an image with clickable areas).
    • 

  • Each image area becoming a hyperlink hotspot is defined by 4 attributes of this element: shape, coords, href, and alt.
    • 

  • Always nested inside a <map> tag.
    • 
















179










Q













shape


















A













    

  • Specifies the shape of an area. (specifies value as: rect, circle, or poly).
    • 

  • Used together with the coords attribute to specify the size, shape, and placement of an area.
    • 

  • Can be used on the area element.
    • 
















180










Q













coords


















A













    

  • Specifies the coordinates of an area in an image map.
    • 

  • Used together with the shape attribute to specify the size, shape, and placement of an area.
    • 

    • Tip: The coordinates of the top-left corner of an area are 0,0.
    • 

  • Rect : The coordinate attributes specifies a comma-separated list of its x-axis and y-axis coordinates shape : top-left x, top-left y, bottom-right x, and bottom-right y
    • 

  • Circle : Center x, Center y, radius
    • 

  • Poly : x1,y1,x2,y2,x3,y3,etc. - One pair for each point. The first and final point must have identical coordinates to complete the shape (** DO NOT LEAVE ANY SPACES IN THE COMMA-SEPARATED LIST OF COORDINATES).
    • 
















181










Q













href


















A













    

  • Each area tag must have an href attribute to specify the hyperlink’s target
    • 

  • The href attribute can be used on the following elements: <a>, <area></area>, <base></base>, and <link></link>.</a>
    • 

  • <a> or <area></area> Specifies the URL of the page the link goes to.</a>
    • 

  • <base></base>Specifies the base URL for all relative URLs on a page.
    • 

  • <link></link>Specifies the location (URL) of the external resource (most often a style sheet file).
    • 
















182










Q













<figure>
</figure>


















A













    

  • Specifies SELF-CONTAINED CONTENT, like illustrations, diagrams, photos, code listings, etc.
    • 

  • Additional means to insert images into a web page: an image tag can be nested within this element. In effect now making it self contained.
    • 

  • Element content is related to the main flow, but its position is independent of the main flow and should not affect the doc flow.
    • 

  • Embeds an image related to the main text content but whose removal would not disrupt the text’s meaning: image can now be positioned away from the text and referenced by a caption.
    • 
















183










Q













<figcaption>
</figcaption>


















A













    

  • Defines a caption for a <figure> element.</figure>
    • 

  • Can be placed as the first or last child of the <figure> element.</figure>
    • 

  • A figure should be referred to by its label
    • 
















184










Q













<picture>
</picture>


















A













    

  • Used to contain multiple image sources from which the browser can select the most appropriate size for different devices or screen sizes giving web developers more flexibility in specifying image resources (selection can include totally different images)..
    • 

  • Contains one or more <source></source> elements, each referring to different images through the srcset attribute.
    • 

  • Each <source></source> element has a media attribute that defines when the image is the most suitable.
    • 

    • Can enclose a final regular img element to specify the image to be displayed on older web browsers not supporting the multiple image selection feature.
    • 
















185










Q













srcset


















A













    

  • defines the set of images we will allow the browser to choose between, and what size each image is.
    • 

  • This attribute is required when <source></source> is used in <picture>.</picture>
    • 
















186










Q













<source></source>


















A













    

  • Used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture> : each source contained within one of these parent elements Is specified to one of this nested element.</picture></audio></video>
    • 

  • Allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first one it supports.
    • 

  • Does not require a closing tag
    • 
















187










Q













media


















A













    

  • Specifies what media/device the linked document is optimized for: target URL is designed for special devices (like iPhone) , speech or print media.
    • 

  • Specifies the minimum screen width suitable for the source element image (Ex. coding: media=”(min-width : 500px)” )
    • 

  • Can accept several values.
    • 

  • The media attribute can be used on the following elements: <a>, <area></area>, <link></link>, <source></source>, and <style>.</style></a>
    • 
















188










Q













Min-width property


















A













    

  • Defines the minimum width of an element.
    • 

  • Property of the media attribute of a source element which  assigns a minimum screen-width requirement In order for an image to be displayed on a specific device.
    • 

  • Content is smaller than the minimum width, the minimum width will be applied.
    • 

  • Content is larger than the minimum width: has no effect.
    • 

  • Note: This maintains the width of an element.
    • 
















189










Q













<object>
</object>


















A













    

  • Defines an external resource to be embedded into an HTML document
    • 

  • Can specify dimensions to width and height attributes;
    • 

  • When appropriate, can include a usemap attribute;
    • 

  • Fall-back text can be included  in the object element
    • 

  • Can specify the resources URL to its data attribute and the resource type to its type attribute 
    ***Must contain at least one data attribute OR one type attribute: The resource type must be a valid MIME type describing the resource.
    • 
















190










Q













<embed></embed>


















A













    

  • Defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
    • 

  • Integrates an external resource for interaction with the HTML document
    *** Picture display: better to use an <img></img> ; HTML display: better to use <iframe> ; Video or audio display: better to use <video> or <audio>.</audio></video>
    • 
















191










Q













SVG


















A













    

  • Scalable vector graphics are supported by web browsers that support modern HTML
    • 

  • Vector graphics store the graphic information as a series of paths: highly efficient way to describe graphics.
    • 

  • Can be scaled without a loss of fidelity; can be enlarged without suffering pixelation ; can be zoomed without a loss of definition and can be printed without a loss of resolution;
    • 

  • Can be given JavaScript functionality: it can be animated;
    • 

  • Can be embedded in HTML by specifying the MIME type of “image/svg+xml” to the <embed></embed> element’s type attribute
    • 
















192










Q













<iframe>
</iframe>


















A













    

  • Creates a fixed area on a page in which to display an embedded external resource
    • 

  • The inline frame’s dimensions must be specified  to the element’s width and height attributes (Where the resource exceeds these dimensions, the browser provides the scroll bar); the URL of the external resource is specified to its src attribute;
    • 

  • May optionally contain a name attribute to specify a unique identifier for that frame.
    • 
















193










Q













target


















A













    

  • Can be used on the following elements: <a>, <area></area>, <base></base>, and <form>.</a>
    • 

  • <a> and <area></area>:  Specifies where to open the linked document.</a>
    • 

  • <base></base>:  Specifies the default target for all hyperlinks and forms in the page.
    • 

  • <form>: Specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
    </form>
    • 

  • Optional : defaults to _self when no value is provided.
    • 

  • It is not supported by HTML 5.
    • 
















194










Q













<audio>
</audio>


















A













    

  • embeds sound content in documents:
    • 

  • may contain one or more audio sources: represented using the src attribute or the <source></source> element (the browser will choose the most suitable one). It can also be the destination for streamed media, using a MediaStream
    • 

  • Fall back message can be included here
    • 

  • Include an id attribute so as to be referenced
    • 
















195










Q













autoplay


















A













    

  • Boolean attribute
    • 

  • Specifies the browser should immediately begin playing the audio resource
    • 

  • avoid automatic audio playback I’m website as many users detest the auto-play feature
    • 
















196










Q













loop


















A













    

  • Boolean attribute
    • 

  • Specifies the browser should play the audio or video resource again every time it is finished.
    • 
















197










Q













controls


















A













    

  • Boolean attribute
    • 

  • Specifies the browser should display user controls (such as a play/pause button etc) to start or stop the audio or video playing.
    • 
















198










Q













preload


















A













    

  • Specifies if and how the author thinks the video should be loaded when the page loads.
    • 

  • Accepts values of auto or none to suggest the browser should load the audio resource so it is ready to play
    • 
















199










Q













Codec


















A













    

  • Coder-decoder
    • 

  • Codes audio and/or video resources so they can be played
    • 

  • Not all browsers incorporate the same audio or video codec
    • 
















200










Q













AAC


















A













    

  • Advanced Audio Coding
    • 

  • Supported by modern browsers such as Google Chrome, Firefox, and Microsoft Edge for MP3 audio
    • 

  • An audio coding standard for lossy (unnecessary information is discarded) digital audio compression.
    • 

  • Designed as MP3 format successor, generally achieves higher sound quality than MP3 encoders at the same bit rate.
    • 

  • Has been standardized by ISO and IEC as part of the MPEG-2 and MPEG-4 specifications.
    • 
















201










Q













OGG


















A













    

  • An open, bitstream container file format for audio, video, and other multimedia content.
    • 

  • Designed to provide for efficient streaming and manipulation of high quality digital multimedia: the Ogg container format can multiplex (communicates two or more signals over a common channel) a number of independent streams for audio, video, text, and metadata.
    • 

  • Codec “vorbis”
    • 
















202










Q













Absence of a universal codec across all browsers


















A













    

  • Requires audio resources to be encoded twice  for playback across all browsers
    • 

  • For this purpose two source elements may be nested within an audio element : rather than specifying a single resource URL to a src attribute in the audio tag
    • 

  • For each file format, the  source element can then specify their resource URL to a src attribute and they’re MIME type to a type attribute ( the browser will only load the supported audio resource for playback)
    • 
















203










Q













<video>
</video>


















A













    

  • Embeds video content in a document, such as a movie clip or other video streams.
    • 

  • The <video> tag contains one or more <source></source> tags with different video sources. The browser will choose the first source it supports.</video>
    • 

  • The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.</video>
    • 

  • Include an id attribute so as to be referenced.
    • 
















204










Q













muted


















A













    

  • Specifies that the audio output of an audio or video resource should be muted.
    • 

  • A Boolean attribute.
    • 
















205










Q













poster


















A













    

  • 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.
    • 
















206










Q













Video display area


















A













  • It is a good idea to always include width and height attributes: If height and width are not set, the page might flicker while the video loads.















207










Q













Video compression standards


















A













    

  • There are many video formats out there.
    • 

  • The MP4, WebM, and Ogg formats are supported by HTML.(Only these three are supported by the HTML Standard)
    • 

  • The MP4 format is recommended by YouTube.
    • 
















208










Q













AVC


















A













    

  • Advanced Video Coding-a  patented standard  that is also known as H.264 or MPEG-4 (.mp4  files)
    • 

  • Video compression standard based on block-oriented, motion-compensated coding.
    • 

  • It is by far the most commonly used format for the recording, compression, and distribution of video content, used by 91% of video industry developers as of September 2019.
    • 

  • It supports resolutions up to and including 8K UHD.
    • 
















209










Q













WEBM


















A













    

  • An open, royalty free alternative  to the patented H. 264 and MPEG-4 standard
    • 

  • .webm  files
    • 

  • Designed for sharing video on the web.
    • 

  • WebM uses a container structure similar to the Matroska (.MKV) video format, which stores both audio and video data.
    • 

  • Video is compressed using a VP8 or VP9 codec, and audio is compressed with either the Vorbis or Opus audio codec.
    • 

  • Several modern web browsers, such as Chrome, Edge, and Firefox, include built-in support for the WebM format.
    • 
















210










Q













HTML video formats


















A













    

  • MP4
    • 

  • WebM
    • 

  • OGG
    • 
















211










Q













<track></track>


















A













    

  • Used as a child of the media elements, <audio> and <video></video></audio>
    • 

  • Specifies timed text tracks (or time-based data): specifies subtitles, caption files or other files containing text, that should be visible when the media is playing.
    • 

  • Tracks are formatted in WebVTT format (.vtt files).
    • 

    • src attribute is required.
    • 
















212










Q













WebVTT


















A













    

  • Web Video Text Tracks format’s main use is for marking up external text track resources in connection with the HTML <track></track> element.
    • 

  • Provides captions or subtitles for video content, and also text video descriptions [MAUR], chapters for content navigation, and more generally any form of metadata that is time-aligned with audio or video content.
    • 
















213










Q













Subtitle files


















A













    

  • Begins with WEBVTT
    • 

  • Start and end  timing cues are added on new lines in the format - “HH:MM:SS.ss” and separated by ” -–> “
    • 

  • The associated subtitle caption appears on a new line below each timing cue.
    • 
















214










Q













kind


















A













    

  • Specifies the kind of text track
    • 

  • Values: captions, chapters, descriptions, metadata, and subtitles
    • 
















215










Q













srclang


















A













    

  • Specifies the language of the track text data
    • 

  • Required if kind=”subtitles”
    • 
















216










Q













default


















A













  • Specifies that the track is to be enabled if the user’s preferences do not indicate that another track would be more appropriate















217










Q













label


















A













  • Specifies the title of the text track















218










Q













Script alternative to a controls attribute


















A













    

  • With the controls attribute omitted from audio and video tags, the JavaScript play() and pause() methods of an embedded media object can then be called to control playback from an on-click event-handler script function
    • 

  • The control will play or pause playback according to the Boolean value of the run variable
    • 
















219










Q













<progress>
</progress>


















A













    

  • Displays an indicator showing the completion progress of a task,
    • 

  • Typically displayed as a progress bar.
    • 
















220










Q













max


















A













    

  • Specifies how much work (or progress) the task requires in total.
    • 

  • Default value is 1
    • 
















221










Q













value


















A













    

  • Specifies how much of the task has been completed
    • 

  • Can be dynamically updated in synchronization with media playback from an ontimeupdate event-handler script function.
    • 
















222










Q













Ontimeupdate


















A













  • Event handler script function that can be used  to  dynamically update A progress element’s Completion percentage value in synchronization with media playback















223










Q













currentTime


















A













    

  • Property of an embedded media object which stores the elapsed time since playback  began
    • 

  • Can be used along with the duration property to calculate playback progress as a percentage
    • 

  • Stores time in seconds as floating Point values, so needs to be rounded down with Math.floor( )
    • 
















224










Q













duration


















A













    

  • Property of an embedded media object that stores total playback time
    • 

  • Can be used along with the currentTime property to calculate playback progress as a percentage
    • 

  • Stores time in seconds as floating Point values, so needs to be rounded down with Math.floor( )
    • 
















225










Q













<template>
</template>


















A













    

  • Element used as a container to hold some HTML content hidden from the user when the page loads.
    • 

  • A “DocumentFragment” object that script can copy and can later be added or removed by script as child elements.
    • 

  • You can use this tag if you have some HTML code you want to use over and over again, but not until you ask for it. 
    ** The  stylesheet must be included in this element or its rules will not be applied to this element’s child elements.
    • 
















226










Q













<slot>
</slot>


















A













    

  • The element part of the web component technology which is a placeholder inside a component (template) that you simply can fill together with your own markup, which allows you to make separate DOM trees and represent them together.
    • 

  • Within the template element, this element’s contents can differ in each instance of the template
    • 

  • Optionally enclose default text, but must include a name attribute that will identify that element as a placeholder within the template.
    • 
















227










Q













slot


















A













    

  • By including this attribute, these type of placeholders are filled with content within an HTML element that nominates the matching name attribute value.
    • 

  • This attribute can only appear in these HTML tags: article,  aside, block quote, body, div, footer, h1-6,  header, main, nav, p,  section,  span.
    • 
















228










Q













<dialog>
</dialog>


















A













    

  • Defines a dialog box or subwindow.To which the user must respond before regaining access to the web page
    • 

  • Makes it easy to create popup dialogs and modals on a web page.
    • 

  • Appears on a layer above all other page content  and can contain all types of content but must provide some means of closing the dialog to return to the page Typically in the form of a button.
    • 
















229










Q













<button></button>


















A













    

  • Enables a clickable button to be added to a web page or modal dialog: Text enclosed by these tags will appear on the button as its label.
    • 

  • Can include an onclick attribute to nominate a script function to be called when the button is clicked.
    • 
















230










Q













addEventListener


















A













  • Technique by which the script can dynamically add an event listener for each button to recognize when the user clicks a button - creating a click event.















231










Q













<canvas>
</canvas>


















A













    

  • Element used to draw graphics, on the fly, via scripting (usually JavaScript).
    • 

  • This tag is transparent and is only a container for graphics: you must use a script to actually draw the graphics.
    • 

  • Default canvas area is 300 pixels wide and 150 pixels high: other dimensions can be specified to the canvas element’s width and height attributes
    • 

  • Fall back text can be included in the element.
    • 

  • In order to use the canvas, a script must first create a “CanvasRenderingContext2D” object : this provides all the methods and properties needed to paint shapes and text in the canvas area.
    • 

  • A canvas can be repainted at frequent intervals by Script to create animations, create interactive games, etc.: In fact the possibilities provided by canvas are almost limitless.
    • 
















232










Q













Abyss


















A













    

  • Abyss Web Server X1 from Aprelium: (Free web server) : It is useful to have a web server installed on your system for web page development
    • 

  • You may prefer to start the web server manually whenever you need it, or set it to continually run in the background automatically.
    • 

  • The “htdocs” folder : location where you installed Abyss / where you will place your web pages during development (default page : index.html)
    • 

  • Enter IP address - 127.0.0.1:9999 to open the Abyss Web Server Console
    • 
















233










Q













Most popular server-side scripting languages


















A













    

  • PHP
    • 

  • ASP.NET
    • 

  • Ruby
    • 

  • Perl
    • 

  • Python
    • 
















234










Q













Python


















A













    

  • Free server-side scripting language available at ActiveState (installation is lengthy)
    • 

  • Change the installation folder name to “C:\Python\”
    • 

  • Command prompt launcher: Windows System folder on the Windows 10 Start menu
    • 

  • Note the Interpreter location, as you will need it to configure Abyss for Python scripting
    ***Indentation is used in Python to group statements, so indentation fidelity must be maintained
    • 
















235










Q













Abyss –> Python


















A













    

  • The Abyss web server can execute using Python server-side script,
    • 

  • It must be configured to know the location on your system of the Python interpreter (python.exe).
    • 

  • It must be configured to recognize that files with the extension .py  are Python scripts.
    • 
















236










Q













localhost


















A













    

  • Refers to the local computer that a program is running on (ex. surfing the internet: your computer is this).
    • 

  • Does not need to be specified or defined using a single computer but does when running programs from multiple computers.
    • 

  • The local machine is defined as this, which gives it an IP address of “127.0.0.1” (considered a “loopback” address).
    • 

  • Non-local computers must be defined by their IP addresses.
    • 

  • This term is often used in Web scripting languages like PHP and ASP when defining what server the code should run from or where a database is located.
    • 
















237










Q













loopback address


















A













  • The information sent to this IP address is routed back to the local machine (localhost).















238










Q













CGI


















A













    

  • Common Gateway Interface is a set of rules for running scripts and programs on a web server.
    • 

  • It specifies what information is communicated between the web server and clients’ Web browsers and how the information is transmitted.
    • 

  • A standard interface that can be used on multiple types of hardware platforms and is supported by several types of Web server software
    • 
















239










Q













ISAPI


















A













    

  • An Internet Server Application Programming Interface is a set of ready-made Windows program calls that developers and programmers can use in order to create custom enhancements or extensions to HTTP servers or web servers compliant with this type of interface.
    • 

  • Makes it easier to write database applications like an entry system for order forms or for a custom catalog : a programmer can collect information from a user through an HTML form and then return a page which has been customized for that user.
    • 
















240










Q













Echo script


















A













    

  • In computing, a command that outputs the strings that are passed to it as arguments (A script executed in response to a request from your web browser)
    • 

  • Python script :  could simply echo requests that often send data as key=value pairs, returning the pairs in the form of an HTML table
    • 
















241










Q













Test Server


















A













    

  • Data sent to server: append a “query string” (begins with a “?”) to the Python script URL.
    • 

  • Multiple “query string” key=value pairs are separated by an “&”
    • 

  • Data can be sent: enter URL with query string directly into the address bar; hyperlink targeting the URL and query string; or JavaScript that sets location to the URL and query string
    • 
















242










Q













Web page forms


















A













    

  • Built from HTML elements that send data to a web server for processing by a specified server-side script
    • 

  • Each includes a name attribute and a value attribute processed as key=value pairs
    • 
















243










Q













<form>
</form>


















A













    

  • All form component elements are enclosed between these tags.
    • 

  • Must include a method attribute  to specify the submission method as GET or POST
    • 

  • Must include an action attribute  to specify the URL of the processing script
    • 
















244










Q













method


















A













    

  • Attribute that specifies which HTTP method is used to submit the form
    • 

  • Can be assigned values of “GET” or “POST”
    • 
















245










Q













GET


















A













    

  • The preferred submission method of forms: appends the data to the URL
    • 

  • Data sent by this method is attached to the request as a query string, so may be visible in the browser’s address field in the web server’s response.
    • 

  • They only allow the URL to append up to around 200 characters ( varies by browser)
    • 
















246










Q













POST


















A













    

  • Submission method of forms that encodes the data differently from the GET method.
    • 

  • Can be used when the GET method fails.
    • 

  • You can submit by the POST method to prevent sensitive data from being visible in the browser’s address field with the web server’s response.
    • 

  • Provides a much larger capacity than the GET method as the text is sent as “Form Data” along with the HTTP header, not simply appended to the URL.
    • 
















247










Q













action


















A













    

  • Attribute specifying where to send the form-data when a form is submitted.
    • 

  • Specifies the URL of a server-side script that is to be used to process the submitted data.
    • 
















248










Q













Submit button


















A













    

  • Typically an HTML form will have this that the user clicks to send the data processing.
    • 

  • Typically created by assigning the value “submit”  to a type attribute of an input tag.
    • 

  • This tag may include name and value attributes to submit data assigned to them as a name=value pair
    • 

  • Also created by assigning an id attribute to a form tag with a value identical to a button tag’s form attribute value (button tag must have type attribute with “submit” value).
    • 
















249










Q













Text boxes for input data


















A













    

  • An HTML form can provide these.
    • 

  • Created by assigning the value “text”  to the type attribute of an input tag and a name to its name attribute
    • 

  • The input data and text box are sent as a key=value pair.
    • 

  • The input tag can include a value attribute to specify a default value
    • 
















250










Q













“password”


















A













    

  • A text box for a password is created by assigning this value to the type attribute of an input tag
    • 

  • It does not display is contents as readable text
    • 
















251










Q













<input></input>


















A













    

  • Represents a typed data field usually associated with a control that allows users to edit its value.
    • 

  • This element is capable of providing many different types of fields, according to the value present in the type attribute.
    • 

  • Can also control what the user is permitted to submit by the value assigned to its type attribute.
    • 

  • Can enforce its completion by including the required keyword.
    • 

  • Can include name and value attributes to specify data for submission as a  key=value pair.
    • 
















252










Q













Input types


















A













    

  • text
    • 

  • password
    • 

  • url
    • 

  • email
    • 

  • date
    • 

  • month
    • 

  • week
    • 

  • time
    • 

  • datetime-local
    • 

  • number
    • 

  • range
    • 

  • color
    • 

  • file
    • 
















253










Q













text (input type)


















A













    

  • String of text
    • 

  • You can specify a default value for this input to the “value” attribute of its input tag.
    • 
















254










Q













password (input type)


















A













  • String of text ( obscured by browser)















255










Q













url (input type)


















A













  • Valid URL protocol and domain address















256










Q













email (input type)


















A













  • Valid email address















257










Q













date (input type)


















A













  • Date in mm/dd/yyyy format















258










Q













month (input type)


















A













  • Month and year















259










Q













week (input type)


















A













  • Week number and year















260










Q













time (input type)


















A













Time in HH:MM  format















261










Q













datetime-local (input type)


















A













  • Day and time as mm-dd-yy HH:MM















262










Q













number (input type)


















A













  • Numeric integer value















263










Q













range (input type)


















A













  • Numeric integer value (slider)















264










Q













color (input type)


















A













  • Color in #RRGGBB  hexadecimal format















265










Q













file (input type)


















A













File path address (browse)















266










Q













Optional input attributes for text or password


















A













    

  • size - the width of the text box in average character widths
    • 

  • minlength and maxlength -  permissible number of characters
    • 

  • min and max - permissible range of numeric value
    • 

  • placeholder -  provides a data entry hint to the user
    • 

  • readonly -  the default value in the text box cannot be changed
    • 

  • disabled - the text box is grayed out and will not be submitted
    • 
















267










Q













<textarea>
</textarea>


















A













    

  • Defines a multi-line text input control, and is often used in a form, to collect user inputs like comments or reviews.
    • 

  • Can hold an unlimited number of characters, and renders in a fixed-width font (usually Courier).
    • 

  • The size is specified by the <cols> and <rows> attributes (or with CSS).</rows></cols>
    • 

  • The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the element will be submitted).
    • 

  • The id attribute is needed to associate the element with a label.
    • 

  • May include a read-only attribute to prevent user editing
    • 

  • **Unlike the input tag, this element has no value attribute  as its content is treated as its value.
    • 

  • **Average character which may vary between browsers, so the physical size of the element’s field may vary as well.
    • 
















268










Q













“checkbox”


















A













    

  • Assign to type attribute of <input></input>.
    • 

  • Must also include a name attribute and a value attribute:  specifies the key=value pair values.
    • 

  • Option: may include a  Boolean checked attribute.
    • 

  • May be individually unique or several can bear the same name with different values allowing several to be checked simultaneously.
    • 
















269










Q













“radio”


















A













    

  • Unlike checkboxes, these buttons that share a common name are mutually exclusive : when  one is  selected all others are automatically switched off.
    • 

  • Similar to checkboxes: created by assigning the value of radio to the type attribute of an input tag.
    • 

  • Multiple checkboxes and these buttons can be visually grouped by surrounding their input elements with <fieldset> tags  and May bear a common group name through the use of <legend> tags.
    • 
















270










Q













<fieldset>
</fieldset>


















A













    

  • Only groups the related elements it encloses for visual presentation.
    • 

  • It does not associate them programmatically.
    • 
















271










Q













<legend>
</legend>


















A













    

  • Defines a caption for the <fieldset> element.
    • 

  • Used to state a common group name.
    • 
















272










Q













Hidden form data


















A













    

  • Hidden elements; create no visible controls; allow additional data to be submitted to the server.
    • 

  • Created by assigning the value hidden to the type attribute  of an input tag
    • 

  • Must also include a name attribute;
    • 

  • May include a value attribute to specify static data as a name=value pair.
    • 

  • Option: the input tag may include an ID attribute and  omit the value attribute so its value can be specified by script.
    • 

  • Hidden form data can be used  to perform a calculation and dynamically displays result in an output tag.
    • 

    • (Hidden data element can be useful as intra-website Cookies)
    • 
















273










Q













<output>
</output>


















A













    

  • Must include an ID attribute and a for attribute for reference in script.
    • 

  • Merely displays the result of the calculation.
    • 
















274










Q













for


















A













    

  • Can specify multiple element identities as a space separated list.
    • 

  • Can be used  in an assignment to the form tags oninput attribute to perform a calculation whose result will appear in the output element but will not be submitted to the server.
    • 
















275










Q













File  selection facility


















A













    

  • Calls upon the operating system’s “choose file” dialog allowing the user to browse and select a file.
    • 

  • Created: assign the value “ file” to the type attribute of an input tag and a name to its name attribute.
    • 

  • Produces: a text field and a browse button to launch the “choose file” dialog (full path appears after file is chosen).
    • 

  • Upon submission, element name and selected file’s name are sent to the web server as a name=value pair.
    • 
















276










Q













Uploading selected file to webserver


















A













    

  • Form tag with enctype attribute is required.
    • 

  • Enctype attribute should specify encoding type as “multipart/form-data”.
    • 

  • Method attribute must specify the POST method (form data cannot be appended to a URL using the GET method).
    • 
















277










Q













enctype


















A













    

  • The encoding type attribute is used only with a <form> element.
    • 

  • Specifies how the form-data should be encoded when submitting it to the server.
    • 

  • When uploading selected file to web server, specify this attribute as “multipart/form-data.”
    • 
















278










Q













Push buttons


















A













    

  • For scripting purposes: allows dynamic interaction with a form.
    • 

  • Can be used to set attribute values
    • 

  • Created: specifying “button” value to the type attribute of an input tag; should include an ID attribute to easily identify that element; text assigned to the button’s value attribute will appear on the button face.
    • 
















279










Q













checked


















A













    

  • Sets the initial state of a checkbox or radio button to checked.
    • 

  • This attribute need have no assigned value: its presence equals on; its absence equals off.
    • 

  • In script, the box’s checked property needs to be assigned a “true” value to check the box.
    • 
















280










Q













Reset button


















A













    

  • Returns any HTML form to its original state: all form data values are set to their initial default values.
    • 

  • Created: specifying a “reset” value to the type attribute of an input tag nested in a <form> tag.
    • 
















281










Q













Image buttons


















A













    

  • Used to submit a form in place of a regular submit button.
    • 

  • Created : specifying an “image” value to the type attribute of an input tag;  including an alt attribute.
    • 

  • When a form is submitted by this, the XY coordinates of the point at which the click occurred are automatically submitted as key=value pairs along with the rest of the form data.
    • 
















282










Q













Script-enabled image button


















A













    

  • A regular img tag can be used as this by attaching a behavior with script.
    • 

  • With this, validation can usually be incorporated (an image used in this way is given an identity so as to attach the behavior).
    • 

  • Validation example: checking an entry to see if it follows the set pattern of an email address.
    • 
















283










Q













Select option list


















A













    

  • From this, the user can select one option to include its associated data for submission to the server.
    • 

  • Will normally appear as a single-line drop-down list unless a “size” attribute is included in the  select tag specifying the number of rows to be visible.
    • 

  • Created: using select tags; must include a name attribute specifying a list name;  the select element encloses option tags defining each option; each option tag must include a value attribute specifying an option value.
    • 

  • When the form is submitted, the list name and the selected option value are sent as a name=value pair.
    • 

  • Optionally, The option tag may include a Boolean “selected” attribute to automatically select that option (including this provides a default choice).
    • 
















284










Q













Logo push buttons


















A













    

  • Created: using button tags; enclosing an img element specifying the URL of a logo image; specifying text that would appear on the button face; should include a type attribute to specify a scripting “button” type, a “submit” form  type; OR a “reset” form type.
    • 

  • Scripting buttons can use an “onclick” attribute to specify the button’s function, or directly specify a snippet of script to execute.
    • 
















285










Q













<datalist>
</datalist>


















A













    

  • Provides a simple autocomplete feature for a text input element enclosing a number of predefined <option> values.</option>
    • 

  • User may choose any one of the options, or enter text directly into the input field (you may need to double-click the input field to override your browser’s own autocomplete suggestions).
    • 

  • Created: must include an ID attribute (specifying a list name) to associate the input field with the list; the specified ID list name must then be specified to a “list” attribute to send the input tag to create the association; the input tag must also include a name attribute to send to the server.
    • 

  • The key=value pair submitted to the server is the specified list name and the input value selected from the options or entered directly by the user.
    • 
















286










Q













<optgroup>
</optgroup>


















A













    

  • Element used to group related options in a <select> element.</select>
    • 

  • With a long list of options, this makes handling easier for user.
    • 

  • Option-group name specified to a “label” attribute.
    • 

  • The attribute disabled specifies that an option-group should be disabled.
    • 
















287










Q













<label></label>


















A













    

  • Can enclose text that is to be associated with a form control (a form control is any input, button, or textarea element).
    • 

  • Alternatively, can simply enclose both  the text and the control element  to make the association (this allows styling to be applied to the entire label: often useful to distinguish the control associated with a particular text).
    • 

  • Can include a “for” attribute specifying the value assigned to the control’s ID attribute to make the association.
    • 
















288










Q













Form control elements


















A













    

  • <input></input>
    • 

  • <button></button>
    • 

  • <textarea>
    </textarea>
    • 
















289










Q













tabindex


















A













    

  • Each form control element may include this attribute to specify its tabbing order within the doc as a unique value between 0 and 32,767.
    • 

  • Using the Tab Key, the user can navigate the doc ascending through the tabindex values.
    • 

  • This attribute can also be included in any <a>, <area></area>, <object>, or <select> tag.</select></object></a>
    • 































World Wide Pond Devlpmnt/Design (48 decks)


























Brainscape helps you reach your goals faster, through stronger study habits.


© 2024 Bold Learning Solutions. Terms and Conditions