Intro to HTML5 Flashcards

1
Q

Can you draw the CSS box model with four parts?

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

How much larger is 1.5em from base font?

A

It is 50% larger than base font because it is 1.5 times larger

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

What is 2em?

A

2x base font, used with h1 for CSS3 EXTERNAL stylesheets

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

List structure of HTML5 page

A

<title>

<p></p>

<p></p>
</title>

#

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

What % is 1.7em font larger than base font?

A

70% larger than base font because it is 1.7 times larger than base font

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

What are the most fundamental elements defined by HTML5 called?

A
  1. The document
  2. Metadata elements
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are some of the traditional CSS3 properties?

A

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p{ font-size: 20px;

font-family: “Times New Roman”;}

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

Can you give me scripting headers for HTML5, CSS, PHP?

A

HTML5:

CSS 3: @charset “UTF-8”;

(Declare the page to be CSS stylesheets,
provides a set of links to detect declarations)

PHP: header(‘Content-type: text/html;
charset=utf-8”);

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

What provides structure in a web page?

A

HTML5 Elements

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

What is HTML5 anchor tag?

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

You are building a dynamic website. Sketch out the 3 layouts for each containers homepage.

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

Name SIX basic elements of the web page

A
  1. Header
  2. Menu
  3. Content
  4. Article
  5. Promo 1
  • Promo 2
  • Promo 3
  1. Footer
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a CSS property?

A

For ex:

border-radius

border-bottom

border-bottom-color

border-collapse

border-color

border-image-outset

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

List 5 text editors for MAC and 5 text editors for PC

A
  1. PC is Code, BBEdit, Text Mate, Text Wrangler and Dreamweaver
  2. MAC is Notepad Plus, PSPad, Komodo Edit, Ultra Edit, Dreamweaver
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

You are viewing same website on desktop and iphone.

How much LESS data do you look at on large screen VS small screen iphone?

A

We are looking at about 83% less data when someone looks at same data on small device VS large screen device

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

How much data do we download on large, medium and small screen device?

A

A reponsive website design

LARGE SCREEN: 180.4kb download

MEDIUM SCREEN: 73.2kb download

SMALL SCREEN: 32kb download

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

What helps responsive design shift during breakpoints?

A

CSS3 Media Queries

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

When do you begin to see column wrapping?

A

When you bring your responsive website under 980px. The design will lock into dimensions and become fluid.

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

What is fluid design in web?

A

It is when the website hits a ‘breakpoint’ and resize to the next screen device esp. column wrapping

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

What do you use Adobe EDGE REFLOW for?

A

You analyze the content through the program: determine the dimensions of 4 breakpoints.

SMALL: 480px and under

MEDIUM: 481px / 592px

LARGE: 593px/1,279px

DESKTOP: 1,280px + px

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

What does modern monitors (mostly wide-screen) support as a resolution? Why?

A

All modern monitors (mostly widescreen) support at least 1,280px X 1,024px resolution

In January 2010, 76% of computers where using a resolution higher than 1,024px x 768px

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

When did they invent the iPad?

A

2010

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

List standard assets you will use to create wireframe of your home page

A
  1. HEADER (home, menu, etc)
  2. WELCOME (large image with nav top & slideshow)
  3. ABOUT (rollover images)
  4. PORTFOLIO (Arrows to slideshow)
  5. CONTACT FORM (map of location)
  6. FOOTER (back to top)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is total height of blogsite, if all assets run traditional heights?

A

HEADER: 208px-300px

WELCOME: 600px-700px

About 2,900 in height

SECTION: 500px-600px

FOOTER: 100px

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

What would standard height for footer of blogsite be?

A

Footer’s standard height is 100px

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

What would be standard size for HEIGHT for SECTIONS on blogsite?

A

Sections 500px-600px

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

What would be a standard size HEIGHT for HEADER for DESKTOP blogsite?

A

Header is 208px-300px

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

What is difference between 960px GRID vs UNSEMANTIC GRID?

A

960PX

  • 12 column grid
  • Built fixed width to streamline process

UNSEMANTIC

  • 960px
  • v 2.0
  • Easily translate into CSS
  • Full responsive capabilities
    *
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What would be a standard size for HEIGHT for WELCOME for DESKTOP blogsite?

A

Welcome for desktop blogsite is 600px-700px

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

What is 1,200px GRID SYSTEM based on?

A

960 GRID SYSTEM of Nathan Smith

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

What will help to make global edits when you build adaptive layouts?

A

Once you start design, you can create new mobile, desktop, iPhone or tablet layouts. Use linked smart objects so you can make one edit to all 4 layouts.

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

What does HTML5 provide and what does CSS3 provide?

A

HTML5 provides the STRUCTURE of the page and CSS provides the VISUAL or AURAL layout for variety devices.

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

What provides AURAL + VISUAL to the web? What is AURAL?

A

CSS3 provides visual and aural. Aural is relating to sense of hearing

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

What is the definiton of HTML?

A

HTML is the language for describing structure of web pages

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

What does HTML give to authors?

A
  • Authors describe structure via MARKUP
  • Publish online documents with heading, text, tables, list or photos
  • Retrieve online info via links at click of button
  • Design forms for conducting transactions with remote services for use of info
  • Make reservations, order products
    • Include spreadsheets, videos and sound
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What is XHTML?

A

XHTML is variant (far less known form) of HTML that uses syntax of XML (Extensive Markup Language)

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

Name 5 special characters HTML5 processor must support

A
  1. Quotation Mark () - "
  2. Apostrophe () - '
  3. Ampersand (&) - &
  4. Less-than (<) - <
  5. Greater-than (>) - >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What does these characters stand for?

1. "

2. '

3. <

4. &

5. >

A
  1. Quote
  2. Apostrophe
  3. Less-Than
  4. Ampersand
  5. Greater-Than
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

What do you use (2 things) to design a layout that will support special characters?

A

1. Numerical Code

(special characters like ©)

2. Entity Name

(©)

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

What is the entity name or number code for the following?

  1. Non-Breaking Space
  2. Inverted Exlamation Mark ¡
  3. Copyright Symbol ©
  4. Angled Quotation (left) <<
  5. Soft Hyphen -
  6. Registered Mark ®
A
  1. ** ** OR  
  2. ¡ OR ¡
  3. © OR ©
  4. « OR «
  5. ­ OR ­
  6. ® OR ®
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What is the entity name or number code for the following?

  1. Small Acute Accent á
  2. Small Grave Accent à
  3. Small Tilde ã
  4. Small Circumflex Accent ê
  5. Small Umlaut ï
  6. Small AE æ
A
  1. ´ OR á / á
  2. à OR à / à
  3. ã OR ã / ã
  4. ê OR â / ê
  5. &iunl; OR ä / ï
  6. &aeligi; OR æ / æ
43
Q

What does the following stand for?

  1. ´
  2. &grave;
  3. ˜
  4. &circl;
  5. &eumlt;
  6. œ
A
  1. Acute á
  2. Grave à
  3. Tilde ã
  4. Circumflex ê
  5. Umlaut ï
  6. AE æ
44
Q

What is the entity name and number code for following:

  1. Capital Ligature Œ
  2. Small Ligature œ
  3. Small ‘s’ with carrot
  4. En space
  5. Em Space
  6. Thin Space
A
  1. Œ OR Œ / Œ
  2. œ OR œ / œ
  3. š OR
  4. &ensp; OR  
  5. OR  
  6. OR  
45
Q

What is the following entity number:

  1. Dagger †
  2. Double Dagger ‡
  3. Horizontal Ellipses …
  4. En Dash –
  5. Em Dash —
  6. Left / Right Single Quote ‘ OR ’
  7. Left / Right Double Quote “ OR ”
  8. Single Left / Right Angle < OR >
A
  1. † OR †
  2. … OR …
  3. ‘ OR ’
  4. “ OR ”
  5. ‹ OR ›
46
Q

What are some examples of XML?

A

XML signals sent from engine at car repair, widely use today, is basis for many standards such as (UBL) Universal Business Language; Universal Plug and Play (UPnP); used for home electornics; word processing such as ODF and OOXML; graphics such as SVG; used for XMLRPO and web services. XML is everywhere.

47
Q

Which document type can increase the value of every other document, tool, creating open platform of text-based format that gives people head start on understanding the format (preventing mistakes) within a network.

A

XML

48
Q

What is XML? What is it used for?

A
  1. XML is extensive markup language
  2. Simple based format for representing structured information
  3. Documents, data, configurations, books, transaction, invoices
  4. Derived from older standard format called SGML
  5. XML is structured info between programs, people, computers and networks (both locally and across)
49
Q

Where was XML derived from? How did it develop?

A

An older standard format called SGML (ISO 8879) in order to be more suitable for web use.

50
Q

What is XSLT?

(6 things)

A
  1. Shared with XQuery and anything using xPath
  2. XSL Transformations (XSLT 2.0) is a language for transforming XML documents into other XML documents
  3. Text documents or HTML documents to operate on multiple input files
  4. Database query, relationship database tables, geographical info systems, file systems
  5. Treat them all as if they were XML
  6. Very powerful
51
Q

What is the entity name for:

  1. x/y (fraction)
  2. ÷
  3. #
  4. $
  5. %
  6. ?
  7. ¢
A
  1. &fracxy;
  2. ÷
  3. ·
  4. &num;
  5. &dollar;
  6. &percent;
  7. &quest;
  8. ¢
52
Q

What is entity name for:

  1. @
  2. *
  3. º
  4. –>
  5. <–
  6. v
  7. Star
  8. Telephone
  9. Circle
A
  1. @ / &commat;
  2. * / &ast;
  3. º / °
  4. –> / &rightarrow;
  5. <– / &leftarrow;
  6. ^ / ∧ OR &wedge;
  7. v
  8. Star / &star;
  9. Telephone / &phone;
  10. Circle / &circle;
53
Q

What is semantic web?

A
  1. A web of linked data
  2. Classic “Web of documents”
  3. W3C built technology to support a “WEB OF DATA” which you will find in databasis
  4. Create stories on web
  5. Build vocabularies
  6. Write rules for handling data
  7. RDF, SPARQL, QWL and SKOS
54
Q

Which company developed Javascript? What did this scripting language do for the web browser and HTML?

A
  1. Netscape
  2. It marked the start of client-side scripting embedded in web browsers
  3. Moving HTML from carrier of static content into something a little richer
  4. It took awhile before a complex interaction to emerge
55
Q

What scars did the web developers bear during the browser wars?

A
  1. During browser wars, the main competitors, Microsoft and Netscape
  2. Content would work only on PARTICULAR browsers
  3. The users would find CONTENT so compelling that would win them over during a market domination
  4. Web developers used what was AVAILABLE, INVENTING, ELABORATE
  5. Works around painful
56
Q

Why was Microsoft blamed for NETSCAPE going out of business?

A

Microsoft was found guilty of anti-trust violations after giving away IE for free. undercutting Netscape’s paid-for-Navigator product. Therefor, Microsoft has been blamed for Netscape going out of business.

57
Q

What is the dominance of plugins? What or where is plugins now with HTML5?

A
  1. Plugins have allowed companies to provide support for advanced features and rich content that cannot be easily achieved by HTML
  2. Some websites just became a vehicle for plugin content esp. during launch of Adobe Flash
  3. Puts control in hands of plugin maker
  4. Now, HTML5 puts Flash directly in browser
  5. Microsoft disabiled Flash
  6. Apple doesn’t support Flash
58
Q

What has been the role with emergence of semantic HTML?

A

Automated processing of content has become important in the years since HTML was first introduced, gradual effort, to separate the significance of HTML elements from how content is presented in browser

59
Q

Why is HTML5 an umbrella term now?

A

Describe a set of related technologies that are used to make modern rich web content. The core HTML5 specification defines elements we use to mark up content, indicating hierarchy or significance

60
Q

Why is addition of CANVAS element on of biggest changes in HTML5?

A
  1. Purpose of drawing surface we can use to achieve some tasks that Adobe Flash is used for
  2. Javascript to work with CANVAS element
  3. Makes programming first-class activity in HTML
61
Q

Why is HTML5 considered to be in a new mature phase of it’s development?

A
  1. HTML5 introduces number of features and rules to separate meaning of elements from how content is separated
  2. CSS3 + Javascript
  3. Webdeveloper needs mark up content and then define presentation to create more work
62
Q

How do you apply markup to content?

A

Use a HTML element

63
Q

How do you fine-tune the way a browser handles HTML elements?

A

Apply one or more attributes to the elements

64
Q

How do you declare that DOC contains HTML?

A

Use DOCTYPE and HTML elements

65
Q

How do you describe a HTML document?

A

Use HEAD elements to contain one or more of METADATA elements

66
Q

How do you add content to HTML document?

A

Use body element to contain text and other HTML elements

67
Q

How do I add a shortcut key to select an element?

A

Use ACCESSKEY GLOBAL ATTRIBUTE

68
Q

How do I classify elements together, so that a consistent style can be applied or so elements can be located programmatically?

A

Use CLASS global attributes

69
Q

What do you use with following attributes:

  1. DOCTYPE
  2. ACCESSKEY
  3. CLASS
  4. CONTENT EDITTABLE
  5. CONTEXT MENU
  6. DIR
  7. DRAGGABLE
  8. DROPZONE
  9. HIDDEN
  10. ID
A
  1. DOCTYPE: Declare contains HTML
  2. ACCESSKEY: Shortcut to select element
  3. CLASS: Classify elements together for consistent style or locate elements
  4. CONTENT EDITTABLE: Allow users to edit content
  5. CONTEXT MENU: Add context menu to element
  6. DIR: Specify layout direction of element
  7. DRAGGABLE: The element can be dragged
  8. DROPZONE: Element used as target to drop
  9. HIDDEN: Element and contents not relevant
  10. ID: Assign unique with identified because style be applied
70
Q

What does the following attributes mean?

  1. LANG
  2. SPELLCHECK
  3. STYLE
  4. TABINDEX
  5. TITLE
A
  1. LANG: Select language in which content of element is expressed
  2. SPELLCHECK: Specify whether the contents of elements should be checked for errors
  3. STYLE: Define a style directly to element
  4. TABINDEX: Specify the order in which tab key moves between elements in HTML documents
  5. TITLE: Provide additional info about an element
71
Q

Define the following anatomy of HTML element:

I LIKE A P P L E S AND ORANGES.

A
  1. Start / End Tag
  2. Content
  3. Elements tell browser about content. The effect about element is applied to element contents.
  4. Each HTML element has specific meaning
72
Q

What does the following elements mean in HTML?

  1. a
  2. body
  3. button
  4. code
  5. DOCTYPE
  6. head
  7. hr
  8. html
  9. input
  10. label
A
  1. a = creates hyperlink
  2. body = denotes content HTML
  3. button = creates button for forms
  4. code = denotes fragment of code
  5. DOCTYPE = declare HTML
  6. head = header section
  7. hr = thematic break
  8. html = section of HTML
  9. input = input supplied by user
  10. label = create label for another element
73
Q

What does the following elements mean?

  1. p
  2. style
  3. table
  4. td
  5. textarea
  6. th
  7. title
  8. tr
A
  1. p = denotes paragraph
  2. style = defines CSS style
  3. table = denotes tabular data
  4. td = denotes table cells
  5. textarea = multimedia text
  6. th = table header cell
  7. title = define title for HTML
  8. tr = denotes table row
74
Q

What is an empty element, self-closing tag, and using void elements?

A
  1. You are not required to place any content between start and end tags
  2. It will create EMPTY ELEMENT
  3. SELF-CLOSING TAG: Used by single tag with end tag into one - the stroke character. More concise express EMPTY ELEMENT
  4. VOID ELEMENTS: Elements expressed using a single tag: HTML makes illegal like
    or
    * * *
75
Q

What is the attribute name and attribute value within element?

apples

A

HREF = Attribute Name

APPLES.HTML = Attribute Value

76
Q

How would you apply multiple attributes to an element?

A

You apply multiple attributes by separating them with one or more space characters in elements.

#href=”/apples.html”#id=”firstlink”> apple

77
Q

When or what is a boolean attribute in an element?

A

Boolean attributes you don’t have to specify a value - just add attribute name.

Enter your name: <input></input>disabled>

(Stops war from input data)

78
Q

How or why should custom attributed be named? What is it useful for? When was it developed?

A
  1. Use a prefix with data because avoid clashing with attribute names to be created by future HTML versions
  2. Useful working with CSS and Javascript
  3. Custom attributes are formal definitions of widely used HTML4 techniques
  4. Browsers ignore any attribute not recognized
79
Q

How would you describe target audience for HTML we create? For ex: who would consume HTML? Also what would be the most prevalent kind of way to consume HTML?

A
  1. The browser is a target for HTML
  2. User agents are most common way HTML might be consumed
  3. Browser are the most prevalent kind of user agent
80
Q

What is XHTML vs HTML? How do you express your content to be valid and readily handled (for XHTML)?

A
  1. XHTML: XML serialization of HTML because you express your content and HTML elements
  2. Attributes in a way that makes valid XML and be readily handled by XML parser
  3. Hence, it can be difficult to process a HTML document using standard XML parser
81
Q

What is polygot documents?

A

You can create polygot documents which are valid HTML and valid XML files. It requires using a subset of HTML syntax.

82
Q

How would you define the OUTER STRUCTURE of HTML document?

A
      1. <!-- elements go here -->

The doctype element tells the browser it is dealing with HTML document

83
Q

Which HTML BOOLEAN attribute tells the browser it is dealing with HTML document?

A

The content of element should be treated with HTML and all the way through until close tag

84
Q

What is metadata and where is it contained?

A
  1. The metadata of HTML document allow you to provide info about document to browser
  2. The metadata is contained inside head element in HTML document
        • <!-- metadata goes here -->
  • <title>Example</title>
  • *
85
Q

How will begin/end tags look for browsers to ignore?

A

<!-- metadata goes here -->

86
Q

What is the parent and child to the following BODY element?

<!-- content and element here -->

I like ` apples `

A
  1. An element can have multiple child but only 1 parent
  2. An element that creates another element is the parent of 2nd element
  • The element is parent
  • The ` element is child`
  • The element is parent of
  • element which is child.
87
Q

What is the difference between?

<!-- Metadata goes here -->

* the parent-child relationship

<title> Example </title>

* VS decendents; children and

* descendants; and siblings

A
  1. PARENT: is parent to
  2. CHILD: ` is child to is child to `
  3. DESCENDENTS:
    • + `` are children and direct descendents
  4. SIBLINGS:
    • + share same parent,
    • + are therefor known as siblings
88
Q

What are the restrictions called of elements of which other elements can be their parents or children?

A
  1. Element types
89
Q

What is DOM and how do you navigate through it?

What important skill in HTML does it highlight?

A
  1. DOM is Document Object Model and you will find specific elements in a document by navigating through document tree
  2. A tree is a representation of relationships between elements
  3. Knowing siblings from descendents is important skill in HTML
90
Q

Name the 3 HTML5 specification group elements categories

A
  1. Metadata elements: Create basic structure of HTML document, provide information, direction on how browser proceed
  2. Flow Elements: Specify valid set of parents and children from an element. All phrasing are flow elements.
  3. Phrasing Elements: Used basic building block HTML
91
Q

List the attributes you use for HTML image tag if it links to URL

A

SOURCE (src)

ALTERNATIVE (alt)

SIZE WIDTH

SIZE HEIGHT

92
Q

Provide an example of a restricted element.

Why is this considered restrictive?

A
  1. Not all elements belong to one of element categories: metadata; flow or pharsing
  2. Those that don’t have special significance are used only in restrictive categories
  3. For ex: li element (list) which denotes a list and is limited to one of three parent elements. Ol elements (ordered list) and ul (unordered list) and menu (menu list)
93
Q

List the entity name for some of these commonly used HTML characters

  1. <
  2. >
  3. &
  4. £
  5. §
  6. ©
  7. ®
A
  1. &lit; = <
  2. > = >
  3. & = &
  4. € =
  5. £ = £
  6. § = §
  7. © = ©
  8. ® = ®
  9. ™ =
94
Q

What is it called when each element can define it’s own attribute? Why is this so powerful?

A
  • When elements define its own attribute it is called LOCAL ATTRIBUTES.
  • Each local attribute gives you the ability to control some aspects of UNIQUE BEHAVIOUR of an element
  • The GLOBAL ATTRIBUTE configure the behaviour that is COMMON to all elements.
  • Global attribute doesn’t always lead to meaningful behaviour or usual change
95
Q

COMPLETE THE FOLLOWING:

  1. All HTML elements can have __________
  2. The HTML __________ attributes provides additional “tool-tip” information
  3. The HTML ______ attribute provides address links
  4. HTML _________ and _______ attribute provide size info
  5. HTML ______ attribute provides text for screen readers
A
  1. All HTML elements can have ATTRIBUTES
  2. HTML TITLE attribute provides additional “tool-tip” information
  3. HTML HREF attribute provides address info
  4. HTML WIDTH and HEIGHT attribute provides size information for images
  5. HTML ALT attribute provides text for screen readers
96
Q

List 8 of the commonly used HTML attributes and it’s purpose

HASDISTV

A
  1. ALT: Alternative text /
  2. DISABLED: Input elements disabled / <input></input> Boolean
  3. HREF: Specify URL or Web Link /
  4. ID: Unique ID for element
  5. SRC: URL (Web address) for image /
  6. STYLE: Inline CSS style for element
  7. TITLE: Extra info about element (tool tip) /
  8. VALUE: Specify value (text content for input value)
97
Q

What is an attribute? Where is it normally located? How do they usually PAIR up?

A

Attributes provide additional information about an element.

lang = “en-US”> declares English

Attributes always specified in start tag

title = “About Us”> Paragraph has title

Attributes come in name/value pairs like name=”value”

href =”link.com”> src=photo.com width=104 height=104 alt=photo.com>

98
Q

What is an accesskey attribute? Give an example.

A

An accesskey specifies a shortcut key to active / focus on an element. Therefore you will select the element on page. The accesskey used in FORM esp. Name + Password

For ex:

<form>

<p>Name: <input></input>accesskey ="n"/&gt;</p>

<p>Password: ... <strong>accesskey="n"</strong></p>

<p><input type: ...>accesskey="n"&gt;</p>
</form>

99
Q

What attributes can enable users who are regulards to use keyboard shortcuts?

FORM

NAME: Adam

PASSWORD: • • • • •

LOGIN

A

Accesskey ALT + P

100
Q

Why do we use a CLASS attribute? How do we apply it?

A

A CLASS attribute is used to CLASSIFY or CATEGORIZE elements. So you can locate elements in document that belong to given class or apply CSS styles.

<title>

<p></p>

<p></p>
</title>

<title> Name page </title>

<style></style>

.class 2 {

background-color: grey;

color: white;
padding: 5px;
margin: 2px

.class 1

font-size: x-large;

href=”www…

101
Q

Write a body paragraph with two links:

W3C and Lynda.com with Javascript styling border = “thin solid black”, backgroundcolor=”white”;

color=”black”;

A

href=”http://w3c.org>

W3C.ogr

href=”http://lynda.com”>

Lynda.com

var elems = document.getElementsByClassName

(“otherclass”);

102
Q

What does the CONTENT EDITABLE attribute do in HTML5?

A

It is new in HTML5 and it allow users to change the content in the page.

CONTENT EDITABLE=”true”>It is raining

103
Q

What goes inside an

tag inside

?

A
  1. New HTML5, not supported by IE8 earlier
  2. Can access by getElementById():
  3. The tag specifies independent, self-contained content
  4. Article should make sense on it’s own and should be possible to distribute indepently from site
  5. Potential sources: forum posts, blog post, news story + comment
104
Q

Why do we use content blocks in responsive web design?

A

When you focus on one block at a time you can style content appropriately one block at a time.