Paragraphs
<p>...</p>
A paragraph element
Paragraphs are the most rudimentary elements of a text
document. You indicate a paragraph with the p element by inserting an opening
<p> tag at the beginning of the paragraph and a closing </p> tag
after it, as shown inthis example.
<p>Serif typefaces have small slabs at the ends of
letter strokes. In general, serif fonts can make large amounts of text easier
to read.</p>
<p>Sans-serif fonts do not have serif slabs; their
strokes are square on the end. Helvetica and Arial are examples of sans-serif
fonts. In general, sans-serif fonts appear sleeker and more modern.</p>
Visual browsers nearly always display paragraphs on new
lines with a bit of space between them by default (to use a term from CSS, they
are displayed as a block). Paragraphs may contain text, images, and other
inline elements (called phrasing content in the spec), but they may not contain
headings, lists, sectioning elements, or any element that typically displays as
a block by default.
In HTML, it is OK to omit the closing </p> tag. A
browser just assumes it is closed when it encounters the next block element.
However, in the stricter XHTML syntax, the closing tag is required (no surprise
there). Many web developers, including myself, prefer to close paragraphs and
all elements, even in HTML, for the sake of consistency and clarity. I
recommend folks who are just learning markup, like yourself, do the same.
NOTE
You must assign an element to all
the text in a document. In other words, all text must be enclosed in some sort of
element. Text that is not contained within tags is called “naked” or “anonymous”
text, and it will cause a document to be invalid.
Headings
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Heading elements
In the last chapter, we used the h1 and h2 elements to
indicate headings for the Black Goose Bistro page. There are actually six
levels of headings, from h1 to h6. When you add headings to content, the browser uses them
to create
a document outline
for the page. Assistive reading devices
such as screen readers use the document outline to help users quickly scan and
navigate through a page. In addition, search engines look at heading levels as
part of their algorithms (information in higher heading levels may be given
more weight). For these reasons, it is a best practice to start with the Level
1 heading (h1) and work down in
numerical order (see note), creating a logical document structure and outline. This
example shows the markup for four heading levels. Additional heading levels
would be marked up in a similar manner.
<h1>Type Design</h1>
<h2>Serif Typefaces</h2>
<p>Serif
typefaces have small slabs at the ends of letter strokes.
In general, serif
fonts can make large amounts of text easier to
read.</p>
<h3>Baskerville</h3>
<h4>Description</h4>
<p>Description
of the Baskerville typeface.</p>
<h4>History</h4>
<p>The
history of the Baskerville typeface.</p>
<h3>Georgia</h3>
<p>Description
and history of the Georgia typeface.</p>
<h2>Sans-serif Typefaces</h2>
<p>Sans-serif typefaces do not have
slabs at the ends of strokes.</p>
The markup in
this example would create the following document outline:
1. Type Design
1. Serif
Typefaces
+ text paragraph
1. Baskerville
1. Description
+ text paragraph
2. History
+ text paragraph
2. Georgia
+ text paragraph
2. Sans-Serif
Typefaces
+ text paragraph
By default, the
headings in our example will be displayed in bold text, starting in very large
type for h1s, with each consecutive level in smaller text.
Adding Hidden Comments
You can leave notes in the source document for yourself and others by
marking them up as comments.
Anything you put between comment tags (<!-- -->) will not display in
the browser and will not have any effect on the rest of the source.
<!-- This is a comment -->
<!-- This is a
multiple-line comment
that ends here. -->
Comments are useful for labeling and organizing long documents, particularly
when they are shared by a team of developers. In this example, comments are
used to point out the section of the source that contains the navigation..
Example:
<!-- This is
a paragraph that George wrote -->
<h3>Georgia</h3>
<p>Description
and history of the Georgia typeface.</p>
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Note: Bear
in mind that although the browser will not display comments in the web page,
readers can see
them
if they “view source,” so be sure that the comments you leave are appropriate
for everyone. It’s probably a good idea just to strip out notes to your fellow
developers before the site is published. It cuts some bytes off the file size
as well.
Empty elements
A handful of elements, however, do not have text content because they are
used to provide a simple directive. These elements are said to be empty. The image
element (<img>) is an example of such an element; it tells the browser to
get an image file from the server and insert it at that spot in the flow of the
text. Other empty elements include the line break (<br>), thematic breaks
(<hr>), and elements that provide information about a document but don’t affect
its displayed content, such as the meta element that we used earlier.
Example
<p>1005 Gravenstein Highway
North<br>Sebastopol, CA 95472</p>
<h3>Georgia<hr></h3>
<p>Description<hr>
and history of the Georgia typeface.
<h1><img
src="filename.png" alt="File title"></h1>
Now test this code.
<!DOCTYPE
html>
<html>
<head>
<meta charset
="utf-8">
<title>Black
Goose Bistro</title>
</head>
<body>
<!-- This
document was written by George -->
<h1>Black
Goose Bistro</h1>
<h2>The
Restaurant</h2>
<p>The Black
Goose Bistro offers casual lunch and dinner fare in
a hip atmosphere.
The menu changes regularly to highlight the
freshest
ingredients.</p>
<h1>Catering
Services</h1>
<p>You have
fun... <hr>we'll do the cooking.<br> Black Goose catering can
handle events from
snacks for bridge club to elegant corporate
fundraisers.
<h1><img
src="imagefile.jpg" alt="file name">image name</h1>
<h3>Georgia<hr></h3>
<p>Description<hr>
and history of the Georgia typeface.
<h2>Location
and Hours</h2>
<h5>Seekonk,
Massachusetts;
Monday through
<br>Thursday 11am to 9pm, Friday and Saturday, 11am to
midnight.</h5>
</body>
</html>
Happy coding
seasoning at codelent…..
Drop ur comment if
you are confused or you need to ask questions.
You can also join
also on facebook , whatsapp and twitter for more information
0 comments:
Post a Comment