In this tutorial, we will be discussing HTML Formatting.
What You’ll Need:
1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver
As I am only teaching these tutorials in simple text editing programs, I will not be explaining Dreamweaver. This might come in a later tutorial though. 
HTML formatting tags are used to format text, such as bolding it or italicizing it. There are different types of formatting text, and will be described below.
HTML Text Formatting Tags:
<b>, <strong> – bolds text
<em>, <i> – italicizes text
<big> – makes text big
<small> – makes text small
<sub> – makes text subscripted
<sup> – makes text superscripted
<ins> – displays inserted text
<del> – displays deleted text
Bolded text is thicker than regular text and is meant to let the viewer know that the text is more important that the rest of the text for some reason. Italicized text can serve the same purpose. Big and small formatting does just what you think- makes text bigger or smaller than the rest of the text. Superscripted and subscripted text is often used for numbers that would appear above or below the baseline of the text, respectively. Subscript can be useful for writing our formulas, such as H2O. Superscript can be useful for adding footnotes, like web design3. Inserted text will be underlined, while deleted text will have a link through it, also known as a strikethrough.
HTML Computer Output Tags:
<code> – displays text like computer code
<kbd> – displays text like a keyboard
<samp> – displays text as a sample of computer code
<tt> – displays text as teletype
<var> – displays text as a variable
<pre> – displays text as pre-formatted
The computer output tags are often used to make text appear more like it would if were printed out or typed on a typewriter. Most people use CSS to achieve many of these effects, but it nice to know what you can do with simple HTML formatting. Text them out to see what they can do. I don’t use them much myself.
HTML Citations, Quotations, and Definition Tags
<abbr> – displays text as an abbreviation
<acronym> – displays text as an acronym
<address> – displays text as an address
<bdo> – defines the text direction
<blockquote> – displays text as a long quote
<q> – displays text as a short quote
<cite> – displays text as a citation
<dfn> – displays text as a definition term
These tags are used for a few different things. The abbreviation tag is useful when you are using an abbreviation because it can let browsers, screen readers, spellcheckers, and translation systems know what the abbreviation stands for. The same is true for the acronym tag. An acronym is an abbreviation that stands for a group of words that can be spoken, such as NASA or ASAP.
In order to use the <bdo> tag for text direction, you must specify its direction using the dir attribute. Your options are "lrt" (left to right) or "rtl" (right to left), and can be useful in different situations. The <blockquote> is used to indent large blocks of text, such as a quoted paragraph. The <q> tag is used for smaller blocks of text, such as a few words or a phrase. The <cite> and <dfn> tags are used for citations and definitions respectively. The citation tag italicizes tex, but this tag should not be used to actually just italicize text, as is is meant for browsers to see as a citation, while italicized text is meant to show emphasis or importance.
To see these tags in action, here is the code that can be copied and pasted into your text editor:
<html>
<head>
<title>Lesson 4: HTML Formatting</title>
</head>
<body>
<p>This is a <strong>bolded</strong> word.
This is an <em>italicized</em> word.</p>
<p>This is a <big>big</big> word.
This is a <small>small</small> word.</p>
<p>This is a subscripted number<sub>3</sub>.
This is a superscripted number<sup>5</sup>.</p>
<p>This is <ins>inserted</ins> text. This is <del>deleted</del> text.
<p>This is <code>computer coded</code> text.
This is <kbd>keyboard coded</kbd> text.</p>
<p>This is <samp>sample computer coded</samp> text.
This is <tt>teletype coded</tt> text.</p>
<p>This is <var>variable coded</var> text.
This is <pre>pre form atted</pre> text with spaces inside of the word.</p>
<p>This is an abbreviation: <abbr title="Hyper Text Markup Language">HTML</abbr>
This is an acronym: <acronym title="As Soon As Possible">ASAP</acronym></p>
<p>This is an address:</p>
<address>123 This Street<br />
Anywhere, U.S.A 12345</address>
<p>This is an example of <bdo dir="rtl">text direction</bdo> (text direction – right to left).</p>
<p>This is a blockquote:
<blockquote>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</blockquote></p>
<p>This is a quote:</p>
<q>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…</q>.
<p>This is a <cite>citation</cite>. This is a <dfn>definition</dfn> term.
</body>
</html>
And here is what it looks like in action:
And this concludes this tutorial. Hope you’re learning something!
Facebook
Twitter
LinkedIn
Myspace
Youtube
What’s Taking place i’m new to this, I stumbled upon this I’ve found It positively useful and it has helped me out loads. I’m hoping to give a contribution & assist different customers like its aided me. Good job.
I definitely welcome any and all contributions to this blog and I’m very glad to hear that my articles are helping you out. Watch for new articles soon!
This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I’ve shared your web site in my social networks!
Thank you for sharing my website! I’m glad you enjoyed my articles! I hope to write more soon.
Cheers for an excellent weblog article, in which will you come across all of your facts?
most of my information has come from experience and from my education. I have an Associate’s of Science degree in Web Design and a Bachelor’s of Fine Arts in Web Development. How did you come across my blog/website?
Very interesting topic , thanks for putting up.
I dont truly have considerably interest within your blog but I noticed it at another blog sharing fantastic wordpress themes and they also utilised yours as a example of this and it can be really nice, excellent job!
Thank you very much for the comment! Can you tell me where you saw the example of my theme? I’d love to see it!
You are making various good issues with your article and would go along with most.
Wow, fantastic blog format! How lengthy have you ever been running a blog for? you make blogging look easy. The entire glance of your site is magnificent, neatly as the content material!
I have not been running this actual blog for long, but I have around 12 years of experience with the topics I am writing about. Thank you for the kind words. I hope my posts continue to assist you in the future!
Hey there! I know this is somewhat off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!
free games online,
If you are truly interested in finding a good CAPTCHA plugin for your contact form, message me back here and I’ll give a few examples of good ones I like to use.