Recognition and Target Audience Analysis | My Assignment Tutor

ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 1 of 5Lab 02HTML & CSS Code Recognition and Target Audience AnalysisOverviewThis week’s lab exercises:• HTML & CSS Code Recognition using Google Chrome’s Element Inspector• Altering the CSS Code to quickly change the appearance of a webpage• Continue Assignment 1 with an analysis and discussion of the Target AudienceExercise 1: HTML & CSS Code RecognitionLast week you created a basic webpage in HTML with some styles in your CSS file. This week you will look at a prebuiltwebpage via the HTML & CSS code.This exercise is designed to help you get more familiar with CSS and HTML code by trying to identify the specific CSSand HTML code associated with different sections of a web page. The exercises are based around the “CSS ZenGarden” webpage located at http://www.csszengarden.com/ which was set up to demonstrate the power of CSS. It isimportant that you begin to see the power of CSS at this early stage of the semester.• Download the Week 02 Lab Files zip file from Moodle and extract the files.• Make sure you can see the following file structure:• Open the csszengarden.html file in Google Chrome.• It’s time to learn about the power of Google Chrome’s built in Element Inspector.• In Chrome, right-click on the C.S.S. Zen Garden image at the top of the page, and select “Inspect Element”. Youshould get an element inspector window pop up at the bottom of your browser:• The Element Inspector shows the HTML code on the left panel, and the CSS styles on the right panel.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 2 of 5• You will notice that if you entered the Element Inspector by right-clicking on the first image as instructed, the greyhighlighted area will be on the tag.• You can see that the image is contained in the tag via the right panel in which there is a style that says:background-image: url(title.png);o This is a style that quite obviously places an image called “title.png” as the background in that h1selector.o Remember from last week the CSS syntax?o Some other properties with set values in this #pageheader h1 selector are:o height Set the height of the elemento width Set the width of the elemento background-repeat Choose whether to repeat the image or noto margin-top The top margin of that elemento position How the element is positioned in relation to other elements •At the very bottom of the Element Inspector you can see all of the page elements that this is a part of in ahierarchical view:htmlbody#css-zen-gardendiv#containerdiv#introdiv#pageheaderh1 o What this means is that the tag is inside a with the id=”pageHeader”, and that isinside a with the id=”intro”, and so forth. This is also easily visible from the HTML panel onthe left.o Remember from last week that id selectors are distinguished in CSS via a # (hash), and class selectorsvia a . (full-stop).• You can see how the Element Inspector can be a very powerful tool, especially for debugging code when trying tofigure out when something in your code is not working or appearing how you want it to.• With the Element Inspector still open, mouse over different HTML tags. The inspector will highlight, on the actualwebpage, the location of the content that you are hovering over. This is a very quick way to identify which HTML tagsare controlling what parts of the webpage.• Scroll down in the HTML panel of the element inspector.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 3 of 5• First hover over …o When you hover, you will see three coloured boxes appear on the webpage; Orange, Green and Blue.o Which colour do you think represents the actual position of the “linkList” content?o What do you think the other two colours represent?• Click on … in the HTML panel.o You can expand this div and see its full HTML contents via the little triangle next to it. oIn the CSS on the right side panel of the element inspector, you can see the styles of the id selector#linkList o Scroll down in the CSS panel to the very bottom.o At the bottom is a visual representation of how the stylesaffect the position of the element currently selected(shown to the right).o Blue represents where the actual block of content is, andyou can see its width is 225 pixels, and height isapproximately 1002 pixels.o Green represents the padding between the content insidethe element and the edge of the element, and you can seethat there is padding between the content and only the topedge of 104 pixels.o Orange represents the margin between the element andits parent element, and you can see there is a margin onthe left of this block of 375 pixels.o Finally there is also position, which shows as 300 pixels from the top.o If you scroll back to the top of the right CSS panel in the element inspector, you can see all of thesestyles applied to the #linkList id selector. The visual representation of the element comes in handywhen trying to work out why something is not positioning the way you want.• Another good function of the Element Inspector is the ability to make “live” changes to CSS and see theoutcome.o With the … still selected, click on Georgia, “Times NewRoman”, Times, serif; value of the font-family property style in the #linkList idselector of the CSS panel.o Delete that font-family value, and then type Arial and hit enter.o The change automatically updates the webpage to display Arial instead of Georgia.o Try reducing the top properties value. It will alter the position of this block element.o Note that making changes is good for quick testing but does not save to your CSS file.• At this point you should have a good grasp of the element inspector. So have a look at different HTML tags and theirassociated CSS selectors.o See if you can determine what each CSS property is actually doing in the CSS panel.o If you find a property you are unsure of, look it up on http://www.w3schools.com.o For example, inside the #extraDiv1 id selector what does z-index:2; do?• Once you have completed your investigation, it is time to start changing the look of the page to something similar inlayout but completely different in looks.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 4 of 5Exercise 2: The Power of CSS – Altering the StylesOnce you have deciphered which code belongs to what section you should alter the code in such a way thatit changes the entire look of the page. You will do this by ONLY CHANGING the CSS file.• Open the 213.css style sheet file inside NotePad++. (It is located inside the 213 folder).• Alter the look of the page by:o Finding new images for each of the images associated with the page.o Make sure that the images are resized to the size specified in the style sheet.o If no size is available find out the size from the images contained within the zip file and resize your imageaccordingly (if necessary).o Alter different elements to your liking of:o The colour scheme.o The fonts and font sizes.o The images.o ONLY change the CSS file in terms of font, colour values and images, nothing else.o DO NOT TOUCH ANY OF THE HTML CODE!!!o Remember to use Google Chrome’s Element Inspector to determine the selectors of each element youwant to alter.• This idea of this exercise is to help you understand the relationship between HTML code and CSS code and to giveyou a foundation on which to build a different web page without having to completely start from scratch.• Further changes can be made of course, and if you feel confident do not hesitate to stop here, but for the time beingthis is sufficient to get you looking at CSS and how it affects HTML code in a different way.• When you have finished, open the website http://www.csszengarden.com/213/ in your browsero Yes, this is the same page you were editing.o To see the power of CSS, click the link “A Robot Named Jimmy”o Note: this page uses an identical HTML file to the previous page, only the external CSS and thestyles within were changed… and while the appearance is completely different, the contentremains the same.o There are many other CSS designs of this single HTML webpage. You can see them all on the “View AllDesigns” link.• Although it would be nice to think that every design has been created from scratch, reality means that most of thedesigns are based on other, existing layouts. AS LONG AS the original design is no longer identifiable this is not aproblem. Using someone else’s design without altering it beyond recognition IS A PROBLEM however and it canbecome a costly one if breach of copyright can be established.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 5 of 5Exercise 3: Target Audience analysis for Assignment 1This exercise is designed to help you continue with your Design Document assignment that you should have started inlast week’s lab. The due date is still some time away, but it is quite a large assignment. Today you will focus on the TargetAudience for your website. In Lecture 2 we go over ways to determine the audience through a Target Audience Analysis.For the benefit of students that have the lecture later in the week to their lab, a brief overview of the Target AudienceAnalysis is described below:Generally, a Target Audience Analysis is to establish who will be using your product (in this case a personal website).• You should determine the demographics of the users.o Age, Gender, Education, Interests, etc.o Background, race, disabilities, employment status, and location are also demographics that aresometimes needed, depending on the focus of the multimedia product or web site.• Knowing ALL the demographics is not always necessary, but knowing the age group and gender almost always is.• The more you know about your Target Audience the better your site can be.• A broad Target Audience, however makes designing a targeted site/product difficult, as you are catering to a largeamount of tastes.For your assignment you are asked for one core demographic that will want to use your personal website. As you alreadyknow why the website is needed and who it will benefit, choosing this core demographic should not be too difficult.Once again, review the Website Overall Requirements of the “Assignment 1 Design Document” PDF, and continuewith the Design Document Template that you downloaded last week from Moodle (assessments section). Some helpfulinformation on what to include in the Target Audience section is provided below:1.3. Target Audience• Think about one core demographic that will want to use your website – If you review page 2 of the Assignment 1specifications and also last week’s final lab exercise, it should be clear that the core demographic is the potentialemployer, contractor, or business partner that is interested in your skills for your chosen career. They will want to viewyour website as an easy to access repository of information about yourself, an online portfolio or résumé.• Now discuss this type of user and their demographics – Age, Gender must be discussed. Consider discussingat least 2 more from Education Level, Interests, Background, Culture, Language, Employment Status, and Location.o When discussing demographics use online resources as references – for example:o If a student was to write about their target audience primarily being Independent Games Developers (asthey want to be a Games Programmer in a small game studio), they may decide on these demographicsto discuss in a lot more detail:o Age: between 25 to 40; Gender: Males; Education: Undergraduate degree; Location: Melbourne,Language: English, and so on…o But without proof, this information may be correct or simply made up! You need to back up these (andany other) factual data in your assignment with in-text citations and a list of APA references to thesource of this information. This way you can be sure your website has the correct target demographics.For all assignment work you should make the most of your tutors while they are present in the lab class with you, andshow them your progress as well as see if they have any suggestions. Remember they cannot do the work for you, butthey can give you advice or refer you to online material that could help you.