Handout2 formatting tags
Download as DOC, PDF2 likes441 views
This document provides an overview of HTML formatting tags for text, including bold, italic, strong, superscript, subscript, strikethrough, and code text. It also discusses line breaks, preformatted text, horizontal rules, font size, color, face, and the basefont tag. Finally, it covers HTML color options like color names, hexadecimal codes, and RGB values.
Handout2 formatting tags
- 1. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 HTML Formatting Tags In this lesson you will learn the basics of formatting text within an HTML. The examples below will show you how to do many formatting functions that you have most likely seen in your word processor. Bold, Italic and More Code: <p>An example of <b>Bold Text</b> </p> <p>An example of <em>Emphasized Text</em> </p> <p>An example of <strong>Strong Text</strong> </p> <p>An example of <i>Italic Text</i> </p> <p>An example of <sup>superscripted Text</sup> </p> <p>An example of <sub>subscripted Text</sub> </p> <p>An example of <del>struckthrough Text</del> </p> <p>An example of <code>Computer Code Text</code> </p> Display: An example of Bold Text An example of Emphasized Text An example of Strong Text An example of Italic Text An example of superscripted Text An example of subscripted Text An example of An example of Computer Code Text Line Breaks Line breaks are different than most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within the <address> tag. Code: <address> Will Mateson<br /> Box 61<br /> Cleveland, Ohio<br /> </address> Prepared By: RICHARD F. ORPIANO Page 1 of 6
- 2. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 Display: Will Mateson Box 61 Cleveland, Ohio Preformatted HTML Text Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. Spaces, tabs, and line breaks will be preserved with the pre tag. Code: <pre> Roses are Red, Violets are blue, I may sound crazy, But I love you!</pre> Display: Roses are Red, Violets are blue, I may sound crazy, But I love you! HTML Horizontal Rule Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag the special form, like the line break tag. Code: <hr /> Use <hr /><hr /> Them <hr /> Sparingly <hr /> Display: Use Them Sparingly HTML - Font Prepared By: RICHARD F. ORPIANO Page 2 of 6
- 3. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 The <font> tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to manipulate your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color. Font Size Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. HTML Code: <p><font size="5">Here is a size 5 font</font></p> Display: Here is a size 5 font. Font Color Set the color of your font with color. HTML Code: <font color="#990000">This text is hexcolor #990000</font> <font color="red">This text is red</font> Display: This text is hexcolor #990000 This text is red Font Face Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance. HTML Code: <p><font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font></p> Display: This paragraph has had its font formatted by the font tag! Basefont - Set a Solid Base Prepared By: RICHARD F. ORPIANO Page 3 of 6
- 4. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using a specifying a font with HTML. Below is the correct way to set your basefont. HTML Code: <html> <body> <basefont size="2" color="green"> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</p> </basefont> </body> </html> Display: This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! However, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS. HTML Color - bgcolor The bgcolor attribute is used to control the background of an HTML element, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page's main background (<body>) and in tables. The HTML to change the background color is simple: <TAGNAME bgcolor="value"> Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden. Code: <body bgcolor="Silver"> <p>We set the background...</p> </body> Display: We set the background of the body to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML! HTML Coloring System - Color Names Prepared By: RICHARD F. ORPIANO Page 4 of 6
- 5. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 Before diving into the bgcolor attribute, it is important to understand the coloring system used in HTML. There are 3 different methods to set the background color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values. Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy Teal HTML Coloring System - Hexadecimal Hexadecimals are by far the hardest to understand but usually work from browser to browser. Here is a brief math lesson. In the decimal numbering system you have 10 possible values to choose from. As in the number 2_6, we can choose a number between 0-9 to fill in that blank. The hexadecimal system is different in that it allows for 16 possible digits. But aren't there only 10 possible numbers? Yes! That is why they use the letters a-f to represent values of 10-15. Below is a decimal -> hexadecimal reference: Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F That means the range for a hexadecimal is 0-F, as compared to decimal's 0-9. Color defined with hex uses the first 2 digits for red, the second 2 for green, and the last 2 for blue. If we wanted to pure green, our hexadecimal value would be #00FF00, since F is the maximum amount and we would want red and blue values to be 0. Here is an example of hexadecimal green for a table's background: bgcolor="#00FF00" The pound sign (#) simply tells the browser that the following characters are a combined hexadecimal value. If you want to learn to use hexadecimal we suggest you experiment with making a bunch of different tables with various hex values. To start off, use pairs like #CCFFEE and notice how your color is changed. Hexadecimals are the best choice for compatible web development because of their consistency between browsers. Even the most minor of change in color can throw your entire site out of whack, so be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser. HTML Coloring System - RGB Values Prepared By: RICHARD F. ORPIANO Page 5 of 6
- 6. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2 We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB. However, if you plan on learning CSS then you should glance over this topic. RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just one of the problems with HTLM RGB. bgcolor="rgb(255,255,255)" White bgcolor="rgb(255,0,0)" Red bgcolor="rgb(0,255,0)" Green bgcolor="rgb(0,0,255)" Blue Prepared By: RICHARD F. ORPIANO Page 6 of 6