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
