Intro to HTML5 Flashcards
(104 cards)
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
3
Q
What is 2em?
A
2x base font, used with h1 for CSS3 EXTERNAL stylesheets
4
Q
List structure of HTML5 page
A
<title>
<p></p>
<p></p>
</title>
#
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
6
Q
What are the most fundamental elements defined by HTML5 called?
A
- The document
- Metadata elements
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”;}
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”);
9
Q
What provides structure in a web page?
A
HTML5 Elements
10
Q
What is HTML5 anchor tag?
A
11
Q
You are building a dynamic website. Sketch out the 3 layouts for each containers homepage.
A
12
Q
Name SIX basic elements of the web page
A
- Header
- Menu
- Content
- Article
- Promo 1
- Promo 2
- Promo 3
- Footer
13
Q
What is a CSS property?
A
For ex:
border-radius
border-bottom
border-bottom-color
border-collapse
border-color
border-image-outset
14
Q
List 5 text editors for MAC and 5 text editors for PC
A
- PC is Code, BBEdit, Text Mate, Text Wrangler and Dreamweaver
- MAC is Notepad Plus, PSPad, Komodo Edit, Ultra Edit, Dreamweaver
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
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
17
Q
What helps responsive design shift during breakpoints?
A
CSS3 Media Queries
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.
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
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
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
22
Q
When did they invent the iPad?
A
2010
23
Q
List standard assets you will use to create wireframe of your home page
A
- HEADER (home, menu, etc)
- WELCOME (large image with nav top & slideshow)
- ABOUT (rollover images)
- PORTFOLIO (Arrows to slideshow)
- CONTACT FORM (map of location)
- FOOTER (back to top)
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
25
What would standard height for footer of blogsite be?
Footer's standard height is 100px
26
What would be standard size for HEIGHT for SECTIONS on blogsite?
Sections 500px-600px
27
What would be a standard size HEIGHT for HEADER for DESKTOP blogsite?
Header is 208px-300px
28
What is difference between 960px GRID vs UNSEMANTIC GRID?
**960PX**
* 12 column grid
* Built fixed width to streamline process
**UNSEMANTIC**
* 960px
* v 2.0
* Easily translate into CSS
* Full responsive capabilities
*
29
What would be a standard size for HEIGHT for WELCOME for DESKTOP blogsite?
Welcome for desktop blogsite is 600px-700px
30
What is 1,200px GRID SYSTEM based on?
960 GRID SYSTEM of Nathan Smith
31
What will help to make global edits when you build adaptive layouts?
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.
32
33
What does HTML5 provide and what does CSS3 provide?
HTML5 provides the STRUCTURE of the page and CSS provides the **VISUAL** or **AURAL** layout for variety devices.
34
What provides AURAL + VISUAL to the web? What is AURAL?
CSS3 provides visual and aural. Aural is relating to sense of hearing
35
What is the definiton of HTML?
HTML is the language for describing structure of web pages
36
What does HTML give to authors?
* 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
37
What is XHTML?
XHTML is variant (far less known form) of HTML that uses syntax of XML (Extensive Markup Language)
38
Name 5 special characters HTML5 processor must support
1. Quotation Mark (**"**) - **"**
2. Apostrophe (**'**) - **'**
3. Ampersand (**&**) - **&**
4. Less-than (**\<**) - **<**
5. Greater-than (**\>**) - **>**
39
What does these characters stand for?
## Footnote
**1. "**
**2. '**
**3. <**
**4. &**
**5. >**
1. Quote
2. Apostrophe
3. Less-Than
4. Ampersand
5. Greater-Than
40
What do you use (2 things) to design a layout that will support special characters?
**1. Numerical Code**
(special characters like ©)
**2. Entity Name**
(©)
41
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 **®**
1. ** ** OR ** **
2. **¡** OR **¡**
3. **©** OR **©**
4. **«** OR **«**
5. **** OR ****
6. **®** OR **®**
42
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 **æ**
1. **´** OR **á** / **á**
2. **à** OR **à** / **à**
3. **ã** OR **ã** / **ã**
4. **ê** OR **â** / **ê**
5. **&iunl;** OR **ä** / **ï**
6. **æi;** OR **æ** / **æ**
43
What does the following stand for?
1. ´
2. `
3. ˜
4. &circl;
5. ët;
6. œ
1. Acute **á**
2. Grave **à**
3. Tilde **ã**
4. Circumflex **ê**
5. Umlaut **ï**
6. AE **æ**
44
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
1. **Œ** OR Œ / **Œ**
2. **œ** OR œ / **œ**
3. **š** OR Ŧ
4. **&ensp**; OR
5. ** ** OR
6. ** ** OR
45
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 \>
1. † OR †
2. ‡
3. … OR …
4. –
5. —
6. ‘ OR ’
7. “ OR ”
8. ‹ OR ›
46
What are some examples of XML?
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
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.
XML
48
What is XML? What is it used for?
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
Where was XML derived from? How did it develop?
An older standard format called **SGML** (ISO 8879) in order to be more suitable for web use.
50
What is XSLT?
## Footnote
*(6 things)*
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
What is the entity name for:
1. x/y (fraction)
2. ÷
3. •
4. #
5. $
6. %
7. ?
8. ¢
1. &fracxy;
2. ÷
3. ·
4. #
5. $
6. &percent;
7. ?
8. ¢
52
What is entity name for:
1. @
2. \*
3. º
4. --\>
5. \<--
6. ^
7. v
8. Star
9. Telephone
10. Circle
1. **@** / @
2. **\*** / *
3. **º** / °
4. **--\>** / →
5. **\<--** / ←
6. **^** / ∧ OR ∧
7. **v** ∨
8. **Star** / ☆
9. **Telephone** / ☎
10. **Circle** / &circle;
53
What is semantic web?
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
Which company developed Javascript? What did this scripting language do for the web browser and HTML?
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
What scars did the web developers bear during the browser wars?
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
Why was Microsoft blamed for NETSCAPE going out of business?
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
What is the dominance of plugins? What or where is plugins now with HTML5?
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
What has been the role with emergence of semantic HTML?
**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
Why is HTML5 an umbrella term now?
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
Why is addition of CANVAS element on of biggest changes in HTML5?
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
Why is HTML5 considered to be in a new mature phase of it's development?
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
How do you apply markup to content?
Use a HTML element
63
How do you fine-tune the way a browser handles HTML elements?
Apply one or more attributes to the elements
64
How do you declare that DOC contains HTML?
Use DOCTYPE and HTML elements
65
How do you describe a HTML document?
Use HEAD elements to contain one or more of METADATA elements
66
How do you add content to HTML document?
Use body element to contain text and other HTML elements
67
How do I add a shortcut key to select an element?
Use ACCESSKEY GLOBAL ATTRIBUTE
68
How do I classify elements together, so that a consistent style can be applied or so elements can be located programmatically?
Use CLASS global attributes
69
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
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
What does the following attributes mean?
1. LANG
2. SPELLCHECK
3. STYLE
4. TABINDEX
5. TITLE
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
# Define the following anatomy of HTML element:
I LIKE **` `**A P P L E S AND ORANGES.
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
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
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
What does the following elements mean?
1. p
2. style
3. table
4. td
5. textarea
6. th
7. title
8. tr
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
What is an empty element, self-closing tag, and using void elements?
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
What is the **attribute name** and attribute **value** within element?
**[apples](apples.html)**
HREF = **Attribute Name**
APPLES.HTML = **Attribute Value**
76
How would you apply multiple attributes to an element?
You apply multiple attributes by separating them with one or more space characters in elements.
***#***href="/apples.html"***_#_***id="firstlink"\> apple
77
When or what is a **boolean attribute** in an element?
Boolean attributes you don't have to specify a value - just add attribute name.
Enter your name: disabled\>
*(Stops war from input data)*
78
How or why should custom attributed be named? What is it useful for? When was it developed?
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
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?
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
What is XHTML vs HTML? How do you express your content to be valid and readily handled (for XHTML)?
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
What is **polygot** documents?
You can create polygot documents which are **valid HTML and valid XML** files. It requires using a ***subset of HTML syntax.***
82
How would you define the OUTER STRUCTURE of HTML document?
1. 2. 3.
4.
The doctype element tells the browser it is dealing with HTML document
83
Which **HTML BOOLEAN attribute** tells the browser it is dealing with HTML document?
The content of element should be treated with HTML and all the way through until close tag
84
What is **metadata** and where is it contained?
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
* * * * ****
* Example
* *
85
How will begin/end tags look for browsers to ignore?
86
What is the **parent** and **child** to the following BODY element?
****
**I like ` apples `**
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
What is the difference between?
**\* the parent-child relationship**
Example
**\* VS decendents; children and**
**\* descendants; and siblings**
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
What are the restrictions called of elements of which other elements can be their parents or children?
1. Element types
89
What is DOM and how do you navigate through it?
What important skill in HTML does it highlight?
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
Name the 3 HTML5 specification group elements categories
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
List the attributes you use for HTML image tag if it links to URL
![]()
SOURCE (src)
ALTERNATIVE (alt)
SIZE WIDTH
SIZE HEIGHT
92
Provide an example of a restricted element.
Why is this considered restrictive?
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
List the entity name for some of these commonly used HTML characters
1. \<
2. \>
3. &
4. €
5. £
6. §
7. ©
8. ®
9. ™
1. &lit; = **\<**
2. > = **\>**
3. & = **&**
4. € = **€**
5. £ = **£**
6. § = **§**
7. © = **©**
8. ® = **®**
9. ™ = **™**
94
What is it called when each element can define it's own attribute? Why is this so powerful?
* 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
_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
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
List 8 of the commonly used HTML attributes and it's purpose
## Footnote
**HASDISTV**
1. **ALT:** Alternative text / 
2. **DISABLED:** Input elements disabled / 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
What is an attribute? Where is it normally located? How do they usually PAIR up?
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
What is an accesskey attribute? Give an example.
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:
99
What attributes can enable users who are regulards to use keyboard shortcuts?
## Footnote
_FORM_
**NAME:** Adam
**PASSWORD:** • • • • •
LOGIN
Accesskey ALT + P
100
Why do we use a CLASS attribute? How do we apply it?
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.
## Footnote
<p></p>
<p></p>
Name page
.class 2 {
background-color: grey;
color: white;
padding: 5px;
margin: 2px
.class 1
font-size: x-large;
href="www...
101
_Write a body paragraph with two links:_
W3C and Lynda.com with Javascript styling border = "thin solid black", backgroundcolor="white";
color="black";
**href="http://w3c.org\>**
W3C.ogr
**href="http://lynda.com"\>**
Lynda.com
****
**var elems = document.getElementsByClassName**
**("otherclass");**
102
What does the CONTENT EDITABLE attribute do in HTML5?
It is new in HTML5 and it allow users to change the content in the page.
CONTENT EDITABLE="true"\>It is raining
103
What goes inside an
tag inside
## Footnote
?
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
Why do we use content blocks in responsive web design?
When you focus on one block at a time you can style content appropriately one block at a time.
