tag:blogger.com,1999:blog-4390197664080051982024-03-14T03:42:35.045+08:00Teaching Basic HTMLWingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-439019766408005198.post-62645678996881426052010-10-12T14:08:00.005+08:002010-10-18T14:42:20.544+08:00Table of Content (Press on the Title to select the Topic)<a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-1-web-fundamentals.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 1 - Web Fundamentals (Part1)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"> <li>Introducing the World Wide Web</li> <li>Hypertext Documents</li> <li>HTML: The Language of the Web</li> <li>Tools for Creating HTML Documents</li></td></tr></tbody></table><hr /><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-2-web-fundamentals-part2.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 1 - Web Fundamentals (Part2)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Creating an HTML Document</li> <li>Marking Elements with Tags</li> <li>White Space and HTML</li> <li>Element Attributes</li> <li>The Structure of an HTML File</li> </tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-1-web-fundamentals-part3.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 1 - Web Fundamentals (Part3)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Working with Block-Level Elements</li><li>Styles</li><li>Creating Lists</li><li>Working with Empty Elements</li><li>Working with Special Characters</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-2-web-page-creation-part1.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 2 - Web Page Creation (Part1)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Working with Links</li><li>Creating Element Ids</li><li>Creating Links Within a Document</li><li>Creating Anchors</li><li>Working with Web Site Structures</li><li>Linear Structures</li><li>Hierarchical Structures</li><li>Mixed Structures</li><li>Working with Web Site Structures</li><li>Linking to a Location Within Another Document</li><li>Linking to Documents in Other Folders</li><li>Relative Paths</li><li>Changing the Base</li><li>Understanding URLs</li><li>Linking to a Web Page</li><li>Linking to FTP Servers</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-2-web-page-creation-part2.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 2 - Web Page Creation (Part2)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Linking to Usenet News</li><li>Linking to a Local File</li><li>Linking to E- mail</li><li>Working with Hypertext Attributes</li><li>Creating an Access Key</li><li>Creating a Semantic Link</li><li>Using the Link Element</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-3-designing-web-page-working.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 3 - Working with Fonts, Colors, and Graphics (Part1)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Working with Color in HTML</li><li>Basic Principles of Color Theory</li><li>RGB (Red, Green, and Blue) Triplets</li><li>A Typical Colors Dialog Box</li><li>Hexadecimal Values</li><li>Using Color Values</li><li>Using Color Names</li><li>The 16 Basic Color Names</li><li>Partial List of Extended Color Names</li><li>Defining Foreground and Background Colors</li><li>Working with Fonts and Text Styles</li><li>Using the <font> Tag</li><li>Changing the Font Color</li><li>Setting the Font Size</li><li>Spacing and Indentation</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-3-working-with-fonts-colors-and.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 3 - Working with Fonts, Colors, and Graphics (Part2)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Font Styles and Weights</li><li>Decorative Features</li><li>Choosing an Image Format</li><li>Interlaced and Noninterlaced GIFs</li><li>Transparent GIFs</li><li>Animated GIFs</li><li>JPEG</li><li>Portable Network Graphics (PNG)</li><li>Margins</li><li>Inserting a Background Image</li><li>Understanding Image Maps</li><li>Server-Side Image Maps</li><li>Client-Side Image Maps</li><li>Defining Image Map Hotspots</li><li>Creating a Rectangular Hotspot</li><li>Creating a Circular Hotspot</li><li>Creating a Polygonal Hotspot</li><li>Using an Image Map</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-4-designing-web-page-with.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 4 - Designing a Web Page with Tables (Part1)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Tables on the World Wide Web</li><li>Considerations for Text and Graphical Tables</li><li>Text TablesUsing Fixed-Width Fonts</li><li>Using Proportional Fonts</li><li>Using Preformatted Text</li><li>Graphical TablesDefining a Table Structure</li><li>Using the <table>, <tr>, and <td> Tags</li><li>The Graphical Table Syntax</li><li>Creating Headings with the <th> Tag</li><li>Identifying the Table Heading,Body, and Footer</li><li>The Table Heading,Body, and Footer Syntax</li><li>Creating a Table Caption</li><li>Modifying the Appearance of a Table</li><li>Working with the Table Border</li><li>Table Frames and Rules</li><li>Creating Frames and Rules</li><li>Sizing a TableCell Spacing</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-4-designing-web-page-with_10.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 4 - Designing a Web Page with Tables (Part2)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Cell Padding</li><li>Working with Table and Cell Size</li><li>Defining the Table Size</li><li>Setting Cell and Column Sizes</li><li>Spanning Rows and Columns</li><li>Aligning a Table and its Contents</li><li>Setting a Background Color</li><li>Working with Column Groups</li><li>The <colgroup> Tag</li><li>Using Tables for Layout</li><li>Fixed-width and Fluid Layouts</li><li>Using Nested Table</li><li>Challenges of Table Layout</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-5-designing-web-site-with.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 5 - Designing a Web Site with Frames (Part1)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Introducing Frames</li><li>Advantages to Using Frames</li><li>Disadvantages to Using Frames</li><li>Planning Your Frames</li><li>Creating a frameset</li><li>The Frame Syntax</li><li>Nesting Framesets</li><li>Formatting a Frames</li><li>Hiding and Displaying Scroll Bars</li><li>Setting Frame Margins</li><li>Specifying Margins Syntax</li><li>Controlling Frame Resizing</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-5-designing-web-site-with_11.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 5 - Designing a Web Site with Frames (Part2)</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Working with Frames and Links</li><li>Assigning a Name to a Frame</li><li>Specifying a Link Target</li><li>Using Reserved Target Names</li><li>Using the <noframes> Tag</li><li>The <noframes> Syntax</li><li>Working with Frame Borders</li><li>Setting the Border Color</li><li>Setting the Border Width</li><li>Removing the Frame Borders</li><li>Creating Inline Frames</li><li>The Floating Frames Syntax</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-6-creating-web-page-forms.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 6 - Creating Web Page Forms</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Introducing Web Forms</li><li>Forms and Server-Based Programs</li><li>Creating the Form Element</li><li>Creating Input Boxes</li><li>Setting the Size of an Input Box</li><li>Creating a Password Field</li><li>Creating a Selection List</li><li>Modifying the Appearance of a Selection List</li><li>Making Multiple Selections</li><li>Working with Option Groups</li><li>Creating Option buttons</li><li>Creating a Field Set</li><li>Creating Check Boxes</li><li>Creating a Text Area Box</li><li>Working with Form Buttons</li><li>Creating a Command button</li><li>Working with Hidden Fields</li><li>Working with Form Attributes</li><li>Using the mailto Action</li><li>Specifying the Tab Order</li><li>Specifying an Access Key</li></tbody></table><hr/><a href="http://teachingbasichtml.blogspot.com/2010/10/chapter-7-using-multimedia-on-web.html"><p style="color: red; text-align: center; font-family: monotype corsiva; font-size: 30px;">Chapter 7 - Using Multimedia on the Web</p></a><table style="font-family: monotype corsiva; font-size: 20px; background-color: white;" border="0px" rules="cols"><tbody><tr><td style="color: black;" width="800px" height="10px"><li>Working with Multimedia</li><li>Working with Audio</li><li>Sampling Rate, Sample Resolution, and Channels</li><li>Sound File Formats</li><li>Linking to an Audio Clip</li><li>Embedding an Audio Clip</li><li>Playing Background Sounds</li><li>Working with Video</li><li>Frame Rates and Codecs</li><li>Linking to a Video Clip</li><li>Embedding a Video Clip</li><li>Using a Dynamic Source</li><li>Supporting Non-Embedded Elements</li><li>Creating a Marquee with Internet Explorer</li><li>Working with the Object Element</li></tbody></table><hr/><br /><br /><br /><h4 style="text-align:center; color: yellow">∗ <a href="#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-5171861687782464922010-10-12T13:30:00.001+08:002010-10-19T16:11:27.543+08:00HTML Help<p><span style="color: rgb(255, 255, 0);"><span style="color: rgb(102, 0, 204);">HTML code symbol or Special Characters like</span> </span><span style="color: rgb(0, 0, 153);"><strong><</strong></span><span style="color: rgb(255, 255, 0);"> <span style="color: rgb(102, 0, 204);">or</span></span><span style="color: rgb(0, 0, 153);"> <strong>></strong> </span><span style="color: rgb(102, 0, 204);">cannot show on web? It is because the Special Characters or symbol are identified by a code number or name. It is a tool can help you convert the symbol to code number.</span></p><br /><br /><form action="#"><table align="center" border="0" cellpadding="0" cellspacing="5"><tbody><tr><td align="center"><textarea rows="15" cols="30" name="xx"></textarea></td></tr><tr><td align="center"><input onclick="s=form.xx.value; s=s.replace(/&/g,'&amp;');s=s.replace(/</g,'&lt;');s=s.replace(/>/g,'&gt;');s=s.replace(/\n/g,'<br />\n');s=s.replace(/\r/g,'');form.yy.value = s; return false;" value="Convert" type="button"></td></tr><tr><td align="center"><textarea rows="15" cols="30" name="yy"></textarea></td></tr></tbody></table></form>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-63233278218778467792010-10-12T12:29:00.002+08:002010-10-19T16:00:37.786+08:00Chapter 7 - Using Multimedia on the Web<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Multimedia</p><br /><li>Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second.<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -Consider bandwidth when working with multimedia on a Web site</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>Multimedia can be added to a Web page two different ways:<span style="color: rgb(255, 255, 51);"><br /> <span style="color: rgb(0, 0, 102);"> -External media is a sound of video file that’s accessed through a link.</span></span><br /> ~Useful for a low bandwidth<br /><span style="color: rgb(255, 255, 51);"> <span style="color: rgb(0, 0, 102);"> -Inline media is placed within a Web page as an embedded object</span></span></li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign101.png?t=1286858242" width="400" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Audio</p><br /><li>Every sound wave is composed of two components:<br /> -<b style="color: rgb(51, 0, 153);"><span style="color: rgb(0, 204, 204);">Amplitude</span></b>- the height of the wave. Amplitude relates to the sound’s volume (the higher the amplitude, the louder the sound).<br /> -<b style="color: rgb(51, 0, 153);"><span style="color: rgb(0, 204, 204);">Frequency</span></b>- the speed at which the sound wave moves. Frequency relates to sound pitch (high frequencies have high pitches).</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign102.png?t=1286858401" width="400" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Sampling Rate, Sample Resolution, and Channels</p><br /><li>Sound waves are analog functions (represent a continuously varying signal).<br /> <span style="color: rgb(0, 0, 102);"> -</span><span style="color: rgb(0, 0, 102);">To store the information, however, it must be converted to pieces of information</span></li><br /><li>Digital recording measures the sound’s amplitude at discrete moments in time.<span style="color: rgb(255, 255, 51);"><br /> <span style="color: rgb(0, 0, 102);"> -Each measurement is called a sample.</span></span><br /> ~Samples per second taken is called the sampling rate</li><br /><p style="text-align: center;">Sampling Rate</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign103.png?t=1286858717" width="500" height="400" /><br /><li>Sampling resolution indicates the precision in measuring the sound within each sample.<br /><span style="color: rgb(0, 0, 153);"> -8-bit</span><br /><span style="color: rgb(0, 0, 153);"> -16-bit</span><br /><span style="color: rgb(0, 0, 153);"> -32-bit</span></li><br /><p style="text-align: center;">Sample Resolution</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign104.png?t=1286859084" width="400" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Sound File Formats</p><br /><li>There are different sound file formats used for different operating systems</li><br /><li>Different file formats provide varying levels of sound quality and sound compression</li><br /><li>WAV</li><br /><li>Nonstreaming media</li><br /><li>Streaming media</li><br /><li>MIDI</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign105.png?t=1286859383" width="500" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to an Audio Clip</p><p style="text-align: center;">Inserting links to the sound clips</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign106.png?t=1286859578" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Embedding an Audio Clip</p><br /><li>An embedded object is any media clip, file, program, or other object that can be run or viewed from within a Web page.<br /> <span style="color: rgb(0, 0, 102);"> -</span><span style="color: rgb(0, 0, 102);">Browsers need the appropriate plug-ins to run embedded objects</span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Playing Background Sounds</p><br /><li>Internet Explorer (with Version 3.0) introduced an element to play background sounds:<span style="color: rgb(255, 0, 0);"><br /> <bgsound src=“url” balance=“value”<br /> loop=“value” volume=“value” /></span></li><br /><li>Where url is the URL of the sound file, the balance attribute defines how the sound should be balanced between left and right speakers, loop defines how many times the sound clip is played, and the volume attribute indicates the background sound volume</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Video</p><br /><li>Video files add a visual element to a Web page as well as provide information</li><br /><li>Video files are composed of a series of single images called frames</li><br /><li>The number of frames shown in a period of time is the frame rate</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Frame Rates and Codecs</p><br /><li>Reducing the frame rate reduces the size of your file.<br /> <span style="color: rgb(0, 0, 102);"> -</span><span style="color: rgb(0, 0, 102);">This is one way to control file size of video files</span></li><br /><li>Using a Codec (compression/decompression) is another way to control the file size</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Video File Formats</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign107.png?t=1286859959" width="400" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to a Video Clip</p><br /><li>Follow the same procedure to link a video clip as you would to link a sound clip</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Embedding a Video Clip</p><br /><li>Use the same embed element to embed a video file as you did to embed a sound clip</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using a Dynamic Source</p><br /><li>To turn inline images into dynamic video clips, use the following syntax: <span style="color: rgb(255, 0, 0);"><br /> <img src=“url” dynsrc=“url” start=“type”<br /> loop=“value” control=“control” /></span><br />Where the dynsrc attribute specifies the URL of a dynamic (video) version of the inline image. The start attribute tells the browser when to start the clip, the loop attribute specifies the number of times the video will play, and the control attribute specifies whether IE should display player controls below the inline image to start and stop the video clip</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Supporting Non-Embedded Elements/p><br /></p><li>To provide alternate content for browsers that don’t support embedded objects, use the code<span style="color: rgb(255, 0, 0);"><br /> <embed attributes /><br /> <noembed><br /> alternate content<br /> </noembed></span><br />where alternate content is the content displayed by browsers that don’t support embedded objects</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Marquee with Internet Explorer</p><br /><li>An alternative to using an applet to create a box with scrolling text is to create a marquee element.<span style="color: rgb(255, 0, 0);"><br /> <marquee attributes><br /> content<br /> </marquee></span><br />Where attributes is one or more of the marquee elements, and content is the page content that appears in the marquee box.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with the Object Element</p><br /><li>The object element is the generic element for any object whose content is stored in a file separate from the current Web page <span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -Inline images</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Sound clips</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Video clips</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Program applets</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -</span><span style="color: rgb(0, 0, 102);">Other HTML documents</span></li><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(255, 255, 51);"><br /></span><p style="text-align: center;">Specific and generic elements</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign108.png?t=1286860513" width="530" height="250" /><br /><li>MIME (Multipurpose Internet Mail Extension) names are used to indicate the type of data using the type attribute in an object element.<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign109.png?t=1286860637" width="530" height="250" /></li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=6323327821877846779#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-39123780864752943692010-10-12T10:37:00.002+08:002010-10-19T15:57:43.208+08:00Chapter 6 - Creating Web Page Forms<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Introducing Web Forms</p><br /><li>Web forms collect information from customers</li><br /><li>Web forms include different control elements including:<br /><span style="color: rgb(153, 255, 255);"> <span style="color: rgb(51, 0, 153);"> -</span><b style="color: rgb(51, 0, 153);">Input boxes</b></span><br /> ~For text and numerical entries<br /><span style="color: rgb(153, 255, 255);"> <span style="color: rgb(51, 0, 153);"> -</span><b style="color: rgb(51, 0, 153);">Selection lists, Drop-down lists boxes</b></span><br /> ~For long lists of options, usually appearing in a drop-down list box<br /><span style="color: rgb(153, 255, 255);"> <span style="color: rgb(51, 0, 153);"> -</span><b style="color: rgb(51, 0, 153);">Option buttons or radio buttons</b></span><br /> ~For selecting a single option from a predefined list<br /><span style="color: rgb(153, 255, 255);"><strong> <span style="color: rgb(51, 0, 153);"> -Check boxes</span></strong></span><br /> ~For specifying an item as either present or absent<br /><strong><span style="color: rgb(153, 255, 255);"> <span style="color: rgb(51, 0, 153);"> -Group boxes</span></span></strong><br /> ~For organizing form elements<br /><strong><span style="color: rgb(153, 255, 255);"> <span style="color: rgb(51, 0, 153);"> -Text areas</span></span></strong><br /> ~For extended entries that can include several lines of text<br /><span style="color: rgb(153, 255, 255);"><strong> <span style="color: rgb(51, 0, 153);"> -Form buttons</span></strong></span><br /> ~Users can click to start processing the form</li><br /><br /><hr style="color: red;"><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign93.png?t=1286851483" width="500" height="500" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Forms and Server-Based Programs</p><br /><li>While HTML supports the creation of forms, it does not include tools to process the information</li><br /><li>The information can be processed through a program running on a Web server</li><br /><li>Server-based programs are written in many languages</li><br /><li>The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in perl</li><br /><li>Other popular languages include: <span style="color: rgb(255, 255, 51);"><br /></span> -AppleScript - PHP<span style="color: rgb(255, 255, 51);"><br /></span> -ASP - TCL<span style="color: rgb(255, 255, 51);"><br /></span> -ColdFusion - the Unix shell<span style="color: rgb(255, 255, 51);"><br /></span> -C/C++ - Visual Basic<span style="color: rgb(255, 255, 51);"><br /></span></li><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating the Form Element</p><br /><li>Forms are created using the form element, structured as follows:<span style="color: rgb(255, 0, 0);"><br /> <form attributes><br /> elements<br /> </form></span><br />Where attributes are the attributes that control how the form is processed and elements are elements places within the form</li><li>Form attributes usually tell the browser the location of the server-based program to be applied to the form’s data</li><br /><li>Always specify an id or name for the form</li><br /><li>Two attributes are available to identify the form: id and name</li><br /><li>The syntax of the id and name attributes are as follows:<span style="color: rgb(255, 0, 0);"><br /> <form name=“name” id=“id”>… </form></span></li><br /><li>Where name is the name of the form and id is the id of the form</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Input Boxes</p><br /><li>The general syntax of input elements is as follows:<span style="color: rgb(255, 0, 0);"><br /> <input type=“type” name=“name” id=“id” /></span><br />Where type specifies the type of input field, and the name and id attributes provide the field’s name and id.</li><br /><li>See figure 6-5 for other input types</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting the Size of an Input Box</p><br /><li>By default, an input box displays at 20 characters of text</li><br /><li>To change the width of an input box, use the size attribute which is displayed as follows:<span style="color: rgb(255, 0, 0);"><br /> <input size=“value” /></span><br />Where value is the size of the input box in characters</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign94.png?t=1286852033" width="500" height="300" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Password Field</p><br /><li>A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site</li><br /><li>The syntax for creating a Password field is as follows:<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <input type=“password” /></span></li><span style="color: rgb(255, 0, 0);"><br /></span><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Selection List</p><br /><li>A selection list is a list box from which a user selects a particular value or set of values. <span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -Selection lists are useful when there are a fixed set of possible responses from the user</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>You can create a selection list using the <select> tag</li><br /><li>You can specify each individual selection item using the <option> tag</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Modifying the Appearance of a Selection List</p><br /><li>You can change the number of options displayed in the selection list by modifying the size attribute.<br />The syntax is as follows:<span style="color: rgb(255, 0, 0);"><br /> <select size= “value”>… </select></span><br />Where value is the number of items that the selection list displays in the form</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign95.png?t=1286852367" width="400" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Making Multiple Selections</p><br /><li>Add the multiple attribute to the select element to create multiple selections<br /><span style="color: rgb(255, 0, 0);"> -<select multiple=“multiple”>… </select></span></li><span style="color: rgb(255, 255, 51);"><br /></span><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Option Groups</p><br /><li>Use option groups to organize selection lists into distinct groups<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <select attributes></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <optgroup label=“label1”></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <option>itema1</option></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <option>itema2</option></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> …</span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <select attributes></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <optgroup label=“label1”></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <option>itema1</option></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <option>itema2</option></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> …</span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </optgroup></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> …</span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </select></span></li><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"></span><span style="color: rgb(255, 0, 0);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Option buttons</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign96.png?t=1286852678" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Field Set</p><br /><li>HTML and XHML allow you to organize option buttons into a group of fields called field sets<span style="color: rgb(255, 255, 51);"><br /><span style="color: rgb(0, 0, 102);"> -Most browsers place a group box around a field set to indicate that the fields belong to a common group</span></span><span style="color: rgb(255, 0, 0);"><br /> <fieldset><br /> fields<br /> </fieldset></span><br /><span style="color: rgb(0, 0, 102);">Where fields are the individual fields within a set</span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Check Boxes</p><br /><li>To create a check box, use:<span style="color: rgb(255, 0, 0);"><br /> <input type=“checkbox” name=“name” id=“id”value=“value” /></span><br />Where the name and id attributes identify the check box field and the value attribute specifies the value sent to the server if the check box is selected</li><br /><li>To specify that a check box be selected by default, use the checked attribute as follows:<span style="color: rgb(255, 0, 0);"><br /> <input type=“checkbox” checked=“checked” /><br /> </span>or<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <input type=“checkbox” checked /></span></li><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Text Area Box</p><br /><li>Text area boxes allow users to enter comments about the products they’ve purchased</li><br /><li>An input box would be too small to accommodate the length of text for this use</li><br /><li>To create a text area box, use the textarea element:<span style="color: rgb(255, 0, 0);"><br /> <textarea name=“name” id=“id” rows=“value” cols=“value”><br /> default text<br /> </textarea></span><br />Where the rows and cols attributes define the dimensions of the input box and the rows attribute indicates the number of lines in the input box</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign97.png?t=1286853137" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Form Buttons</p><br /><li>Buttons are a type of control element that performs an action</li><br /><li>Types of buttons:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"></span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -Command button</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Submit button</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Reset button</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -File button</span></li><span style="color: rgb(255, 255, 51);"></span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Command button</p><br /><li>Command buttons are created using the <input> tag:<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <input type=“button” value=“text” /></span></li><span style="color: rgb(255, 0, 0);"><br /></span><li>Submit buttons submit forms to the server for processing when clicked. Syntax is as follows:<br /><span style="color: rgb(255, 0, 0);"> <input type=“submit” value=“text” /></span></li><br /><li>Reset buttons reset forms to their original (default) values. Syntax is as follows:<br /> <span style="color: rgb(255, 0, 0);"><input type=“reset” value=“text” /></span></li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign98.png?t=1286853401" width="250" height="300" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Creating a File button</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign99.png?t=1286853566" width="530" height="300" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Hidden Fields</p><br /><li>Hidden fields are added to a form, but not displayed in the Web page. The syntax is as follows:<br /><input type=“hidden” name=“name” id=“id”</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign100.png?t=1286853750" width="500" height="200" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Form Attributes</p><br /><li>After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes:<span style="color: rgb(255, 0, 0);"><br /> <form action=“url”method=“type”enctype=“type”>… </form></span><br />Where url specifies the filename and location of the program that processes the form and the method attribute specifies how your Web browser sends data to the server. The enctype attribute specifies the format of the data stored in the form’s field</li><br /><li>The method attribute can have one of two values:<span style="color: rgb(255, 255, 51);"><br /><span style="color: rgb(0, 0, 102);"> -Post</span><br /><span style="color: rgb(0, 0, 102);"> -Get</span></span></li><br /><li>The get method is the default; get appends the form data to the end of the URL specified in the action attribute</li><br /><li>The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using the mailto Action</p><br /><li>The mailto action accesses the user’s own e-mail program and uses it to mail form information to a specified e-mail address.<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -By-passes the need for server-based programs</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>The syntax is as follows:<span style="color: rgb(255, 0, 0);"><br /> <form action-mailto:e-mail_address method=“post”<br /> enctype=“text/plain”> … </form></span><br />Where e-mail_address is the e-mail address of the recipient in the form</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Specifying the Tab Order</p><br /><li>Users typically navigate through a form with the tab key</li><br /><li>You can specify an alternate tab order by adding the <b><i>tabindex</i></b> attribute to any control element in your form</li><br /><li>The syntax is as follows:<span style="color: rgb(255, 0, 0);"><br /> <input name=“fname” tabindex=“1” /></span><br />This syntax assigns the tab index number “1” to the fname field from the registration form.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Specifying an Access Key</p><br /><li>An access key is a single key typed with the Alt key (Windows) or Control key (Mac), in order to jump to one of the control elements in the form</li><br /><li>Create an access key by adding the <b><i>accesskey</i></b> attribute to any control element</li><br /><li>Example of creating an access key for the lname field:<span style="color: rgb(255, 0, 0);"><br /> <input name=“lname” accesskey=“1” /></span></li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=3912378086475294369#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-6111177058517380302010-10-11T18:47:00.002+08:002010-10-19T15:44:14.706+08:00Chapter 5 - Designing a Web Site with Frames (Part2)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Frames and Links</p><br /><li>By default, clicking a link within a frame opens the linked file inside the same frame</li><br /><li>You can display hyperlinks in many ways:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -in a different frame</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -in a new window</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -in the entire window</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>When you want to control the behavior of links in a framed page, there are two required steps:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -give each frame on the page a name</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -point each hyperlink to one of the named frames</span></li><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center;">Files and links in a Web Site</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign81.png?t=1286794797" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Assigning a Name to a Frame</p><br /><li>To assign a name to a frame, add the name attribute to the frame tag</li><br /><li>The syntax for this attribute is:<span style="color: rgb(255, 0, 0);"><br /> <frame src=“url” name=“name” /></span><br /><span style="color: rgb(0, 0, 102);"> -case is important in assigning names: “information” is considered a different name than “INFORMATION”</span></li><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center;">Setting the Frame Names</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign82.png?t=1286795046" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Specifying a Link Target</p><br /><li>You can use the target attribute to open a page in a specific frame</li><br /><li>The syntax for this is: <b>target=“name”</b></li><br /><li>When a page contains dozens of links that should all open in the same frame, HTML provides a way to specify a target frame for all the hyperlinks within a single page</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign83.png?t=1286795308" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Reserved Target Names</p><br /><li>Reserved target names are special names that can be used in place of a frame name as the target</li><br /><li>They are useful in situations:<span style="color: rgb(0, 0, 102);"> </span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -where the name of the frame is unavailable</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -when you want the page to appear in a new window</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -when you want the page to replace the current browser window</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>All reserved target names begin with the underscore character ( _ ) to distinguish them from other target names</li><br /><li>Reserved target names are case-sensitive, they must be entered in lowercase</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign84.png?t=1286795501" width="500" height="200" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Using the _self target</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign85.png?t=1286795590" width="500" height="200" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using the <noframes> Tag</p><br /><li>Use the <b><span style="color: rgb(102, 255, 255);"><noframes></span></b> tag to allow your Web site to be viewable using browsers that do or do not support frames</li><br /><li>When a browser that supports frames processes this code, it ignores everything within the <b><span style="color: rgb(102, 255, 255);"><noframes></span></b> tags and concentrates solely on the code within the <b><span style="color: rgb(102, 255, 255);"><frameset></span></b> tags</li><br /><li>When a browser that doesn’t support frames processes this code, it doesn’t know what to do with the <span style="color: rgb(102, 255, 255);"><b><frameset></b> </span>and <span style="color: rgb(102, 255, 255);"><b><noframes></b> </span>tags, so it ignores them</li><br /><li>When you use the <b><span style="color: rgb(102, 255, 255);"><noframes></span></b> tag, you must include <b><span style="color: rgb(102, 255, 255);"><body></span></b> tags, this way, both types of browsers are supported within a single HTML file</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The <noframes> Syntax</p><br /><li>The syntax for the <noframes> tag is:<span style="color: rgb(255, 0, 0);"> </span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <html></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <head></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <title>title</title></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </head></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <frameset></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> frames</span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <noframes></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <body></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> page content</span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </body></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </noframes></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </frameset></span><span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> </html></span></li><span style="color: rgb(255, 0, 0);"><br /></span><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Frameless Version of a Web Site</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign86.png?t=1286845808" width="300" height="500" /><br /><p style="text-align: center;">Inserting the Noframes Code</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign87.png?t=1286846097" width="500" height="400" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Frame Borders</p><br /><li>There are additional attributes you can apply to the <frame> tag that allow you to change border size and appearance. For example:<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -you can remove borders from your frames to free up more space for text and images</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -you can change the color of the frame border so that it matches or complements the color scheme for your Web site</span></li><br /><li>To change the color of a frame’s border, use the bordercolor attribute</li><br /><li>The attribute can be applied either to an entire set of frames, using the <frameset> tag, or to individual frames, using the <frame> tag</li><br /><li>The syntax for this attribute is: <br /> <span style="color: rgb(255, 0, 0);"> </span>-<span style="color: rgb(255, 0, 0);">bordercolor=“color”></span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting the Border Color</p><br /><li>Applying the bordercolor attribute to the <frameset> tag affects all of the frames and nested frames within the set</li><br /><li>If you apply the bordercolor attribute to a single <frame> tag, that particular color of the border changes in Internet Explorer, but in Netscape Navigator, all of the frame borders change</li><br /><li>View the page using different browsers and browser versions</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Web Site with Brown Frame Border</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign88.png?t=1286848169" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting the Border Width</p><br /><li>Another way of modifying frame borders is to change their widths using the border attribute</li><br /><li>The border attribute can be used only in the <frameset> tag, and not in individual <frame> tags</li><br /><li>The syntax for the border attribute is: <frame frameborder=“value”><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -value is the width of the frame borders in pixels</span></li><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Removing the Frame Borders</p><br /><li>Some Web designers prefer not to show frame borders in order to give the illusion of having a single Web page rather than three separate ones, while other Web designers believe that hiding frame borders can confuse users as they navigate the Web site<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign89.png?t=1286848499" width="500" height="250" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Inline Frames</p><br /><li>Another way of using frames is to create a floating frame</li><br /><li>An inline frame, or floating frame, is displayed as a separate box or window within a Web page</li><br /><li>The frame can be placed within a Web page in much the same way as an inline image</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The Floating Frames Syntax</p><br /><li>The syntax for a floating frame is:<span style="color: rgb(255, 0, 0);"><br /> <iframe src=“url”><br /> alternate content<br /> </iframe></span><span style="color: rgb(255, 255, 51);"><br /></span> -URL is the name and location of the file you want to display in the floating frame<span style="color: rgb(255, 255, 51);"><br /></span> -the alternate content is the content you want displayed in the browser that don’t support inline frames<span style="color: rgb(255, 255, 51);"><br /></span> -in addition to these attributes, you can use some of the other attributes you used with fixed frames, such as the marginwidth, marginheight, and name attributes<span style="color: rgb(255, 255, 51);"><br /></span></li><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center;">Attributes of inline frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign90.png?t=1286849089" width="500" height="250" /><br /><p style="text-align: center;">Creating an inline frame</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign91.png?t=1286849205" width="500" height="250" /><br /><p style="text-align: center;">Viewing a Floating Frame</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign92.png?t=1286849313" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=611117705851738030#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-23015998060284229042010-10-11T17:31:00.002+08:002010-10-19T15:42:24.770+08:00Chapter 5 - Designing a Web Site with Frames (Part1)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Introducing Frames</p><br /><li>A frame is a section of the browser window capable of displaying the contents of an entire Web page. For example:<span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the frame on the left may display the contents of a Web page containing a list of hyperlinks</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the frame on the right may display a Web page with product information</span></li><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Advantages to Using Frames</p><br /><li>Frames can give more flexibility in designing your Web presentation</li><br /><li>You can place information in different Web pages, removing redundancy</li><br /><li>Frames can make your site easier to manage</li><br /><li>Frames allows you to update only a few files rather than the whole</li><br /><li>Web designers advocate creating both framed and non-framed versions for a Web site and giving users the option of which one to use</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Disadvantages to Using Frames</p><br /><li>The browser has to load multiple HTML files before a user can view the contents of the site increasing the waiting time for potential customers</li><br /><li>Some older browsers cannot display frames</li><br /><li>Some users simply do not like using frames</li><br /><li>Some web authors feel that frames are too constricting, limiting flexibility in designing the layout of a Web page</li><br /><li>There is concern that frames can use up valuable screen space</li><br /><li>The source code is removed from the user</li><br /><p style="text-align: center;">An Example of Frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign69.png?t=1286789978" width="500" height="350" /><br /><p style="text-align: center;">Activating a Hyperlink within Frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign70.png?t=1286790319" width="500" height="350" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Planning Your Frames</p><br /><li>Before you start creating your frames, it is a good idea to plan their appearance and how they are to be used. There are several issues to consider:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -What information will be displayed in each frame?</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -How do you want the frames placed on the Web page?</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -What is the size of each frame?</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Which frames will be static (always showing the same content)? </span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -What Web pages will users first see when they access the site?</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -Should users be permitted to resize the frame to suit their needs?</span></li><span style="color: rgb(255, 255, 51);"><br /></span><p style="text-align: center;">An Example of a Frame Layout Sketch</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign71.png?t=1286790519" width="450" height="350" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a frameset</p><br /><li>A frameset describes how the frames are organized; they are defined by rows or columns, but not both</li><br /><li>You must choose to layout your frames in either rows or columns</li><br /><li>To create a frame layout, you will use the rows and cols attributes of the <frameset> tag.<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -the rows attribute creates a row of frames</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the cols attribute creates a column of frames</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>The <frameset> tag is used to store the definitions of the various frames in the file. These definitions will typically:<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -include the size and location of the frame</span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -include the Web pages the frames display</span></li><span style="color: rgb(255, 255, 51);"><br /></span><li>The <frameset> code does not include an opening and closing <body> tag.<br /><span style="color: rgb(0, 0, 102);"> -the reason for this is that this HTML file displays the contents of other Web pages; technically, it is not a Web page</span></li><span style="color: rgb(255, 255, 51);"><br /></span><p style="text-align: center;">Frames Defined in either Rows or Columns</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign72.png?t=1286790845" width="500" height="300" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The Frame Syntax</p><br /><li>The syntax for creating a row or column frame layout is:<span style="color: rgb(255, 0, 0);"><br /> -<frameset rows=“row1,row2,row3, . . .”> </frameset><br /> </span>or<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> -</span><span style="color: rgb(255, 0, 0);"><frameset cols=“column1,column2,column3, . . .”> </frameset></span></li><span style="color: rgb(255, 0, 0);"><br /></span><br /><li>To specify a source for a frame, use the <frame> tag with the syntax:<span style="color: rgb(255, 0, 0);"><br /></span><span style="color: rgb(255, 0, 0);"> <frame src=“url” /></span></li><span style="color: rgb(255, 0, 0);"><br /></span><li>The URL is the filename and location of the page that you want to load</li><br /><li>You must insert the <frame> tag between the opening and closing <frameset> tags</li><br /><p style="text-align: center;">Logo and Placement</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign73.png?t=1286791076" width="500" height="300" /><br /><p style="text-align: center;">Inserting a Frame forthe Head.htm File</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign74.png?t=1286791193" width="500" height="300" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Nesting Framesets</p><br /><li>Remember that a frameset is defined by rows or columns, but not both</li><br /><li>To create frames using both rows and columns, one frameset must be nested inside another</li><br /><li>The interpretation of the rows and cols attributes changes slightly.<span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -for example, a row height of 25% does not mean 25% of the display area, but rather 25% of the height of the frame into which that row has been inserted (or nested)</span></li><span style="color: rgb(255, 255, 51);"><br /></span><p style="text-align: center;">Creating a Nested Set of Frames in the Second Frame Row</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign75.png?t=1286791598" width="530" height="250" /><br /><p style="text-align: center;">Nested Frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign76.png?t=1286791696" width="530" height="250" /><br /><p style="text-align: center;">Inserting frame columns</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign77.png?t=1286791772" width="350" height="350" /><br /><p style="text-align: center;">Result of Web Site with Nested Frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign78.png?t=1286791903" width="530" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Formatting a Frames</p><br /><li>You can control three attributes of a frame:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -scroll bars</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the size of the margin between the source document and the frame border</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -whether or not the user is allowed to change the size of the frame</span></li><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Hiding and Displaying Scroll Bars</p><br /><li>By default, scroll bars are displayed when the content of the source page cannot fit within the frame</li><br /><li>You can override the default setting using the scrolling attribute</li><br /><li>The scrolling syntax is: <b>scrolling=“type”</b><span style="color: rgb(255, 255, 51);"><br /><span style="color: rgb(0, 0, 102);"> -scrolling can either be “yes” (to always display scroll bars) or “no” (to never display scroll bars)</span></span></li><br /><li>If you don’t specify a setting for the scrolling attribute, the browser displays scroll bars when necessary</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Removing the Scroll Barsfrom the Logo Frame</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign79.png?t=1286792219" width="530" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting Frame Margins</p><br /><li>The following should be consider for frame margins:<span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -the browser determines the amount of space between the content of the page and the frame border</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -occasionally, the browser sets the margin between the border and the content too large</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the margin should be big enough to keep the source’s text or images from running into the frame’s borders</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -the margin should not take up too much space, because you typically want to display as much of the source as possible</span></li><span style="color: rgb(255, 255, 51);"></span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Specifying Margins Syntax</p><br /><li>The syntax for specifying margins for a frame is:<span style="color: rgb(255, 0, 0);"><br /> marginheight=“value” marginwidth=“value”></span><span style="color: rgb(255, 255, 51);"> </span><span style="color: rgb(255, 255, 51);"><br /></span><span style="color: rgb(0, 0, 102);"> -marginheight is the amount of space, in pixels, above and below the content of the page in the frame</span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"> -marginwidth is the amount of space to the left and right of the page</span></li><span style="color: rgb(255, 255, 51);"></span><span style="color: rgb(255, 255, 51);"><br /></span><li>If you specify only one, the browser assumes that you want to use the same value for both</li><br /><li>Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Specifying the Margin Sizes for the Frames</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign80.png?t=1286792825" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Controlling Frame Resizing</p><br /><li>By default, users can resize frame borders in the browser by simply dragging a frame border</li><br /><li>Some Web designers prefer to freeze, or lock, frames, so that users cannot resize them.<br />this ensures that the Web site displays as the designer intended</li><br /><li>The syntax for controlling frame resizing is:<br /> <span style="color: rgb(51, 255, 255);">noresize=“noresize”</span></li><br /><li>The <span style="color: rgb(102, 255, 255);">noresize</span> attribute is included within the <frame> tag to prevent users from modifying the size of the frame.</li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=2301599806028422904#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-52470532290055908872010-10-11T13:20:00.001+08:002010-10-14T15:35:18.643+08:00Chapter 4 - Designing a Web Page with Tables (Part2)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Cell Padding</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign56.png?t=1286775983" width="500" height="250" /><br /><li>To control the space between the table text and the <b>cell borders</b>, add the cell padding attribute to the table tag</li><br /><li>The syntax for this attribute is:<span style="color:#ff0000;"><br /> <table cellpadding=“value”> … </table></span><br /> value is the distance from the table text to the cell border, as measured in pixels<br />the default cell padding value is 1 pixel</li><br /><p style="text-align: center">Tables with Different Cell Padding Values<br />The effect of changing the cell padding value for a table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign57.png?t=1286776898" width="500" height="250" /><br /><p style="text-align: center">Setting the Cell Padding to 4 Pixels</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign58.png?t=1286785703" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Table and Cell Size</p><br /><li>The size of a table is determined by the text it contains in its cells</li><br /><li>By default, HTML places text on a single line</li><br /><li>As you add text in a cell, the width of the column and table expands to the edge of the page<br /><b> -once the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single line</b></li><br /><li>You can insert a line break, paragraph or heading tag within a cell</li><br /><li>When the browser can no longer increase or decrease the size of the column and table it wraps the text to a second line</li><br /><li>As more text is added, the height of the table expands to accommodate the additional text</li><br /><li>It is important to manually define the size of the table cells and the table as a whole</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Defining the Table Size</p><br /><li>The syntax for specifying the table size is: <table width=“size” height=“size”><br /> <b> -size is the width and height of the table as measured in pixels or as a percentage of the display area</b></li><br /><li>To create a table whose height is equal to the entire height of the display area, enter the attribute height=“100%”</li><br /><li>If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center">Setting the Width of theTable to 70% of the page width</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign59.png?t=1286786085" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting Cell and Column Sizes</p><br /><li>To set the <b>width</b> of an individual cell, add the width attribute to either the <td> or <th> tags</li><br /><li>The syntax is: width=“value”<br /><b> -value can be expressed either in pixels or as a percentage of the table width<br /> -a width value of 30% displays a cell that is 30% of the total width of the table</b></li><br /><li>The <b>height</b> attribute can be used in the <td> or <th> tags to set the height of individual cells</li><br /><li>The height attribute is expressed either in pixels or as a percentage of the height of the table</li><br /><li>If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Spanning Rows and Columns</p><br /><li>To merge several cells into one, you need to create a <b>spanning cell</b></li><br /><li>A spanning cell is a cell that occupies more than one row or column in a table</li><br /><li>Spanning cells are created by inserting the <b>rowspan</b> and <b>colspan</b> attribute in a <td> or <th> tag.</li><br /><li>The syntax for these attributes is:<span style="color:#ff0000;"><br /> <td rowspan=“value” colspan=“value”> … </td></span><br /> <b> -value is the number of rows or columns that the cell spans in the table</b></li><br /><li>When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row</li><br /><li>When a cell spans several rows, the rows below the spanning cell must also be adjusted</li><br /><p style="text-align: center">Example of Spanning Cells</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign60.png?t=1286786691" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center">A Table Structure with a Row-Spanning Cell</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign61.png?t=1286786811" width="500" height="250" /><br /><p style="text-align: center">Adding Spanning Cells to a Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign62.png?t=1286786896" width="500" height="250" /><br /><p style="text-align: center">Results of a Table with Spanning Cells</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign63.png?t=1286787055" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Aligning a Table and its Contents</p><br /><li>By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge</li><br /><li>You can specify a different horizontal alignment for a <td> or <th> element with:<br />align=“position”</li><br /><li>To vertically align the contents of a cell use the following attribute:<br />valign=“position”</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center">Values of the align and valign attributes</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign64.png?t=1286787248" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting a Background Color</p><br /><li>To change the background color or background image of any table element, apply the following style<br /> <b> -background-color : color <br /> -background-image : url (url)</b></li><br /><li>These attribute can be added to the <table><tr><th><td>tags<br /> <b> -</b><span style="color:#ff0000;"><b><table style = “background-color : color ”><br /> <tr style = “background-color : url (url)”></b></span></li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center">Results of a Table with a Colored Background</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign65.png?t=1286787529" width="500" height="250" /><br /><p style="text-align: center">Applying a Background Imageto a Table, Row, and Cell</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign66.png?t=1286787665" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Column Groups</p><br /><li>By organize several columns into a column groups, you can format the entire columns with single style declaration or attribute. To define a column group:<span style="color:#ff0000;"><br /><b> <colgroup span = “value”></b></span><br /> -Value is the number of columns in the group<br /> -This element should place after the opening <table> tag and directly after the <caption> tag (if there is a caption tag)<br /><li>If you want to display the first three columns with white background and the last two columns with a yellow background<span style="color:#ff0000;"> </span><span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"> <colgroup span = “3” style = “background-color : white” /></span><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"> <colgroup span = “2” style = “background-color : yellow” /></span></li><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><li>The colgroup element can also expressed as two sided element<span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"> <colgroup span=“value”</span><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"> columns</span><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"> </colgroup></span></li><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><span style="color:#ff0000;"></span><span style="color:#ff0000;"><br /></span><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The <colgroup> Tag</p><br /><li><span style="color:#ff0000;"><b><colgroup span = “3” style = “background-color : white”><br /> <col style = “color : black” /><br /> <col style = “color : red” /><br /> <col style = “color : yellow” /> <br /> </colgroup></b></span></li><br /><li>In the event of a conflict between the attributes in the <col> and <colgroup> tags, the <col> tag attributes take precedence</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Tables for Layout</p><br /><li>HTML tables are most often used to define the layout of an entire Web page</li><br /><li>If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool</li><br /><li><b>Columnar layout:</b> page content is placed in columns</li><br /><li><b>Sectional layout:</b> page is broken into sections, placing each section into its own table</li><br /><li><b>Jigsaw table</b> or <b>jigsaw layout:</b> page content is broken into separate pieces to create almost any kind of layout</li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Fixed-width and Fluid Layouts</p><br /><li><b>Fixed-width layout:</b> Web designer defines exact size of every table element in absolute units such as pixels<br /> <b> -Gives designer precise control over appearance, but does not take into account the size of the browser window</b></li><br /><li><b>Fluid layout:</b> one or more table elements are sized as a percentage of the page width<br /> <b> -Page content flows into blank areas as the size of the browser window increases, but sometimes results in long lines of text</b></li><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center">Creating a Newspaper-Style Layout</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign67.png?t=1286788368" width="500" height="250" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Nested Table</p><br /><li>Tables can be created within another table making the Web page easier to manage</li><br /><p style="text-align: center">Using Nested Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign68.png?t=1286788586" width="500" height="550" /><br /><br /><hr style="color: red"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Challenges of Table Layout</p><br /><li>Some challenges that often associated with tables<br /><b> -Table can slow down page rendering<br /> -Table can be inflexible<br /> -Table can be code-heavy<br /> -Table can be inaccessible</b></li><br /><br /><hr style="color: red"><br /><h4 style="text-align:center; color: yellow">∗ <a href="#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-67740987028804250672010-10-11T09:09:00.002+08:002010-10-19T15:39:05.283+08:00Chapter 4 - Designing a Web Page with Tables (Part1)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Tables on the World Wide Web</p><br /><li>A table can be displayed on a Web page either in a text or <b>graphical</b> format</li><br /><li><b>A text table:</b><br /> -contains only text<br /> -uses only standard word processing characters</li><br /><li><b>A graphical table:</b><br /> -is displayed using graphical elements<br /> -allows you to control the size of tables cells, rows, columns and alignment of text within the table</li><br /><br /><p style="text-align: center;">A Text Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign37.png?t=1286759864" width=" 500" height="250" /><br /><br /><p style="text-align: center;">A Graphical Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign38.png?t=1286760005" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Considerations for Text and Graphical Tables</p><br /><li>Graphical tables are more flexible and attractive</li><br /><li>However, working with tags for graphical tables can be complicated and time-consuming<br /><b> -you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elements</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Text TablesUsing Fixed-Width Fonts</p><br /><li>When you create a text table, the font you use is important</li><br /><li>A text table relies on space and the characters that fill those spaces to create its column boundaries</li><br /><li>Use a <b>fixed-width</b>, or <b>mono-space</b>, font so that the columns align properly</li><br /><li><b>Fixed-width fonts</b> use the same amount of space for each character</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Proportional Fonts</p><br /><li><b>Proportional fonts</b> assign a different amount of space for each character depending on the width of that character<br /><b> -for example, since the character “m” is wider than the character “1,” a proportional font assigns it more space</b></li><br /><li>Proportional fonts are more visually attractive, and typically easier to read, than fixed-width fonts</li><br /><li>Proportional fonts in a text table can cause errors when the page is rendered in the user’s browser</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Column Alignment Problemswith Proportional Fonts</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign39.png?t=1286760406" width=" 530" height="280" /><br /><br /><p style="text-align: center;">Column Alignmentwith Fixed-Width Fonts</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign40.png?t=1286760539" width=" 530" height="280" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Preformatted Text</p><br /><li>The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.</li><br /><li>The <pre> tag displays text using a fixed-width font</li><br /><li>By using the <pre> tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is using</li><br /><br /><p style="text-align: center;">Text Table Created with the <pre> Tag</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign41.png?t=1286760674" width=" 530" height="280" /><br /><br /><p style="text-align: center;">Text Table Created with the <pre> Tag</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign42.png?t=1286760940" width=" 530" height="280" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Graphical TablesDefining a Table Structure</p><br /><li>The first step to creating a table is to specify the table structure:<br /><b> -the number of rows and columns<br /> -the location of column headings<br /> -the placement of a table caption</b></li><br /><li>Once the table structure is in place, you can start entering data into the table</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using the <table>, <tr>, and <td> Tags</p><br /><li>Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure</li><br /><li>Each row of the table is indicated using a two-sided <tr> (for table row)</li><br /><li>Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The Graphical Table Syntax</p><br /><li>The general syntax of a graphical table is:<br /><span style="color: rgb(255, 0, 0);"> <table><br /> <tr><br /> <td> First Cell </td><br /> <td> Second Cell </td><br /> </tr><br /> <tr><br /> <td> Third Cell </td><br /> <td> Fourth Cell </td><br /> </tr><br /> </table></span><br /> -This creates a table with two rows and two columns</li><br /><br /><p style="text-align: center;">A Simple Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign43-1.png?t=1286762259" width=" 530" height="220" /><br /><br /><p style="text-align: center;">HTML Structure of a Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign44.png?t=1286762081" width=" 530" height="500" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Headings with the <th> Tag</p><br /><li>HTML provides the <th> tag for table headings</li><br /><li>Text formatted with the <th> tag is centered within the cell and displayed in a boldface font</li><br /><li>The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text</li><br /><br /><hr style="color: red;"><br /><br /><p style="">Adding Table Headings to the Table</p><br />Text in cells formatted with the <th> tag is bold and centered above each table column<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign45.png?t=1286762512" width=" 500" height="250" /><br /><br /><p style="">Adding Table Headings to the Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign46.png?t=1286762666" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Identifying the Table Heading,Body, and Footer</p><br /><li>HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags<br /><span style="color: rgb(0, 0, 102);"> -<thead> is used for the table heading<br /> -<tbody> is used for the table body<br /> -<tfoot> is used for the table footer</span></li><br /><li>These tags do not format the table, but they do contain collections of rows called <b>row groups</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The Table Heading,Body, and Footer Syntax</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign47.png?t=1286762921" width=" 500" height="250" /><br /><li>A single table can contain several <tbody> tags to identify different parts of the table</li><br /><li>The <thead> and <tfoot> sections must appear before any <tbody> sections in the table structure</li><br /><li>Row groups are most often used for tables that draws its data from an external data source</li><br /><li>For tables that span through different pages, the browser will repeat the header and footer on each pages</li><br /><li>Not all browsers support this capability</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Table Caption</p><br /><li>HTML allows you to specify a caption for a table</li><br /><li>The syntax for creating a caption is:<br /><span style="color: rgb(255, 0, 0);"> <caption align=“alignment”><br /> caption text<br /> </caption></span><br /><b> -alignment indicates the caption placement, however this attribute has been deprecated</b></li><br /><li>The <caption> tag works only with tables, the tag must be placed within the table structure</li><br /><li>Captions are shown as normal text without special formatting</li><br /><li>Captions can be formatted by embedding the caption text within other HTML tags<br /> -for example, place the caption text within a pair of <b> and <i> tags causes the caption to display as bold and italic</li><br /><br /><p style="text-align: center;">Inserting a Table Caption</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign48.png?t=1286764809" width=" 500" height="250" /><br /><p style="text-align: center;">Result of a Table Caption</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign49.png?t=1286764905" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Modifying the Appearance of a Table</p><br /><li>You can modify the appearance of a table by adding:<br /><span style="color: rgb(0, 0, 102);"> -gridlines<br /> -borders<br /> -background color </span></li><br /><li>HTML also provides tags and attributes to control the placement and size of a table</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with the Table Border</p><br /><li>By default, browsers display tables without table borders</li><br /><li>The syntax for creating a table border is:<span style="color: rgb(255, 0, 0);"><br /> <table border=“value”> … </table><br /> </span>-<b>value</b> is the width of the border in pixels</li><br /><li>if you don’t specify a size, the browser creates a table border 1 pixel wide</li><br /><p style="text-align: center;">The effect on a table’s border when the border size is varied</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign50.png?t=1286765113" /><br /><p style="text-align: center;">Adding a 5-Pixel Border to a Table</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign51.png?t=1286765397" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Table Frames and Rules</p><br /><li>With the frame and rule attributes you can control how borders and gridlines are applied to the table</li><br /><li>These two attributes was introduced in HTML 4.01- therefore might not be supported in older browsers</li><br /><li>The <b>frames</b> attribute allows you to determine which sides of the table will have borders</li><br /><li>The frame attribute syntax is:<br /> <span style="color: rgb(255, 0, 0);"><table frame=“type”> … </table></span></li><br /><br /><p style="text-align: center;">Values of the Frame Attribute</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign52.png?t=1286765560" width=" 500" height="250" /><br /><br /><p style="text-align: center;">Effect of Different Frame Values</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign53.png?t=1286765746" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Frames and Rules</p><br /><li>The <b>rules</b> attribute lets you control how the table gridlines are drawn</li><br /><li>The syntax of the rules attribute is:<span style="color: rgb(255, 0, 0);"><br /> <table rules=“type”> … </table><br /> </span>-type is <b>either</b> “all”, “rows”, “cols”, <b>or</b> “none”</li><br /><p style="text-align: center;">Effect of Different Rules Values</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign54.png?t=1286768128" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Sizing a TableCell Spacing</p><br /><li>The <b>cell spacing</b> attribute controls the amount of space inserted between table cells</li><br /><li>The syntax for specifying the cell space is:<span style="color: rgb(255, 0, 0);"><br /> <table cellspacing=“value”> … </table><br /> </span>-<b>value</b> is the width of the interior borders in pixels<br /> -the default cell spacing is 2 pixels</li><br /><p style="text-align: center;">Tables with Different Cell Spacing Values<br />Different cell spacing values and a table’s appearance</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign55.png?t=1286768995" width=" 500" height="250" /><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=6774098702880425067#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-7780104667730446002010-10-10T20:40:00.003+08:002010-10-20T10:29:36.748+08:00Chapter 3 - Working with Fonts, Colors, and Graphics (Part2)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;"> Font Styles and Weights</p><br /><li>To specify font styles, use the following style:<br /> -font-style: type<br /> <span style="color: rgb(0, 0, 102);">-</span><span style="color: rgb(0, 0, 102);">Normal, italic, ablique</span></li><br /><li>To control font weight for any page element, use the following style:<br /> -font-weight: weight<br /> <span style="color: rgb(0, 0, 102);"> -</span><span style="color: rgb(0, 0, 102);">Range from 100 – 900 (with increment of 100)</span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Decorative Features</p><br /><li>To change the appearance of your text, use the following style:<br /><span style="color: rgb(255, 255, 0);"> <span style="color: rgb(0, 0, 102);"> -text-decoration: </span></span><em style="color: rgb(0, 0, 102);"><span style="color: rgb(255, 255, 0);">type</span></em></li><span style="color: rgb(255, 255, 0);"></span><span style="color: rgb(255, 255, 0);"><br /></span><li>Underline, overline:<br /><span style="color: rgb(255, 255, 51);"> <span style="color: rgb(0, 0, 102);"> -text-decoration: </span></span><em style="color: rgb(0, 0, 102);"><span style="color: rgb(255, 255, 51);">underline overline</span></em></li><span style="color: rgb(255, 255, 51);"></span><span style="color: rgb(255, 255, 51);"><br /></span><li>Capitalize:<br /><span style="color: rgb(0, 0, 102);"> -text-transform: </span><em style="color: rgb(0, 0, 102);"><span style="color: rgb(255, 255, 51);">capitalize</span></em></li><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(255, 255, 51);"><br /></span><li>Uppercase letters, small font:<br /><span style="color: rgb(0, 0, 102);"> -font-variant: </span><em style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 255, 51);">type</span></em></li><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(0, 0, 102);"><br /></span><span style="color: rgb(0, 0, 102);"></span><span style="color: rgb(255, 255, 51);"><br /></span><hr style="color: red;"><br /><br /><p style="text-align: center;">Text Alignment</p><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign30.png?t=1286714887" width="500" height="250" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Choosing an Image Format</p><br /><li><b>GIF (Graphics Interchange Format)</b> is the most commonly used image format on the Web.</li><br /><li>Compatible with virtually all browsers.</li><br /><li>GIF files are limited to displaying 256 colors.</li><br /><li>Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons.</li><br /><li>Images that require more color depth, such as photographs, can appear grainy when saved as GIF files.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Interlaced and Noninterlaced GIFs</p><br /><li><b>Interlacing</b> refers to the way the GIF is saved by the graphics software</li><br /><li>Normally, with a <b>noninterlaced</b> GIF the image is saved one line at a time, starting from the top of the graphic and moving downward</li><br /><li>With <b>interlaced</b> GIFs, the image is saved and retrieved “<b>stepwise</b>”<br /><b> -For example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows</b></li><br /><li>Interlacing is an effective format if you have a large graphic and want to give users a preview of the final image as it loads</li><br /><li>Interlacing can increase the size of a GIF file by anywhere from 3 to 20 kilobytes, depending on the image</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Noninterlaced Graphic</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign31.png?t=1286715321" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Noninterlaced Graphic</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign32.png?t=1286715405" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Transparent GIFs</p><br /><li>A <b>transparent color</b> is a color from the image that is not displayed when the image is viewed in an application</li><br /><li>In place of a transparent color, the browser will display whatever is on the page background</li><br /><li>Methods for creating a transparent color depends on the graphic software used</li><br /><li>Many applications include the option to designate transparent color when saving the image i.e. PhotoShop</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Animated GIFs</p><br /><li>GIFs are also commonly use to create animated images</li><br /><li>Animated GIFs are easy to create and smaller in size</li><br /><li>An <b>animated GIF</b> is composed of several images that are displayed one after the other in rapid succession</li><br /><li>Animated GIFs are an effective way to compose slide shows or to simulate motion</li><br /><li>Animated GIF files are typically larger than static GIF images</li><br /><li>The use of animated GIFs can greatly increase the size of a Web page</li><br /><li>Be careful not to overwhelm the user with animated images</li><br /><li>Animated GIFs are limited to 256 colors and can use transparent colors</li><br /><li>Early browser versions may not support animated GIFs</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">JPEG</p><br /><li>JPEG stands for Joint Photographic Expert Group.</li><br /><li>Create image that use the full 16.7 million colors available in the color palette.</li><br /><li>JPEG files are usually smaller (but not always) than GIF.</li><br /><li>Use JPEGs for photos and GIFs for illustration that involve only a few colors.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Portable Network Graphics (PNG)</p><br /><li>A new file format called <b>PNG (Portable Network Graphics)</b> has been created</li><br /><li>PNG files use a free and open file format and can display more colors than GIFs</li><br /><li>PNGs cannot be used for animated graphics</li><br /><li>PNGs do allow transparent colors, but not all browsers support this feature</li><br /><p style="text-align: center;">The syntax for the float style is: float: position</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign33.png?t=1286715786" width="500" height="250" /><br /><li>For some older browsers, you need to use the <b>align</b> attribute, which is now deprecated</li><br /><li>The syntax for the align attribute is:<br /><span style="color: rgb(255, 0, 0);"> <img align=“position” /></span><br /><em> -alignment</em> <b>indicates how you want the graphic aligned in relation to the surrounding text</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Alignment Options</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign34.png?t=1286716041" width="500" height="250" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Margins</p><br /><li>Control your margins with the following four styles:<br /><span style="color: rgb(0, 0, 102);"> -margin-top: length<br /> -margin-right: length<br /> -margin-bottom: length <br /> -margin-left: length</span></li><br /><li>Margin values can also be negative- this creates an overlay effect by forcing the browser to render one element on top of another</li><br /><li>You can also combine the four margin styles into a single style</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Inserting a Background Image</p><br /><li>The syntax for inserting a background image is: background-image: url(url)<br /><b> -URL is the location and filename of the graphic file you want to use for the background of the Web page</b><br /> <span style="color: rgb(255, 0, 0);"> <body background=“brick.gif”></span></li><br /><li>In choosing a background image, you should remember the following:<br /><b> -use an image that will not detract from the text on the Web page, making it hard to read<br /> -do not use a large image file (more than 20 kilobytes)<br /> -be sure to take into consideration how an image file looks when it is tiled in the background</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Background Image Options<br /><br /><br />background-repeat: type</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign35.png?t=1286757366" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Understanding Image Maps</p><br /><li>To use a single image to access multiple targets, you must set up hotspots within the image</li><br /><li>A <b>hotspot</b> is a defined area of the image that acts as a hypertext link</li><br /><li>When a user clicks within a hotspot, the hyperlink is activated</li><br /><li>Hotspots are defined through the use of <b>image maps</b>, which list the positions of all hotspots within an image</li><br /><li>There are two types of image maps: <b>server-side image maps</b> and <b>client-side image maps</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Server-Side Image Maps</p><br /><li>In a <b>server-side image map</b>, the image map is stored on the Web server</li><br /><li>Server-side image maps are supported by most graphical browsers</li><br /><li>Server-side image maps can be slow to operate</li><br /><li>The browser’s status bar does not display the target of each hotspot</li><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign36.png?t=1286757898" width="530" height="280" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Client-Side Image Maps</p><br /><li>A <b>client-side image map</b> is inserted in an image map into the HTML file</li><br /><li>The browser locally processes the image map</li><br /><li>Because all of the processing is done locally, you can easily test Web pages</li><br /><li>More responsive than server-side maps</li><br /><li>The browser’s status bar displays the target of each hotspot</li><br /><li>Older browsers do not support client-side images</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Defining Image Map Hotspots</p><br /><li>Define a hotspot using two properties:<b><br /><span style="color: rgb(0, 0, 102);"> -Its location in the image</span><br /><span style="color: rgb(0, 0, 102);"> -Its shape</span></b></li><br /><li>Syntax of the hotspot element:<br /> <span style="color: rgb(255, 0, 0);"> <area shape=“shape” coords=“coordinates” href=“url” alt=“text” /></span></li><br /><li>Use a special program that determines the image map coordinates</li><br /><li>Most image map programs generate the coordinates for hotspots, as well as, the necessary HTML code</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Rectangular Hotspot</p><br /><li>Two points define a <b>rectangular hotspot:<br /><span style="color: rgb(0, 0, 102);"> -the upper-left corner</span><br /><span style="color: rgb(0, 0, 102);"> -the lower-right corner</span></b></li><br /><li>A sample code for a <b>rectangular hotspot</b> is:<br /><span style="color: rgb(255, 0, 0);"> <area shape=“rect” coords=“384,61,499,271” href=“water.htm”></span></li><br /><li><b><i>coordinates</i> are entered as a series of four numbers separated by commas</b></li><br /><li><b>the first two numbers represent the coordinates for the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner</b></li><br /><li><b>the <i>hotspot</i> is a hypertext link to water.htm</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Circular Hotspot</p><br /><li>A <b>circular hotspot</b> is defined by the location of its center and its radius</li><br /><li>A sample code for a <b>circular hotspot</b> is:<span style="color: rgb(255, 0, 0);"><br /> <area shape=“circle” coords=“307,137,66” href=“karts.htm”><br /><b> </b></span><b> -<i>coordinates</i> are (307, 137), and it has a radius of 66 pixels<br /> -the hotspot is a hypertext link to karts.htm</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Polygonal Hotspot</p><br /><li>To create a polygonal hotspot, you enter the coordinates for each vertex in the shape</li><br /><li>A sample code for a polygonal hotspot is:<span style="color: rgb(255, 0, 0);"><br /> <area shape=“polygon” coords=“13,60,13,270,370,270,370,225,230,225,230,60” href=“rides.htm”><br /> <b> </b></span><b>-<i>coordinates</i> are for each vertex in the shape.<br /> -the hotspot is a hypertext link to rides.htm</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using an Image Map</p><br /><li>To apply an image map to an inline image, you need to insert the following attribute into the <img /> tag<br /> usemap = “#map”</li><br /><li>E.g.<br /><b><span style="color: rgb(255, 0, 0);"><img src = “parkmap.gif” usemap = “#parkmap”></span></b><br /><br /><b><span style="color: rgb(255, 0, 0);"><map name = “parkmap” id = “parkmap”></span></b><span style="color: rgb(255, 102, 0);"><br /> <area shape=“circle” coords=“307,137,66” href=“karts.htm” /></span><br /><b><span style="color: rgb(255, 0, 0);"></map></span></b><br /></li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=778010466773044600#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-82886046484997270382010-10-10T19:13:00.002+08:002010-10-19T15:36:52.209+08:00Chapter 3 - Working with Fonts, Colors, and Graphics (Part1)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Color in HTML</p><br /><li>Using color will make your web pages:<br /><b> -visually interesting<br /> -eye-catching for the reader</b><br /></li><br /><li>HTML identifies a color in one of two ways:<br /><b> -by the color value<br /> -by the color name</b></li><br /><li>A <b>color value</b> is a numerical expression that precisely describes a color</li><br /><li>To have more control and more choices, specify colors using <b>color value</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Basic Principles of Color Theory</p><br /><li>Any color can be thought of as a combination of three primary colors: <b>red</b>, <b>green</b>, and <b>blue</b></li><br /><li>By varying the intensity of each primary color, you can create almost any color and any shade of color</li><br /><li>This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Adding the Three Primary Colors</p><br /><li style="text-align: center;">Primary color model for light<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign24.png?t=1286709910" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">RGB (Red, Green, and Blue) Triplets</p><br /><li>Software programs, such as your Web browser, define color mathematically</li><br /><li>Each color is represented by a triplet of numbers, called an <b>RGB triplet</b>, based on the strength of its <b>R</b>ed, <b>G</b>reen, and <b>B</b>lue component</li><br /><li>The strength of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity)</li><br /><li>White has a triplet of (255,255,255)</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">A Typical Colors Dialog Box</p><br /><li>In most programs, you make your color choices with visual clues</li><br /><li style="text-align: center;"><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign25.png?t=1286710339" width="500" height="250" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Hexadecimal Values</p><br /><li>HTML requires color values be entered as hexadecimals</li><br /><li>A <b>hexadecimal</b> is a number based on base-16 mathematics rather than base-10 mathematics that we use every day<br /><b> -hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15)<br /> -for values above 15, you use a combination of the 16 characters; 16 is expressed as “10”, 17 is expressed as “11”, and so forth</b></li><br /><li>To represent a number in hexadecimal terms, you convert the value to multiples of 16 plus a remainder. For example:<b><br /> -21 is equal to (16 x 1) + 5, so its hexadecimal representation is 15<br /> -the number 255 is equal to (16 x 15) + 15, or FF in hexadecimal format (remember that F = 15 in hexadecimal)</b></li><br /><li>Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Color Values</p><br /><li>A <b>palette</b> is a selection of colors</li><br /><li>When a browser encounters a color that is not in its palette, it attempts to render the color; this is called <b>dithering</b></li><br /><li>Use colors from the <b>safety palette</b> to avoid dithering</li><br /><li>The 216 colors in the safety palette are known as <b>Web-safe colors (0, 51, 102, 153, 204 and 255)</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using Color Names</p><br /><li>Using the basic color names allows you to accurately display them across different browsers and operating systems</li><br /><li>The list of only 16 colors is limiting to Web designers<br /> <b>-In response, Netscape and Internet Explorer began to support an extended list of color names</b></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The 16 Basic Color Names</p><br /><li style="text-align: center;">The 16 basic color names that are recognized by all versions of HTML and XHTML.<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign26.png?t=1286712279" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Partial List of Extended Color Names</p><br /><li style="text-align: center;">Partial list of extended color names<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign27.png?t=1286712349" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Defining Foreground and Background Colors</p><br /><li>Foreground color definition:<br /> color: color<br /> color <b>is either the color value or the color name</b></li><br /><li>Background color definition:<br /> background-color: color</li><br /><li>You can apply foreground and background colors to any page element</li><br /><li>To define the background color for an entire page:<br /> <b>Add the bgcolor attribute to the <body> tag</b></li><br /><li>To define the text color for an entire page:<br /> <span style="font-weight: bold;"></span><b>Use the text attribute</b></li><br /><li>An example of background and text color changes including the color’s hexadecimal value:<br /><span style="color: rgb(255, 0, 0);"> <body bgcolor=“yellow” text=“#99CCFF”></span></li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign28.png?t=1286712827" width="500" height="250" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Fonts and Text Styles</p><br /><li>A <b>specific font</b> is a font such as Times New Roman, Arial, or Garamond.<br /> -A specific font needs to be installed on the user’s computer before it can be used</li><br /><li>A <b>generic font</b> refers to the font’s general appearance<br /> -Used when none of the specific font can be used</li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign29.png?t=1286713275" width="500" height="250" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using the <font> Tag</p><br /><li>The <font> tag allows you to specify the color, the size, and the font to be used for text on a Web page</li><br /><li>The syntax for the <font> tag is:<br /><span style="color: rgb(255, 0, 0);"> <font size=“size” color=“color” face=“face”> text </font></span></li><br /><li><b>size</b> attribute allows you to specify the font size of the text</li><br /><li><b>color</b> attribute allows you to change the color of individual characters or words</li><br /><li><b>face</b> attribute specifies a particular font for a section of text</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Changing the Font Color</p><br /><li>The <b>color</b> attribute of the <font> tag allows you to change the color of individual characters or words, by using either a color name or color value<br /> <b>-for example, to change the color of the word “Aracadium” to the hexadecimal color value 8000C0, you would enter the following HTML tag:</b><br /><span style="color: rgb(255, 0, 0);"> <font color=“#8000C0”> Arcadium</font></span></li><br /><li>If there is no color specified in the <body> tag, the default colors of the Web browser is used</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Setting the Font Size</p><br /><li>The style to change the font size of text within an element:<br /> font-size: length</li><br /><li><b>Absolute units</b> define a font size using one of five standard units of measurement:<br /><span style="color: rgb(255, 255, 51);"> </span><b style="color: rgb(0, 0, 102);">-Millimeters (mm)<br /> -Centimeters (cm)<br /> -Inches (in)<br /> -Points (pt)<br /> -Picas (pc)</b><br /><span style="color: rgb(0, 0, 102);"> -1 inch = 72 points = 6 picas</span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Spacing and Indentation</p><br /><li><b>Tracking</b> is the amount of space between words and phrases<br /> -word-spacing: value</li><br /><li><b>Kerning</b> is the amount of space between pairs of letters<br /> -letter-spacing: value</li><br /><li><b>Leading</b> is the space between lines of text<br /> -line-height: length</li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=8288604648499727038#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-40206460375731312162010-10-10T17:27:00.001+08:002010-10-14T15:32:50.937+08:00Chapter 2 - Web Page Creation (Part2)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to Usenet News</p><br /><li>Usenet is a collection of discussion forums called newsgroups that let users publicly exchange messages with each other on a wide variety of topics.</li><br /><li>When you click a link to a newsgroup, your computer opens a program for reading newsgroups, known as newsreader, displaying the latest messages from the newsgroup.<br />file://server/path/filename</li><br /><li style="text-align: center;">A Sample Newsreader<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign21.png?t=1286703158" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to a Local File</p><br /><li>On occasion, you may see the URL for a file stored locally on your computer or local area network.</li><br /><li>If you are accessing a file from your own computer, the server name might be omitted and replaced by an extra slash (/).<br /><span style="color: rgb(255, 0, 0);"> ftp:///path/filename</span></li><br /><li>The file scheme here does not imply any particular communication protocol; instead the browser retrieves the document using whatever method is the local standard for the type of file specified in the URL.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to E- mail</p><br /><li>Many Web sites use e-mail to allow users to communicate with a site’s owner, or with the staff of the organization that runs the site.</li><br /><li>You can turn an e-mail address into a link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the address into the “To” field of the new outgoing message.</li><br /><li>The effect of e-mail links on increasing Spam is a concern.</li><br /><li>Spam is unsolicited junk e-mail set to large numbers of people, promoting products, services, and in some cases, pornographic Web sites.</li><br /><li>Spammers create their e-mail lists through scanning Usenet postings, stealing Internet mailing lists, and using programs called e-mail harvesters that scan HTML code on the Web looking for the e-mail addresses contained in <span style="font-style: italic; color: rgb(51, 255, 255);">mailto</span> URLs.<br /><span style="color: rgb(255, 0, 0);"><a href = “mailto: abc@yahoo.com”> abc email </a></span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Hypertext Attributes</p><br /><li>HTML provides several attributes to control the behavior and appearance of your links.</li><br /><li>You can force a document to appear in a new window by adding the target attribute to the tag <span style="color: rgb(255, 0, 0);"><a></span> tag.</li><br /><li>If you want to provide additional information to your users, you can provide a popup title to your links.</li><br /><li>A popup title is a descriptive text that appears whenever a user positions the mouse pointer over a link.</li><br /><li>Since only some browsers support <span style="color: rgb(51, 255, 255);">popup titles</span>, you should not place crucial information in them<br /><span style="color: rgb(255, 0, 0);"><a href=“url” title= “text”> element </a></span><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign22.png?t=1286703526" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating an Access Key</p><br /><li>Another way to activate a link is to assign a keyboard key, called an <b>access key</b>, to the link</li><br /><li>To use an <b>access key</b>, you hold down an accelerator key (usually the Alt key in Windows or the Ctrl key on a Macintosh) and then press the specified key</li><br /><li><b>Access keys</b> are impractical in most situations because most access keys are already reserved by the browser.</li><br /><li>It is difficult to indicate to the user which <b>access key</b> to press in order to activate a link.<br /><span style="color: rgb(255, 0, 0);"><a href=“url” accesskey = “char”> element </a></span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating a Semantic Link</p><br /><li>Two attributes, <b>rel (forward link type)</b> and <b>rev (reverse link type)</b>, allow you to specify the relationship between a link and its destination.</li><br /><li>The <b>rel</b> attribute describes the content of the destination document</li><br /><li>The <b>rev</b> attribute complements the rel attribute by describing the contents of the source document as viewed from the destination document’s perspective<br /><span style="color: rgb(255, 0, 0);"><a href=“url” rel = “to” rev=“from”> element </a></span></li><br /><li>Links containing the <b>rel</b> and <b>rev</b> attributes are called <b>semantic links</b> because the tag contains information about the relationship between the link and its destination.</li><br /><li>A browser can use the information that these attributes provide in many ways—for example to build a custom toolbar containing a list of links specific to the page being viewed</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Link Types</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign23.png?t=1286704053" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Using the Link Element</p><br /><li>Another way to add a link to your document is to add a <b>link element</b> to the document’s head .</li><br /><li><b>link element</b> are intended only for the browser’s use.</li><br /><li><b>link element</b> have primarily been used to link style sheets.</li><br /><li>Because no single list of relationship names is widely accepted, you must check with each browser’s documentation to find out what relationship names it supports<br /><span style="font-weight: bold; color: rgb(255, 0, 0);"><link href=“url” rel = “</span><span style="font-style: italic; font-weight: bold; color: rgb(255, 0, 0);">to</span><span style="font-weight: bold; color: rgb(255, 0, 0);">” rev=“</span><span style="font-style: italic; font-weight: bold; color: rgb(255, 0, 0);">from</span><span style="font-weight: bold; color: rgb(255, 0, 0);">” /></span></li><br /><br /><hr style="color: red;"><br /><h4 style="text-align:center; color: yellow">∗ <a href="#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-83967764827701698222010-10-10T16:15:00.005+08:002010-10-19T15:31:31.616+08:00Chapter 2 - Web Page Creation (Part1)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Links</p><br /><li>Using a link is a quicker way to access information at the bottom of a Web page than scrolling down.</li><br /><li>A user can select a link in a Web page, usually by clicking it with a mouse, to view another topic or document, often called the link’s destination.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Element Ids</p><br /><li>One way to identify elements in an HTML document is to use the id attribute.</li><br /><li>Id names must be unique.</li><br /><li>Id names are not case sensitive.<br /><ul style="color: rgb(255, 0, 0);">id = “id”<br /><h2 id = “item”>ITEM NAME</h2></ul></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Links Within a Document</p><br /><li>To create a link within a document, you enclose the content that you want to format as a link in an <span style="color: rgb(255, 0, 0);"><a></span> tag, and use the <span style="color: rgb(255, 0, 0);">href</span> attribute to identify the link target.<ul style="color: rgb(255, 0, 0);"><a href = “#item”>Item Name</a></ul></li><br /><li>A link’s content is not limited to text.</li><br /><li>Generally, a link should not contain any block-level elements.<ul style="color: rgb(255, 0, 0);"><a href = “#item”>Item Name</a></ul></li><br /><li><img style="width: 465px; height: 297px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign11.png?t=1286699270" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Anchors</p><br /><li>An anchor element marks a specific location within a document.</li><br /><li>Since you create anchors with the same <span style="color: rgb(255, 0, 0);"><a></span> tag that you use to create links, anchor content can also include most inline elements and empty elements; however, anchors cannot include block-level elements.</li><br /><li style="color: rgb(255, 0, 0);"><a name = “anchor”>Item Name</a></li><li style="color: rgb(255, 0, 0);"><a href = “#anchor”>Item Name</a></li><br /><li>Inserting an anchor does not change your document’s appearance. It just creates a destination within your document.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Web Site Structures</p><br /><li>A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together.</li><br /><li>It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains.</li><br /><li>A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information.</li><br /><li style="text-align: center;">The three chemistry pages<br /><img style="width: 480px; height: 195px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign12.png?t=1286699520" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linear Structures</p><br /><li>In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain.</li><br /><li>Linear structure works best for Web pages with a clearly defined order.</li><br /><li>In an augmented linear structure, each page contains an additional link back to an opening page.</li><br /><li>A linear structure</li><img style="width: 501px; height: 167px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign13.png?t=1286699864" /><br /><br /><li>An augmented linear structure<img style="width: 500px; height: 155px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign14.png?t=1286699934" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Hierarchical Structures</p><br /><li>In the hierarchical structure, the pages are linked going from the most general page down to more specific pages.</li><br /><li>Users can easily move from general to specific and back again.</li><br /><li>Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play.</li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign15.png?t=1286700043" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Mixed Structures</p><br /><li>As Web sites become larger and more complex, you often need to use a combination of several different structures.</li><br /><li>The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion.</li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign16.png?t=1286700155" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Web Site Structures</p><br /><li>A little foresight can go a long way toward making your Web site easier to use.</li><br /><li>Each page should contain, at minimum, a link to the site’s home page, or to the relevant main topic page, if applicable.</li><br /><li>You may want to supply your users with a <span style="color: rgb(0, 0, 102);">site index</span> which is a page containing an outline of the entire site and its contents.</li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign17.png?t=1286700277" /></li><br /><li>To link to a page, you specify the name of the file using the <span style="color: rgb(255, 0, 0);">href</span> attribute of the <span style="color: rgb(255, 0, 0);"><a></span> tag.</li><br /><li>Filenames are case sensitive on some operating systems, including the UNIX and Macintosh, but not on others.</li><br /><li>The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes.</li><br /><li>You should also keep filenames short to avoid typing errors.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to a Location Within Another Document</p><br /><li>When linking to a location within another document, you must use the anchor name of the location within the document and the filename.</li><br /><li style="color: rgb(255, 0, 0);"><a href = “file#id>content</a></li><br /><li style="color: rgb(255, 0, 0);"><a href = “abc.htm”>Please open it</a></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to Documents in Other Folders</p><br /><li>To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path, so that browsers can find it.</li><br /><li>HTML supports two kinds of paths: relative and absolute.</li><br /><li>An <span style="color: rgb(0, 204, 204);">absolute path</span> specifies a file’s precise location within a computer’s entire folder structure.<br /><span style="color: rgb(0, 0, 102);">“C:\Documents and Settings\laumc\My Documents\abc.htm”</span><br /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Linking to Documents in Other Folders</p><br /><img style="width: 479px; height: 380px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign18.png?t=1286700578" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Relative Paths</p><br /><li>A relative path specifies a file’s location in relation to the location of the current document.</li><br /><li>If the file is in the same location as the current document, you do not have to specify the folder name.</li><br /><li>If the file is in a subfolder of the current document, you have to include the name of the subfolder.</li><br /><li>If Main.htm stores at <span style="color: rgb(255, 255, 102);"><span style="color: rgb(0, 0, 102);">C:\Documents and Settings\laumc\</span> </span>then<br /><span style="color: rgb(255, 0, 0);">“\My Documents\abc.htm”</span></li><br /><li>If you want to go one level up the folder tree, you start the relative path with a double period (..) and then provide the name of the file.</li><br /><li>To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder.</li><br /><li>You should almost always use relative paths in your links.<br /><span style="color: rgb(255, 0, 0);">"../old files/images/lespaul.jpg"</span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Changing the Base</p><br /><li>The base element is useful when a document is moved to a new folder. Rather than rewriting all of the relative paths to reflect the document’s new location, the base element can redirect browsers to the document’s old location, allowing any relative paths to be resolved.</li><br /><li>The base element is useful when you want to create a copy of a single page from a large Web site on another Web server.<br /><span style="color: rgb(255, 0, 0);"><base href=“path”/></span></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Understanding URLs</p><br /><li>Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP).</li><br /><li>The URLs for all Web pages must start with the scheme “http”. </li><br /><li>Other Internet resources use different protocols and have different scheme names.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center;">Common Communication Protocols</p><br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign19.png?t=1286701294" /><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to a Web Page</p><br /><img style="width: 500px; height: 77px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign20.png?t=1286701430" /><br /><li>If a URL includes no path, then it indicates the topmost folder in the server’s directory tree.</li><br /><li>If a URL does not specify a filename, the server searches for a file named “index.html” or “index.htm”.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Linking to FTP Servers</p><br /><li>FTP servers are one of the main sources for storing files on the Internet.</li><br /><li>FTP servers transfer information using a communications protocol called File Transfer Protocol, or FTP for short.</li><br /><li>An FTP server requires each user to enter a password and a username to access its files.<br /><span style="color: rgb(102, 0, 204);">ftp://username :password@hostname/path/filename</span><br /><span style="color: rgb(102, 0, 204);">ftp://laumc :12345@ftp://ftp.usm.edu.my/mypicture.jpg</span><br /><br /><hr style="color: red;"></li><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=8396776482770169822#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-74402993723931980462010-10-10T15:51:00.003+08:002010-10-19T15:28:36.297+08:00Chapter 1 - Web Fundamentals (Part3)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Block-Level Elements</p><br /><li>In a Web page, most content is marked as either a block-level element or an inline element.</li><br /><li>A block-level element contains content displayed in a separate section within the page, setting it off from other blocks.</li><br /><li>An inline element is part of the same block as its surrounding content—for example individual words or phrases within a paragraph.</li><br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign4.png?t=1286697214" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Styles</p><br /><li>Use the style attribute to control the appearance of an element, such as text alignment.</li><br /><li>Styles specified as attributes in a tag are also referred to as inline styles.</li><br /><li>The text-align style tells the browser how to horizontally align the contents of an element.</li><br /><li>Presentational attributes specify exactly how the browser should render an element.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating Lists</p><br /><li>HTML supports three kinds of lists: ordered, unordered, and definition.</li><br /><li>You use an ordered list for items that must appear in a particular sequential order.</li><br /><li>You use an unordered list for items that do not need to occur in any special order.</li><br /><li>One list can contain another list. This is called a nested list.</li><br /><li>A definition list is a list of terms, each followed by a definition line that is typically indented slightly to the right.</li><br /><li>A logical element describes the nature of the enclosed content, but not necessarily how that content should appear.</li><br /><li style="color: rgb(0, 0, 102);">HTML Examples: <ul><cite><br /><code></ul></li><br /><li>A physical element describes how content should appear, but doesn’t indicate the content’s nature.</li><br /><li style="color: rgb(0, 0, 102);">HTML Examples: <ul><b><br /><i></ul></li><br /><li>You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content.</li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Empty Elements</p><br /><li>To display a graphic, you insert an inline image into the page. An inline image displays a graphic image located in a separate file within the contents of a block-level element.</li><br /><li>You can insert a horizontal line by using the one-sided tag <hr />.</li><br /><li>A pixel is a dot on your computer screen that measures about 1/72” square.</li><br /><li>Other empty elements you may wish to use in your Web page include line breaks and meta elements.</li><br /><li>Meta elements are placed in the document’s head and contain information about the document that may be of use to programs that run on Web servers.</li><br /><li><img style="width: 517px; height: 281px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/wendesign5.png?t=1286697858" /></li><br /><li><img style="width: 518px; height: 316px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign6.png?t=1286697894" /></li><br /><br /><hr style="color: red;"><br /><br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Working with Special Characters</p><br /><li>Occasionally you will want to include special characters in your Web page that do not appear on your keyboard.<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign7.png?t=1286697982" /></li><br /><li>HTML supports the use of character symbols that are identified by a code number or name.<br /><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign8.png?t=1286698170" /></li><br /><li><img style="width: 512px; height: 279px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign9.png?t=1286698203" /></li><br /><li><img style="width: 514px; height: 328px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign10.png?t=1286698249" /></li><br /><br /><hr style="color: red;"><br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=7440299372393198046#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-65004813551073854152010-10-10T10:10:00.004+08:002010-10-19T15:26:48.238+08:00Chapter 1 - Web Fundamentals (Part2)<p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Creating an HTML Document</p><p>
<br /></p><li>It is a good idea to plan out a Web page before you start coding.</li>
<br /><li>Draw a planning sketch or create a sample document using a word processor.</li>
<br /><li>Preparatory work can weed out errors or point to potential problems.</li>
<br /><li><img src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign1.png?t=1286677074" /></li>
<br /><li>In planning, identify a document’s different elements. An element is a distinct object in the document, like a paragraph, a heading, or a page’s title.</li>
<br /><li>Formatting features such as boldfaced font, and italicized text may be used.</li>
<br />
<br /><hr style="color: red;">
<br />
<br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Marking Elements with Tags</p><p>
<br /></p><ul><li>The core building block of HTML is the tag, which marks each element in a document.</li><li>Tags can be two-sided or one-sided.</li><li>A two-sided tag is a tag that contains some document content. General syntax for a two-sided tag: <span style="color: rgb(255, 0, 0);"><element>content</element></span><span style="color: rgb(255, 204, 0);font-family:Garamond;font-size:28pt;" ><span style="font-size:130%;"><element>
<br /></element></span></span></li><li>A two-sided tag's opening tag <span style="color: rgb(0, 0, 102);"><p></span>and closing tag<span style="color: rgb(255, 255, 0);"><span style="color: rgb(0, 0, 102);"> </p></span> </span>should completely enclose its content.</li><li>HTML allows you to enter element names in either uppercase or lowercase letters.</li><li>A one-sided tag contains no content. General syntax for a one-sided tag: <p style="line-height: 90%; margin-top: 5.76pt; margin-bottom: 0pt; margin-left: 0.38in; text-indent: -0.38in; text-align: center; direction: ltr; unicode-bidi: embed; vertical-align: baseline;"><span style="color: rgb(255, 204, 0);font-family:Garamond;font-size:24pt;" ><span style="font-size:130%;"><element></element></span></span></p> <span style="color: rgb(255, 0, 0);"> <element></element></span> <span style="color: rgb(255, 0, 0);"> <element></element></span> <span style="color: rgb(255, 0, 0);"><element /></span>
<br />
<br /> </li><li>Elements that employ one-sided tags are called empty elements since they contain no content. An example is a line break<span style="color: rgb(0, 0, 102);"> <br /></span><span style="color: rgb(255, 204, 51);">
<br /></span></li><li>A third type of tag is the comment tag, which you can use to add notes to your HTML code. <span style="color: rgb(255, 0, 0);"> <!-- comment --> <!-- comment --></span></li><li>Comments are useful in documenting your HTML code for yourself and others.
<br />
<br /></li></ul>
<br /><hr style="color: red;">
<br />
<br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">White Space and HTML</p>
<br /><li>HTML file documents are composed of text characters and white space.</li>
<br /><li>White space is the blank space, tabs, and line breaks within the file.</li>
<br /><li>HTML treats each occurrence of white space as a single blank space.</li>
<br /><li>You can use white space to make your document more readable.</li>
<br />
<br /><hr style="color: red;">
<br />
<br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">Element Attributes</p>
<br /><li>Many tags contain attributes that control the behavior, and in some cases the appearance, of elements in the page.</li>
<br /><li>Attributes are inserted within the tag brackets.</li> <span style="color: rgb(255, 0, 0);"><element attribute1="“value1”" attribute2="“value2”"></element></span> <span style="font-style: italic; color: rgb(255, 0, 0);"><element attribute1="“value1”" attribute2="“value2”"></element></span> <span style="color: rgb(255, 0, 0);"><element attribute1=“value1” attribute2=“value2” …/></span>
<br /> <span style="color: rgb(255, 0, 0);"><element attribute1="“value1”" attribute2="“value2”"></element></span> for one-side tags
<br /> <meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="PowerPoint.Slide"><meta name="Generator" content="Microsoft PowerPoint 12"> <span style="font-style: italic; color: rgb(255, 0, 0);"><element attribute1="“value1”" attribute2="“value2”"><element attribute1=“value1” attribute2=“value2” …>content</element></element></span>
<br /> for two-sided tags
<br /><p>
<br />
<br /></p><hr style="color: red;">
<br />
<br /><p style="text-align: center; font-family: monotype corsiva; color: aqua; font-size: 35px; font-weight: 200;">The Structure of an HTML File</p>
<br /><li>The opening <span style="color: rgb(255, 0, 0);"><html></span> <meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="PowerPoint.Slide"><meta name="Generator" content="Microsoft PowerPoint 12"><span style=";font-family:Garamond;font-size:28pt;color:white;" > </span> tag marks the start of an HTML document, and the closing <span style="color: rgb(255, 0, 0);"></html></span> tag tells a browser when it has reached the end of that HTML document.</li>
<br /><li>Anything between these two tags makes up the content of the document, including all other elements, text, and comments.</li>
<br /><li><img style="width: 435px; height: 262px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign2.png?t=1286693200" /></li>
<br /><li>An HTML document is divided into two parts: the head and the body.</li>
<br /><li>The head element contains information about the document, for example the document title or the keywords.</li>
<br /><li>The content of the head element is not displayed within the Web page.</li>
<br /><li>The body element contains all of the content to be displayed in the Web page.</li>
<br /><li>The body element can contain code that tells the browser how to render the content.</li>
<br /><li>The title element contains the page’s title. A document’s title is usually displayed in the title bar.</li>
<br /><li><img style="width: 494px; height: 285px;" src="http://i1141.photobucket.com/albums/n589/wingphoong/webdesign3.png?t=1286693137" /><hr style="color: red;"></li>
<br /><h4 style="text-align: center; color: yellow;">∗ <a href="http://www.blogger.com/post-edit.g?blogID=439019766408005198&postID=6500481355107385415#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.comtag:blogger.com,1999:blog-439019766408005198.post-64062890228490457642010-10-10T09:39:00.001+08:002010-10-14T15:28:19.771+08:00Chapter 1 - Web Fundamentals (Part 1)<p style="text-align:center;font-family:monotype corsiva;color:aqua;font-size:35px;font-weight:200">Introducing the World Wide Web</p><p><br /><li>A network is a structure linking computers together for the purpose of sharing resources such as printers and files.<br /></li><br /><li>Users typically access a network through a computer called a host or node.<br /></li><br /><li>A computer that makes a service available to a network is called a server.<br /></li><br /><li>A computer or other device that requests services from a server is called a client. <br /></li><br /><li>One of the most common network structures is the client-server network.<br /></li><br /><li>If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN).</li><br /><li>A network that covers a wide area, such as several buildings or cities, is called a wide area network (WAN).</li><br /><li>The largest WAN in existence is the Internet.<br /></li><br /><li>Today the Internet has grown to include hundreds of millions of interconnected computers, cell phones, PDAs, televisions, and networks.<br /></li></p><br /><br /><hr style="color: red"/><br /><br /><p style="text-align:center;font-family:monotype corsiva;color:aqua;font-size:35px;font-weight:200">Hypertext Documents</p><p><br /><li>An entire collection of linked documents is referred to as a Web site. <br /></li><br /><li>The hypertext documents within a Web site are known as Web pages.<br /></li><br /><li>Individual pages can contain text, audio, video, and even programs that can be run remotely.</li><br /><br /><hr style="color: red"/><br /><br /><p style="text-align:center;font-family:monotype corsiva;color:aqua;font-size:35px;font-weight:200">HTML: The Language of the Web</p><p><br /><li>A Web page is a text file written in a language called Hypertext Markup Language. <br /></li><br /><li>A markup language is a language that describes a document’s structure and content.<br /></li><br /><li>Used to create electronic documents that can be read on many different systems using software called browser.<br /></li><br /><li>Used to define the content of a document (what it says)<br /></li><br /><li>To describe the page layout (how it looks)<br /></li><br /><br /><hr style="color: red"/><br /><br /><p style="text-align:center;font-family:monotype corsiva;color:aqua;font-size:35px;font-weight:200">Tools for Creating HTML Documents</p><p><br /><li>Basic text editor like Notepad, Wordpad, Textpad<br /></li><br /><li>HTML Converter - converts formatted text into HTML code. <br /><ul>Can create the source document in a word processor and then convert it.<br /></ul><ul>HTML code created using a converter is often longer and more complicated than it needs to be, resulting in larger-than-necessary files.</ul></li><br /><br /><li>HTML Editor – helps you create an HTML file by inserting HTML codes for you as you work. <br /><ul>They can save you a lot of time and help you work more efficiently. <br /></ul><ul>Advantages and limitations similar to those of HTML converters.<br /></ul><ul>Allow you to set up a Web page quickly.<br /></ul><ul>Will usually still have to work with HTML code to create a finished document.<br /></ul></li></p><br /><br /><hr style="color: red"/><br /><h4 style="text-align:center; color: yellow">∗ <a href="#top">back to top </a>∗ </h4>WingPhoonghttp://www.blogger.com/profile/12559165993769754633noreply@blogger.com