Lecture Number Six

1

• Lecture Number Six
• Meta tags
• and
• Fine Tuning basic html

2
Meta Tags

• Coded in the HEAD section
• Used by some search engines
• ________ affect how your page appears in a browser

3
Advantages of Meta Tags

• Give you control over how youre presented
• Can improve your ranking with some search
  engines

4
NAME

• ltMETA NAME"description" content"10-15 word
  description of your site read by some search
  engines"gt

5
Why use NAME?

• Lets you control what search engines
• put after your url on the list returned to
• a searcher.
• If you dont have this, search engines will
  copy the first sentences of your page instead
  can be misleading.

6
A Name example

• meta name"description" content"Your source for
  used, rare and out-of-print books. Find classic
  collectibles, rare signed editions, used
  textbooks, and inexpensive bestsellers in our 45
  million books."gt
• (www.abebooks.com)

7
Keywords

• ltMETA NAME"keywords" content keywords of your
  site separated by commas"gt
• A set of extra keywords for this page.

8
Why use keywords?

• Search engines normally index every word, but
• 1. your pages text may not have words that
  someone might use to look for you
• 2. people may frequently misspell a likely search
  word, so you can combat this by putting the
  misspelling(s) in your keyword list.

9
A keywords example

• ltMETA name"keywords" content"django haskins,
  the regulars, laying low and inbetween,
  billboard, continental drift, mod music, modmusic
  records, scout, mp3, rock, pop, indie, aaa, elvis
  costello, tom petty, replacements, beatles,
  dylan, cole porter, nick drake, tom waits,
  gershwin, songwriter, new york city, nyc, music,
  cbgb's gallery, mercury lounge, cmj, nxne, byron
  isaacs, russ meissner, chris moore, heejin kang,
  bill phifer, level best management, alyosha
  records, yale, earl's comfort station, 12 bar
  club, kashmir klub, spektrum, steal this movie,
  folding stars, mader, just a matter of time,
  brooklyn loft, indie band search,
  overeasysmokemachine, chapel hill, north
  carolina, danielle howle, dan bryk, robert
  sledge, ben folds five, carrboro, go room 4, the
  fez under time cafe, handpicked records, jump
  little children, snuzz, international orange,
  international, orange, oarnge, ben, folds, ben
  folds"gt
• www.djangohaskins.c
  om

10
Some HTML Tags and Their Defaults

• default What will happen in the absence of
  instructions to the contrary from you
  

11
ltHRgt (Puts a line
across the screen)

• 2 sub-elements
• WIDTH and SIZE

12
Width default is 100

• How much of the browser window
• expressed in pixels or percentages
• pixel picture element
• (about .5 million on a screen
• c. 72 to the inch (depending on resolution)

13
Size default is 2

• Refers to thickness of line
• expressed in pixels

14
ALIGN default is center

• possibilities left,right,center
• An example of the HR tag with WIDTH, SIZE, ALIGN
  attributes
• ltHR WIDTH25 SIZE1 ALIGNcentergt

15
NOSHADE

• HR puts a shadow under the line
• to suppress it, use ____________

16
ltPgt (new paragraph)

• skips a line
• but doesnt indent
• Two ____ tags equal one ltPgt tag
• (because basically ____ means carriage return)
• A lt/Pgt closing tag may be used when youre
  overriding defaults

17
ltPgt

• ALIGN
• left right center aligns text
• ltP ALIGNcentergtlt/Pgt
• Every line will be centered until you close
  the tag

18
ltBODYgt

• Some color options
• bgcolor
• text
• link
• alink
• vlink

19
BGCOLOR

• background color
• Can be named or hexadecimal
• (details later)
• Defaults to white

20
Text

• defaults to black

21
Hints for text to be read on screen

• Assume people are skimming
• Break up text into small paragraphs
• - Use emphasis (like B) to stress main points

22
Hints for text to be printed

• avoid light text on dark ___________
• be sure text color contrasts
• if text is white, nothing may be printed
  because some systems dont print background
• if in doubt, test print the page

23
An Example

• http//www.jimheynen.com/

24
Links

• LINK
• the color your links will be
• ALINK
• the color a just-clicked link
  will be
• VLINK
• the color a visited link will be
  
• Defaults for all the above are
  browser-dependent.

25
Printing Text for Emphasis

• ltBgt lt/Bgt
• ltEM ltEMgt
• ltIgt lt/Igt
• ltBLINKgt .lt/BLINKgt

26
Fonts

• FACE
• two families
• This is a serif font.
• This is a sans serif font.

27
More about Font Faces

• Specify Alternatives
• FACEGeneva Helvetica Monaco

28
Other Font Options

• Size
• color

29
A Font Example with non-font Syntax Errors

• ltHEADgt
• ltTITLEgt
• ltFONT SIZE3 FACEhelvetica COLORbluegt
• How to Get Happy
• lt/FONTgt
• lt/TITLEgt
• ltBODYgt
• ltFONT FACEhelvetica COLORblackgt
• Adopt a puppy. Buy it a bright pink lead.
  Name it Tiffany.
• lt/FONTgt
• lt/BODYgt