IES: HTML-recog dk3

Question 1

• A technique often used in websites to dynamically update news or status items
• Does not depend on JavaScript support
• Coding: <meta http-equiv=”refresh” content=”5”>

Answer 1

Auto-page reload

Question 2

• Coding: <meta http-equiv=”refresh” content=”5; url=’new-page.html’”>

Answer 2

Auto page redirection

Question 3

• Search Engine Results Page
• In search results:
  1. Shows the page title
  2. Shows the Meta Description (below the page title)

Answer 3

SERP

Question 4

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

Answer 4

Meta “description”

Question 5

• 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
• • This consolidates and preserves SEO ranking efforts and assets.
• Coding: <link rel=”canonical” href=”http://www.examplepage.com”/>

Answer 5

Canonical link

Question 6

• Empty element
• Used to incorporate resources in a document
• ONLY appears in the head of the document (head may contain many)
• Must contain “rel” and “href” attributes
• May contain “title” or “type” attributes

Answer 6

“link”element

Question 7

• Hints at the MIME nature & format of the link resource.
• For “button” elements, attribute specifies the nature & format of button.
• For “input” elements, attribute specifies the input element nature & format to display.
• For “embed”, “link”, “object”, “script”, “source”, and “style” elements; attribute specifies the Internet media nature & format (formerly known as MIME ____).
• May intend to help search engines to locate resources associated with the HTML document.

Answer 7

type

Question 8

• 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.
• Is part of the Global Attributes, and can be used on any HTML element.
• May include a title for the page in another language

Answer 8

title attribute

Question 9

• 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);
* 4th) external rules (<link></link> tag (in head) to stylesheet);</style>

Answer 9

CSS

Question 10

• Attribute : “relationship”
• Example : <link rel=”stylesheet” href=”Daigle-style.css”>

Answer 10

rel

Question 11

• The Hypertext reference is an anchor tag attribute.
• Contains two components:
  1. the URL: the actual link
  2. the anchor text: the clickable/tappable text which appears on the page
• Creates two types of links:
  1. * specifies a destination within a document (i.e. internal links) (Example: <a href=”#a”>A</a> (in-document hypertext navigational link anchor))
  2. Used to specify a destination to pages in other sites (i.e. external links) (Example: <a href=”laurendaigle.com”>Lauren Daigle’s Site</a> (external hypertext link anchor))

Answer 11

href

Question 12

• Added within or linked to an HTML document To present the rules governing how the content will appear by use of the following:

1. Can be embedded within the head section as a non-empty element.
2. Employed as an attribute in-line
3. Linked by use of an external document to single or multiple HTML documents

Answer 12

“style”

Question 13

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

Answer 13

“div” element

Question 14

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

Answer 14

<span></span>

Question 15

• Tag used to embed JavaScript within an HTML doc:
  1. Placed in the head- executed when it/they are called, or when an event is triggered: placed in the head, you will ensure it/they are loaded before anyone uses them. (Ex: a mouse click event - <h1 onclick=”alert(‘Clicked!’)”>…</h1>
  2. Placed in the body section(inline): to be executed when the page loads: it generates the content of the page. (Ex: a mouse click event - <h1 onclick=”alert(‘Clicked!’)”>…</h1>
  3. Points to an external file through the src attribute: Simplifies running the same script on several pages without repeatedly writing it. (Remember: place exactly where you normally would write it). <script src=”script.js”> … </script>
• Best placed right before the body closing tag (</body>), so browser can process doc content before reading script
• Common uses: image manipulation, form validation, dynamic changes of content

Answer 15

“script”

Question 16

• Only displayed when JavaScript functionality is absent or disabled
• Text container for Alternative fallback content (Example- <noscript>JavaScript Is Not Enabled!</noscript> )

Answer 16

“noscript” element

Question 17

• Exists purely for scripting
• Placeholder inside a web component that can be filled with custom markup
• Allows the creation of separate DOM trees while presenting them together.
• Part of the Web Components technology suite (allows creation of reusable custom elements — with their functionality encapsulated away from the other code — and utilization in web apps.

Answer 17

“slot” element

Question 18

• Exists purely for scripting
• Serves as a mechanism/container for holding HTML content/fragments hidden from the user when the page loads:
  1. can be used later via JavaScript
  2. can be generated immediately into shadow DOM.
• • Shadow DOM enables attachment of a DOM tree to an element, and have the internals(custom settings, etc.) of this tree hidden from JavaScript and CSS running in the page.
• You can use if you have some HTML code you want to use over and over again but not until you ask for it

Answer 18

“template” element

Question 19

• 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

Answer 19

MIME

Question 20

• Empty element
• Specifies an alternate directory holding resources/files to be recognized by the browser. ( <____ href=”http://localhost/resources/”> )
• • Must be placed in document head before any “link” elements.

Answer 20

“base”element