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 WorldWide-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/mypi
c.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