web pages i
DESCRIPTION
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” - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/1.jpg)
Web Pages I
Jeffrey MudayDepartment of BiologyWake Forest University
![Page 2: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/2.jpg)
Goals
• Demystify the World-Wide-Web• Learn how to build a Web page• Introduction to available Web tools• Introduction to WFU web mounts
![Page 3: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/3.jpg)
Skills
• Web vocabulary• Introductory HTML• Creation of your own “Home-page”• Introduction to Dreamweaver, MS-Word as
page creation tools
![Page 4: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/4.jpg)
Vocabulary 1
• Web/Internet = World-Wide-Web of computer networks
• URL - Uniform Resource Locator
![Page 5: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/5.jpg)
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.)
![Page 6: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/6.jpg)
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.
![Page 7: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/7.jpg)
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
![Page 8: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/8.jpg)
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
![Page 9: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/9.jpg)
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
![Page 10: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/10.jpg)
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>
![Page 11: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/11.jpg)
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)
![Page 12: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/12.jpg)
Format Tags
• Bold face: <B>Bold</B>• Italic face: <I>Italic</I>• Underline: <U>Underlined</U>
![Page 13: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/13.jpg)
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>
![Page 14: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/14.jpg)
Is this on the test?
• NO!!!!!• We can use page generators of editors
![Page 15: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/15.jpg)
Web Editors
• Convenient, fast way to create pages• Don’t have to know HTML• Site management features
![Page 16: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/16.jpg)
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
![Page 17: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/17.jpg)
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
![Page 18: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/18.jpg)
Mounting your page
• must be logged into the network!• \\acfiles\www-home• have the students locate this directory
![Page 19: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/19.jpg)
Accessing your page
• show right-click selection of Dreamweaver• allow students to edit their page
![Page 20: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/20.jpg)
What’s Next
• Javascript• CGI scripting• Active Server Pages• DHTML• XML
![Page 21: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/21.jpg)
Thanks!
• I am available to help you with your web pages!
• Contact me -- [email protected]• Phone me - 758-6171
![Page 22: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/22.jpg)
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.
![Page 23: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/23.jpg)
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
![Page 24: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/24.jpg)
What can’t we do?
• Advanced HTML• Javascript, Vbscript, Java integration• XML, DHTML, ASP, PHP
![Page 25: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/25.jpg)
Task 1: Text Elements
• Simply… cut text from Windows Text Document
• Paste into the text box in CourseInfo
![Page 26: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/26.jpg)
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
![Page 27: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/27.jpg)
Task 3: Pictures
• Using the IMG (image tag)• <IMG
SRC=“http://www.wfu.edu/~mudayja/mypic.jpg”>
![Page 28: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/28.jpg)
Task 4: Other Hypertext Markups
• Advanced markup text can be created by Dreamweaver or MS-Word
• User must maintain a separate HTML page
![Page 29: Web Pages I](https://reader036.vdocument.in/reader036/viewer/2022070500/5681683b550346895dde07a0/html5/thumbnails/29.jpg)
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