SlideShare a Scribd company logo
Lecture 4

Today we will learn
   • Using the Font tag
   • Align the text

   Font means a specific size and style of the text. Size means the width of the text, and
   style means whether the text is Arial, Times New Roman, etc.

   Type the following code in notepad and save the file as .html.
   <html>
          <head>
                  <title>
                           Using the Font tag
                  </title>
          </head>
          <body>
          Here is normal text without any font tag. <br>
          <html>
          <head>
                  <title>
                           Using the Font tag
                  </title>
          </head>
          <body>
          Here is normal text without any font tag. <br>
          <font face="arial" size="4"> This is a text with font type Arial and font size
   4</font>
          </body>
   </html>
          </body>
   </html>

The output will be
Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Q) Try the above code with font Batang, and print the output?


You can also specify the color with the font tag. i.e. color is another attribute of the font
tag. For example
    Type the following code in notepad and save the file as .html.
    <html>
           <head>
                  <title>
                           Using the Font tag
                  </title>
</head>
           <body>
           Here is normal text without any font tag. <br>
           <html>
           <head>
                   <title>
                            Using the Font tag
                   </title>
           </head>
           <body>
           Here is normal text without any font tag. <br>
           <font face="arial" size="4" color=”blue”> This is a text with font type Arial
    and font size 4</font>
           </body>
    </html>
           </body>
</html>

The output will be
Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Align the text

        To align the text means whether the text will appear on the left of the page or
right of the page or center of the page.

Type the following code in notepad and save as .html file.
<html>
       <head>
              <title>
                       Using the Align tag
              </title>
       </head>
       <body>
              My name is Harshit Kumar
              <p>I am a student of University of Suwon</p>
       </body>
</html>

The output will be
My name is Harshit Kumar

I am a student of University of Suwon
If there was no <p> tag, then two statements “My name is Harshit Kumar” and “I am a
student of University of Suwon” would come one after the other on the same line.
Whereas <p> tag inserted a new line between the two statements, doing some what the
same as <br> tag.

If you notice the output very carefully there is some difference between <p> tag and <br>
tag.

Q) What is the difference between the <p> tag and <br> tag?

A) The difference is <p> tag inserts a double new line between two statements whereas
<br> tag inserts single new line between two statements. Actually <p> tag means
paragraph tag, and <p> tag indicates the browser to start a new paragraph.

Now let us come back to aligning the text

Type the following code and save as .html file.

<html>

         <head>

                <title>

                           Using the Align tag

                </title>

         </head>

         <body>

                My name is Harshit Kumar

                <p align="right">I am a student of University of Suwon</p>

         </body>

</html>

The output is

My name is Harshit Kumar

                                                   I am a student of University of Suwon
So, You can see that the second statement is aligned towards the right. Similarly the align
attribute of <p> tag can be used as ‘left’ or ‘center’.

Q) Try the above code with <p align=”left”> and also with <p align=”center”>? Show
what the output is?

More Related Content

PPT
HTML_Slideshow1
ldehn
 
PPTX
Html and its tags
Afrasiyab Haider
 
PDF
Best HTML Training &Coaching in Ambala
jatin batra
 
PPTX
Chapter 6 html
home
 
PPTX
215077679 introduction to HTML
Xolani Madlopha
 
PDF
SEO Training in Noida- Skyinfotech.in
Sky Infotech
 
PPT
HTML
Rahul Jain
 
HTML_Slideshow1
ldehn
 
Html and its tags
Afrasiyab Haider
 
Best HTML Training &Coaching in Ambala
jatin batra
 
Chapter 6 html
home
 
215077679 introduction to HTML
Xolani Madlopha
 
SEO Training in Noida- Skyinfotech.in
Sky Infotech
 

What's hot (20)

PPT
Html heading
saichii27
 
PPTX
HTML
Kalpana T
 
PPTX
Adding text in html
nobel mujuji
 
PPTX
Web topic 5 text formatting
CK Yang
 
PPTX
Learn HTML Easier
Karthick Mathesh
 
PPT
Basics of Html
Arslan Butt
 
PDF
Introduction to html
eShikshak
 
DOCX
CLASS VII COMPUTERS HTML
Rc Os
 
PPT
HTML basics
Akhil Kaushik
 
PPTX
Html Study Guide
vergetec
 
PPTX
Html 5
DanellaPatrick
 
PPT
Beginning html
Sharmaine Resuma
 
PPTX
Html basics
wakeel132
 
PPTX
Html training slide
villupuramtraining
 
PPSX
Html programing
Namrata dutt
 
PDF
Modulo4- Html-Guia
diogoa21
 
PPT
Html ppt by Fathima faculty Hasanath college for women bangalore
fathima12
 
PPTX
Html
NithyaD5
 
Html heading
saichii27
 
HTML
Kalpana T
 
Adding text in html
nobel mujuji
 
Web topic 5 text formatting
CK Yang
 
Learn HTML Easier
Karthick Mathesh
 
Basics of Html
Arslan Butt
 
Introduction to html
eShikshak
 
CLASS VII COMPUTERS HTML
Rc Os
 
HTML basics
Akhil Kaushik
 
Html Study Guide
vergetec
 
Beginning html
Sharmaine Resuma
 
Html basics
wakeel132
 
Html training slide
villupuramtraining
 
Html programing
Namrata dutt
 
Modulo4- Html-Guia
diogoa21
 
Html ppt by Fathima faculty Hasanath college for women bangalore
fathima12
 
Html
NithyaD5
 
Ad

Similar to Html basics 3 font align (20)

PPTX
SDP_HTML.pptx
Vani011
 
DOCX
Html
Subahu Jain
 
PDF
html.pdf
ArianSS1
 
PPTX
TagsL1.pptx
KrishRaj48
 
PPTX
wpsession9.pptx
Varsha Uchagaonkar
 
PPTX
Html1
learnt
 
PPTX
Basic Html Knowledge for students
vethics
 
PPT
Web Design-III IT.ppt
banu236831
 
PPTX
Week 4 Lecture Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
PDF
Html tutorial
Shankar D
 
PDF
Basic Html Notes
NextGenr
 
DOC
Html basics 1
H K
 
PPTX
HTML Tutorial
Gargee Chatterjee
 
PPTX
H T M L Tutorial
Gargee Chatterjee
 
PPTX
htmltag-140317152334-phpapp01.pptx
AgripinoVerderaJr2
 
PPSX
Computer language - HTML tags
Dr. I. Uma Maheswari Maheswari
 
PPT
Coding
jgalliher24
 
SDP_HTML.pptx
Vani011
 
html.pdf
ArianSS1
 
TagsL1.pptx
KrishRaj48
 
wpsession9.pptx
Varsha Uchagaonkar
 
Html1
learnt
 
Basic Html Knowledge for students
vethics
 
Web Design-III IT.ppt
banu236831
 
Week 4 Lecture Part 2
Katherine McCurdy-Lapierre, R.G.D.
 
Html tutorial
Shankar D
 
Basic Html Notes
NextGenr
 
Html basics 1
H K
 
HTML Tutorial
Gargee Chatterjee
 
H T M L Tutorial
Gargee Chatterjee
 
htmltag-140317152334-phpapp01.pptx
AgripinoVerderaJr2
 
Computer language - HTML tags
Dr. I. Uma Maheswari Maheswari
 
Coding
jgalliher24
 
Ad

More from H K (20)

PDF
Assignment4
H K
 
DOCX
Assignment3
H K
 
PDF
Induction
H K
 
PDF
Solution3
H K
 
PDF
Solution2
H K
 
DOCX
Mid-
H K
 
PDF
Assignment4
H K
 
PDF
Assignment4
H K
 
PDF
Dm assignment3
H K
 
PPT
Proof
H K
 
PDF
Resolution
H K
 
DOCX
Assignment description
H K
 
PDF
Dm assignment2
H K
 
PDF
Set
H K
 
PDF
Dm assignment1
H K
 
PPTX
Logic
H K
 
DOCX
Introduction
H K
 
PDF
Assignment 2 sol
H K
 
PDF
Assignment sw solution
H K
 
PDF
Violinphoenix
H K
 
Assignment4
H K
 
Assignment3
H K
 
Induction
H K
 
Solution3
H K
 
Solution2
H K
 
Mid-
H K
 
Assignment4
H K
 
Assignment4
H K
 
Dm assignment3
H K
 
Proof
H K
 
Resolution
H K
 
Assignment description
H K
 
Dm assignment2
H K
 
Set
H K
 
Dm assignment1
H K
 
Logic
H K
 
Introduction
H K
 
Assignment 2 sol
H K
 
Assignment sw solution
H K
 
Violinphoenix
H K
 

Recently uploaded (20)

PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
PDF
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
PDF
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
DevOps & Developer Experience Summer BBQ
AUGNYC
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
agentic-ai-and-the-future-of-autonomous-systems.pdf
siddharthnetsavvies
 
PDF
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
PPTX
C Programming Basics concept krnppt.pptx
Karan Prajapat
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PDF
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
This slide provides an overview Technology
mineshkharadi333
 
DevOps & Developer Experience Summer BBQ
AUGNYC
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
agentic-ai-and-the-future-of-autonomous-systems.pdf
siddharthnetsavvies
 
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
C Programming Basics concept krnppt.pptx
Karan Prajapat
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 

Html basics 3 font align

  • 1. Lecture 4 Today we will learn • Using the Font tag • Align the text Font means a specific size and style of the text. Size means the width of the text, and style means whether the text is Arial, Times New Roman, etc. Type the following code in notepad and save the file as .html. <html> <head> <title> Using the Font tag </title> </head> <body> Here is normal text without any font tag. <br> <html> <head> <title> Using the Font tag </title> </head> <body> Here is normal text without any font tag. <br> <font face="arial" size="4"> This is a text with font type Arial and font size 4</font> </body> </html> </body> </html> The output will be Here is normal text without any font tag. This is a text with font type Arial and font size 4 Q) Try the above code with font Batang, and print the output? You can also specify the color with the font tag. i.e. color is another attribute of the font tag. For example Type the following code in notepad and save the file as .html. <html> <head> <title> Using the Font tag </title>
  • 2. </head> <body> Here is normal text without any font tag. <br> <html> <head> <title> Using the Font tag </title> </head> <body> Here is normal text without any font tag. <br> <font face="arial" size="4" color=”blue”> This is a text with font type Arial and font size 4</font> </body> </html> </body> </html> The output will be Here is normal text without any font tag. This is a text with font type Arial and font size 4 Align the text To align the text means whether the text will appear on the left of the page or right of the page or center of the page. Type the following code in notepad and save as .html file. <html> <head> <title> Using the Align tag </title> </head> <body> My name is Harshit Kumar <p>I am a student of University of Suwon</p> </body> </html> The output will be My name is Harshit Kumar I am a student of University of Suwon
  • 3. If there was no <p> tag, then two statements “My name is Harshit Kumar” and “I am a student of University of Suwon” would come one after the other on the same line. Whereas <p> tag inserted a new line between the two statements, doing some what the same as <br> tag. If you notice the output very carefully there is some difference between <p> tag and <br> tag. Q) What is the difference between the <p> tag and <br> tag? A) The difference is <p> tag inserts a double new line between two statements whereas <br> tag inserts single new line between two statements. Actually <p> tag means paragraph tag, and <p> tag indicates the browser to start a new paragraph. Now let us come back to aligning the text Type the following code and save as .html file. <html> <head> <title> Using the Align tag </title> </head> <body> My name is Harshit Kumar <p align="right">I am a student of University of Suwon</p> </body> </html> The output is My name is Harshit Kumar I am a student of University of Suwon
  • 4. So, You can see that the second statement is aligned towards the right. Similarly the align attribute of <p> tag can be used as ‘left’ or ‘center’. Q) Try the above code with <p align=”left”> and also with <p align=”center”>? Show what the output is?