Note: Generic structural elements like div or span should only be used where there is no moremeaningfulHTML5 element (e.g.section)thatis appropriate.

1. Homepage(index.html)

This page should contain appropriate title, a descriptionand graphic related to the company. It is upto you to make up the details of the company that is advertising the jobs. It should contain a menuthat links to the other pages on your Web site. This same menu should be in every page of yourwebsitewithan emaillinktoyour studentemail.

2. PositionDescriptionspage(jobs.html)

You need to write a web page with at least 2 position descriptions. For one of these your tutor willallocate you a job title from the IT industry. For the second position, the choice of IT job type isentirely up to you. Why not write a position for the ideal job you would like to do? Be as imaginativeas youlike.

TheHTMLonthispagemust contain:

• Hierarchicallystructuredheadingsofatleast2levels
• More thanone
• An
• Atleastone ordered list
• Atleastoneunordered list
• Thepage shouldalso haveanappropriate

Yourjobdescriptionsshouldbeconcisebutas aminimuminclude :

• Companyspositiondescriptionreferencenumber(5alphanumericcharacters)
• Positiontitle
• Briefdescriptionoftheposition
• Salaryrange
• Thetitleofthepositiontowhomthe successfulapplicantwillreport
• KeyAlistofthespecifictasks thatare to beperformed
• Required qualifications, skills, knowledge and attributes. These should be divided intoessential and preferable. These requirements should include such things asprogramminglanguages required, number-of-yearsofexperiencerequired,.

The content of the job description should be appropriately structured with headings, sections,subsections,listsetc. usingthe appropriateHTMLelements.

3. Jobapplicationpage(apply.html)

Thispagehas aformthat allowsapotentialcandidatetoregister theirinterest inthe advertised

position.HTML5datavalidationshouldbeusedtochecktheusersinput.

Theformwillallowapotentialapplicantto fillinthefollowing:

All inputs should have labels. All form values, except the comment textarea are required or havea default value (e.g. select and checkbox inputs). The user should not be able to submit the formifanyofthese required fields areblank.

DataSubmissiontoServer

The form should have a submit button labelled Apply.When this button is clicked the name-values from the associated form should be sent to the server using the post http method. Theserver action address is https://mercury.swin.edu.au/it000000/formtest.php. The server will thenjust echo back the name valuepairs totheclient. Whilenothing will be stored on theserver inthis part of the assignment (we will do this in Part 2) this will allow the form submission to betested.

4. Apageaboutyourgroup(about.html)

Thispagewillcontaininformationonthefollowing:

It could also include group profile, such as programming skills, working experiences, interests, orinformation that is related to your group. This extra information gives you an opportunity to extendthetechniquesyouapplyinyourassignment, andcouldinclude:

• Demographicinformationabout allofyou
• Descriptionofyourhometown
• Alistofyourgroupmembersfavourite books,music,films

5. CSSRequirements

NostylemarkupshouldbeincludedinyourHTMLfile.

The pages in your website must be styled with CSS and have a consistent look and feel, particularlycommon elements such as menus, headers and footers. While the emphasis is this assignment is ontheappropriateapplication oftechniquesratherthangraphicdesign,yourpagesshouldfollowbasic usability / accessibility principles, e.g. distinguishable foreground and background colours, andfontreadability,etc.

Createyourowndesign andimplementit usingonesingleexternal stylesheetthatappliesto all

yourWebpages.Thisfileshouldbenamedstyle.cssandplacedinastylesfolderontheserver.

The stylesheet should style the common elements on all your web pages, and address the followingspecificstylerequirements.

1. Comments: The CSS should include comments at the beginning of the CSS file to identifyauthor and purpose. Individual line comments should be used as necessary to explainparticularstylesandexplainwheretheyare
2. Selectors: All the following CSS Selectors should be used appropriately at some point in thisassignment:
   • element,#id,.class,grouping,contextual
   • pseudoclass,pseudoelement
3. Menu:Themenushouldhave itsownsetofstyles applied. Useabackground
4. IndexPage:DemonstratedthefollowingspecificCSSrulesonthehtmlpage:
   • displayabackground
5. PositionDescriptionsPage:DemonstratedthefollowingspecificCSSrulesonthehtml

page:

• elements should have their font variant, size and family etc. set using theshort-handfont

• The
• The
• The footer should cover the full width of the page the footer text should be in asmallfont andcentredin the.

6. AboutPage:DemonstratedthefollowingspecificCSSrulesonthehtml page:
   • Style the definition list so that each
     is on the left and the
     on the right in asingle Setthedttohaveacommonwidth.
   • The photo should be styled with a single border using the short-hand border-property,andthefigureshouldbefloatedtotherightofthedefinitionlist
   • should be centred within the section, headings in bold, table cells with abackgroundcolourspecifiedin hexadecimal format
     Theemailshouldbestyle similarlytothedefinition
     Allpages:shouldhave afluidlayout(thepage shouldReflowonpageresize).

     OtherCSSselectorsandpropertiescanbeusedasnecessaryandappropriateforthepresentation

     DonotincludeanyproprietaryCSSmark-up,suchasmoz-orwebkitetc.

     Enhancements

     Note: Make sure you get all the basics working first before you attempt any enhancements.SeethemarkingGuidebelow.

     The technologies for developing Web applications are rapidly changing. One of the key skills you willneed is finding out about these new techniques and applying them.When researching, look at thereliable websites such as the External Links provided on Blackboard.This assessment gives you anopportunitytodemonstrateyourabilitytoimplementfeatures/techniquesthatgobeyondthespecified requirements above. It also provides you with an opportunity to demonstrate your ability todiscover techniques fromarangeof sources andapplytheminastandardscompliant manner.

     These enhancements need to be implemented within the required web pages (index.html,product.html, enquire.html, about.html). The extra feature needs to enhance your web site in ameaningfulandrelevantway.

     List and describe each enhancement implemented on the separate enhancements.htmlpage, anddescribe how you have significantly extended the basic HTML and CSS beyond the lecture andtutorials.Hyperlinkfromthis listtowherethefeatureis implemented inyourWebsite.

     If it is a CSS feature, hyperlink to an example of the html that is selected by the CSS rule.Foreach enhancement feature briefly explain:

     ?howitgoesbeyondthebasicrequirementsoftheassignment

     ?whatcodeisneededtoimplementthefeature

     ?thereferencesto anythirdparty sourcesforthetechnique,(e.g.URL)mustbecited.

     ?ahyperlinktowhereyouhaveappliedthatextensioninyourWebsite

     (this is needed so the tutor can quickly assess your enhancements during thedemonstration).

     ?Allenhancementsmust beabletorunonFirefox.Makesureyoucheck this.

     A maximum of 2 enhancements will be assessed (up to 10 marks each). Examples of HTML/CSSenhancementsyoumightmakethatwill contribute ahighdistinctionmarkinclude:

     • Effective,appropriateandinnovativeuseofanumberofdistinctHTMLelementsnotcoveredin tutorials (e.g. Image maps, Canvas, etc) used in a way that improves the user experience ofthe website.
     • A number of additional CSS properties or selectors (e.g. support for interactivity, animation)not covered in the tutorials. For example the use of a range CSS3 pseudo-elements and classes,child or siblings combinators, attribute selectors, etc. (e.g. use the CSS3 :target selector to helpusseewhereyouhaveapplied your enhancements.)
     • Implement Responsive Design with additional CSS that presents your website specifically formobile phone/tabletsized

     Discussyour proposedenhancementswithyoututor before youimplementthem.

     The number of marks you receive for an enhancement will be at the sole discretion of yourtutor/marker. As a guide if the enhancement has only taken a couple of lines of code it is likely tobetrivial.

     • Berelevantto /enhancethe contentofthewebsite
     • Bewelldescribed(asexplainedabove)
     • Benon-trivial.
     • Besignificantlydifferentfromotherfeaturesyouhave implemented.

     Note:DonotincludeJavaScriptinthispartoftheassignment.

     WebSiteFolderStructureandDeployment

     The directory structure of your website is described below. You can create additional HTML files foryourcontent (dependingonwhatyourcontent requires), butthe followingis needed:

     Notes:

     • HTMLfilesshouldonly beinthebaseassign1/folder notanywhere else.
     • Allimagesusedforthecontentshouldbestoredintheassign1/images/
     • Allimages usedforthestyle shouldbestoredintheassign1/styles/images/ folder.
     • Thereshouldbeastyle.cssfileintheassign1/styles/
     • All links to your files (CSS or images) should be relative. Do not use absolute links, asthese links will be broken when files are transferred for marking. No marks will beallocatedif linksare

     Note:DONOTINCLUDEVIDEOOROTHERLARGE(>5MB) MEDIAFILESINYOURSUBMISSION.

     ProjectReport(IndividualTask)

     The project report is an individual task. Your report must be professionally written (within 1800words). Table 1 presents the suggested structure for the report and some sample content for eachsectionofthereport.

     Table1.ComponentsofReportandRequirements

     Component	Content
     Title	Reporttitle Yourname StudentID
     Introduction	Websiteintroduction Objectiveofthereport Outlineofthereportsstructure
     WebsiteContent	Introducethepurposeofeachpageandmaincontentofeach page Some technicaldetailsonhowyouuse HTMLmarkups Asitemap
     WebsiteStyle	Introducethe presentationofyourwebsite Some technicaldetailsonhowyouuseCSSmarkups Screenshotstoshowthedesign/userinterface
     KeyFeatures	Highlightthekey/ innovative featuresofthewebsite Describe yourenhancements (ifyouhavethem)
     YourContribution	Listanddiscussyourmaincontributions
     Conclusion	Summaryofthe report Recommendationsforfutureimprovements
     References	(Optional)Listofreferencematerials ifused
     Appendix	(Optional)Informationthatsupportsbutisnotessentialtothe report

     ShortVideo(TeamTask)

     Createashortvideoto introduceanddemonstrateyourwebapplication.

     • Uploadyourvideotoyoutube
     • Createahyperlink inthehtmlpage ofyourwebsite, link ittoyouryoutube video
     • Everyteammembermustpresentinthedemonstrationvideo forasimilaramountoftime
     • Thetotallengthof thevideo shouldbebetween4to5

     Deliverables

     Themarksareallocated50%forteamtaskand 50%forindividualtask inthis assignment.

     • Thewebapplication(teamtask)
     • Theshortvideo (teamtask)
     • Projectreport(individualtask)

     AssignmentSubmission(Canvas+Mercury)

     Yourwebsite shouldbeuploadedtoMercuryonorbeforeyour deadline.

     An electronic copy of your assignment should be submitted through Canvas on or before yourdeadline.

     • Make sure all your website files are in the correct folders and compress your root folder withall your sub-folders with HTML, CSS, and images into a zip file named assign1.zip. Submitthis to Canvas by your team leader. When the zip file is decompressed, the entire websiteshouldbe ableto be runfromhtml withoutneedingtomoveanyfiles.
     • You dont need to submit the demonstration Youtube video. You only need to include ahyperlink inthehtmlpage pointingtoyourYoutube video.
     • Everystudentneedstosubmittheirindividualprojectreportto
     • Everystudentneedstosubmittheirpeerevaluationformto
     • Youcansubmitmorethanoncethrough Yourlastsubmissionwill bemarked.
     • Notethatalldeliverablesmust besubmitted

     WebsiteRequirementsChecklist

     index.html HTML Menuthatlinks(consistentmenuonallpages)? Headerwithappropriatecontextincludingtitle?Footer? CSS:Backgroundgraphic? Menuappropriatelyformattedwithbackgroundcolour?
     jobs.html HTML Headings(atleastcontiguous2levels)? Orderedlist?,Unorderedlist?,2+Sections?,Aside? CSS: Aside25%viewportwidth?,floatsright?,colouredborder? fontvariant,sizefamilyset?Footerfullpagewidth?
     apply.html TextinputwithHTMLformatcheckingfor:jobrefno(=5char)?,names(<20 char)?,address(<40char)?,postcode(=4digits)?,email?,phonenumber(8to12digits)> ?Appropriateinputfordate? Radiobuttonsforgenderwithfieldset? Dropdownboxforstate?Skillscheckboxes? Textarea? Labelslinkedwith'for'(testby'clicking'onlabel)? Dataforallinputsreturnedfromservercorrectly?
     about.html definitionslists?listssinglelinecommonwidth? photoinfigure?borderasspecified?floatright? timetable?timetableformatasspecified? emaillinkworks?
     CSS(general) Appropriateuseofselectors:grouping?,context?,pseudo? Fluidpageflow(relativedimensions)?

     GoodPractice/In-houseStandard

     (Itwillcause deductionsifthesegoodpractice/in-house standardsarenotfollowed)

     Requirement
     Pagedesign
     -Welldesignedstructure
     -Appropriatecontrastincolours
     -Appropriateuseoffonts
     -Consistapplicationofstyle acrosspages
     -Appropriateapplicationofstyles
     Content
     -Jobdescriptionshavesufficientquantity(200words+)
     -Jobdescriptions issufficientquality
     -About.htmlcontentmeetsspec
     -Images(includingportrait)presentandappropriatefilesize
     HTML
     -Meta-datafollowsin-housestandard
     -HTMLhasnoembeddedStylemarkupCSSisfullyseparatedfromHTML
     -Nodeprecatedelements/attributesused
     -NoinappropriateuseofHTMLsemantics (e.g.useof when shouldbeused)
     -HTMLfollowusabilitystandards (e.g.altonimages)
     -Commentsadequate
     CSS
     -NoredundantCSSorunusedselectors
     -Appropriateheadercomments(matchin-housestandard)
     -Appropriateuseofselectors(e.g.Classversus ID)
     -Appropriatelinecomments
     Website
     -DirectoryStructureasdefinedabove
     -Thirdpartycontentinadequatelyacknowledged Note: Failure to acknowledge the source of third party code or content is plagiarismand may result in zero marks for this assessment or other penalties in accord withSwinburnepolicy.