Web Pages I

Jeffrey MudayDepartment of BiologyWake Forest University

Goals

• Demystify the World-Wide-Web• Learn how to build a Web page• Introduction to available Web tools• Introduction to WFU web mounts

Skills

• Web vocabulary• Introductory HTML• Creation of your own “Home-page”• Introduction to Dreamweaver, MS-Word as

page creation tools

Vocabulary 1

• Web/Internet = World-Wide-Web of computer networks

• URL - Uniform Resource Locator

Vocabulary 2

• HTML = Hypertext Markup Language• Hand Coding = using plain-text editors to

create web pages• Page Editors = tool that allows page

creation by automatic generation of HTML codes. (e.g. Dreamweaver, MS-Word, etc.)

What is the “Web”

• A collection of HTML pages connected via “hyperlinks”

• Also used as a nick-name for the World-Wide-Web (WWW)

• the set of all WWW pages that are available via the Internet.

URL - what it is

• stands for Uniform Resource Locator• a.k.a the Web address• http://www.wfu.edu• other services: telnet, ftp, https, uucp, nntp• if no file is specified, the daemon may supply

– index.html (wfu default)– default.htm or default.html

The Anatomy of a Web Page

• created from an HTML file• text display is dictated by embedded

formatting tags• tags may integrate external elements into

the page• scripting determines dynamic behavior

What is HTML

• HTML = Hypertext Markup Language• Plain-text files comprised of text, hyperlinks,

markup tags, scripting elements• Hyperlinks - linkages to external elements• Can be created with any plain-text editor, page-

editor, or from dynamic script action• Files will typically have HTML or HTM

extension

HTML Tags

• A Tag is surrounded by “<“ “>” brackets• Unary tags: like <BR> (line break)• Binary tag like: <B>affected element</B>,

<A>affected element</A>

Types of Tags

• Formatting Tags (Font, Tables, etc.)• Hyperlink Tags (links, actions)• Element Tags (Image)• “Meta” Tags (Keyword, Comments, etc)• Scripting (Call to Java, CGI, and Javascript)

Format Tags

• Bold face: <B>Bold</B>• Italic face: <I>Italic</I>• Underline: <U>Underlined</U>

Hyperlink Tags

• email link: <A HREF=“emailto:mudayja@wfu.edu”>click to email me</A>

• web site: <A HREF=“http://www.wfu.edu”>Wake Forest</A>

Is this on the test?

• NO!!!!!• We can use page generators of editors

Web Editors

• Convenient, fast way to create pages• Don’t have to know HTML• Site management features

Creating a web page on CourseInfo

• Have the students create their home-page under CourseInfo

• this page is a “starting point” for the classroom web portfolio

Creating your WFU page

• http://www.wfu.edu/update.html• have students create their home-page• new URL is:

HTTP://www.wfu.edu/~yourusername• examples:

– http://www.wfu.edu/~silver– http://www.wfu.edu/~mudayja

Mounting your page

• must be logged into the network!• \\acfiles\www-home• have the students locate this directory

Accessing your page

• show right-click selection of Dreamweaver• allow students to edit their page

What’s Next

• Javascript• CGI scripting• Active Server Pages• DHTML• XML

Thanks!

• I am available to help you with your web pages!

• Contact me -- mudayja@wfu.edu• Phone me - 758-6171

Addendum: CourseInfo Homepages

• Goal - create web pages in CourseInfo

– disclaimer: CourseInfo provides for simple web pages that are contained within the CourseInfo site. These pages can only be accessed by your classmates and instructors. Provides a simple “jumping off point” for more advanced web page design.

What can we do in CourseInfo?

• Simple linear text pages• Simple display of REMOTE pictures• Simple page markup (in HTML)• Simple Hyperlinking to external pages

What can’t we do?

• Advanced HTML• Javascript, Vbscript, Java integration• XML, DHTML, ASP, PHP

Task 1: Text Elements

• Simply… cut text from Windows Text Document

• Paste into the text box in CourseInfo

Task 2: Links

• Using a a Hyperlink Tag• <A HREF=“your url goes here”>The text

that shows</A>• All links are REMOTE

http://www.wfu.edu/~mudayja/mydocument.html

Task 3: Pictures

• Using the IMG (image tag)• <IMG

SRC=“http://www.wfu.edu/~mudayja/mypic.jpg”>

Task 4: Other Hypertext Markups

• Advanced markup text can be created by Dreamweaver or MS-Word

• User must maintain a separate HTML page

Method--

• use F10 to view the HTML code• use Cntrl-A to select it all• use Cntrl-C to copy• use Cntrl-V to paste into