HTML

1
HTML

• Computing Concepts
• HTML Links and Images

2
Aims

• Give an introduction to HTML
• Enough to produce 4 linked pages containing
  graphics
• Much more in Levels I or H

3
Previous lecture

• The World Wide Web
• Standards
• HTML
• Web Standards
• Basic document
• Attributes
• A selection of tags explained
• Problem solving

4
Learning outcomes

• This lecture
• Linking to other documents
• Images
• Good code
• More problem solving

5
Do you know?

• What can you use to write HTML?
• What software do you use to view HTML?
• What is the file extension for an HTML document?
• Why write tags in lowercase?
• Give an example of a text element

6
Answers

• Notepad
• Internet Explorer
• .htm or .html
• Recommended for HTML 4.01
• lth1gt Hello lt/h1gt

7
Tags you should know

• The tags to make up a basic document
• The tags to make a heading
• The tags or attributes to put things in the
  centre
• The attributes to colour your document

8
A basic document
1

• lthtmlgt
• ltheadgt
• lttitlegt lt/titlegt
• lt/headgt
• ltbodygt
• ltpgt lt/pgt
• lt/bodygt
• lt/htmlgt

• The start/end of an HTML document.
• Header information is not displayed in the
  browser window.
• The title is displayed in your browser's caption
• The content that will be displayed in your
  browser
• Text element

2
3
4
5
9
Home pages

• Your home page is the centre of your website
• This is where you tutor will start to look at
  your work
• It is good practice to call your home page
  index.htm (or index.html)
• Keep all your pages together in one folder
• If you have a lot of pages organise your files
  into folders

10
The Anchor tag

• The ltagt tag defines an anchor element it can be
  used in two ways
• To link to another document by using the href
  attribute
• In your website
• Another website
• To link within a long document, by using the name
  or id attribute (covered in minor way at Level
  C)

11
The Anchor tag

• The ltagt tag creates a link to another document.
• An anchor can point to any resource on the Web
• An HTML page, an image, a sound file, a movie
• It is a paired tag
• The words between the open and close of the
  anchor tag will be displayed as a hyperlink.

12
Relative links

• Relative
• lta hreflinks.htm"gt
• Text to be displayed
• lt/agt

13
Absolute links

• Absolute uses website address
• lta hrefhttp//www.hope.ac.uk"gt
• Liverpool Hope University
• lt/agt
• You must get the address right
• Hint go to the webpage first and copy the
  address into Windows clipboard, then paste it
  into your document

Must be included
14
Images

• Images - Are not included within a webpage, they
  exist as separate files and are linked from the
  webpage
• Usually have a larger file size than the webpage
  itself

15
File count

• If a webpage contains 3 images, how many files
  need to be downloaded?
• The answer is 4, one HTML file and three image
  files

16
The image tag

• Main attributes (there are more)
• src filename, may include path
• width in pixels
• width in pixels
• alt alternative text
• align alignment

17
The src attribute

• Images are defined with the ltimggt tag
• The ltimggt tag is empty
• it contains attributes only
• it has no closing tag
• src stands for source
• ltimg srcfilenamegt

18
Image files
path
filename

• ltimg srcimages/video.jpggt
• Good practice to store in a folder called images
• The folder images must sit in the same folder as
  your webpage

folder

• If you copy your work remember to copy both the
  images and the webpages

19
Image file types

• There are three image file types that can be used
  in Web pages
• GIF, eg home.gif
• JPG, eg robin.jpg
• PNG, eg map.png
• Supported by browsers because of compression
  capabilities

20
Alt attribute

• The alt attribute is used to define an "alternate
  text" for an image
• ltimg srcimages/video.jpg
• alt a picture of a video cardgt

21
The "alt" attribute is important

• For visually impaired people
• The "alt" attribute tells the reader what he or
  she is missing on a page if the browser can't
  load images

22
Height and width attributes

• ltimg srcimages/video.jpg
• alt a picture of a video card
• width200 height300gt
• Helps the page load faster
• Measured in pixels
• To find out the image dimensions right click on
  an image in your browser and select properties
• Not used to resize your Image use Fireworks for
  that

23
Align attribute

• Any text that follows the image can be set to
  start at the top edge, middle or bottom of the
  image.
• align top
• align middle
• align bottom

24
An Image as a link

• lta hrefindex.htmgt
• ltimg srcimages/house.gif width65 border0
  height38 altHome pagegt
• lt/agt
• If you do not use border0 a line will appear
  around the image

25
How many wrong things?
Wrong

• ltimg scr images\house.gif width200
  height300gt

• ltimg srcimages/house.gif
• width200 height300
• altHome pagegt

Right
26
The comment tag

• lt!-- This is a comment --gt
• A comment will be ignored by the browser
• You can use comments to explain your code
• Reference where images have been obtained
• You are expected to comment your code for your
  assignment

27
File organisation
It is normal to keep your images in one folder
called images

• The starting point of your web is called the home
  page
• Name your home page file index.htm or index.html
• Use folders to organise image files
• Large sites use folders to organise HTML files

28
Prepare for XHTML

• XHTML is the next generation of HTML
• You should start preparing for it now
• The most important thing you can do is to start
  writing valid HTML 4.01
• Write your tags in lower case
• Always close your tag elements.
• Never end a paragraph without lt/pgt.

29
Good code

• Make it readable
• use tabbing and new lines
• Use the comment tag

30
Self appraisal

• Write down 3-5 things can you remember from
  today's lecture

31
Review

• Today
• Links
• Relative
• Absolute
• Images
• File organisation
• Good code

• Finally, next lecture
• Tables
• Style

32
Validation

• Validate Your HTML Files as HTML 4.01
• Document Type Definition.
• A correct DTD must be added as the first line of
  the file.
• lt!DOCTYPE HTML PUBLIC
• "-//W3C//DTD HTML 4.01 Transitional//EN"
• "http//www.w3.org/TR/html4/loose.dtd"gt
• http//validator.w3.org/

33
Further Reading

• Tutorial highly recommended
• http//www.w3schools.com/html/
• Reference
• http//www.w3.org/MarkUp/
• Beginners book
• Mac Bride, Teach Yourself HTML Publishing on the
  World Wide Web, 2003, Hodder Arnold Teach
  Yourself, ISBN 0340859555,

34
Questions?