Post on 22-Dec-2015
Phil Campbell (LSBU)
Session 2Other Common Tags
IMGFinding images
TablesAnchor TagsWeb layouts
Tables ExerciseSummary of attributes
Phil Campbell (LSBU)
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">
Phil Campbell (LSBU)
<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>
Phil Campbell (LSBU)
<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"
Phil Campbell (LSBU)
Finding the image
<IMG SRC="images\Cat01.gif"></IMG>
Current location
Cat01.gifother HTML
files
images
Phil Campbell (LSBU)
Finding the image
<IMG SRC="backup\images\Cat01.gif"></IMG>
Current location
Cat01.gif
other HTML files images
backup
Phil Campbell (LSBU)
Finding the image
Current location
Cat01.gif
<IMG SRC="..\info\images\Cat01.gif"></IMG>
images
info
c:\
stuff junk
aa
MyPage
mySitebb
Relative Address
Phil Campbell (LSBU)
Finding the image
Current location
Cat01.gif
<IMG SRC="..\info\images\Cat01.gif"></IMG>
images
info
c:\
stuff junk
aa
MyPage
mySitebb
Relative Address
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
TABLE
...
<TABLE>
</TABLE>
<TR>
</TR>
<TR>
</TR>
<TD> one </TD> <TD> two </TD>
<TD> three </TD> <TD> four </TD>
one twothree four
Phil Campbell (LSBU)
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>
Phil Campbell (LSBU)
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>
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
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.
Phil Campbell (LSBU)
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">
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
<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>
Phil Campbell (LSBU)
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
Phil Campbell (LSBU)
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: COLOR SIZE FACE
Phil Campbell (LSBU)
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: ALIGN BORDER WIDTH BGCOLOR
Phil Campbell (LSBU)
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: ALIGN: center justify left right
Phil Campbell (LSBU)
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: 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