let s make a web page n.
Skip this Video
Loading SlideShow in 5 Seconds..
Let’s Make a Web Page PowerPoint Presentation
Download Presentation
Let’s Make a Web Page

Loading in 2 Seconds...

play fullscreen
1 / 79

Let’s Make a Web Page - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

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