Introduction to HTML

1
Introduction to HTML

• HTML Hypertext Markup Language
• HTML is a very weak language (basically nil).
• Not designed to do computation.
• HTML is designed specifically to specify how web
  pages are to be displayed.
• HTML requires a program, called a browser, to
  display the web page
• Netscape and Internet Explorer are browsers.
• Each browser will display web pages differently

2
HTML can Only Suggest Displays

• Browsers differ
• Netscape follows the HTML standard pretty
  closely.
• MS IE allows more than the HTML standard
• People Differ
• Windows are regularly resized by users, so dont
  depend on a particular size.
• Backgrounds may be turned off or preset to a
  users preference.
• Images may be turned off.
• Machines Differ
• Screen sizes vary.
• Resolution can vary.
• Colors (hue, brightness, contrast) vary.

3
Structure of HTML

• HTML uses tags to suggest how to display items on
  a page
• Learning HTML is really about learning how to use
  the tags.
• Makes it easy to do useful pages quickly.
• Most tags come in pairs
• lttaggt starts the action
• lt/taggt stops the action
• Example ltHTMLgt begins all html documents and
  lt/HTMLgt ends them
• Example ltcentergtTitlelt/centergt will center the
  word Title on the page.
• Some tags do not come in pairs
• ltbrgt is a line break, causing the display to
  continue on a new line
• lthrgt inserts a horizontal rule (line) across the
  page.

4
Structure of HTML

• Anything that is not specified by tags is
  displayed per the browsers preference
• Adding extra spaces in between words wont have
  any effect on the page.
• Putting things on a new line wont have any
  effect on the displayed web page (the ltBRgt tag
  does that).
• Example
• Hello, World. and Hello, World.
  will look the same.
• Hello, World. and Hello,
• World.
  will both be shown on the same line.

5
Structure of HTML

• There are 4 tags required in any HTML document.
• ltHTMLgtlt/HTMLgt Tells the browser where the web
  page starts and stops
• ltTITLEgtlt/TITLEgt Tells the browser what title to
  display for this page.
• ltHEADgtlt/HEADgt Tells the browser where the
  informational portion of the web page starts and
  stops
• ltBODYgtlt/BODYgt Tells the browser where the
  displayed portion of the web page starts and
  stops. No ltFRAMESETgt required.
• ltFRAMESETgtlt/FRAMESETgt Tells the browser that you
  are about to define a series of frames dividing
  up the viewing area. No ltBODYgt.

6
Structure of HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgtExample of HTML structurelt/TITLEgt
• lt/HEADgt
• ltBODYgt or ltFRAMESETgt
• lt/BODYgt or lt/FRAMESETgt
• lt/HTMLgt

Information hidden from the viewer.
Visible web page.
7
HTML Structure Head

• The head of the document contains information
  useful for the creator of the document and the
  web site.
• Author list, intended purpose, revision history,
  web tools used, and whatever is important to the
  owner of the web page.
• ltHEADgt
• ltMETA NAMEkeyword
• CONTENTtype of informationgt
• ltMETA NAMEAuthor
• CONTENTKeith Garfieldgt
• lt!-- This is a comment. The browser ignores the
  information inside the comment tag -- gt
• lt/ HEADgt

8
HTML Structure Body

• The body of the document contains the visible
  portion of the web page.
• Content, formatting codes, hyperlinks.
• ltBODYgt
• The body contains the information you want to
  display.ltBRgt
• The most common tags are the line break ltBRgt
• The paragraph break ltPgt
• And references to other items like images or web
  pagesltbrgt
• lta hrefsomeother.htmlgtA link requires an
  anchorlt/agt
• ltimg hrefmypicture.jpggt Images are referred
  to like this.
• lt! Comments are allowed and useful in the body.
  -- gt
• lt/BODYgt

9
The ltBODYgt Tag

• Sets default values that affect the entire page.
• ltBODYgt ( You can use stylesheets for this.)
• ALINK SETS THE COLOR FOR AN ACTIVE LINK.
• BACKGROUND ALLOWS YOU TO USE AN IMAGE FOR THE
  BACKGROUND.
• BGCOLOR SETS THE COLOR OF THE BACKGROUND.
• BGPROPERTIES FIXES THE BACKGROUND IMAGE (MS IE
  ONLY).
• CLASS APPLIES A NAMED PRE-DEFINED STYLE TO THE
  PAGE.
• LEFTMARGIN LETS YOU INDENT THE LEFT MARGIN (MS
  IE ONLY).
• LINK SETS THE COLOR OF A LINK THATHAS NOT BEEN
  FOLLOWED YET.
• ONBLUR A JAVASCRIPT EVENT HANDLER.
• ONFOCUS A JAVASCRIPT EVENT HANDLER.
• ONLOAD A JAVASCRIPT EVNT HANDLER.
• STYLE CREATES AN INLINE STYLE FOR THE DOCUMENT
• TEXT SETS THE DEFAULT COLOR FOR TEXT.
• TOPMARGIN LETS YOU SET A TOP MARGIN (MS IE
  ONLY).
• VLINK SETS THE COLOR OF A LINK THAT HAS BEEN
  FOLLOWED.
• Ex ltBODY BACKGROUND"images/back.gif"gt

10
Some Common Tags

• ltBRgt - Causes a line break to occur in the text.
• ltHRgt - Causes a horizontal line to be drawn
  across the page.
• ltPgt - Causes a new paragraph to begin.
• ltCENTERgtlt/CENTERgt - Centers all objects on the
  screen.

11
The ltMETAgt Tag

• The META tag is used to provide information about
  the HTML page
• information about information is called
  meta-information, hence the name of the tag
• Resides in the Header of the document, and does
  not display anything.
• ltMETAgt
• NAME - supplies the name of the information being
  presented. The HTML standard does not define any
  standard names.
• CONTENT - supplies the content of the information
  being presented. Contents can be anything.
• Examples
• ltMETA NAMEDate CONTENT09/12/01 gt
• ltMETA NAMEDescription CONTENTMy CGS3175 home
  page gt
• ltMETA NAME"Keyword" CONTENT"HTML, browser,
  internet"gt

12
Hello, World!

• There is a particular, simple program called
  Hello, World! that many CS people use when
  first encountering a new language.
• Hello, World! prints the words Hello, World!
  on the screen.
• The idea is that if you can get this simple thing
  to work, then-
• Youve learned how to write, save, and run the
  program.
• The language is working on your computer.
• Your computer is working as expected.
• So Hello, World! acts as a simple check that
  things are working ok before you get involved in
  a complicated programming effort.

13
Hello, World!

• Not an assignment, but suggested you try this.
• Type this web page exactly as you see it here in
  a text editor, save it, and try to display it on
  a browser.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHello, Worldlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Hello, World!
• lt/BODYgt
• lt/HTMLgt

14
Headings

• Headings are standard fonts provided by the HTML
  standard.
• There are 7 levels of heading, ltH1gt through ltH7gt.
• ltH1gt is the largest font.
• Styles may be included in the heading tag, but
  will apply only to that specific use of the tag.
• You can define your own fonts/styles/colors for
  these headings in your stylesheet.
• ltBODYgt
• ltH1gt Largest heading lt/H1gt
• ltH3gt Normal font lt/H3gt
• ltH6gt Smallest heading lt/H6gt
• ltH1 ALIGNCENTER LEFT RIGHTgt
• lt/BODYgt

15
The ltFONTgt Tag

• Allows you to set font properties.
• ltFONTgt
• COLOR SETS COLOR OF THE FONT.
• FACE SETS FACE OF THE FONT (CASE SENSITIVE!).
• SIZE SETS THE FONT SIZE.
• OTHER FONT MANIPULATION TAGS
• ltBgtlt/Bgt STARTS AND STOPS BOLDFACE.
• ltIgtlt/Igt STARTS AND STOPS ITALICS.
• Heading tags set sizes predefined for your
  browser ltH2gtlt/H2gt, etc
• Ex ltFONT SIZE1gtltIgtHello, World!lt/Igtlt/FONTgt

16
Using Colors

• Colors on the web can be specified in two ways
• By text name (Ex Blue, Green, Silver, etc)
• By 6 digit RGB code (Ex 000000, FF88FF,
  243388)
• As a rule, do not use the text name for colors.
• Use the RGB format. It has the following
  properties
• Uses base-16 math, not base-10 like humans do
• Base-10 digits are 0, 1, 2,3,4,5,6,7,8,9
• Base-16 digits are 0,1,2,3,4,5,6,7,8,9A,B,C,D,E,F
• Uses a 6 digit code to specify how much red, how
  much green, and how much blue is present in the
  color. Each color gets two digits
• Color code rrggbb
• You can specify over 16 million unique colors
  using this format but there are only 216
  guaranteed to be web safe (see back flap of
  Wendey Lehnert class text)

17
The ltAgt (Anchor) Tag

• Allows virtual links to other pages/images/sites.
• ltA gt
• CLASS ALLOWS LINKS TO BE ASSOCIATED WITH A SET
  CLASS
• HREF SETS THE URL OF THE PAGE BEING LINKED TO.
• NAME ALLOWS YOU TO NAME SECTIONS OF YOUR
  DOCUMENT
• ONCLICK ALLOWS EVENTS TO OCCUR ON THE
  MOUSECLICK.
• ONMOUSEOUT ASSOCIATES EVENTS WITH THE MOUSE
  LEAVING.
• ONMOUSEOVER ALLOWS EVENTS TO OCCUR WHEN THE
  MOUSE POINTER IS ON THE IMAGE.
• REL ALLOWS USER TO SET RELATIONSHIP TO LINKED
  DOCUMENT
• REV ALLOWS USER TO SET RELATIONSHIP TO LINKED
  DOCUMENT
• STYLE ALLOWS LINK TO BE ASSOCIATED WITH A STYLE
• TARGET TELL WHERE TO DISPLAY THE LINKED PAGE
• TITLE LETS YOU SET A TITILE FOR THE LINKED
  DOCUMENT
• Ex ltA HREF"http//www.cs.ucf.edu/courses/cgs317
  5"gthomelt/agt

18
Named Anchors

• Named anchors are used to allow the viewer to
  move to specific polaces on a single web page.
• Useful for long web pages that scroll way off the
  screen, or useful for allowing viewers to
  navigate right to the start of sections of a
  page.
• To name a link use the following format ltA
  NAME"name"gtlt/agt
• To insert the link, use the normal notation but
  indicate the named link using the sign ltA
  HREF"name"gtclick here!lt/agt
• Example
• (This is a link to a quote on the bottom of the
  same page.)
• ltA HREF quotegt a quote lt/Agt
• lt! -- the body of the web page -- gt
• ltA NAMEquotegt Knowledge is power! lt/Agt

19
Unordered Lists - The ltULgt Tag

• Lists are useful for organizing information on
  your web pages. They can be ordered (like an
  outline) or unordered (bulletted)
• ltULgtlt/ULgt Starts and stops an unordered list.
• CLASS - allows you to set the style to a pre-set
  class (such as one set up in a style sheet)
• COMPACT - tells the browser to reduce spaces
  between list elements
• STYLE - allows you to set the style of the list
  elements
• TYPE - allows you to select what shape "bullet"
  will precede each item in the list
• ltLIgtlt/LIgt starts and stops a list element (the
  lt/ligt is often omitted).
• CLASS - allows you to set the style for this
  element only to a pre-set style class (such as
  one defined in a stylesheet)
• STYLE - allows you to set the style for this
  element only
• TYPE - allows you to select the "bullet" shape
  for this element only
• VALUE - allows you to change the value of the tag
  associated with the element (only valid for
  ordered lists)

20
Ordered Lists - The ltOLgt Tag

• Ordered lists allow you to list items in outline
  format, using sequential tags rather than
  "bullets."
• ltOLgtlt/OLgt
• CLASS - allows you to set the style to a pre-set
  class (such as one defined in a stylesheet)
• COMPACT - tells the browser to reduce the space
  between list elements
• START -allows you to specify the value of the
  first tag (works with TYPE)
• STYLE - allows you to set the style of the list
  elements
• TYPE - allows you to specify the type of tag to
  use (works with START)
• A Capital letters
• a lower case letters
• I Capital Roman numerals
• i lower case Roman numerals
• 1 common Arabic numerals

21
Definition Lists - The ltDLgt Tag

• Definition lists are used to provide a list of
  definitions in a preset manner.
• Each item of the list is composed of two parts
• The term specified by the ltDTgt tag
• The definition specified by the ltDDgt tag
• ltDLgt
• CLASS - allows you to set the style to a pre-set
  class
• COMPACT - tells the browser to reduce the space
  between list elements
• STYLE - allows you to set the style of the list
  elements
• ltDTgt
• CLASS - allows you to set the style to a pre-set
  class
• STYLE - allows you to set the style for this item
  only
• ltDDgt
• CLASS - allows you to set the style to a pre-set
  class
• STYLE - allows you to set the style for this item
  only