Scribd
Upload
21 views

HTML Basic Tags

The document discusses HTML headings and paragraphs. It explains that there are six levels of HTML headings from <h1> to <h6>, with <h1> being the largest. Headings occupy the full screen width and have a line of space above and below. Paragraphs are created using <p> tags and also have a line of space above and below. Attributes like style can be added to headings and paragraphs to customize fonts and colors. The <pre> tag is also introduced to preserve formatting of text.

Uploaded by

Aamir Malik
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

HTML Basic Tags

The document discusses HTML headings and paragraphs. It explains that there are six levels of HTML headings from <h1> to <h6>, with <h1> being the largest. Headings occupy the full screen width and have a line of space above and below. Paragraphs are created using <p> tags and also have a line of space above and below. Attributes like style can be added to headings and paragraphs to customize fonts and colors. The <pre> tag is also introduced to preserve formatting of text.

Uploaded by

Aamir Malik
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Basic Tags

 It is important to use headings to show the document structure.

 HTML has six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>.

 <h1> headings should be used for main headings and has the
largest font-size, followed by <h2> headings, then the less
important headings <h3>, and so on.

 While displaying any heading, browser adds one line before and
one line after that heading, and occupies the full screen width.

Heading tags
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Hello GEHU </h1>
<h2>Hello GEHU </h2>
<h3>Hello GEHU </h3>
<h4>Hello GEHU </h4>
<h5>Hello GEHU </h5>
<h6>Hello GEHU </h6>
</body>
</html>

Example
 Each HTML heading has a default size. However, you can specify
the size for any heading with the style attribute, using the CSS
font-size property:

 Attributes are the additional information about the HTML


elements(HTML tags).

 Attributes are written inside the opening tag of the element being
used, as shown below:
<tagname style="property:value;"> Content </tagname>

 The property is a CSS property like font-size. The value is a CSS


value like 60 px.

Bigger Headings
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the
font-size property.</p>

</body>
</html>

Example
Paragraph Tag: The <p> tag offers a way to structure
your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a
closing </p> tag as shown below in the example:

Note: While displaying any paragraph, browser adds


one line before and one line after that paragraph and
occupies the full screen width.

HTML Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p style="color: blue">Here is a first paragraph of text.</p>

<p>
<h2 style="color: red">Here is the heading of the second paragraph.</h2>
<p style="color: red">Here is the main text of the second paragraph.</p>
</p>

<p style="color: green">Here is a third paragraph of text.</p>


</body>
</html>
Example
 You cannot be sure how HTML will be displayed.
 Large or small screens, and resized windows will
create different results.
 With HTML, you cannot change the output by
adding extra spaces or extra lines in your HTML
code.
 The browser will remove any extra spaces and extra
lines when the page is displayed:

HTML Display
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier New), and it preserves
both spaces and line breaks.

Example
<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

</body>
</html>

Preserve Formatting
Thank you

You might also like