Handout2 formatting tags


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Handout2 formatting tags

  1. 1. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2HTML Formatting Tags In this lesson you will learn the basics of formatting text within an HTML. The examples below willshow you how to do many formatting functions that you have most likely seen in your word processor.Bold, Italic and MoreCode:<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 TextAn example of Emphasized TextAn example of Strong TextAn example of Italic TextAn example of superscripted TextAn example of subscripted TextAn example ofAn example of Computer Code TextLine Breaks Line breaks are different than most of the tags we have seen so far. A line break ends the line youare currently on and resumes on the next line. Placing <br /> within the code is the same as pressingthe 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. 2. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #2Display:Will MatesonBox 61Cleveland, OhioPreformatted HTML Text Use the <pre> tag for any special circumstances where you wish to have the text appear exactlyas 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:UseThemSparinglyHTML - FontPrepared By: RICHARD F. ORPIANO Page 2 of 6
  3. 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, andface 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 #990000This text is redFont Face Choose a different font face using any font you have installed. Be aware that if the user viewingthe page doesnt have the font installed, they will not be able to see it. Instead they will default toTimes 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 itsfont...</font></p>Display:This paragraph has had its font formatted by the font tag!Basefont - Set a Solid BasePrepared By: RICHARD F. ORPIANO Page 3 of 6
  4. 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 highlyrecommend specifying a basefont if you plan on using a specifying a font with HTML. Below is thecorrect 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 sometimein 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 andtable backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest youonly use it for your pages 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 bgcolorattribute 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 pagesbackground. Now continue the lesson to learn more about adding background colors in your HTML!HTML Coloring System - Color NamesPrepared By: RICHARD F. ORPIANO Page 4 of 6
  5. 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 inHTML. There are 3 different methods to set the background color. The simplest being the Generic termsof colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colorswhere the value is simply the name of each color. Here is a sample of the most widely supportedcolors and their respective name values. Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy TealHTML 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 choosefrom. 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 arent there only 10possible numbers? Yes! That is why they use the letters a-f to represent values of 10-15. Below is adecimal -> hexadecimal reference:Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15Hexadecimal 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 decimals 0-9. Color defined withhex uses the first 2 digits for red, the second 2 for green, and the last 2 for blue. If we wanted to puregreen, our hexadecimal value would be #00FF00, since F is the maximum amount and we would wantred and blue values to be 0. Here is an example of hexadecimal green for a tables background:bgcolor="#00FF00" The pound sign (#) simply tells the browser that the following characters are a combinedhexadecimal value. If you want to learn to use hexadecimal we suggest you experiment with making abunch of different tables with various hex values. To start off, use pairs like #CCFFEE and notice howyour color is changed. Hexadecimals are the best choice for compatible web development because of their consistencybetween browsers. Even the most minor of change in color can throw your entire site out of whack, sobe sure to check your site in a number of browsers. If you want to be absolutely sure your colors willnot change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". Theseare called True Colors, since they will stay true in hue from browser to browser.HTML Coloring System - RGB ValuesPrepared By: RICHARD F. ORPIANO Page 5 of 6
  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 notsupport 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 (fullythat color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is anexample of RGB in use, but if you are not using a browser that supports it, do not worry, that is justone of the problems with HTLM RGB.bgcolor="rgb(255,255,255)" Whitebgcolor="rgb(255,0,0)" Redbgcolor="rgb(0,255,0)" Greenbgcolor="rgb(0,0,255)" BluePrepared By: RICHARD F. ORPIANO Page 6 of 6