Session 2

Phil Campbell (LSBU)

Session 2Other Common Tags

IMGFinding images

TablesAnchor TagsWeb layouts

Tables ExerciseSummary of attributes


Review

• Start / End tags• HTML, TITLE, HEAD, BODY, B, I, U, FONT, BR, P, OL, UL, LI

• Attributes

<FONT SIZE="…">

<FONT COLOR="…">

<FONT FACE="…">

<P ALIGN="center">

<BODY BGCOLOR="LightRed">


<IMG> The image tag

<HTML>

<HEAD>

<TITLE> First image example</TITLE>

</HEAD>

<BODY>

<H1> Here is an image</H1>

Here is a picture

<IMG SRC="images\Cat01.gif"></IMG>

All Done

</BODY>

</HTML>


<IMG>


<IMG> - attributes

ALIGN

ALT

HEIGHT

WIDTH

IMG has a large number of attributes which include:

Describes position of the image with respect to the surrounding text

Provides a pop-up when the mouse is over the image

Size of the image

"bottom""left""middle""right""top"


Finding the image

<IMG SRC="images\Cat01.gif"></IMG>

Current location

Cat01.gifother HTML

files

images


Finding the image

<IMG SRC="backup\images\Cat01.gif"></IMG>

Current location

Cat01.gif

other HTML files images

backup


Finding the image

Current location

Cat01.gif

<IMG SRC="..\info\images\Cat01.gif"></IMG>

images

info

c:\

stuff junk

aa

MyPage

mySitebb

Relative Address


Finding the image

Current location

Cat01.gif

<IMG SRC="..\info\images\Cat01.gif"></IMG>

images

info

c:\

stuff junk

aa

MyPage

mySitebb

Relative Address


Finding the image

Current location

Cat01.gif <IMG SRC="c:\stuff\mySite\info\images\Cat01.gif"></IMG>

images

info

c:\

stuff junk

aa

MyPage

mySitebb

Absolute Address


TABLE

...

<TABLE>

</TABLE>

<TR>

</TR>

<TR>

</TR>

<TD> one </TD> <TD> two </TD>

<TD> three </TD> <TD> four </TD>

one twothree four


Using Tables<HTML><HEAD> <TITLE>first Table</TITLE></HEAD><BODY> <H1> A Table </H1> <TABLE> <TR><TD> one </TD> <TD> two </TD></TR> <TR><TD> three </TD> <TD> four </TD></TR> </TABLE></BODY></HTML>


Using Tables

<HTML><HEAD> <TITLE>first Table</TITLE></HEAD><BODY> <H1> A Table </H1> <TABLE BORDER=1> <TR><TD> one </TD> <TD> two </TD></TR> <TR><TD> three </TD> <TD> four </TD></TR> </TABLE></BODY></HTML>


Using Tables<HTML><HEAD> <TITLE>first Table</TITLE></HEAD><BODY> <H1> A Table </H1> <TABLE BORDER=0> <TR> <TD> <B>Cat</B> </TD> <TD> <IMG SRC="images\Cat01.gif"></IMG> </TD> </TR> <TR> <TD> <B>Felix</B> </TD> <TD><IMG SRC="images\felix_thinking.gif"></IMG>

</TD> </TR> </TABLE></BODY></HTML>

felix and cat

using table attributes


Anchor tags

2 kinds of anchor.

1. Name a location in the document to jump to.

2. Mark a piece of text in the document as a hypertext jump which allows the user to move to another location or another document


Hyperlinks

<A NAME="jewels"></A>Names a location in a document that can be jumped to.

<A HREF="#jewels">click here</A>Jumps from this location to the location called jewels.

go to page 5

Anchor


Hyperlinks

<A HREF="MyPage.html">click here</A>Jumps from this location to document MyPage.html.

<A HREF="MyPage.html#target">click here</A>

Jumps from this location to location target in document MyPage.html.


Hyperlinks<A HREF="../../services/info.html">

Jumps from this location to document info.html which is to be found 2 folders above and in a folder called services

Jumps from this location to document info.html which is to be found on the web site lsbu.ac.uk in a folder called jfl

<A HREF="www.lsbu.ac.uk/jfl/info.html">


Jumping to the default page

<A HREF="www.lsbu.ac.uk/jfl/">

Jumps from this location to document in jfl on site www.lsbu.ac.uk by opening the file index.html or default.htm On most servers use index.html. Microsoft servers generally use default.htm

http://www.lsbu.ac.uk/


Connecting Pages

Home

Linear

…


Connecting PagesHome

……

Hierachical


Connecting Pages

Home

Pictures

Links

hobbies

Mixed topology


Tables Exercise

ALIGN = "center"BORDER="1"

H1

COLOR="darkgreen"SIZE = "+2"


<HTML><HEAD><TITLE>Using Tables Exercise</TITLE></HEAD><BODY> <H1> This is an exercise</H1>

<TABLE ALIGN="center" BORDER="1"> <TR> <TD><FONT COLOR="darkgreen" size= "+2"> Student No</FONT></TD> <TD><FONT COLOR="darkgreen" size= "+2"> Name</FONT></TD> </TR> <TR><TD>1234567</TD><TD>Fred Smith</TD></TR> <TR><TD>3212323</TD><TD>Jamila Patel</TD></TR> <TR><TD>1525355</TD><TD>Gunter Awale</TD></TR> </TABLE> </BODY> </HTML>


Summary

<HTML><HEAD><TITLE><BODY><FONT><TABLE><TR><TD><P><BR><HR>

We have covered the following HTML Tags

<H1>..<H6><LI><OL><UL><IMG><A NAME="***"><A HREF="***"><B><I><U>

Attributes: BGCOLOR BACKGROUND


Summary




Attributes: COLOR SIZE FACE


Summary




Attributes: ALIGN BORDER WIDTH BGCOLOR


Summary




Attributes: ALIGN: center justify left right


Summary




Attributes: TYPE:(OL) A A,B,C … a a,b,c … I I,II,III,IV… i i,ii,iii 1 1,2,3 TYPE (UL) circle disc square

VALUE


Summary




Attributes: ALIGN ALT BORDER HEIGHT WIDTH SRC

Documents

Session 2