Formatting Text

Overview

The Formatting Text section of Iron Spider contains a series of tutorials which will teach you how to format text on your web page. These tutorials will walk you through the process of using HTML to display text on your web page in paragraphs and and other block elements as well as how to make page headings and create hyperlinks.

A Sample Page

Sample Page 1 represents a summary of the HTML source code covered in this section and the previous two sections (Basic HTML and HTML Font Codes). The following color coding applies to this example only:

Maroon bold represents the essential structural elements.
Blue bold represents block elements.
Blue normal represents inline elements.
Green represents attribute-value pairs.
Black represents your visible text.
Purple represents HTML comment lines.

Sample Page 1

<html>




<head>




<title>

The title of your web page goes here.

</title>




</head>




<body

text="black" link="blue" vlink="purple" alink="red">





<h1>Your page heading goes here.</h1>

<p>

Your first paragraph goes here. Web browsers ignore all extraneous white space and line breaks appearing in HTML source code. You can create line breaks by using block elements. The 'p' element will create a paragraph.

</p>

<p>

Your second paragraph goes here. Web browsers display paragraphs with a blank line of white space in between each and with all text flush with the left margin.

</p>

<p>Your third paragraph goes here...</p>

<div>

The text to be set in your first generic division goes here. The 'div' element creates a line break with its end tag but unlike paragraphs, no blank line of white space appears in between each division.

</div>

<div>

The text to be set in your second generic division goes here. Use generic divisions along with Cascading Style Sheets when a much more sophisticated level of control is required over text formatting.

</div>

<div>The text to be set in your third generic division goes here... </div>

<blockquote>

Your indented block of text goes here. This is typically used to indicate that the text has been quoted from another source.

</blockquote>

Use the 'br' element to create a line break at will. Let's create one now.<br> The flow of text breaks to the next line.<br> And again. Use two of them to simulate paragraphing.<br><br> A new 'paragraph' is initiated by using two 'br' tags in succession to separate this text from the preceding text...
<br><br>

<font face="Arial">Your text using Arial font face goes here.</font>

<font size="5">Your size 5 text goes here.</font>

<font color="green">Your green text goes here.</font>

<b>Your bold text goes here.</b>



<i>Your italics text goes here.</i>



<u>Your underlined text goes here.</u>



<s>Your strike-through text goes here.</s>



<tt>Your teletype text goes here.</tt>



<sup>Your superscript text goes here.</sup>



<sub>Your subscript text goes here.</sub>

<a href="http://www.ironspider.ca/">Your link text goes here.</a>

<br><br><br><br>

<p><font face="verdana" size="2" color="navy">

A new paragraph begins with the text displayed in Verdana typeface at size 2 and in navy blue... <i>some italics text...</i> italics ends but text continues with Verdana, size 2, navy... <b>some bold text...</b> bold ends but text continues with Verdana, size 2, navy...

</font></p>

<blockquote><font face="verdana" size="2" color="navy"><i>Some quoted text in Verdana, size 2, navy and italics appearing in an indented block... </i></font></blockquote>

<p><font face="verdana" size="2" color="navy">A new paragraph begins in Verdana typeface at size 2 and in navy blue... <a href="http://www.ironspider.ca/">Hyperlink to Iron Spider</a> Some more text... </font></p>

<br><br><br><br>


</body>




</html>

Click here to see how Sample Page 1 would look as a web page.

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates