Midterm Exam CSC 3750

Ace your homework & exams now with Quizwiz!

img Element

- < img src=" " alt=" "> -Embed images on the page with the empty img element. -The src and alt attributes are required. - img can be used for PNG, JPEG, GIF, and SVG. - The img element tells the browser to make a server request for the image and display it in its place.

Form Control Elements: Custom Buttons

- <button> </button> -The button element is used for creating custom buttons with JavaScript. - <input type= "button"> -Creates a custom button that has no predefined function and can be customized with JavaScript. -<input type= "image" alt=" "> -Allows an image to be used as a button to replace the Submit button. It requires a descriptive alt attribute value.

Table Caption

- <caption> </caption> - Provides a title or description for the table - Improves table accessibility - The caption element must appear first in the table element. - The caption displays above the table by default. Code Example <table> (<caption>Nutritional Information</caption>) <tr> <th>Menu item</th> <th>Calories</th> <th>Fat (g)</th> </tr> ...table continues... </table>

Column Groups

- <colgroup> </colgroup> -<col> </col> - Allows you to assign id and class names to columns so they can be accessed by scripts or styles. - colgroup elements go at the start of the table, after the caption element if there is one. - colgroup elements contain no content; they only provide an indication of column structure. The number of columns in a group is noted with the span attribute: <table> <caption>...</caption> (<colgroup></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup>)  If you need to access individual columns, identify them with col elements: <colgroup></colgroup> <colgroup> (<col class="start"> <col class="end">) </colgroup> <colgroup> (<col class="start"> <col class="end">) </colgroup>

The action Attribute

- <form (action="mailinglist.php") method="POST"></form> -The action attribute provides the location of the script or application that will process the collected form data.

The method Attribute

- <form action="mailinglist.php" (method="POST")></form> The method attribute specifies how the encoded information should be sent to the server (GET or POST): -GET: The encoded data is tacked onto the URL sent to the server: get http://www.bandname.com/mailinglist.php(? name=Sally%20Strongarm&email=strongarm%40example.com) -POST: Data is send in a separate transaction and can be encrypted with HTTPS. (Commonly Used)

src Attribute (for image)

- <img (src= " /images/icon/next.png") alt= "Next"> - The value is the location (URL) of the image file. - Use the relative pathname conventions to point to the image on the server.

width and height Attributes (for images)

- <img src="flowers.svg" alt= " " (width="120" height="160")> -These attributes set the dimensions of the image on the page in number of pixels. -They help the browser maintain space for the image in the layout while the files load. -Don't use width and height attributes if you are sizing the image with style sheets or if the size changes in a responsive layout. -If the attribute values do not match the dimensions of the image, the image will resize and may be distorted or blurry.

Form Control Elements: Hidden Control

- <input type = "hidden"> Code Example <(input type="hidden") name="success-link" value="http://www.example.com/thankyou.html"> -Sometimes it is necessary to feed values to the processing script/app that don't come from the user. - Hidden controls don't display in the browser.

Form Control Elements: File Upload Control

- <input type= "file"> Code Example <form action="/client.php" method="POST" (enctype="multipart/form-data")> <label>Send a photo to be used as your online icon <em>(optional)</em><br> (<input type="file" name="photo">)</label> </form> -The file input type allows a user to select a document from their hard drive to be submitted with the form data. -The method must be set to POST, and the encoding type must be included.

Form Control Elements: Password Field

- <input type= "password"> - <input (type="password") name="pswd" maxlength="10"> - Like a text entry field, except the characters are obscured from view. - The data entered is not encrypted on the way to the server (unless it uses HTTPS, a secure web protocol).

Form Control Elements: Submit and Reset Buttons

- <input type= "submit"> -Submits the collected form data to the server. Does not require a variable name (name attribute): <input type="reset" value="Start over"> - Resets the form to its defaults. - Less common with the rise of JavaScript for form handling. - Change the button text with the value attribute.

Form Control Elements: Text Entry Input

- <input type= "text"> Code example <input type="text" name="color" value="Red" maxlength="24"> -type: Type of input control, in this case a single-line text field. -name: Required variable name. -value: Default text that appears in the field and is sent to server if the field is left blank. -maxlength, minlength: Sets a character limit for the field. -size: The length of the field in number of characters (CSS is more common for sizing).

Form Control Elements: Checkbox Buttons

- <input type="checkbox"> - Multiple checkbox buttons may be selected. Code Example <p>What type of music do you listen to?</p> <ul> <li><input type="checkbox" name="genre" value="punk" checked> Punk rock</li> <li><input type="checkbox" name="genre" value="indie" checked> Indie rock</li> <li><input type="checkbox" name="genre" value="hiphop"> Hip Hop</li> <li><input type="checkbox" name="genre" value="rockabilly"> Rockabilly</li> </ul> -You can like more than one type of music, so checkbox buttons are the right choice for this list. -<input type="checkbox" value=""> - Applying the same variable name to input elements binds them together as a group. -The value for each button must be provided with the value attribute. -The checked attribute causes an option to be selected when the page loads. Multiple buttons in a group may be checked.

Form Control Elements: Radio Buttons

- <input type="radio"> -Only one radio button may be selected at a time. Code Example <p>How old are you?</p> <ol> <li><input (type="radio" name="age" value="under24" checked)> under 24</li> <li><input (type="radio" name="age" value="25-34")> 25 to 34</li> <li><input (type="radio" name="age" value="35-44")> 35 to 44</li> <li><input (type="radio" name="age" value="over45")> 45+</li> </ol> -You can't belong to more than one age group, so radio buttons are the right choice for this list. - <input type="radio" value=""> - Applying the same variable name to input elements binds them together as a mutually exclusive set of options. -The value for each button must be provided with the value attribute. -The checked attribute causes an option to be selected when the page loads. Only one input may be checked.

Form Control Elements: Specialized Text Entry Fields

- <input type="search"> - <input type="email"> - <input type="tel"> - <input type="url"> -These input types are more semantically rich than a default text field. -Browsers may provide keyboards tailored to the input type. -Browsers may validate entries on the fly without using the server application.

The table Element

- <table> </table> - Identifies tabular material. - Contains some number of row (tr) elements. - Optionally, may also have a caption element and row and column group elements.

Table Cells

- <td> </td> -td stands for "table data." - Cells can contain any type of web content. - All content in a table must be contained in td tags.

Form Control Elements: Multi-line Text Entry

- <textarea> </textarea> -<textarea name="entry" rows="6" cols="64">This band is totally awesome!</textarea> -The content of the textarea element is the default value. -rows: The number of rows tall the field is initially drawn (users can write more). -cols: Width of initial text field, in number of characters. -maxlength, minlength: Limits the number of characters that can be entered.

Table Headers

- <th> </th> - th stands for "table header." - Headers provide information about the cells in the row or column they precede. - They are key tools for making table content accessible. Screen readers may read headers aloud before each data cell, providing context that is missing when you can't see the table. - Headers are often rendered in a bold font by default.

Row Groups

- <thead> </thead> - <tbody> </tbody> - <tfoot> </tfoot> -Provide additional semantic structure. -Row group elements may contain one or more tr elements (no direct text content). Code Example <table> ... <thead>  <tr></tr> <tr></tr> <tr></tr> <thead> <tbody>  <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> </tbody> <tfoot>  <tr></tr> </tfoot> </table>

Table Row (tr) Element

- <tr> </tr> - tr stands for "table row." - The only thing that can go between tr tags is some number of th (header) and td (data cell) elements. - There may be no text content in a row that is not contained within a header or data cell.

Style Rule Structure

- A style rule is made up of a selector a declaration. - The declaration is one or more property / value pairs. selector { declaration } selector { property: value; }

Variables (the name Attribute)

- A variable is a bit of information collected by a form control (example: the user's last name). -The required name attribute in the control element provides the name of the variable for that control: <input name="lastname"> NOTE: The variable name is also programmed into the web processing script or app, so the name in the markup must match the name in the processor.

Inline Styles

- Apply a style declaration to a single element with the style attribute: <p style="font-size: large;">Paragraph text...</p> - To add multiple properties, separate them with semicolons: <h3 style="color: red; margin-top: 30px;">Intro</h3>

Form Design Tips

- Avoid unnecessary questions. -Consider the impact of label placement. Labels above fields tend to lead to faster completion. -Choose input types carefully. -Group related inputs. -Primary actions (e.g., "Buy") should be visually dominant to secondary actions (e.g., "Back").

Video Formats

- Browsers are inconsistent about which video formats they support. -Best supported format: MP4 (H.264) [MPEG-4 video container, H.264 video compression, and AAC audio compression] -<source> </source> -To provide several video format options, list them in source elements in the video element. -The browser downloads the first file it supports, so put the videos with the smallest file sizes first. Code Example <video id="video" controls poster="img/poster.jpg"> (<source src="clip.webm" type="video/webm"> <source src="clip.mp4" type="video/mp4"> <source src="clip.ogg" type="video/ogg">) <a href="clip.mp4">Download the MP4 of the clip.</a> </video>

Audio Formats

- Browsers are inconsistent in audio format support. -Best supported format: MP3

The Box Model

- Browsers see every element on the page as being contained in a little rectangular box. Block elements and inline elements participate in the box model. - The box model is the foundation of CSS page layout. - Apply properties such as borders, margins, padding, and backgrounds to element boxes. - Position, move, grow, and shrink boxes to create fixed or flexible page layouts.

Document Structure

- Documents have an implicit structure. -We give certain relationships names, as if they're a family: • All the elements contained in a given element are its descendents. • An element that is directly contained within another element is the child of that element. • The containing element is the parent of the contained element. • Two elements with the same parent are siblings.

Style Rules

- Each rule selects an element and declares how it should display. h1 { color: green; } -This rule selects all h1 elements and declares that they should be green. strong { color: red; font-style: italic; } -This rule selects all strong inline elements and declares that they should be red and in an italic font.

Row and Column Groups

- For complicated tables, you can create semantic groups of rows and/or columns that describe the table's structure. - Row group and column group elements also provide more "hooks" for scripting and styling.

Inheritance

- Many properties applied to elements are passed down to the elements they contain. This is called inheritance. -For example, applying a sans-serif font to a p element causes the em element it contains to be sans-serif as well: ( Chapter 11, slide 17) -Some properties inherit; others do not. Properties related to text usually inherit; properties related to layout generally don't. - Styles explicitly applied to specific elements override inherited styles. - You'll learn to use inheritance strategically to keep your style rules simple.

The Benefits of CSS

- Precise type and layout control. -Less work: Change look of the whole site with one edit. -Flexibility: The same HTML markup can be made to appear in dramatically different ways.

Vector Formats

- SVG - These images contain paths that are defined mathematically.

Responsive image markup addresses four scenarios:

- Sending larger images to high-density screens. - Sending a variety of image sizes for different screen sizes. - Sending alternately cropped images for small screens (art direction). - Providing alternative image formats with smaller file sizes to supporting browsers.

The Cascade: Priority

- Style rules from sources higher in this list override rules from sources listed below them. • Any style marked as !important by the user (to accommodate potential accessibility settings). • Any style marked !important by the author (of the web page). • Author styles (style sheets created in web site production). • User styles (added by the reader). • User agent styles (browser defaults).

alt Attribute (for image)

- The alt attribute provides alternative text for those who are not able to see it. - Required for every img element in order for the HTML to be valid. - It is used by screen readers, search engines, and graphical browsers when the image fails to load.

The Cascade

- The cascade refers to the system for resolving conflicts when several styles apply to the same element. - Style information is passed down (it "cascades" down) until overwritten by a style rule with more weight. - Weight is considered based on: • Priority of style rule source • Specificity of the selector • Rule order

Values

- The data entered or selected by the user in the form control is the value that gets sent to the server. It is paired with the variable for that control. - You can provide a default value with the value attribute: Name: <input name="lastname" (value="Unknown")> In this example, if the text input is left blank, the value "Unknown" would be sent to the server for the variable "lastname".

Declarations

- The declaration is made up of a property/value pair contained in curly brackets { }: selector { property: value; } Example: h2 { color: red; font-size: 2em; margin-left: 30px; opacity: .5; } - End each declaration with a semicolon to keep it separate from the next declaration. -White space is ignored, so you can stack declarations to make them easier to read. -Properties are defined in the CSS specifications. -Values are dependent on the type of property: • Measurements • Keywords • Color values • More

External Style Sheets

- The style rules are saved in a separate text-only .css file and attached via link or @import. Via link element in HTML: <head> <title>Titles are require</title> (<link rel="stylesheet" href="/path/example.css">) </head> Via @import rule in a style sheet: <head> <title>Titles are required</title> <style> (@import url("/path/example.css");) p {font-face: Verdana;} </style> </head>

Selectors

- There are many types of selectors. Here are just two examples: -p {property: value;} Element type selector: Selects all elements of this type (p) in the document. -#intro {property: value} ID selector (indicated by the # symbol) selects by ID value. In the example, an element with an id of "intro" would be selected.

Form Accessibility

- Users may not be able to see the form. They may be listening to it with a screen reader. - Whereas sighted users can see at a glance how elements are organized, form accessibility features create semantic connections between form components.

The Cascade: Rule Order

- When two rules have equal weight, rule order is used. Whichever rule appears last "wins." Code Example <style> p {color: red;} p {color: blue;} p {color: green;} </style> In this example, paragraphs would be green. - Styles may come in from external style sheets, embedded style rules, and inline styles. The style rule that gets parsed last (the one closest to the content) will apply.

The Cascade: Specificity

- When two rules in a single style sheet conflict, the type of selector is used to determine which rule has more weight. - For example, ID selectors are more specific than general element selectors.

Browser Support

- picture, source, srcset, and sizes are supported by all current browser versions. - Every technique includes a standards img element as a reliable fallback. -For better support, use the Picturefill polyfill script that makes older browsers support the new markup (scottjehl.github.io/picturefill).

Alternative Text Tips

-Alternative text (alt text) should convey the same information and function as the image. -If the image is purely decorative and shouldn't be read aloud, include the alt attribute with an empty value: <img src="flowers.svg" (alt= " ")> • Consider what the alt text would sound like when read aloud by a screen reader. Is it helpful or a hindrance? • When an image is used as a link, the alt text serves as the linked text. Write what you'd want the link to say, don't just describe the image.

Bitmapped Formats

-PNG, JPEG, GIF, and WebP - These images are made up of a grid of colored pixels.

High-Density Displays (x-descriptor)

-Screens and images are made up of squares of colored light called pixels. - On standard screens, the pixels in an image and CSS measurements map one-to-one with the device pixels. - High-density displays fit 2x, 3x, or 4x the number of device pixels in the same amount of space. -High-density devices use a measurement called reference pixels for page layout. Images and CSS measurements map with the reference pixel grid (not the tiny device pixels). -In order for images to look sharp and not blurry on high-density displays, they need to map with the device pixels.

Spanning Cells

-Spanning Stretching a cell to cover several rows or columns. -Column span Stretching a cell to the right over subsequent columns. -Row span Stretching a cell downward over several rows.

HTML Table Structure

-Tables are made up of cells arranged into rows. -How it looks using markup (table, tr, th, and td): ( Chapter 8, slide 5) -The same table written in code: <table> <tr> <th>Menu item</th> <th>Calories</th> <th>Fat (g)</th> </tr> <tr> <td>Chicken noodle soup</td> <td>120</td> <td>2</td> </tr> <tr> <td>Caesar salad</td> <td>400</td> <td>26</td> </tr> </table> -Columns are implied by the number of cells in each row (not created with column elements).

How responsive images work

-You provide multiple image versions. -You specify sizes and preferences with responsive image markup. -The browser makes the final selection.

CSS Comments

/* comment goes here */ - Content between /* and */ will be ignored by the browser. - Useful for leaving notes or section labels in the style sheet. - Can be used within rules to temporarily hide style declarations in the design process.

Art Direction Selection (picture element)

1) Details may be lost in images scaled down to fit small screens. 2) To change the image itself rather than just resizing it, make an art-direction-based selection with the picture and source elements: - Provide differently cropped versions. - Provide both landscape (wide) and portrait (tall) versions. - Change or remove text in images to keep it legible.

Form Control Elements

1) Form control elements (also called widgets) collect data from the user. A few examples: - <input type="text"> - <input type="submit"> - <input type="checkbox"> - <select> 2) Form controls collect data in variable/value pairs. Examples: variable = "email" value = [email protected] variable = "color" value = green

Alternative Image Formats (type Attribute)

1) New, efficient image formats (WebP, JPEG 2000, and JPEG XR) are available, but aren't supported by every browser. 2) Use the picture and source elements with the type attribute for image-format-based selections: <picture> <source (type="image/webp") srcset="pizza.webp"> <source (type="image/jxr") srcset="pizza.jxr"> <img src="pizza.jpg" alt=""> </picture> 3) Browsers use the first image format they support and don't download the rest.

Art Direction Selection Format

1) The picture element has no attributes; it is a wrapper for source and img elements. 2) The img element is required and must go last in the list. 3) source elements test for media conditions (media attribute) and provide alternative image options for each size (srcset). Code Example: 1) <picture> 3) <source media="(min-width: 1024px)" srcset="icecream-large.jpg"> 3) <source media="(min-width: 760px)" srcset="icecream- medium.jpg"> 2) <img src="icecream-small.jpg" alt="hand holding ice cream cone and text that reads Savor the Summer"> 1) </picture> (Numbers in the code are for references above)

High-Density Displays (cont'd)

1) The srcset attribute in the img element lists image alternatives based on pixel density, specified with an x-descriptor (#x): <img src="/images/photo-200px.jpg" alt="" (srcset="/images/photo-400px.jpg 2x, /images/photo-600px.jpg 3x" )> -The src attribute is required. Use it for the standard image. -The srcset value is a comma-separated list of alternative image URLs followed by an x-descriptor. -A device with a standard screen density gets only the 200px wide version of the image. Higher densities get larger images. 2) X-descriptors tell the browser to make an image selection based on screen resolution only. 3)Use x-descriptors for images that stay the same pixel dimensions regardless of the screen size and layout changes.

Web Form Transaction

1. Browser renders the form inputs as indicated in the markup. 2. User enters information in the form and hits Submit. 3. The browser encodes the information entered and sends it to the server. 4. The application processes the information. 5. The application returns a response (for example, a thank you message or reloading the page).

How Style Sheets Work

1. Start with a marked up document (like HTML, but could be another XML markup language). 2. Write styles for how you want elements to look using CSS syntax. 3. Attach the styles to the document (there are a number of ways). 4. The browser uses your instructions when rendering the elements.

Audio Players

<audio> </audio> <source> </source> -The audio element embeds an audio player on the page, similar to video, but with no height, width, or poster attributes: <audio id="threeoclock" controls preload="auto"> <source src="jetfighter.mp3" type="audio/mp3"> <source src="jetfighter.ogg" type="audio/ogg"> <source src="jetfighter.webm" type="audio/webm"> <p>Download <a href="jetfighter.mp3">"Jet Fighter"</a></p> </audio>

Form Accessibility: Fieldsets and Legends

<fieldset> </fieldset> <legend> </legend> Fieldset: Indicates a logical grouping of controls (examples: credit card name, number, date, etc.). By default, rendered with a box around the set of controls. Legend: Provides a caption for the enclosed fields. By default, it's displayed along the top edge of the fieldset. Code Example <fieldset> <legend>Customer Information</legend> <ul> <li><label>Full name: <input type="text" name="fullname"></label></li> <li><label>Email: <input type="text" name="email"></label></li> <li><label>State: <input type="text" name="state"></label></li> </ul> </fieldset>

Window-in-a-Window (iframe)

Form Control Elements: Color Selector

<input type= "color"> - The color input type is intended to provide a pop-up color picker. -It is not well supported. Non-supporting browsers display a text-entry field.

Form Control Elements: Date and Time Controls

<input type="date"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week"> Code Example <input (type="date") name="birthday" value="2017-01-14"> -A starting value may be provided in standard date-time format. - Browsers may display date and time selection widgets (not universally supported). -On non-supporting browsers, date and time inputs display as usable text-entry fields.

Form Control Elements: Numerical Controls

<input type="number"> <input type="range"> - Number and range controls collect numerical data. Browsers may render counter or slider widgets. -Both types accept min and max attributes for setting limits on the allowed values.

Form Accessibility: Labels

<label> </label> -The label element associates a descriptive label with a form field. Implicit association The label text and form control are both contained within the label element: <li><label>Red <input type="radio" name="color" value="red"></label></li> Explicit association Matches the label with the control's ID reference using the for attribute: <li><label (for="form-colors-red")>Red</label> <input type="radio" name="color" value="red (id="form-colors-red")></li>

The object Element

alt Attribute example (for image)

<p> If you're <img src="/images/smiley.png" alt= "happy"> and you know it, clap your hands. </p> - If the image doesn't appear, then the word happy will be visible.

Example of an Inline SVG

<p>This summer, try making pizza (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100"> <circle fill="#D4AB00" cx="36" cy="36" r="36"/> <circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/> <circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/> <circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/> <circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/> <circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/> <circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/> <circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/> <circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/> <circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/> <circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/> </svg>) on your grill.</p> - In the middle of the sentence, there should be a svg image of a pizza in it.

Form Control Elements: Drop-down Menus

<select> </select> <option> </option> <optgroup> </optgroup> -The select element creates a drop-down menu when there is no size attribute (or if size="1"). -The select element contains some number of option elements. -The content of the option element is the value sent to the server (or one can be provided with the value attribute). The select menu drops down to reveal options when the user clicks on it: <p>What is your favorite 80s band? <select name="EightiesFave"> <option>The Cure</option> <option>Cocteau Twins</option> <option>Tears for Fears</option> <option>Thompson Twins</option> <option value="EBTG">Everything But the Girl</option> <option>Depeche Mode</option> <option>The Smiths</option> <option>New Order</option> </select> </p>

Adding Text Tracks

<track></track> - The track element provides text that is synchronized with the audio or video. Useful for: • Subtitles • Captions • Descriptions for sight impaired • Chapter titles • Metadata (non-displaying) -The track element goes inside the video or audio element you want to annotate. -The src attribute points to a text file in .vtt format. Code Example <video width="640" height="320" controls> <source src="japanese_movie.mp4" type="video/mp4"> <source src="japanese_movie.webm" type="video/webm"> (<track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles" default> <track src="french.vtt" kind="subtitles" srclang="fr" label="Sous-titres en français">) </video>

Embedded Video

<video> </video> -HTML5 introduced the video element for embedding a video player on a web page. There is also an API for controlling video play. -The content in the video element is a fallback for browsers that don't support the HTML5 video element (e.g., providing a link to the video). Video element attributes: • width/height: Specific dimension in pixels. • poster: Provides location of still image to show before video plays. • controls: Indicates that the video player controls should be visible. • autoplay: Makes the video start playing automatically. Code Example <video src="windtunnel.mp4" width="320" height="262" poster="windtunnel_still.jpg" controls autoplay> Get the <a href="windtunnel.mp4">MP4 wind tunnel video</a> </video>

CSS Units of Measurement

CSS provides a variety ways to specify measurements: Absolute units Have predefined meanings or real-world equivalents. Relative units Based on the size of something else, such as the default text size or the size of the parent element. Percentages Calculated relative to another value, such as the size of the parent element.

The form Element

Code Example <form action="URL" method="POST or GET">  </form> -The form element is a container for all the content in the form and its input controls. -The action and method attributes are necessary for interacting with the processing program.

Form Control Elements: Scrolling Menus

Code Example <p>What is your favorite 80s band? <select name="EightiesFave" size="6" multiple> <option>The Cure</option> ... </select> </p> -The same markup as drop-down menus, but the size attribute specifies how many lines to display. -The multiple attribute allows more than one option to be selected. Use the optgroup element to create a conceptual group of options. The label attribute provides the the heading for the group: <select name="icecream" size="7" multiple> <optgroup label="traditional"> <option>vanilla</option> <option>chocolate</option> </optgroup> <optgroup label="fancy"> <option>Super praline</option> <option>Nut surprise</option> <option>Candy corn</option> </optgroup> </select>

SVG Example

Compare the SVG source to the image. The svg element contains a rectangle (rect element) and a text element: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180"> <rect width="300" height="180" fill="purple" rx="20" ry="20"/> <text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72"> hello! </text> </svg> - It should contain a rectangled image that is filled in purple with the text "hello!" in yellow.

Embedded Style Sheets

Embedded style sheets are placed in the head of the document via the style element: <head> <title>Titles are required</title> (<style> /* style rules go here */ </style>) </head>

High-Density Displays Example

For an image that displays at 200 pixels wide in the layout, provide these versions: -200px wide image for standard screens - 400px wide image for 2x high-density screens - 600px wide image for 3x high-density screens -800px wide image for 4x high-density screens

Tabular Data

HTML table markup is for data arranged into rows and columns.

Variable-Width Images (cont'd)

If the image proportion changes based on the size of the viewport, use a media condition in the sizes attribute to test for the screen width and determine the image size: • sizes = "(media-feature: condition) length" <img src="strawberries-640.jpg" alt="baskets of ripe strawberries" srcset="strawberries-240.jpg 240w, strawberries-480.jpg 480w, strawberries-672.jpg 672w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 70vw, 240px"> -If the viewport is 480 pixels or less, the image fills 100% of the viewport width. - If the viewport is wider than 480 pixels but less than 960 pixels (maxwidth: 960px), the image appears at 70% of the viewport width. -If the viewport is wider than 960 pixels, the image gets sized to exactly 240 pixels. - Now that the browser knows the width of the viewport and how big the image will appear within it, it can select the most appropriate image from the srcset list to download.

Web Image Formats

PNG, JPEG, GIF, SVG, and WebP

Inline SVGs with the svg Element (PROS VS. CONS)

PROS: - Can take full advantage of scripting and styling the SVG because the elements in the SVG are part of the DOM for the document. CONS: -Code can get extremely long and unwieldy. -Harder to maintain images embedded in the source. -Can't take advantage of caching repeated images. - Not universally supported.

Adding SVG with the img Element (PROS VS. CONS)

PROS: - Easy and familiar -Universally supported CONS: -Can't manipulate the SVG with scripts or styles. - The SVG can't contain any external resources such as images or fonts.

Embedding SVGs with object (PROS VS. CONS)

PROS: -SVG can be scripted and use eternal files (images and fonts). CONS: -You can't change styles with the same CSS used for the document. -May be buggy in some browsers.

Responsive Images

Responsive image markup allows us to deliver images that are appropriate for the user's viewing environment.

Adding SVG Images

SVG images are unique: - vector format, made up of shapes & paths. - Those shapes and paths are described in a text file using the Scalable Vector Graphic markup language. - The elements in an SVG can be styled with CSS and scripted for interactivity. -Because they are vector, SVGs can resize with no loss of quality.

Embedding SVGs with object

The content of the object element is a fallback text or image that displays if the SVG is not supported: <object type="image/svg+xml" data="pizza.svg"> <img src="pizza.png" alt="pizza"> </object>

Row Spans

The rowspan attribute to specifies the number of rows the cell spans: <table> <tr> <th (rowspan="3")>Serving Size</th> <td>Small (8oz.)</td> </tr> <tr> <td>Medium (16oz.)</td> </tr> <tr> <td>Large (24oz.)</td> </tr> </table> -Notice that the td elements that were spanned over are no longer in the source.

Adding SVG to a Page

There are several ways to add an SVG image to a web page: - <img> element - <object> element - <svg> element directly in HTML (inline SVG)

Adding Styles to the Document

There are three ways to attach a style sheet to a document: External style sheets A separate, text-only .css file associated with the document with the link element or @import rule Embedded style sheets Styles are listed in the head of the HTML document in the style element. Inline styles Properties and values are added to an individual element with the style attribute.

Table Columns Are Implied

This table would have 2 rows and 3 columns (because there are 3 cells defined in each row): <table> <tr> <th>Burgers</th> <td>Organic Grass-fed Beef</td> <td>Black Bean Veggie</td> </tr> <tr> <th>Fries</th> <td>Hand-cut Idaho potato</td> <td>Seasoned sweet potato</td> </tr> </table>

Column Spans

Use the colspan attribute to specify the number of columns the cell should span over: <table> <tr> <th (colspan="2")>Fat</th> </tr> <tr> <td>Saturated Fat (g)</td> <td>Unsaturated Fat (g)</td> </tr> </table> -Notice that the first tr element only has one cell in it now. Every row should have the same number of cells or equivalent colspan values.

How Forms Work

Web forms have two components: - The form on the page that collects input. - An application on the server that processes the collected information.

Web Processing Applications

Web forms may be processed by any of the following technologies: -PHP (.php) -Microsoft ASP (.asp) -Microsoft ASP.net (.aspx) -Ruby on Rails - JavaServer Pages (.jsp) - Python

Variable-Width Images (w-descriptor)

When images resize based on the size of the screen or browser window (such as in a responsive layout). Use the srcset attribute with a w-descriptor and the sizes attribute to make a viewport-based selection: <img src="strawberries-640.jpg" alt="baskets of ripe strawberries" (srcset="strawberries-480.jpg 480w, strawberries-960.jpg 960w, strawberries-1280.jpg 1280w, strawberries-2400.jpg 2400w" sizes="100vw")> -The src attribute is required and specifies the default image size. -The value of srcset is a comma-separated list of images and w-descriptors. - w-descriptors list the actual image width (in pixels). -The sizes attribute specifies the size at which the image appears in the layout. In this example, it is 100% the width of the browser (100 viewport-width units).

Absolute Units

With the exception of pixels, absolute units are not appropriate for web design: px pixel in inches mm millimeters cm centimeters q 1/4 millimeter pt points (1/72 inch) pc pica (1 pica = 12 points = 1/6 inch)

Adding SVG with the img Element

You can add an .svg file to the page with the img element: -<img src="/images/circle.svg" alt="">

Inline SVGs with the svg Element

You can paste the content of the SVG text file directly into the HTML source. This is called using the SVG inline.

See all study sets

Midterm Exam CSC 3750

Related study sets

CH 21 The Heart

Stat 1 chapter 3

Business Info Systems Exam 2 (MIS-3,8,6,7)

Smart book exam 4

(Part 2) Chapter 5: Theories of Counseling and the Helping Relationship

political science chapter 4

American History lesson 1 topic 3

Chapter 28

Vaginal Discharge, Pelvic Pain, and Dyspareunia

Ch 12: The endomembrane system and Peroxisomes

Module 11

OB Exam 2

Chapter 36: Emergency Preparedness and Protective Practices

Math 18 midterm 1

S66 FSA: Other Federal Acts

The House of Representatives-Quiz

Psychiatric and Mental Health Nursing - Mood, Adjustment, and Dementia Disorders

Module 06 Securing Cloud Resources

Microeconomics Vocabulary

OB Ch 27 Care of the Mother and Newborn