Scribd
Upload
61 views

5-HTML-headings-paragraph-font - Body Tags-Physical and Logical Styles-06-01-2024

The document discusses various formatting options for working with text in documents, including headings, paragraphs, fonts, lists, and more. It covers topics such as applying different heading levels, setting paragraph alignment, modifying font features like size and color, creating ordered and unordered lists, and nesting lists. Formatting techniques include applying physical styles like bolding and italics as well as logical styles like sample output and keyboard text.

Uploaded by

giridar869
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

5-HTML-headings-paragraph-font - Body Tags-Physical and Logical Styles-06-01-2024

The document discusses various formatting options for working with text in documents, including headings, paragraphs, fonts, lists, and more. It covers topics such as applying different heading levels, setting paragraph alignment, modifying font features like size and color, creating ordered and unordered lists, and nesting lists. Formatting techniques include applying physical styles like bolding and italics as well as logical styles like sample output and keyboard text.

Uploaded by

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

Working with Text

 Working with Headings


 Working with Paragraphs
 Applying Fonts
 Setting the Font Size
 Setting the Font Color
 Applying Physical Styles
 Applying Logical Styles
 Using the Preformatted Text Element
 Using the Blockquote Element
 Setting Document Margins
 Creating an Ordered List
 Modifying Ordered List Styles
 Modifying an Ordered List’s Starting Character
 Creating an Unordered List
 Modifying Bullet Styles
 Nesting Lists
 Creating Definition Lists

34 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Headings
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six

ALIGN="position" --left (default), center or right

35 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Headings

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>

36 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


37 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024
Paragraph
 The <p> tag defines a paragraph. Using this tag places a blank
line above and below the text of the paragraph.
 Attributes:
 ID=p1
 NAME=“Introduction”
 ALIGN="position" (left, center, right,justify)
 Fully-specified text uses <P> and </P>
 But </P> is optional.
 Multiple <P>'s do not create blank lines.
 Use <BR> for blank line.

38 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Paragraph - Example
<HTML><BODY>
<P align=“justify”>Here is some text Here is some text Here is some text Here is some text
Here is some text Here is some text Here is some text Here is some text Here is some
text Here is some text Here is some text Here is some text Here is some text Here is
some text Here is some text Here is some textHere is some text Here is some text Here is
some text Here is some text</P>
<P ALIGN="center"> Centered text Centered text Centered text Centered textCentered
text Centered textCentered textCentered textCentered textCentered textCentered
textCentered textCentered textCentered textCentered textCentered textCentered
textCentered textCentered textCentered textCentered textCentered text</P>
<p></p><p></p>
<P ALIGN="right"> Right-justified text Right-justified text Right-justified text Right-
justified text Right-justified text Right-justified text Right-justified text Right-justified
text Right-justified text Right-justified text Right-justified text Right-justified text Right-
justified text Right-justified text Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY></HTML>

39 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


40 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024
Line Break
 A line break ends the line you are currently on and resumes
on the next line. Placing <BR> within the code is the same
as pressing the return key in a word processor.
<p>Sincerely,<br>
<br> Sincerely,
<br>
Amirta Iyer <br> Amirta Iyer
Class Representative </p> Class Representative

41 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Horizontal Rule
 Use the <HR> tag to display lines across the screen. Note: the
horizontal rule tag has no ending tag.
 Align attribute – left ,right and center
 Width attribute – in pixels
 Size attribute – in pixels %
Example:
<hr align=right> Use
<hr width=10 > Them
<hr align=center> center line
<hr size=15> size line

42 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Body Tag
 The body tag serves as the element containing all the content for the
website.
<body bgcolor=“yellow” background=“sample.jpg” text=“red”
topmargin=10 leftmargin=20 link=“green” alink=“black” vlink=“blue”
>
 leftmargin Sets a lefthand margin for your body element.
 topmargin Sets a margin along the top of your body element
 The text attribute sets the text color of all text contained within the
body tags.
 background attribute specifies a background-image as URL or path
for an HTML page
 We may also specify base colors for active ,visted and unvisted
links.

43 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024


Fonts
The <font> tag is used to add style, size, and color to the text on your
web page.
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<p> We’ve made this word three times
<big><big><big>bigger</big></big></big> by nesting it
inside three sets of big tags.</p>
<p> <font size=”5”>We’ve made this word three times
<small><small><small>smaller</small></small></small> by
nesting it inside three sets of small tags.</font></p>
Attribute= "Value" Description
size= "Num. Value 1-7" Size of your text, 7 is biggest
"rgb,name,or
color= Change font color
hexidecimal"
face= "name of font" Change the font type
44 09-01-2024
R.Vijayan / Asso Prof / SITE / VIT
Formatting Text(physical &logical styles)
 <B>Bold</B><BR>  Bold
 <I>Italic</I><BR>  Italic
 <U>Underlined</U><BR>  Underlined
 Subscripts: f<SUB>0</SUB> +  Subscripts: f0 + f1
f<SUB>1</SUB><BR>
 Superscripts: x2 + y2
 Superscripts: x<SUP>2</SUP> +
 Smaller
y<SUP>2</SUP><BR>
 <SMALL>Smaller</SMALL><BR>  Bigger

 <BIG>Bigger</BIG><BR>  Emphasized Text

 <EM>Emphasized Text</EM><BR>  Teletype (Monospaced)


 <TT>Teletype (Monospaced)</TT><BR>  Computer Code Text
 <CODE>Computer Code Text</CODE><BR>  Strike Through
 <STRIKE>Strike Through</STRIKE><BR>  Bold Italic
 <B><I>Bold Italic</I></B><BR>  abcdefDeletefhkfjdkhfdhgf
 <p>My favorite color is <del>blue</del>  gfhgfhgfhInsertgfhfghgf
<ins>red</ins>!</p>
 abcdef<DEL>Delete</DEL>fhkfjdkhfdhgf<BR>
 gfhgfhgfh<INS>Insert</INS>gfhfghgf<BR>
R.Vijayan / Asso Prof / SITE / VIT
45 09-01-2024
Formatting Text(logical styles)
 <SAMP>Sample
Output</SAMP><BR>
 <KBD>Keyboard Text</KBD><BR>  Sample Output
 <DFN>Definition</DFN><BR>  Keyboard Text
 <VAR>Variable</VAR><BR>  Definition
 <CITE>Citation</CITE><BR>  Variable
 <ACRONYM TITLE="Java  Citation
Development Kit">JDK  JDK Acronym
Acronym</ACRONYM> or <abbr>
 <address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

46 R.Vijayan / Asso Prof / SITE / VIT 09-01-2024

You might also like