html_text_formatting_featureimg

HTML TEXT FORMATTING

Hello Friends,

In this blog post, I am going to let you know about HTML Text Formatting.

However, we have explained you about the style attribute in the previous blog post where we told you to format the text with the help of style attribute. but there are some more special HTML element which can be used for formatting the text. See the few examples for HMTL formatting below.
htmlformating1


So now we will look for some more element which is used to format the HMTL text. For example, <b> and <i> are some special element which is used to get Bold and Italic formatting output.

This formatting element was designed to get a special type of text formatting. Now we will see few more element and their special effect over text.

Below you can see the list of some special elements.

<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Small text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text


We will see these special element one by one with one example.

<b>:

<b> defines a bold text where it the text is not considered to be important. this tag is just a way to style the text as bold.

<b>This text is bold</b>

<strong>:

this tag is display the text as strong formate which looks alike <b> but there is difference between these two tag. <strong> tag is used for the text which is important.

<strong>This text is strong</strong>

<i>:

this tag is used to define the italic tag which is not considered to be more important.

<i>This text is italic</i>

<em>:

this element is defines emphasized text, which has some important mearnning.

<em>This text is emphasized</em>

<small>:

This element is used to get smaller text.

<h3>HTML <small>Small</small> Formatting</h3>

<mark>:

This element is used to highlight or mark any particular text.

<h3>HTML <mark>Marked</mark> Formatting</h3>

<del>:

This element defines the text which has been (deleted)removed from the text.

<p>My favorite color is <del>blue</del> grey.</p>

<ins>:

This element defines inserted(addded) text.

<p>My favorite <ins>color</ins> is blue.</p>

<sub>:

This element used to define the <sub>subscripted</sub> text.

<p>This is <sub>subscripted</sub> text.</p>

<sup>:

This element is used to define <sup>superscripted</sup> text.

<p>This is <sup>superscripted</sup> text.</p>

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

style_attribute_featureimage

HTML STYLE ATTRIBUTE

Hi Friends,

In this blog post, I am going to explain about the most interesting HTML attribute that is style attribute.

The style attribute is used to set the property like text-size, color(text-color, background-color), text alignment and etc.

there is a proper syntax for writing the HTML style attribute. See the below example for HTML style sample and standard syntax.

 

<tagname style="property:value;">

Here property is a CSS property and value is like a CSS value.


HTML back-ground-color:

Using this property we define the background-color of our page or any other HTML element.

The below example set the color of a page to blue. See the below example for the same.

<body style="background-color:blue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML text-color:

This property define the color for a HTML text element. See the below example for the same.

<h1 style="color:grey;">This is a heading</h1>
<p style="color:blue;">This is a paragraph.</p>

HTML Fonts:

font-family is used to set the font style for an HTML element. See the below example for the same.

<h1 style="font-family:Arial;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML text-size:

This property is used to get the desired font size to the HTML element. See the below example for the same.

<h1 style="font-size:250%;">This is a heading</h1>
<p style="font-size:150%;">This is a paragraph.</p>

HTML text Alignment:

This HMTL property define the text-alignment of an HTML element in horizontal direction. See the below example for the same.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:left;">Centered paragraph.</p>

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

htmlparagraph_featureimage

HTML Paragraph tag, Line break tag, HTML pre tag

Hello Friends,

In this blog post, I am going to let you know about the HTML Paragraph.

It is denoted by HTML element <p >, See the below example for the same.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

When you see the paragraph in output window or browser then you will see the browser itself leaves a space or margin before and after the Paragraph.


HTML Display:

You can not predict exact HTML output over the browser.

It will also depend on your screen size whether it is larger or smaller. So window screen size definitely affects the HTML output.

you can not manipulate output by adding extra spaces or lines to your HTML code as a browser will remove the line and extra space when a page will load.

See the example below for the same.

<p>
In this paragraph
lots of lines in the
source code will before
ignored by the browser.
</p>

<p>
In this paragraph
lots of spaces in the
source code will be
ignored by the browser.
</p>

Never forget the END tag:

A browser would display the output correctly even you missed writing END tag.

See the example below for the same.

<p>This is a paragraph.
<p>This is another paragraph.

The example explained above can work on most of the browser but we should not be dependent as it is not sure to work always and can produce an unexpected result at any point in time.


HTML Line Break:

If you want to break a line without starting a paragraph then you should use <br> HTML tag.

This is an empty tag and thus don’t have any END tag. See the below example for the same.

<p>This is<br>a paragraph<br>with line breaks.</p>

What is paragraph Poem problem?

As per this problem if you write a poem inside a paragraph tag with a proper line break and spaces but it will always display in one single line. See the below example for the same.

<p>
The moon is shining o'er the field.

A little breeze is blowing.

The radish leaves are crisp and green.

The lettuces are growing.
</p>

So what is the solution for as such problem?

HTML <pre> tag is the solution for this problem. This tag is used for preformatted text.

The text inside this <pre> tag displayed as you write with the fixed width and font size.

It also maintains all line break and spaces that you have given while writing. See the below example for the same.

<pre>
The moon is shining o'er the field.

A little breeze is blowing.

The radish leaves are crisp and green.

The lettuces are growing.
</pre>

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!