1. Web Pages I Jeffrey Muday Department of Biology Wake Forest University

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

3. Skills Web vocabulary Introductory HTML Creation of your own “Home-page” Introduction to Dreamweaver, MS-Word as page creation tools

4. Vocabulary 1 Web/Internet = World-Wide-Web of computer networks URL - Uniform Resource Locator

5. 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.)

6. 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.

7. 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

8. 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

9. 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

10. HTML Tags A Tag is surrounded by “ ” brackets Unary tags: like (line break) Binary tag like: affected element, affected element

11. 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)

12. Format Tags Bold face: Bold Italic face: Italic Underline: Underlined

13. Hyperlink Tags email link: click to email me web site: Wake Forest

14. Is this on the test? NO!!!!! We can use page generators of editors

15. Web Editors Convenient, fast way to create pages Don’t have to know HTML Site management features

16. 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

17. 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

18. Mounting your page must be logged into the network! \\acfiles\www-home have the students locate this directory

19. Accessing your page show right-click selection of Dreamweaver allow students to edit their page

20. What’s Next Javascript CGI scripting Active Server Pages DHTML XML

21. Thanks! I am available to help you with your web pages! Contact me -- mudayja@wfu.edu Phone me - 758-6171

22. 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.

23. 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

24. What can’t we do? Advanced HTML Javascript, Vbscript, Java integration XML, DHTML, ASP, PHP

25. Task 1: Text Elements Simply… cut text from Windows Text Document Paste into the text box in CourseInfo

26. Task 2: Links Using a a Hyperlink Tag The text that shows All links are REMOTE http://www.wfu.edu/~mudayja/mydocument.html

27. Task 3: Pictures Using the IMG (image tag)

28. Task 4: Other Hypertext Markups Advanced markup text can be created by Dreamweaver or MS-Word User must maintain a separate HTML page

29. 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