Web Pages I

Jeffrey Muday

Department of Biology

Wake 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