1 / 79

Let’s Make a Web Page

Let’s Make a Web Page. Beau A.C. Harbin NetSERF.org. Topics. General Introduction to WWW Creating HTML pages Intermediate Web sites Advanced Web sites Launching and Testing Web sites Recommendations. General Introduction. The Internet & the World Wide Web.

emele
Télécharger la présentation

Let’s Make a Web Page

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. Let’s Make a Web Page Beau A.C. Harbin NetSERF.org

  2. Topics • General Introduction to WWW • Creating HTML pages • Intermediate Web sites • Advanced Web sites • Launching and Testing Web sites • Recommendations

  3. General Introduction

  4. The Internet & the World Wide Web • The Internet is a network of networks • The World Wide Web is the part of the Internet that is based on hypertext • Web pages are written in HyperText Markup Language (HTML) • Hyperlinks link Web pages together

  5. Browser Software • HTML documents require browser software to interpret HTML code and display results • Different browsers interpret HTML differently • Standard browsers • IE 4.0 + (currently in 5.0) • Netscape 4.0 + (currently in 4.71, 6 PR1)

  6. URLs • A URL is simply a Web site’s address • This address is known as a Uniform Resource Locator • http://www.netserf.org

  7. Defining a Web Site • A Web site is a group of related Web pages and associated files such as images, stylesheets, and scripts • The pages that make up a Web site are typically organized in a hierarchical manner

  8. Components of a Web Page • HTML pages • Images (gifs, jpgs, or pngs) • Hyperlinks

  9. Extending Web Pages • Client-side scripting (Javascript, VBScript) • Dynamic HTML (DHTML) • Server-side scripting (ColdFusion, ASP) • Java Applets • Active X controls • Flash / Shockwave • Embedded movies, audio and animation

  10. HTML and its History

  11. Creating HTML pages

  12. What do you need to build a web page? • Browser software • Netscape, IE, Opera, Lynx, AOL • An editor for writing HTML pages • Allaire HomeSite, Notepad, Front Page • Graphics software (optional) • Paint Shop Pro, Photoshop • FTP software to move pages to server • WS_FTP

  13. HTML Syntax

  14. Coding Rules • Each HTML tag must be surrounded by < > • Names and attributes are not case-sensitive • Attributes are always included in the start tag • Attribute values should be enclosed in quotes • Tags may be nested in other tags • Tags may not overlap

  15. The Basic HTML Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Unknown</TITLE><META> </HEAD> <BODY> <!--Page text goes here --> </BODY> </HTML>

  16. HTML Headings • Six heading levels: H1 - H6 • Should be used in order • Sample • <H2 align=“center”>H2 Heading</H2>

  17. Line Breaks • Line breaks and white space in code are ignored • Use <BR> to force a line break • CLEAR attribute values: • LEFT • RIGHT • ALL • Use <P> to force a paragraph break

  18. Aligning Text Blocks • ALIGN attribute can be used for: Hx, P, HR, DIV • To align an element, use: <DIV align=“ALIGNMENT”> or <P align = “ALIGNMENT”> • LEFT • RIGHT • CENTER

  19. Horizontal Rules • <HR> • SIZE • WIDTH • ALIGN • NOSHADE

  20. Ordered Lists • <OL> encloses the list; <LI> for each list item • Code <OL> <LI>Doe, Jane</LI> <LI>Smith, John</LI> </OL> • Display • 1. Doe, Jane • 2. Smith, John

  21. Unordered Lists • <UL> encloses the list; <LI> for each list item • Code <UL> <LI>Doe, Jane</LI> <LI>Smith, John</LI> </UL> • Display • Doe, Jane • Smith, John

  22. Definition Lists • <DL> encloses list • <DT> for each term • <DD> for each definition • Code <DL> <DT>HTTP</DT> <DD>The Hypertext Transfer Protocol</DD> </DL> • Display: HTTP The Hypertext Transfer Protocol

  23. Nesting Lists • Any list type may be nested inside another list: <UL> <LI>Saints</LI> <UL> <LI>Thomas Aquinas</LI> <LI>Augustine of Hippo</LI> <LI>Catherine</LI> </UL> <LI>HR</LI> </UL>

  24. Tags • Logical tags describe information structure • Physical tags specify display characteristics • HTML recommends avoiding physical tags in favor of Cascading Style Sheets

  25. Logical Tags • <STRONG> strong emphasis (rendered as bold text) • <EM> emphasis (rendered as italics)

  26. Physical Tags • <B> bold • <I> italics • <FONT FACE=“ARIAL” SIZE=“+2” COLOR=“GREEN”> specifies font characteristics

  27. Intermediate Web Sites

  28. Using Links • Clicking a link displays the linked page • Return to the original page using the browser's Back button • Linked pages may be local or on any other web server

  29. Link Syntax • Use the anchor tag <A HREF="http://www.netserf.org">Visit NetSERF’s Home Page</A> • Make an image a link <A HREF="http://www.netserf.org"> <IMG SRC=”netserflogo.gif"></A> • Create a target (bookmark) for another link<A NAME="linkname"></A>

  30. Creating Text Links • Linking to other web sites <A HREF="http://www.netserf.org">Visit NetSERF’s Home Page</A> • Linking to another page in the same web site <A HREF="../nextpage.htm">Next Page</A> • Linking to another point in the same page <A HREF="#linkname">Next Point</A> • Linking to a target in another page<A HREF="nextpage.htm#linkname">The Target</A>

  31. Embedding Images • Images are separate files downloaded after the HTML file • Three types of Image formats: • GIFs • JPGs • PNGs

  32. GIFs • Best suited for computer generated images • Up to 256 colors • Lowering the number of colors will reduce size • Special Types: • Transparent • Animated

  33. JPEGs (JPGs) • Unlimited colors • Best suited for photographs • Compression algorithm to reduce file size

  34. PNGs • Good for all image types • Unlimited colors • Color reduction to decrease file size • Supported natively only by IE 4+, Netscape 4.5+, and Opera 3.0+

  35. Using Images • Use the <IMG> tag: <IMG SRC="logo.gif"> • Rules of thumb in using Images • total image weight no greater than 50-100K • no single image greater than 20-25K

  36. Image Attributes • HEIGHT and WIDTH • ALIGN • ALT • HSPACE and VSPACE <IMG SRC="CSS_positioning.png" WIDTH=400 HEIGHT=300 ALT="CSS" ALIGN="LEFT" HSPACE="2" VSPACE="2" BORDER="0">

  37. Creating Graphics Links • Enclose the <IMG> tag within an <A> tag: <A HREF="http://www.netserf.org"><IMG SRC=”netserflogo.gif"></A>

  38. Using Image Maps • Define areas in an image that link to other pages

  39. Image Map Syntax <IMG SRC="../images/bullets-easy.gif" USEMAP="#map" ISMAP> <MAP NAME="map"> <AREA SHAPE="rect" HREF="seeds.html” COORDS="1,5,146,27"> <AREA SHAPE="rect" HREF="tips.html" COORDS="1,28,151,50"> </MAP>

  40. Image Slicing • Cut image into several pieces • Assemble pieces in an HTML table • Make images links to simulate an image map • Performs better than a single large image

  41. Using Tables • Tables are used to control page layout • Tables can contain: • Text • Graphics • Form fields • Other tables

  42. When to Use Tables • You can use tables to: • Arrange data in columns and rows • Control horizontal spacing of text or graphic elements • Line up form fields • Display data in a two-dimensional grid-style format

  43. Basic Table Syntax • <TABLE></TABLE> creates the table itself • <TR></TR> creates a table row within a table • <TH></TH> creates a header cell within a table row • <TD></TD> creates a data cell within a table row • <CAPTION></CAPTION> creates a caption for the table

  44. Simple Table Example • Code: <TABLE> <TR> <TH>Color</TH> <TH>Hex Code</TH></TR> <TR> <TD>Red</TD> <TD>#FF0000</TD> </TR> … </TABLE>

  45. Simple Table Output • Display:

  46. Table Usage Rules • Start with <TABLE>; end with </TABLE> • Unlimited number of rows, each beginning with <TR> and ending with </TR> • Each row contains table cells or table headers • No text outside <TD> or <CAPTION> tag • Fill empty cells with a non-breaking space (&nbsp;)

  47. Other Table Options • Border - lines around the cells • Cellpadding - space around text inside cell • Cellspacing - space between cells • BgColor - background color of cell • Width - width of table (% or n) • Align - left, right, center (table and cells) • Valign - top, bottom, middle (cells) • Rowspan - spans cells across rows • Colspan - spans cells across columns

  48. Page Layout Tables • Tables are commonly used to lay out whole HTML pages because of their ability to: • Precisely position element horizontally • Control the displayed page width within the browser window

  49. Advanced Web Sites

  50. Cascading Stylesheets • Allow you to add formatting information to documents • Will not affect HTML in older browsers • Enable you to easily create and modify styles shared among multiple documents

More Related