Introduction to web technology session 8

(Section 1 Section 2 Section 3 Section 4 Section 5 Session 7 Session 9)

Hypertext

Hypertext in HTML

Hypertext refers to text that contains links to other texts. In HTML, hypertext is created using the <a> tag, which stands for "anchor." This tag is used to define hyperlinks, allowing users to navigate from one page to another or to different sections within the same page.

Basic Syntax

<a href="url">link text</a>

The href attribute specifies the URL of the page the link goes to.

The link text is the clickable part of the hyperlink.

Example

<a href="https://sayadasite.blogspot.com/">Visit sayadasite.blogspot.com!</a>

This creates a link that, when clicked, will take the user to sayadasite.blogspot.com.

Absolute vs. Relative URLs

Absolute URLs: Full web addresses, e.g., https://www.google.com/.

Relative URLs: Links to pages within the same website, e.g., html_images.asp.

Example

<!-- Absolute URL -->

<a href="https://www.google.com/">Google</a>

<!-- Relative URL -->

<a href="html_images.asp">HTML Images</a>

Absolute URLs are used for linking to external websites, while relative URLs are used for linking within the same site.

Using Images as Links

You can use an image as a hyperlink by placing an <img> tag inside an <a> tag.

Example

<a href="default.asp"> (Active Server Pages)

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

This creates a clickable image that links to default.asp.

Email Links

To create a link that opens the user's email program, use the mailto: scheme inside the href attribute.

Example

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

This link will open the user's default email program to send an email to someone@example.com.

Styling Links with CSS

Links can be styled using CSS with pseudo-classes like :link, :visited, :hover, and :active.

Example

a {

color: green;

}

a:hover {

color: blue;

}

This CSS will style the links to be green by default and blue when hovered over.

Summary,

Hypertext in HTML is a powerful way to create interactive and navigable web pages.

By using the <a> tag and its attributes, you can link to other pages, open links in new tabs, use images as links, and even create email links.

Styling these links with CSS further enhances the user experience

 

Formatting text

HTML formatting defines the way of content representation on the webpage to improve the readability, to give the semantic meaning, and to improve visual styling.

HTML formatting is done by using HTML physical and logical tags.

Let's understand what are physical and logical tags:

Physical Tags: These tags are used to give the visual appearance to the textual content.

Logical Tags: These tags are used to give logical and semantic meaning to the textual content. There are a few logical tags that are used for screen readers, but the impact of those tags is visible on the browsers.

HTML Formatting

Without formatting, nothing looks good or soothing to our eyes. But HTML formatting is not only for soothing the eye or making textual content attractive. There are few reasons to do the HTML formatting.

HTML formatting is useful in many aspects:

The appearance of any text provides a clear view of the content intent, such as highlighting the keywords, putting meaningful information in the quotations, underlining the main sentence, etc.

Formatting helps search engines understand the content structure and is also helpful for search engine optimization. Formatting improves the visual layout and improves the readability of the content.

HTML Formatting Tags

The following table has a list of common HTML formatting tags that are used for text formatting:

 

Tag	Description	Category
<b>	This tag is used to make the text bold.	Physical Tag
<i>	This tag is used to make the text italic.	Physical Tag
<big>	This tag is used to make the text bigger. It is not supported in HTML5.	Physical Tag
<small>	This tag is used to make the text smaller.	Physical Tag
<u>	This tag is used to underline text.	Physical Tag
<strike>	This tag is used to strike through text. It is not supported in HTML5.	Physical Tag
<tt>	This tag is used to make text appear in teletype (monospace font). It is not supported in HTML5.	Physical Tag
<strong>	This tag is used to bold text and give it semantic importance.	Logical Tag
<em>	This tag is used to italicize text and give it semantic emphasis.	Logical Tag
<sup>	This tag is used to make superscript text (slightly above the normal line).	Other Tag
<sub>	This tag is used to make subscript text (slightly below the normal line).	Other Tag
<ins>	This tag is used to indicate that content has been added (typically underlined).	Other Tag
<del>	This tag is used to indicate that content has been deleted (typically struck through).	Other Tag
<mark>	This tag is used to highlight text with a yellow background.	Other Tag

HTML Formatting Tags with Examples

The detailed explanation of each formatting tag with their examples is as follows:

 

HTML <b> Tag

HTML <b> tag is used for making the text bold; there is no logical aspect of this tag; it is only used for visual impact.

Example

This example demonstrates the use of the <b> tag to make the text formatting bold:

<!DOCTYPE html>

<html>

<head>

   <title>Bold Text Example</title>

</head>

<body>

   <p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

Output:

The following word uses a bold typeface.

HTML <strong> Tag

HTML <strong> tag is used for making the text strong that has more importance, and the text inside it is typically displayed in the bold.

Note: The <b> tag makes the text bold for styling purposes only, while the <strong> tag makes the text bold and also adds importance to the text within its content.

Example

This example demonstrates the use of the <strong> tag to show the important text:

<!DOCTYPE html>

<html>

<head>

   <title>Bold Text Example</title>

</head>

<body>

   <p>The following word uses a <strong>strong</strong> typeface.</p>

</body>

</html>

Output

The following word uses a strong typeface.

HTML <i> Tag

Any content that is enclosed within the <i>...</i> element is displayed in italicized.

Example

This example demonstrates the use of the <i> tag to make the text italic:

<!DOCTYPE html>

<html>

<head>

   <title>Italic Text Example</title>

</head>

<body>

   <p>The following word uses a <i>italicized</i> typeface.</p>

</body>

</html>

Output:

The following word uses a italicized typeface.

HTML <em> Tag

HTML <em> tag gives semantic meaning to the text contained within it and renders it in italics on the browser.

Example

This example demonstrates the use of the <em> tag to make the text emphasize:

<!DOCTYPE html>

<html>

<head>

   <title>Italic Text Example</title>

</head>

<body>

   <p>The following word uses a <em>emphasized</em> typeface.</p>

</body>

</html>

Output:

The following word uses a emphasized typeface.

HTML <big> Tag

Any content that is enclosed within the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.

Example

This example demonstrates the use of the <big> tag to make the text appear larger than the surrounding text:

<!DOCTYPE html>

<html>

<head>

   <title>Larger Text Example</title>

</head>

<body>

   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>

</body>

</html>

Output:

Hello Welcome to Tutorialspoint.

HTML <small> Tag

The content, which is enclosed within the <small>...</small> element, is displayed one font size smaller than the rest of the text surrounding it.

Example

This example demonstrates the use of the <small> tag to make the text appear smaller than the surrounding text:

<!DOCTYPE html>

<html>

<head>

   <title>Smaller Text Example</title>

</head>

<body>

   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>

</body>

</html>

Output:

Hello Welcome to Tutorialspoint.

HTML <sup> Tag

Any content enclosed within the ^... element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed at half the height of the surrounding characters, giving it a smaller and slightly raised appearance compared to the rest of the text.

Example

This example demonstrates the use of the <sup> tag to make the text appear slightly above the normal text:

<!DOCTYPE html>

<html>

<head>

   <title>Superscript Text Example</title>

</head>

<body>

   <p>The following word uses a ^superscript typeface. </p>

</body>

</html>

Output:

The following word uses a superscript typeface.

HTML <sub> Tag

Any content of a _... element is written in subscript; the font size used is the same as the characters surrounding it and is displayed half a character's height beneath the other characters. It is typically used for writing things like chemical formulas, where certain characters need to be displayed below the regular text line.

Example

This example demonstrates the use of the <sub> tag to make the text appear slightly below the normal text:

<!DOCTYPE html>

<html>

<head>

   <title>Subscript Text Example</title>

</head>

<body>

   <p>The following word uses a _subscript typeface. </p>

</body>

</html>

Output:

The following word uses a subscript typeface.

HTML <ins> Tag

Any content that is enclosed within the <ins>...</ins> element is displayed as inserted text.

Example

This example demonstrates the use of the <ins> tag to mark the text that has been inserted:

<!DOCTYPE html>

<html>

<head>

   <title>Inserted Text Example</title>

</head>

<body>

   <p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

Output:

I want to drink cola wine

HTML <del> Tag

Content that is enclosed within the <del>...</del> element is displayed as deleted text.

Example

This example demonstrates the use of the <del> tag to mark the text that has been removed:

<!DOCTYPE html>

<html>

<head>

   <title>Deleted Text Example</title>

</head>

<body>

   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>

</body>

</html>

Output:

Hello welcome to Madras Chennai

HTML <u> Tag

Any content enclosed within the <u>...</u> element is displayed with an underline.

Example

This example demonstrates the use of the <u> tag to make the underlined text:

<!DOCTYPE html>

<html>

<head>

   <title>Underlined Text Example</title>

</head>

<body>

   <p>The following word uses a <u>underlined</u> typeface.</p>

</body>

</html>

Output:

The following word uses a underlined typeface.

HTML <strike> Tag

Content that is enclosed within the <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text.

Example

This example demonstrates the use of the <strike> tag to display strikethrough text:

<!DOCTYPE html>

<html>

<head>

   <title>Strike Text Example</title>

</head>

<body>

   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>

</html>

Output:

The following word uses a strikethrough typeface.

HTML <mark> Tag

HTML <mark> tag is used to mark or highlight text that is important for notation purposes.

Example

This example demonstrates the use of the <mark> tag to make the marked text:

<!DOCTYPE html>

<html>

<head>

   <title>Strike Text Example</title>

</head>

<body>

   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>

</body>

</html>

Output:

The following word uses a marked typeface.

HTML <tt> Tag

Any content enclosed within the <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

This example demonstrates the use of the <tt> tag to make the teletype text:

<!DOCTYPE html>

<html>

<head>

   <title>Monospaced Font Example</title>

</head>

<body>

   <p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>

Output:

The following word uses a monospaced typeface.