Title: Dec 11 3:40 PM (1 of 11)

Size: px

Start display at page:

Download "Title: Dec 11 3:40 PM (1 of 11)"

Alfred Lane
5 years ago
Views:

1 ... <title>basic iframe</title> <style type="text/css"> body {color: brown; font family: "Times New Roman"} </style> <h1>this is a test of using iframe</h1> Here I have set up two iframes next to each other and said that the source for them is a separate page I wrote called iframecontent.html. Next, I have said if you click on the line, I will load a different page into the iframe that ws named second. The results are shown on the next page. <p>this is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible a problem if you want to work with previous browser generations.</p> <iframe src="iframecontent.html" name="first"></iframe> <iframe src="iframecontent.html" name="second"></iframe> <p> <a href="iframeother.html" target="second">click here to change message in the second frame</a> </p> Title: Dec 11 3:40 PM (1 of 11)

2 ... <title>basic iframe</title> <style type="text/css"> body {color: brown; font family: "Times New Roman"} </style> <h1>this is a test of using iframe</h1> I have now clicked and the new page has been loaded into the second frame. The page is very basic it just has this line of code. <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" lang="en" xml:lang="en" dir="ltr"> <title>basic iframe content</title> <p>this is the content of the other iframe.</p> <p>this is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible a problem if you want to work with previous browser generations.</p> <iframe src="iframecontent.html" name="first"></iframe> <iframe src="iframecontent.html" name="second"></iframe> <p> <a href="iframeother.html" target="second">click here to change message in the second frame</a> </p> Title: Dec 11 3:45 PM (2 of 11)

3 This is a very basic setup with two columns. It is controlled by the CSS <title>two columns using CSS</title> <link href="twocolumns.css" rel="stylesheet" type="text/css" /> <h1 class="header">this is the header for the two columns</h1> <div class="leftcol"> <p>this is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to 1 if you encounter problems with older browsers. <img src="cisa.gif" /><br /></p> <p>this is some more text just to fill.</p> <div class="maincol"> <p>this is the main body of the page. <img src="cisa.gif" /><br /> This is some more text.</p> <div class="footer">the footer Note that the leftcol will be laid out according to the specs in the CSS which say:.leftcol { width: 300px; float: left; margin left: 0px; padding: 5px; } The colum is 300px and will float to the left with no margin to the left. Title: Dec 11 3:49 PM (3 of 11)

4 This is a very basic setup with two columns. It is controlled by the CSS <title>two columns using CSS</title> <link href="twocolumns.css" rel="stylesheet" type="text/css" /> <h1 class="header">this is the header for the two columns</h1> <div class="leftcol"> <p>this is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to 1 if you encounter problems with older browsers. <img src="cisa.gif" /><br /></p> <p>this is some more text just to fill.</p> <div class="maincol"> <p>this is the main body of the page. <img src="cisa.gif" /><br /> This is some more text.</p> <div class="footer">the footer Note that the maincol will be laid out according to the specs in the CSS which say:.maincol { margin left: 350px; border left: 4px solid brown; padding: 5px; } The starts 350 px in and has a left border that is solid brown. This gives the start for the second column and lays out the line that makes it clear that there are two columns. Title: Dec 11 3:57 PM (4 of 11)

5 This is a very basic setup with two columns. It is controlled by the CSS <title>two columns using CSS</title> <link href="twocolumns.css" rel="stylesheet" type="text/css" /> <h1 class="header">this is the header for the two columns</h1> <div class="leftcol"> <p>this is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to 1 if you encounter problems with older browsers. <img src="cisa.gif" /><br /></p> <p>this is some more text just to fill.</p> <div class="maincol"> <p>this is the main body of the page. <img src="cisa.gif" /><br /> This is some more text.</p> <div class="footer">the footer This is a spacer and a good explanation for its use is at: { clear: both; } Essentially this clears the floating that we have on the leftcol so that the columns are clear. Title: Dec 11 3:57 PM (5 of 11)

6 Title: Dec 11 4:06 PM (6 of 11)

7 This is a very basic setup with two columns. It is controlled by the CSS <title>two columns using CSS</title> <link href="twocolumns.css" rel="stylesheet" type="text/css" /> <h1 class="header">this is the header for the two columns</h1> <div class="leftcol"> <p>this is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to 1 if you encounter problems with older browsers. <img src="cisa.gif" /><br /></p> <p>this is some more text just to fill.</p> <div class="maincol"> <p>this is the main body of the page. <img src="cisa.gif" /><br /> This is some more text.</p> <div class="footer">the footer.header { text align: center; font size: 24px; margin top: 4px; border bottom: 4px solid brown; margin bottom: 0px; } This sets up the header as aligned in the center and give the border and margin settings. Title: Dec 11 3:58 PM (7 of 11)

8 This is a very basic setup with two columns. It is controlled by the CSS <title>two columns using CSS</title> <link href="twocolumns.css" rel="stylesheet" type="text/css" /> <h1 class="header">this is the header for the two columns</h1> <div class="leftcol"> <p>this is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to 1 if you encounter problems with older browsers. <img src="cisa.gif" /><br /></p> <p>this is some more text just to fill.</p> <div class="maincol"> <p>this is the main body of the page. <img src="cisa.gif" /><br /> This is some more text.</p> <div class="footer">the footer The footer also is set up using this CSS:.footer { border top: 4px solid brown; font size: 24px; text align: right; padding: 2px 10px 0px 0px; clear: both } Title: Dec 11 4:12 PM (8 of 11)

9 Meta tags were used to provide descriptions and key words to browsers. Because they were overused and because people put in key words irresponsibly, most search engines do not give them much or any weight today. Title: Dec 11 4:17 PM (9 of 11)

10 Title: Dec 11 4:22 PM (10 of 11)

11 <HTML> <HEAD> <TITLE>Images of BCC</TITLE> <META http equiv="refresh" content="8; URL=bccpage2.html"> </HEAD> <BODY> <DIV ALIGN=CENTER> <TABLE> <TR> <TD><IMG SRC="bcc1.JPG" width="320" height="240"></td> <TD><IMG SRC="bcc2.JPG" width="320" height="240"><td> </TR> <TR> <TD></TD> <TD><IMG SRC="bcc3.JPG" width="320" height="240"></td> </TR> </TABLE> </DIV> </BODY> </HTML> This is an example of meta used to move on to the next page which is bccpage2.html. This technique is not widely used anymore. <HTML> <HEAD> <TITLE>Images of BCC</TITLE> <META http equiv="refresh" content="1; URL=bccpage3.html"> </HEAD> <BODY bgcolor=beige> <DIV ALIGN=CENTER> <TABLE> <TR> This is bccpage2.html and sends the viewer to bccpage3.html <TD><IMG SRC="bcc3.JPG" width="320" height="240"></td> <TD><IMG SRC="bcc4.JPG" width="320" height="240"><td> </TR> <TR> <TD><IMG SRC="bcc5.JPG" width="320" height="240"></td> <TD></TD> </TR> </TABLE> </DIV> </BODY> </HTML> Title: Dec 11 4:14 PM (11 of 11)

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?