Basic HTML

1
Basic HTML
Part Three 1) Frames
2) Meta Elements
Slides prepared by K. Clark
Modification Date October, 2007
2
Frames
3
FRAMES 1

• A Method of dividing the displayed screen into
  separate windows
• Each window can be used independently of the
  others
• Facilitates web page design
• Some older browsers can not use

Slides prepared by K. Clark
4
FRAMES 2
The ltframeset gt lt/framesetgt container REPLACES
the ltbodygt container. It tells the browser
that the page is to be divided into separate
windows, the definition of which is determined by
ltframesgt containers inside the ltframesetgt.
Slides prepared by K. Clark
5
FRAMES 3
The ltframe gt container inside the
ltframesetgt Actually defines the page division
into smaller windows. ltnoframesgt is used to
provide for browsers which may not recognize
ltframesgt
Slides prepared by K. Clark
6
FRAMES 4 - Example

• The following divides screen into two horizontal
  windows, the top one being 15 of the height of
  the screen. Note that there is NO ltbodygt
  container.
• lthtmlgt
• ltheadgt other stuff lt/headgt
• ltframeset rows 15, gt
• ltframe src top.htm /gt
• ltframe src bottom.htm /gt
• lt/framesetgt
• lt/htmlgt

7
FRAMES 5 - Example

• ltframesetgt containers are nested. Each one
  defines the division of the one in which it is
  located.
• ltframeset rows gt divides its window into
  smaller horizontal windows.
• ltframeset cols gt divides its window into
  smaller vertical windows.
• Combining these definitions allows the main
  window to be divided into a virtually endless
  number of patterns.

8
FRAMES 6 - Example

• The rows and cols attributes
• defines the number of divisions of the window
• defines the size of these divisions
• may use to indicate remaining space
• may define by percent, pixels, or size

9
FRAMES 7- Example

• ltframeset rows 25, 25, gt
• Divides the window it is located in into three
  smaller horizontal windows, respectively taking
  ¼, ¼, and ½ the height of that window.

10
FRAMES 8- Example

• ltframeset cols 40, 100, 100, gt
• Divides the window it is located in into four
  smaller vertical windows, respectively taking 40
  pixels, 100 pixels, 100 pixels, and whatever is
  left of the width of that window.

11
FRAMES 9 - ltframesgt

• The code
• ltframe name thisframe src a_file.htmgt
• Defines a frame inside a ltframesetgt, labels it
  with the name thisframe, for reference, and
  loads it with the default file a_file.htm
• This construct is often used for initializing a
  frames based page when it is first loaded.

12
FRAMES 10 - ltframesgt

• ltframeset cols 20,20,gt
• ltframe src file_one.htmgt
• ltframe src file_two.htmgt
• ltframe src big_picture.jpggt
• lt/framesetgt
• Divides the window into three vertical sections
  (panes).
• Places files file_one.htm and file_two.htm
  into the first two panes
  respectively.
• Loads the image file big_picture.jpg into the
  third pane.

13
FRAMES 11 - lttargetgt

• A hyper-text link like lthref gt can be used to
  load a file into any named frame pane.
• lta href the_file.htm
• target pane_name gt Anchor
  textlt/agt
• Displays the anchor text Anchor text
• When Anchor text is clicked, causes the file
  the_file.htm to load into the pane named
  pane_name in the divided display.
• Useful for creating menus.

14
FRAMES 12 - ltnoframesgt

• Some browsers, mostly older versions, do not
  recognize the ltframesetgt container. The
  container ltnoframesgt deals with this problem.
• These problem browsers will do nothing with
  ltframesetgt and ltframegt containers, while
  ltframesetgt compatible browsers will ignore
  everything between ltnoframesgt and lt/noframesgt
• So ..

15
FRAMES 13 - ltnoframegt

• The construct
• lt/ framesetgt End of a prior definition
• ltnoframesgt Start of alternative code
• ltbodygt Recognized by browser
• Standard html code, as appropriate
• lt/bodygt
• lt/noframesgt
• lt/framesetgt Outside nested closing tag.
• Handles this situation. The code inside ltbodygt
  should direct the user to a standard html page.

16
FRAMES 14 - ltmenusgt

• A list of hypertext links can be used to create a
  menu with the menu in one frame while the
  contents are loaded into others.
• lt a href info1.htm target frame1gt 1st
  Option ltagt
• lt a href info2.htm target frame1gt 2st
  Option ltagt
• lt a href info3.htm target frame1gt 3st
  Option ltagt
• lt a href data1.htm target frame2gt 4st
  Option ltagt
• lt a href data2.htm target frame2gt 5st
  Option ltagt
• Above is general approach.

17
The Future of Frames

• Frames provide a convenient way of dividing a
  display in html, but
• May not work well with all browsers.
• May present problems to search engines.
• The current growing trend is to use CSS
  (stylesheets) instead of frames for layout.

18
META ELEMENTS
19
Meta Elements - Introduction
The (optional) element lt meta . something ..
/gt provides information to browsers and/or search
engines about the document. These MUST include
either name or http-equiv as an attribute,
but not both. ie lt meta name .. /gt or
lt meta http-equiv .. /gt
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
20
Meta Elements Introduction 2
Properly belong in the head section of
document. ltheadgt lttitlegt .. lt/titlegt ltmeta
nameetc .. /gt ltmeta http-equivetc..
/gt lt/headgt Some older browsers may not recognize
all meta elements.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
21
Meta Elements Examples 1
ltmeta namekeywords contentkey 1, key 2
/gt For Search Engines defines key words to be
used in indexing the document. Many key words may
be defined. Note words appearing in the list
should each appear in the first page of the
document. Some search engines will penalize the
page if this is not the case.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
22
Meta Elements - Examples 2
ltmeta http-equivexpires contentTue, 28 Oct
2003 000000 GMT /gt Browser should not cache
document after the expiry date. ltmeta
http-equivpragma content no-cache /gt Has
a similar effect, but is not date limited.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
23
Meta Elements - Examples 3
You can force a redirection of a web-page ltmeta
http-equivrefresh content 30 URL
http//somesite.ca/page.htm /gt Waits 30 seconds
then branches to the indicated URL If the URL is
omitted, the current page is reloaded after the
specified time. This can be useful for pages with
dynamically changing content.
Slides prepared by K. Clark
24
Meta Elements - Examples 4
ltmeta name Set-cookie contentwhatever
information is to be in the cookie! /gt This
causes the information specified to be included
in the cookie on the local machine. A dynamically
created (scripted) web page could include the
user name or ID number, for example.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
25
Meta Elements - Examples 5
ltmeta namedescription contentThis is the
ITEC 1010.30 B Website! /gt Provides actual text
for some search engines to display in their
search results.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
26
Meta Elements - Examples 6
ltmeta name robots contentnoindex,
nofollow /gt Tells Search Engines not to index
(store) the page (noindex) and/or not to follow
links in the page (nofollow). This is useful for
pages which the user does not want to appear on
search engine results, such as private or test
pages.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
27
Meta Elements - Examples 7
ltmeta nameauthor contentKeiron Clark
/gt As it appears, identifies the author of the
page. ltmeta namegenerator content Whatever
/gt Identifies the html (etc) generator (ie
FrontPage) which was used in creating the
document.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
28
Meta Elements - Summary
There are a range of these elements to identify
html documents, identify their source
information, and instruct search engines handling
the page. The previous pages mention some of the
more commonly used ones. Further information
should be available in reference books or from
the w3 consortium website.
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark
29

• This set of PowerPoint (trade name owned by
  Microsoft) slides has been prepared by K. Clark
  for his personal use and the use of his students.
  Intellectual rights to these slides are retained.
  These slides are NOT the property of York
  University.
• June, 2003. Revision October, 2003 October, 2007.

Slides prepared by K. Clark
30
End of Basic HTML - Three
Slides prepared by K. Clark
Slides prepared by K. Clark
Slides prepared by K. Clark