Adding Text and More in HTML and XHTML
This chapter is from the book
This chapter is from the book
This chapter is from the book
In this lesson, you will learn how to use HTML to add text and headings in your Web pages. You'll also learn how to add mathematical notations, information about your Web page, and special characters (such as ampersands).
Paragraphs
You might not realize it, but you already learned how to create an HTML paragraph in Lesson 2, "Creating Your First Page." In HTML, a paragraph is created whenever you insert text between the <p> tags. Look at the code from Lesson 2 again:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My First Web Page</title> </head> <body> <p>This is my first Web page.</p> </body> </html>
Web browsers see that you want text and they display it. Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags. In the following HTML code, you see several lines of text and even a blank line, but the browser only recognizes paragraphs surrounded by the <p> and </p> tags (or paragraph tags). The <p> tag tells the browser to add a blank line before displaying any text that follows it, as shown in Figure 3.1.
){kind=link}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Typing Paragraphs in HTML</title> </head> <body> <p>This is the first line. But is this the second?</p> <p>No, this is.</p> </body> </html>Figure 3.1 The browser ignores the blank line that I inserted and puts the line break before the <p> tag instead.
Web browsers do something else with paragraph text that you should be aware of: They wrap the text at the end of the browser window. In other words, when the text in your Web page reaches the edge of the browser window, it automatically continues on the next line regardless of where the <p> is located.
The <p> tag always adds a blank line, but you might not always want a blank line between lines of text. Sometimes you just want your text to appear on the next line (such as the lines of an address or a poem). You can use a new tag for this—the line break, or <br> tag, shown in Figure 3.2.
){kind=link}
This new tag forces the browser to move any text following the tag to the next line of the browser, without adding a blank line in between. Figure 3.3 shows how the browser uses these two tags to format your text.
Figure 3.2 The <p> and <br> tags help to separate your text into lines and paragraphs.){kind=link}
Figure 3.3 The browser inserts line breaks and blank paragraph separators only where you place the correct HTML tags.