title slide css 404/504 internet concepts building web pages #2 by ralph bisland

Title Slide

CSS 404/504

Internet Concepts

Building Web Pages #2

ByRalph Bisland

2Copyright Ralph Bisland 2004

Background Colors• To set the background color for the

entire web page, use the BGCOLOR option in the BODY tag.

• Example:

<BODY BGCOLOR=“YELLOW”>


Text Colors

• To set the text color for the entire page, use the TEXT option of the BODY tag.

• Examples:

<BODY TEXT=“DODGERBLUE”>

<BODY BGCOLOR=YELLOW TEXT=BLUE>


Lists

– Unordered lists (aka bulleted lists)Items preceded by bullets

– Numbered listsItems are preceded by numbers

– Definitional listsA value followed by its definition indented

•Types of lists


List Creation• A list requires at least three components

• The list type definition tag

• The list item tagSpecified by <LI> tag

No </LI> tag

• The end of list tag


Unordered Lists• List tag is <UL> or <MENU>

• End of list tag is </UL> or </MENU>• Default bullet is darkened circle• Example:

<UL><LI> Item #1<LI> Item #2<LI> Item #3</UL>


Changing Bullets

• DISK: Small darkened circle

• CIRCLE: Small open circle

• SQUARE: Open rectangle

•Bullets can be changed with the TYPE= clause

Examples:

<UL TYPE=disk><UL TYPE=circle><UL TYPE=square>


Ordered Lists• List tag is <OL>

• End of list tag </OL>• Default item prefix is an integer number

beginning with 1• Example: <OL>

<LI> Item #1<LI> Item #2 <LI> Item #3 </OL>


Extensions To Ordered Lists• Default prefix is an integer number

beginning with 1• Can change the prefix value to integer,

uppercase letters, lowercase letters, uppercase Roman numerals, and lowercase Roman numerals with the TYPE clause

• Can change the starting value with the START clause


Changing Prefix Values• Numbers (1, 2, ..., N)

<OL TYPE=“1”>

• Uppercase Letters (A, B, ... , Z)<OL TYPE=“A”>

• Lowercase Letters (a, b, ... , z)<OL TYPE=“a”>

• Uppercase Roman Numerals (I, II, ...)<OL TYPE=“I”>

• Lowercase Roman Numerals (i, ii, ...)<OL TYPE=“i”>


Changing Starting Values• Integer Values

<OL TYPE =“1” START=“5”>

• Uppercase Letters<OL TYPE=“A” START=“F”>

• Lowercase Letters<OL TYPE=“a” START=“f”>

• Uppercase Roman Numerals<OL TYPE=“I” START=“V”>

• Lowercase Roman Numerals<OL TYPE=“i” START=“v”>


Definitional Lists• Consists of a term and a data definition

of that term

• List tag is <DL>

• Definitional term tag is <DT>

• Data Definition Tag is <DD>


Example Of Definitional List<DL>

<DT>USM<DD>University of Southern Mississippi<DT>LSU<DD>Louisiana State University</DL>

RenderingUSM University of Southern Mississippi

LSU Louisiana State University


Nested ListsLists can be nested to any level

<UL><LI> Southeastern Conference West Division <UL> <LI> LSU <LI> Mississippi State <LI> Auburn <LI> Alabama <LI> Arkansas <LI> Ole’ Miss</UL><LI> Southeastern Conference East Division <UL> <LI> Georgia <LI> Tennessee <LI> Kentucky <LI> Florida <LI> South Carolina <LI> Vanderbilt </UL></UL>


Results Of Example Southeastern Conference West Division

LSU Mississippi State Auburn Alabama Arkansas Ole’ Miss Southeastern Conference East Division Georgia Tennessee Kentucky Florida South Carolina Vanderbilt


Horizontal Ruler• To create a line across the page us the <HR> tag

• Optional clause SIZE=n where n is the thickness of the line in pixels

• Examples:• Creates a line across the page

<HR> <HR SIZE=3>• Optional clause WIDTH is used to specify the length of

the line. WIDTH can be specified as an absolute number of pixels or a % of the screen to cover with the line.<HR WIDTH=50> <HR=WIDTH=50%>


Tables• Tables allow the user to place things in a

row-column organization

• Tables are created with the <TABLE> tag

• Tables end with the </TABLE> tag

• Tables may have an optional caption<CAPTION>...</CAPTION>Captions are centered above table

• Each new row begins with a <TR> tag


Tables (ctd)• Table cells can be headers <TH>

Headers are displayed in boldface

• Table data is defined with <TD> tag

• All table data is left justified

• Browser determines how table is to be rendered

• If text is too long to fit in a cell, it is wrapped

• Anything can be put into a cell


Example Table<TABLE>

<CAPTION>Southern States</CAPTION><TR> <TH>State Name <TH>Population <TH>Governor<TR> <TH>Mississippi <TD>3,500,000 <TD>Barbour<TR> <TH>Louisiana <TD>4,000,000 <TD>H. P. Long<TR> <TH>Alabama <TD>4,000,000 <TD>James</TABLE>


More Stuff On Tables• A border can be placed around a table with the

BORDER clause of the TABLE tag <TABLE BORDER>

• Note: The width of the border can be specified with the BORDER=n clause.

• The absolute size of the table can the specified with the HEIGHT and WIDTH clauses of the TABLE tag <TABLE HEIGHT=300 WIDTH=400>


More Stuff On Tables (ctd)• Data can be aligned LEFT, RIGHT, or

CENTER with the ALIGN clause of the TH or TD commands <TH ALIGN=“right”>text data

• Normally the browser wraps lines of text that are too long to fit on one line within a cell. You may prevent this with the NOWRAP clause. You are now responsible for breaking lines within a cells with the <BR> tag


Table Coloring• The background color of the table can be set with

the BGCOLOR tag.<TABLE BORDER=3 BGCOLOR=red>

• The border of the table can be set with the BBRDERCOLOR tag.<TABLE BORDERCOLOR=green>

• The two can be combined.<TABLE BORDER=3 BGCOLOR=blue BORDERCOLOR=white>


Table Coloring (ctd)• Individual cells and rows can also be colored by

placing the BGCOLOR tag within the TH, TD or TR tag.

• Example:<TR BGCOLOR=red><TH BGCOLOR=yellow>ABC<TD BGCOLOR=blue>XYZ<TD BGCOLOR=ivory> <FONT

COLOR=blue>DEF</FONT>


Table Spacing• To specify the number of pixels (default=1)

between cell entry and cell border, use the CELLPADDING clause.

• To specify the number of pixels (default=2) between cells, use the CELLSPACING tag.

• Example:<TABLE BORDER CELLPADDING=5

CELLSPACING=10>


Multiple Rows/Columns• Cells that span more than one row or

column.• Normally cells span only one row or one

column.• To make a cell span more than one row or

column, use the ROWSPAN or the COLSPAN clauses.

• Example: <TH ROWSPAN=2>some text


Multiple Row Example

<TABLE BORDER> <CAPTION>Counting to Three</CAPTION> <TR> <TH> <TH> <TH>1 <TH>2 <TH>3 <TR> <TH>Spanish <TH> <TD>Uno <TD>Dos <TD>Tres <TR> <TH ROWSPAN=2>Latin <TH>Pig <TD>Oh-bidda-un <TD>Ooh-bidda-tum <TD>Eeh-bidda-thrum <TR> <TH>Classical <TD>Primum <TD>Secundum <TD>Tertium </TABLE>


Links To Other Pages• Major power of web is the ability to

hyperlink to other pages (files)• Can link to:

– Other web pages– Pictures– Sound– Movie– Other parts of the same page

• Browser will automatically highlight and underline links to other files


Hyperlinks• Hyperlink tag is the anchor tag

• Syntax: <A HREF=filename.html>text</A>

• Example: <A HREF=“page2.html”>To see page 2 click

here</A>

• “To see page 2 click here” would be rendered by the browser.

• To link render the page “page2.html”, the user would click on the text


Linking To Other Site Pages• To link to a site that is not in your loginID, you must

place the http:// symbols in front of the URL.• You must also specify the complete URL to the file

you wish the browser to load.• Examples:<A HREF=“http://www.cs.usm.edu/~bisland”>A web page</A>

<A HREF=“http://www.cs.usm.edu/~bisland/mypage.html”>Another web page</A>


Linking To Parts Of The Same Page• Saves on loading overhead

• Allows print of all material at once• Locations to branch to must be named• Syntax: <A NAME=“label-name”>• Example: <A NAME=“Section1”>• To branch to the location use the anchor tag• Location name must be preceded by a # to

indicate that the location is within the current file


Example Of Linking To Same Page...

<A HREF=“#Section1”> To Go to Section 1 </A><A HREF=“#Section2”> to Go To Section 2 </A>...<A NAME=“Section1”>Whatever

<A NAME=“Section2”>Whatever


Changing The Colors Of Links• There are there optional clauses that allow you to

change to colors of hyperlinks.– Vlink: Visited Link– Alink: Active link– Link: Unvisited link

• All of the options are placed in the <BODY> tag.• Example:<BODY LINK=RED ALINK=BLUE VLINK=GREEN>


Images• Pictures can be inserted into your web page.

• To place an image on your page use the IMG tag.• Format: <IMG SRC=“filename.ext” [options]>• Example:<IMG SRC=“LoganAndGrandpa.gif”>

• The image will be placed where ever the browser can insert it on the page.

• An option is ALT=text. If the image can not be displayed the text is displayed.


Images (ctd)• Remember that some images tend to be very

large. This means that they will take a long time to download (especially if your users use telephone lines to access the web.)

• For organizational purposes consider creating a subdirectory for your images. Remember to access the files in a subdirectory, you must use either a relative or absolute path.


Image Formats• Images are stored in binary files (non-

text files) on your server computer.• Images can be stored in many different

formats.• The format type is designated by the file

name extension.• You browser must have access to the

necessary code to render the image on your web page.


Image Formats (ctd)• The code to render your image is either

built into your browser or is accessed through a plug-in.

• The most used file formats are:– .gif: Graphics Image Format– .jpg or .jpeg: Joint Photographic Experts

(or Equipment) Group– .bmp: Bitmap


GIF Files• Pronounced like the peanut butter (Jif).

• Invented by Compuserve.• Very popular.• Very simple format so your browser can handle it

very easily.• Similar to the way a television picture is created.• A picture is made up of a series of hex numbers

that represent picture elements (pixels).


JPEG Files• Uses a compression scheme to store the

image file.• JPEG files are generally smaller than GIF

files, but require more overhead (decompression) to render the picture.

• Very good for storing pictures from digital cameras.

• Not good for any other type pictures.


BMP Files• These files are the ones generated by

computers.

• Except for Internet Explorer most browsers do not allow .bmp files.

• It is best to stay away for .bmp files.


Image Converters• If an image file is in a format that is not

recognized by your browser, there are two things that you can do with it:– Search the web for and then download and install a

plug-in for the file type– Use a program that converts only type file to

another.

• In order to adjust your image, use an image program such as Adobe Photoshop.


How To Get Images• Search the web for them. If you like one,

download it to your account and use it. Beware of copyrighted material.

• Most browsers will allow you to copy a graphic image by placing your cursor atop the image and holding down the right mouse button.

• Create a hyper text link to the file in someone else’s account.

• Google has thousands of images that you may download for free.


How To Get Images (ctd)• Take a picture(s) with a digital

camera/camcorder and upload it to your computer.

• Take a picture with a non-digital camera, scan it, then upload it to your computer.


Borders Around Images

• To adjust the border size (or remove them) around an image, use the BORDER= option.

• Border sizes are always measured in number of pixels.

• Example:

<IMG BORDER = “5” SRC=“mypic.jpg”>


Clickable Images• Called a hypermedia link.

• The user clicks on a picture and then transfers to another page.

• Format:<A HREF=“page1.html”><IMG SRC=“pic.gif”</A>

• Example:<A HREF=“my-page.html”><IMG SRC=“mypic.gif”></A>


Borders Around Clickable Images

• Since clickable images are hypermedia links they have borders around them.

• To adjust the border size (or remove it) us the BORDER= option.

• Example:<A HREF=“my-page.html”>

<IMG BORDER=“0” SRC=“mypic.gif”</A>


Manipulating Images• There are several options that allow you

to manipulate images.

• The things that you can do are:– Place the image on a specific part of a

page (Justification).– Adjust the size of the image.


Justification Of Images• There are three types of image alignments:

left, right, and center.• The default alignment is left.• To align an image use the align= option,

along with the words “left”,”right”, or “center”.• Example:<IMG ALIGN=“RIGHT” SRC=“mypic.gif”>


Aligning Text With Images• Text can be aligned with images.

• One line of text can be placed on either the top, middle or bottom of the image.

• To align text with images, use the align= option, along with the words “top”, “middle”, or “bottom”.

• Examples:<IMG ALIGN=“top” SRC=“mypic.gif”>Ralph<IMG ALIGN=“middle”” SRC=“mypic.gif”>Ralph<IMG ALIGN=“bottom” SRC=“mypic.gif”>Ralph


Text Wrap• If you want to have more than one line of

text aligned to your picture, don’t use align= “top”, “bottom”, or “middle”.

• Use align= “left” or “right”.• The text will wrap around your image.• If you want to clear your text to the bottom

of the image, use the <BR CLEAR=ALL>

tag.


More About Images

• Computer images are made up of lots of colored dots call pixels.

• These pixels are made up of binary numbers (0-255 (decimal)or 00-FF (hex)) representing levels of intensities of red, green, and blue.

• The more pixels per inch that can be displyed the sharper the image.

• Each image has a height and width measured in pixels.


Changing The Size Of An Image• The size (height and width) of a image can be

altered.• To alter the size of a image you must use the

height= and width= options of the image tab.• Example:

<IMG SRC=“mypic.gif” HEIGHT=100 WIDTH=160>

• It is very important that you keep the length and width of the picture in the same ratio.


Thunbnailing• Using a small version of an to link to a

larger version of the same image is called thumbnailing.

• Example:<A HREF=“my-pic.gif><IMG SRC=“my-pic.gif” HEIGTH=50WIDTH=75></A>


Animated GIFs• Images that appear to “move”.

• This is produced by a series of pictures that are displayed one after the other.

• This is created by a program that stores the pictures in sequential order and specifies how much time between the refresh of each image.

• You browser handles the display loop of the images.


Background Images• You may specify an image to be used as

the background on your webpage.• This is done with the BACKGROUND

option of the body tag.• Example:<BODY BACKGROUND=“mypic.gif”>

• Please make sure that your image allow the page “stuff” to be seen.


Sounds

• Be aware that sound files tend to take a while to download.

• Consider using “sound bites”.

• To play sounds your browser must have the necessary plug-in installed.

• Consider using a hypertext link to the sound.


Sound Formats• There are three basic sound formats:

– .wav (wav): Basically a PC format– .au (audio): From Sum Micro systems– .midi (Musical instrument Digital Interface):

Basically for file recorded from musical instruments.

– .ra (RealAudio): Must have Real Audio Player

• You must have a plug-in for the particular type sound file you download.


Using Hypertext Links• You may use a hypertext link to play a

sound file.

• To do this, simply play the destimation file as the HREF.

• Example:<A HREF=“mysong.wav>Play a song</A>


Playing Sounds Directly• There is no standard command to play

sounds directly.• Netscape/Mozilla uses the EMBED

command.• All other browsers us BGSOUND.• Solution: Place both commands in your

web page. The browser will use the one that works with it and ignore the other.


Embed• Format:

<EMBED SRC= “soundfilename” HEIGTH = h WIDTH=w AUTOSTART=true or false LOOP= ALIGN=left, right, or center

</EMBED>

• Soundfilename: The name of the file containing the sound. Must have correct suffix


Embed (ctd)• Autostart: Tue=Start the sound immediately.

False=Start the song from the control box.• Loop: True = plays the song forever. False= plays

it once.• Height, Width, Align: To display the control box.• Example:• <EMBED SRC=“mysong.au” AUTOSTART=TRUE LOOP=TRUE HEIGTH=45 WIDTH=155 ALIGN=LEFT></EMBED>


BGSOUND• Format:

<BGSOUND=soundfilename LOOP=n>

• Loop: The number of times to play the sound file. Use infinity to play forever.

• Example:<BGSOUND=“mysong.au” LOOP=3>


Creating A New Window• When using a hypermedia link, you can

render the link into an new window.

• This is done with the target attribute of the IMG tag.

• Example:

<A HREF=“mypic.gif” target=“New Window”>My pic in a new window</A>


Executing Programs• You may execute server side programs and

display the output on your web page.• Examples: UNIX utilities (date, fortune, etc.)• For these type programs to run, you server

must allow it.• To run these type programs, use the #exec

cmd= command.• This command must be embedded in comment

tags.

Executing Programs (ctd)

• The tag should have an absolute address of the program to be run.

• The program must have the suffix .cgi affixed to its name.

• Example of running the fortune program.


Linking To E-mail• Sometimes it is convenient to have a hyperlink to

send E-mail.• To do this just build a hyperlink to

mailto:E-mail-address• Example:

<A HREF=“mailto:[email protected]”>To send me E-mail, click here</A>

• This will open an E-mail window and the user just fills in the blanks for the address, subject, and body, then clicks on “Send Message”.


Frames• Frames are a mechanism to allow the page

developer to split a window into several “sub windows” or frames.

• Older browsers do not support frames.• Anything that can be rendered in a regular

window can be rendered in a frame.


Frames (ctd)• Frames can be used with text, graphics,

sound, etc.• Frames can divide a screen into rows,

columns, or row/columns.• Frame documents act independently of

each other in most cases.• Note: The BACK button returns the user

to the page before the frame was rendered.


Frame Tags• Frame tags include:

– Frameset: Defines the size and orientation (rows or columns) of the window.

– Frame: Defines what document initially goes in the frame.

– Noframes: Message to display for non-frame compatible browsers.

• The <frame-set> tag replaces the <body> tag in pages.

• If a page contains both a <body> tag and a <frame-set> tag, the frame tags are displayed as text.


The Frameset Tag• Defines the size and orientation of the frame windows.

Format: <frameset {rows=“<definitition>“ | cols=“<definition>“ | rows=“<definition>“ cols=“<definition”}

• Row and/or cols definition can be specified in any of three ways:– An absolute number of pixels– A percentage of the height or width of the frameset– A portion of the remaining space remaining after setting

aside room for adjacent elements.• Framesets must end with the </frameset> tag.


Frameset ExamplesExamples:

<frameset rows=“150,300,150”> <frameset rows=“25%,50%,25%> <frameset rows=“100,*”> <frameset rows=“100,*,200”> <frameset cols=“20%,30%,*”> <frameset rows=“100,200” cols=“200,100”> <frameset rows=“20%,80%” cols=“25%,75%”> <frameset rows=“20%,30%,50% cols=“50%,50%”> <frameset rows=“100,*” cols=“*,100,200”>


The Frame Tag• Defines what will be rendered in the frame:

Format: <frame src=“url” [name=“frame-name”] [scrolling={yes|no}]

Src= The URL of whatever is to be initially rendered in the frame.

Name= A name given to the frame so that its contents can be replaced.

Scrolling= to allow or disallow scrolling (default value = yes)

Examples:

<frame src=“my-text.html”> <frame src=“my-picture.gif”> <frame src=“my-text.html” name=“fill-in”> <frame src=“my-text.html” scrolling=no>


The Noframes TAg• If the browser used to access the page does

not support frames the text message is displayed.

Format: <noframes>Text message</noframes>

Example:

<noframes>Sorry this document can be viewed with Netscape Navigator Version 2.0 or later.<A HREF=“my-document.html”>To go back to the previous page, Click here<</A></noframes>


Complete Frame Example<HTML>

<HEAD><TITLE>Sample Page With Frames</TITLE></HEAD>

<FRAMESET ROWS=“60%,40%”><FRAME SRC=“my-text1.html”><FRAME SRC=“my-text2.html”><NOFRAMES>You gotta have Netscape Navigator 2.0 or better to see this, Bucko.</NOFRAMES></FRAMESET></HTML>


Replacing Frames• A great use of frames is to place a menu of topics

in one frame and the topics in a second frame. Example: Tags in a file called frame.html.

<HTML><HEAD><Title>Test Of Frames</Title></HEAD><FRAMESET COLS="40%,*"> <FRAME SRC="policy-menu.html"> <FRAME SRC="policy-text.html" name="fill-me"><NOFRAMES>If you get this message, your browser does not support frames</NOFRAMES></FRAMESET></HTML>


Replacing Frames (ctd)In a file called policy-menu.html

<HTML><HEAD><TITLE>Class Policies</TITLE></HEAD><BODY>

<CENTER><H1>Class Policies For All Classes<BR>Taught By Ralph B. Bisland, Jr.</H1></CENTER><P><PRE><H3>Basic Information</H3>Office: TEC 218 Phone: 601-266-4949 (Computer Science Office) 601-266-4961 (My Office)E-Mail Address: [email protected]</PRE></P>


Replacing Frames (ctd)<P>

<PRE><H3>Class Schedule For Spring Semester 1996</H3>MWF: Period 1: DBMS Design (CSC 411/511) Period 3: Simulation And Modeling (CSC 636)Tuesday Night: Internet Concepts (CSC 404/505)</PRE></P>

<H3>Class Policy Table of Contents: (Last Revision: Jan 2, 1996)</H3><MENU><LI><A HREF="policy-text.html#Plagiarism" target="fill-me"> Plagiarism</A><LI><A HREF="policy-text.html#Attendance" target="fill-me"> Class Attendance</A><LI><A HREF="policy-text.html#Missing-exams" target="fill-me"> Missing Exams</A><LI><A HREF="policy-text.html#Grading-Scale" target="fill-me"> Grading Scale</A><LI><A HREF="policy-text.html#Tardiness" target="fill-me"> Tardiness For Exams</A>


Replacing Frames (ctd)<LI><A HREF="policy-text.html#Turn-In-Work" target="fill-me">

Turning In Work</A> <LI><A HREF="policy-text.html#Late-Assignments" target="fill-me"> Late Assignments</A><LI><A HREF="policy-text.html#Drop-Policy" target="fill-me"> Drop Policy</A><LI><A HREF="policy-text.html#Test-Regrading" target="fill-me"> Test Regrading Policy</A><LI><A HREF="policy-text.html#Multiple-Finals" target="fill-me"> More Than 2 Finals On The Same Day</A> <LI><A HREF="policy-text.html#Team-Projects" target="fill-me"> Team Project Grading</A><LI><A HREF="policy-text.html#Extra-Assignments" target="fill-me"> Submission Of Extra Assignments</A><LI><A HREF="policy-text.html#Enforcement" target="fill-me"> Enforcement Of Class Policies</A></MENU>

</BODY></HTML>


Replacing Frames (ctd)Contents of the file policies-text.html

<HTML><HEAD><TITLE>Class Policies Text</TITLE></HEAD><BODY>

<CENTER><H1>Class Policies</H1></CENTER>

<H3><A NAME="Plagiarism">Plagiarism</A></H3><P><STRONG>Plagiarism or cheating of any type will not be tolerated.</STRONG>This includes, but is not limited to, copying or collusion on programs,projects, assignments, abstracts, documentation, wandering eyes on tests,turning in previously submitted term papers, using other person'scomputer accounts to do projects, programs, etc. NOTE: I do not mind youdiscussing the logical solution to problems, but not code of any type(Pascal, Ada, SQL, HTML, etc.). If you are caught, you will receive a


Replacing Frames (ctd)grade of "F" in the course and I will bring you before the Computer Science

Disciplinary Board.</P>

<<<<< Stuff deleted>

<H3><A NAME="Enforcement">Enforcement Of Class Policies</A></H3><P>Will I enforce these guidelines during the semester? Why would I takethe time to develop them if I was not going to enforce them?</P>

</BODY></HTML>

title slide css 404/504 internet concepts building web pages #2 by ralph bisland

Documents