Class Notes (976,017)
CA (575,241)
UTM (26,067)
CCT (1,020)
Lecture

Tutorial 5

, Winter 2011
12 pages119 viewsWinter

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

This preview shows pages 1-3. 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

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

!
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>
You're Reading a Preview

Unlock to view full version

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

!
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!
You're Reading a Preview

Unlock to view full version

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

You're Reading a Preview

Unlock to view full version

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

You're Reading a Preview

Unlock to view full version

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

You're Reading a Preview

Unlock to view full version


Loved by over 2.2 million students

Over 90% improved by at least one letter grade.