presents

1
presentsIntroduction to HTMLv2.0
2
Objectives

• This chapters objectives are to explain
• Basic HTML syntax and structure
• Common HTML tags
• Character entities
• URLs and how to use them with HTML
• The Anchor Tag
• The Image Tag
• The browsers role in rendering HTML

3
History of HTML

• HTML was created by Tim Berners-Lee at CERN, an
  international physics lab. Its original intent
  was to provide a simple way for physicists at
  CERN to share their research
• Early versions of HTML were oriented toward text
  formatting
• HTML is based on SGML a language developed in the
  1960s by a consortium of large corporations,
  notably IBM

4
How is HTML Used on the Web?

• HTML documents are stored in files with the
  extension htm or html
• They are placed on a web server where users can
  access them via their web browser programs by
  entering a URL which the web maps to the file

5
HTML Versions

• The latest version of HTML is 4.0.
• The most widely supported version is 3.2
• The official site for HTML documentation is the
  World Wide Web Consortium located at
  http//www.w3.org
• HTML 4.0 contains many useful new elements
• As of this writing (2006) nearly all browsers
  fully support HTML 3.2. Most, but not all,
  support 4.0. This causes certain issues that we
  will discuss later in the class

6
Using HTML with CSS

• As HTML has grown the limitations of its
  text-based orientation have become unacceptable
• Cascading Style Sheets extend the abilities of
  HTML so that web pages look more like books and
  magazines. Much of the syntax for CSS comes from
  the publishing world
• We will learn HTML first and CSS second

7
Using HTML with JavaScript

• JavaScript is a simple programming language that
  is tailored for use with web pages. It allows
  pages to be much more interactive
• JavaScript can manipulate both CSS and HTML
  information

8
DHTML Combining HTML, CSS and JavaScript

• Dynamic HTML (DHTML) is the combination of HTML,
  CSS and JavaScript
• DHTML allows web pages to behave in much the same
  way that a screen in a computer program would

9
HTML Plug Ins

• HTML allows for an open-ended inclusion of
  elements like Java applets, Flash programs and so
  on
• These can greatly extend the abilities of a web
  page
• Creating plug-ins is beyond the scope of this
  class
• We will examine how to include elements like
  applets and Flash programs

10
The Web Browser and HTML

• Most ordinary computer users are familiar with
  the use of a web browser. Many, however, are
  unaware of the affect that browser settings can
  have on a web pages appearance

At right is the Font preference dialog for
Microsofts Internet Explorer browser. As you can
see, any font available in the system can be
selected as the default font for web pages
11
HTML Basic Structure

• HTML pages are divided into two types of things
  data and meta-data
• The data is "what the user sees," generally a
  mixture of text and images
• The meta-data formats the data. They tell the web
  browser how to render the data
• Meta-data is organized hierarchically

12
Tags

• All meta-data is enclosed in angle brackets like
  this ltbodygt
• The first word inside the brackets is the "tag
  name"
• The entire contents of the angle brackets is
  called a "tag"
• All tags must be opened and closed
• Tags are not case-sensitive

13
Tags The Open Tag

• Since tags are used to tell the browser how to
  format text, we must have some way of indicating
  where formatting stops and starts
• A tag which starts with a valid tag name is an
  open tag
• For example the "B" tag indicates bold text. We
  would start a section of bold text like
  this ltBgtThis text will be bold

14
Tags The Closing Tag

• A closing tag is simply the tag name preceded by
  an /
• Heres an exampleHTML is a ltBgtverylt/Bgt useful
  language
• Only the word very will be shown on bold text.
• Some tags, like the line break, BR, do not
  contain any data. HTML allows these tags to be
  closed with a slash at the end of the tag, like
  thisltBR /gtThis text appears on a new line

15
Attributes

• Opening tags can optionally accept name/value
  pairs which provide the browser with additional
  information about how to render data
• The name/value pairs are separated by spaces
• In rare occasions a single word replaces the
  name/value pair
• Values should always be placed inside quotes
• For example the FONT tag can also set font color,
  like this
• ltfont color"red"gtHello Worldlt/fontgt

16
HTML Hierarchy

• HTML Tags must follow a strict containment
  hierarchy. A section of data can be surrounded by
  more than one tag set (i.e. an opening tag and
  its corresponding closing tag) but tags should
  follow a "last in, first out" policy
• For example using the bold ltBgt and italics ltIgt
  tagsThis is correctHTML is ltIgtreally
  ltBgtverylt/Bgtlt/Igt useful This is notHTML is
  ltIgtreally ltBgtverylt/Igtlt/Bgt useful

17
Hierarchy Basic Page Layout

• All HTML pages begin and end with the ltHTMLgt tag.
• Within the HTML tag there are two sectionsHEAD
  and BODY
• For exampleltHTMLgtltHEADgtlt/HEADgtltBODYgtHello
  Worldlt/BODYgtltHTMLgt

18
The HEAD Tag

• The HEAD tag is used for including JavaScripts,
  Cascading Style Sheets and META tags
• We will return to this tag in more detail later
  in the class
• The HEAD tag may contain a TITLE tag which places
  a title in the browsers title bar
• For example
• ltHEADgtltTITLEgtMy First Pagelt/TITLEgtlt/HEADgt

19
The BODY Tag

• All data which will be displayed to the user must
  be in the BODY tag
• If you place text in the body tag with no other
  formatting tags, it will appear in the browser as
  one long paragraph

20
Simple Text Formatting Tags

• Here is a chart of some simple text formatting
  tags
• Please note that all these tags can be done in
  CSS, as we will see later

TAG Description Example
ltPgt Paragraph ltpgttext textlt/pgt
ltBR /gt Line break ltbr /gtWe did this one.
ltBgt Bold text ltBgtimportant textlt/bgt
ltUgt Underline ltUgtTitle of booklt/Ugt
ltIgt Italics ltigtemphasizelt/igt
ltH1gt - H6gt Header lines, six different sizes ltH1gtChapter 1 My Humble Beginningslt/H1gt
ltHR /gt Horizontal rule lthr /gtChapter Two
21
Character Entities

• Since the angle brackets are used to denote
  meta-data we need some way of displaying lt and gt
  as ordinary text. This is done via character
  entities
• There are several dozen character entities. They
  all begin with and end with
• The character entity for gt is gt
• The character entity for lt is lt
• For a full list of character entities
  seehttp//www.w3.org/TR/html4/sgml/entities.htm
  lh-24.2.1

22
The Anchor ltAgt Tag

• The anchor tag is used to create hyper-links to
  other HTML pages
• When the user clicks on the data of an anchor
  tag, the browser "follows the link" and shows the
  user a new page
• The URL to follow is specified in the anchors
  href attribute, like thisltA href"http//www.go
  ogle.com"gtGo to Google!lt/agt

23
The Image ltIMGgt Tag

• Images can be included via the IMG tag. The
  images must be available via a web server for
  this to work.
• The actual image to be displayed is specified via
  the SRC attribute, like thisltimg
  src"http//www.google.com/intl/en/images/logo.gif
  " /gt
• Notice the use of /gt. Images do not "contain"
  data in the HTML sense

24
Images and Anchors

• Images can be used as "data" for the anchor tag
• An example
• lta href"http//www.google.com"gtltimg
  src"someimage.jpg" /gtlt/agt

25
Setting Paths for Images and Anchors

• To understand this, lets examine the components
  of a URLhttp//www.mysite.com/section_one/img/p
  ic1.jpghttp// - the protocol, which tells the
  browser the communication style to use for this
  pagewww.mysite.com/ - the web server from which
  the resource should be copiedsection_one/img/ -
  This will map to a directory on the server, but
  may not be the actual directory path. Web servers
  can alias these for simplicity and
  securitypic1.jpg - the actual file to copy

26
Setting Paths for Images and Anchors

• When the file targeted by an IMG SRC or an A HREF
  attribute is in the same directory as the HTML
  file where the IMG or A tag occurs, then the file
  name is sufficient
• If the file is on the same server but in a
  different directory, relative addressing can be
  used just as in a local file system. The double
  dots (..) can be used to indicate "up one
  directory"
• Some examples follow

27
Setting Paths Some Examples

• On our web server htmlclass.com we have this
  directory structure/html/html/classnotes/html
  /references/img/img/classnotes

28
Setting Paths Some Examples

• In /html/classnotes we have a notes.html file
  with the following contentslthtmlgtltbodygtlta
  href"notes_page2.html"gtGo to page 2lt/agtltpgtltimg
  src"/img/classnotes/deco1.jpg" /gtlt/pgtltpgtlta
  href"../references/htmlchart.html" /gtSee
  chartlt/agtlt/pgtlt/bodygtlt/htmlgt

29
Summary

• This chapter introduced you to the basics of HTML
  
• Using this material, you should be able to
  construct an HTML page with basic text
  formatting, hyper-links, and images

30
Any Questions?