Scribd
Upload
13 views

WP Lecture 4 HTML II

ok

Uploaded by

nomanpakistan0332
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

WP Lecture 4 HTML II

ok

Uploaded by

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

WEB

PROGRAMMING

LECTURE # 4
Web Design
Development
HTML Headings
Headings are defined with the <h1> to <h6> tags.
 H1 headings should be main headings, followed by h2
headings, then the less important h3, and so on.
Web Design
Development
 HTML heading
 Bigger Heading
 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:
Web Design
Development
 HTML Paragraph
 HTML paragraph starts from <p>
 A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before
and after a paragraph
Web Design
Development
 HTML Horizontal Rules
The <hr> tag creates a horizontal line in an HTML
page.
Can be used to separate content.
<p><h2>New Website</h2>.. </p>
<hr>
Coming Soon!!!
<hr>
Web Design
Development
 HTML Paragraphs
The HTML <p> element defines a
paragraph.

<p>My Paragraph</p>
<p>Second Paragraph</p>
 HTML Line Breaks
The HTML <br> element defines a line
break.
Web Design
Development
 HTML Paragraphs
 HTML <pre> tag
 The HTML <pre> element defines preformatted text.
 The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both
spaces and line breaks:
Web Design
Development
HTML Styling and Formatting

 HTML Styling
 Changing the default style of an HTML element, can be
done
with the style attribute.
 <body style="background-color:lightgrey">

 The HTML Style Attribute


 The HTML style attribute has the following syntax:

style="property:value"
Web Design
Development
HTML Styling and Formatting

 HTML Text Color


The color property defines the text color to be used for an
HTML element:
 <h1 style="color:blue">This is a heading</h1>

 HTML Fonts
 <h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
Web Design
Development
HTML Styling and Formatting

 HTML Text Size


 The font-size property defines the text size to be used for
an
HTML element:

 <h1 style="font-size:300%">This is a heading</h1>

 <p style="font-size:160%">This is a paragraph.</p>


Web Design
Development
HTML Styling and Formatting

HTML Bold Formatting


<p><b>This text is bold</b></p>
HTML Italic Formatting
<p><i>This text is italic</i></p>
HTML Emphasized Formatting
The HTML <em> element defines emphasized
text.
<p><em>This text is emphasized</em>.</p>
Web Design
Development
HTML Styling and Formatting
 HTML Small Formatting
 <h2>HTML <small>Small</small> Formatting</h2>

 HTML Marked Formatting


The HTML <mark> element defines marked or highlighted
text:
 <h2>HTML <mark>Marked</mark> Formatting</h2>
 HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
<p>My favorite color is <del>blue</del> red.</p>
Web Design
Development
HTML Styling and Formatting

 HTML Subscript Formatting


 The HTML <sub> element defines subscripted text.

 <p>This is <sub>subscripted</sub> text.</p>

 HTML Superscript Formatting


The HTML <sub> element defines subscripted
text.
<p>This is <sup>superscripted</sup>
text.</p>
Web Design
 Development
HTML Quotations

 HTML <q> for Short Quotations



The HTML <q> element defines a short quotation. Browsers
usually
insert quotation marks around the <q> element.

 <q>My favorite color is BLUE </q>


Web Design
Development
HTML Quotations

 HTML <address> for Contact Information


 The HTML <address> element defines contact
information
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564,
Disneyland<br>
USA
</address>
Web Design
Development
HTML Quotations

 HTML <bdo> for Bi-Directional Override


 The HTML <bdo> element defines bi-directional override. If
your browser supports bdo, the text will be written from right
to left.

 <bdo dir="rtl">This text will be written from right to left


</bdo>

You might also like