COMM1T Web Engineering Dr. Giles Oatley

1
COMM1T Web EngineeringDr. Giles Oatley

• HTML I
• Overview
• Tags and Text
• HTML versions..
• HTML 4.0
• (a loose bag of a lecture, in combination
• with the website tutorial)

2
TRANSFER OF YOUR HTML,CLASS, JS, CGI etc. files
TO AND FRO..
The program FTP (for file transfer protocol)
transfers files to, from, and over the internet.
Any file can be transferred text or binary so
long as you have permission to read it at the
source and write it at the destination. Anonymous
FTP allows you to gain access to a remote
machine. There you have limited privileges
sufficient to allow for transfer of files from
(and sometimes to) designated areas. e.g.
leech_ftp, ws_ftp, etc.. (see winfiles.com)
 
3
SUMMARY OF HTML
4
HTTP (HYPER-TEXT TRANSFER PROTOCOL) HTML
(HYPER-TEXT MARK-UP LANGUAGE) HTML conforms to
International Standards ISO 8879 - Standard
Generalised Mark-up Language (SGML). SGML is a
system which allows structured documents and
mark-up languages to be defined. HTML standards
are defined using SGML in what is known as a
Document Type Definition (DTD).   HTML documents
are ASCII text documents. HTML documents
contain text and various tags that define
elements such as headings, paragraphs and
HyperLinks. Each element describes how the
document should be displayed.
5
..basically two types of tags in HTML start
tags and end tags Some elements use both a start
and an end tag, While others just use a start
tag. Start tags - delimited by End
tags - delimited by e.g. Some
start tags also include attributes which further
define information about the element.
This is a Large Heading
This text
starts on a new line.
6
HTML influences the way a web page is displayed
by the client browser, once it has been delivered
by the World Wide Web (WWW) server.   The HTML
formatting marks, known as elements, are used to
mark-up the text in the ASCII document.
Elements exist, for example, to
define          Heading text.          Words
which are to be emphasised.          Where
HyperLinks are to be included.
7
WHAT DO I NEED TO CREATE WEB PAGES? FILENAMING
CONVENTIONS USE OF NETSCAPE NON-STANDARD HTML
CREATING, SAVING AND LOADING
8
!DOCTYPE HTML 3.2 -//W3C//DTD HTML 3.2 Draft//EN Netscapes
HTML standard
-//WebTechs//DTD Mozilla HTML 2.0//EN not
strictly necessary , highly recommended future
browsers can still attempt to display your older
documents (written to previous HTML standards) in
the way that was originally intended, even though
the HTML language may have evolved
9
Draft//EN This
is my first Web document. This file is a simple
ASCII text file which was created on a PC
using notepad under MS Windows. As you can see
the file is shown in the display window of the
Browser.
10
ELEMENTS AND ATTRIBUTES This
paragraph is aligned to the right!
The use of Comments NEW LINE BREAKS




11
GLENMORANGIE in Gaelic means The
Glen of Tranquillity. As early as 1783, the art
of distillation was being practised as
GLENMORANGIE, which lies by the mountain-swept
shores of the wild Dornoch Firth.
ALIGNCENTERGLENMORANGIE is still produced at
one of the oldest and most traditional
distilleries in the Scottish Highlands.
NETSCAPE ONLY!! GLENMORANGIE in
Gaelic means The Glen of Tranquillity. As early
as 1783, the art of distillation was being
practised as GLENMORANGIE, which lies by the
mountain-swept shores of the wild Dornoch
Firth.
12
(No Transcript)
13
Animals Vertebrates
Mammals Primates Man Fo
otball supporters
14


15
This is Listing Text T... NOT NETSCAPE!!
16
LOGICAL TEXT ELEMENTS
17
LOGICAL TEXT ELEMENTS








18
FURTHER FONT STYLE ELEMENTS
19
(No Transcript)
20
...
21


000000 00FF00
FFFFFF
BLACK BRIGHT-GREEN WHITE
text
22
BLINK IS QUITE SPECIAL
TOP SECRET HOME PAGE WARNINGINK Only Authorised Personnel May Enter After
This Point! WARNING
SPECIAL CHARACTER SYMBOLS
23
Using IMG to insert graphics into
documents This is an image referenced using
the HTML IMG element.
The attribute you use
to reference the image is SRC which stands for
source.
gif, jpg, bmp, tif (different sizes
different download size.. )
24
EQUATIONS AND MATHS SUPERSCRIPTS
X2 or X2 SUBSCRIPTS
X_I_ SIMPLE BRACKETING ..
. FUNCTIONS tan
theta
represents the trigonometric expression
tanØ GREEK LETTERS alpha
omega RELATIONS lt ()
equals () a
b c 1 2
3
25
DINGBAT ICONS HTML provides a set of
standardized dingbats for use in place of simple
bullets or images. Their appearance may vary
slightly on different browsers. archive audio
binary.document clock compressed.document
diskette mail telephone http//www.wdvl.com/
Vlib/Multimedia/Images_and_Icons.html
26
HTML 4.0
27

• ..the HTML 4.0 standard
• Strict HTML 4.0
• Most pure
• Anything deprecated or obsolete is never used
• Optimistic Many of its rules are ahead of the
  stability user agents, or browsers, offer
• Transitional, or loose HTML 4.0
• By combining aspects of HTML 3.2 with elements
  from the strict HTML 4.0 standard, a more
  realistic, usable version of the language emerges
• Frameset HTML 4.0
• This includes all the information within the
  transitional version combined with the newly
  adopted frame-based elements such as FRAME,
  FRAMESET, NOFRAMES, and IFRAME

28

• ..Goals of HTML 4.0
• Separate document structure from presentation and
  style
• sets aside elements used for presentation or
  style
• style sheets used instead
• Think carefully about access
• Use forethought when authoring code
• variety of platforms, physical impairments etc
• Make documents load more quickly via careful
  table design
• Elements to help tables render incrementally

29
..Status of HTML 4.0 elements New
elements FRAME, FRAMESET, NOFRAMES, IFRAME,
NOSCRIPT, OBJECT, SPAN FRAME etc were always
used, since frame-compliant browsers were
developed (several years now!), but FINALLY this
tag has entered into the standard Deprecated
elements APPLET, BASEFONT, CENTER, FONT APPLET
forces Netscape to adopt the OBJECT tag, which
will ultimately provide better, more stable
management of embedded objects in a web
page Obsolete elements LISTING, PLAINTEXT, XMP
preformatted text element recommended
to replace these
30
Deprecated elements FONT OUCH! For now, the
use of the FONT tag remains the only way to gain
control over HTML-based attributes. But the
reality is that as cascading style sheets become
a real-world option for HTML authors, well be
glad its gone
31
Deprecated elements CENTER The infamous
center tag has been set aside for other alignment
methods, especially within cascading style
sheets. Another tag for alignment is the
tag along with the align attribute
32
..Summing up the changes Style
sheets Scripting Frames support Embedded
objects Improved support for text alignment and
handling Richer tables (usually with offerings
that enhance accessibility) Forms enhancements
(also offering a variety of information for
accessibility purposes)
33

• SOURCES
• http//www.w3.org/TR/REC-html32.html
• http//www.htmlhelp.com/reference/html40/ (HTML
  4.0 Reference)
• http//www.blooberry.com/html/ (HTML Reference)
• http//www.phoenix.net/jacobson/pages/rgbdec.html
  (RGB Decimal Color Chart)
• http//texaswebdesign.com/hex.html(Hexadecimal
  Notation Color Chart)

34
HISTORY APPENDIX - Creation of language in
conjunction with Berners-Lee's WWW program -
Oct.-Dec. 1990 - Specification for HTML
released on the Internet - Summer, 1991 - Draft
defining HTML released (Internet draft later
expired) - June, 1993 - Initial document for
'HTML 2.0' released - April, 1994 - Draft for
HTML 2.0 cleaned up and released - July, 1994 -
HTML 2.0 draft further refined with plans to
release as an RFC - February, 1995 - HTML 2.0
(RFC 1866) approved as a proposed standard -
September, 1995 - HTML 3.0 draft released (later
expired) - March, 1995 - HTML 3.2 draft released
- May, 1996 - HTML experimental DTD 'Cougar'
released - July, 1996 - W3C recommendation for
HTML 3.2 (Wilbur) - January, 1997 - HTML 4.0
draft (evolved from Cougar) released - July, 1997
- HTML 4.0 becomes W3C proposed recommendation -
November, 1997 - HTML 4.0 becomes W3C
recommendation - December, 1997 - HTML 4.0
revised and certified W3C recommendation - April,
1998 - Draft released for 'Reformulating HTML in
XML' (codename Voyager) - December, 1998 - XHTML
1.0 first working draft released - January, 1999
- XHTML 1.0 becomes W3C Proposed Recommendation
- August, December 1999 - XHTML 1.0 becomes W3C
Recommendation - January, 2000
35
TUTORIAL
36
 
http//www.cet.sunderland.ac.uk/webeng/html-tutori
al/htmltutorialindex.htm
This week..
Question - Answers..
37
TUTORIAL

• Read through the following on the web tutorial
• First Steps
• ..
• Putting Graphics into Web Pages
• Start writing your own pages
• Answer the tutorial questions

38
TABLES AND FORMS ALIGN right Name
Card
number
Expires
Telephone
ALIGNleft
NAMEname SIZE18
NAMEcardnum SIZE18
NAMEexpires-month SIZE2/ NAMEexpires-year SIZE2
NAMEphone SIZE18