Paragraph layout and line breaks of HTML web pages

Author：Eve Cole Update Time：2025-05-26 03:00:03

Whether the appearance of a web page is beautiful depends largely on its layout. Large paragraphs of text appear on the page, which are usually planned in segments, and there are extremely strict divisions for line breaks. This section starts with the details of the paragraph, so that readers can use tags to process large paragraphs of text freely after learning.

Text and paragraphs in HTML pages

Through the study of the previous chapter, readers have a relatively solid foundation in the overall performance setting of the web page. However, readers not only want to express text on the web page, but also want to type and modify the text on the web page. This chapter will learn simple layout, modification, scrolling text and hyperlinks of text. Hyperlinks are everywhere in website development and are the focus of web pages.

When studying this chapter, create a directory named chapter3 in the D:/web/ directory, move the file from the previous chapter to D:/web/chapter3, and make a classification. This chapter continues to create sample files in the D:/web/ directory, so as to facilitate testing sample files with IIS.

— Note: The following chapters will be treated similarly and will not be repeated. For example, the file in Chapter 4 is classified as D:/web/ chapter4.

4.1 Paragraph typesetting and line breaking

4.1.1 Segment large paragraphs of text

Simply use the commonly used tags for text segmentation, that is, use the beginning of the paragraph and use the end of the paragraph. Some web pages are omitted when segmented, that is, they are used as single tags, because the tag at the beginning of the next paragraph means the end of the previous paragraph.

— Note: The author does not recommend using as a single tag, as this code is not standardized and error-prone.

Create a web page file in the D:/web/ directory, named p.htm, and write the code as shown in Code 4.1.

Code 4.1 Segment settings: p.htm

<html>

<head>

<title>Segment settings</title>

</head>

<body>

Movie Biweekly: "Infernal Affairs Three: The Ultimate Uninterrupted" Commentary Topic

It's just beginning after the end

At the end of 2002, the myth began. 2003 autumn and winter, heading towards climax and ultimate. "Infernal Affairs" means that it inherits the Buddhist philosophy, and that light and darkness, survival and extinction, existence and nothingness are entangled in a mixed manner, and fall apart in a shocking way, which is also a process of enrichment and unity. There is a cause, there is a result, and there is a sin, there is a fate. The wonderfulness of the situation and appearance lies in the limits of words and interpretations. It cannot be revealed, nor can it be silent, and it depends on each other. The heart sound is always there, questioning oneself and time and space. This is the best time, this is the worst time, and people in almost every era say that. However, the "Vimalakirti Sutra: The Seventh Chapter of the View of All Life" says: Without attachment, there is no origin. Starting from the body's words and deeds, through the unspeakable level, we initially reach the state of self-view, which in the end is nothing more than an attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror figures in their destiny. They can all see themselves from each other, fight, burst, sink, and scatter, as if they are disasters and twisted life, so they are infernal Affairs.

Gu Zhun said from idealism to empiricism, Wang Xiaobo said to be alert to tyrants and heroes, who are heroes? Where did they come from? So what if they come? Do we still want heroes in our era? When I edited this E forum, I felt a little relieved. From the text, we can see that everyone is thinking. After all, we are no longer a blind follower. In my opinion, entertainment has never been just entertainment itself. You can see a world from a drop of water, a flower, and a grain of sand. What we think of in a movie is destined to be more, and understanding is boundless. Each of us constitutes this world, and we have a share no matter whether the world is good or bad. Each of us has our own life, both our strengths and weaknesses, which is the basis for our common progress.

</body>

</html>

Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.1.

Figure 4.1 Segmentation Setting

Through the segments of the tags, the text layout of the large segments is organized.

4.1.2 Add spaces to text

If you look closely at Figure 4.1, the segmentation in the figure feels a bit awkward because there are no character spaces at the beginning of each segment.

— Description: According to Chinese writing habits, the first line of the paragraph must have 2 Chinese characters.

I have learned the previous chapter that it is impossible to display on the page by simply tapping the space bar with the keyboard in HTML code. HTML uses 1 space character (English space character). Since 1 Chinese character occupies the width of two English characters, add 4   characters to the beginning of the first line of the paragraph, and modify the code of p.htm as shown in code 4.2.

Code 4.2 Settings of space characters: p.htm

<html>

<head>

<title>Segment settings</title>

</head>

<body>

Movie Biweekly: "Infernal Affairs Three: The Ultimate Uninterrupted" Commentary Topic

It's just beginning after the end

At the end of 2002, the myth began. 2003 autumn and winter, heading towards climax and ultimate. "Infernal Affairs" means that it inherits the Buddhist philosophy, and that light and darkness, survival and extinction, existence and nothingness are entangled in a mixed manner, and fall apart in a shocking way, which is also a process of enrichment and unity. There is a cause, there is a result, and there is a sin, there is a fate. The wonderfulness of the situation and appearance lies in the limits of words and interpretations. It cannot be revealed, nor can it be silent, and it depends on each other. The heart sound is always there, questioning oneself and time and space. This is the best time, this is the worst time, and people in almost every era say that. However, the "Vimalakirti Sutra: The Seventh Chapter of the View of All Life" says: Without attachment, there is no origin. Starting from the body's words and deeds, through the unspeakable level, we initially reach the state of self-view, which in the end is nothing more than an attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror figures in their destiny. They can all see themselves from each other, fight, burst, sink, and scatter, as if they are disasters and twisted life, so they are infernal Affairs.

Gu Zhun said from idealism to empiricism, Wang Xiaobo said to be alert to tyrants and heroes, who are heroes? Where did they come from? So what if they come? Do we still want heroes in our era? When I edited this E forum, I felt a little relieved. From the text, we can see that everyone is thinking. After all, we are no longer a blind follower. In my opinion, entertainment has never been just entertainment itself. You can see a world from a drop of water, a flower, and a grain of sand. What we think of in a movie is destined to be more, and understanding is boundless. Each of us constitutes this world, and we have a share no matter whether the world is good or bad. Each of us has our own life, both our strengths and weaknesses, which is the basis for our common progress.

</body>

</html>

Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.2.

Figure 4.2 Setting of space characters

The paragraph has been initially formed and the spaces have been expressed. Readers can add space characters to test the paragraph.

4.1.3 Setting text line breaks and not line breaks

Figure 4.1 looks like there is no problem. When the text reaches the browser boundary, it will automatically wrap the line. However, when the browser width is adjusted, the position of text line breaks also changes accordingly, and the format seems quite confusing. In order to standardize the format, readers should use a single tag to force a line break when writing code. On the contrary, parts that do not need to be wrapped are included with double tags . Modify the p.htm code as shown in code 4.3.

Code 4.3 Line break control: p.htm

<html>

<head>

<title>Segment settings</title>

</head>

<body>

Movie Biweekly: "Infernal Affairs Three: The Ultimate Uninterrupted" Commentary Topic

It's just beginning after the end

At the end of 2002, the myth began. 2003 autumn and winter, heading towards climax and ultimate. The Infernal Affairs is to inherit the Buddhist philosophy, and light and darkness, survival and extinction, existence and nothingness are entangled in a mixed manner, and fall apart in a shocking way. It is also a process of enrichment and unity. There is a cause, there is a result, and there is a sin, there is a fate. The beauty of the situation and appearance lies in the limits of words and interpretations. It cannot be revealed, nor can it be silent, and it depends on each other. The heart sound is always there, questioning oneself and time and space. This is the best time, this is the worst time, and people in almost every era say so. However, the "Vimalakirti Sutra: The Seventh Chapter of the View of All Life" says: Without attachment, there is no origin. From the body's words and deeds, and through the unspeakable level, we initially reach the state of self-view, which in the end is nothing more than an attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror figures in their destiny. They can all see themselves from each other, fight, burst, sink, and scatter, as if they are disasters and twisted life, so they are infernal Affairs.

Gu Zhun said from idealism to empiricism, Wang Xiaobo said to be alert to tyrants and heroes, who are heroes? Where did they come from? So what if they come? Do we still want heroes in our era? When I edited this E forum, I felt a little relieved. From the text, we can see that everyone is thinking. After all, we are no longer a blind follower. In my opinion, entertainment has never been just entertainment itself. You can see a world from a drop of water, a flower, and a grain of sand. What we think of in a movie is destined to be more, and understanding is boundless. Each of us constitutes this world, and we have a share no matter whether the world is good or bad. Each of us has our own life, both our strengths and weaknesses, which is the basis for our common progress.

</body>

</html>

Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.3.

Figure 4.3 Line break control

From this example, the part contained in will not be automatically wrapped unless there is a forced wrap.

4.1.4 Set text alignment

Text in paragraphs needs to be aligned differently at some point, and the default alignment is left. The alignment attribute of the tag is align. Set the align to left, right or center value to achieve left, right and center alignment. Modify the p.htm code as shown in code 4.4.

Code 4.4 Alignment control: p.htm

<html>

<head>

<title>Segment settings</title>

</head>

<body>

Movie Biweekly: "Infernal Affairs Three: The Ultimate Uninterrupted" Commentary Topic

It's just beginning after the end

At the end of 2002, the myth began. 2003 autumn and winter, heading towards climax and ultimate. "Infernal Affairs" means that it inherits the Buddhist philosophy, and that light and darkness, survival and extinction, existence and nothingness are entangled in a mixed manner, and fall apart in a shocking way, which is also a process of enrichment and unity. There is a cause, there is a result, and there is a sin, there is a fate. The wonderfulness of the situation and appearance lies in the limits of words and interpretations. It cannot be revealed, nor can it be silent, and it depends on each other. The heart sound is always there, questioning oneself and time and space. This is the best time, this is the worst time, and people in almost every era say that. However, the "Vimalakirti Sutra: The Seventh Chapter of the View of All Life" says: Without attachment, there is no origin. Starting from the body's words and deeds, through the unspeakable level, we initially reach the state of self-view, which in the end is nothing more than an attitude of survival. In my opinion, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng and others are actually mirror figures in their destiny. They can all see themselves from each other, fight, burst, sink, and scatter, as if they are disasters and twisted life, so they are infernal Affairs.

Gu Zhun said from idealism to empiricism, Wang Xiaobo said to be alert to tyrants and heroes, who is the hero? Where did they come from? So what if they come? Do we still want heroes in our era? When I edited this E forum, I felt a little relieved. From the text, we can see that everyone is thinking. After all, we are no longer a blind follower. In my opinion, entertainment has never been just entertainment itself. You can see a world from a drop of water, a flower, and a grain of sand. What we think of in a movie is destined to be more, and understanding is boundless. Each of us constitutes this world, and we have a share no matter whether the world is good or bad. Each of us has our own life, both our strengths and weaknesses, which is the basis for our common progress.

</body>

</html>

Enter http://localhost/p.htm in the browser address bar, and the browsing effect is shown in Figure 4.4.

Figure 4.4 Alignment control

4.1.5 Adding horizontal divider

HTML provides horizontal dividers for modifying paragraphs, which can be easily used in many occasions without additional drawings. The label of the horizontal divider is a single label<hr />, which occupies one line by default.

Create a web page file in the D:/web/ directory, named hr.htm, and write the code as shown in Code 4.5.

Code 4.5 Divider line settings: hr.htm

<html>

<head>

<title>Settings of Divider Lines</title>

</head>

<body>

Review the glorious Cantonese songs in the music scene

<hr />

Which song is the earliest Cantonese song is still controversial. In 1973, Chopstick Sister Flower member Xian Dula sang the theme song of the same name for the TV series "Hidden and Crystal" created by Gu Jiahui. This song is also the theme song of the first Cantonese drama in Hong Kong's music industry. In the same year, the fledgling Adam Cheng also starred in the TVB drama "Smoky Rain" and sang the theme song of the same name. The theme song of the same name of the popular movie "The Two Stars" sung by Xu Guanjie in 1974 was a bombshell in the music industry, becoming the first Chinese song to be played on BBC radio in the UK. It was famous at that time and was the most recognized by everyone for the origin of Cantonese songs.

</body>

</html>

Enter http://localhost/hr.htm in the browser address bar, and the browsing effect is shown in Figure 4.5.

It is still controversial which song was the earliest Cantonese song. In 1973, Chopstick Sister Hua Cheng Zhongxian Dula sang the theme song of the same name for the TV series "Hidden and Crystal" created by Gu Jiahui. This song is also the theme song of the first Cantonese drama in the Hong Kong music industry. In the same year, Adam Cheng, who was a novice, also starred in the TVB drama "Smoky Rain" and sang the theme song of the same name. The theme song of the same name of the hit movie "The Two Stars" sung by Xu Guanjie in 1974 was a bombshell in the music industry. It became the first Chinese song to be played on BBC Radio in the UK. It was famous at that time and was the most recognized by everyone for the origin of Cantonese.

Figure 4.5 Setting of divider lines

A simple <hr /> tag can realize the divider, easily modifying the paragraph layout to make it more beautiful. However, for different application occasions, the default single line style obviously cannot meet the requirements. The multiple attributes of the <hr /> tag solve this problem. Commonly used attributes include width, size, align, color and title. width is the width setting. The default unit of the attribute value is pixels. The percentage can also be used to represent the proportion of the space occupied by the divider. size can be understood as the thickness or height of the divider, and the default unit of the attribute value is the same as the width. align is an alignment, similar to 's align. color is the color, and different colors of the divider are set according to needs. The title attribute is not used much, and the content prompt of the attribute value appears when the viewer's cursor hovers over the divider.

— Description: The default alignment of <hr /> is centered. The default units of HTML width and height attributes are pixels, and generally no identification unit is required. However, the unit must be identified in the style attribute.

<hr />There is another attribute that is noshade. When the divider has no color set and a certain size is set, the divider looks three-dimensional concave and has shadows. If the noshade property is used, the divider will be monochrome. Modify the hr.htm code as shown in code 4.6.

Code 4.6 Style settings of divider: hr.htm

<html>

<head>

<title>Settings of Divider Lines</title>

</head>

<body>

Set a 300 pixel width and right-aligned divider:

Set a 50% width and center-aligned divider:

Set 50% width, 50 pixel thickness and no noshade divider:

Set a thickness of 50 pixels and use noshade's divider:

Set a thickness of 50 pixels and a dark red divider:

Set the thickness of 50 pixels, set the light blue and set the thank you for your arrival! Tips for divider:

</body>

</html>

Enter http://localhost/hr.htm in the browser address bar, and the browsing effect is shown in Figure 4.6.

Figure 4.6 Style settings of divider lines