Quiz Review Terms and Tags

These terms will be the basis of the 10 to 20 question quizzes that will be given in class via Canvas once a week. All questions are very short multiple-choice questions with very short answers. Almost all students finish these very short 10 question quizzes in 3 minutes. However, the 10-question exams exam will be extended to 7 minutes to accommodate any student with special needs or who is not a native English speaker.

If a term, concept, or tag was not adequately defined in the in-class lecture or review below, use the Web to get a full understanding of that term, concept, or tag.

Know: www, http:// (protocol), .htm, .html, tag, <html> (begin a Web page), <head>, <title> (places title in Titlebar and Task pane), <body> (contains ALL content that displays on screen), <br> (or <br /> for HTML 4), <p>, <b> or <strong>, <i> or <em>, <h1>, <h2>, <h3>, comments: , </html> (end a Web page)

You can copy the code below and paste it in to Notepad (Start > Programs > Accessories) then edit it for your first Web page. (Be sure to save it as a .html or .htm file.)

Know all the tags for the following:
<html>
<head>
    <title>Quiz Review Terms and Tags</title>
</head>

<body>
   <h1>My Heading Goes Here</h1>
   <p><em>Demo Text for my first Web page </em></p> 
      Line 1<br> 
      Line 2<br>
      <a href="http://msn.com">MSN</a> 
</body>
</html>

Know: <a href, id ( # placed in front of an ID for an Internal link on the same page),
Relative path - to a file on the same site. Ex: <a href="Contact.htm">Contact Us</a>
Absolute path - full address starting with http:// for an External link on another site. Ex: https://www.scf.edu/
target="_blank", mailto:, ?Subject=
Protocol: is a set of rules that governs how information is exchanged - ex: http:// or ftp://
A URL consists of the Protocol (ex: http:), the Domain (SiteName.com), and a path (such as the folder) and file (ContactUs.htm) Ex: http://SiteName.com/Contact.htm
If the path and file name are left off of the URL, the browser searches in the root folder (the main folder) of the Web server for the home page which is named: index.htm or index.html, or default.htm or home.htm, or index.php
To direct the path up one folder level, precede the file name by ../

For the following 6 links, assume a folder (it could be in My Documents or on a Web server) called MySite contains an Admin folder and a public_html folder
* MySite > Admin folder contains a file called: admin.htm
* MySite > public_html folder contains: index.htm, ContactUs.htm, AboutUs and a Products folder
* MySite > public_html > Products folder contains: Computers.htm, Monitors.htm, Printers.htm
Assuming the above, the file index.htm has the following ID and 6 links:

<h2 id="OurPledge">Our Pledge </h2>

<a href=#OurPledge">Our Pledge</a>


<a href="Contact.htm">Contact Us</a> 

<a href="Products/Monitors.htm">Monitors</a>

<a href="../admin/admin.htm">Admin Login</a>

<a href="mailto:Bob@abc.com?Subject=Request Quote">myName@abc.com </a>

ALSO KNOW F5 (refresh), F11 (full screen), Ctrl + (increase display and font), Ctrl - in a browser, Windows + Right Arrow, Print Screen vs Alt Print Screen, Ctrl A, Ctrl C, Ctrl V, Ctrl Z, (Google them if you have to)

Know: The Graphics Interchange Format (GIF) was introduced by CompuServe in 1987. The format allows a single image to reference a palette of up to 256 distinct colors in a relatively small file size. Drawings and simple animations tend to be .gif files.

The Joint Photographic Experts Group (JPEG or JPG) is a commonly used method of compression for photographic images. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. As JPEG is a lossy compression method, meaning that some visual quality is lost in the process and cannot be restored. JPG files can display a spectrum of 16.7 million colors.

Lossless data compression is a class of data compression algorithms that allows the exact original data to be reconstructed from the compressed data. Some image file formats, like PNG or GIF, use only lossless compression.

Portable Network Graphics (PNG) is an image format that employs lossless data compression. PNG was created to improve upon and replace GIF as an image-file format not requiring a patent license. The motivation for creating the PNG format was in early 1995, when it came to light that the data compression algorithm used in the GIF format, had been patented by Unisys and there might be an issue with using GIF files on the Web. PNG files are very high quality, work well with photographs, and are sometimes smaller in size than a similar quality JPG file.

In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information technology. “Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

Below is a typical line for adding an image to a Web page:
<img src="images/dog.png" ~~height="200" width="200"~~ alt="Picture of a big dog">
Note1: the path is set to the images folder
Note2: the height and width are seldom set in html 5, but height and width only affects the way it is rendered in the browser. If the actual uploaded file came directly from a camera, it may be well over three megabytes in size, and will cause your Web page to load slowly. So resize images before putting them online.
Note3: the alt tag is used so that screen readers can provide alternate text for visually impaired visitors to the page.

Know: The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

There are also some Extended color names such as: darkblue, dodgerblue, mediumblue, skyblue, aquamarine, brown, beige, crimson, gold, hotpink, indigo, magenta, tan, violet…

(At one time it was suggested that Webweavers avoid extended color names and limit their colors to 216 Web safe colors. But with today's modern browsers, this is no longer necessary.)

Hexidecimal is a base 16 numbering system. (As a comparison, Decimal is a base 10 numbering system, and Binary is a base 2 numbering system.)
Hex triplet values or RGB (Red, Green, Blue) triplets can be used to represent literally thousands of other colors:

Hex and RGB can represent FF x FF x FF colors or 255 x 255 x 255 colors or over 16 million colors.

For RGBA(255,255,0,.5) the .5 represents the Alpha channel for opacity, in this case 50% transparent.

The following three in-line style statements all display the text “abc” in the highest value of red:

All <h1> tags for the entire Website can be set to dark blue with the following CSS statement:

(The /* … */ is used to add comments or remarks to style sheets. Comment are ignored by the browser)

<div style="background-color:rgba(255,0,0,.5)">Red 50% opague</div>

Red or #FF0000 or RGB(255,0,0)
Lime (Green) or #00FF00 or RGB(0,255,0)
Green or #008000 or RGB(0,128,0)
Blue or #0000FF or RGB(0,0,255)
Yellow or #FFFF00 or RGB(255,255,0)
Aqua or #00FFFF or RGB(0,255,255)
Fushsia or #FF00FF or RGB(255,0,255)
Black or #000000 or RGB(0,0,0)
White or #FFFFFF or RGB(255,255,255)
Gray or #808080 or RGB(128,128,128) or #333333 or #666666 or #999999 or #CCCCCC
Also Maroon (128,0,0), Navy (0,0,128), Purple(128,0,128), Olive (128,128,0), Teal (0,128,128), Silver (192,192,192)

Know: <span, <div, style,   font-family, font-size, font-weight, color
Inline style (attributes are defined within p, div, span, td tag)
Internal style (defined in style tag in the <head> of the same page)
External style (defined in a separate page with the extension .css)
Class (user defined style, begins with .), defined in css as text/css
# (user defined ID, such as #wrapper)

proportional font: each character takes up only as much room as needed - the lower case letters i and l use less horizontal space than the letters M or W.
Ex: font-family:verdana or Times New Roman
displays ABCDEFGHIJKLM (the letters i and l in will take up less room than w)
monospaced or fixed-width: each letter takes up as much space as every other letter - the letter I use as much horizontal space as the letter M or W.
Ex: font-family:courier
displays ABCDEFGHIJKLM (the i and l in will take up as much room as w)

Serif (extra details on the ends of some font strokes and/or feet on the bottom of the letter; ex: Times Roman),
Sans-serif (without a serif; ex: Arial ABCDEFGHIJKLMN),
<pre>Text in a pre (as in previously formatted) element is displayed in a fixed-width font, and it preserves both spaces and line breaks</pre>,
deprecated (being phased out: ex: <~~font~~> tag which is replaced by <style="font-family...>, <~~center~~> tag is replaced by <style="text-align:center...> )

<style type="text/css">
  h1 {font-family: Courier; color: #0000FF}
  a:hover {color: #0000CC; background-color: #FFFF00}
   .importantTopic {      /* This is a Class. It starts with a . */
color: #FF0000;  /* Each attribute line ends with a ; */
font-weight: bold; font-size: 18px
font-family: Arial, Helvetica, sans-serif;
} /* Close each style with a closing brace } */
   #wrapper {border: 2px solid #009} /* This is a ID. It starts with a # */
</style>
</head>

<body style="color:#FF00FF; background-image:url(Images/BackgroundWater.jpg)">

Components of a style are separated by semicolons (;)
Style values are assigned by colons (:)
Programmer defined new styles or Classes begin with a period (.)
Programmer defined IDs begin with a pound sign or hash tag or number sign (#)
Modified existing tag styles (like body h1 and p) do not begin with a period

<span style="font-size:18px; font-family:Arial; color:#0000FF">Style demo</span>

The following is the basic setup for a page linked to a .CSS file named siteLayout.css:
<link href="siteLayout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper"> 
<header></header>
<!— The .CSS file may define the header’s image so no other code is needed -->
<nav>
       <a href="index.htm">Home</a> |
       <a href="about.htm">About Us</a> |
       <a href="contact.htm">Contact Us</a>
</nav>
<main>...
</main>
</div> <!-- / wrapper>
</body>

The .CSS file (such as siteLayout.css) to go along with the above file might have the following statements:

#masthead {background-image: images/myHeader.jpg}
nav {background-color:#99CCFF; border-bottom-style:solid; border-bottom-color:blue}

Know: Ordered list <ol> (uses numbers - the default, letters, roman numerals), list-style type: decimal, decimal-leading zero, upper-roman, lower-roman, upper-alpha, lower-alpha; Unordered list <ul> (uses bullets - the default, circles, squares, or images), list-style type: disc, circle, square, url image; List item <li> (lists each item for both ordered and unordered lists), nesting lists (such as adding an <ul> inside an <li> within an <ol>), what happens if there is no type or list-style attribute - that is - what will be the list-style? (test and find out)

<ul style="list-style-image: url(images/point.gif)">
<li>Item One</li>
<li>Item Two</li>
</ul>

Know: <table>, width, background-color, background-image, <tr> (table row), <td> (table data: cells or columns), colspan (combine or span columns), rowspan, border, cellpadding (between data and cell borders: abc |), cellspacing (between cells - between cell borders: | |), rules="none" (no borders inside the table), nowrap (do not let text wrap in a cell), <td style="text-align:center">, <td valign="top"> (align contents vertically to the top of the cell), <td style="background-color:#CCCCCC">. (rules="none" was the older way to keep the inside table borders from displaying. It has been replaced by the styles="border attribute.)
Note: all empty table cells should have at least a   inside the <td> tag to prevent it from collapsing.

<table style="width:90%; background-color:#FFF; background-image:url(images/bg.jpg); border:2px solid blue; padding: 6px 12px; border-collapse:collapse>



<tr>                 
    <th colspan="3">Heading/Title Goes here</th>

</tr>
<tr>              
    <td>Column 1 data</td> 
    <td>Column 2 data</td> 
    <td>Column 3 data</td> 
</tr>
<tr>
    <td>Row 2 Column 1 data</td>
    <td> </td> 
    <td>Row 2 Column 3 data</td>
</tr>
<tr>
    <td style="text-align:center"> </td>
    <td> </td>
    <td> </td>
</tr>
</table>

Quiz 8 Review on Forms 20 questions, for 20 points will be selected from below

Know: Form action, method (post or get), fields (individual control elements on a form that allows the user to enter information for a person, place, date, or thing), type="text", type="radio" (option button), type="checkbox", type="password" (entered text is hidden or masked, with a * or bullet, from user), type="submit", type="reset", textarea, value (the data that is entered into the field, or the default value that may be set), hidden (the user does not see the value or execution of the statement. Another reason for a hidden type might be to hide the recipients email address), select, option, client-side, server side,

Server Side processing: The processing of the form data is done on the Web Server. This is the way professional forms are done. Sample Languages: PHP, ASP, SHTML, Cold Fusion

Client Side processing: The processing of the form data is done on the Client's computer using the user's email client program, such as Outlook. This is seldom done for two reasons: 1. Windows will often display a warning message indicating that a process is trying to access their email client. 2. If a form is filled out in the library or in a computer lab, typically an email client has not been configured so the from data will not be submitted, so in those circumstance, a client side submission will not even work. Sample Languge: JavaScript

Form Action: What happens after submit is clicked. Usually a server-side file called to handle the submitted data. This is the preferred method.

~~<form action="mailto:name@domain.com?Subject=Inquiry" method="post" enctype="text/plain">~~

Form Method: Post the data to the Server or Get or download data from a database. Post is most common

The Text Fields, TextAreas, CheckBoxes, and Radio button elements on your form are Fields.

If you do not include the type attribute in an <input> tag, it becomes a text field by default. But for clarity, you should enter each form element type.

[Tab] allows the user to move from field to field to enter values (or use mouse).
[Shift] + [Tab] moves to the previous field.
[Enter] will "Submit" the form.
[Ctrl] can be used to select two or more noncontiguous items in a option dropdown list.
[Shift] can be to select a contiguous series of items in a option dropdown list.

You can enter default values for fields by using the value=" " attribute (see below).
The default size for text boxes is 20 characters wide.
You could change this default by using the pattern below:
<input name="areaCode" type="text" size="3" />

If you do not include the type attribute in an <input> tag, the Web browser assumes that you want to create a(n) ____.

To move to the previous text box, press the Tab key while holding down the ____ key.

In the general syntax for the <select> and <option> tags, each ____ tag represents an individual item in the selection list.

By default, the ____ tag displays one option from the selection list, along with a list arrow to view additional selection options.

For noncontiguous selections from a selection list, press and hold the ____ key while you make your selections.

For a contiguous selection in a selection list, press and hold the ____ key, and then select the last item in the range.

To create an action for a(n) ____ button, a server side script is referenced in the <form> tag to run automatically when the button is clicked.

The ____ method of the <form> tag sends form data in a separate data stream, allowing the Web server to receive the data through what is called “standard input.”

Know: Sever-side, Client Side, JavaScript features, JavaScript extensions (.js), JavaScript comments (/* abc */ for multiple and // abc for one line), Case sensitive, how to include HTML tags in JavaScript statements, how to link and load External JavaScript files, how to code and access Internal JavaScript files, <script> tag, how to end a JavaScript statement

JavaScript is a client-side scripting language and has a similar look to Java programming and CSS.

External scripts are often loaded in the <head> tags.
Below is an example of a statement to call and External JavaScript file:
<script src="scriptName.js" type="text/javascript"></script>

Comments or remarks are ignored by the browser interpreter
Below is an example of a Single line Comment in JavaScript:
// This line calculates tax
Below is an example of a Single or Multiline Comment or remark:
/* Created by John Smith, email, web site, give me credit */

{ Begin a JavaScript block of code.
Ex: if (firstName == "") {alert("First Name required");}

Know:
.WAV (Microsoft Wave sound file, good quality, but too-large-for the Web)
.AVI (Microsoft Audio Video file, good quality, but too-large-for the Web)
.MIDI (digitized audio, small in size, synthesizes sound by recording each note’s pitch, length, and volume - but it cannot be used for speech)
.MP3 (most common audio file format)
.MP4 or . MPEG (common video format, Moving Picture Experts Group)
.MOV (Apple movie video) format used by my iPhone 12
.WMV (Windows Media Video)
.GIF (used for drawings AND animated images),

Plug-in: A piece of software that adds new features or extends functionality to an existing application; ex: You can add a Plug-in to WordPress to build a contact form, add a slideshow or add an e-commerce capibility. Or you may add a plug-in to enable Adobe Flash Player or QuickTime to run on your browser. If you do not add the appropriate plug-in to your browser, some online media content will not work on your computer
Streaming: Delivering an audio file to your computer over the Web, so that as the data arrives it is buffered for a few seconds and then playback begins before it is completely downloaded. As the audio plays, more data constantly arrives or streams. As opposed to downloading an entire "batch" first.

RSS (Really Simple Syndication for a Web feed, such as a news feed or sports feed),
Iframe: Know how to embed a YouTube video into your webpage: Share > Embed > copy iframe code.
Know Slideshow, Carousel and Transition (when on image disolves or changes into another, such as a rotating banner or slide show),
Hotspot: An area on an image that a user can click to launch a hyperlink. Hotspots work with Image Maps to map the x y coordinates.

The mechanical vibrations of sound move using a wave motion.
A wavelength is the distance between any two repeating points on a wave.
The default extension of a Windows sound file is .wav. These are high quality, but very large files. You should convert them to .mp3 files instead if you are going to put them on the Web.
Each measurement of a sound wave is called a sample.
Frequency is the number of cycles of vibration per second - measured in kilohertz (KHz).

You can link a sound file to a Web page by simply using the code shown below:
<a href="mySong.mp3">My Favorite Song</a>

But embedding audio and video file controls are better:
<audio controls src="media/NewAge.mp3" type="audio/mpeg">
</audio>

A ____ sound format must be completely downloaded by the user before it can be played.

Which format is limited to music and cannot be used for general sounds, such as speech?

Which is a video format developed by Apple Computer for Windows and Apple computers?

Which is a small program written in the Java programming language that can be included in an HTML page?

Quiz 11 Review for PHP, ASP, SHTML Cold Fusion and Include files
Know: Client Side vs Server Side scripts:

Description: JavaScript and Behaviors (such as Pop-up messages and Swap images) use Client Side scripts to allow dynamic interaction or DHTML on the local client computer.

Know the extensions: PHP (.php), CGI, ASP (.asp or .aspx, resembles Visal Basic), and Cold Fusion (.cfm) are Server-Side scripting languages for Dynamically created Web pages.

You can view .htm files locally. However, you cannot view .php, .cfm, or .aspx files locally without special software installed on your computer. You can only view these files on the "Server."

Include file: A server-side file that can be "included" in multiple Web pages, so that if the include file is modified, all of the Web pages that contain the include link are also immediately modified.

An example might be an include Footer with your contact email and a Last Modified Date script. Another example may be an include NavBar so that if you add a Web page, all the other pages will immediately have access to it through their menu navigation.

Sample code added to the <body> tab for the Include NavBar: <?php include ("navBar.htm"); ?>

If you open a Web page with Include files in your browser and click View Source, the Web Server will convert all the include lines into pure HTML, so you will not see the true local source code.

To use files with PHP, SHTML, ASP and Cold Fusion they need appropriately named extensions:

The language directive line is placed immediately above the <html> tag. By default it is C# but can easily be changed to VB: <%@ Page Language="C#" %>

ASP code includes similar commands to Visual Basic, such as DIM which is used to define a variable, Functions and Subroutines are used for blocks of code or modules, and IF statements are used for decisions. For instance see the snippets of a gdform.asp script below:

Web Development Quiz Review Terms and Tags from lectures and online samples.

Web Development Quiz Review Terms and Tags
from lectures and online samples.