Creating the Home and Template Pages
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 asBrackets.
Note:MicrosoftWord 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.
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 isBrackets.It can be freely downloaded from the Brackets Web site.
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.
Createa Web page that demonstrates the accurate use of specified HTML5 tags.
CreateWeb page elements that accurately reflect design requirements.
Writedeveloper comments to describe and explain code.
Once completed, view your pagesin 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 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 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.
Submit your work in the courseroom using a single zip file containing the following:
image_and_url.doc.Include a Word document with:
. URLsfor each of your pages.
. Names of the browsers you used to view the pages.
. Pasted imagefrom 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. Twofree sites to consider areand 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.
Delivering a high-quality product at a reasonable price is not enough anymore.
That’s why we have developed 5 beneficial guarantees that will make your experience with our service enjoyable, easy, and safe.
You have to be 100% sure of the quality of your product to give a money-back guarantee. This describes us perfectly. Make sure that this guarantee is totally transparent.Read more
Each paper is composed from scratch, according to your instructions. It is then checked by our plagiarism-detection software. There is no gap where plagiarism could squeeze in.Read more
Thanks to our free revisions, there is no way for you to be unsatisfied. We will work on your paper until you are completely happy with the result.Read more
Your email is safe, as we store it according to international data protection rules. Your bank details are secure, as we use only reliable payment systems.Read more
By sending us your money, you buy the service we provide. Check out our terms and conditions if you prefer business talks to be laid out in official language.Read more