1 / 18

Chapter 4 (through page 110)

Chapter 4 (through page 110). Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : woodall@mc.edu). Web Page Creation. We will create a home page and one other page in this course. There are two methods for creating Web pages.

asta
Download Presentation

Chapter 4 (through page 110)

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. Chapter 4 (through page 110) Fluency with Information Technology 4th edition by Lawrence Snyder (slides by Deborah Woodall : woodall@mc.edu)

  2. Web Page Creation We will create a home page and one other page in this course. There are two methods for creating Web pages. 1. Use a Web authoring tool nice GUI, the HTML tags are written for you MS Office Publisher, Dreamweaver , ColdFusion 2. Use a text editor you type the HTML tags WordPad, Notepad++, Text Wrangler (Macs)

  3. Steps for Creating a Web Page using WordPad • Type the Web page into WordPad using HTML tags. • Save the Web page to your flash drive as a text document with a .html file extension. • Preview the Web page locally using Internet Explorer or some other browser. • Publish the finished page.

  4. XHTML • Extensible Hypertext Markup Language • Dialect of HTML • A language of tags

  5. XHTML Tags • XHTML tags are commands to the browser telling it how to display the content of the Web page • Tags are lowercase words or abbreviations enclosed in angle brackets, e.g. <html>

  6. XHTML Tags • Tags can be paired, e.g. <b> cat </b> • These usually control formatting • The second of these tags has a / • Never omit a closing tag • Tags can be unpaired, e.g. <hr /> • These allow the inclusion of non-text items on the page

  7. XHTML Tags • Remember, XHTML tags should be lower case • When usingmultipletags • They should not be overlapped • They should be nested Incorrect: <i><b> cat </i></b> Correct: <i><b> cat </b></i>

  8. Web page – General Form <html xmlns="http://www.w3.org/1999/xhtml"> <head> preliminary material goes here </head> <body> content of the page goes here </body> </html> • This form must be followed. • All three sets of XHTML tags are required.

  9. Title Tags • Title tags <title> </title> • Go between the <head> </head> tags • Determine what shows up in the title bar of the browser window when your page is viewed

  10. Heading tags, Paragraph tags • Heading tags <h1> </h1> through <h8> </h8> • Large to small headings • Paragraph tags <p> </p> • An aid in formatting • A blank line is inserted before and after heading and paragraph tags

  11. Break tag, Horizontal Rule tag • Break tag <br/> • Go to a new line • Horizontal Rule tag <hr/> • Draw a horizontal line

  12. List tags • Ordered list tags <ol> </ol> • For numbered lists • Unordered list tags <ul> </ul> • For bulleted lists • <li> </li> for individual list items

  13. Center, Bold, Italics tags • Center tags <center> </center> • Bold tags <b> </b> • Italics tags <i> </i>

  14. Creating a Hyperlink • Anchor tags <a> </a> • Two parts: the hyperlink reference and the anchor text <a href="http://www.imdb.com"> Internet Movie Database </a>

  15. Image tag • Image tag <img/> <imgsrc="sandbox.gif" alt="Sandbox with children" /> • Image file name must have file extension and be spelled correctly (case sensitive) • Both src and alt are required

  16. Tables <table border="4" > <tr> <th> Friend </th> <th> Hair Color </th> </tr> <tr> <td> John </td> <td> Black </td> </tr> <tr> <td> Mary </td> <td> Red </td> </tr> <tr> <td> Elise </td> <td> Blond </td> </tr> </table>

  17. Attributes • Attributes are characteristics of each tag that you may be required to set, or that you can optionally set. (In green below) • They go inside of the tag and give you some control over what the browser does with the tag. <a href="http://www.imdb.com"> Internet Movie Database </a> <table border="4"> <imgsrc="sandbox.gif" alt="Sandbox with children" />

  18. The Style Attribute • The most useful attribute is the style attribute • It can be used to control a very long list of properties of your page components. • The value of the style attribute has two parts separated by a colon… name-of-property : specification <body style ="background-color : blue"> <body style = "background-color : red ; color : teal"> <h1 style = "text-align : center"> Welcome </h1> <p style = "font-family : arial ; color : green"> Hello! </p> <imgsrc = "frog.jpg" style = "float : right" /> <hr style="width:50%" /> <table style="background-color : pink">

More Related