exploring office 2003 – grauer and barber enhancing the web page chapter 3 bcis 1405 session 15
TRANSCRIPT
![Page 1: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/1.jpg)
Exploring Office 2003 – Grauer
and Barber
Enhancing the Web Page
Chapter 3
BCIS 1405 Session 15
![Page 2: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/2.jpg)
Formatting withCascading Style Sheets
Styles pre-define formats Allows changes to be made quickly All styles are defined in one place Makes for Global Formatting
Changes made in one place affects all Best to put Style tag in HEAD section
![Page 3: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/3.jpg)
Cascading Styles
Example: All Body text to be centered
<HEAD>
<STYLE type = “text/css”>
Body {text-align: center}
</STYLE>
</HEAD>
<BODY>
etc …
![Page 4: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/4.jpg)
Defining a CLASS for Style
Class used in two places In HEAD Style definition In Body text
HEAD EXAMPLE:<STYLE type =“text/css”>
P {font-style: normal}P.it {font-style: italics}P.color {color: red}
</STYLE>
![Page 5: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/5.jpg)
Defining a CLASS for Style(Continued)
Class used in two places In HEAD Style definition In Body text
BODY Text EXAMPLE:
<P class = “it”> This text will be in italics </P>
<P> This text is not affected <\P>
<P class = “color”> This text is red <\P>
<P> This text is not affected <\P>
![Page 6: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/6.jpg)
HTML to Show Use of Classes
![Page 7: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/7.jpg)
RESULTING WEB PAGE
![Page 8: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/8.jpg)
Mixing Classes with Other Tags
Adding a Bold Tag
![Page 9: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/9.jpg)
BOLD HAS BEEN ADDED
![Page 10: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/10.jpg)
Adding a Horizontal Line
Placing a line or ruler across the page
Use the <HR> tag No closing tag Can change width and length of the line Used to divide a page
![Page 11: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/11.jpg)
Example:<STYLE type = “text/css”>
HR {height:10; color: blue}</STYLE>
<BODY>
<BR><BR>
<HR></BODY>
![Page 12: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/12.jpg)
Result of Adding a Horizontal Line
10 Point Blue Line inserted
![Page 13: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/13.jpg)
Inserting Pictures / Graphics
Can include universal formats .JPG (best for photographs) .GIF (most browsers accept this format)
Use <IMG> Must use SRC=“filename” attribute for source EXAMPLE:
<IMG SRC=“A:\picturename.jpg”> No closing tag
![Page 14: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/14.jpg)
Inserting Pictures / Graphics
Can use ALT= alternate attribute to display EXAMPLE: <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”>
This will display “Company CEO” rather than the file name (“A:\picturename.jpg”)
Other attributes available are HEIGHT, WIDTH, FLOAT (causes browser to load quicker) Height & Width are measured in pixels Float defines position (Left, Right, Center)
![Page 15: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/15.jpg)
Inserting Pictures / Graphics
EXAMPLE using Height, Width, Float
<IMG SRC=“A:\picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”>
Better to use Classes for each image size
<STYLE type=“text/css”> IMG.ceoPic1 {width: 40; height: 200; float: center}</STYLE> … body text …<IMG SRC=“A:\picturename.jpg” class=“ceoPic1” ALT=“Company CEO”>
![Page 16: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/16.jpg)
Adding Background Color
Add a STYLE that applies to the BODY tag
EXAMPLE:
<STYLE type=“text/css”>
BODY {background-color: #0000FF}
</STYLE>
This will create a blue background
![Page 17: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/17.jpg)
Common Colors
COLOR HEX EQUIVALENTRed #FF0000
Green #00FF00Blue #0000FFBlack #000000White #FFFFFFTan #DEB887
Turquoise #19CCDFMagenta #FF00FFYellow #FFFF00
![Page 18: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/18.jpg)
Using a Graphic as Background
Use image as background (instead of color) EXAMPLE for BODY background
<STYLE type=“text/css”>
BODY {background-image: url (A:\classroom2.jpg)}
</STYLE>
Image should be light in color for better reading of page
![Page 19: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/19.jpg)
RESULT of Classroom as background
![Page 20: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/20.jpg)
Result of using a small picture as a background
(Browser tiles the image and repeats it to cover background)
![Page 21: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/21.jpg)
Changing Text Color
Can change color of different text types <P> <BODY> <H1>, <H2>, etc.
Can change color of hypertext links Can change color of visited links Can change color of active links
![Page 22: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/22.jpg)
Changing Text Color
BODY Colors
EXAMPLE of White Text with Blue Background
<STYLE type=“text/css”
BODY {color: #FFFFFF; background-color: #0000FF}
</STYLE>
![Page 23: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/23.jpg)
Applied to previous Web Page
![Page 24: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/24.jpg)
To Insert Special CharactersYou can use Name or Code
CHARACTER NAME CODE
© © ©
® ® ®
È È È
¥ ¥ ¥
£ £ £
> > >
< < <
& & &Must use Name or Code for “<“ because HTML uses that for start of a tag
IF A < B would be coded: IF A < B or IF A < B
![Page 25: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/25.jpg)
Inline Styles
Used rarely – Single style definition is preferable
Used when a style is to be used only once How it works:<H1> <B style=“font-size: 48”> L</B>ove </H1>
Would produce: Love
![Page 26: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/26.jpg)
Using Tables
To better organize data for user Columns and rows (intersection is a cell) Data placed in cells Table contents are between:
<TABLE>
and
</TABLE>
tags
![Page 27: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/27.jpg)
Table Syntax
Start each row with:
<TR> tag
End each row with:
</TR> tag
Everything between these tags will appear in one row
![Page 28: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/28.jpg)
Table Syntax
<TABLE>
<TR>
… text in First row
</TR>
<TR>
… text in Second row
</TR>
</TABLE>
![Page 29: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/29.jpg)
Table Syntax
Use the <TH> and </TH> tags for column head Will make contents BOLD for Col. Headings EXAMPLE:<TABLE>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
Will create: Qty Price Cost
![Page 30: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/30.jpg)
Table Syntax
Use the <TD> and </TD> tags for column data<TABLE>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>
![Page 31: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/31.jpg)
Table SyntaxAdding a Border
Use the <TD> and </TD> tags for column data<TABLE BORDER=4>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>
![Page 32: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/32.jpg)
Result of Adding a Tableto our Example Web Page
![Page 33: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/33.jpg)
Table SyntaxWider Border & More Spacing
Use the <TD> and </TD> tags for column data<TABLE BORDER=12 CELLSPACING=12>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>
Wider Border
More space between cells
![Page 34: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/34.jpg)
![Page 35: Exploring Office 2003 – Grauer and Barber Enhancing the Web Page Chapter 3 BCIS 1405 Session 15](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e7e5503460f94b8108c/html5/thumbnails/35.jpg)
ASSIGNMENT
See online assignment for Session 15
Due at beginning of next class