HTML
Section 2 Assessments
For each of these assignment, complete each bulleted step and submit all files (HTML, CSS, scripts, images, etc.) necessary by zipping and submitting your assignment folder.
Your First Page:
• Your name, the course, and semester commented at the top of the file
• Create body, header, and footer sections
• Create a div named content between your header and footer
• Set a page title that displays in the browser tab
• Place an address in an address tag in your footer
• Your name at the top of the page as an <h1> heading in your header
• Add a few paragraphs about yourself to your content div
• Add a list of hobbies or interest displayed as an HTML unordered list to content
• Link at least two of your hobbies or interests to websites related to those interests
Fun with Media
• Your name, the course, and semester commented at the top of the file
• One image as part of your page
• A short audio clip (or link to available audio filand player
• A short video clip (or link to available videand player
• Set both audio and video clips to have controls and not play automatically
• Give your video clip a placeholder image
Tables on Chairs
• Recreate the following table in HTML
• Use style attributes to set cell colors as needed
• Use the caption tag to label your table
Production Levels for Chairs This Week:
Monday Tuesday Wednesday Thursday Friday Total
Stools 5 5 5 (quota met) 15
Rolling (out of materials) 10 15 25
Standard Leg 4 8 12 4 28
Registration Form
• Create a form with an action attribute of post
• Give it the following fields, and a submit button:
• First Name, Last Name
• Email Address, Email Address Again
• Age
• A “Plan” select box that contains Basic, Premium, Titanium options
• A checkbox asking if the user wishes to be added to a mailing list
• A shirt size radio set that has values of Small, Medium, Large
Adding Some Style
• Using CSS rules, modify your “Your First Page” submission to include:
• A background image that repeats to fill the screen
• A background color on your content div
• Modifying H1 to be 32 point and a different color from default
• Split your About Me and Hobbies sections into separate divs within Content
• Give your new divs a fixed width of 400 each and set them to sit side by side
Responsive Styling
• Add rules to your CSS to achieve the following:
• Allow divs in your content section to shrink to 200px
• Vertically align your content divs for screens smaller than the typical tablet
• Shrink your h1 to fit on one line when on tablets and phones if needed
• Only show the first paragraph of your About Me section on phones
Discussion / Written Response
1. Explain the W3C’s stated reasoning as to why it was decided to stop moving all of CSS through version numbers as one cohesive unit. Do you agree or disagree
The Missing Link: An Introduction to Web Development and Programming Assessments
with this position, and why?
2. Discuss pros and cons of creating web applications using HTML5, CSS3, and other languages against creating the same application for each device’s platform (i.e. Apple’ iTunes, Google Play, Windows Store).
3. Discuss how XML differs from HTML, and where it is commonly used today.
4. Why is HTML considered a document markup languages as opposed to a programming language?
Questions
TAKE THIS QUIZ ONLINE!
1. What does HTML stand for?
a. Hyperlinks and Text Markup Language b. Hyper Text Markup Language
c. Home Tool Markup Language d. Hyper Text Manipulation Language
2. Choose the correct HTML tag for the largest heading.
a. <heading>
b. <h1>
c. <header>
d. <h6>
3. Which of these is a properly formatted link?
a. <a link="www.google.com">Link</a>
b. <a href="www.google.com"/>
c. <link location="www.google.com">Link</a>
d. <a href="www.google.com">Link</a>
4. How can you open a link in a new tab/browser window?
a. <a href="url" target="_blank">
b. <a href="url" target="new">
c. <a href="url" new>
5. Which doctype is correct for HTML5?
a. <!DOCTYPE HTML5>
b. <!DOCTYPE html>
c. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"
"http://www.w3.org/TR/html5/strict.dtd">
6. What is the correct HTML for making a drop-down list?
a. <select>
b. <input type="dropdown">
c. <input type="list">
d. <list>
7. Which of the following is correct?
a. HTML is used for exchanging data, XML is not.
b. XML is used for exchanging data, HTML is not.
c. HTML can have user defined tags, XML cannot.
d. Both b and c above.
8. What is the correct HTML5 element for playing video files?
a. <movie>
b. <video>
c. <source>
d. None of the above
9. What is the correct HTML for inserting an image?
a. <img src="image.gif" alt="MyImage">
b. <image src="image.gif" alt="MyImage">
c. <img href="image.gif" alt="MyImage">
d. <img alt="MyImage">image.gif</img>
10. The <canvas> element in HTML5 is used to:
a. Display database records b. Manipulate data in MySQL c. Create draggable elements d. Draw graphics
11. In HTML5, which attribute is used to specify that an input field must be filled out?
a. Formvalidate b. Validate c. placeholder d. required
12. Which HTML5 element is used to display a measurement within a fixed range?
a. <gauge>
b. <range>
c. <measure>
The Missing Link: An Introduction to Web Development and Programming Assessments
d. <meter>
13. What does CSS stand for?
a. Cross-site scripting b. Cascading Style Sheets c. Creative style sheets d. Compiled site styles
14. Given the following, what value does the left margin have?: margin: 10px 5px 20px 15px;
a. 10px b. 5px c. 20px d. 15px
15. Which style rule overrides the other?
a. Class b. Id
16. What property creates space between HTML elements?
a. Margin b. Padding c. Spacing d. Float
17. What property creates space within an element?
a. Margin b. Padding c. Spacing d. Float
18. Which set of tags are used to define CSS within the page?
a. <style type="css"></style>
b. <class type="text/css"></class>
c. <inline css></inline>
d. None of the above
19. Which of these is the correct way to define a hover state for an anchor tag?
a. :onHover b. :mouseOver c. :hover
d. None of These
20. Which property of a position rule will force content to a position regardless of other elements?
a. Fixed b. Absolute c. Relative d. Strict
21. Responsive styling allows us to support many devices with one style sheet.
a. True b. False
22. Which of the following is the best fit for defining styles on small mobile devices?
a. @media only screen and (max-width: 479p) b. @media only screen and (max-width: 769p) c. @media only screen and (max-width: 120p) CHECK YOUR ANSWERS
Section 3:
Scripting Languages
Section Contents:
Server-Side and Client-Side Scripting Creating PHP Files
PHP Errors PHP Output Data Storage Data Manipulation Email
File Interaction Structures Functions
Objects and Classes JavaScript Syntax JavaScript Examples jQuery
Learning Objectives:
By the end of this section, you should be able to demonstrate:
1. An ability to create PHP scripts
2. An ability to receive, store, and manipulate user data 3. An ability to interact with files
4. The ability to create and send basic email
5. The ability to use logic and control structures in scripts 6. The ability to create functions and simple classes 7. Altering a page using JavaScript and jQuery
Server-Side and Client-Side Scripting
Hardware
Operating System (Linux, Windows, Mac)
HTTP
Server Database Scripting Language
PHP
Created in 1994 at the hands of Rasmus Lerdorf, PHP began as a set of CGI scripts developed to track views of his resume online. Rasmus continued adding scripts to his collection so he could do more with his websites. Over time, some friends began to use it as well. By June of 1995, enough of a framework was in place that Rasmus decided to make PHP public. As others embraced it, and began to submit their own work, PHP grew. By version 3 it was decided that the time had come for a more professional name. In homage to its original name of Personal Home Page, the PHP acronym was kept, but was changed to a recursive representation of “hypertext preprocessor.” PHP was now an independent language, with object-oriented capabilities, high extensibility, and had a growing following.
As the community grew, the core team of Rasmus, Andi Gutmans and Zeev Suraski continued their work. Gutmans and Suraski rewrote the core of the engine, and dubbed version 4 Zend, a blend of Gutmans and Suraski’s first names. Now with dozens of devel-opers and even more contributors, PHP has grown to version 5, and is installed on tens of millions of servers around the world. It continues to rank as one of the top ten web development languages.
With strong semblance to languages like C++ and Perl, the goal was to create a language that allowed fast development of dynamic pages. It is a server-side language, which means
The Missing Link: An Introduction to Web Development and Programming Chapter 23 it runs on the server before anything is sent to the user’s computer. This is in contrast to client-side languages, where the code is sent to the user’s computer to be processed locally with languages like JavaScript.
Some advantages to server-side languages are that the code is hidden from the user, and secures what is taking place in the background. It also reduces the work load that the user’s computer is burdened with. This, however, also means the server must be powerful enough to support the number of users requesting pages, as it must bear the brunt of the computation.
PHP is a parsing engine, which means it examines the php file, performs any php related tasks it finds, and passes the result to the web server. This makes it an interpreted language, as the output and script are run on demand, as opposed to a compiled language where the code is transformed and saved into a runnable form.
JavaScript
JavaScript is a client-side script, meaning the browser processes the code instead of the web server. Client-side scripts are commonly used when we want to validate data before sending it to the web server, adjusting the interface in response to user feedback, and for implementing other advanced features. Since JavaScript is part of the browser, it can be run without a web server present. If the computer is slow or busy, the performance of our code may be reduced. If JavaScript is disabled (less of a concern today than just a few years ago) then our script will not run. This being said, this is less of an issue now, and JavaScript can reduce the number of communications to a server, reducing transmission time and improving performance.
JavaScript will be our client-side scripting example. As JavaScript can be handled within the browser, we can capitalize on it to validate user data, react to user actions that affect ap-pearance, and interact with the user’s computer, without requiring the involvement of their internet connection or our server. Like CSS, JavaScript is not a fully formed language that can stand on its own. Like PHP and Java, JavaScript is an object-oriented language that is multi-platform. Unlike Java (but still like PHP) it is a loose, typed language.
There is a common misconception that Java and JavaScript are the same thing. Review some of the larger differences between them below if you are already familiar with Java.
Table 7 Java vs JavaScript
JavaScript Java
Object-oriented. No distinction between types of objects. Inheritance is through the prototype mechanism, and properties and methods can be added to any object dynamically.
Class-based. Objects are divided into classes and instances with all inheritance through the class hierarchy. Classes and instances cannot have properties or methods added dynamically.
Variable data types are not declared (dynamic
typing). Variable data types must be declared (static
typing).
Cannot automatically write to hard disk. Cannot automatically write to hard disk.
Writing JavaScript code is a lot like writing PHP. Both languages use many of the same concepts and can look very similar in terms of code. Since we will have covered many of the foundational concepts JavaScript uses in the PHP section, we will focus on differences between JavaScript and PHP. We will look at examples that highlight how JavaScript can be integrated with other languages, like responding to event driven actions to modify our pages in real time. Bear in mind that the power of the language can be used to perform many of the same tasks we have examined already in PHP.
A best practice for using JavaScript in your site is to create your entire site without it, and then add it where it can improve the user experience (a process called progressive enhancement). This will help ensure that your site will still operate (albeit maybe not as attractively) if JavaScript is not present.
Chapter 24
Creating PHP Files
Like the HTML and CSS files we have already created, PHP also uses a special file format to identify its contents. When you want to use PHP in a file, even if it was already .htm or .html, you will need to set (or create) the file format as .php.
If you do not have access to a server with PHP, you can follow along this section of the text by using http://writecodeonline.com/php/ to try the examples and write your own code.
ADDITIONAL NOTES
Technically, you could insert PHP code into HTML files (or other formats) and have it run, by changing settings on your server for how it serves and interacts with the file extension in question. You could also do the same with HTML in a text file, or other combinations. The drawback is this could also affect other files
on your server, and makes your site less portable to other servers.
Long, Short Tags
As you begin to work with PHP, you will undoubtedly see code examples that begin with
<?php or <?, while both will end with ?>. These are tags, just like in HTML, and are used to mark the start and end of a section of code that contains PHP (we could even use <script language=‘php’></script>). PHP can be interspersed, or cohabitate, in a web page among HTML and other languages like JavaScript. The difference between the two opening tags is that <?php is longhand writing, while <? Is considered shorthand. By default, all PHP capable servers will recognize longhand while shorthand is an option that must be enabled.
For best support of your code, and to better recognize what language is being used, always use longhand when writing your code.
PHP Errors
Before starting, an understanding of errors will help you quickly recognize where problems exist (and if they are truly problems) in your code, which will lend to faster debugging and understanding where to look for problems.
To start with, we can tell PHP what kind of errors we want to know about before we even run a script. While the full list of supported reporting levels (see Table 8 PHP Errors) covers a variety of concerns, there are a few (notices, errors, and warnings) that cover what we will run into most often.
Notices
Notice: Undefined index: message in /home/example.php on line 9 Notices, technically, are not errors. They will notify us of things that we may have in-tended or wanted, but that PHP can do without. For example, using a variable on a page without declaring it first will generate a notice. PHP will create the variable as soon as it is called, even if we did not declare it, without creating a formal error (other languages would consider this an error worthy of breaking execution). By notifying us but still continuing, if we had already declared or used the variable elsewhere, this notice would indicate a spelling error or mistyped variable name.
Warnings
Warning: main(): Failed opening 'noFileHere.php' for inclusion on line 2
Warnings still will not stop our script from running, but indicate that something has gone wrong during execution of a script. Attempting to use include() on a file that does not exist would create a warning.
Errors
PHP Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFF-ERED_QUERY' in database.inc on line 43
The Missing Link: An Introduction to Web Development and Programming Chapter 25 Finally, errors are unrecoverable (execution will stop). Typical causes of errors are parsing errors like missing semi-colons, function, or class definitions, or other problems the engine does not know how to resolve. If we used require() on a file instead of include, an error would be triggered instead.
Most errors that we will receive are parsing errors. They are typically problems caused by what we wrote in our code, like missing brackets, semi-colons, or typos. When we receive an error, the compiler will tell us what problem it discovered and where. Keep in mind that we are being told where an error was found not necessary where the source of the problem exists. For example, a missing semi colon or bracket may have occurred several lines before it created a problems for the compiler.
The other category of errors we will run into are logical. These are errors caused by how we wrote our code, and can be much more frustrating. Logical errors are usually discovered when the script does not behave as expected. The source can be mistakes in what code we run in different parts of an if/then statement or even an error in math used in a function that gives us the wrong solution.
Resolving errors can be something of an art form. With parse errors, the engine can guide you to the area to help you begin looking for the source of the error. Logical errors can usually be resolved by adding extra, temporary outputs to follow the value of a variable or trace execution of logic statements through a script. This technique can help you find where what happens differs from what you expect. Unit testing your functions will go a long way toward preventing many of these issues, as does iterative programming.
To dictate what errors we do and do not wish to see in our script output, we will use the error_reporting() function. By passing one or more of the constants below, we control what is reported. For example, maybe we want information on warnings and errors, but do not care about notices. To do this, we can call error_reporting(E_WARNING | E_ERROR).
The pipe symbol ( | )works as an or in this case. If we want to see everything except notices we can use E_ALL but leave out notices with the carrot ( ^ ) character to indicate an ex-ception with error_reporting(E_ALL ^ E_NOTICE). It is good practice to set your error reporting level close to the top of your script, so you can easily find it and change settings:
<?php
error_reporting(E_WARNING | E_ERROR);
//This next line will trigger a notice that the variable does not exist, but we will not see it
echo $test;
?>
<?php
error_reporting(E_ALL);
//This time we will see the notice echo $test;
?>
Notice: Undefined variable: test on line 3
You may be wondering why we would selectively show or hide errors; when we are developing our code, the system errors we will need to see in order to debug are different from what we would want end users to see for a system in production. Revealing, verbatim, the system generated error message is not only confusing to non-programmers but can
expose sensitive information to those with malicious intent. Instead, we would provide a message we chose in the error’s place. Take a look at the full list of error reporting levels:
Table 8 PHP Errors
Constant Description
E_ERROR Fatal run-time errors. These indicate errors that cannot be recovered from, such as a memory alloca-tion problem. Execualloca-tion of the script is halted.
E_WARNING Run-time warnings (non-fatal errors). Execution of the script is not halted.
E_PARSE Compile-time parse errors. Parse errors should only be generated by the parser.
E_NOTICE Run-time notices. Indicate that the script encountered something that could indicate an error, but could also happen in the normal course of running a script.
E_CORE_ERROR Fatal errors that occur during PHP’s initial startup. This is like an E_ERROR, except it is generated by the core of PHP.
E_CORE_WARNING Warnings (non-fatal errors) that occur during PHP’s initial startup. This is like an E_WARNING, except it is generated by the core of PHP.
E_COMPILE_ERROR Fatal compile-time errors. This is like an E_ERROR, except it is generated by the Zend Scripting Engine.
E_COMPILE_
WARNING Compile-time warnings (non-fatal errors). This is like an E_WARNING, except it is generated by the Zend Scripting Engine.
E_USER_ERROR User-generated error message. This is like an E_ERROR, except it is generated in PHP code by using the PHP function trigger_error().
E_USER_WARNING User-generated warning message. This is like an E_WARNING, except it is generated in PHP code by using the PHP function trigger_error().
E_USER_NOTICE User-generated notice message. This is like an E_NOTICE, except it is generated in PHP code by using the PHP function trigger_error().
E_STRICT Enable to have PHP suggest changes to your code which will ensure the best interoperability and forward compatibility of your code.
E_RECOVERABLE_
ERROR Catchable fatal error. It indicates that a probably dangerous error occurred, but did not leave the Engine in an unstable state. If the error is not caught by a user defined handle (see also set_error_
handler()), the application aborts as it was an E_ERROR.
E_DEPRECATED Run-time notices. Enable this to receive warnings about code that will not work in future versions.
E_USER_DEPRECATED User-generated warning message. This is like an E_DEPRECATED, except it is generated in PHP code by using the PHP function trigger_error().
E_ALL All errors and warnings, as supported, except of level E_STRICT prior to PHP 5.4.0.
Adapted from php.net, Creative Commons 3.0 Attribution Unported