Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Contents
- 1 Lines and Paragraphs
- 2 The Element
- 2.1 The ALIGN Attribute
- 3 The Paragraph Element
- 3.1 The ALIGN Attribute
- 3.2 The CLEAR Attribute
- 3.3 Is the P Endtag Required?
- 4 Text Alignment
- 5 Justification
- 6 Indenting
- 6.1 Indenting a Paragraph
- 6.2 Indenting a Section of a Page
- 6.3 Indenting the Whole Page
- 6.4 Indenting the First Line of Each Paragraph
- 7 The
Element- 7.1 The CLEAR Attribute
- 8 The CENTER Element
- 9 The Element
- 9.1 The NOSHADE Attribute
- 9.2 The SIZE Attribute
- 9.3 The WIDTH Attribute
- 9.4 The ALIGN Attribute
- 10 The
Element
- 11 The “ Element
- 12 The “ Element
Lines and Paragraphs
This section describes HTML associated with lines and paragraphs. We begin with the basic
8 andThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
9 tags.This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Please note: This tutorial includes deprecated tags and attributes.
This tutorial is provided for historical value. Some of the tags and attributes presented in this tutorial have been deprecated and should not be used. Browser support for deprecated elements and attributes may be limited and using them may produce unexpected results.For a detailed look at modern html refer to our tutorials on semantic markup, HTML document structure, and fonts and web typography.
The
8 ElementThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
8, a block-level element, simply defines a block of content in the page. Beyond defining a block,This is aligned left. This is the default.
This is aligned center.
This is aligned right.
8 itself doesn’t do anything. For example, the following code creates aThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
8 element with two paragraphs inside of it. Notice that you can putThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
9 elements inside aThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
8.This is aligned left. This is the default.
This is aligned center.
This is aligned right.
This is stuff before the
.This is stuff inside the.This is more stuff inside the
.This is stuff after the.Which gives us:
This is stuff before the
6.before the table
Dawn 1-2028 Mary K 1-4952 This is stuff inside the
6.This is more stuff inside thebefore the table
Dawn 1-2028 Mary K 1-4952
6.before the table
Dawn 1-2028 Mary K 1-4952 This is stuff after the
6.before the table
Dawn 1-2028 Mary K 1-4952 The
0 Attribute.centeralign { text-align: center; }
0 sets the alignment of the contents of the.centeralign { text-align: center; }
8 element. All four values,This is aligned left. This is the default.
This is aligned center.
This is aligned right.
3,.centeralign { text-align: center; }
4,.centeralign { text-align: center; }
5, and.centeralign { text-align: center; }
6, are all well supported..centeralign { text-align: center; }
3 is the default value..centeralign { text-align: center; }
This code shows the default:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Which gives us:
This would be a great time for a cup of coffee, don’t you think? How about that! Let’s drink coffee all day!
The Paragraph Element
9 indicates the start of a new paragraph. This is usually rendered with two carriage returns, producing a single blank line in between the two paragraphs:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
This is the first paragraph.
And this is the second paragraph.
Which produces this:
This is the first paragraph.And this is the second paragraph.
The
0 Attribute.centeralign { text-align: center; }
0 indicates the alignment of the paragraph..centeralign { text-align: center; }
This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Which produces this:
This is aligned left. This is the default.
This is aligned center.
This is aligned right.
The
1 AttributeGet Centered
1 is recognized by some browsers and works very much likeGet Centered
3. However, it is not standard HTML and is still widely unsupported, so useGet Centered
3 instead.Get Centered
Is the P Endtag Required?
The W3C says of
5: “The end tag is optional as it can always be inferred by the parser.” This means that a newGet Centered
9 implies the end of the previousThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
9 [and any alignment set by the previousThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
9].This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Any other block level element, such as
9 orGet Centered
0 should also end the paragraph. However, it doesn’t always work out that way. Some browsers, for example, will right-align the text even after a table. In the following example, MSIE renders the “after the table” part as right aligned, while Netscape renders it as left aligned:This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
before the table
Dawn 1-2028 Mary K 1-4952 MSIE’s renderingNetscape’s renderingIf you set the alignment or other style property for a paragraph element it’s best to use
5. If you never use set any styles then you can generally ignoreGet Centered
5.Get Centered
See W3C’s specs for paragraphs for more information on this topic.
Text Alignment
You can set the alignment of any HTML element using the
3 style rule.This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
3 can be used to set the alignment for a paragraph, a section of the document, or even the whole document.This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
3 can be used to set alignment to left, right, center, or justified.This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
For example, suppose we want to center a paragraph. First, we’ll create a styles class called
6 by putting the following code into the “ section of the document:This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
.centeralign { text-align: center; }
Now we can set any paragraph to centeralign class like this:
Get Centered
Which gives us this:
.centeralign{text-align: center;}
Get Centered
We can apply the same class to a
8 element to center a section of the page:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
Which gives us:
This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
Justification
By default, most browsers render text with a jagged right edge.
If you want all text rendered like in a book with an even right edge you can use a single style rule. To set all text to justified copy the following code into the “ section of your document.
body { text-align: justify; }
The problem with justification is that many browsers get confused about where the last line of text is [which shouldn’t be justified]. For example, MSIE 4.x is confused when a block of text is immediately followed by a table. Notice in this image that the last line of text stretches the words “one of our agents” across a full line:
To remedy this situation surround all blocks of text with
9 andThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
5:Get Centered
The special runs through August 16th, at which time we are required by federal law to revert to the old rates. Call one of our agents:
Hunter 1-2039 Garland 1-3593 Now our errant MSIE renders things more sanely:
Indenting
There are several ways to indent paragraphs and entire sections of your web page. The next few sections describe the four main techniques for indentation:
- Indenting a Paragraph
- Indenting a Section of the Page
- Indenting the Whole Page
- Indenting the First Line of Each Paragraph
Before we begin, however, it’s worth saying a few words about
0. There’s a popular misconception thatThis is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
0 should be used to indent sections of the page. This belief comes from the fact that most visual web browsers render quoted text as indented. Remember, however, that HTML is not a formatting language and gives unpredictable results when you attempt to use it as one. UseThis is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
0 if you have a quoted block of text, otherwise use the techniques described in the next few paragraphs.This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.
Each element within the center aligned DIV inherits the center aligned style.
Indenting a Paragraph
You can indent a single paragraph using styles. For example, suppose we want to indent a paragraph 50 points. First, we create a class called indented with the following style rules. Put this code in the “ section of your document.
0This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Now we set the class of the paragraph to indented by adding a CLASS attribute to the
9 tag:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
1This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Which gives us this indented paragraph:
.indented{padding-left: 50pt; padding-right: 50pt;}
You don’t know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain’t no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly — Tom’s Aunt Polly, she is — and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before. – Opening to Huck Finn
Indenting a Section of a Page
To indent more than one paragraph we’ll use the same style as we set in the previous example. Put this code in the “ section of your page:
0This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Then we’ll use the indented class in a
8 element:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
3This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Which gives us an indented section like this:
Household Hazardous Waste
These items can be brought to the recycling center for redistribution. This is much better than throwing them out.- Household cleaners
- Computers and computer accessories
- Clothes
Indenting the Whole Page
If you want the entire page indented, set a style rule which sets right and left padding for the “ element. For example, this style sets the right and left padding to 100 pixels:
4This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!This technique is popular when used in combination with a background image. For example, suppose we want this image to run down the left side of the page.This image is 56 pixels wide, so let’s set the padding to 60. The following style sets the background image, sets the repeat to repeat-y [only repeat vertically down the left side of the page] and sets the left padding to 60 [we won’t set the right padding].
5This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Here’s how that might look:
.background-indent{background-image:url[“/wp-content/uploads/blue.edge_.gif”]; background-repeat:repeat-y; padding-left:60px; width:100%; overflow: auto;} Household Hazardous Waste These items can be brought to the recycling center for redistribution. This is much better than throwing them out.
- Household cleaners
- Computers and computer accessories
- Clothes
Indenting the First Line of Each Paragraph
To indent the first line of each paragraph set a style rule using text-indent. For example, the following code indents the first line of each paragraph 30 points. Copy this code into the “ section of your page:
6This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!This code indents the first line of each
9 element, but you’ll probably run into an annoying problem. If you’re like most designers you probably don’t put a P before the first paragraph or between a header likeThis is aligned left. This is the default.
This is aligned center.
This is aligned right.
6 and the text that follows it. Unfortunately, that’s exactly what you’ll need to do if you want the paragraph indented. The text in these situations is part of something called “anonymous blocks” and cannot be referred to directly. To indent it you must put the text in abody { text-align: justify; }
9 element.This is aligned left. This is the default.
This is aligned center.
This is aligned right.
So, for example, the following code does not have a
9 between the header and the text, so the text is not indented:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
7This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Which gives us:
My Story
This paragraph is not indented.This code does have a
9 between the header and the text, so the text is indented:This is aligned left. This is the default.
This is aligned center.
This is aligned right.
8This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!.indented-p{text-indent: 30pt;}My Story
This paragraph is indented.
The
3 ElementGet Centered
3 inserts a single carriage return. WhereasGet Centered
9 indicates the start of a new paragraph,This is aligned left. This is the default.
This is aligned center.
This is aligned right.
3 only implies a carriage return within the same paragraph.Get Centered
3 is usually rendered with a single carriage return.Get Centered
For example, this code:
9This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!Which produces this:
There once was a man from Nantucket
Who kept all his dough in a bucket
His daughter name Nan
Ran away with a man
And as for the bucket, NantucketBecause
3 does not start a new paragraph, all the current paragraph attributes stay the same:Get Centered
0This is the first paragraph.
And this is the second paragraph.
Which produces this:
There once was a man from Nantucket
Who kept all his dough in a bucket
His daughter name Nan
Ran away with a man
And as for the bucket, NantucketThe
1 AttributeGet Centered
1 says that in addition to inserting a line break, if there is a picture or other object to the right or left, go past that too. For example, this code says that the picture should be aligned on the left side of the page. Then there is some text, thenGet Centered
3. The text following that is past the picture:.centeralign { text-align: center; }
1This is the first paragraph.
And this is the second paragraph.
Which produces this:
Come on down to the Halloween party!You’ll have a great ol’ time.
8:00pm to midnight. Wear a costume or come as your own scary self!
9 is the same asThe special runs through August 16th, at which time we are required by federal law to revert to the old rates. Call one of our agents:
Hunter 1-2039 Garland 1-3593
00, but is not supported on as many browsers, so useThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
00 instead.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!The
4 Element.centeralign { text-align: center; }
Usage Recommendation: Use
8 instead.This is aligned left. This is the default.
This is aligned center.
This is aligned right.
04 is exactly equivalent toThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
05. “ is being phased out. UseThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
05 instead.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
2This is the first paragraph.
And this is the second paragraph.
Which gives us:
Hi There! Let’s talk about stuff!
Which is the same as:
3This is the first paragraph.
And this is the second paragraph.
Which gives us:
Hi There! Let’s talk about stuff!
The
9 ElementGet Centered
9 draws a horizontal line [a “horizontal rule”] across the page. That’s it. For such a simple concept, horizontal rules are surprisingly popular. Let’s start with the basics.Get Centered
9 has no end tag and requires no attributes:Get Centered
4This is the first paragraph.
And this is the second paragraph.
Which creates this rule:
Some text up here
Some text down here
9 is usually indicates a division in the page. Stuff before the rule is in a different “section” from the stuff after. For that reason many designers considerGet Centered
9 a logical tag, not a layout tag.Get Centered
The
12 AttributeThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 indicates that the rule should be presented as flat instead of three dimensional. Compare this regular horizontal rule:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!With a
12 rule:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
5This is the first paragraph.
And this is the second paragraph.
Which gives us:
12 is often used in conjunction withThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
16:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
6This is the first paragraph.
And this is the second paragraph.
Produces this rule:
12 is popular because browsers usually don’t render three-dimensional rules very well. Indeed, in many circumstances the rule is presented in the same color as the background, rendering it almost invisible.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!The
16 AttributeThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
16 indicates the height of the rule. [I guess calling it “HEIGHT” would have just been too easy.] For horizontal width seeThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20. Compare some of these sizes:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
7This is the first paragraph.
And this is the second paragraph.
Which gives us these rules:
Browsers will generally not render an
9 any bigger than 100.Get Centered
The
20 AttributeThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20 sets the horizontal width of the rule. You can express the size in pixels or as a percentage.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!These
9‘s are set with pixel widths:Get Centered
8This is the first paragraph.
And this is the second paragraph.
Which gives us these rules:
20 is usually expressed as a percentage. If you use a percentage width, be sure to enclose the value in quotes.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
9This is the first paragraph.
And this is the second paragraph.
Produces these rules:
The default is 100%. By default the rule is centered. To set a different alignment use
0..centeralign { text-align: center; }
Percentage widths use the percentage of the available width, not the full width of the page. For example, if the rule is in a table then the width is a percentage of the width of the table cell.
0This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Which produces this table:
Hey, whatever dude!
A stitch in time saves nine
The
0 Attribute.centeralign { text-align: center; }
0 sets the alignment of the rule. ALIGN is only useful if you also use.centeralign { text-align: center; }
20.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
1This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Give us this:
The
30 ElementThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 is one the handiest tags in the HTML toolbox.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 marks the text as “preformatted” — all the spaces and carriage returns are rendered exactly as you type them.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
2This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Which produces this:
30 text is rendered in a fixed width font, meaning that all characters and spaces are the same width. Fixed width makes it easy to lay out the text just the way you want it, soThis would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 is great for creating “quick and dirty” tables like the one above.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 does NOT cause the browser to ignore tags. You can still create links and other goodies:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
3This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Produces this:
When you start adding markup, it gets harder to see how the text turns out [spacing your tags out evenly like the table above helps].
30 is often used to quote large blocks of text that you don’t want to “HTMLize”, but a “ could mess up the text. For a table larger than a few lines, it is usually easier in the long run to use table code.This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!The “ Element
“ prevents a carriage return from occurring. For example, the following code produces a nonsense poem of one long line:
4This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Which produces this:
Twisting and turning, spinning and shouting, hissing and roaring, fearing and jeering, stomping and yelling, running and jumping, peeling and dicing, cooking and weighing, costing and pricing, eating and drinking, all in a day’s work.
37:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
5This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Which produces this:
Twisting and turning,
spinning and shouting,
hissing and roaring,
fearing and jeering,
stomping and yelling,
running and jumping,
peeling and dicing,
cooking and weighing,
costing and pricing,
eating and drinking,
all in a day’s work.The “ Element
38 to prevent line breaks in a section of text, and then you want to say “but you can break HERE if you want”. “ does not force a line break, it merely allows one:This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
6This is aligned left. This is the default.
This is aligned center.
This is aligned right.
Produces:
Maybe it’s because every time I get to the last line I feel like I have so much left to say that I have to try to push and fit and cram as many words I can think of as I possibly can
What kind of technology can traffic engineers use to determine the best timing for red light cycles?
By receiving and processing data from strategically placed sensors, ASCT can determine which lights should be red and which should be green.Which commonly used programming language is used to manage access and search for database content?
SQL [Structured Query Language] SQL is a database query language [not a development language] that allows for adding, accessing and managing content in a database. It is the language that allows programmers to perform the common acronym CRUD [Create; Read; Update; Delete] within a database.What characteristics makes this password insecure?
7 Characteristics of Weak Passwords [Infographic].Repeating previously used passwords..Names of close family members or friends..Your name..Words in the dictionary..Common names..Repeating your login code..Keyboard patterns and swipes [i.e., 123456 or QWERTY].What type of data does a file of digital animation store quizlet?
Instead of storing moving images, a digital animation stores data about the color and brightness of each frame.Chủ Đề