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 <sup> superscripeted Text</sup></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:
| 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 |
So use letters as numbers? we will answers this question as we dive into the 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: < or <
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( );
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 character entity.
HTML Useful Character Entities
Note : Entity names are case sensitive!
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > &
& ampersand & ¢
C Cent ¢ ¢
E pound £ £
yen ¥ ¥
euro € €
section § §
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>