![Page 1: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/1.jpg)
MMGD0204
Web Application Technologies
Chapter 3
HTML - TEXT FORMATTING
![Page 2: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/2.jpg)
Chapter 3 – HTML Text Formatting
Headings
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the largest heading and <h6> defines
the smallest heading.
![Page 3: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/3.jpg)
Chapter 3 – HTML Text Formatting
Headings - Attribute
Attribute Value Description
Align Left, center,
right, justify
Specifies the alignment of
a heading
![Page 4: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/4.jpg)
Chapter 3 – HTML Text Formatting
Headings – Example 1
<h1>The Internet</h1>
<h2>Introduction</h2>
![Page 5: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/5.jpg)
Chapter 3 – HTML Text Formatting
Headings – Example 2
<h1 align=“center”>The Internet</h1>
<h2>Introduction</h2>
![Page 6: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/6.jpg)
Chapter 3 – HTML Text Formatting
Paragraph Tag
• The <p> tag defines a paragraph.
• The p element automatically creates some space
before and after itself.
![Page 7: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/7.jpg)
Chapter 3 – HTML Text Formatting
Paragraph Tag - Attribute
Attribute Value Description
Align Left, center,
right, justify
Specifies the alignment of
the text within a paragraph
![Page 8: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/8.jpg)
Chapter 3 – HTML Text Formatting
Paragraph Tag - Example
<p>
The Internet is a global network connecting millions of
computers. More than 100 countries are linked into
exchanges of data, news and opinions.
</p>
![Page 9: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/9.jpg)
Chapter 3 – HTML Text Formatting
Paragraph Tag - Example
<p align=„center‟>
The Internet is a global network connecting millions of
computers. More than 100 countries are linked into
exchanges of data, news and opinions.
</p>
![Page 10: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/10.jpg)
Chapter 3 – HTML Text Formatting
Paragraph Tag - Example
<p align=„justify‟>
The Internet is a global network connecting millions of
computers. More than 100 countries are linked into
exchanges of data, news and opinions.
</p>
![Page 11: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/11.jpg)
Chapter 3 – HTML Text Formatting
Style Tag
Tag Description
<b> Bold
<i> Italic
<u> Underline
<sup> Superscript
<sub> Subscript
<big> Big
<small> Small
![Page 12: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/12.jpg)
Chapter 3 – HTML Text Formatting
Style Tag - Example
• Bold
Welcome to <b>FTMS College</b>
![Page 13: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/13.jpg)
Chapter 3 – HTML Text Formatting
Style Tag - Example
• Italic
Welcome to <i>FTMS College</i>
![Page 14: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/14.jpg)
Chapter 3 – HTML Text Formatting
Style Tag - Example
• Underline
Welcome to <u>FTMS College</u>
![Page 15: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/15.jpg)
Chapter 3 – HTML Text Formatting
Font-Style Tag - Example
• Superscript
1<sup>st</sup> January, 2011
![Page 16: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/16.jpg)
Chapter 3 – HTML Text Formatting
Font-Style Tag - Example
• Subscript
H<sub>2</sub>O
![Page 17: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/17.jpg)
Chapter 3 – HTML Text Formatting
Lists
• HTML supports ordered, unordered and definition
lists.
![Page 18: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/18.jpg)
Chapter 3 – HTML Text Formatting
Unordered Lists
• An unordered list is a list of items.
• The list items are marked with bullets (typically small
black circles).
• An unordered list starts with the <ul> tag and ends
with </ul> tag.
• Each list item starts with the <li> tag and ends with
</li> tag.
• Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
![Page 19: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/19.jpg)
Chapter 3 – HTML Text Formatting
Unordered Lists - Attribute
Attribute Value
type Circle, square, disc
![Page 20: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/20.jpg)
Chapter 3 – HTML Text Formatting
Unordered Lists – Example 1
Drinks:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
![Page 21: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/21.jpg)
Chapter 3 – HTML Text Formatting
Unordered Lists – Example 2
Drinks:
<ul type=“square”>
<li>Coffee</li>
<li>Milk</li>
</ul>
![Page 22: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/22.jpg)
Chapter 3 – HTML Text Formatting
Unordered Lists – Example 2
Drinks:
<ul type=“circle”>
<li>Coffee</li>
<li>Milk</li>
</ul>
![Page 23: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/23.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists
• An ordered list is also a list of items.
• The list items are marked with numbers.
• An ordered list starts with the <ol> tag and ends wih
</ol> tag.
• Each list item starts with the <li> tag and ends with
</li> tag.
• Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
![Page 24: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/24.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists - Attribute
Attribute Value
type A,a,I,i
start Number eg: 1,5,10 etc…
![Page 25: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/25.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 1
Drinks:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 26: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/26.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 2
Drinks:
<ol type=“A”>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 27: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/27.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 3
Drinks:
<ol type=“a”>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 28: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/28.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 4
Drinks:
<ol type=“I”>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 29: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/29.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 5
Drinks:
<ol type=“i”>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 30: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/30.jpg)
Chapter 3 – HTML Text Formatting
Ordered Lists – Example 5
Drinks:
<ol start=“4”>
<li>Coffee</li>
<li>Milk</li>
</ol>
![Page 31: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/31.jpg)
Chapter 3 – HTML Text Formatting
Nested Lists - Example
Drinks:
<ol>
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ol>
![Page 32: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/32.jpg)
Chapter 3 – HTML Text Formatting
Definition Lists
• A definition list is not a list of single items.
• It is a list of items (terms), with a description of each
item (term).
• A definition list starts with a <dl> tag (definition list).
• Each term starts with a <dt> tag (definition term).
• Each description starts with a <dd> tag (definition
description).
• Inside the <dd> tag you can put paragraphs, line
breaks, images, links, other lists, etc.
![Page 33: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/33.jpg)
Chapter 3 – HTML Text Formatting
Definition Lists - Example
<dl>
<dt>Computer</dt>
<dd> An electronic device for storing and processing data,
typically in binary form, according to instructions given to it in
a variable program </dd>
</dl>
![Page 34: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/34.jpg)
Chapter 3 – HTML Text Formatting
Line Break
• The <br /> tag inserts a single line break.
• The <br /> tag is an empty tag which means that it
has no end tag.
![Page 35: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/35.jpg)
Chapter 3 – HTML Text Formatting
Line Break – Example
This text contains<br />a line break.
![Page 36: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/36.jpg)
Chapter 3 – HTML Text Formatting
Horizontal Rule
• The <hr /> tag creates a horizontal line in an HTML page.
• The hr element can be used to separate content in an
HTML page.
• The <hr /> tag is an empty tag which means that it has no
end tag.
![Page 37: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/37.jpg)
Chapter 3 – HTML Text Formatting
Horizontal Rule
Attribute Value
align left, center, right
size pixels
width pixels
![Page 38: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/38.jpg)
Chapter 3 – HTML Text Formatting
Horizontal Rule – Example 1
<p>This is some text.</p>
<hr />
<p>This is some text.</p>
![Page 39: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/39.jpg)
Chapter 3 – HTML Text Formatting
Horizontal Rule – Example 2
<p>This is some text.</p>
<hr width=“300” align=“center”/>
<p>This is some text.</p>
![Page 40: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/40.jpg)
Chapter 3 – HTML Text Formatting
Comment
• The comment tag is used to insert a comment in the
source code.
• Comments will be ignored by the browser.
• You can use comments to explain your code, which can
help you when you edit the source code at a later date.
![Page 41: Web Application Technologies - Web... · Chapter 3 –HTML Text Formatting Headings - Attribute Attribute Value Description Align Left, center, right, justify Specifies the alignment](https://reader034.vdocuments.mx/reader034/viewer/2022042411/5f29fdc4dcd77d7e102b9804/html5/thumbnails/41.jpg)
Chapter 3 – HTML Text Formatting
Comment – Example
<!--This is a comment. Comments are not displayed in the
browser-->
<p>This is a paragraph.</p>