CS1010 Assignment 4 Web Page TTTMy?
For this assignment you create a web page with the theme Then Today Tomorrow My (something) where something is any one theme of interest to you. Some possibilities might be Then Today Tomorrow My Dreams, Then Today Tomorrow My Family, Then Today Tomorrow My Friends. Other (My) themes might be My Life, My World, My Country, My Town, My Team, My Plans, My Home, My Travels, My Holidays, My Work. Anything that is an interest of yours that you can connect to the past, present and future is a good theme for this web page. Assignments five and six will be a continuation of this web page so make the effort to establish a quality theme that truly interests you.
Gather assets
To complete Assignment 4 you must first decide upon the theme as explained above. Then collect at least fourteen images or artwork, either from the Internet or self-generated, in gif, jpg or png format, that clearly demonstrate your theme. Reserve four of these minimum fourteen images to use in Assignment 6, do not use four of your images for Assignment 4 or Assignment 5. The four images reserved for Assignment 6 need to be very closely the same width by height dimensions, for example all four images might be very close to 640 pixels width by 480 pixels height or all four images reserved for Assignment 6 are close to 400 pixels width by 800 pixels height. Then generate text that is descriptive or somehow contributes to your theme. Do not use video nor audio in this assignment.
Web browser
Use Firefox to view and test your HTML. Your web page will be evaluated using Firefox and Firefox provides better, basic, HTML error identification than do other browsers.
Required HTML tags
From Lecture08, use all the HTML tags presented in the BasicTagsHTML5 lesson, including those tags to create a complete head section (meta, link, title). From the BodySemanticsHTML5 lesson use the semantic tags,header, footer, section and at least two articles. Useat least one of the header tags (h1, h2…, h6, you need not use all six). Each of the ten (or more) images used in this assignment requires an image tag, and every image must have a caption using figcaption. Each image and caption must be wrapped in a figure tag (one figure container for one image and figcaption (ten images = ten figcaptions= ten figures). Use the anchor tag to link another resource (larger image or additional image (image 11) or additional web page) to the TTT My… page. Implement a balanced page using the width and height attributes of the image tag (or better, resize the images), as described in the Lecture09. Make the text of your page more impressive withall three text formatting tagsexplained in Lecture09,, use <strong> and <em<u>. Create both an ordered and an unordered list, each list with at least three list items as demonstrated in Lecture09.
Reference Lecture10to create a form that gathers input from the client. In an HTML document “a form” consists of form, input and table tags. Use the table tags (<table>, <thead>, <tbody>, <tr> and <td>), form tag, textarea tag and input tag (required type values text, email address, number, file, submit and button). Create a drop done selection list. Create a pair of mutually exclusive radio buttons (for instance a person is either a smoker or nonsmoker, or a person is either a female or male, this is “mutually exclusive”, a person cannot be both). The form must be laid out with a header section of one column containing the form title, and under this header section multiple rows of two columns per row, the left column contains the prompt for the desired information, and the right column contains one of the HTML input tags.
You may wish to visit w3schools.com to learn more about the tags and attributes required in this assignment.
Folder structure
Create a folder named A4_(your user ID)_(your first name)_(your last name), without the parenthesis. Create a subfolder to this folder, named images. Place the images and/or artwork (jpg, gif or png) in the images folder. Tip: If you are familiar with image resizing software, then resize the images to fit your idea of how your page should look. If you are not familiar with this kind of software, use the width and height attributes as shown in Lecture09. Do not include the images reserved for Assignment 6 at this time.
Name and save the HTML document
To begin your web page, open a text editor, either Notepad or TextEdit. In the “top level” folder(the folder named A4_(your user ID)_(your first name)_(your last name), without the parenthesis), save the text fileas A4_(your user ID)_(your first name)_(your last name), without the parenthesis, .html. A sample file name might be A4_cd9au_Craig_Dill.html.
Do not forget the indentation of “wrapped” tags as demonstrated in lecture slides. This is very important for the readability of your web page HTML. The <head>, </head>, <body>, </body> tags are wrapped by the <html</html> tag pair so should be indented, using the space tapped twice per level of indent. Tags inside the head section begin two spaces right of the head /head tags. Every level of nesting tags inside container tags is indented two spaces. Finish typing the remaining basic tags, indenting them inside the wrapper head and body tags. Generally, place the <title> title </title> on one line to save vertical space in the code, since the title tag pair only contains the title words. For the link tag, name the stylesheet A4_(your user ID)_(your first name)_(your last name), without the parenthesis.css, for example, A4_cd9au_Craig_Dill.css (though it does not exist, you will create it later (not for this assignment)).
Create the HTML container with the basic HTML tags
From Lecture08, begin typing the basic web page HTML tags. Note the two meta tags with name attribute and content attribute. Change the content attribute values to reflect search engine keywords describing your web page. Create a title that reflects your page theme. Keep the link tag, we will add a stylesheet in Assignment 5. The browser will simply ignore this tag if no stylesheet exists.
As you type this basic HTML, when typing wrapper tag pairs, type the open tag, press enter on the keyboard and immediately type that tag’s close tag, so you do not forget to close the wrapper. For example:
<html lang = ‘en’>
</html>
Then insert between the above two tags what you wish to type next:
<html lang = ‘en’>
<head>
</head>
<body>
</body>
</html>
Launch the basic HTML in a web browser and check Page source for HTML errors indicated in red.
Bright red text in Page source indicates something is wrong with the source code (HTML). However, the page may still display properly. Browsers are very forgiving and do their best to present web page information in spite of HTML errors. However, you are expected to create HTML code that does not show any bright red (not burgundy or purplish red, these are OK) in the page source. Eliminate all HTML errors by closely scrutinizing the HTML, discover your errors, edit the .html file in the text editor you are using to create the HTML (Notepad or TextEdit) and save the .html file, then refresh your web page in the browser, then review the page source. Not all HTML errors are marked red when viewing Page source in Firefox, but Firefox does a much better job of this than other commonly used browsers, and this is the reason we use Firefox.
Add semantic tags to the body section
In the body section of the html, add the semantic tags header, footer, section, and at least two articles (probably more, you may want to place each figure group inside an article tag pair, you might want to group two or three figure groups that share a central theme in an article tag pair). The semantic header tag pair nest content that announces the theme. All subsequent page content must support the theme. These semantic tags are wrappers, creating containers for other tags. Remember, these tags do not control where content is displayed on the page, they convey the importance and meaning of the content to anyone viewing the page source code. Frequently save the HTML file, refresh the browser and view page source, fixing any red HTML code you discover.
Add the page content tags to the body
Continue to complete the body section by adding the required tags (as stated at the top of this document. Images must be sized to maintain page balance.
Compress all assets and HTML into a single zip file
Compress all files and folders that make up the web page as a zip file. In Windows 8 this can be done using Windows Explorer, selecting the zip button of the share tab. Zip the A4_userID_firstname_lastname folder. On Mac using Finder select File then select Compress to produce the .zip file. A single file with file extension .zip is produced containing all the selected files and folders. Test your zipped file by unzipping it in a different folder location, launch your web page in Firefox and check that all is well.
Submit the zip file. Do not wait until minutes before 11:55:00 to submit. This file is larger and takes more time to submit than submitting a text file. The submission must be complete BEFORE 11:55:00, Sunday October 1.
Remember, HTML is about content, not look. Do not despair if the completed assignment lacks luster! Have fun!
Honor Code note: Copying anybody’s work and submitting that work for credit is an Honor Code violation. This includes copying Professor Dill’s work available in Collab and presented in lectures. Create every code line of your HTML document yourself. Some code lines of your HTML document are identical to those lines presented in lecture. Type those code lines yourself. Do not use “copy and paste” method to reproduce code from lecture content to your assignment.
Assignments 5 & 6 require Assignment 4. Do not “drop” this assignment!