CS008 Final
DOM does what?
- Document Object Model - The DOM provides a way of organizing, accessing, and changing any part of a web page. Both JavaScript and CSS use the DOM.
JavaScript does what?
- Enables document interaction - JavaScript is a programming language that can manage any part of the document via the DOM and interact with external servers to send and receive information. JavaScript sometimes also runs on web servers.
IOT
- Internet of Things. - global collection of communicating devices that sense and control technology on behalf of humans
CSS does what?
- Manages document presentation - CSS consists of a set of style rules about how to display the parts of a document.
Markup
- Part of a document that explains how to interpret or structure other parts of the document. - Markup are instructions to a browser about the rest of the document.
HTML does what?
- Specifies document structure. - HTML is used to specify the purpose of each part of a document. Each web browser has a default stylesheet that controls how the page is displayed, but HTML does not specify how the document parts are displayed.
Assume a directory called "junk" is located in the hobbies directory, and the junk directory contains the file stuff.html. What relative URL would stuff.html use to link to index.html?
.../.../index.html
<form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> What is the minimum/maximum number of items that can be sent to the server?
1 & 5
<form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> If the user clicks submit without changing anything in the form, how many items will be sent to the server?
2
In what year did web browsing first become more likely on mobile rather than desktop?
2016
How many cars, machines, meters, and other IoT devices did Cisco, a major network equipment manufacturer, predict would be connected to the Internet in 2020?
49 billion
Which HTML snippet creates a link that links back to the top of the web page?
<a href="#">Top</a>
Which element can create a button with an image?
<button>
The W3C Markup Validator indicates the HTML below has an error. What deprecated tag is causing the error?
<center>
Which tag is a generic block tag without any implied meaning?
<div>
Which attribute inside the <label> tag is used to associate the label with a widget?
<for>
Create a combo box that uses the datalist with id "states".
<input list ="states">
Allow the user to select some combination of red, blue, and green.
<input type="color">
Ensure that the date entered will not be greater than the end of 2025.
<input type="date" max="2025-12-31">
Allow the user to enter a day, month, and year.
<input type="date">
Allow the user to enter a month, and year.
<input type="month">
Ensure that the temperature entered will not be less than -273.16.
<input type="number" min="-273.16">
Ensure the user types a valid number between 0 and 10.
<input type="number" min="0" max="10">
Ensure the user enters a value in the input field.
<input type="number" required>
Allow the user to use a slider to select a number between 0 and 10.
<input type="range" min="0" max="10">
Ensure that the value will change by multiples of 100.
<input type="range" step="100">
Ensure that the user types only one letter in the range A through F.
<input type="text" pattern="[A-F]">
Which tag creates a text box widget?
<input>
Which tag creates the container that holds the picture?
<main>
Which tag creates the parent container that holds the paragraph?
<main>
What is the proper way to get the Members link to link to the Members section?
<section id="members">
Start a table with the caption "store information"
<table><caption>store information</caption>
What HTML creates the "alpha" table cell?
<td colspan="2">alpha</td>
What html creates the second row?
<tr> <td>beta</td> <td rowspan="2">gamma</td> </tr>
What HTML creates the third row?
<tr> <td>epsilon</td> </tr>
Language
A set of rules describing how to write HTML.
Responsive web design
A web design approach that creates web pages that automatically move and resize parts depending on the display size and orientation.
Mobile first
A web development approach that advocates first creating a reduced-feature version of a website for mobile users. Then, the developer creates a full-featured website for visitors using desktop computers.
value
Allows the input to start with a default value.
name
Allows the server to identify which data came from which widget.
Error or no error: (b)
Error (need closing </li>)
IOT, T or F: The pool company will not know that the water level is too low unless the customer calls or someone happens to check the system status web page.
False
T or F: Adding a fourth column called "Price" and ticket prices for each venue requires adding only a single set of <th> tags listing the prices.
False
T or F: Adding type="i" to the first <li> changes the list to i., ii., iii.
False
T or F: An <h3> tag should be placed inside a <p> tag.
False
T or F: An <option> tag must have a value attribute.
False
T or F: Browser fallbacks are only used to make new features work on old browsers.
False
T or F: Buttons always submit form data to a server.
False
T or F: Hyperlinks may only contain text.
False
T or F: If <h1> text appears too big, <h2> or <h3> tags should be used to decrease the text size.
False
T or F: It is better to avoid new HTML5 elements and attributes because of incomplete support for some new HTML5 features.
False
T or F: The <br> tag has a closing tag.
False
T or F: The <p> tag can have another <p> tag inside.
False
T or F: The web browser will always create a new window for hyperlinks whose target attribute is _blank.
False
True or False: To copy the functionality of another web page found on the web, just copy the HTML from the view source page.
False
What is the current recommended version of the HTML standard?
HTML5
<form action="https://google.com/"> </form> Which method will the browser use to communicate with the server?
HTTP GET Request
type
Indicates which kind of widget is displayed by the browser.
Valid or invalid: <p>Mary had a <!--soft, little</p>--> lamb. Its fleece was white as snow.
Invalid
Valid or invalid: <a "https://cnn.com">CNN</a>
Invalid (needs ahref=)
Screen size
Physical dimension in pixels of a device's screen.
placeholder
Provides a hint to the user about the information being requested.
What change is needed to move the details list to the right of each member's photo?
Put each photo and list into a table row
Hypertext
Text that contains connections to other documents.
What is the width of a block tag?
The full width of the block's parent container
T or F: A drop-down menu only allows one option to be selected.
True
T or F: The target attributes make the venue links open in a different window or tab.
True
T or F: Web developers can sometimes ignore really old web browsers.
True
The <br> tag is an inline tag.
True
Tor F: The fragment identifier for the <p id="location"> opening tag is location.
True
True or False: The default value for the target attribute is _self.
True
True or false: A polyfill is code that creates a browser fallback for a feature if the web browser does not support that feature.
True
How many elements/"words" are there in the HTML language?
Under 200
Valid or invalid: <p>Bananas grow <!--in bushes.</p>--> on a tree.</p>
Valid
Valid or invalid: This is the first verse.<br/>The second verse begins on the next line.
Valid, but good practice is <br>
An HTML _____ is a program that indicates whether a document follows the HTML standard.
Validator
Affordances
Visual clues that guide the user in figuring out how to use an app.
What organization defines web standards?
World Wide Web Consortium or W3C
For the following questions, assume the image is 1000 pixels wide and 800 pixels high. Indicate the values needed in the following HTML to produce an image with an aspect ratio of 2:1 while maintaining the image's width of 1000 pixels.
a = 1000, b=500
Just a list of some common CSS rules
background-color, font-family, font-size, padding, margin-left
If the user clicks the "Rate 4" button, to what color is the fourth rating star set?
blue
What types of tags can be inside a block tag?
both inline and block tags
The W3C Markup Validator indicates the HTML below has an error. What attribute is missing from <meta>?
charset
In which file would you expect to find the hyperlink below? <a href="index.html">Home page</a>
family.html
In which file would you expect to find the hyperlink below? <a href="../family.html">Family</a>
geocaching.html
Assume a directory called "junk" is located in the hobbies directory. What relative URL would index.html use to link to a file called stuff.html in the junk directory?
hobbies/junk/stuff.html
<form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> Which attribute should be added for each widget to add labels to the form?
id
Valid or invalid: <a href="example.com/index.html">See example</a>
invalid
Valid or invalid: <img src="smiley.gif">
invalid
Valid or invalid: <img src="sparky.png" alt="A picture of my dog, Sparky"></img>
invalid
The W3C Markup Validator warns that the HTML below is missing an attribute. What attribute is missing from <html>?
lang
Which input element attribute limits the number of characters the user can type in a text box or password field?
maxlength
Which attribute must be set to create a text box widget?
no attribute
What types of tags can be inside an inline tag?
only inline tags
What is the id of the span containing the third rating star?
rating3
CSS colors
rgb(255, 0, 0) Bright red redrgb(0, 255, 0) Bright green rgb(0, 0, 255) Bright blue rgb(144,238,144) A particular mix of red and blue, light green rgb(150, 0, 150) A particular mix of red and blue, yielding purple rgb(100, 100, 100) Equal red, green, blue yields gray rgb(255, 255, 255) Full red, green, blue yields white rgb(0, 0, 0) black rbg (200, 0, 0) dark red rgb(250, 0, 250) purple rgb(250, 150, 0) orange rgb(255, 255, 255) white
Valid or invalid: <img alt="Fun weekend" src="weekend.jpg">
valid
Valid or invalid: <img src=birthday.jpg alt=Birthday>
valid
Valid or invalid: <P>A short paragraph.</P>
valid (but lower case is still good practice)
