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 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 (line break) Binary tag like: affected element, affected element

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: Bold Italic face: Italic Underline: Underlined

Hyperlink Tags link: click to me web site: Wake Forest

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 have students create their home-page new URL is: examples: – –

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 -- Phone me

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 The text that shows All links are REMOTE

Task 3: Pictures Using the IMG (image tag)

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