1 / 30

Session 2

Session 2. IMG Finding images Tables Anchor Tags Web layouts Tables Exercise Summary of attributes. Other Common Tags. 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">

eman
Download Presentation

Session 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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)

  3. <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)

  4. <IMG> Phil Campbell (LSBU)

  5. HEIGHT WIDTH <IMG> - attributes IMG has a large number of attributes which include: ALIGN Describes position of the image with respect to the surrounding text "bottom" "top" "middle" "left" "right" ALT Provides a pop-up when the mouse is over the image Size of the image Phil Campbell (LSBU)

  6. Current location other HTML files Cat01.gif Finding the image <IMG SRC="images\Cat01.gif"></IMG> images Phil Campbell (LSBU)

  7. Current location backup images other HTML files Cat01.gif Finding the image <IMG SRC="backup\images\Cat01.gif"></IMG> Phil Campbell (LSBU)

  8. c:\ stuff junk mySite aa bb Current location MyPage Relative Address Cat01.gif Finding the image info images <IMG SRC="..\info\images\Cat01.gif"></IMG> Phil Campbell (LSBU)

  9. c:\ stuff junk mySite aa bb Current location MyPage Relative Address Cat01.gif Finding the image info images <IMG SRC="..\info\images\Cat01.gif"></IMG> Phil Campbell (LSBU)

  10. c:\ stuff junk mySite aa bb Current location MyPage Absolute Address Cat01.gif Finding the image info images <IMG SRC="c:\stuff\mySite\info\images\Cat01.gif"></IMG> Phil Campbell (LSBU)

  11. TABLE one two ... <TABLE> </TABLE> three four <TR> </TR> <TR> </TR> <TD> one </TD> <TD> two </TD> <TD> three </TD> <TD> four </TD> Phil Campbell (LSBU)

  12. 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)

  13. 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)

  14. 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)

  15. Anchor tags 2 kinds of anchor. • Name a location in the document to jump to. • 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)

  16. Anchor 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 Phil Campbell (LSBU)

  17. 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)

  18. 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 <A HREF="www.lsbu.ac.uk/jfl/info.html"> 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 Phil Campbell (LSBU)

  19. 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)

  20. Connecting Pages … Home Linear Phil Campbell (LSBU)

  21. Connecting Pages Home Hierachical … … Phil Campbell (LSBU)

  22. Connecting Pages Pictures Mixed topology Home hobbies Links Phil Campbell (LSBU)

  23. H1 ALIGN = "center" BORDER="1" COLOR="darkgreen" SIZE = "+2" Tables Exercise Phil Campbell (LSBU)

  24. <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)

  25. Summary We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Attributes: BGCOLOR BACKGROUND Phil Campbell (LSBU)

  26. Summary We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Attributes: COLOR SIZE FACE Phil Campbell (LSBU)

  27. Summary We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Attributes: ALIGN BORDER WIDTH BGCOLOR Phil Campbell (LSBU)

  28. Summary We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> Attributes: ALIGN: center justify left right <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Phil Campbell (LSBU)

  29. 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 We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Phil Campbell (LSBU)

  30. Summary We have covered the following HTML Tags <HTML> <HEAD> <TITLE> <BODY> <FONT> <TABLE> <TR> <TD> <P> <BR> <HR> Attributes: ALIGN ALT BORDER HEIGHT WIDTH SRC <H1>..<H6> <LI> <OL> <UL> <IMG> <A NAME="***"> <A HREF="***"> <B> <I> <U> Phil Campbell (LSBU)

More Related