Tutorial 5

12 Pages
Unlock Document

Communication, Culture and Technology
E Littlejohn

Tutorial 5 CCT260 Web Culture and Design Meta tags Lists Tables and Rows Professor Littlejohn Fall 2011Overview of Tutorial 5Tutorial 5 Terminology overview of meta tags bullet lists unordered lists ordered lists definitions lists nesting styles ordered styles tables rows cells caption header footer and body use tables for data only 5 minutesIn Class Assignment 45 minutesMake a new web page Go back to lab one if you have forgotten howAdd the followingPart 1 add meta tags to the top of your page following the instructions Part 2 A numbered list of things youd like to learn in the following labs Bulletpoint list of things you are having issues with A simple table showing the Olympic metal results so far httpolympicsthestarcom just up to Canada Who cares about the rest Use past knowledge layout images fonts as best you can Tutorial 5 Part 1 Overview Adding meta TagsMeta tags add important supplementary information to the head of an HTML document by using a meta tag Web browsers do not display any text from the meta tag but the information is still available to visitors who view the source code and to Web browsers and search bots The tags namemetadescribes the information that the tag contains metainformation or information about informationThe most two common attributes for the meta tag are name and content Two commonly used metatags metanames are keywords and description When you use a metatag with the keywords name you can add a list of descriptive keywords separated by commas with the content attribute When using the description meta name you can write a brief sentence that describes the web site You can make this description up to 200 characters long or approximately 25 wordsThis will be displayed by the search engine as the description of your site so it is very important to write clearly Several years ago search bots used metatag keywords and description to index sites and determine their ranking in a searchNow search bots commonly cross reference the content of the metatag with the web sites content to verify the meta tags and include information on other data to determine Web page ranking such as the number of sites that link to your web page People were rigging their meta tags to attract attention they did not deserve so search engines decided to work around this by verifying the web sites content with the meta tagsTutorial 5 Part I Meta Tag Instructions Overview This is a chance to write some personal information designed to show off your skills to an employer and include it as part of your meta tags for your web site Have fun thinking Tutorial 5 CCT260 Web Culture and Design Meta tags Lists Tables and Rows 1 Professor Littlejohn Fall 2011 carefully about how you may want to present yourself to a future employer or client and include this information by placing it in the following meta tag keywords and content1 Create a web page document into a new TextEdit file It should contain all the necessary parts of a proper HTML page the DTD html head title and body tags 2 Name the file yourlastnamemetatag and save it as an html and txt file to allow your to revise it 3 Save one version as an html file to see in the browser and one version as a txt file so that you can add the Guest Book and Form part of the tutorial to finish the file4 Add a metatag with the name attribute set to keywords and content attribute set equal to a number of keywords 5 Add a second metatag with the name attribute set equal to description and the content attribute set equal to a brief description of your site 6 Add a third metatag with the name attribute set equal to author and the content attribute set equal to information about you 7 Save the document from TextEdit with an html extension8 Open the document in Safari The browser will display the page although anything within the meta tags remains hidden 9 View its source code in another window to see what is hidden and what is visible10 Analyze the code from the following page given your new information about meta tags and try to guess the function of code you do not recognize 11 Do each step of the Guest Book and Form using your txt file for the second part of the tutorial Example of Einsteins Meta TagsNote The code ROBOTS refers to letting searchbots see the information If you do not want your web page to be accessed by search engines you can use meta nameROBOTS contentNOINDEX DOCTYPE html PUBLIC W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1transitionaldtd html head titleEinsteinAmerican Museum of Natural Historytitle link hrefexhibitionseinsteincommoncsseinsteincss relstylesheet typetextcss meta nameROBOTS contentALL meta HTTPEQUIVContentLanguage contentenus EINSTEIN SPECIFIC meta TAGS meta nameCopyright contentEinsteinAmerican Museum of Natural History meta nameAuthor contentAmerican Museum of Natural HistorymetanameDESCRIPTION contentEinstein The most comprehensive presentation ever mounted on the life and theories of the most famous scientist of the 20th century and arguably the most brilliant scientific mind of all timemeta nameKEYWORDS contentAmerican Museum Natural History New York exhibition einstein einstein exhibition light time energy gravity gravitational lensing relativity theory of relativity general theory of relativity special theory of relativity photoelectric effect emc2 light clock mileva maric elsa lowenthal fusion fission atomic bomb hydrogen bomb atomic age nuclear age nuclear energy nuclear arms race cold war nuclear disarmament spacetime black hole black holes marcel grossmann manhattan project hiroshima nagasaki league of nations united nations civil rights senator joseph mccarthy mccarthyism abba eban hebrew university quantum theory niels bohr max planck einsteinbohr debate grand unified theory skirball cultural center head Tutorial 5 CCT260 Web Culture and Design Meta tags Lists Tables and Rows 2 Professor Littlejohn Fall 2011
More Less

Related notes for CCT260H5

Log In


Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.