HTML – Formatting Elements & Tags

HTML

This stands for Hyper Text Markup Language.

HTTP

This stands for Hyper Text Transfer Protocol

HTML – Formatting Element W/Tags

As you begin to place more and more elements onto your web site, it will become necessary to make minor changes to the formatting of those elements. In our HTML Attributes lesson we dicussed ways to add some flavor with attributes and align elements within other elements. Several tags exits to further amplify text elements. These formatting tags can make text bold, italic,sub/superscripted, and more.

Bold, Italic and More

HTML 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 ^{superscripeted Text}</p> <p> An example of <code> Computer Code Text</code></p>

HTML Formatting

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 struckthrough Text An example of Computer code text. All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.

Preserve Formatting – The <pre> Element

Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>. Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document. <pre> function testfunction(  strText  ){ alert(strText) } </pre> This will produce following result: function testFunction(  strText    ){ alert (startText) }

HTML Color Coding System- Color Names

There are 3 different methods to set 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 values is simply the name of each color, Here is a sample of the most widely supported colors and their respective name values.    

HTML Coloring System – RGB values

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 support it, do not worry, that is just one of the problems with HTML RGB  

Red, Green, and Blue Values

bgcolor=”rgb(255,255,255)” white bgcolor=”rgb(255,0,0)”    Red bgcolor=”rgb(0,255,0)” Green bgcolor=”rgb(0,0,255)”   Blue  

HTMl Coloring System – Hexadecimal

The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice and as a blossoming web developer, it is critical to understand hexadecimals HTML code: <p> <font size=”5”> Here is a size 5 font</font> </p>  

Font Size

Here is a size 5 font.  

Font Color

Set the color of your font with color.  

HTML Code

<font color=”#990000”> This is text is hexacolor #990000</font> <br/> <font color=”red”> This text is red</font>  

Font Color

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 do fault to Times New Roman.And option is to choose a few that are similar in appearance.  

HTML Code

<p> <font face=”Bookam old style, Book Antiqua, Garmond”> This paragraph has had its font….. </font> </p>  

Font Face

This paragraph has had its font formatted by the font tag!  

HTML Entities

Some characters are reserved in HTML. It is not possible to use the less than(<) or greater than(>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code to be capable of using them in your own web publications. They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet. A hexadecimal is a 6 digit representation of a color, The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB) Here’s a hexadecimal you might see in an HTML document.   

My First Hexadecimal:

bgcolor=”#RRGGBB”  

HTML Color Code – Breaking the code

The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

Hexadecimal Color Values:

  So use letters as numbers? we will answer this question as we dive into converting hexadecimals to regular numbers, Let’s have  a look at real Hexadecimal.

A Real Hexadecimal

bgcolor=”#FFFFFFF” The letter “F” is the maximum amount we can send each color and as you may deduce, this color(#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.  

HTML – Font and Basefont

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 customize your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color.   The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font.

Font Size

Set the size of your font with size. The orange of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign we must write: &lt; or &#60; Tip : The advantage of using an entity name, instead of a number, is that the name is easier to remember. However, the disadvantage is that browsers may not support all entity names(the support for entity numbers is very good)

Non-breaking Space

A common character entity used in HTML is the non-breaking space(&nbsp); Browsers will always truncate spaces in HTML pages. IF you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the &nbsp; character entity.  

HTML Useful Character Entities

Note : Entity names are case sensitive!   Result Description                 Entity Name     Entity Number non-breaking space                   &nbsp;                             &#160; <     less than                                    &lt;                               &#60; >     greater than                              &gt;                              &#38; &    ampersand                                &amp;                          &#162; C    Cent                                            &cent;                           &#162; E     pound                                        &pound;                        &#163; yen                                                      &yen;                             &#165; euro                                                     &euro;                         &#8364; section                                                &sect;                          &#167;  

HTML – Text Links

Use the <a></a> tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The next you place between the opening and closing tags will be shown as the link on a page. Use the demonstration below as a reference.  

HTML Code 

<a href=”http://www.tekslate.com/”  target=”_blank”>Home</a> <a href=”http://www.espn.com/” target=”_blank”> EspnHome</a> <a href=”http://www.yahoo.com/” target=”_blank” > Yahoo Home</a>   Global Link :  TizagHome ESPN Home Yahoo Home   HTML – Link targets The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window. HTML Code target=”_blank” opens new page in a browser window “_self” Loads the new page in current window _parent” Loads new page into a frame that is superior to where the link lies _top”      Loads new page into the current browserwindow, cancelling all frames The example below shows how you would link to ESPN.com, a popular sports web site. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can remain at our web site. Here’s the example   HTML Code <a href=http://www.ESPN.com  target=”_blank”>ESPN.COM</a> <a href=”http://www.espn.com/” target=”_blank”> EspnHome</a> <a href=”http://www.yahoo.com/” target=”_blank” > Yahoo Home</a>

Global Link

 TizagHome ESPN Home Yahoo Home

HTML – Link targets

The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.

HTML Code

target=”_blank” opens new page in a browser window “_self” Loads the new page in current window _parent” Loads new page into a frame that is superior to where the link lies _top”      Loads new page into the current browserwindow, cancelling all frames   The example below shows how you would link to ESPN.com, a popular sports web site. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can remain at our web site. Here’s the example

HTML Code

<a href=http://www.ESPN.com  target=”_blank”>ESPN.COM</a>