Web Pages I
description
Transcript of Web Pages I
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:[email protected]”>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 -- [email protected]• 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