Download - Session 2
![Page 1: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/1.jpg)
Phil Campbell (LSBU)
Session 2Other Common Tags
IMGFinding images
TablesAnchor TagsWeb layouts
Tables ExerciseSummary of attributes
![Page 2: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/2.jpg)
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">
![Page 3: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/3.jpg)
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>
![Page 4: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/4.jpg)
Phil Campbell (LSBU)
<IMG>
![Page 5: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/5.jpg)
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"
![Page 6: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/6.jpg)
Phil Campbell (LSBU)
Finding the image
<IMG SRC="images\Cat01.gif"></IMG>
Current location
Cat01.gifother HTML
files
images
![Page 7: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/7.jpg)
Phil Campbell (LSBU)
Finding the image
<IMG SRC="backup\images\Cat01.gif"></IMG>
Current location
Cat01.gif
other HTML files images
backup
![Page 8: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/8.jpg)
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
![Page 9: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/9.jpg)
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
![Page 10: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/10.jpg)
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
![Page 11: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/11.jpg)
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
![Page 12: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/12.jpg)
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>
![Page 13: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/13.jpg)
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>
![Page 14: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/14.jpg)
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
![Page 15: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/15.jpg)
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
![Page 16: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/16.jpg)
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
![Page 17: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/17.jpg)
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.
![Page 18: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/18.jpg)
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">
![Page 19: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/19.jpg)
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
![Page 20: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/20.jpg)
Phil Campbell (LSBU)
Connecting Pages
Home
Linear
…
![Page 21: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/21.jpg)
Phil Campbell (LSBU)
Connecting PagesHome
……
Hierachical
![Page 22: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/22.jpg)
Phil Campbell (LSBU)
Connecting Pages
Home
Pictures
Links
hobbies
Mixed topology
![Page 23: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/23.jpg)
Phil Campbell (LSBU)
Tables Exercise
ALIGN = "center"BORDER="1"
H1
COLOR="darkgreen"SIZE = "+2"
![Page 24: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/24.jpg)
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>
![Page 25: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/25.jpg)
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
![Page 26: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/26.jpg)
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
![Page 27: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/27.jpg)
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
![Page 28: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/28.jpg)
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
![Page 29: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/29.jpg)
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
![Page 30: Session 2](https://reader035.vdocuments.site/reader035/viewer/2022062520/56815985550346895dc6c60e/html5/thumbnails/30.jpg)
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 ALT BORDER HEIGHT WIDTH SRC