HTML from scratch: text formatting. Lesson #3 Overcod.net

HTML from scratch: text formatting. Lesson #3

Working with text in HTML is one of the first basics that beginners in web development need to master. In this lesson, you will learn how to add text to an HTML document, format it, align it, change its color and size, and use special effects like strikethrough or underline. Let’s start with the basics and move on to more complex examples.

Basic Tags for Working with Text

1. Headings
The <h1>–<h6> tags are used for headings of different levels. The smaller the number in the tag, the larger the text:

<h1>Largest Heading</h1>
<h6>Smallest Heading</h6>

Headings are automatically bolded and start on a new line.

2. Aligning Headings:
The align attribute allows horizontal alignment of the text:

<h1 align="center">Centered Heading</h1>

3. Paragraphs
The  tag separates text into paragraphs:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

The align attribute can also be used to align text within a paragraph.

4. Lines
To separate text, use the <hr> tag. It can be customized:

<hr width="50%" align="center" size="5" color="blue" noshade>

5. Text Highlighting

Italic:  or 
Bold:  or 
Underlined: 
~~Strikethrough~~: <s></s>
Superscript/Subscript:  and 
Example:

<p>This is the formula: H<sub>2</sub>O.</p>

6. Text Styles
Using the  tag (deprecated), you can change the text color, size, and font:

<font color="red" size="5" face="Arial">Red Text</font>

Example HTML Code

Let’s combine all the elements we’ve learned into one document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text Formatting in HTML</title>
</head>
<body>
    <h1 align="center">Text Formatting</h1>
    <p align="justify">HTML is a markup language that allows you to create web pages.</p>
    <p>Example of text highlighting: <strong>bold</strong>, <i>italic</i>, <u>underlined</u>.</p>
    <hr width="50%" size="3">
    <p align="right">Water formula: H<sub>2</sub>O.</p>
    <p align="center"><font color="blue" size="4">Good luck with learning HTML!</font></p>
</body>
</html>

Recommendations

Use modern approaches to styling: CSS is preferred over outdated HTML attributes for text formatting.
Practice by creating your own page using all the tags discussed.