Web Pages I

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 lt gt brackets
• Unary tags like ltBRgt (line break)
• Binary tag like ltBgtaffected elementlt/Bgt,
  ltAgtaffected elementlt/Agt

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 ltBgtBoldlt/Bgt
• Italic face ltIgtItaliclt/Igt
• Underline ltUgtUnderlinedlt/Ugt

13
Hyperlink Tags

• email link ltA HREFemailtomudayja_at_wfu.edugtclic
  k to email melt/Agt
• web site ltA HREFhttp//www.wfu.edugtWake
  Forestlt/Agt

14
Is this on the test?

• NO!!!!!
• We can use page generators of editors

15
Web Editors

• Convenient, fast way to create pages
• Dont 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
Whats Next

• Javascript
• CGI scripting
• Active Server Pages
• DHTML
• XML

21
Thanks!

• I am available to help you with your web pages!
• Contact me -- mudayja_at_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 cant 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
• ltA HREFyour url goes heregtThe text that
  showslt/Agt
• All links are REMOTE http//www.wfu.edu/mudayja/m
  ydocument.html

27
Task 3 Pictures

• Using the IMG (image tag)
• ltIMG SRChttp//www.wfu.edu/mudayja/mypic.jpggt

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