Changing Text Style with HTML Tags

Changing Text Style with HTML Tags

HTML, or Hyper Text Markup Language, is the language that the browser interprets and displays to the screen. You can use HTML tags, the basic structure of HTML, to change the color, size, or style of your text.

An HTML tag is a unit of code surrounded by the "<" symbol and the ">" symbol. Most tags are "paired tags", in that they have an opening tag, and a closing tag. Usually this means that the opening tag is contains <(tag)>, and the closing tag contains </(tag)>.

• This tutorial will cover some basic tags to add color, style and organization to your text with HTML. For most examples, you will see a line with the code in it, and then see how the browser interprets this line.

<!-- This is the beginning of an ordered list. Each <li> tag is another item in the list, and gets numbered by the browswer as it reads the HTML. -->

1. The <br> tag in HTML is the easiest to understand or use. It adds a line break at its position in the code. Multiple tags will add multiple breaks.

   This text <br>is broken up by <br><br>a simple tag.

   This text
   is broken up by
   
   a simple tag.
2. The <i> tag is very simple. This tag will italicize any text surrounded by it.

   This is an example of <i>italics</i>.

   This is an example of italics.
3. Again a very simple tag: <b>. Any text wrapped in this tag will be bold.

   The text in this tag will be <b>bold</b>.

   The text in this tag will be bold.
4. Like the previous two, the <u> tag is very straightforward. This will underline any text between <u> and </u>.

   The text in this example should be <u>underlined</u>.

   The text in this example should be underlined.
5. Next are the heading tags. These tags include <h1> through <h6>. Each tag is a different size heading, with 1 the largest, and 6 the smallest.

   <h1>This is the largest size.</h1>
<h6>This is the smallest size.</h6>

   This is the largest size.

   This is the smallest size.

6. The <font> tag is the tag that controls color, size, font, and various other properties of text. We will also discuss what are known as "attributes" in an HTML tag.

   Three of the attributes the <font> tag can take are size, color, and face.

   1. Size is (obviously) the size of font, and can be defined by the numbers 1-7, 3 being default. Size can also be determined relatively to the base size of 3 using -7 to -1 and +1 to +7.
   2. Color can be defined using RGB Values, (described in a separate tutorial), or names of simple colors, such as "red", "green", etc...
   3. Face is the font name, and can be "Tahoma", "Times New Roman", or any other font name. It's important to note that if the specified font is not on a viewer's computer, that it will be substituted for a different font. Notice how the attributes are specified within the font tag, and that the order is not important.

   This is <font color="red" size="4" face="Times New Roman">a larger, red font</font> being used.

   This is a larger, red font being used.
   This font <font size="2" face="Tahoma" color="blue">is smaller, and blue,</font> as the tag specifies.
   This font is smaller, and blue, as the tag specifies.
7. Our next tag is the <p> tag, a simple tag to define paragraphs. Using this tag will have the browser break up text, as you will see in the example.

   <p>"HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic browser developed at NCSA.</p><p>During the course of the 1990s it has blossomed with the explosive growth of the Web..." -www.w3.org</p>

   "HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the Mosaic browser developed at NCSA.

   During the course of the 1990s it has blossomed with the explosive growth of the Web..." -www.w3.org

8. The next tag set is a bit trickier, and has two different tags each used in the same way. The list tags, <ul> and <ol>, define unordered lists and ordered lists, respectively. Within each list, the <li> tag defines a "list item", that will be either a number or bullet, depending on the list specified.

   Lists:
<ul>
  <li>Notice the bullet points</li>
  <li>Are not numbered with an unordered list.</li>>
</ul>
<ol>
  <li>While an ordered list</li>
  <li>numbers each list item.</li>
</ol>


   Lists:

   • Notice the bullet points
   • Are not numbered with an unordered list.

   1. While an ordered list
   2. numbers each list item.
9. The final tag we will discuss is the <a> tag. This is the tag that is used to create hyperlinks to new pages. The attribute that this tag takes to specify the new page is "href=". Any text surrounded by the tag will link to the specified location.

   This tutorial is provided for you by <a href="http://www.desiant.com"> Desiant</a>.

   This tutorial is provided for you by Desiant.