Scribd
Upload
38 views44 pages

Lec 3

The document discusses various HTML elements used for formatting text including headings, paragraphs, blockquotes, horizontal rules, and divisions. It describes elements like <h1>-<h6>, <p>, <blockquote>, <hr>, <div>, and <span> and provides examples of how to use them.

Uploaded by

Hemalatha B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views44 pages

Lec 3

The document discusses various HTML elements used for formatting text including headings, paragraphs, blockquotes, horizontal rules, and divisions. It describes elements like <h1>-<h6>, <p>, <blockquote>, <hr>, <div>, and <span> and provides examples of how to use them.

Uploaded by

Hemalatha B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

OUTLINE

 Paragraph(p)
 Headings(h1,h2,h3,h4,h5 and h6)
 Quotations elements(block quotes and q)
 Horizontal rules(hr)
 The center element
 Div
 Span

UNIT-I BASICS OF WEB TECHNOLOGIES 1


The <p> elements
• Value for the align attribute syntax:
<p align=“center”>
• Optional for ending tag
• Extra space between the <p> element and the
previous block of the text
• Double quotes used for value to the align attribute are
optional in HTML and required in XHTML

UNIT-I BASICS OF WEB TECHNOLOGIES 2


Headings
• Insert heading in the web page
• Six types of predefined headings are
<h1>……..<h6> ending tag </h1>…</h6>
• Ending tag is mandatory
• <h1> is biggest and strongest font
• <h6> is smallest and weakest font
• Align attributes in heading tag are “left”, ”right”,
”center”, ”justify”
• Left is default value.

UNIT-I BASICS OF WEB TECHNOLOGIES 3


The block-quote element
• Starting and ending tag <blockquote> …
</blockquote>
• Inserting long quotation into a web page
• It start from new line with extra white space before
and after the element and on the left and right of the
element
• Html 4.01 recommends an attribute called cite, but
most browsers do not implement this attribute.
• The value of this attribute should be the URL
(internet addresses) of the source from where the
quotation was borrowed.

UNIT-I BASICS OF WEB TECHNOLOGIES 4


Sample program
<html>
<head></head>
<body>
Tate Collections:
<blockquote
cite="http://www.ironspider.ca/webdesign101/htmlhistory.htm”>A
markup language combines text as well as coded instructions on
how to format that text and the term "markup" originates from the
traditional practice of 'marking up' the margins of a paper manuscript
with printer's instructions. Nowadays, however, if you mention the
term 'markup' to any knowledgeable web author, the first thing they
are likely to think of is 'HTML’.
</blockquote>
Visit http://www.ironspider.ca/webdesign101/htmlhistory.htm
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 5


The <q> element
• Starting and ending tag is <q>…</q>
• Designed for inline quotation
• Does not start on new line
• Html 4.0 is implemented not in Netscape navigator
• Can accept the cite attribute

UNIT-I BASICS OF WEB TECHNOLOGIES 6


Sample program
<html>
<body>
Constant in Brancusi used to say:
<q> I give you pure joy! </q>
</body>
</html>

UNIT-I BASICS OF WEB TECHNOLOGIES 7


Sample example
<html>
<head></head>
<body>
<p align="center"> first paragraph in the paragraph
text</p>.
<p>default paragraph type left</p><br>
<h1>heading 1</h1><br>
<h6 align="center">heading 6</h6><br>
<blockquote cite="http://www.gmail.com">block quote text
present in this text</blockquote><br>
<q>I Love India</q>
</body></html>
UNIT-I BASICS OF WEB TECHNOLOGIES 8
Output

UNIT-I BASICS OF WEB TECHNOLOGIES 9


HORIZONTAL RULES
• Horizontal rule tag is <hr>
• Doesn’t require an ending tag
• Starts on new line
• In XHTML replaced by <hr/>
• It can have more than one attribute

UNIT-I BASICS OF WEB TECHNOLOGIES 10


Attributes for<hr> tag
• Align • Size
– Possible values are “left”, – thickness of the rule in
”right”, ”center”, ”Justify” pixels.
– Default value is “center” – Default value is “2”
• Width • No shade
– Positive integer – width of – rule is flat rule and doesn’t
the line in pixels have a shadow
– example: width=“100” • Color
– Percentage-width of the – Default value is “black”
parent block (positive – IE implements this and
integer between 1 and 100 changes the style of rule to
followed by %) noshade
– example: width=“50%”
– Default value is 100%

UNIT-I BASICS OF WEB TECHNOLOGIES 11


The <center> element
• Center the contents
• Eg:
text, images, horizontal rules
• Syntax
<hr width=10%>

UNIT-I BASICS OF WEB TECHNOLOGIES 12


//To center a bundle of consecutive horizontal lines of differing
widths:
<html>
<body>
<center>
<hr width = 10%>
<hr width = 40%>
<hr width = 70%>
<hr width = 100%>
<hr width = 70%>
<hr width = 40%>
<hr width = 10%>
</center>
</body>
</html>
UNIT-I BASICS OF WEB TECHNOLOGIES 13
The <div> element
 Two kinds of element in HTML:
1. Block-level elements
 starting on a new line
 Eg: <p> or <hr> elements
2. In-line elements
 rendered on the same line
 Eg: <b> or <q> elements
 The <div> element is the most generic block-level element
and can be used in variety of ways.
 <div> elements accepts the attribute (Possible values: “left”,
”right”, ”center”, ”justify” and default is “left”)
 The title attribute – to display a tooltip, when mouse remains
over the content of the <div> block for few seconds.

UNIT-I BASICS OF WEB TECHNOLOGIES 14


Sample program
<html>
<body>
<div align=“right”> division using right align</div>
<div align=“center”> division using center align</div>
<div title=“This is a tooltip!”>division with tooltip, to view please
move the cursor over this block to see the title</div>
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 15


The <span> element
• It is most generic inline element.
• Best to attach CSS(cascading style
sheet)
• <div>element also apply to the <span>
element
• Main difference is <div> is a block-level
element, whereas <span> is inline
element
• Doesn’t accept the align attribute, as it is
in-line element.
UNIT-I BASICS OF WEB TECHNOLOGIES 16
Sample program
<html>
<body>
A complete documentation about
<span title = “http://www.w3.org”> the specifications of
HTML </span>
Can be found on the internet.
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 17


Sample example
<html>
<head>
<body>Horizontal rule
<hr align="center" width="50%" size="5" noshade color="red" >
Horizontal rule using align,width,size and noshade text.<br>
<center><hr width=10%></center>
<div align="right"> division using right align</div><br>
<div title="this is a tooltip!">division with tooltip</div>
<span title="http://www.gmail.com">gmail </span><br>
<br>
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 18


Output

UNIT-I BASICS OF WEB TECHNOLOGIES 19


• Preformatted text blocks
- (pre, plaintext and xmp)

• Phrase Elements
- (em, strong, dfn, code, samp, kbd,
var, cite, abbr, acronym)

UNIT-I BASICS OF WEB TECHNOLOGIES 20


<pre> tag:
•Indicates a block of text where all HTML tags are ignored

•The HTML <pre> tag is used for indicating preformatted


text. The code tag surrounds the code being marked up.

•Browsers normally render pre text in a fixed-pitched font,


with whitespace in tact, and without word wrap.

UNIT-I BASICS OF WEB TECHNOLOGIES 21


<xmp> tag:
• When writing in HTML, the <xmp> tag was used to
designate that a section of text was an HTML example.
• Anything typed between its opening and closing tags was
not interpreted as HTML and displayed in monospaced font.
• That is HTML Example Element (<xmp>) renders text
between the start and end tags without interpreting the
HTML in between and using a monospaced font.
• The HTML2 specification recommended that it should be
rendered wide enough to allow 80 characters per line.
• It has been deprecated since HTML3.2 and was not
implemented in a consistent way. It was completely
removed from the language in HTML5.

UNIT-I BASICS OF WEB TECHNOLOGIES 22


Eg:

<html>
<body>

<xmp>italic font should be <b> marked up <b> using


the <i> and </i> tags.</xmp> <i> and </i>

</body>
</html>

UNIT-I BASICS OF WEB TECHNOLOGIES 23


<plaintext> tag:
• HTML Plaintext Element (<plaintext>) renders
everything following the start tag as raw text, without
interpreting any HTML.
• There is no closing tag, since everything after it is
considered raw text.
• If the <plaintext> element is the first element on the
page (other than any non-displayed elements), do not
use HTML tag at all.
• Eg:
<plaintext> hai
//Type the above statement alone and save it as
“sample.html” and run O/P will be
hai

UNIT-I BASICS OF WEB TECHNOLOGIES 24


Sample example
<html>
<head>
<body>preformatted text
<pre> The HTML <pre> tag is used for indicating preformatted text. The
code tag surrounds the code being marked up</pre>
<xmp>
<div align="right">
division block is in center</div></xmp><br>
<plaintext><div align="left">
division block is in left</div></plaintext>
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 25


Phrase Element
• It allow to add specific meaning to a
section of the document.
• Elements are rendered differently by
different browser
• Elements are
 <em></em> (to emphasize) italic text style
 <strong></strong> bold text style
 <dfn>…</dfn> first appearance of the concept. IE in the italic
text style
<code>…</code> insert a fragment of computer program
code, in monospace font style

UNIT-I BASICS OF WEB TECHNOLOGIES 26


 <samp>..</samp> to insert the output of an
application, in monospace font style
 <kbd>..</kbd> to insert a computer command
that user should type, in monospace font style
 <var>…</var> to insert variables of the
computer program, in italic text style
 <cite>…</cite> to insert a reference to its
source document, in italic text style
 <abbr>..</abbr> to insert an abbreviation by
HTML 4.01, but not implemented
 <acronym>…</acronym> to insert an acronym,
recommended by HTML 4.01, but not
implemented
UNIT-I BASICS OF WEB TECHNOLOGIES 27
Emphasized Text
• Anything that appears within <em> ...</em> element
is displayed as emphasized text.
<html>
<body> <p>The following word uses a
<em>emphasized</em> typeface.</p> </body>
</html>
O/P
The following word uses a emphasized typeface.

UNIT-I BASICS OF WEB TECHNOLOGIES 28


Marked Text
• Anything that appears with-
in <mark>...</mark> element, is
displayed as marked with yellow ink.
• Eg: <body>
<p>The following word has been <mark>
marked </mark> with yellow </p> </body>
O/P
The following word has been
marked with
yellow.

UNIT-I BASICS OF WEB TECHNOLOGIES 29


Text Abbreviation

• You can abbreviate a text <body>


by putting it inside <p>My best friend's name is
opening <abbr> and <abbr
closing</abbr> tags. title="Abhishek">Abhy</abb
• If present, the title r>.</p>
attribute must contain </body>
this full description and O/P
nothing else.
My best friend's name is
Abhy.

UNIT-I BASICS OF WEB TECHNOLOGIES 30


Acronym Element

• The <acronym> element <body>


allows you to indicate <p>This chapter covers
that the text between marking up text in <acronym
<acronym> and title=“eXtensible Hypertext
</acronym> tags is an Markup
acronym. language”>XHTML</acrony
• At present, the major m>.</p>
browsers do not change </body>
the appearance of the O/P
content of the <acronym>
element. This chapter covers marking
up text in XHTML.

UNIT-I BASICS OF WEB TECHNOLOGIES 31


Text Direction

• The <bdo>...</bdo> <body>


element stands for Bi- <p>This text will go left to
Directional Override and it right.</p>
is used to override the <p><bdo dir="rtl">This text
current text direction. will go right to
left.</bdo></p>
</body>
O/P
This text will go left to right.
.tfel ot thgir og lliw txet sihT

UNIT-I BASICS OF WEB TECHNOLOGIES 32


Special Terms
• The <dfn>...</dfn> element (or HTML Definition
Element) allows you to specify that you are introducing a
special term.

• It's usage is similar to italic words in the midst of a


paragraph.

• Typically, you would use the <dfn> element the first time
you introduce a key term.

• Most recent browsers render the content of a <dfn>


element in an italic font.
The following word is a special term.

UNIT-I BASICS OF WEB TECHNOLOGIES 33


Eg:
<body>

<p>The following word is a


<dfn>special</dfn> term.</p>

</body>

UNIT-I BASICS OF WEB TECHNOLOGIES 34


Computer Code
Any programming code to appear on a
Web page should be placed
inside<code>...</code> tags. Usually the
content of the <code> element is
presented in a monospaced font, just like
the code in most programming books.

UNIT-I BASICS OF WEB TECHNOLOGIES 35


Eg:
<body>
<p>Regular text. <code>This is
code.</code> Regular text.</p>
</body>

O/P
Regular text. This is code. Regular text.

UNIT-I BASICS OF WEB TECHNOLOGIES 36


Keyboard Text
• When you are talking about computers, if you
want to tell a reader to enter some text,you can
use the <kbd>...</kbd> element to indicate
what should be typed in, as in this example.
<body>
<p>Regular text. <kbd>This is inside kbd
element</kbd> Regular text.</p>
</body>
</html>
O/P
Regular text. This is inside kbd element Regular
text.
UNIT-I BASICS OF WEB TECHNOLOGIES 37
Programming Variables

• This element is usually used in conjunction with


the <pre> and <code>elements to indicate that the
content of that element is a variable.
• Eg:
<body>
<p><code>document.write("<var>user-name</var>")</
code></p>
</body>
</html>
This will produce following result:
document.write("user-name")

UNIT-I BASICS OF WEB TECHNOLOGIES 38


Program Output
• The <samp>...</samp> element indicates sample
output from a program, and script etc. Again, it is
mainly used when documenting programming or
coding concepts.
• Eg:
<body>
<p>Result produced by the program is <samp>Hello
World!</samp></p>
</body>
</html>
This will produce following result:
Result produced by the program is Hello World!

UNIT-I BASICS OF WEB TECHNOLOGIES 39


Address Text
• The <address>...</address> element is
used to contain any address.
• Eg:
<body>
<address>388A, Road No 22, Jubilee Hills -
Hyderabad</address>
</body>
</html>
This will produce following result:
388A, Road No 22, Jubilee Hills - Hyderabad
UNIT-I BASICS OF WEB TECHNOLOGIES 40
Sample Example
<html>
<head>
<body>Phrase element
<dfn>HTML</dfn>
<em>Hyper Text Markup Language</em><br>
<kbd>date</kbd><br>
<samp>current date is 25/08/2015</samp><br>
<code>int sum(int x, int y){return x+y;}</code><br>
The variable <var>x</var> and <var>y</var>
<strong>Don’t forget to add a <cite>statement</cite> in
the above statement</strong>
</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 41


Output

UNIT-I BASICS OF WEB TECHNOLOGIES 42


TRAIN YOUR BRAIN

https://docs.google.com/forms/d/e/1FAIpQLSc_mTYF08FLhu5Y
90uCmGpnrl8z76mfCbvMzJWpxSTGIrXNzw/viewform

UNIT-I BASICS OF WEB TECHNOLOGIES 43


UNIT-I BASICS OF WEB TECHNOLOGIES 44

You might also like