Intro to HTML5 Flashcards
How much larger is 1.5em from base font?
It is 50% larger than base font because it is 1.5 times larger
What is 2em?
2x base font, used with h1 for CSS3 EXTERNAL stylesheets
List structure of HTML5 page
<title>
<p></p>
<p></p>
</title>
#
What % is 1.7em font larger than base font?
70% larger than base font because it is 1.7 times larger than base font
What are the most fundamental elements defined by HTML5 called?
- The document
- Metadata elements
What are some of the traditional CSS3 properties?
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p{ font-size: 20px;
font-family: “Times New Roman”;}
Can you give me scripting headers for HTML5, CSS, PHP?
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”);
What provides structure in a web page?
HTML5 Elements
What is HTML5 anchor tag?
You are building a dynamic website. Sketch out the 3 layouts for each containers homepage.
Name SIX basic elements of the web page
- Header
- Menu
- Content
- Article
- Promo 1
- Promo 2
- Promo 3
- Footer
What is a CSS property?
For ex:
border-radius
border-bottom
border-bottom-color
border-collapse
border-color
border-image-outset
List 5 text editors for MAC and 5 text editors for PC
- PC is Code, BBEdit, Text Mate, Text Wrangler and Dreamweaver
- MAC is Notepad Plus, PSPad, Komodo Edit, Ultra Edit, Dreamweaver
You are viewing same website on desktop and iphone.
How much LESS data do you look at on large screen VS small screen iphone?
We are looking at about 83% less data when someone looks at same data on small device VS large screen device
How much data do we download on large, medium and small screen device?
A reponsive website design
LARGE SCREEN: 180.4kb download
MEDIUM SCREEN: 73.2kb download
SMALL SCREEN: 32kb download
What helps responsive design shift during breakpoints?
CSS3 Media Queries
When do you begin to see column wrapping?
When you bring your responsive website under 980px. The design will lock into dimensions and become fluid.
What is fluid design in web?
It is when the website hits a ‘breakpoint’ and resize to the next screen device esp. column wrapping
What do you use Adobe EDGE REFLOW for?
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
What does modern monitors (mostly wide-screen) support as a resolution? Why?
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
When did they invent the iPad?
2010
List standard assets you will use to create wireframe of your home page
- 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)
What is total height of blogsite, if all assets run traditional heights?
HEADER: 208px-300px
WELCOME: 600px-700px
About 2,900 in height
SECTION: 500px-600px
FOOTER: 100px
What would standard height for footer of blogsite be?
Footer’s standard height is 100px
What would be standard size for HEIGHT for SECTIONS on blogsite?
Sections 500px-600px
What would be a standard size HEIGHT for HEADER for DESKTOP blogsite?
Header is 208px-300px
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
*
What would be a standard size for HEIGHT for WELCOME for DESKTOP blogsite?
Welcome for desktop blogsite is 600px-700px
What is 1,200px GRID SYSTEM based on?
960 GRID SYSTEM of Nathan Smith
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.
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.
What provides AURAL + VISUAL to the web? What is AURAL?
CSS3 provides visual and aural. Aural is relating to sense of hearing
What is the definiton of HTML?
HTML is the language for describing structure of web pages
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
What is XHTML?
XHTML is variant (far less known form) of HTML that uses syntax of XML (Extensive Markup Language)
Name 5 special characters HTML5 processor must support
- Quotation Mark (“) - "
- Apostrophe (‘) - '
- Ampersand (&) - &
- Less-than (<) - <
- Greater-than (>) - >
What does these characters stand for?
1. "
2. '
3. <
4. &
5. >
- Quote
- Apostrophe
- Less-Than
- Ampersand
- Greater-Than
What do you use (2 things) to design a layout that will support special characters?
1. Numerical Code
(special characters like ©)
2. Entity Name
(©)
What is the entity name or number code for the following?
- Non-Breaking Space
- Inverted Exlamation Mark ¡
- Copyright Symbol ©
- Angled Quotation (left) <<
- Soft Hyphen -
- Registered Mark ®
- ** ** OR
- ¡ OR ¡
- © OR ©
- « OR «
- OR
- ® OR ®