Government College of Engineering, Nagpur

Department of Computer Science & Engineering

Practical LAB Manual Solutions (2021-22)
IIIrd Semester

Subject:
COMPUTER WORKSHOP- I
Branch : CSE { DIRECT SECOND YEAR }
Name: Vishal Suresh Kesharwani Enrolment No.
Batch: 2021-2022 Subject Teacher: Chandrayani Rokde

PRACTICAL NO.01

AIM:-- Develop an HTML document for a web page using Character and Page formatting
elements

RESOURCES REQUIRED:

Sr no. Resource name Specifications Quantity

1. Computer Desktop or Laptop with 4Gb RAM, Windows 7 1
System or greater OS installed, 500GB SSD or 1TB
HDD

2. Software Browser, Notepad or any other text editor or IDE ---

THEORETICAL BACKGROUND:
HTML : The HyperText Markup Language, or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. ... HTML elements
are the building blocks of HTML pages.
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.

HTML Formatting Elements

Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.

Example
<strong>This text is important!</strong>
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside
is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.

Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Example
<em>This text is emphasized</em>
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:
Example
<p>This is _subscripted text.</p>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes, like WWW[1]:
Example
<p>This is ^{superscripted} text.</p>

HTML Formatting Tags:

There are different types of HTML tags are used to format the appearance of the text on your
web page.

1. Create Headings - The <h1> to <h6> Elements:

Any document starts with a heading. You can use different sizes for your headings. There are 6
levels of headings available, from h1 for the largest and most important heading, down to h6 for
the smallest heading. Here is an example of the code for all the headline sizes:

<h1>Level 1 Headline</h1>

<h2>Level 2 Headline</h2>

<h3>Level 3 Headline</h3>

<h4>Level 4 Headline</h4>

<h5>Level 5 Headline</h5>

<h6>Level 6 Headline</h6>

2. Create Paragraph - The <p> Element:

The <p> element offers a way to structure your text into paragraphs. Each paragraph of text
should go in between an opening <p> and closing </p> tag as shown below in the example:

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

3. Create Line Breaks - The <br /> Element:

Whenever you use the <br /> element, anything following it starts on the next line. This tag is
an example of an empty element, where you do not need opening and closing tags, as there is
nothing to go in between them.

Note: The <br /> element has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break.

Example of basic HTML Program:

<html>
<body>
Hello<br />
This is an example of Line break.<br />
 Thank you<br />
</body>
</html>

This will produce the following result:

Hello

This is an example of a line break.

Thank you

4. Bold - <b> </b>:

The text in between the tags will be bold, and stand out against text around it, the same as in a
word processor.

5. Italic - <i> </i>:

Also working the same way as a word processor, italics displays the text at a slight angle.

6. Underline - <u> </u>:

Again, the same as underline in a word processor. Note that html links are already underlined
and don't need the extra tag.

7. Strike-out - <strike> </strike>:

Puts a line right through the centre of the text, crossing it out. Often used to show that text is old
and no longer relevant.

8. Preformatted Text - <pre> </pre>:

Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in
the browser as it would in a text editor

9. Source Code - <code> </code>:

Similar to tt the text is displayed in a fixed-width font, and is commonly used to show source
code. I have used it on this site, along with stylesheets, to show all tags.

10. Typewriter Text - <tt> </tt>:

The text appears to have been typed by a typewriter, in a fixed-width font. For example: This
text is written using the <tt></tt> tags.

11. Block Quote - <blockquote> </blockquote>:

Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand
side of the block quote.

12. Small - <small> </small>:

Instead of having to set a font size, you can use the small tag to render text slightly smaller than
the text around it. Useful for displaying the 'fine-print'.

13. Centre - <center> </center>:

A useful tag, as it says, it makes everything in between the tags centered (in the middle of the
page).

14. Emphasis - <em> </em>:

 Used to emphasize text, which usually appears in italics, but can vary according to your
browser.

15. Strong Emphasis - <strong> </strong>:

Used to emphasize text more, which usually appears in bold, but can vary according to your
browser.

16. <font> Tag:

The <font> is an inline element used to change font sizes, font colors and font styles of the text
in your web pages. The different attributes of <font> tag are as follows:

Size: To change the font size of the text on your web pages, you simply embed the text in the
FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big)
to the opening font tag.

Color: To change the text color you need to add the attribute COLOR to the opening FONT tag
and assign it a value for the color. The color value can be any of the following 16 color names:
black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive,
navy, teal, aqua.
Instead of the color names, you can also use the hexadecimal numbers for the colors, which are
specified according to the RGB value for each color. The hexadecimal numbers must be
prefixed by the "#" sign. Examples: #000099 for dark blue or #FFFF99 for a faint yellow.

Face: To change the font style from the default (Times New Roman) to a different style, simply
add the attribute FACE to the opening FONT tag. As value for the FACE attribute you can use
any specific font name such as "verdana", "arial", "georgia", "bookman old style", "comic sans
ms" and many more.

17. Escape Sequences:

The escape sequences are characters which are used to display the characters which are used by
HTML as control sequences.

1)&amp -----------> This escape sequence is used for “&” symbol.

2)&lt ---------->less than(<)

3)&st ---------->greater than(>)
4)&quot ---------->(“ “)
5)&nbsp ---------->empty space
6)&copy ---------->copy

PROGRAM CODE:
<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<title>Black Goose Bistro</title>
</head>

<body style="background-color:powderblue;">
<marquee><h1 style="font-family:verdana;">Black Goose Bistro</h1></marquee>

<h2 style="color:blue;">The Restaurant</h2>.

<p>The Black Goose Bistro offers casual lunch and
dinner fare in a hip atmosphere. The menu changes
regularly to highlight the freshest ingredients.
</p>
<center><b>Catering</b> </centre><hr>
<p> You have fun... <em>we'll handle the cooking
</em>. Black Goose Catering can handle events
from snacks for bridge club to elegant corporate
fundraisers.</p>
<p>1005 Gravenstein Highway
North <br />Sebastopol, CA
95472</p>
</body>
</html>

OUTPUT:
 RESULTS : Develop an HTML document for a web page using Character and Page formatting elements
implemented successfully.