Basic HTML Formatting:

This tutorial will be useful for anyone who does not plan to use CSS to format there web page but is still good practice.  But if you are reading this tutorial it is most likely that you are new to web development so I would advice reading through this tutorial which may provide some useful techniques for HTML formatting. For previous lesson click Starting a Web Page in HTML.

[images coming soon]

Lets start with making text bold or italic. To make a text bold type <b> followed by the text you wish to be bold the close the tag with </b>. To make a text italic type <i> followed by the text you wish to be italic and close the tag with </i>.

Changing the size of the text is pretty simple as well. To make the text bigger or smaller than the surrounding text type <big> or <small> then type the text you wish to make big or small and close the tag with </big> or </small>.  If you want to make a text even bigger or smaller continue with more tags like so, <big><big> or <small><small> and again close with </big></big> or </small></small>.

Sometime when creating text in your HTML page you may want to demonstrate that a certain text is a code or monospaced text.  To format text with a monospaced font use the opening tags <code>, <tt>, <kbd>, or <samp> followed bu the text you wish to make monospaced and close with the approporiate tag </code>, </tt>, </kbd>, or </samp>.  It should look something like this.

This is monospaced font.

Usually browsers collapse all extra returns and spaces and automatically break lines according to the size of the window.  To prevent this you can use the preformatted text to enclose a group of text that you would like to display as is.  To create a preformatted text type <pre> before and </pre> after the text you wish to preformat.

To quote text there are to special tags, blockquote and inline quote.  Blockquote are generally indented by browswers where inline quotes are supposed to  be automatically enclosed in quotation marks.  To quote block-level text type <blockquote to begin and if desited type cite=”url”, where url is the address of the source of the quote and type > to complete the opening tag.   Type the text you whish to appear in the blockquote and close the grouped text with </blockquote>. Here is an example.

Alpha Organic is a creative multimedia design and production shop. We are a small team of independent designers and artists with a lot of talent and a bold new approach to media marketing. Something that sets us apart from the rest is that we specialize in music production and with this particular skill we are able to marry music with interactive media creating fresh and innovative multimedia products all from the same shop!

Alpha Organic has grown from an experimental partnership to a full blown studio capable of taking on the most challenging projects you can imagine. How is this possible you might ask? Following the failed attempt to become rock stars, Adrian Maurer and Tak Yamada from the original partnership, took their passion and skills to the silver screen! This may seem brilliant but the truth is no matter where you make music your still come up broke!

But as it turns out, Adrian has a strong background in business; and on his spare time practices his skills in design and audio/video production. And as for Tak, he is a level 2 “Reiki” practitioner, he is certified in “feng shui”, and best of all he has been working in the communications industry for over 9 years as a flash developer

The truth is, it wasn’t easy going out into the incredibly overpopulated agency world but with a little determination and a fresh approach to our trade, Alpha Organic has helped businesses and artists meet success. In turn we have felt success through the growth of our business and the growth within our team. We are excited to see our small studio grow and are looking forward to our second birthday!!

Inline quotes  begin with <q and if desired can include xml:lang=”xx” where xx is the language in which the quote is in.  This will help the browser determine what the quotes will look like as for many other langugers ” ” may appear differently. Close the opening tag with > and type the text you wish to quote and close the tag with <q>. If there are further <q> tags nested within another <q> tag the browser will automatically determine whether to use “double curly” or ’single curly’.

To create superscripts or subscripts around a text type ^{for supperscript or <sub> for subscript followed by the text you wish to offset and close with} or </sup>.  The result should look something like this.

Alpha Organic¹ for superscript and H₂0 for subscript.

Another logical tool for formatting HTML text is by marking it.  To mark a text you can either underline it or cross a line through it.  To underline a text like so type <ins> before and </ins> after the desired marked text.  To cross a text like so type <del> before and </del> after the desired marked text.

Often times you may want to include abbreviations or acronyms in the text of your page which you viewers may not understand.  So it may be useful to explain the abbreviations with a title.  To explain an abbreviation type <abbr then type  title=”explanation” and close the tag with > Next type the abbreviation and close the element with </abbr>  This works the same for acronyms which would replace abbr with acronym.  Here is an example of an abbreviation.

Put mouse here:
AO

The final basic tool for formatting HTML is centering elements on a page.  To center text on your webpage simply open a tag with <center> followed by the text you wish to center and close the tag with </center> The center element can also be applied to an entire div section of your page.  To do this following the <div tag type align=”center” and close the tag with >

That concludes this tutorial.  Click Images in HTML for next tutorial or click Here for a list of all HTML tutorials.