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. &#233;2. &#x00e9;3. &eacute;

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