ECA 228 Internet/Intranet Design I Meta Tags & Directories
ECA 228 Internet/Intranet Design I
Meta Tags & Directories
ECA 228 Internet/Intranet Design I
<meta> tags
used to add information about your page, to your page
much of the information contained in your metatags will be used by search engines
some search engines will not index your site unless it contains metatags
ECA 228 Internet/Intranet Design I
<meta> tags keywords
keywords: typed in by visitors to a search engine
use keywords in your title, headers, and metatags
separate keywords with a comma
< meta name=‘ keywords ’ content=‘ keywords to assist search engines ’ >
ECA 228 Internet/Intranet Design I
<meta> tags keywords cont …
use general and specific words to describe your site
include misspelled words images used as headers will not be read
by search engines do not spam the search engines
ECA 228 Internet/Intranet Design I
<meta> tags keywords cont …
<meta name="keywords" content=“ ballet, canton, Canton, OH, Ohio, cantonballet, dance, pointe, pointe shoes, pilates, company, school of dance, dance school, performance, tutu, jazz shoes, ballet slippers, plie, children, education, festival, adjudication, Regional Dance America, RDA, arts, nutcracker, gala">
ECA 228 Internet/Intranet Design I
<meta> tags description
< meta name=‘ description ’ content=‘ summary to appear in search engines ’ >
concise sentence or two that describes your site
often appears in the results of a search engine
don’t be wordy
ECA 228 Internet/Intranet Design I
<meta> tags description cont …
<meta name="description" content=“ Canton Ballet, Ohio, US, offers classical ballet training, and a pre-professional company. ">
ECA 228 Internet/Intranet Design I
<meta> tags author
< meta name=‘ author ’ content=‘ name of author ’ >
designate author of page
< meta name=‘ author ’ content=‘ Michael Barath ’ >
ECA 228 Internet/Intranet Design I
<meta> tags copyright
< meta name=‘copyright’ content=‘year & name’ >
designate copyright year and name of owner
< meta name=‘copyright’ content=‘ 2003 Canton Ballet, Just Us Two ’ >
ECA 228 Internet/Intranet Design I
<meta> tags date
< meta name=‘ date ’ content=‘ date & time ’ >
designate date and time a file was created
< meta name=‘date’ content=‘ 31 October, 2002 13:35:00 GMT ’ >
ECA 228 Internet/Intranet Design I
<meta> tags generator
< meta name=‘ generator ’ content=‘ software program ’ >
an HTML editor may add its own generator metatag
< meta name=‘ generator ’ content= ‘ Macromedia Dreamweaver v. 4 ’ >
ECA 228 Internet/Intranet Design I
<meta> tags robots
< meta name=‘ robots ’ content=‘ noindex, nofollow ’ >
robots are small programs which travel the net indexing web sites
robots metatag will keep page from being indexed
no guarantees
ECA 228 Internet/Intranet Design I
<meta> tags refresh
used to refresh a page automatically after a certain number of seconds
can redirect automatically to a different page content contains two parts
– number of seconds which pass before the page is refreshed
– url to which the user is redirected
notice placement of quotes
ECA 228 Internet/Intranet Design I
<meta> tags refresh cont …
<meta http-equiv=”refresh” content=”number url=nextPage.htm” >
note placement of quotes
use with caution to avoid problems with search engines, set time to 10 seconds or more
ECA 228 Internet/Intranet Design I
<meta> tags encoding
HTML and XHTML are designed to support every character and symbol for every language in the world
when designing a document keep in mind:– the file’s encoding, the way a computer translates
characters in the file into symbols seen on the screen
– the way a browser supports encoding– the fonts available to a visitor
ECA 228 Internet/Intranet Design I
encoding
computers translate letters, numbers, and symbols into bits (zeros and ones) using a system called character encoding
The most basic encoding system is called ASCII– contains 128 characters
English upper and lower case letters numbers some common symbols
ECA 228 Internet/Intranet Design I
encoding cont …
ASCII is insufficient for non-English characters non-English encoding systems use a larger
system containing 256 characters– to maintain compatibility, first 128 are ASCII– characters 129 through 256 contain characters
intrinsic to a specific language Greek uses ISO-8859-7 Turkish uses ISO-8859-9 problems occur if you want to write Turkish and Greek
together
ECA 228 Internet/Intranet Design I
encoding cont …
Unicode: a more definitive solution– universal system for encoding all of the characters
in all of the languages in the world
Unicode assigns each character a unique code The form of Unicode used by (X)HTML is
called UTF-8– encodes ASCII as the first 128 characters
older browsers not supporting UTF-8 will still correctly interpret the English portion of the page
ECA 228 Internet/Intranet Design I
encoding cont …
as an (X)HTML designer you may need to:– choose the proper encoding which encompasses all
the characters in your document– declare the encoding in your HTML– specify the encoding when you save the file
ECA 228 Internet/Intranet Design I
encoding cont …
if you do not explicitly choose an encoding system, most likely your text or WYSIWYG editor will do it for you
the choice is probably based upon your operating system– Windows
windows-1252 or ANSI
– Mac x-mac-roman
ECA 228 Internet/Intranet Design I
encoding cont …
to specify an encoding when you save a file, view the Help section of your favorite editor– Dreamweaver: Page Properties– TextPad: Save As dialog box
to declare a particular encoding in your HTML use a metatag– the declared encoding must match the encoding
with which you saved the page
ECA 228 Internet/Intranet Design I
<meta> tags encoding cont …
<meta http-equiv=‘ content-type’ content = ‘ text/html; charset = windows-1252, UTF-8 ’ >
note placement of quotes and semicolon
ECA 228 Internet/Intranet Design I
encoding cont …
without the encoding declared in the HTML, validators may give a warning
for more information visit– www.unicode.org– www.alanwood.net/unicode/
to view extra characters, visitors must have browser which supports Unicode– may be asked to download appropriate language kit
ECA 228 Internet/Intranet Design I
encoding cont …
to add a few characters from outside the encoding, use character references
1. regular base 10 number
2. hexadecimal number
3. unique word
é1. é2. é3. é
ECA 228 Internet/Intranet Design I
Relative Links
to create a relative link to a .jpg image located in the same folder as the HTML file
< img src=‘halle.jpg’ />
dogs.htmlhalle.jpg
ECA 228 Internet/Intranet Design I
Relative Links cont …
to create a relative link to a .jpg image located in a subfolder named img
dogs.html< img src=‘img/halle.jpg’ />
halle.jpg
ECA 228 Internet/Intranet Design I
Relative Links cont …
dogs.html
< img src=‘../img/halle.jpg’ />
halle.jpgmyStyle.css
to link from one subfolder to another
ECA 228 Internet/Intranet Design I
Relative Links cont …
to link to an external stylesheet
dogs.html
<link rel = “stylesheet” type = “text/css” href = “../style/myStyle.css” />
halle.jpgmyStyle.css
ECA 228 Internet/Intranet Design I
Relative Links cont …
dogs.htm
<link rel = “stylesheet” type = “text/css” href = “../../style/myStyle.css” />< img src=‘../../img/dogs/halle.jpg’ />
halle.jpg
myStyle.css
birds.htm zuzu.jpg