What is a Web Page A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. The tags are simple instructions that tell the Web browser how the page should look when it is displayed. The tags tell the browser to do things like change the font size or color, or arrange things in columns. The Web browser interprets these tags to decide how to format the text onto the screen. Web Page Elements <html> <Title> My Page</Title> <Body>... </Html> 1
Using a Browser to View a Web Page After you save your HTML file, you may view your Web page in a browser The HTML file displays in your browser just as it would on the Web Windows allows you to view the page in your browser while keeping Notepad open Log into the coe server and look for a folder called webprac in your directory. Open up the file called webpractice.txt and save it back into directory calling webpractice.html. Open this on in a browser (FireFox or Safari) and have both the Textedit documents and browser window next to each other. TextEdit Document FireFox/Safari Document <html> <Body> This is my first web page This is my first paragraph of text. I would like to talk about how great a teacher I am and why some lucky school district should hire me 2
<html> <Body> <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how great a teacher I am and why some lucky school district should hire me</p> Color You can set the background, text, link color of your page by adding markups to the <Body> attribute There are 16 colors that can be referenced by name-red,green, etc <BODY BGCOLOR= red > <BODY BGCOLOR= #F0DFFF > 3
<html> <Body background= tile.jpg > <Body>.. <html> <Body> <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how <FONT SIZE="+3" COLOR="RED"> great </Font>a teacher I am and why some lucky school district should hire me</p> 4
<html> <Body background= tile.jpg > <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how <FONT SIZE="+3" COLOR="RED"> great </Font>a teacher I am and why some lucky school district should hire me</p> Links Absolute links: links to a file on another server on the internet Relative links: links to a file in your own directory Links within a page Absolute Links Specify the entire URL e.g I go to<a href= http://www.kean.edu >Kean University</A> I go to Kean University 5
Relative Links Relative links: Location of file relative to present web page e.g. <A href= page2.htm > Go to page 2</A> <A href= pages/page2.htm > Go to page 2</A> Go to page 2 Mail Links <A href="mailto:jmith@kean.edu"> </A> <A href="mailto:jmith@kean.edu">john Smith </A> Send mail to John Smith <html> <Body background= tile.jpg > <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how <FONT SIZE="+3" COLOR="RED"> great </Font>a teacher I am and why some lucky school district should hire me</p> <BR>I go to<a href= http://www.kean.edu > Kean University</A> 6
Adding Images Two File Formats -GIF for icons and line drawing -JPEG for photographs <img src= picture.gif > (image in same directory as web page) <img src= images/picture.gif > (image in directory called images) <img src= http://www.kean.edu/~gkolodiy/3122/blue_pap.gif > <html> <Body background= tile.jpg > <img src= record.gif > <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how <FONT SIZE="+3" COLOR="RED"> great </Font>a teacher I am and why some lucky school district should hire me</p> <BR>I go to<a href= http://www.kean.edu > Kean University</A> 7
<html> <Body background= tile.jpg > <center><img src= record.gif ></center> <H1>This is my first web page</h1> <HR> <P>This is my first paragraph of text. I would like to talk about how <FONT SIZE="+3" COLOR="RED"> great </Font>a teacher I am and why some lucky school district should hire me</p> <BR>I go to<a href= http://www.kean.edu > Kean University</A> Using Graphics as links You may use a picture as a hypertext link <img src= record.gif > <A href= http://www.kean.edu> ---- </A> <A href= http://www.kean.edu> <img src= record.gif > </A> This would give you an image of an record with a blue box around it to show that it is a link. For no box add Border=0 to the IMG SRC tag <img src= record.gif Border=0> 8
9 <TD>1</TD> Tables <TD>1</TD> <TD>2</TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> <table> </table> <TD>1</TD> <TD>2<TD> <TD>3<TD> <TD>1</TD><TD>1A</TD><TD>1B</TD> <TD>2</TD><TD>2A</TD><TD>2B</TD> <TD>3</TD><TD>3A</TD><TD>3B</TD> Tables
Tables <TD>1</TD> <TD>1A</TD><TD>1B</TD>1C</TD> <TD>1A</TD><TD>1B</TD>1C</TD> <TD>2A</TD><TD>2B</TD>2C</TD> <TD>3A</TD><TD>3B</TD>3C</TD> 10
<UL> <OL> </UL> </OL> Unordered Lists <H3>Unordered Lists</H3> <UL TYPE= disc > <LI>First item type disc</li> <LI>Second item type disc</li> </UL> <UL TYPE= square > <LI>First item type square</li> <LI>Second item type square</li> <UL> <UL TYPE= circle > <LI>First item type circle</li> <LI>Second item type circle</li> </UL> 11
Ordered Lists <H3>Ordered Lists</H3> <OL TYPE= 1 > <LI>First item type 1</LI> <LI>Second item type 1</LI> </OL> <OL TYPE= A > <LI>First item type A</LI> <LI>Second item type A</LI> </OL> <OL TYPE= a > <LI>First item type a</li> <LI>Second item type a</li> </OL> <OL TYPE= I > <LI>First item type I</LI> <LI>Second item type I</LI> </OL> <OL TYPE= i > <LI>First item type i</li> <LI>Second item type i</li> </OL> Your Web Page title main heading body of Web page H2 heading bulleted list paragraph Bullets 12
Putting Things Anywhere <Div> </Div> Sets apart a section of your page. <div style="position:absolute; left:200px; top:285px; width:600px; height:200px; "> <div style="position:absolute; left:200px; top:285px; width:600px; height:200px; "> <img src= record.gif></div> 13