Summer Seminar 2002 Dr. Don Needham (USNA ’83) Computer Science Department U.S. Naval Academy

Summer Seminar 2002Summer Seminar 2002

Dr. Don Needham (USNA ’83)Dr. Don Needham (USNA ’83)

Computer Science DepartmentComputer Science Department

U.S. Naval AcademyU.S. Naval Academy

Admin NotesAdmin Notes

Restrooms – Next to the elevatorPlease sign Name and Address SheetLogin Procedures

1. Press <Ctrl>-<Alt>-<Delete> Keys <Ctrl>-<Alt>-<Delete> Keys simultaneously2. User name: sseminarsseminar3. Password: sseminarsseminar4. Log on to: CS-STUDENTS CS-STUDENTS5. Press OkOk Button

AgendaAgenda

Why Computer Science?Why Computer Science?

USNA Computer Science DepartmentSearching the WebIntroduction to HTML


Why consider majoring in Computer Science?Why consider majoring in Computer Science?– A truly marketable degree, potential for growth – Can keep current with CS as a Naval Officer– Job availability (both in and out of the Navy!)– The #1 fastest growing field in the world – 5 of the 6 richest humans in the world in 1999 made 5 of the 6 richest humans in the world in 1999 made

their fortunes in computer-related fieldstheir fortunes in computer-related fields


Skills you will learn while earning your degree– Programming skills in languages such as

• C++C++ (the #1 industry computer language)• JavaJava• LISP / Scheme• Assembler• HTML HTML / XML / XML

– Working familiarity with powerful programming tools and environments such as

• Microsoft Visual Studio (Visual C++, Visual Basic, InterDev)• Microsoft .NET• J++ Builder. • Linux


Skills you will learn while earning your degree (cont.)– Distributed computing solutions– Networking knowledge ranging from the hardware

level to the application level – Experience with 2-dimensional and 3-dimensional

graphics – Programming at the hardware level using assembly

to control registers, input and output devices, etc.

AgendaAgenda

Why Computer Science?USNA Computer Science DepartmentUSNA Computer Science Department

Searching the WebIntroduction to HTML

USNA Computer Science DeptUSNA Computer Science Dept

USNA Computer Science DepartmentUSNA Computer Science Department– B.S. in Computer Science– Nationally Accredited by the Accreditation Board for

Engineering and Technology (ABET)– Fourteen faculty members

• Seven Civilian • Seven Military

USNA Computer Science DeptUSNA Computer Science Dept

USNA Computer Science Department USNA Computer Science Department (cont.)– Strong Core Curriculum– Opportunities to explore the following areas in depth

• Computer Networks• Software Engineering• Artificial Intelligence and Robotics• Computer Architecture• Computer Graphics

– For more information, check out our website:• www.cs.usna.eduwww.cs.usna.edu

USNA CS MajorsUSNA CS Majors

Recent Activities of USNA CS majors:– Summer Internships

• National Security Agency (NSA)• Naval Research Lab (Washington DC)

– Information Assurance (Attacked by NSA!)– Beowulf Cluster– Netcentric Warfare (Trident Scholar)– Autonomous Underwater Vehicle competition

AUV CompetitionAUV Competition

Competing against other universities July 31stSunny Southern CaliforniaGoal: To broaden the interest in AUVs and associated technologies by challenging a new generation of engineers to perform realistic missions in the underwater environment

Mission Mission

Depth Sensor and Altimeter work together to figure out depth of pinger

Camera takes picture and stores barcode in file – the depth of the barcode is also stored

BEAT ARMY

NAVY ‘02

U S N A

UNITED STATESNAVAL ACADEMY

Basic ControlBasic Control

Sensors PC104 Thrusters

Desired Course Actual CourseControl

Algorithm+

_

USNA’s AUV EntryUSNA’s AUV Entry

SEA TRIALSSEA TRIALS

Watch the AUV in action . . .

AgendaAgenda

Why Computer Science?USNA Computer Science DepartmentSearching the WebSearching the Web

Introduction to HTML

How big is the Web?How big is the Web?

Conservative estimates place Web at 2-3 Billion pages of informationMore liberal estimates place Web near 10 Billion pages of information

How much of the Web How much of the Web is covered?is covered?

1347

575

550

500

500 350

250

0

500

1000

1500

Millions of Pages Indexed

Web Coverage: Summer 2001

Search EnginesSearch Engines

GoogleGoogle (www.google.com)– Uses “Link Popularity” algorithm to rank Web pages– Customizable Toolbar add-on for MS-Internet Explorer

AltavistaAltavista (www.altavista.com)– Includes directory results from LookSmart– Babelfish translation service

ExciteExcite (www.excite.com)– Includes directory results from LookSmart

Search EnginesSearch Engines

A Web page database systemA Web page database system– System ElementsSystem Elements

• ““Spider” or “Robot”Spider” or “Robot”– Software program that visits a Web page, records information within the

page, and follows embedded links to other pages– Returns to sites on a periodic basis to update Index

• Index (Database)Index (Database)– Contains copy of desired Web pages found by the Spider– Contains referencing information based on a set desired criteria to Web

pages scanned by the Spider• Search EngineSearch Engine

– Finds matches to queries– Ranks Web pages according to implemented algorithm

Search Engine QueriesSearch Engine Queries

Natural Language QueriesNatural Language Queries– Query looks like a normal questionQuery looks like a normal question

• What is a black hole?• Where can I find information about Navy sports?

– AdvantageAdvantage• No difficult syntax to learn

– DisadvantagesDisadvantages• Imprecise• Many irrelevant results

Examples– www.askjeeves.com, www.altavista.com, www.excite.com

Search Engine QueriesSearch Engine Queries

Pattern Matching Pattern Matching – Form query using keyword or group of keywordskeyword or group of keywords

• Use unique keywords• Avoid keywords that might be in irrelevant documents

– Search engine returns any page that “contains”“contains” these keywords

• May occur anywhere on the page• Within the first 100 words of the page• In the title of the page• Occur frequently on the page

Improving Search QueriesImproving Search Queries

CapitalizeCapitalize proper nouns and namesWildcardsWildcards– Usually use the “**” character– Help find:

• Different forms of a word• Common misspellings• Alternate spellings

– Examples:• wish*: Finds wish, wishes, wishful, wishbone• organi*ation: Finds organisation or organization


Specify “mandatorymandatory” keywords– To require that a word appears on page, use “++”

character • Example: +peanut +origin

– To ensure a word does not appear on page, use “--” character

• Example: +peanut +origin --snoopy


Phrase MatchingPhrase Matching– Enclose a sequence of words in quotations “phrase”– Examples

• “Yosemite camping reservations”• “Ken Griffey”


Restricting Search Domains– Domain Searches (e.g., .org, .com)

• Domain:edu (MSN)• host:edu (Alta Vista)• site:edu (Google)

– Site Searches• domain:microsft.com (MSN)• host:microsoft.com (Alta Vista)• site:microsoft.com (Google)

AgendaAgenda

Why Computer Science?Why Computer Science?USNA Computer Science DepartmentSearching the WebIntroduction to HTML

HTMLHTML

Hypertext Markup Language (HTML)Hypertext Markup Language (HTML)– Set of "markup" symbols or codes (tags)– Inserted in a text file which is intended for display on

a Web browser– Tells Web browser how to display a Web page's

words and images

Creating HTML DocumentsCreating HTML Documents

Need:– A text editortext editor to create an ASCII file with an

extension of .html or .htm (use html for our purposes)• Notepad• Word Processor (save as an ASCII text file)• HTML Editor

– A Web browserWeb browser to test your pages

Getting StartedGetting Started

Start NotepadNotepad– Do NOT use WordPad– Save empty document to

• Click File/Save As…File/Save As…• Save in: S:\ drive• File name: May use any name BUTBUT must append .html after name

Start Internet ExplorerInternet Explorer– Open file created with Notepad

• Click File/Open…/Browse…File/Open…/Browse…• Select your file

– Browser should appear blank

HTML SyntaxHTML Syntax

<TAG attribute1=”value1” attribute2=”value2”><TAG attribute1=”value1” attribute2=”value2”>Item to be formatted</TAG></TAG>

Number of attributes vary (may be none)Best to put quotes around attribute valuesEnding or closing tag same as starting tag with “/” in front of the tag name– Not all tags require closing tags

Not case sensitive– <HR> and <hr> are both okay

Basic HTML DocumentBasic HTML Document

Create basic HTML skeleton in Notepad document– Only enter the <tags><tags>

<html> <html> <head><head>

head elements </head> </head> <body><body>

body elements </body> </body> </html></html>

Creating a TitleCreating a Title

The <title> tagThe <title> tag– Goes between <head> and

</head> tags– Should provide a concise concise

description of pagedescription of page– Displayed in title barDisplayed in title bar of

browser window– Used as default bookmark default bookmark

descriptiondescription– Can affect how document is

indexed by some search engines

ExampleExample– <title><title>Text</title></title>

<html> <head>

<title>…</title><title>…</title></head> <body>

body elements </body> </html>

Update Web Page ViewUpdate Web Page View

SaveSave Notepad document– Click File/SaveFile/Save

RefreshRefresh browser– Click View/RefreshView/Refresh– Title text now appears in

browser’s Title Bar

<html> <head>

<title>…</title><title>…</title></head> <body>

body elements </body> </html>

Creating HeadingsCreating Headings

The <h> tagThe <h> tag– Six levelsSix levels of headings (n is a

value between 1 and 6) – Goes between <body> and

</body> tags– Most prominent <h1>…</h1><h1>…</h1>– Least prominent <h6>...</h6><h6>...</h6>

<html> <head>

<title>…</title></head> <body>

<h1>…</h1><h1>…</h1>

<h4>…</h4> <h4>…</h4>

</body> </html>

HTML Paragraph FormattingHTML Paragraph Formatting

Whitespace is ignored in HTML– Carriage Returns– Spaces (more than one)– Tabs– Use it in your HTML code to increase readability

In order to break up text use:– ParagraphParagraph tag: <p><p>Text</p></p>– BreakBreak tag: <br><br>

HTML Paragraph FormattingHTML Paragraph Formatting

Centering textCentering text– Use <center><center> tag

• Example: – <center><center>Text</center></center>

– Use ALIGNALIGN attribute with heading or paragraph tags• Example:

– <p align=“center”><p align=“center”>Text</p></p>– <h3 align=“center”><h3 align=“center”>Text</h3></h3>

ColorsColors

Two ways of defining colors in HTML– Color NamesColor Names

• May vary from browser to browser– Color NumberingColor Numbering

• 216 safe colors• www.usna.edu/Masters/Resources/colors.htm

FF F7 E3

RedGreen

Blue

Setting DefaultsSetting Defaults

<body><body> tag attributes– Used within the <body> tag– To set the back ground color, use bgcolor bgcolor

• <body bgcolor = “blue”>• <body bgcolor = “0000ff”>

– To set the default color for all text, use text text• <body text = “red”>• <body text = “ff0000">

– To set the background as one image, use background background• <body background = “usnalogo.gif”>

These attributes are deprecated (still used, but being phased out)

Setting FontsSetting Fonts

Use <font><font> tag with desired attribute(s)Font Tag Attributes Attributes– SizeSize

• Seven sizes (1 - smallest, 7 - largest, 3 - default)• <font size = “4”>This is some text</font>

– ColorColor• <font color = “blue”>This will be blue</font>

– FaceFace• <font face = “arial”>• Use with caution – User must have font installed on their computer

This tag is deprecated (still used, but being phased out)

Syntactic-Based StylesSyntactic-Based Styles

Specify how text should appear – <b> bold – <i> italic – <u> underline – <tt> teletype (fixed-width font)– <sub> subscript– <sup> superscript

Used in pairs (e.g., <b>U.S. Naval Academy</b>)

TablesTables

UseUse <table> <table> tag to help organize information or graphics– Use <tr> tag to define a

row• Use one or more <td>

within a row to assign contents to a particular column position in a particular row

<table> <tr><td>

information</td> <td>

information</td> </tr></table>

Including ImagesIncluding Images

Image Tag AttributesImage Tag Attributes– src - URL to retrieve image from– alt - Text to be displayed when moused over (or when using a

text browser)– height - expressed in pixels or percentage of browser window– width - expressed in pixels or percentage of browser window

Example<img src=“usnalogo.gif” alt=“Naval Academy” height=”50" width=”100">

Creating HyperlinksCreating Hyperlinks

Anchor TagAnchor Tag– Tag used to place hyperlinks in hypertext documents– Browsers change hyperlink text color & underline

Three basic parts of a hyperlink– Beginning and ending anchor tag pair <a> ... </a>– href (hyperlink reference )attribute

• URL of page to be loaded when hyperlink is selected– Text (or graphic) that appears on-screen as the hyperlink

Examples– <a href=“http://www.usna.edu”>U.S. Naval Academy</a>– <a href=“mailto:[email protected]”>E-mail me!</a>

ResourcesResources

TutorialsTutorials– www.all-html.com, www.htmlgoodies.com – www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html – www.webmonkey.com

Free Clipart– www.freegraphics.com – www.clipart.com

Free Counters, Guest Books, Chat RoomsFree Counters, Guest Books, Chat Rooms– www.freecenter.com – www.thefreesite.com

SummarySummary

Computer Science is an exciting, rapidly changing exciting, rapidly changing fieldfieldComputer Science professionals are always in high demand– Many jobsMany jobs– Top SalariesTop Salaries

The USNA Computer Science DepartmentUSNA Computer Science Department is a top-notch program which will prepare you for an exciting future in today’s technology-driven world