CT10398E Software Applications

1
CT10398ESoftware Applications

• Week 2HTML Fundamentals

2
Whats in store this week

• News
• (Brief) Review of Week 1
• Introduction to HTML
• Tags Attributes
• Images
• Links

3
News

• Workshop groups have been re-allocated
• The Monday 5-7 workshop is cancelled
• The Thursday 4-6 workshop is also cancelled
• A provisional workshop group list has been
  published on the Module Study Guide
• http//mercury.tvu.ac.uk/swa/
• Ensure you check to see what time you are due to
  attend If you have any problems with your group
  allocation, please e-mail or speak to me as soon
  as possible

4
News

• All Multimedia computing Major students should
  attend the LSDS sessions following this lecture
• I suggest students with surnames beginning with
  A-K attend the 1000-1100 and L-Z attend the
  1100-1200

5
(Brief) Review of Week 1

• Introduction to the Module
• History of the Internet
• The WWW
• Web Sites

6
Introduction to HTML

• Web pages are generally written in HTML
• Hypertext Mark-up Language
• HTML is a method of marking-up text
• Designed to describe structure of a document
• Not designed to describe the way the document is
  displayed - this is up to the individual browser
• A Web browser is a piece of software that takes
  web pages and renders them to screen
• Different browsers may render the same page in
  different ways

7
Introduction to HTML

• Why should browsers render the same document
  differently?
• Some browsers may not have access to a graphical
  display lynx, links
• Tools such as screen readers exist to aid people
  with visual difficulties - and you cant read
  images
• Implementation decisions - HTML as a
  specification is quite flexible

8
Introduction to HTML

• HTML is a standard
• The most current version is HTML 4.01
• Transitional - a version which is for people
  moving from previous versions - a number of tags
  and elements are permitted which are deprecated
• Strict - the proper version of HTML 4.01
• Whilst you can write documents in older versions
  of HTML, this is inadvisable
• We will begin with HTML 4.01 Transitional

9
Introduction to HTML

• What is marking up?
• marking up
• a description of the structure of a document
• the process of indicating how a document should
  look or display
• When you make text bold, italic, or underlined in
  a word processor, you are marking up that text.

10
Introduction to HTML

• Why is marking up useful?
• Giving structure to a document
• can make it easier to understand
• can make it more interesting to read
• Especially when you have a large quantity of text
  - it helps to highlight key sections
• Imagine trying to read a novel if it had no
  paragraph breaks...

11
Introduction to HTML

• ...and other documents can benefit too
• A Mediocre Haiku Ethereal fog Floats over roads
  and fields I watch the sun rise.
• A Mediocre Haiku
• Ethereal fog
• Floats over roads and fields
• I watch the Sun rise.

12
Introduction to HTML

• An HTML document is a simple text file
• It contains text surrounded by elements used to
  mark up sections
• These elements are called tags
• Tags are indicated by angled brackets lt...gt
• Tags generally come in pairs
• One tag to begin the mark up, and one to end it
• There are exceptions
• The closing tag begins with a forward slash
  lt/...gt

13
Introduction to HTML

• Tags must be properly nested
• This means when you open a tag, all tags inside
  it must be closed before you can close the tag
• e.g.
• lthtmlgtltheadgtlt/headgtlt/htmlgt
• ...is properly nested but
• lthtmlgtltheadgtlt/htmlgtlt/headgt
• ...is not properly nested
• The html element has been closed off, but the
  head element is still open - not allowed!

14
Introduction to HTML

• There are two different types of tag
• Block level tags apply to whole sections of a
  document
• Blocks can have other blocks contained inside
• Inline tags must be contained within a block

15
Introduction to HTML

• The first tag that you will need to know is the
  tag which indicates the contents are in HTML
• lthtmlgt ... lt/htmlgt
• Everything in between the lthtmlgt and the lt/htmlgt
  is HTML
• An HTML document consists of two parts
• A head
• A body

16
Introduction to HTML

• lthtmlgt
• ltheadgt
• ... Head
• lt/headgt
• ltbodygt
• ... Body
• lt/bodygt
• lt/htmlgt

17
Introduction to HTML - Head

• The head of an HTML document is an unordered
  collection of information about the document
• It does not contain information to display in the
  document when rendered by a browser
• It must contain a title - most browsers will
  display this in the title bar
• lttitlegtSoftware Applications Week 1lt/titlegt

18
Introduction to HTML - Body

• The body of a HTML document contains all the
  elements that make up the document, together with
  the HTML that provide the structure of the
  document
• In HTML 4.01 Transitional, it also contains
  information on how to format and lay out the
  document
• This is being phased out - the W3C prefer that
  the structure of a document and the specifics of
  how it should be displayed be kept separate

19
Introduction to HTML

• By default, the text in an HTML document will be
  displayed as one long line, running from left to
  right across the page, and forming a new line
  only when there is not enough space to display
  any more on the current line
• Just like the text in a word processor!

20
Introduction to HTML - Paragraphs

• In an HTML document, carriage returns are not
  recognised
• So you cant add a line break into text by simply
  pressing the RETURN key
• Any number of consecutive carriage returns and
  paces will reduce down to just a single space
• How can we make paragraphs and carriage returns
  then?
• There are a whole series of tags to indicate
  headings and paragraphs

21
Introduction to HTML - Paragraphs

• The paragraph tag ltpgtlt/pgt marks up a block as
  being a single paragraph
• The heading tags lth1gtlt/h1gt lth2gtlt/h2gt ...
  lth6gtlt/h6gt indicate a block as being a heading
• You cannot have paragraph tags in a heading, or
  vice-versa
• Why are there six different headings?

22
Introduction to HTML - Headings

• Because there are different types of heading
• Think of a newspaper
• Title
• Column/Article Heading
• Section Heading
• Main article text
• The title is akin to the effect of the lth1gt tag

23
Introduction to HTML - Headings

• As you go up in number, the effect is that the
  heading gets smaller - so lth6gt is the smallest
  heading
• How can we add a carriage return in a document?
• We use the ltbrgt (break) tag
• This is an example of a tag that does not have a
  closing tag

24
Introduction to HTML - Line Break

• The ltbrgt tag simply forces a carriage return in a
  document
• You would place a ltbrgt tag each time you want to
  add a line break without starting a new paragraph
• A Mediocre Haiku Ethereal fog Floats over roads
  and fields I watch the sun rise.

25
Introduction to HTML - Line Break

• With some ltbrgt tags
• A Mediocre HaikultbrgtEthereal fogltbrgtFloats over
  roads and fieldsltbrgtI watch the sun rise.
• A Mediocre Haiku
• Ethereal fog
• Floats over roads and fields
• I watch the sun rise.

26
Introduction to HTML - Formatting

• You can add tags to format text
• The preferred tags are
• ltstronggtlt/stronggt to indicate strongly typed text
• ltemgtlt/emgt to indicate emphasised text
• These are merely indications of structure - it is
  up to the browser to decide what is meant by
  those terms
• Typically strong text will be displayed in bold,
  and emphasised text in italics.

27
Introduction to HTML - Formatting

• There are other formatting tags in HTML 4.01
  Transitional - Whilst learning HTML these are
  fine to use
• ltbgtlt/bgt Bold
• ltigtlt/igt Italics
• ltugtlt/ugt Underlined
• ltcentergtlt/centergt Centre-align text
• ltfontgtlt/fontgt Font tag

28
Introduction to HTML - Formatting

• The ltfontgt tag allows many aspects of the font to
  be adjusted
• Size, face, colour, background colour...
• We specify details with attributes
• Attributes are extra information which come
  inside the tag
• ltfont size"3"gt
• size is an attribute of the tag font, and is
  being set to the value "3"

29
Introduction to HTML - Attributes

• Most tags have attributes
• ltbodygt for example has the following attributes
  (amongst others)
• text - sets the default colour of text
• bgcolor - sets the background colour
• link - sets the colour of hyperlinks
• vlink - sets the colour of visited hyperlinks

30
Introduction to HTML - Links

• The main point behind hypertext is to allow
  information to be structured into blocks, and
  linked to other information
• We achieve this with links
• A link is simply a pointer to another file - the
  target
• Links can point to files on the same site, or
  outside of the current web site

31
Introduction to HTML - Links

• There are two ways to identify the target of a
  link
• You can give the absolute address
• Grove House, 1 The Grove, Ealing. W5 5DX
• Or you can give a relative address
• From St. Marys road, turn right and follow the
  road until you reach Finnegans Wake pub. Then
  take another right. Grove House is the red-brick
  building on the left

32
Introduction to HTML - Links

• The ltagtlt/agt tag is used to create links
• The attribute href specifies the target
• A link can be internal - that is it points to a
  block within the same page - indicated with an
  anchor
• To create an anchor, the command is
• lta name"Introduction"gtlt/agt
• This creates an anchor with the name
  Introduction

33
Introduction to HTML - Links

• To create a link to an internal anchor, you set
  href to be the name of the anchor prefixed with a
  
• lta href"Introduction"gt
• To create a external link, you set href to the
  address of the target
• Absolute
• lta href"http//elgar.tvu.ac.uk/"gt
• Relative
• lta href"images/top.gif"gt

34
Introduction to HTML - Links

• An absolute address always begins with the
  resource identifier (the http// bit)
• In the absence of a resource identifier, the link
  is always a relative link
• In a relative link, you give the path to a file
• so lta href"cv.html"gt points to a file called
  cv.html in the same directory as the current
  page

35
Introduction to HTML - Links

• lta href"images/top.gif"gt points to a file called
  top.gif in a subdirectory called images
• if the relative address begins with a / then the
  following path is relative to the root of the web
  server - this will be explained next week

36
Introduction to HTML - Images

• Images will be dealt with properly in Week 4
• For now, you should simply know how to add an
  image - well worry about other issues regarding
  them later
• The tag is ltimggt - another element which has no
  closing tag
• The source of the image is pointed to using the
  src attribute
• ltimg src"top.gif"gt

37
Introduction to HTML - Resources

• There are many online tutorials and references to
  help you pick up HTML
• All you need to write HTML is a simple text
  editor - TextPad (http//www.textpad.com/) is
  recommended, as it will colour-highlight your
  HTML to make it easier to read
• A few are listed on the Module Study Guide, but
  for more simply do a web search for html tutorial

38
Practical Work

• Familiarise yourself with the basics of HTML by
  writing simple pages
• Specifics can be found on the MSG at
• http//mercury.tvu.ac.uk/swa/

39
Next Week

• Publishing pages on the WWW
• FTP
• Assignment 1