HTML
For Juniors | PART : 5
In this article I’ll be
discussing basic part of HTML that a junior (beginner) needs to know. From
juniors I mean to all those who are who just passed High School or are 14 years
or above.
HTML Styling
·
Every HTML element has a default
style (background color is white and text color is black).
·
Changing the default style of an
HTML element, can be done with the style attribute.
·
This example changes the default
background color from white to lightgrey
Example :
<body style="background-color:lightgrey">
<h1> This is a big room</h1>
<p>This is a small room.</p>
</body>
<h1> This is a big room</h1>
<p>This is a small room.</p>
</body>
The HTML Style Attribute
The HTML style attribute has the following syntax
Example :
style="property:value"
The property is a CSS property. The value is a CSS value
HTML Text Color
The color property defines the text color to be
used for an HTML element
Example :
<body>
<h1 style="color:blue"> I love ice -cream </h1>
<p style="color:red"> I love chocolates.</p>
</body>
<h1 style="color:blue"> I love ice -cream </h1>
<p style="color:red"> I love chocolates.</p>
</body>
HTML Fonts
The font-family property defines the font to be used
for an HTML element:
Example :
body>
<h1 style="font-family:verdana"> I love ice -cream </h1>
<p style="font-family:courier"> I love chocolates.</p>
</body>
<h1 style="font-family:verdana"> I love ice -cream </h1>
<p style="font-family:courier"> I love chocolates.</p>
</body>
HTML Text Size
The font-size property defines the text size to be
used for an HTML element:
Example :
body>
<h1 style="font-size:300%"> I love ice -cream </h1>
<p style="font-size:160%"> I love chocolates.</p>
</body>
<h1 style="font-size:300%"> I love ice -cream </h1>
<p style="font-size:160%"> I love chocolates.</p>
</body>
HTML Text Alignment
The text-align property defines the horizontal text
alignment for an HTML element:
Example :
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>I am a girl.</p>
</body>
<h1 style="text-align:center">Centered Heading</h1>
<p>I am a girl.</p>
</body>
HTML Formatting Elements
Formatting elements were designed to
display special types of text:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
HTML Bold and Strong Formatting
The HTML <b> element
defines bold text, without any extra importance.
Example :
<p>I
love ice - cream.</p>
<p><b> I love chocolates</b></p>
<p><b> I love chocolates</b></p>
HTML Italic and Emphasized Formatting
The HTML <i> element defines italic text, without any extra importance.
Example
:
<p>I
love ice - cream.</p>
<p><i> I love chocolates</i></p>
<p><i> I love chocolates</i></p>
The HTML <em> element defines emphasized text, with added semantic importance.
Example :
<p>I
love ice - cream.</p>
<p><em> I love chocolates</em></p>
<p><em> I love chocolates</em></p>
HTML Small Formatting
The HTML <small> element defines small text:
Example :
<h>HTML <small>Small</small> Formatting</h>
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
Example :
<h>HTML <mark>Marked</mark> Formatting</h>
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
Example :
<p>My
favorite color is <del>blue</del> purple .</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
Example :
<p>My
favorite <ins>color</ins> is purple</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
Example :
<p>This
is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting
The HTML <sup> element
defines superscripted text.
Example :
<p>This
is <sup>superscripted</sup> text.</p>
Summary
- Use the style attribute for styling
HTML elements.
- Use background-color for
background color.
- Use color for text colors.
- Use font-family for text fonts.
- Use font-size for text sizes.
- Use text-align for text
alignment.
HTML
Text Formatting Elements
|
Tag
|
Description
|
|
Defines bold text
|
|
|
Defines emphasized text
|
|
|
Defines italic text
|
|
|
Defines smaller text
|
|
|
Defines important text
|
|
|
Defines subscripted text
|
|
|
Defines superscripted text
|
|
|
Defines inserted text
|
|
|
Defines deleted text
|
|
|
Defines marked/highlighted text
|
**********-------------------------------------------------------------------------
No comments:
Post a Comment