Introduction to HTML and Dreamweaver

1
Introduction to HTML and Dreamweaver
Tools for Supporting Educational Technologies

• Belinda Allen
• Web graphic designer

2
TOPICS

• HTML
• TAGS
• The document structure
• Text formatting
• Using images
• Links
• Page layout
• Style sheets
• Dreamweaver tools and features

3
HTML Hyper Text Markup Language

• HTML documents are text only
• You can write HTML on a word processor, or
  Notepad, WordPad, or SimpleText
• A web editor makes it much easier to generate
  HTML, but it also makes it harder to learn

4
HTML Hyper Text Markup Language
Annotate text such that the browser knows HOW to
display it using TAGS
Tags USUALLY come in pairs.. An opening tag
and a closing
5
HTML - activity

• Open Internet Explorer
• Open this web page from the tutorial resources
  index.html
• Go to ViewSource
• Open the UNSW home page
• Go to ViewSource

6
TAGS

• Tags USUALLY come in pairs, an opening tag
  and a closing
• Tags may be nested to apply multiple formats
  Text Text
• Tags may apply to blocks of text individual text
  elements or the entire document
• Some layout and appearance tags are now
  deprecated

7
TAGS

• Deprecated HTML
• Some tags will be phased out in favour of more
  efficient coding solutions, such as Cascading
  Style Sheets (CSS)
• Some deprecated HTML tags still in use such
  are type face and
  attributes italics bold
• Browser technology still supports deprecated
  tags, while inconsistently supporting Style sheet
  settings.
• Web page editing tools (such as Dreamweaver)
  still create deprecated tags but support and edit
  CSS.
• The tag is useful within WebCT to change
  the appearance of the type.

8
TAGS

• Block level tags
• Paragraph (creates new paragraph) The quick
  brown fox jumped over the lazy dog.
• Quotation (Indents text from both sides)
• The quick brown fox jumped over the
  lazy dog.

9
TAGS

• Inline tags, eg
• Emphasis, strong
• The quick brown fox jumped over the
  lazy dog
• (The word FOX will be displayed in Italics and
  the word LAZY will be displayed in Bold)

10
The quick brown fox jumped over the
lazydog.
TAGS - Document tags
Fast Foxesody

11
TAGS
Some Tags are single ended such as
starts
new line is a horizontal line inserts
an image
12
TAGS

• Tag attributes
• Some tags support attributes which change the
  behaviour of the tag, eg
• Width60 is an attribute of
  the tag
• adds colour and size
  attributes to the font display (Note US
  spelling!). The closing tag in this case simply
  reads

13
TAGS - Activity

• Open the file blank.html in Wordpad
• Insert your cursor below the opening BODY tag
  
• Write some text and format it using the
  following tags
• Paragraph , Blockquote Bold ,
  Italic , Underline Strong ,
  Emphasis Line break
  , Horizontal line
  
• Save the file, then open it in Internet Explorer

14
The Document
Fast Foxesody

15
Document head contains information ABOUT the
document such as its TITLE
Fast Foxes
16
The Document
Fast Foxesody

17
The document BODY contains everything that is
rendered in the browser window
18
Page properties
Properties of the document may be set as
attributes of the tag. This includes
background colour or image, text colour, link
colours and page margins. eg, for the example on
the previous slide colorwhite The quick brown fox
jumped over the lazydog.
19
Meta tags
Meta tags are located in the of the
document, and contain a variety of information
about the document. Some of this information is
used by search engines in order to catalogue your
document. content"description of the web page
content" keyword keyword keyword keyword"
20
Text formatting
Heading commands There are six (6) heading
commands through . is the largest
and is the smallest. This is a main
heading Font Size Commands To control font
size in the body of the text, the tag
with a SIZE attribute may be used. The font size
attributes available are 1 to 7, -1 to -7 and 1
to 7 Sizes 1-7 are absolute sizes, while the
plus and minus sizes are relative to the web
browsers default font. this is
small text
21
Text formatting

• Fonts or Typefaces
• A typeface attribute may be added to a
  tag, eg
• The fonts that you specify must be available on
  the computer of the person browsing the page, or
  the typeface will revert to whatever is the
  default display font for the local browser.
• select a commonly available typeface
• provide alternative similar typefaces
• select the typeface for screen legibility
• egsans-serif "

22
Text formatting
Aligning Text By default in HTML, text is
justified to the left of the screen. To set text
alignment add an attribute to the paragraph
tag, eg Text in here is pushed
to the right Text in here
is centred on screen Text in
here is pushed to the left
23
Text formatting
The tag The block level tag is a way
of dividing the document into blocks for
individual formatting. It may be used to apply
alignment and many other attributes (such as
Style sheet information) to larger blocks of
content, eg This text is
aligned in the centre of the screen src"Image1.jpg" width"300" height"208"
so is this image
24
Text formatting
White space
Spaces and line breaks need to be explicitly
stated

One Green bottleTwo green bottles
One green bottle Two green bottles

One Green bottle
One green bottle
One Green bottle
Two green bottles
One green bottle Two green bottles

OnenbspGreen nbspbottle
One green bottle
25
Text formatting - Activity

• Open your HTML file in Wordpad
• Apply formatting to the using the following
  tags
• Title , Background colour colorHeadings etc., Font and font
  attributes (color, size, typeface), Alignment
  
• Save the file, then open it in Internet Explorer

26
Using images

• not embedded in the HTML file
• reference to the image file
• need to be copied to web server with HTML file
• sized and compressed for the internet
• JPEG or GIF format only

27
Using images

• Attributes of Images
• Source, size, border and description
• border0 altdescription of image
• src file name and path to the image file
• width and height width and height in pixels of
  the image
• border width (in pixels) of any border around
  the image
• alt text description of the image
• Required attribute
• Other possible attributes are alignment, low
  source and vertical and horizontal space (for
  space around the image).

28
Using images

• src attribute and file paths
• Pathway from your current document to the image
  file
• Relative file path
• Have images in the same directory as HTML file,
  or place images in a subdirectory named images
• Files should not be moved independently, or
  links within the HTML will need to be
  re-established

29
Using images
src attribute and file paths
From hello.htm to the image image.gif../topi
c2/image.gif
30
Using images
src attribute and file paths
image.gif
/topic2/image.gif
31
Links

• hyperlinks allow navigation between documents
  by clicking with their mouse on a link
• Links may be from a piece of text or a graphic
• Link to other websites (external), to pages in
  your own site (local), or to a location on the
  same page (anchor)
• For local documents use the relative file path,
  eg "Link text
• For external files use the full URL, eg
  http//www.edtec.unsw.edu.au

32
Links

• Links Syntax
• (anchor) tag with an href attribute, which
  works like the image src attribute
• The quick brown foxajumped over the lazy dog
  
• links the word fox to the fox website, and the
  word dog to an html document called dog.
• stands for Anchor. It begins the link to
  another page.
• HREF stands for Hypertext REFerence refers to
  the address of the linked document
• http//www.fox.com is the FULL ADDRESS of the
  link. HREFaddress is an attribute of the
  Anchor tag.
• closes the link tag.

33
Links
Links Syntax Images may also be used to anchor
links The quick brown foxjumped over the lazy dog
hrefdog.html In this
case, an image called doggy.gif is a link that
goes to dog.html.
34
Links - activity

• Open your HTML file in Wordpad
• Add links to UNSW home page, your school
  home page
• Add a link to go from the bottom to the top of
  page

35
Page Layout

• Layout control inherent in HTML virtually
  non-existent
• Text display size varies from browser to browser
• Content may be placed into table cells to hold
  it in place on the page
• Tables
• Individual layout areas
• Ability to vary alignment and background colours
• May be combined or divided to accommodate content

36
Page Layout
Eg Page set up in Dreamweaver table and page
viewed in browser
37
Page Layout

• Layers (the DIV tag)
• Called layers in Dreamweaver)
• Allow absolute or relative positioning for
  blocks of content, even layered over each other.
• Rendering of some DIV attributes is still
  inconsistent between browsers
• Some positioning of elements may also be set in
  stylesheets (in combination with the DIV tag).

38
Cascading Style Sheets

• CSS is VERY powerful
• Can be used to control the appearance of
  hundreds of web pages in a single site OR only a
  single page in hundreds pages on a web site.
• Same principle as styles in Microsoft Word
  define a style then apply it to a block of text.
• Easiest way is to Redefine an HTML tag. This
  means that the behaviour of that tag is
  consistently modified across the document
• To use the style sheet globally, add a link tag
  into the head of your documentsheets" href"sample.css" type"text/css"and
  save the tag definitions in a separate document
  with a .css extension, eg, styles.css.