Y8 T1W4 Lesson 1: Text Alignment

Align Attribute

Changing the text alignment of headings and paragraphs on HTML.

First, we need to learn

about Attribute in HTML

Attribute is a special keyword

used inside the opening tag

to control the tag's behaviour.

keyword="behaviour"

Above is the structure of an attribute.

Don't forget to use equal symbol = after the keyword,

and put the behaviour in the quotation marks " ".

<tag keyword="behaviour">

Above is how it looks like if we write

an opening tag complete with its attribute.

Don't forget to put space after the tag,

before we begin writing the attribute.

Today, we'll learn how to use

attributes to change text alignment.

How to use attributes to change text alignment

in a paragraph or in a heading in HTML?

<p>INSERT TEXT HERE</p>

This is how we usually write Paragraph tag, right?

What if we want to change its alignment?

align

…is the keyword of the attribute used

for changing the text alignment.

align="…"

…is how the attribute itself would look like.

Let's try applying it to a Paragraph 👉

<p align="…">INSERT TEXT HERE</p>

Example of how the opening tag would look like

if we want to have a paragraph with certain alignment.

Changing Text Alignment on HTML

• Attribute Keyword:

  align

• Attribute Behaviour:

  - center

  - justify

  - right

  - left (default alignment)

<p align="center">INSERT TEXT HERE</p>

Changing the text alignment

of a paragraph aligned to the centre.

<p align="justify">INSERT TEXT HERE</p>

Changing the text alignment

of a paragraph aligned to both sides.

<p align="right">INSERT TEXT HERE</p>

Changing the text alignment

of a paragraph aligned to right side.

<p align="left">INSERT TEXT HERE</p>

Changing the text alignment

of a paragraph aligned to left side.

<p>INSERT TEXT HERE</p>

<p align="…">INSERT TEXT HERE</p>

Without using attribute

vs with using attribute.

What if I want to make a medium-sized heading with center text alignment, and it would say: HELLO WORLD

Please type down the HTML tag for that heading

and then submit to Zoom chat :)

<h3 align="center">HELLO WORLD</h3>

What if I want to make a medium-sized heading

with center text alignment, and it would say: HELLO WORLD

What if I want to make a big-sized heading with right text alignment, and it would say: THANK YOU ALL

Please type down the HTML tag for that heading

and then submit to Zoom chat :)

<h1 align="right">THANK YOU ALL</h1>

What if I want to make a big-sized heading

with right text alignment, and it would say: THANK YOU ALL