180 likes | 327 Views
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.
E N D
Chapter 4 (through page 110) Fluency with Information Technology 4th 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. 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)
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.
XHTML • Extensible Hypertext Markup Language • Dialect of HTML • A language of tags
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>
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
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>
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.
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
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
Break tag, Horizontal Rule tag • Break tag <br/> • Go to a new line • Horizontal Rule tag <hr/> • Draw a horizontal line
List tags • Ordered list tags <ol> </ol> • For numbered lists • Unordered list tags <ul> </ul> • For bulleted lists • <li> </li> for individual list items
Center, Bold, Italics tags • Center tags <center> </center> • Bold tags <b> </b> • Italics tags <i> </i>
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>
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
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>
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" />
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">