Unit II Working with Text, Links, Images and Tables in HTML | CSE 326 INTERNET PROGRAMMING LABORATORY | B.tech Cse

 Working with Text, Links, Images and Tables in HTML 

1. Displaying Plain, Bold, Italic, Small, Subscripted, and Superscripted Text

HTML provides a wide range of tags for text formatting. Each of these tags is used to style text in different ways.

Plain Text:

Plain text is the default text that appears in the browser without any specific formatting applied.

Example:

<p>This is plain text.</p>

Bold Text:

To display bold text, you can use the <b> or <strong> tag. Both visually make text bold, but <strong> also conveys emphasis for semantic meaning, suggesting importance.

Example:

<b>This is bold text using <b> tag.</b>

Or using <strong> (semantically emphasizes importance):

<strong>This is bold text using <strong> tag.</strong>

Italic Text:

To display italic text, use the <i> or <em> tag. Similar to the bold tags, <i> just provides a visual italic style, while <em> indicates emphasis.

Example:

<i>This is italic text using <i> tag.</i>

Or using <em> (emphasizes meaning):

<em>This is italic text using <em> tag.</em>

Small Text:

The <small> tag is used to decrease the font size.

Example:

<small>This text is smaller.</small>

Subscripted Text:

Subscript text can be created using the <sub> tag, which positions the text slightly below the normal text line.

Example:

H<sub>2</sub>O (Water molecule)

Superscripted Text:

Superscript text is created using the <sup> tag, which positions the text slightly above the normal text line.

Example:

E = mc<sup>2</sup> (Einstein's famous equation)

Comparison of Text Formatting Tags:

Tag	Purpose	Usage Example
<b>	Bold text (visual only)	<b>This is bold</b>
<strong>	Bold text (semantic, important)	<strong>Important text</strong>
<i>	Italic text (visual only)	<i>This is italic</i>
<em>	Italic text (semantic, emphasis)	<em>Emphasized text</em>
<small>	Smaller text	<small>Smaller text</small>
<sub>	Subscript text	H<sub>2</sub>O
<sup>	Superscript text	E = mc<sup>2</sup>

2. Displaying Program Code, Program Output, and Keyboard Text

Program Code:

HTML provides the <code>, <pre>, and <samp> tags to display code and output.

• <code>: Used for inline code.

<p>The <code>print()</code> function in Python is used to display output.</p>

• <pre>: Used for preformatted text, preserving line breaks and spaces.

<pre>
def hello():
    print("Hello World!")
</pre>

• <samp>: Displays program output.

<samp>Output: Hello World!</samp>

Keyboard Text:

To represent keyboard input or text typed by the user, use the <kbd> tag.

Example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

3. Emphasizing Text, Defining New Terms

Emphasizing Text:

• The <em> tag emphasizes text by rendering it in italics by default (though this can vary with CSS).

<p><em>This is important!</em></p>

Defining New Terms:

• The <dfn> tag is used to define a term, which is usually highlighted and linked to its definition.

<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>

4. Short and Long Quotations

Short Quotations:

For short quotations, you can use the <q> tag. The text inside the <q> tag is enclosed in quotation marks automatically by the browser.

Example:

<p><q>This is a short quote.</q></p>

Long Quotations:

For longer quotes, the <blockquote> tag is used. It indents the text and is typically used for multi-line quotations.

Example:

<blockquote>
    <p>"The only limit to our realization of tomorrow is our doubts of today."</p>
    <footer>— Franklin D. Roosevelt</footer>
</blockquote>

5. Creating Links with the Anchor (<a>) Tag

The <a> tag is used to create hyperlinks. It requires the href attribute to specify the destination URL.

<a href="https://www.example.com">Visit Example</a>

You can also link to an email address by using the mailto: scheme in the href attribute.

Example:

<a href="mailto:someone@example.com">Send Email</a>

6. Formatting Text with HTML Physical Style Elements

HTML offers physical style elements, which directly modify the appearance of text. These are considered presentational, and it is recommended to use CSS for styling in modern web development.

• <b>: Bold
• <i>: Italic
• <u>: Underlined text

Example:

<p><b>Bold Text</b></p>
<p><i>Italic Text</i></p>
<p><u>Underlined Text</u></p>

7. Formatting Text with HTML Logical Style Elements

Logical style elements define the meaning or importance of text, rather than its visual style.

• <strong>: Strong emphasis (typically bold)
• <em>: Emphasized text (typically italic)

Example:

<p><strong>This is strongly emphasized text.</strong></p>
<p><em>This is emphasized text.</em></p>

8. Arranging Text: Line Breaks and Paragraphs

• <br>: Adds a line break.

<p>This is a line.<br>This is a new line.</p>

• <p>: Creates a paragraph.

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

• <hr>: Creates a horizontal line to separate content.

<hr>
<p>Content below the horizontal rule.</p>

9. Exploring Hyperlinks and Linking to a Mail System

Links can be used not only for web pages but also for linking to emails, documents, and other resources.

Mail Links:

To link to an email system, use the mailto: scheme in the href attribute.

Example:

<a href="mailto:support@example.com">Contact Support</a>

This will open the user's default email client with the specified email address.

Exploring Link Relations (Linking External Resources)

HTML allows linking to external resources using the <link> tag. This tag is typically used in the <head> section of a webpage to link CSS files, icons, or other metadata.

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

10. Working with Images in a Web Page

Images are embedded in a webpage using the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text in case the image is not loaded.

<img src="image.jpg" alt="Description of the image">

Common Image Attributes:

Attribute	Purpose
src	Specifies the image source URL.
alt	Provides alternative text for accessibility.
width	Specifies the width of the image in pixels.
height	Specifies the height of the image in pixels.