Phil Campbell (LSBU) Session 2 Other Common Tags IMG Finding images Tables Anchor Tags Web layouts Tables Exercise Summary of attributes

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

Phil Campbell (LSBU) Session 2 Other Common Tags IMG Finding images Tables Anchor Tags Web layouts Tables Exercise Summary of attributes