Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Chapter 4
  2. 3. <ul><li>Learn how to combine basic HTML elements to create Web pages. </li></ul><ul><li>Understand how to use HTML tags and tag attributes to control a Web page’s appearance. </li></ul><ul><li>Learn how to add absolute URLs, relative URLs, and named anchors to your Web pages. </li></ul><ul><li>Find out how to use tables and frames as navigational aids on a Web site. </li></ul><ul><li>Get the answers to all you questions about copyright law and the Web. </li></ul>Learning Objectives
  3. 4. <ul><li>Anyone with access to the Internet can post a Web page. </li></ul><ul><li>You can create a Web page with just a text editor. </li></ul><ul><li>There are Web page construction tools available that allow you to create pages without understanding the underlying machinery. </li></ul>Taking Charge
  4. 5. <ul><li>Web browsers are designed to display any ASCII text file with the file name extension .htm or .html . </li></ul><ul><li>You can view your Web pages locally on your computer as you develop them. </li></ul><ul><li>Web browsers rework each Web page in an effort to display it in the best way possible. </li></ul><ul><li>Web page authors can control how much the browser can dynamically adjust the pages. </li></ul>Web Pages and HTML
  5. 6. <ul><li>Hypertext Markup Language or HTML is a markup language that gives Web page authors control over what a Web browser can and can’t do when it displays a Web page. </li></ul><ul><li>A markup language is not a programming language. </li></ul><ul><li>A markup language is a way to insert enhancements into a text file so a browser can render it as specially formatted text, text with special effects or with graphics </li></ul>Web Pages and HTML
  6. 7. <ul><li>Web page authors communicate formatting commands to Web browsers by inserting HTML elements in the Web page. </li></ul><ul><li>HTML elements give authors control over text formatting and graphical elements. </li></ul><ul><li>Tables and frames are devices for controlling the layout of a Web page. </li></ul><ul><li>Web authors must balance what they want with what their visitors’ web browsers can handle. </li></ul>Web Pages and HTML
  7. 8. <ul><li>All Web pages should contain four basic elements: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>HEAD </li></ul></ul><ul><ul><li>TITLE </li></ul></ul><ul><ul><li>BODY </li></ul></ul><ul><li>You can add HTML elements to a Web page with any text editor. Examples: </li></ul><ul><ul><ul><li>Notepad (Windows) </li></ul></ul></ul><ul><ul><ul><li>Simpletext (Macintosh) </li></ul></ul></ul>Web Pages and HTML
  8. 9. <ul><li>Using a text editor instead of a Web page construction tool gives you maximum control over your web pages. </li></ul><ul><ul><li>Web page construction tools include: </li></ul></ul><ul><ul><ul><li>Microsoft FrontPage (Windows) </li></ul></ul></ul><ul><ul><ul><li>Macromedia Dreamweaver (Macintosh & Windows) </li></ul></ul></ul><ul><ul><li>Use of MS Word is not recommended </li></ul></ul><ul><li>Knowledge of HTML is still useful even when using construction tools </li></ul>Web Pages and HTML
  9. 10. <ul><li>HTML tags tell a Web browser how to render a Web page. </li></ul><ul><li>HTML tags are used to divide a Web page into segments with different kinds of information. </li></ul><ul><li>You can nest HTML tag pairs inside other tag pairs to produce a hierarchical structure for each Web page. </li></ul><ul><li>Most HTML tags come in pairs, such as <TITLE> </TITLE> </li></ul>Web Pages and HTML
  10. 11. Web Pages and HTML
  11. 12. <ul><li>The HTML tag pair is used to mark the beginning and the end of the page </li></ul><ul><li>While your page will still display without this tag pair, you may need to use it to differentiate your HTML page from another type someday </li></ul><ul><li>The HEAD tag pair contains information that is used behind the scenes but is not displayed in your Web page </li></ul>Basic Web Page Formatting
  12. 13. <ul><li>The TITLE tag pair is needed to associate a title with your Web page </li></ul><ul><ul><li>The title is displayed in the title bar of the browser window </li></ul></ul><ul><ul><li>The title bar is not part of the page </li></ul></ul><ul><ul><li>The TITLE tag pair is inside of the HEAD tag pair </li></ul></ul><ul><li>The BODY tag pair is where the content of the Web page is presented </li></ul>Basic Web Page Formatting
  13. 14. <ul><li>In many pages, the first visible element is the heading </li></ul><ul><li>The heading element allows you to add a title to the Web page body. </li></ul><ul><li>Do not confuse the heading element with the HEAD element </li></ul><ul><li>The heading element comes in six sizes. </li></ul><ul><ul><li><H1> </H1> : very large through </li></ul></ul><ul><ul><li><H6> </H6> : very small </li></ul></ul>Basic Web Page Formatting
  14. 15. Basic Web Page Formatting
  15. 16. <ul><li>An HTML attribute is a property of an HTML element that allows for fine tuning. </li></ul>Basic Web Page Formatting
  16. 17. <ul><li>The paragraph tag <p></p> pair breaks text up into blocks separated by blank lines. </li></ul><ul><li>There are two kind of lists found in Web pages. </li></ul><ul><ul><li>An ordered <ol></ol> list is an enumerated list. </li></ul></ul><ul><ul><li>An unordered list <ul></ul> is bulleted list. </li></ul></ul><ul><li>The line break tag <br> is an example of a tag that does not come in a pair. </li></ul>Basic Web Page Formatting
  17. 18. <ul><li>Font assignment is difficult because different computers have different fonts available on them. </li></ul><ul><li>You can specify a list of font choices in the face attribute of the font element. </li></ul><ul><li>Avoid designing a page that depends on specific type properties since the user may override them in their browser preferences. </li></ul><ul><li>HTML elements can be combined by nesting them. </li></ul>Basic Web Page Formatting
  18. 19. <ul><li>JPEG and GIF are the most common graphics formats on the Web. </li></ul><ul><li>JPEG is better suited for high-resolution photographs and complex graphics. </li></ul><ul><li>GIF is better suited for line drawings and simple graphics. </li></ul><ul><li>The IMG HTML element creates an inline image: <img src=“button.jpg”> </li></ul><ul><li>An inline image is an image that is treated like a single alphanumeric character. </li></ul>Basic Web Page Graphics
  19. 20. <ul><li>Use the ALT attribute in the IMG tag to describe graphic elements for users who cannot see graphics. </li></ul><ul><li>The align attribute controls the vertical alignment of the graphic: <img src=“x.jpg” align=“middle”> </li></ul><ul><li>Adding the Height and Width attributes to the IMG tag will make graphics display faster on your Web page. </li></ul><ul><li>The Height and Width tags can also be used to scale an image. </li></ul><ul><li>A transparent GIF looks as if it were drawn on the background of the Web page. </li></ul>Basic Web Page Graphics
  20. 21. Basic Web Page Graphics
  21. 22. <ul><li>There are 16,777,216 possible colors that can be used as the background for a Web page. </li></ul><ul><li>Web-safe colors are 216 colors that can be faithfully reproduced on any computer monitor regardless of the operating system used. </li></ul><ul><li>Web pages use hexadecimal (base 16) codes to describe colors. </li></ul><ul><li>The bgcolor attribute of the Body tag sets the background color of the Web page. </li></ul>Basic Web Page Graphics
  22. 23. <ul><li>A color palette is a collection of colors. </li></ul><ul><li>8-bit and 24-bit color describe the size of the affiliated color palette. </li></ul><ul><li>An 8 bit palette contains 256 colors </li></ul><ul><li>A 24 bit palette contains 16,777,216 colors. </li></ul><ul><li>JPEG images use 24-bit color. </li></ul><ul><li>GIF images use 8-bit color. </li></ul>Basic Web Page Graphics
  23. 24. <ul><li>You can use any JPEG or GIF file as a background for a Web page. </li></ul><ul><li>The browser will place the image in the upper-left corner and will tile it left to right. </li></ul><ul><li>For example, </li></ul><ul><ul><li><BODY background=“texture.jpg”> </li></ul></ul><ul><ul><li>The background attribute is used only in the tag </li></ul></ul>Basic Web Page Graphics
  24. 25. Basic Web Page Graphics
  25. 26. <ul><li>Different utilities exist for processing images for different purposes. </li></ul><ul><li>An image viewer displays graphics files quickly and easily. </li></ul><ul><li>Graphics editors are used to manipulate graphics files such as photos or drawings. </li></ul><ul><li>Color samplers can find the hexadecimal code of a color in a picture. </li></ul><ul><li>Screen shot utilities allow you to take a picture of a window on your computer. </li></ul>Basic Web Page Graphics
  26. 27. <ul><li>Absolute URL: </li></ul><ul><ul><li>links to a Web page on a different Web server. </li></ul></ul><ul><ul><li><a href=“”> The Treehouse </a> </li></ul></ul><ul><li>Relative URL: </li></ul><ul><ul><li>links to a Web page on the same Web server </li></ul></ul><ul><ul><li><a href=“photoalbum.html”> My Photo Album </a> </li></ul></ul><ul><ul><li>These URLs make your page portable </li></ul></ul>Three Types of Hyperlinks
  27. 28. <ul><li>Named Anchor: links to a different location on the same Web page. </li></ul><ul><li>In the Web page, you need to mark the destination location in the page </li></ul><ul><li>The link that takes you to another location uses the # in the anchor tag for the link </li></ul><ul><li>For example: <a href=“#tree”> some tall trees </a> </li></ul><ul><li>Mark the destination location with the NAME attribute in the Anchor tag </li></ul><ul><li>For example: <a name=“tree”> Trees </a> </li></ul>Three Types of Hyperlinks
  28. 29. <ul><li>Tables can be used to control the layout of the graphical elements of a Web page. </li></ul><ul><li>Tables contain rows and columns. </li></ul><ul><li>The intersection of a row and a column is sometimes called a cell. </li></ul><ul><li>HTML tags are used to designate: </li></ul><ul><ul><li>the table </li></ul></ul><ul><ul><li>its rows </li></ul></ul><ul><ul><li>each cell within a row </li></ul></ul>Page Layouts with Tables
  29. 30. Page Layouts with Tables
  30. 31. <ul><li>You can put anything inside of a table’s data elements, even another table. </li></ul><ul><li>The border attribute of a table can be used to create borders on your Web page. </li></ul><ul><li>Tables can be used to give Web pages a margin. </li></ul><ul><li>Each cell can have it’s own background color or pattern. </li></ul><ul><li>The colspan attribute is used to extend a cell across multiple columns. </li></ul><ul><li>The rowspan attribute is used to extend a cell across multiple rows. </li></ul>Page Layouts with Tables
  31. 32. <ul><li>A frame allows you to partition a Web page into multiple segments so that you can display a different HTML file within each segment. </li></ul>Navigation Maps with Frames
  32. 33. <ul><li>You can use the same navigational aids on all pages using frames. </li></ul><ul><li>Think twice about using frames, some browsers don’t support links and some people don’t like frames even if their browsers support them. </li></ul><ul><li>Consider having a non-frames version of your site for your visitors who don’t like or can’t view frames. </li></ul>Navigation Maps with Frames
  33. 34. <ul><li>Remember the three C’s of Web page design: </li></ul><ul><ul><li>quality Content </li></ul></ul><ul><ul><li>reader Convenience </li></ul></ul><ul><ul><li>artistic Composition. </li></ul></ul><ul><li>Avoid common mistakes. </li></ul><ul><li>Write, view and test all Web pages before installing them on a Web server. </li></ul><ul><li>Keep Web page titles short but accurate. </li></ul><ul><li>Keep download times short. </li></ul>A Web Site Construction Checklist
  34. 35. <ul><li>Make your pages portable. </li></ul><ul><li>If you make your Web pages too sophisticated, people with older browsers will not be able to view them. </li></ul>A Web Site Construction Checklist
  35. 36. <ul><li>Installing a Web page on a server is sometimes called publishing a Web page. </li></ul><ul><li>Acquire access to a Web server. </li></ul><ul><li>Determine the DNS address of your Web server. </li></ul><ul><li>Determine the pathname needed when you upload files to the server. </li></ul><ul><li>Upload your Web files to the Web server. </li></ul>Installing Web Pages on a Web Server
  36. 37. <ul><li>Determine the URL to use to view your home page. </li></ul><ul><li>Fix any file protection codes that need fixing. </li></ul><ul><li>You can upload files with an FTP client or an HTML construction kit that has an upload function. </li></ul>Installing Web Pages on a Web Server
  37. 38. <ul><li>Copyright laws protect the creative and economic interests or writers, musicians, and artists. </li></ul><ul><li>A copyright confers certain rights and privileges to its owner. </li></ul><ul><li>Copyrights are normally granted to the author of a written work or to an artist, musician, or other person who creates some intellectual product. </li></ul>Copyright Law and the Web
  38. 39. <ul><li>Do not violate copyright laws when you add materials to your website. </li></ul><ul><li>What is protected? </li></ul><ul><li>Personal use of online materials. </li></ul><ul><li>Fair use guidelines. </li></ul>Copyright Law and the Web