290 likes | 423 Views
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”
E N D
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