HTML Assignment
ariel-di
assignment_7_instructions_sp2016.pdf
MIS 180 Spring 2016 Instructor George Bonilla
1
xHTML/HTML 5 Assignment 7
Due: MUST be uploaded to Bb by Saturday, April 30, 2016. Points: 15 This is an introductory assignment designed to allow you to learn the basics about creating web documents using elements from xHTML and HTML 5. You will build a short & simple web page to provide basic information about you. Specifically, you must have at least two paragraphs of text. (For this assignment, a paragraph should have at least 5 separate sentences.) You must consult the Assignment 7 Grading Criteria to help guide you through this assignment.
1. Paragraph 1 must provide: § background information about you § why you are attending SDSU § something interesting about yourself.
Be sure to include information about all 3 pieces that is easily able to be discerned from reading your web page.
2. Paragraph 2 must discuss: § what your major is and why you chose it § how companies in your major/career path use information systems to provide a
competitive advantage. Provide the name of at least two companies you researched to find out about their MIS systems
§ Both paragraphs should have a minimum total of 250 words NOT including your code.
Be certain that you have done a thorough job of analyzing and writing this material. I expect that you will provide specific and thorough content. What you write – the content – will affect your grade!
Assemble the different information components you need to include on the page – write the text, get the images, decide what the contents of your list will be, etc. Develop a prototype layout – do a rough sketch that includes all required elements. Your page should not look exactly like the sample provided! After you are satisfied with your prototype, enter the code into your editor. “TEST” your webpage to ensure that all pieces work together (e.g. Does the email link work? Is your picture no larger than 350X350 pixels (or ‘about’ 4 X 4 inches)? Does your picture open in the web browser?
Notes: 1) See last page to learn how to resize your picture. 2) DO NOT use pictures found in a URL which forces the user to have internet access.
Remember…
• You MUST create your web page using Notepad or TextEdit (Mac). Note: If you use TextEdit you MUST ensure
o You may not use an HTML or XHTML editor for your assignment – this means FrontPage, DreamWeaver, or any other XHTML/HTML editor available online (such as HTML Tidy) or via download.
o This also means that you may not use any editing programs that convert your text into html – for example, you may not use the Save As Web Page option in Word.
MIS 180 Spring 2016 Instructor George Bonilla
2
• You must write your web page code using the XHTML strict standard • You must work independently and all work must be original
Your web page must have the following required components:
NOTE: Not following directions and paying attention to details will result in points being lost. 1. The first three pieces in your document must be written exactly as follows Do Not include the
letters a, b, c: a. <?xml version="1.0" encoding="UTF-8"?> b. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
c. <html xmlns="http://www.w3.org/1999/xhtml"> This stuff at the top of a web page is required and all you need to know is these lines makes it valid XHTML and makes it possible for your web page to be read by different web browsers and devices well into the future. Consider creating a template of the above three lines or pieces for you to add to your future web pages.
2. Use the following XHTML elements (and appropriate text that you will supply): HEAD TITLE BODY Heading - use at least two different sizes Paragraph Horizontal Rule Break (used at least once to “force” a line break
Hypertext links – Include an E-mail link for yourself.
Lists – Create either an Ordered or Unordered list with >= 4 items in the list. Incorporate the list into one of your paragraphs to provide the required information.
Text Formatting (use at least 2 of the following: Strong, bold, emphasis, typewriter.) Use this around regular text in a paragraph, not in a heading tag.
At least one picture of you or selfie saved in .jpg format will be acceptable. The picture must not be over 350x350 pixels in size.
Meta Elements (include 1 for author and 1 for description, which will contain a description of your page)
3. Enter an HTML comment to create internal documentation inside of the “Head” area. The
comment (not visible to the user) should state “Web Page last updated on XX/XX/XX.” Update this date every time you work on the page.
4. If all of the required components are not included in your web page, or if they are not working correctly, you will lose points. Additionally, your page must be visually pleasing (e.g. don’t have all the text cluttered together) and free from spelling and grammar errors.
5. Name your HTML file with your Last Name + Initial of First Name + A7Webpage and the
correct extension (e.g. for student John Doe the file would be: DoeJ_A7Webpage.html)
6. Check your file using an HTML validator (such as: http://validator.w3.org) to ensure that you have followed all of the programming rules correctly. Select the Validate by Direct Input tab,
MIS 180 Spring 2016 Instructor George Bonilla
3
copy and paste your code into the window and select the check button. When you are done validating, be sure to select the “Show Source” option and revalidate. For full credit, you must validate successfully using the HTML Strict Doctype tag.
Remember that a successful validation when using Validate by Direct Input (as opposed to Validate by File Upload) will end up with the following message:
Notes and Potential Issues
The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.
Using Direct Input mode: UTF-8 character encoding assumed
Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.
If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Congratulations
The uploaded document was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation of it. The parser implementations we used for this check are based on OpenSP (SGML/XML) and libxml2 (XML). Turn in by Uploading to Blackboard 1) A zipped folder containing three items: a. your html page, b. your picture, and c. a Word document of your validated page, all three items in the same folder. 2) An electronic copy (word document) of the validated page. In the options in the Validator, select “Show Source” and Revalidate. This will include results about whether your page passed the validation, along with the source code. This printout may be several pages long. 3) Be sure to save and keep an electronic copy of your file. You MAY be asked to submit an electronic copy of your file. Additionally, you will need this file for a future assignment.
MIS 180 Spring 2016 Instructor George Bonilla
4
Note: The sample figure shown below does not meet all of the assignment requirements, it is only
an example. Do not make your page look identical to this sample – you should determine the organization and layout of your own page.
How to Resize a Picture.
The following are two software programs native to the PC and/or Mac to resize your picture to meet the No Bigger Than 350x350 pixels picture size for your web page. Download the document HOW TO RESIZE YOUR PICTURES to learn how to use the software appropriate for your computer.
• For the PC use Windows Live Photo Gallery. • For the Mac OS X use Preview.
Have fun with this assignment!
