CO22007 Web Development Methods 2

							CO22007 Web
Development Methods 2




   Unit 3 : Introduction to
   HTML
Today

Introduction to Web Authoring and Web
 Authoring tools
What is Hypertext Markup Language (HTML)?
How HTML pages are structured
Basic text formatting
Browser Issues
Intro to tutorial three (handing coding HTML)
Learning Outcomes

After completing this unit you will be able to
  Identify the purpose and nature of a variety of web
   authoring tools
  Create basic web pages using hand-coded HTML
  Further develop these pages to incorporate links and
   images
In turn these outcomes assist ion the
 achievement of the following Module Learning
 outcomes
  Identify current and future application areas for the
   world wide web.
  Create simple web-sites combining text and graphics.
Web Pages

No matter how complex,all just basically HTML:
  a set of instructions for how to render (draw) a page
   in a browser
You can see the HTML on any page by selecting
 View…(Page)Source on your browser menu bar
Two ways of making them:
  authoring tools
  hand coding
Introduction to Web
Authoring

Web sites are now composed of many elements:
  HTML pages (more on that shortly!) created in
   packages like Macromedia Dreamweaver
  Graphics created in packages like Macromedia
   Fireworks
  Animated sequences created in packages like
   Macromedia Flash
  Interactive „Shockwave‟ elements created in
   Macromedia Authorware or Director
  Video and sound created using packages like
   SoundForge and Adobe Premiere
Macromedia Dreamweaver

Creates HTML pages (files end in .htm or
 .html)
Manage web sites (i.e. collections of
 HTML pages and any other files such as
 graphics)
Currently at version 4 (version 2 in labs)
Macromedia Flash

Creates Flash animation files that can be placed
 in web pages
Files end in .swf
Flash files usually composed of graphics and
 images created elsewhere (e.g. Fireworks,
 Photoshop)
Can add text, interactive elements (buttons, text
 input boxes etc)
Currently at version 5 (5 in labs)
Macromedia Fireworks

Web oriented graphics creation packages:
  create images that download well (a.k.a.
   „small ones‟)
  create „rollovers‟ (elements on that page that
   change appearance when the user rolls their
   mouse over them)
Currently at version 4 (version 2 in labs)
Macromedia Shockwave

Flash allows you to create quite simple
 animations
  e.g. simple animations and games
Shockwave technologies allow you to
 create highly interactive applications:
  create the application in Director or
   Authorware:
  then „Shock‟ it for the web (now built in to
   the tools)
Trends in Authoring Tools

Trend now is towards integration of/with
 different tools
E.G. Between Macromedia products:
  launch Fireworks from within Flash and
   Dreamweaver
  work on bitmap and vector graphics
  then use in a Dreamweaver site or a Flash
   presentation
With other products:
  create a doc in Word, save as HTML
  Dreamweaver „cleans up‟ the HTML for import
Costs

Macromedia‟s (and main competitor Adobe‟s)
 web authoring tools are not cheap:
  Flash: £300
  Fireworks: £270
  Dreamweaver: £270
Can but them in bundles which is cheaper
  e.g. Dreamweaver and Fireworks together = £410
Also student prices:
  e.g. Dreamweaver 4 = £175)
NB all prices are approximate
Community

Macromedia site has:
  online forums: post messages and get answers
   quickly from Macromedia staffers and from other
   developers
  beta testing groups: get latest versions in their trial
   state
  showcases: see examples of applications created
   using the products and learn how they did it
  technical notes section
  go to http://www.macromedia.com
Seeing Web Content

Browsers allow you to „see‟ web content
All browsers can „see‟ HTML pages
  although not always identically
But might need plug-ins to „see‟ Flash,
 Shockwave, video and sound files
As designer:
  think about the audience (time to do download
   players etc)
  gratuitous elements
Group Exercise
 Steven Spielberg has hired you to create a website for
  his new film ET: Got Home and They‟d Left
 He wants:
   lots of graphics, video and sound from the film
   a home page telling people what the film is about and where it
    is playing locally (e.g. cinema location, times)
   pages with information about the cast
   an animation of ET saying „Home alone, home alone‟
   a game where the user gets to try and run ET over with a tank
 What tools do you think you would need to use (give
  reasons) to create the site?
HTML - Why Bother?

HTML authoring tools (e.g. Dreamweaver) were
 invented to make life easier:
  they automate a lot of HTML coding
  they have graphical user interfaces (GUI‟s)
But they can be:
  expensive, unpredictable, limited
HTML coding is a very sellable skill
E.G. latest version of Dreamweaver makes it
 easier to see and edit raw HTML:
  developers demanded this
Example

HTML authoring tools often add
 „redundant tags‟
Each tag has to be read by the browser
  lots of redundant tags = slower to load
   pages
  in the age of media rich sites every nano-
   second counts!
  designers often „tidy up‟ code generated
   automatically by web authoring tools
Okay, So What is HTML?

A page mark-up language:
  i.e. it tells a web browser how to create a web page
   for the end user
Invented by Tim Berners-Lee:
  specifically to do with creation of pages in a
   „hypertext‟ structure like the Web
Hypertext:
  non-linear information structure
  use hyperlinks to jump from one node (e.g. page, or
   place on a page) to another
Who Controls HTML?

W3C:
  World Wide Web Consortium
Established in 1994:
  make sure that standards were adhered to in
   developing the language
  they vote on whether to accept proposed changes to
   the language
  they oversee the issuing of new versions of the
   HTML standard
Most recent version of HTML is HTML 4
Example

FRAMES tag is new to HTML 4
  tag was originally a proprietary one implemented by
   Netscape browser only
  then Microsoft picked it up
  despite the fact that lots of people hate frames, the
   tag is now officially part of HTML language
  W3C thought better try and set a standard for how it
   should be used
Many changes to HTML specification are driven
 by what browser manufacturers want
Group Exercise - Describe
a Page

As we have already seen HTML is just a way of
 telling a browser how to draw a page
The next slide shows a web page
Working in groups come up with a set of
 instructions that would tell a human how to
 recreate the page
  assume all the elements (e.g. bits of text, lines,
   tables, images) are already available
How HTML Pages Work

HTML can try and tell a browser how parts of a
 page should appear (e.g. text)
But how the browser interprets the instructions
 can vary (more later)
Main elements of an HTML page:
  text you want to appear
  embedded TAGS (the instructions for controlling
   format and layout and telling the browser about the
   document)
  file management information (e.g. links to graphics
   files, or other web pages)
HTML TAGS

Are what you (or your authoring tool) code
Are always enclosed in angle brackets (e.g.
 <H1> )
By convention are typed upper case because it
 is easier to read
Can have attributes, e.g.
  <P ALIGN=“Left”> the “Left” bit is the attribute
Most tags are opened then they are switched
 off, e.g.:
  <B>make this bold</B>but not this
BASIC STRUCTURE

All html pages should start with <HTML> and
 close with </HTML>
HTML Pages comprise a HEAD and a BODY
HEAD = info about the document not
 necessarily seen by user
BODY = what the end user sees when it is
 interpreted by the browser
Other elements (future lectures) = style sheets,
 framesets and scripts
THE HEAD

Where global settings are defined
Starts with <HEAD> and ends with </HEAD>
Usually contains:
  a title to be displayed in the top bar of the browser,
   e.g. <TITLE>This is My Web Page</TITLE>
  meta information such as the author‟s name or a
   description of content e.g. <META NAME=author
   CONTENT=“Catriona Macaulay”(useful for search
   engines)
ACTION

Find out when and why you would use
 the following HEAD tag:
  <META http-equiv=“Refresh”
   content=8>
THE BODY

Main functions:
  break text in page into sections/chunks (e.g.
   by creating paragraph or line breaks)
  format text (e.g. appearance, alignment)
  add other elements to the page (e.g. tables,
   graphics, links, lines)
ACTION

Find out when and why you would use
 the following BODY tag:
  <CODE> … </CODE>
Hand Coding an HTML
Page

You can create an html page in any text editor
 (Word,Notepad, etc)
First signify it is an HTML page with <HTML>
Then add your HEAD info
Then your BODY info
Then signify the HTML ends with </HTML>
Then save the document in the style
  filename.htm or filename.html
That‟s it!
Breaking Up Is Hard To Do

Most documents display text in blocks, or
 chunks
To do this in HTML there are 4 relevant tags:
  <P> starts a new paragraph (i.e. puts some white
   space between the last para and the new one
  <BR> causes a line to break and what follows to
   appear on a new line
  <DIV> allows you to group a bunch of paragraphs
   together (e.g. to Align them all at once)
ACTION

Find out when and where you would use
 the following text chunking tag:
  <SPAN>
Basic Text Formatting

Most HTML tags you will initially look at
 are concerned with the basics of text
 formatting:
  font type and styles
  text alignment
  line breaks and paragraph breaks
  defining text lists
Aligning Text

<P ALIGN=“Center”> means everything is
 centred until the next <P>
  <P ALIGN=“Left”>
  <P ALIGN=“Right”>
  <P ALIGN=“Justify”>
To align more than one paragraph use:
  <DIV ALIGN=“Center”>…..</DIV> Note: American
    spelling of CENTRE (i.e. CENTER)
Indent a section using:
  <BLOCKQUOTE>….</BLOCKQOUTE>
CHARACTER FORMATTING

<B> BOLD TEXT </B>
<I> Italic </I>
<STRONG>…</STRONG> usually same as
 bold
<EM>…</EM> usually same as italic
<SUP>…</SUP> superscript
<SUB>…</SUB> subscript
<STRIKE>…</STRIKE> struck through text
<U>…</U> Underline (NB Don‟t confuse with
 hyperlinks)
<TT>…</TT> make everything teletype
HEADING STYLE

Got six levels of heading:
  <H1>….</H1> = largest size
  <H2>….</H2>….. Etc
  <H6>….</H6> = smallest size
Headings always start a new line
Anything after them starts a new paragraph
Can use other TAGS inline with them (e.g.
 <EM> )
But, different browsers will use different settings
 for headings
MAKING LISTS

Another obvious feature of many documents are
 lists
  another useful way of organising information
  main kinds HTML allows are ordered (i.e. numbered),
   and unordered lists
Ordered list: <OL> to start and then <LI> to
 signify each item in list then </OL> to end
Unordered list: same format but <UL> …
 </UL>
Styles of Ordered Lists

Originally all ordered lists were just numbered
Now can set an attribute for ordered lists
Use <OL type=numberingsystem>…
 </OL>
Where numberingsystem =
  1 for 1, 2,3 style list
  A for A, B, C style list
  a for a, b, c style list
  I for I,II,III style list
  i for i, ii, iii style list
Styles of Unordered Lists

Main thing is what kind of bullet do you
 want?
The <UL> tag has an attribute type that
 can have one of three values:
   circle
  square
  o disc
ACTION

Find out when you would use the
 following list tag and what other tags you
 would need to use with it:
  <DL> …. </DL>
HYPERLINKING

Anchor tag <A> allows you to link to
 other pages, or other parts of the same
 page, e.g.
Link to a different file anywhere:
  <A
   HREF=“http://www.dcs.napier.ac.uk/>Napier
   Home Page</A>
Link to another part of same file:
  create the anchor at point you want to be able to
   jump to with <A NAME=“JumpHere”>Jumps to
   Here</A>
  create a link at place you want to link from with
The Bad News
Web pages can display differently on:
  different browsers (e.g. Netscape „v‟ Explorer
  Different versions of same browser
  Mac and PC platforms
None 100% true to W3C HTML specification
Which means?
Work arounds:
  LCD (lowest common denominator): work to what
   you think the oldest widely used browser can handle
  lead from the front: work to latest browser versions
   on grounds that it will encourage users to update
The Good News

Dreamweaver can check to see if your code will
 cause problems on different browsers
There are websites that also do this:
  try finding them via http://www.w3c.org
Also places that have details of all the browser
 incompatibility issues:
  e.g. books on HTML like „HTML 4 Unleashed‟ by Rik
   Darnell or web sites like:
   http://hotwired.lycos.com/webmonkey/reference/browser_chart/
Design Issues in Web
Authoring

Effective web page design requires:
  understanding the background to web browsing
  understanding the people who will use your site
  understanding what they will use your site for
Also requires understanding current state of:
  HTML
  different browsers/platforms for viewing web pages
   (e.g. interactive TV, WAP phones)
  web authoring tools
  associated technologies (e.g. scripting languages)
BASIC HCI

HCI - human computer interaction
Field tries to help designers build better
 products (e.g. web pages)
Web design basic HCI:
  is text easy to read
  are all pages on the site consistent
  are links still functioning
  are slow to load elements (e.g. graphics) really
   necessary
  are interactive elements obvious/easy to use
But….

Can you think of a case where the
 designer might not want the interactive
 elements to be obvious?
What about a case where the designer
 might not care about slow to download
 elements?
STAYING AWARE

New technologies can change what we define
 by „too big for fast download‟
Fashions change:
  frames go in and out of fashion
  last year everyone loved splash pages created in
   Flash, now everyone hates them („Skip Intro‟
   syndrome!)
More and more websites are being targeted at
 specific „niche‟ markets
(Almost) The Best Design
Advice (Ever)

Do it on paper first!:
  sketch out how page should look
  sketch out how pages relate (e.g. navigation map)
Good web design is hard
Tools like Dreamweaver encourage us to start
 creating before planning:
  this is bad
Save time, plan your site on paper first:
  this is good
Directed Study

In this weeks tutorial you will create a basic web
 page
Once you have done this experiment with
 different tags:
  the great Webmonkey site has an online „cheat
   sheet‟ of HTML tags you could investigate:
  http://hotwired.lycos.com/webmonkey/teachingtool/i
   ndex.html
Also, see what happens when you nest tags
Authoring in Dreamweaver
   <HTML>
   <HEAD>
   <TITLE>My First Web Page</TITLE>
   </HEAD>
   <BODY>
   Welcome
   to my web page. This is my first attempt at creating my site. <P>
    (I should not apologise for this - it only puts the reader off!)
   <BR>
   Bye bye from me
   Thankyou
   </BODY>
Authoring in Dreamweaver
<html>
<head>
<title>My First Web Page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
   8859-1">
</head>

<body bgcolor="#FFFFFF">
<p>Welcome to my web page</p>
<p>This is my first attempt at creating my site. (I should not
    apologise for this
 it only puts the reader off!)<br>
 Byebye from me.Thankyou.</p>
</body>
</html>
Suggested Reading

Go to the W3C website and find out about
 the latest developments in HTML
  you will also find links to HTML „validators‟
   (for checking your code) here
  http://www.w3c.org
Coming Attractions

More than you ever wanted to know
 about:
  frames
  tables
  styles
  forms
Plus:
  HCI Design Basics 2
Introduction to Web
Authoring

2.1   Tools

2.2   Tags

2.3   End-user control of display
Preview of tutorial

2.4 Adding a graphic
2.5 Text styles
2.6 Alignment
2.7 Heading Style
2.8 Margins
2.9 Character Formatting
2.10 Linking Pages
End of unit summary