Class Notes (904,692)
CA (538,298)
UTM (24,811)
CCT (976)
CCT260H5 (39)
Lecture

Tutorial 5

12 Pages
119 Views

Department
Communication, Culture and Technology
Course Code
CCT260H5
Professor
E Littlejohn

This preview shows pages 1-3. Sign up to view the full 12 pages of the document.
!
Tutorial #5 CCT260 Web Culture and Design: Meta tags, Lists, Tables and Rows
Professor Littlejohn Fall 2011
!
1!
Tutorial #5 CCT260 Web Culture and Design: Meta tags, Lists, Tables and Rows
Professor Littlejohn Fall 2011
Overview of Tutorial 5:
Tutorial #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 minutes
In Class Assignment: 45 minutes
Make a new web page
–Go back to lab one if you have forgotten how!
•Add the following:
Part 1: add meta tags to the top of your page following the instructions
Part 2: –A numbered list of things you’d like to learn in the following labs
Bullet-point list of things you are having issues with
–A simple table showing the Olympic metal results so far: http://olympics.thestar.com/ (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> Tags
Meta 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 tag’s name, < meta />, describes the information that the tag contains: meta-
information, or information about information.
The most two common attributes for the <meta />tag are name and content. Two commonly
used <meta /> tags <meta /> names are “keywords” and “description”. When you use a
<meta /> tag 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 words.
This 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 <meta /> tag keywords and description to index sites
and determine their ranking in a search. Now search bots commonly cross reference the
content of the <meta /> tag with the web site’s 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 site’s content
with the meta tags.)
Tutorial #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
Professor Littlejohn Fall 2011
!
2!
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 content.
1. 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 yourlastname_metatag, 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 file.
4. Add a <meta /> tag with the name attribute set to “keywords” and content attribute
set equal to a number of keywords.
5. Add a second <meta /> tag 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 <meta /> tag 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 extension.
8. 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 visible.
10. 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 Einstein’s Meta Tags
Note: 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
name="ROBOTS" content="NOINDEX">.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Einstein | American Museum of Natural History</title>
<link href="/exhibitions/einstein/common/css/einstein.css" rel="stylesheet"
type="text/css">
<meta name="ROBOTS" content="ALL">
<meta HTTP-EQUIV="Content-Language" content="en-us">
<!-- EINSTEIN SPECIFIC meta TAGS -->
<meta name="Copyright" content="Einstein - American Museum of Natural History">
<meta name="Author" content="American Museum of Natural History">
<meta name="DESCRIPTION" content="Einstein: 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 time.">
<meta name="KEYWORDS" content="American 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, e=mc2, 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, space-time, 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, einstein-bohr debate, grand
unified theory, skirball cultural center">
</head>
!
Tutorial #5 CCT260 Web Culture and Design: Meta tags, Lists, Tables and Rows
Professor Littlejohn Fall 2011
!
3!
<body>
<p>I am studying HTML in Web Culture, and this is a tutorial on meta tags using
Einstein’s home page.</p>
</body>
</html>
In Conclusion:
The important meta tags are as follows:
Meta Robots: This tag enjoys full support, but you only need it if you DO NOT want
your pages indexed.
Meta Description: This tag enjoys much support, and it is well worth using. It is the
description that shows up on Google as the sentence above the URL link.
Meta Keywords: This tag is only supported by some major crawlers and helps to
implement for searchbots, but is not used as much as much by searchbots as Meta
Description. Google checks that the words used in the meta keywords are also used in
the text of the web pages to valnameate the meta keywords.
Meta Everything Else: Any other meta tag you see is ignored by the major crawlers,
though they may be used by specialized search engines.
Tutorial #5 Part 2: Creating Table and Lists
Part 2: –A numbered list of things you’d like to learn in the following labs
Bullet-point list of things you are having issues with
–A simple table showing the Olympic metal results so far: http://olympics.thestar.com/ (just
up to Canada.. Who cares about the rest! )
•Use past knowledge (layout, images, fonts) as best you can!

Loved by over 2.2 million students

Over 90% improved by at least one letter grade.

Leah — University of Toronto

OneClass has been such a huge help in my studies at UofT especially since I am a transfer student. OneClass is the study buddy I never had before and definitely gives me the extra push to get from a B to an A!

Leah — University of Toronto
Saarim — University of Michigan

Balancing social life With academics can be difficult, that is why I'm so glad that OneClass is out there where I can find the top notes for all of my classes. Now I can be the all-star student I want to be.

Saarim — University of Michigan
Jenna — University of Wisconsin

As a college student living on a college budget, I love how easy it is to earn gift cards just by submitting my notes.

Jenna — University of Wisconsin
Anne — University of California

OneClass has allowed me to catch up with my most difficult course! #lifesaver

Anne — University of California
Description
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
Unlock Document


Only pages 1-3 are available for preview. Some parts have been intentionally blurred.

Unlock Document
You're Reading a Preview

Unlock to view full version

Unlock Document

Log In


OR

Don't have an account?

Join OneClass

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

Sign up

Join to view


OR

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.


Submit