Comment on the posts of at least two other learners. Offer insights, solutions, examples, or opinions that add depth and value to the conversation.
Examine examples of navigation and lists and their associated code.
Discussion Participation Scoring Guide.
A Web site’s navigation is one of the most important aspects of a Web page as users need to be able to use your site and find what they are looking for. Users need to be able to find the information they are looking for as quickly as possible.
Should a Web site deviate from the standard horizontal navigation across the top or vertical navigation down the left side?
tag differ from previous versions of HTML when creating navigation?
Response Guidelines
Comment on the posts of at least two other learners. Offer insights, solutions, examples, or opinions that add depth and value to the conversation.
Learning Components
This activity will help you achieve the following learning components:
Examine examples of navigation and lists and their associated code.
Resources
Discussion Participation Scoring Guide.
/institution/IT/IT3212/170700/Unit02/u02d1_learning_comps.html
Unit 3 discussion
DQ1 CSS and Web Layout Styles
Some Web sites use the same HTML code but different CSS layouts for each of the pages. You may view the CSS Zen Garden Web site to understand this.
Consider the following before you address this discussion:
Which design inspired you?
How would you apply some of those design elements to your own Web site?
What layout features could you apply to your own site?
Modern Web pages use a variety of layout styles such as:
Static.
Liquid.
Adaptive.
Responsive.
Choose a Web site that uses one of these layouts. In your post:
Evaluate if this layout style is the most effective and why. What considerations did you have in your evaluation?
Describe the CSS changes that would need to be made to alter the layout style of your chosen site to another of the above layouts. For example: A static layout being changed to a liquid layout would require all fixed widths to become dynamic widths using or % values.
Note: Make sure to share the URL of the chosen Web site, if you chose one other than the CSS Zen Garden.
Response Guidelines
Comment on the posts of at least two other learners. Do you agree with the evaluation of the learner? Why or why not? Are there other considerations that he or she missed?
Learning Components
This activity will help you achieve the following learning components:
Understand the box model, including margins, padding, border, et cetera.
Examine various methods used for positioning content.
Examine how to manipulate various semantic layouts.
Resources
Discussion Participation Scoring Guide.
CSS Zen Garden.
/institution/IT/IT3212/170700/Unit03/u03d1_learning_comps.html
DQ2 Page Layout Challenges
CSS offers powerful tools for defining page layout. However, it can be one of the most frustrating challenges for new Web developer. Understanding of the box model is imperative, as are other page alignment properties.
Discuss one or more of the challenges or experiences that you encountered when trying to complete this unit’s assignment. How did you try to address it or solve it? What questions do you still have?
Response Guidelines
Comment on the posts of at least two other learners. Share approaches or techniques that you might suggest to help the learner to address his or her challenge.
Resources
Discussion Participation Scoring Guide.
Unit 4 discussion
DQ1 Building a Photo Gallery
There are many types of photo or image galleries available on the Internet. Fundamentally, they are all designed to display graphics in an interesting, innovative, or expedient way.
In your post:
Discuss some of your primary design considerations for your photo gallery.
Discuss how you are building your gallery. Consider topics like the following:
Thumbnail creation.
Mechanism to display your full-size images.
Graphic optimization.
How you used CSS to control your gallery.
HTML5 tags or elements that you used.
How you control layout.
Response Guidelines
Comment on the posts of at least two other learners. Offer insights, solutions, examples, or opinions that add depth and value to the conversation.
Learning Components
This activity will help you achieve the following learning components:
Examine examples of image galleries in a Web page and how they are coded.
Understand how to create an image gallery table using HTML or CSS, or both.
Resources
Discussion Participation Scoring Guide.
/institution/IT/IT3212/170700/Unit04/u04d1_learning_comps.html
DQ2 Challenges to Adding Media to a Web Site
Adding media to a Web site can be a great way to enhance the user experience. The evolution to HTML5 has greatly simplified and standardized the process. Still there can be challenges.
Discuss one or more of the challenges or experiences that you encountered when trying to complete this unit’s assignment. How did you try to address it or solve it? What questions do you still have?
Response Guidelines
Comment on the post of at least two other learners. Share approaches or techniques that you might suggest to help the learner to address his or her challenge.
Resources
Discussion Participation Scoring Guide.
Unit 5 discussion
DQ1 PHP and Form Submission
Forms allow users to be able to interact with Web sites and to submit content. However, not all forms are created equally. We have all experienced forms that were too long that you gave up filing it out or perhaps ones that had fields that you did not know what should be placed into them. Consider Web usability and functionality as you discuss any two of the following:
How should the fields and labels be organized on a site or a form, and in what order?
How should we determine what type of input field each input should be? What input type would reduce the chances of errors?
What role does CSS play in creating an effective form?
How is Web usability applied to Web forms? Why is it so important that Web forms provide the user with the optimal user experience?
Response Guidelines
Comment on the posts of at least two other learners. Offer insights, solutions, examples, or opinions that add depth and value to the conversation.
Learning Components
This activity will help you achieve the following learning components:
Define the layout of form elements including field, fieldset, label, input fields, and buttons.
Understand the purposes of each type of input field in correlation to its data.
Resources
Discussion Participation Scoring Guide.
/institution/IT/IT3212/170700/Unit05/u05d1_learning_comps.html
DQ2 Challenges to Creating Forms
Forms allow users to interact with Web sites in important ways. Forms can be complex or simple, but creating them to work and display properly can be tricky.
Discuss one or more of the challenges or experiences that you encountered when trying to complete this unit’s assignment. How did you try to address it or solve it? What questions do you still have?
Response Guidelines
Comment on the posts of at least two other learners. Share approaches or techniques that you might suggest to help the learner to address his or her challenge.
Resources
Discussion Participation Scoring Guide.
Unit 01 Assignment 1
Creating the Home and Template Pages
Overview
In this assignment, you will start building your Web site for your fictional organization by creating a homepage using HTML5 and some of the key elements that define a Web page. You are required to use either a simple text editor to write your code, or an enhanced text editor such as Brackets.
Note: Microsoft Word is not a good tool for developing code because it is a document processor and not a text editor as it adds other formatting to the background code.
Once you have built your homepage, you will have a better idea of the consistent elements that you will need across all of your pages. Typically, Web pages have some aspects that will be the same from page to page so that a user does not need to relearn how to navigate a Web site. These components typically include the header (consists of the logo and organization name), main navigation (consists of the main pages or categories of the page), main content area (where the bulk of the information about the page is located), and the footer (consists of secondary navigation, address, copyright information, et cetera).
The creation and reuse of these common elements is where templates become invaluable. By simply duplicating the template file, you can quickly create all of your pages leaving only content to add to finish off each of the pages. As you are creating your homepage, you will want to be cognizant of the fact that you will be using it to create your template file.
Once completed, you will publish your pages with a Web host of your choosing.
Note: The Web host that you choose must use PHP.
Expectations
The code that you use to create your page (and during this course in general) should conform to the following expectations:
Pages should render properly in at least two of the following browsers: Chrome, Firefox, Edge, and Safari.
Code should use all of the tags specified in the directions.
Code should be verified to be error free, well documented with comments, and appropriately constructed.
Hint: Consider creating a mock-up or wireframe that depicts the precise layout of your homepage. It will act as a useful guide as you develop your site.
Note: This course requires to you to use a text editor to complete your work. There are many free open source options on the Internet from which you may choose. One such tool is Brackets. It can be freely downloaded from the Brackets Web site.
Directions
Using a text editor, create an HTML5-compliant homepage with a file name of index.htm. The page should include the following page sections:
Header: Include the organization name and logo.
Navigation: Include links to all site pages (including the homepage).
Content: This section will later be customized for each of the site pages. For the homepage, it should, at a minimum, consist of information that introduces the organization.
Footer: Include secondary navigation, copyright notice, or other text of your choosing.
Be sure to:
Include the following tags in the code: title, article, section, head, header, html, body, footer, nav, and doctype.
Make sure to include developer comments for each page section to explain or describe the coding.
Include a comment block at the top of each of your Web pages with your name, the date, the file name, and a short blurb about what the page will consist of.
Save a copy of the homepage and name it template.html. Remove the content that you placed in the “Content” section. This file will serve as a template to be used later to create the other four pages of your site.
Make sure to do the following:
Submit error-free HTML5 code.
Create a Web page that demonstrates the accurate use of specified HTML5 tags.
Create Web page elements that accurately reflect design requirements.
Write developer comments to describe and explain code.
Once completed, view your pages in your selected Web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant. You may use the Markup Validation Service from W3C for testing this. Important: Take a screen capture of your validation results and save it for submission.
Note:Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down as one error can cascade into 20 other errors.
Hint: If you are using Brackets as your enhanced text editor, there is a live preview feature that will allow you to see the results of your code as you enter it in. This will help you to quickly identify if you may be missing a closing tag or an attribute.
Submission Requirements
Submit your work in the courseroom using a single zip file containing the following:
index.html.
template.html.
image_and_url.doc. Include a Word document with:
URLs for each of your pages.
Names of the browsers you used to view the pages.
Pasted image from your validation screen capture.
Any ancillary files such as graphic or photos you may have decided to include.
Upload your Web site files to a hosting service of your choice. Two free sites to consider are Freehosting.com and 2FreeHosting.com.
Note: If you are uncertain on how to upload your files to a Web host, you can find assistance in the resources given in this unit’s studies.
Resources
Creating the Home and Template Pages Scoring Guide.
Brackets.
Freehosting.com
Markup Validation Service.
2FreeHosting.com.
Unit 02 Assignment 1
Externally Linked CSS and Site Navigation
Overview
Imagine that you have to change the font size for a headline in your Web site. No problem, right? Just go in and change the font size property on that page. But, what if you had a site with a hundred such titles that you had to change one by one? It would be both time consuming and inefficient. That is where CSS come in. They allow developers and designers to make wholesale changes to a Web site by changing code in only one file. In fact, with HTML5, formatting must all be done using CSS.
In this assignment, you will create your site navigation and a single external CSS file that controls text elements on each of your Web pages.
Directions
Complete the following:
Create and save an externally linked, CSS3-compliant style sheet to control all your Web pages (see page list below). It should define properties (such as position, margin, padding, font family, color, size, et cetera) for each of the following:
Headlines.
Header.
Body text.
Background (image or color).
Navigation (use an unordered list to format the list items for navigation).
Footer (location/font size and color).
Anchor links (current, hover, visited).
Update the code in your homepage and template to link to the new style sheet.
Use your page template to create the other four pages for the site and title each appropriately.
About Us.
Services.
Gallery.
Contact Us.
Create functional page navigation using CSS. Use textual links using either a horizontal navigation across the top or vertical navigation down the left side.
Define text and background properties for all page elements using CSS.
Make sure to enter context appropriate text in the content sections for each of the pages to demonstrate that the formatting and design are consistent across the site.
Make sure you do the following:
Submit error-free HTML5 and CSS code.
Create functioning site navigation using CSS.
Create a functioning external CSS file linked to a Web site.
Use CSS to effectively manipulate properties of Web page elements.
Write developer comments to describe and explain code.
Notes
Make a note of the following as you complete this assignment:
Use the same CSS formatting that references a single external style sheet for all pages.
Use Web fonts such as those available on Google Fonts Web site.
Use
tags only when there is no better element for the job to describe the content that it is containing. Use the semantic layout elements such as header, article, section, nav, and footer instead.
Hint:Consider building your entire layout interface first. It can help you plan your development of your pages to figure out where you want your content to go.
Once completed, view your pages in your selected Web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Important: Take a screen capture of each of your validation results and save it for submission.
Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down as one error can cascade into 20 other errors.
Submission Requirements
Submit your work in the courseroom using a single zip file containing the following:
index.html.
template.html.
image_and_url.doc. Include a Word document with:
The URLs for each of your pages.
The names of the browsers you used to view the pages.
Pasted images from your validation screen capture.
Any ancillary files such as graphic or photos you may have decided to include.
Upload your Web site files to a hosting service of your choice. Two free sites to consider are Freehosting.com and 2FreeHosting.com.
Resources
Externally Linked CSS and Site Navigation Scoring Guide.
Freehosting.com
CSS Validation Service.
Google Fonts.
2FreeHosting.com.
Markup Validation Service.
Unit 03 Assignment 1
Page Layout With CSS
Overview
You have created your Web pages, navigation, and text that use CSS. Now it is time to concentrate on how CSS can control page layout to ensure consistency across all pages. It is also time to customize the layout of each page to appropriately accommodate content using CSS.
In this assignment, you will create a liquid layout for your site and add the final text copy to your pages while ensuring the same level of consistency across all of the pages through CSS. Liquid layouts are designed to resize the page components as the page width changes. Regardless of the browser width or device width, the user will not have to do any horizontal scrolling as all of the page components will be resized to fit the elements within the page width. This liquid layout would apply to all pages and all sections of the page including the header, navigation, content, and footer areas.
Directions
Complete the following:
Amend the content section of each of the following pages using CSS as described below:
About Us: Create a CSS-formatted table with a header, rows, columns, and cells, and populate it with content.
Services: Add at least two dynamic-width columns.
Contact Us: Create multiple rows.
Homepage: Create both rows and columns.
Use CSS to format how the HTML document is rendered in the Web browser based on liquid layouts such as the header, navigation, and footer. Each of these sections should resize based on the browser width.
Make sure you do the following:
Create a table that properly displays data.
Submit code that is error free, well documented, and appropriately constructed.
Use CSS to define how HTML elements are displayed on a Web page per specifications.
Create custom layouts for individual page content areas.
Write developer comments to describe and explain code.
Once completed, view your pages in your selected Web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Important: Take a screen capture of each of your validation results and save it for submission.
Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down as one error can cascade into 20 other errors.
Submission Requirements
Submit your work in the courseroom using a single Zip file containing the following:
All page files.
Image_and_url.doc. Include a Word document with:
The URLs for each of your pages.
The names of the browsers you used to view the pages.
Pasted image from your validation screen capture.
Any ancillary files such as graphic or photos you may have decided to include.
Upload your Web site files to your Web host.
Resources
Page Layout With CSS Scoring Guide.
CSS Validation Service.
Markup Validation Service.
Unit 04 Assignment 1
Adding Media
Overview
Adding media to your site is almost considered as the price of admission for a modern Web site. Identifying or creating contextually compelling media content greatly enhances a Web site.
In this assignment, you will add video, audio, and an image gallery to your Web site. You can create the images, video, and audio on your own, or you can use them from an existing source such as YouTube. Make sure to only use content that does not infringe on copyrights and include proper credits where applicable.
Note: Content used in the creation of your Web pages should be original (created by you) or content that is not restricted by copyright and royalty issues.
Directions
Add the following media to your site. Content should be appropriate to the look, feel, and context of your site.
Image Gallery (add to the Gallery page): Create an image gallery with at least three images. The images should be displayed as thumbnails that open a larger image in a pop-up window when clicked. All of the images on your site should use the alt attribute to describe the image.
Video: Can be taken from YouTube or other sources or made by you. Be sure to include player controls.
Audio: Use .mp3, .wav, or .ogg files. Be sure to include player controls.
Make sure to do the following:
Add a functioning video to a Web page.
Add a functioning audio track to a Web page.
Create a functioning image gallery according to specification.
Write developer comments to describe and explain code.
Notes
Make a note of the following as you complete this assignment:
Images should ideally be created using JPEG, GIF, and PNG-8 file formats. Use the online image resizing tools to resize your image to the intended display size. You want to avoid the browser scale your image as it can cause color depth and resolution problems.
Audio and video file sizes can get quite large, so be sure your file sizes are less than 10 MB to be able to quickly upload and download them. Your hosting server may limit your file sizes as well, so be sure to check with them if there are any limitations.
Hints
A few hints to successfully complete your assignment:
If you are looking for resources around audio and video, make sure that you are looking specifically for HTML5 resources. The extensive plugins and browser workarounds are no longer a concern. All video and audio can be used through the and elements.
It is sometimes useful to put video, audio, and graphics files in a single directory with a name that is descriptive such as media.
Once completed, view your pages in your selected Web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Important: Take a screen capture of each of your validation results and save it for submission.
Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down as one error can cascade into 20 other errors.
Submission Requirements
Submit your work in the courseroom using a single zip file containing the following:
All page files.
All media files.
image_and_url.doc. Include a Word document with:
The URLs for each of your pages.
Each of your media files.
The names of the browsers you used to view the pages.
Pasted images from your validation screen capture.
Any ancillary files such as graphic or photos you may have decided to include.
Upload your Web site files your Web host.
Resources
Adding Media Scoring Guide.
Markup Validation Service.
CSS Validation Service.
Unit 05 Assignment 1
Creating a User Form
Overview
You have added interactivity to your Web site with media. Another form of common user interaction is with forms. In this assignment, you will create a form to be used in one of your Web pages that will allow users to share or request information. Examples of types of forms to consider are:
Request for information.
Volunteer sign-up.
Event registration.
Newsletter sign-up.
Directions
Create a user-friendly and professionally designed input form on the Contact Us page. The form should be contextually relevant for the site’s purpose and intuitive for the user. At a minimum, the form must include the following functioning tags:
Fieldset.
Legend.
Label.
Textfield.
Textarea.
Radio buttons or check boxes.
Select box.
Submit button. (See the Form Submission details below.)
Make sure to do the following:
Create a Web form that functions per specifications.
Submit error-free HTML5 and CSS code.
Create a user-friendly layout for a Web form.
Write developer comments to describe and explain code.
Form Submission
When a user form is submitted, proper UX design dictates that there is some sort of a response that lets you know your submission has been successful. This is often done through server-side scripting using PHP, which is beyond the scope of this course. Because it is an important component to any form, we have included such a page called response_page.php for your use. To enable this function, do the following:
Add the following code to your form in the form element:
