HTML Formatting: 1) Bold Text

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags in
HTML. These tags are used to make text bold, italicized, or underlined. There are almost
14 options available that how text appears in HTML and XHTML.
Element Description
name
<b> This is a physical tag, which is used to bold the text written between
it.
<strong> This is a logical tag, which tells the browser that the text is
important.
<i> This is a physical tag which is used to make text italic.
<u> This tag is used to underline text written between it.
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font
size.
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in
bold letters.
See this example: <b>Write Your First Paragraph in bold text.</b>
<html>
<body>
<h1>Explanation of formatting element</h1>
<b>This is an important content and this is normal content</b>
</body>
</html>
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance. If you write anything within <i>............</i> element,
is shown in italic letters.
See this example: <i>Write Your First Paragraph in italic text.</i>
<html>
<body>
<i>This is an important content and this is normal content</i>
</body>
</html>
3) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:<u>Write Your First Paragraph in underlined text.</u>
<html>
<body>
<u>This is an important content and this is normal content</u>
</body>
</html>
4) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:<strike>Write Your First Paragraph with strikethrough</strike>
<html>
<body>
<strike>This is an important content and this is normal content</strike>
</body>
</html>
5) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters.
See this example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
<html>
<body>
Hello <sup> 2 </sup>
</body>
</html>
6) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
See this example:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
<html>
<body>
Hello <sub> 2 </sub>
</body>
</html>
7) Larger Text
If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
<html>
<body>
<big>This is an important content and this is normal content</big>
</body>
</html>
8) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
<html>
<body>
<small>This is an important content and this is normal content</small>
</body>
</html>
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image.
<img src="good_morning.jpg"/>
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.3
3) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.
Inserting image program
<html>
<body>
<h2>HTML image example with height and width</h2>
<img src="c: /images/animal.jpg" height="180" width="300" alt="animal
image">
</body>
</html>
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.
href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Program:
<html>
<body>
<a href="second.html">Click for Second Page</a>
</body>
</html>
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<html>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML Table with Border

<html>
<body>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the
<li> tag.
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>
HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
<html>
<body>
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
</body>
</html>
HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .
Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.
HTML Form Syntax

<form action="server url" method="get|post">
</form>
HTML Form Tags
Let's see the list of HTML 5 form tags.
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML <form> element

The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such as
text field, text area, password field, etc.
Syntax:
<form>
//Form elements
</form>
HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.
Example:
<html>
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
</html>
HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.
<html>
<body>
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
</body>
</html>
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute
Example:
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
HTML Password Field Control

The password is not visible to the user in password field control.
<html>
<body>
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
</body>
</html>
HTML Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.
<html>
<body>
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
</body>
</html>
Radio Button Control

The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a
time.
Using radio buttons for multiple options, you can only choose a single option at a time.
<html>
<body>
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
</body>
</html>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<html>
<body>
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
</body>
</html>
Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example:
<html>
<body>
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
</form>
</body>
</html>
HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped
elements.
Example:
<html>
<body>
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
</fieldset>
</form>
</body>
</html>

FORM EXAMPLE:
<html>
<body>
<form">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
<td><input type="text" name="name" value="" id="register_name"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter
password:</label></td>
<td><input type="password" name="password" id="register_password"
style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select
Country:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0"
value="register"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>

HTML Formatting: 1) Bold Text

Uploaded by

Copyright:

Available Formats

HTML Formatting: 1) Bold Text

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Formatting: 1) Bold Text

Uploaded by

Copyright:

Available Formats

HTML Formatting

<i> This is a physical tag which is used to make text italic.

<u> This tag is used to underline text written between it.

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

See this example: <b>Write Your First Paragraph in bold text.</b>

See this example: <i>Write Your First Paragraph in italic text.</i>

See this example:<u>Write Your First Paragraph in underlined text.</u>

See this example:<strike>Write Your First Paragraph with strikethrough</strike>

See this example:

See this example:

See this example:

See this example:

Let's see an example of HTML image.

Attributes of HTML img tag

The location of image may be on the same directory or another server.

Inserting image program

href attribute of HTML anchor tag

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

<a href="second.html">Click for Second Page</a>

HTML Table Tags

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

HTML Table with Border

1. Ordered List or Numbered List (ol)

HTML Ordered List or Numbered List

HTML Description List or Definition List

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

<dd>-One of the 12 horoscope sign.</dd>

<dd>-One of my evening snacks</dd>

<dd>-It is also an one of the 12 horoscope sign.</dd>

<dd>-It is a multinational technology corporation.</dd>

HTML Nested List

Why use HTML Form

HTML Form Syntax

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML <form> element

HTML <input> element

HTML TextField Control

HTML Password Field Control

HTML Email Field Control

Radio Button Control

Submit button control

The type = submit , specifying that it is a submit button

The name attribute can be omit here.

HTML <fieldset> element:

You might also like