HTML Text Layout


HTML Text - HTML Text Layout

HTML Text Layout

<p>Text Paragraph</p>Adds a paragraph break after the text. (2 linebreaks)
<p align="left">Left justify Text</p>Left justify text in paragraph.
<p align="center">Center justify Text</p>Center justify text in paragraph.
<p align="right">Right justify Text</p>Right justify text in paragraph.
line breaks<br>Adds single line break where the tag is.
<nobr>no breaks</nobr>Turns off automatic linebreaks

- even if text is wider than the window.

text<wbr>Allows the browser to insert a linebreak at exactly this point

-even if the text is within <nobr> tags.

<center>center text</center>Center Text
<div align="center">center text</div>Center Text
<div align="left">left justify text</div>Left justify Text
<div align="right">right justify text</div>Right justify Text


Note in particular the difference between the <p>and the <div>tags. The <div>tag allows us to justify content without being forced to add a double linebreak. Also, note that these alignment tags are not limited to text. They work on text, images applets or whatever it is that we insert on the page.

HTML Text Size


HTML Text - HTML Text Size

These are the tags for changing the font size.


HTML Text Size

<big>HTML Text</big>Increase the size by one
<small>HTML Text<small>Decrease the size by one
<h1>

HTML Header

</h1>

Writes text in bigger heading
<h6>HTML Header</h6>Writes text in smallest heading
<font >HTML Font Size</font>Writes text in smallest font size. (8 pt)
<font size="7>

HTML Font Size

</font>"

Writes text in biggest font size. (36 pt)




Note:
If none of the above sizes fit, we will need to save the text as an image, and then insert the image on the page.

HTML Text Formatting Tags

HTML Text - HTML Text Formatting Tags


These are the tags for text formats:


HTML Text Formatting Tags

<b>boldtext</b>Writes text as bold
<i>italic text<i>Writes text in italic
<u>underline text</u>Writes underlined text
<sub>subscript text</sub>Lowers text and makes it smaller (subscript)
<sup>superscript text</sup>Lifts text and makes it smaller (superscript)
<blink>blinking text</blink>Guess yourself! (Note: Netscape only).
<strike>strike through text</strike>Strikes a line through the text
<tt>typewriter text</tt>Writes text as on a classic typewriter
<pre>exact text</pre>Writes text exactly as it is, including spaces.
<em>italic text</em>Usually makes text italic
<strong>strong/bold text</strong>Usually makes text bold


Note:
The <blink> tag is only supported by Netscape browsers, and should be avoided.


HTML Text Links

HTML Text - HTML Text Links

The tags used to produce links are the <a> and </a>. The <a> anchor tag tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a> tag using the href="http://www.anybodycanmaster-hmtl.blogspot.com" setting.

The example below shows how to make the word here work as a link to yahoo.

<a href="http://www.yahoo.com">Click here</a> to go to yahoo


The output will look like :

Click here to go to yahoo


We simply:

  • Specify the target in the <a href=" ">

  • Then add the text that should work as a link.

  • Finally add an </a>tag to indicate where the link ends.


HTML Font


HTML Text - HTML Font

HTML: The code to produce the example shown below.


<html>
<head>
<title>Free Online HTML Tutorials</title>
</head>
<body>
<basefont color="green" face="arial" size="4">
Free Online HTML Tutorials.
<font color="red" face="arial" size="2">
Anybody can master in HTML.
This local text looks different.
</font>
This text looks like the first line
</basefont>
</body>
</html>



Example: How the output looks in the browser.



Free Online HTML Tutorials



Free Online HTML Tutorials.

Anybody can master in HTML.
This local text looks different.

This text looks like the first line





The color attribute selects the desired color for the text. The face attribute selects the desired font.


HTML Base Font

HTML Text - HTML Base Font

To specify the overall font for the page add the <basefont>tag at the begining of the <body>section.

HTML : The code to produce the example shown below:

<html>
<head>
<title>My Page</title>
</head>
<body>
<basefont style="font-family:arial, verdana, courier;color:green;">
Hello! this is my page. <br />
All text looks the same <br />
Since I only specified a basefont. <br />
</body>
</html>


Example: The page as it looks in the browser.



Hello! this is my page.
All text looks the same
Since I only specified a basefont.



The color attributes selects the desired color for the text. The face attribute selects the desired font.

Note:
If we enter a list of fonts, like in the above example, the browser will use the font in the list available on the visitor's computer.

The size attribute specifies the desired size, between 1 (smallest) and 7 (biggest).

HTML Text

HTML Text - Enter text on web pages

To enter text on web pages - all we have to do is simply enter the text. If we do not specify any attributes for text it will use the default size, font etc. of the visitor's browser. Browsers can only show fonts available on the visitor's PC. There fore we are limited to using the fonts that are available on almost any computer.

If we need to use a fancy font, we should use web graphics program to make an image with the text. This will assure that the visitor will see it - even if he does not have the fancy font we're using. Since images take up much more space than plain text, thus increasing download time, we should use this option with care.

About Me

My photo
Vision :- "To be a reputed institution of Smart People who Add Value Across Generation". Mission :- We are dedicated to Spreading Literacy in Society and Helping People choose Value for Money Products for Better Living.We are also adding health awareness and wellness to the society of India." We are distributor and promotors of India's Largest IT products Direct Selling Company with a reach of more than 250 cities nationwide. We have a strong internet R&D base to bring out cost effective and Quality products.