|
Web Development Quiz Review Terms and Tags from lectures and online samples. These terms will be the basis of the 10 to 20 question quizzes that will
be given in class via Angel
once a week. All questions are very short multiple choice questions with very
short answers. Quiz 1: Intro | Quiz 2: Links | Quiz 3: Styles | Quiz 4: Lists
| Quiz 5: Tables Know: .htm, .html, www, tag, html, head, title, body, br, p, strong, em, h1, comments: <!-- --> You can copy the code below and paste it in to Notepad (Start > Programs > Accessories) then edit it for your first Web page. Know all the tags for the following: Know: id, a, href, # - place in front of an ID for an Internal link on the
same page, Relative path -
to a file on the same site, Absolute
path - full address starting with http:// for an External link,
target="_blank", mailto:, ?Subject= 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 <a
href="http://msn.com" target="_blank">MSN</a>
<a
href="mailto:myName@abc.com?Subject=Request Quote">myName@abc.com</a> <h2
id="OurPledge">Our Pledge </h21> 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), External style (.css), class, css, text/css, Arial &Times Roman (proportional), Courier (fixed-width or monospaced), Sans-serif, Serif, em, pre tag, deprecated (being phased out: ex: font tag) <head> a:hover {color: #0000CC;
background-color: #FFFF00} <body style="color:#FF00FF; background-image:url(Images/BackgroundWater.jpg)"> The above custom .ImportantTopic class could also be written on one line
as shown below: <span
style="font-size:18px; font-family:Arial; color:#0000FF">Style
demo</span>
<p class="ImportantTopic">Caution</p> The following is the basic setup for an index.htm linked
to a .CSS file named siteLayout.css: <!— The .CSS file may define the masthead’s banner image so no other code is needed --> </div> <div id="top_nav"> <a href="index.htm">Home</a> | <a href="about.htm">About Us</a> | <a href="contact.htm">Contact Us</a> </div> <div id="page_content"> = = = The .CSS file (siteLayout.css) to go along with the above file might have the following statements: #masthead {background-image: images/myHeader.jpg}
#top_nav {background-color:#99CCFF; border-bottom-style:solid; border-bottom-color:blue} Also see: WinWebTutor > CSS Know: Unordered list (ul), list-style type: disc, circle, square; Ordered list (ol), list-style type: decimal, decimal-leading zero, upper-roman, lower-roman, upper-alpha, lower-alpha; List item (li), nesting lists (such as adding an ul inside an li in an ol), what happens is there is no type or list-style attribute? <!-- image: point.gif referenced below
will appear before each item --> <ol style="list-style-type:lower-roman"> Know: Table, width, background-color, background-image, tr, td, colspan, rowspan, border, cellpadding (between data and cell borders: abc |), cellspacing (between cells - between cell borders: | |), rules="none", nowrap, td align="center", td valign="top", td style="background-color:#CCCCCC" <table style="background-color:#FFFFFF;
background-image:url(images/imageName.gif)" width="760px" border="2"
bordercolor="#0000FF" cellpadding="0"
cellspacing="2" rules="none"> 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…
RGB triplets or Hex triplet values can be used to represent literally thousands of other colors: Hex: base 16: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11... Dec: base 10: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17... Hex and RGB can represent FF*FF*FF colors or 255*255*255 colors or over 16 million colors.
The following three in-line style statements all display the text “abc” in blue: <p style="color:RGB(0, 0, 255)">abc</p> <!-- the above code uses an RGB triplet to represent the color blue --> Or <h2 style="color:#0000FF">abc</h2> <!-- the above code uses an a Hex value to represent the color blue --> Or <div style="color:blue">abc</div>
All <H1> tags for the entire Website can be set to purple with the following CSS statement: h1 {color: :#0000FF;} /* blue */ (The /* … */ is used to add comments or remarks to style sheets which are ignored by the browser)
<body style="background-color:yellow; font-weight:bold; color:#3300FF"> <body bgcolor=”yellow”> still works on
many browsers, but it has been deprecated Also see: http://en.wikipedia.org/wiki/Web_colors For color code chart see: http://faculty.mccfl.edu/WinterF/0ClassFolders/2820Web/SamplesHTMLcode/HTMLcolors.htm For color code chart see: http://faculty.mccfl.edu/WinterF/0ClassFolders/2820Web/SamplesHTMLcode/HTMLcolors.htm 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 displays 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 (Graphics Interchange Format) 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.
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.”
The following three in-line style statements all display the text “abc” in blue: <p style="color:RGB(0, 0, 255)">abc</p> <!-- the above code uses an RGB triplet to represent the color blue --> Or <h2 style="color:#0000FF">abc</h2> <!-- the above code uses an a Hex value to represent the color blue --> Or <div style="color:blue">abc</div>
All <H1> tags for the entire Website can be set to purple with the following CSS statement: h1 {color: :#0000FF;} /* blue */ (The /* … */ is used to add comments or remarks to style sheets which are ignored by the browser)
<body style="background-color:yellow; font-weight:bold; color:#3300FF">
Quiz 8 JavaScript Quiz Review 10 Questions. See: http://faculty.mccfl.edu/WinterF/0ClassFolders/2820Web/WinWebTutor/6JavaScriptOverView.shtm Know: Sever-side, Client Side, JavaScript features, JavaScript extensions, JavaScript comments, 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.
JavaScript can: 1. Allow Interactivity 2. Display Pop-up messages to users 3. Perform Calculations 4. Perform Validation 5. Work with Event Handlers such as onload or onclick 6. Produce and preload Roll-over images 7. Work with Cookies
JavaScript is Case sensitive. Almost all commands are in lower case. Internal JavaScript commands are placed inside <script> tags. External JavaScript files have a .js extension. External scripts are often loaded in the <head> tags. For example: <script src="scriptName.js" type="text/javascript"></script>
// Single line comment (ignored by the interpreter: not executed). Ex: // This line calculates tax /* */ /* Single or Multiline comments */ ; Used to end each JavaScript statement (also end CSS statements). { Begin a JavaScript block of code. Ex: if (firstName == "") {alert("First Name required");} } End a JavaScript block of code.
Quiz 9 Review on Multimedia 10 questions will be selected from below Know: MP3, MIDI, MOV, WMV, .SWF, sampling, plug-in, streaming, applet, .class Each measurement of a sound wave is called a(n) ____. The sampling rate of a sound wave is measured in ____. For most applications, saving sound files at the ____ bit resolution provides a good balance of sound quality and file size. Which very efficient format digitally synthesizes sound by recording each note’s pitch, length, and volume? The most recent ____ standard is MP3. The most common sound file format on the Web today is ____. Since its introduction, ____ has expanded past the confines of the Web and is readily available in portable music players and car stereos. A ____ sound format must be completely downloaded by the user before it can be played. RealAudio introduced ____ media in which media clips, including both sound and video, are processed in a steady and continuous stream as they are downloaded by the browser. Which format is limited to music and cannot be used for general sounds, such as speech. Which programs enable a browser to work with an embedded object? With the embed element, the width and height of the object are measured in ____ With the <embed> tag, enter a value of ____ = “true” for the clip to begin automatically. A common video file format developed by Microsoft, ____ video quality can be very good at smaller resolutions, but files tend to be rather large and consequently are seldom on the Web. Developed by Microsoft, ____ is a popular streaming video format, in which files are often smaller than other streaming video formats. Which is a video format developed by Apple Computer for Windows and Apple computers. To embed a video file, you can use the ____ tag. The executable filename for a Java program is called a(n) ____ file. Which is a small program written in the Java programming language that can be included in an HTML page? To write your own Java applet, you need a(n) ____. The object element replaces which of the following elements? Which has become a very popular Windows video file format for the Web? Windows Media Video (.wmv) is a compressed video file format Flash files have an extension of SWF (Shock Wave Files)
Quiz 10 Review on Forms 20 questions, for 20 points will be selected from below Know: Form action, method, type=”text”, type=”radio”, type=”checkbox”, type=”submit”, type=”reset”, textarea, select Understand and recognize the following samples: <form name="contactMe" id="contactMe" action="ScriptName" method="post" /> <input type="text" name="LastName" size="25" /> <textarea name="Comments" rows="4" cols="40" id="Comments"></textarea> <select name="State" id="selectstate"><option value="AL">AL</optio n> <input name="Female" type="radio"> <input name="CollegeGraduate" type="checkbox"> <input name="Submit1" type="submit" value="submit"> (I use name="" type="submit" so email does not say Submit=Submit) <input name="Reset1" type="reset" value="reset"> Option buttons are sometimes called ____ buttons. ____ boxes are used to organize form elements. Text ____ are used for extended entries that can include several lines of text. Information entered into a field is called the field ____. Each control element in which the user can enter information is called a(n) ____. Forms are created using the ____ element. The ____ attribute of the <form> tag represents the older standard for identifying each form on the page. The ____ attribute of the <form> tag is often required for older server programs. If you do not include the type attribute in an <input> tag, the Web browser assumes that you want to create a(n) ____. Which input type displays an input box that hides text entered by the user? By default, all input boxes are ____ characters wide. To define a default value for a field, use the following syntax: ____. When you link a label with an associated text element for scripting purposes, you must bind the label to the ____ attribute of the field. To move to the previous text box, press the Tab key while holding down the ____ key. Typically, pressing the ____ key submits the form. 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, you have to write a script or program that runs automatically when the button is clicked. Which of the following is a possible value for the method attribute of the <form> tag? 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.” ____ buttons are used to select a single option. To move to the previous text box, press _____. Typically, pressing the _____ key submits the form. Case (capitalization) is important in form ____. Using a password field _______ Check boxes are ____ You can specify default text that will appear in _____ Command buttons _____ Fields with negative tab indexes are omitted _____ One reason for a hidden type might be to hide the recipients email address. Which form attribute will set the server-side script file name? Which would allow you to create an input box for Address1? Which would allow you to create an input area for a Memo field? Which would allow you to create a drop down list for Cities? Which would allow you to store values in drop down list for States? Which would allow you to send the data to the server?
Quiz 11 Review for PHP, ASP, SHTML Cold Fusion and Include files 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. PHP (.php), CGI, ASP (.asp or .aspx), 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.
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.
Sample Include lines <?php include ("navBar.htm"); ?> : PHP <!--#include file="navNar.htm"--> : SHTML <!--#include file ="navBar.aspx"--> : ASP <cfinclude template = "navBar.htm"> : Cold Fusion
To use files with PHP, SHTML, ASP and Cold Fusion they need appropriately namee extensions: Such index.php or index.shtml or index.asp or index.cfm
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 begins with <% and end with %> 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: <% Dim landing_page, host_url Function FormatVariableLine(byval var_name...) … end function
Sub OutputLine(byVal line) … end sub
if err.number = 0 then...
= = = = = = Note in the PHP code below: PHP code starts with <?php PHP Variables begin with a $ echo is used to print out data. HTML Tags like <br /> and literal strings of text are enclosed in apostrophes (') Typically, each line must end with a semicolon (;) = = = = = =
<?php echo 'PHP Date Demo<br />'; echo date("m-d-y"); ?>
<?php $width = "60"; $height = "20"; echo "If Height=60px and Width=20px, then area is "; echo "$width * $height px"; ?>
|