Transcript Interactivity and the Internet

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 nanosecond 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=iso8859-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