1 / 29

Introduction to Building Web Pages: Skills and Tools for Beginners

Discover the fundamentals of web page creation in this informative overview from the Department of Biology at Wake Forest University. Learn essential web vocabulary, HTML basics, and how to use accessible web tools like Dreamweaver and MS Word. This guide will demystify the World Wide Web and introduce you to key concepts like URLs, HTML tags, and web page anatomy. You'll also get hands-on guidance to create your own homepage on CourseInfo, making it a perfect starting point for your web development journey.

kerryn
Download Presentation

Introduction to Building Web Pages: Skills and Tools for Beginners

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 “<“ “>” brackets • Unary tags: like <BR> (line break) • Binary tag like: <B>affected element</B>, <A>affected element</A>

  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: <B>Bold</B> • Italic face: <I>Italic</I> • Underline: <U>Underlined</U>

  13. 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>

  14. Is this on the test? • NO!!!!! • We can use page generators of editors

  15. Web Editors • Convenient, fast way to create pages • Don’t 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. What’s Next • Javascript • CGI scripting • Active Server Pages • DHTML • XML

  21. Thanks! • I am available to help you with your web pages! • Contact me -- mudayja@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 can’t 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 • <A HREF=“your url goes here”>The text that shows</A> • All links are REMOTE http://www.wfu.edu/~mudayja/mydocument.html

  27. Task 3: Pictures • Using the IMG (image tag) • <IMG SRC=“http://www.wfu.edu/~mudayja/mypic.jpg”>

  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

More Related