ECA 228 Internet/Intranet Design I Meta Tags & Directories

ECA 228 Internet/Intranet Design I 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 tags keywords keywords: typed in by visitors to a search engine use keywords in your title, headers, and metatags separate keywords with a comma

ECA 228 Internet/Intranet Design I 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 tags keywords cont …

ECA 228 Internet/Intranet Design I tags description 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 tags description cont …

ECA 228 Internet/Intranet Design I tags author designate author of page

ECA 228 Internet/Intranet Design I tags copyright designate copyright year and name of owner

ECA 228 Internet/Intranet Design I tags date designate date and time a file was created

ECA 228 Internet/Intranet Design I tags generator an HTML editor may add its own generator metatag

ECA 228 Internet/Intranet Design I tags robots 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 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 tags refresh cont … 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 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 Turkish uses ISO 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 tags encoding cont … 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 – – 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 dogs.html halle.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 halle.jpg

ECA 228 Internet/Intranet Design I Relative Links cont … dogs.html 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 halle.jpgmyStyle.css

ECA 228 Internet/Intranet Design I Relative Links cont … dogs.htm halle.jpg myStyle.css birds.htmzuzu.jpg