In this lab, you will create a simple HTML5-based Web page.
Use File - Close All to close all open editing windows.
Next, create a Dynamic Web project for your lab. RAD uses Dynamic Web Projects for applications that display Web pages.
Choose File - New - Dynamic Web Project. On the first page of the wizard, enter:
Project name: Lab03Web
At the bottom, put a checkmark in the box Add project to an EAR, then set the EAR project name to Lab03EAR.
Then press Next.
On the Web Module page, note that the Context root is Lab03Web -- this will act as a prefix on the URLs for your Web pages.
Press Finish.
Ignore any request to switch to the Web perspective. You can also close any Quickstart window.
Right-click on the new project's WebContent folder and create a Web page named blog-5-2014.html. You can delete any content that RAD generated; you will create your HTML5 page from scratch.
Complete the boilerplate for the page as described below:
Write the HTML5 DOCTYPE.
Write an HTML5 html element. Be sure to specify the language.
Within the html element, write an HTML5 head element that:
Within the html element, after the head, write an empty body element.
Within the body, write empty HTML5 semantic elements for header, nav, article and footer.
Complete the header element:
Display the Penelope's Pizza Parlor logo (you can copy this from the last lab).
Write a level-one heading with the same text as the page title.
Complete the nav element so it hyperlinks back to the index.html in Lab02Web.
Complete the article element:
Nest a header element within the article.
Within the nested header element, write a level-one heading with the text Detroit Style!.
Still within the nested header element, write a time element for the publication date of the article:
<time datetime="2014-5-4" pubdate>May 4, 2014</time>
After the close-tag for the nested header element, write p elements with the following text:
<p>
It's an exciting time here at the pizza parlor!
We are introducing <b>Detroit-style</b> pizza to
the area! This style uses a carmelized crust and
is between New-York-style and Chicago-style in
thickness.
</p>
<p>
Stop by at any of our locations to sample the
delicious Detroit-style pizza!
</p>
Complete the footer element so it displays a copyright notice. You can copy this from the last lab, but note that you don't need to define a paragraph.
Before you test your work so far, configure RAD to use Chrome as its default browser (you should have an up-to-date version of Chrome installed):
Start Chrome and set it as the default browser on your computer.
In RAD, choose Window - Web Browser - Default system Web browser.
Run blog-5-2014.html on the server - RAD will display your page in Chrome. Don't worry too much about styling, but your page should display all of the elements.
In this part, you will add a "customer comment" form to the pizza Web site. You will use some of the new HTML5 input widgets.
Create a new Web page named customercomment.html.
Complete the page's boilerplate:
Complete the section element:
Write an empty form element with action of ProcessComment, method set to post and an id of commentForm.
Complete the form so it has a required input widget for the commenter's name, an email input widget (also required and with a placeholder), a date input widget for the comment date and a textarea for the customer's comment itself.
The form should also have a submit button.
Test your page on Chrome by running it on the server. What happens if you try to submit the form without entering a name or email? Do you see your email widget's placeholder? What happens if you try entering in an email address that doesn't contain a @ character?
In this part, you will add some simple CSS styling to your pages.
Right-click on the WebContent folder and create a CSS file named main.css.
Using the Sample Page CSS in the course notes as a guide, create styles with values of your choice for the body, header h1, article and article h1 CSS selectors.
Test both of your pages and adjust styles until you get something you like.
If you have access to an older browser, e.g. IE9 or below, in this part, you can use Modernizr to add support for some the HTML5 features.
Note: If you don't have access to an older browser, you can still do this part - you just won't be able to test.
If you have access to an older browser, try testing your pages. You will note that the CSS styles might not work correctly and the HTML5 form elements might not work. We can address some of those issues using Modernizr.
Your first step is to import the Modernizr script into your workspace. We will provide you with a version of Modernizr that provides feature-detection and includes the HTML5 Shiv. Follow this procedure to import it:
Use Windows Explorer or My Computer to navigate to {Lab Installation Directory}/lib. If your computer has the standard lab setup on Windows 7 or later, this directory is:
c:\Users\username\webclass\lib
You should see the modernizr.js file in that folder.
Size and position Windows Explorer and RAD so you can see both of them at the same time.
In Windows Explorer, right-click on modernizr.js and choose Copy.
In RAD, right-click on your project's WebContent folder and choose Paste to import the file.
Add Modernizr to each of the pages by referencing it in a script element and adding a class attribute to the html element. The attribute's value should be no-js.
Test both of your pages in Chrome - there should be no change from before.
Test both of your pages in the older browser (if available) - the styles should be better, though perhaps not perfect. That's because the HTML5 Shiv included with Modernizr added the HTML5 semantic elements programmatically to the DOM so that the style selectors worked.
Try submitting the form while it's empty in Chrome - the HTML5 validation should kick in. But what happens if you try it on the older browser?
You can use Modernizr to help add simple validation for older browsers, but you have to write the validation JavaScript manually. Follow this procedure:
As you did in an earlier lab, attach an onsubmit handler to the form that invokes a JavaScript function named validateForm (you will write the function in a moment).
Within the document's head, start a new script element, then complete it:
<script>
function validateForm()
{
if (!Modernizr.input.required)
{
var inputElements =
document.getElementById("commentForm").elements;
for(var i = 0; i < inputElements.length; i++)
{
if(inputElements[i].hasAttribute("required"))
{
if(inputElements[i].value == "")
{
alert(inputElements[i].name + " must not be empty");
return false;
}
}
}
}
return true;
}
</script>
This script uses Modernizr to detect if the browser supports the required attribute. If not, it loops through all of the input elements, and checks for the required attribute. If found, it checks that widget's value - if it's empty, it displays a JavaScript alert and aborts.
Note: This script will NOT work on versions of IE before 8 - they do not support the hasAttribute DOM method.
Check your form on the older browser - if it doesn't support the required attribute natively, your little script should kick in.