Certification Exam

¡Supera tus tareas y exámenes ahora con Quizwiz!

what is the symbol used for ID in css

The CSS for the three divisions

#eg1 { background-image: linear-gradient( to right, white 0%, red 100%); } #eg2 { background-image: linear-gradient( 45deg, red 0%, white 50%, blue 100%); } #eg3 { background-image: linear-gradient( 45deg, red 0%, red 33%, white 33%, white 66%, blue 66%, blue 100%); }

what is a fluid width

what is the "all elements via universal selector (__)"

All elements with href attributes

*[href] { font-size: 95%; }

what is the skeleton of the HTML

- !doctype - html - head - meta - title - link -body - header

The CSS structural pseudo-class selectors

- :nth-child(n) - :nth-last-child(n) - :nth-of-type(n) - :nth-last-of-type(n)

The CSS pseudo-classes for _____, _______, and _________ fields

- :required - :valid - :invalid

what does the dot-slash (./) mean

- Dot (.) points to the same directory and the slash (/) give access to it

The HTML attributes for data validation

- autocomplete - required - novalidate

html with structural elements

- body - header - h1 - header - main - p - main - footer - p - footer - body

Properties for setting borders

- border - border-side - border-width - border-style /* dotted, dashed, solid, double, none...*/ - border-color - border-side-width - border-side-style - border-side-color

common properties for formatting table, tr, th, and td elements

- border-collapse - border-spacing - padding - text-align - vertical-align

the css properties for creating text columns

- column-count - column-gap - column-rule - column-span

the column-rule is a short-hand property for

- column-rule width - column-rule-style - column-rule-color

coding audio in html

- controls - source - audio

Common values for the list-style-type property of an ordered list

- decimal - decimal leading zero - lower-alpha - upper alpha - lower-roman - upper-roman

what are the css style rules with relational selectors

- descendant - adjacent sibling - child - general sibling

values for the list-style-type property of an unordered list

- disc - circle - square - none

what is the skeleton order of the html

- doctype - head - meta - title - link - body - header

what are relative units

- em - rem - %

Two values - border-radius: 15px 50px;

- first value: top-left and bottom-right corners - second value: top-right and bottom-left corners

Three values - border-radius: 15px 50px 30px;

- first value: top-left corner - second value: top-right and bottom-left corners - third value: bottom-right corner

Four values - border-radius: 15px 50px 30px 5px;

- first value: top-left corner - second value: top-right corner - third value: bottom-right corner - fourth value: bottom-left corner

the three components of responsive web design

- fluid layout - scalable images - media queries

The autocomplete attribute can be used on the following elements:

- form - input

·Apply the same formatting to the :_____ and :_____ pseudo-classes for an element. ·That way, those who can't use the mouse will have the same experience as those who can.

- hover - focus

what are the four attributes of the <a> element

- href - title - tabindex - accesskey

what does hsl stand for

- hue-degrees% - saturation% - lightness%

what does hsla stand for

- hue-degrees% - saturation% - lightness% - opacity-value

what are the attributes of the form element

- id - action - method

what elements are in an img elements

- img - src - alt <img src="images/murachlogo.gif" alt="Murach Logo" height="75">

CSS can be added to HTML document in 3 ways

- inline - internal - external

The required attribute can be used on the following elements:

- input - select - textarea

what is the formula for calculating the width of a box

- left margin - left border - left padding - width - right padding - right border - right margin

what are pseudo classes

- link - visited - active - hover - focus - first-child - last-child - only-child

properties for formatting unordered lists

- list-style-type - list-style-image

what are the structural elements

- main - article - section - aside - header - nav - footer

elements in the box model

- margin - border - padding - content

HTML5 introduced a method to let web designers take control over the viewport, through the <______> tag. You should include the following <_____> viewport element in all your web pages:

- meta < meta name = "viewport" content = "width=device-width, initial-scale=1.0>

- is data about the HTML document. This data is not displayed. - typically define the document title, character set, styles, scripts, and other meta information

- metadata

what are typical n values

- odd - even - n - 2n - 3n - 2n+1 - 3n+1

the order of the CSS box model

- padding - border - margin

properties for positioning elements

- position - top, bottom, left, right - z-index

what are absolute units

- px - pt

what does the a stand for in rgba

- red% - green% - blue% - opacity-value

what are the five generic font families

- serif - sans-serif - monospace - cursive - fantasy

possible values for the position property

- static - absolute - fixed - relative

what is the shorthand for font property

- style - weight - variant - size[/line-height] family

what is the sequence in which the provided styles are applied?

- styles from an external style sheet - embedded styles - inline styles

what are the properties for indenting, aligning, and decorating text

- text-indent - text-align - vertical-align - text-decoration

what elements can go inside the head element

- title (required for every HTML document) - style - base - link - meta - script - nonscript

what will this margin apply to: - margin: 0.5em 1em 2em 1em;

- top - right - bottom - left

what will this margin apply to: - margin: 0.5em 1em 2em;

- top - right and left - bottom

what will this margin apply to: - margin: 0 1em;

- top and bottom - right and left

what is the formula for calculating the height of a box

- top margin - top border - top padding - height - bottom padding - bottom border - bottom margin

what are the attributes common to most input elements

- type - id - name - disabled - readonly

The _______ is the user's visible area of a web page. The __________varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the _______. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

- viewport -

what are the relative units of measure for responsive design

- vw - vh - vmin - vmax

content properties for viewport metadata

- width - height - initial scale - minimum-scale - maximum-scale - user-scalable

Common properties for the screen media type

- width - min-width - max-width - height - min-height - max-height - orientation

what are pseudo-elements

-first-letter -first-line

css comments

/* ......................... */

CSS for the SlickNav menu

/* hide the mobile menu */ #mobile_menu { display: none; } . . /* display the mobile menu */ #mobile_menu { display: block; }

what are the three ways to provide styles

1. Use an external style sheet by coding a link element in the head section 2. Embed the styles in the head section 3. Use the style attribute to apply styles to a single element (not recommended)

what is the default font size for most web browsers

16px

same as even

same as odd

2n+1

every third child

every third child or element

3n+1

- selector is used to select and style the active link - a link becomes active when you click on it - :active MUST come after :hover (if present) in the CSS definition in order to be effective

:active

when the user clicks on the link

:active

the first child of an element

:first-child

when the user uses the Tab key to naviagte

:focus

this selector is used to style links when you mouse over them

:hover

when the user hovers their mouse over a link

:hover

the last child of an element

:last-child

normal state of a hyperlink

:link

this selector is used to style links to unvisited pages

:link

- selector matches every element that is the nth child of its parent - n can be a number, a keyword (odd or even), or a formula (like an+b) - look at the :nth-of-type() selector to select the element that is the nth child of the same type 9tag name) of its parent

:nth-child(n)

nth child of parent

:nth-child(n)

- selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child - look at the :nth-last-of-type() selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child

:nth-last-child(n)

nth child of parent counting backwards

:nth-last-child(n)

- selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child - look at the :nth-last-child() selector to select the element that is the nth child, regardless of type of its parent, counting from the last child

:nth-last-of-type(n)

nth element of its type counting backwards

:nth-last-of-type(n)

- selector matches every element that is the nth child, of the same type (tag name). of its parent - look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent

:nth-of-type

nth element of its type in the parent

:nth-of-type

the only child of an element

:only-child

Code that uses a custom property that's declared in the root pseudoclass: Code that declares the custom property

:root { --color-1: #f2972e; }

this selector is used to style links to visited pages

:visited

when the link has been visited before

:visited

audio code in HTML

< audio controls autoplay> <source src="horse.ogg" type="audio/ogg"> <soruce src="horse.mp3" type-"audio/impeg"> Your browser does not support the audio element </audio>

what is the html file for the web page

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="" href=""> </head> <body> <header> <img> <h2></h2> <h3></h3> </header>

html comments

.

A link on another page that jumps to the placeholder

<a href="8reasons.html#reason6">Complete, real-world applications</a>

A link that displays an image

<a href="images/sampson_dinosaur.jpg">Image</a>

A link that starts an email

<a href="mailto:[email protected]">Send us an email</a>

A link that starts an email with a CC address and a subject

<a href="mailto:[email protected][email protected] &subject=Web mail"> Send us an email with a copy to Ben</a>

A link that plays a PowerPoint slide show

<a href="media/chapter_01.ppsx" target="_blank">Review the slides for chapter 1</a>

A link that plays an MP3 file

A link that calls a phone number

coding an aside in html

A button that is created by the button element

The HTML for three divisions

apply a copyright to html

HTML for a form

<form id="email_form" action="subscribe.php" method="post"> <p>Please enter your e-mail address to subscribe to our newsletter.</p> <p>E-Mail: <input type="text" id="email"></p> <p><input type="submit" id="submit" value="Subscribe"></p> </form>

ordered lists nested within an unordered list

HTML for a link tthat loads a web page into a new window or tab

The HTML for the placeholder for reason 6

<h2 id="reason6">Our complete, real-world applications ensure mastery</h2>

HTML for a description list

<h2> <dl> <dt></dt> <dd></dd> (this is indented) </dl>

the HTML that changes the list-style-type property of an unordered list

head section that includes metadata

coding a title in html

coding a title with a link

a head element that includes two style sheets

<head> <title>San Joaquin Valley Town Hall</title> <link rel="stylesheet" href="../styles/main.css"> <link rel="stylesheet" href="../styles/speaker.css"> </head>

Four buttons that are created by the input element

what is the best practice for providing styles?

Code for the SlickNav plugin in the head element

a meta element that sets viewport properties

HTML for slicknav and navigation menus

a vertical navigation menu

Is a new element that makes it much easier to create a navigation menu. It creates a neat, horizontal menu of text links, and helps screen reading software to correctly identify the primary navigation areas in a document

<nav>

a link to a web page in the same folder

<p> Go view our <a href="products.html"> product list</a>.</p>

A link on the same page that jumps to the placeholder

<p><a href="#reason6">Complete, real-world applications</a></p>

Two links that jump to the top of the page

<p><a href="#top">Return to top</a></p> <p><a href="#">Return to top</a></p>

a link to a web page in a subfolder of the parent folder

<p>Read about the <a href="../company/services.html"> services we provide</a>.</p>

a link to a web page at another website

<p>To learn more about Javascript, visit the <a href="http://www.javascript.com/"> official JavaScript web site</a>.</p>

a link to a web page based on the root folder

<p>View you <a href="/orders/cart.html"> shopping cart </a>.</p>

using div elements to structure the content within a section

what spans do you use for a table

a table with a header, body, and footer

<table> <thead> <tr> <th> class="left">text</th> <th></th> </tr> </thead> <tbody> <tr> <td class="left">text</td> <td></td> </tr> </tbody> <tfoot> <tr> <th class="left">text</th> <td></td><td>text</td> </tr> </tfoot> </table>

the HTML for a table before it's formatted

using HTML to create two lists

the media query for the table

@media only screen and (max-width: #px) { th, td {display: block; } thead {display:none; }

Checks that the viewport width is 796 pixels or less

@media only screen and (max-width: 796px) {...}

Checks that the viewport width is between 481 and 796 pixels

@media only screen and (min-width: 481px) and (max-width: 796px) {...}

How to use the range syntax in a media query

A media query for a viewport width of 796 pixels or less @media only screen and (width <= 796px) { ... } A media query for a viewport width between 481 and 796 pixels @media only screen and (481px <= width <= 796px) { ... }

what type of URLs are listed below? http://www.murach.com/index.html http://www.murach.com/books/php/toc.html

Absolute URLs

The HTML for a text area with default text

Comments:<br> <textarea id="comments" placeholder="If you have any comments, please enter them here."> </textarea>

The sequence in which the styles are applied

From the first external style sheet to the last

What does the <em> tag do?

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

how to create and use a custom property

The syntax for creating a custom property selector { --custom-property: value; } The syntax for using a custom property property: var(--custom-property);

The HTML for text fields

Username:<input type="text" id="username" autofocus><br><br> Password:<input type="password" id="password" maxlength="6" placeholder="Enter your password"> <br><br> Hidden:<input type="hidden" id="productid" value="widget">

what is the symbol used for class in css

a period (.)

what is the markup segments for an image that when clicked links to an html file:

a. <a href ="jupiter.html"><img src="jupiter.png"></a>

All <a> elements with href attributes

a[href] { font-family: Arial, sans-serif; }

are points (pt) absolute or relative

absolute

if you use an ______ path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the picture folder

absolute

is a pixel (px) absolute or relative

absolute

positioned element has no positioned ancestors, it used the document body, and moves along with page scrolling

absolute

positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed)

absolute

these positioned elements are removed from the normal flow and can overlap elements

absolute

The URL of the file that will process the data in the form.

action

the attribute specifies where to send the form data when a form is submitted

action

what is this relational selector? h2+p { margin-top: .5; }

adjacent sibling

the element should span across all columns

all

what will this margin apply to: - margin: 1em;

all four sides

For images with useful content, always code an ____ attribute that describes the image.

alt

alternate text when the image is loading or not loaded

alt

encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).

article

contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author, biography, related links, ect.)

aside

You can set the margin property to _____ to horizontally center the element within its container.

auto

- attribute specifies whether a form or an input field should have autocomplete on or off - allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values. - It is possible to have _____________ "on" for the form, and "off" for specific input fields, or vice versa - attribute works with the following < input> types: text, search, url, tel, email, password, datepickers, range, and color.

autocomplete

to start an audio file automatically, use the _________ attribute

autoplay

How to control image scrolling

background-attachment: scroll; /* image moves as you scroll */ background-attachment: fixed; /* image does not move as you scroll */

The syntax for using a linear gradient in the background-image property

background-image: linear gradient (direction, color %, color %, ...);

How to control image position

background-position: left top; /* 0% from left, 0% from top */ background-position: center top; /* centered horizontally, 0% from top */ background-position: 90% 90%; /* 90% from left, 90% from top */

How to control image repetition

background-repeat: repeat; /* repeats both directions */ background-repeat: repeat-x; /* repeats horizontally */ background-repeat: repeat-y; /* repeats vertically */ background-repeat: no-repeat; /* doesn't repeat */

- tag specifies the base URL and/or target for all relative URLs in a document. - tag must have either an href or a target attribute present, or both - There can only be one single <______> element in a document, and it must be inside the <head> element.

base

• form a visible block on a page. • A ________-level element appears on a new line following the content that precedes it. • Any content that follows a _____-level element also appears on a new line. • e.g., headings, paragraphs, lists, navigation menus, or footers. • A ________-level element wouldn't be nested inside an inline element, but it might be nested inside another _______-level element.

block-level elements

How to set the width, style, and color

border-bottom-width: 4px; border-right-style: dashed; border-left-color: gray;

How to set the color of borders

border-color: #808080; border-color: black gray; /* black top and bottom, gray right and left */

The ____-______ property defines the radius of the element's corners.

border-radius

this property allows you to add rounded corners to elements

border-radius

The syntax for the border-radius and box-shadow properties

border-radius: radius; /* applies to all four corners */ border-radius: topLeft topRight lowerRight lowerLeft; box-shadow: horizontalOffset verticalOffset blurRadius spread color;

How to set the style of borders

border-style: dashed; /* dashed line all sides */ border-style: solid none; /* solid top and bottom, no border right and left */

How to set side borders

border-top: 2px solid black; border-right: 4px double blue;

How to set the widths of borders

border-width: 1px 2px;

how to apply a border style

border: 1px dotted black;

The syntax for the shorthand border and border-side properties

border: [width] [style] [color]; border-side: [width] [style] [color];

how to set border properties

border: thin solid green; border: 2px dashed #808080; border: 1px inset; /* uses the element's color property */

sets the bottom margin edge for a positioned box

bottom

- stands for break - tag is used to break the line and start from the next line - tag has no attributes - tag is generally used in forming paragraphs or in writing poems

what is this relational selector? main>p { font-size: 80% } li>a { color: green }

child

the marker is a circle

circle

The ______ attribute is used to specify a class for an HTML element.

class

a ____, attribute selector, or pseudo-class selector is less specific

class

a _____ _____ can be used by multiple HTML elements, while id name must only be used by one HTML element within page

class name

property specifies what elements can float beside the cleared element and on which side.

clear

how do you specify colors in css

color:

property specifies the number of columns an element should be divided into

column-count

property specifies the gap between the columns - If this rule is applied between columns, it will appear in the middle of the gap

column-gap

property sets the width, style, and color of the rule between columns

column-rule

property specifies how many columns an element should span across

column-span

attribute adds audio controls, like play, pause, and volume

controls

for images that are used for ________, code the alt attribute with no value ("")

decoration

what is this relational selector? main li { font-size: 90% } ul a { color:green; }

descendant

- tag specifies additional details that the user can open and close on demand - tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content - any sort of content can be put inside the ________ tag

details

A Boolean attribute that disables and grays out the control. The control can't receive the focus, the user can't tab to it, and the value isn't submitted with the form.

disabled

default value. This market is a filled circle

disc

- this tag is used as a block part of the webpage - it is best to attach it to a section of a web page - it accepts align attribute - this tag should be used to wrap a section, for highlighting that section

div

what element do you use for positioning elements

div.static and ect.

../index.html ../images/logo.gif

document relative paths that navigate up

images/logo.gif books/php/overview.html

document-relative paths that navigate down

an ____ or pseudo-__________ selector is least specific

element

1__ is equal to the font size for the current font. Relative to the font size of the element itself or the parent element. - usually, unless customized, 1__=16px -2__=2 times the size of the current font

the ____ and _____ units are practical in creating perfectly scalable layout!

em and rem

• Not all elements follow the pattern of an opening tag, content, and a closing tag. • Some elements consist of a single tag, which is typically used to insert/embed something in the document e.g., element embeds an image file onto a page:

empty elements

every even child or element

even

by using a link element to link to an external CSS file

external

An _____ style sheet is used to define the style for many HTML pages - To use an _________ style sheet, add a link to it in the head section of each HTML page

external CSS

CSS for the figure and figcaption elements

figure, figcaption { elements: elements: } figure { elements: elements: } figcaption { element: element: } table { element: element: }

element does not leave a gap in the page where it would normally have been located

fixed

positioned relative to the viewport, which means it always stays int he same places even if the page is scrolled. The top, right, bottom, left properties are used to position the element.

fixed

property specifies how an element should float.

float

with this layout the page automatically adjusts to the size of the screen on the device that's accessing

fluid layout

how do you specify font syle i.e times new roman and arial

font-family:

how do you specify font- size in css

font-size:

how do you apply: italic, normal and small-caps to fonts in css

font-style:

how to apply: bold, normal and lighter to font in css

font-weight:

represents a group of end content for a page

footer

what is this relational selector? h2~p { margin-left: 2em }

general sibling

Code that uses a custom property that's declared in the root pseudoclass: Code that uses the custom property

h1 { color: var(--color-1); } nav ul li a { background-color: var(--color-1); } h2 { text-shadow: 2px 2px 4px var(--color-1); color: blue; }

element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

head

how to set the height of the content area

height: 125px; height: 50%; height: auto; (height based on its content (default))

- tag stands for horizontal rule - tag is used to draw a straight line - tag has attributes for width, length, ect. - tag is used more for division of the page and making it more interesting

A unique id that can be referred to by client-side code.

a unique id that can be referred to by client-side code

an ___ is the most specific

the ___ attribute is used to specify a unique id for an HTML element

what does the double-dot-slash (../) mean

in this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document

__________ this property from its parent element

inherit

sets this property to its default value

initial

part sets the initial zoom level when the page is first loaded by the browser.

initial-scale=1.0

by using the style attribute inside HTML elements

inline

- ______ CSS is used to apply to unique style to a single HTML element - _______ CSS uses the style attribute of an HTML element

inline CSS

• are contained within block-level elements, and surround only small parts of the document's content (not entire paragraphs or groupings of content). • An ________ element will not cause a new line to appear in the document. • It is typically used with text e.g <a>,<em>,<strong>

inline elements

All input elements with type attributes that have a value of "submit"

input[type="submit"] { border: 1px solid black; color: #ef9c00; background-color: #facd8a; }

by using a style element in the head section

internal

- __________ CSS is used to define for a single HTML page - ________ CSS is defined in the head section of an HTML page, within a style element

internal CSS

sets the left margin edge for a positioned box

left

a specified length that will set the gap between the columns

length

how to change line heights

line-height:

- The <______> tag defines the relationship between the current document and an external resource. - The <______> tag is most often used to link to external style sheets or to add a favicon to your website. - The <______> element is an empty element, it contains attributes only.

link

property replaces the list-item market with an image. Always specify the list-style-type property in addition. This property is used if the image for some reason unavailable

list-style-image

specifies the type of list-item market in a list

list-style-type

is for content unique to this page. Use <_____> only once per page and put it directly inside. Ideally, this shouldn't be nested within other elements.

main

what is the property that will stop the floating before a subsequent element

main { clear: left; }

- The <______> tag defines metadata about an HTML document. ______ is data (information) about data. <______> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. - ______ will not be displayed on the page, but is machine parsable. - ______ is used by browsers (how to display content or reload page), search engines (keywords), and other web services. - There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <______> tag (See "Setting The Viewport" example below).

Certification Exam

Conjuntos de estudio relacionados

ITSC Final review

Psych MCQ Unit 3

Wheels in Motion Defensive Driving Exam and Quizzes

Types of Advertising Media :)

Accounting 2 Chapter 8

Care of Pop Final Practice Questions

Chapter 8-The Efficient Market Hypothesis

Unit 1 Assignment: "The Gettysburg Address"

1.12 Unit Test : Scientific Principles of Crime Investigation

KNR 380 exam 1

Chapter 7

Biology Chapter ?

Chapter 13 Respiratory System Multiple Choice

Adult Health 1 Test 4 Practice Questions

Topic 7 Review

Study Skills first quarter exam

Bio Ch7,8,9

Anatomy Week 3

Macro HW 4 (Ch.9)

Course 8: Lesson 2: Loan Documentation