SlideShare a Scribd company logo
1 of 4
Download to read offline
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

What's hot (20)

Html heading
Html headingHtml heading
Html heading
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
Adding text in html
Adding text in htmlAdding text in html
Adding text in html
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
 
Learn HTML Easier
Learn HTML EasierLearn HTML Easier
Learn HTML Easier
 
Basics of Html
 Basics of Html Basics of Html
Basics of Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
CLASS VII COMPUTERS HTML
CLASS VII COMPUTERS HTML CLASS VII COMPUTERS HTML
CLASS VII COMPUTERS HTML
 
HTML basics
HTML basicsHTML basics
HTML basics
 
Html Study Guide
Html Study GuideHtml Study Guide
Html Study Guide
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
Html 5
Html 5Html 5
Html 5
 
Beginning html
Beginning  htmlBeginning  html
Beginning html
 
Html basics
Html basicsHtml basics
Html basics
 
Html training slide
Html training slideHtml training slide
Html training slide
 
Html programing
Html programingHtml programing
Html programing
 
Modulo4- Html-Guia
Modulo4- Html-GuiaModulo4- Html-Guia
Modulo4- Html-Guia
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
 
Html
HtmlHtml
Html
 

Similar to Html basics 3 font align (20)

SDP_HTML.pptx
SDP_HTML.pptxSDP_HTML.pptx
SDP_HTML.pptx
 
Html
HtmlHtml
Html
 
Standard html tags
Standard html tagsStandard html tags
Standard html tags
 
html.pdf
html.pdfhtml.pdf
html.pdf
 
TagsL1.pptx
TagsL1.pptxTagsL1.pptx
TagsL1.pptx
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
wpsession9.pptx
wpsession9.pptxwpsession9.pptx
wpsession9.pptx
 
Html1
Html1Html1
Html1
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
Web Design-III IT.ppt
Web Design-III IT.pptWeb Design-III IT.ppt
Web Design-III IT.ppt
 
Week 4 Lecture Part 2
Week 4 Lecture Part 2Week 4 Lecture Part 2
Week 4 Lecture Part 2
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
 
HTML Tutorial
HTML TutorialHTML Tutorial
HTML Tutorial
 
H T M L Tutorial
H T M L TutorialH T M L Tutorial
H T M L Tutorial
 
htmltag-140317152334-phpapp01.pptx
htmltag-140317152334-phpapp01.pptxhtmltag-140317152334-phpapp01.pptx
htmltag-140317152334-phpapp01.pptx
 
Computer language - HTML tags
Computer language - HTML tagsComputer language - HTML tags
Computer language - HTML tags
 
Coding
CodingCoding
Coding
 

More from H K

Assignment4
Assignment4Assignment4
Assignment4H K
 
Assignment3
Assignment3Assignment3
Assignment3H K
 
Induction
InductionInduction
InductionH K
 
Solution3
Solution3Solution3
Solution3H K
 
Solution2
Solution2Solution2
Solution2H K
 
Mid-
Mid-Mid-
Mid-H K
 
Assignment4
Assignment4Assignment4
Assignment4H K
 
Assignment4
Assignment4Assignment4
Assignment4H K
 
Dm assignment3
Dm assignment3Dm assignment3
Dm assignment3H K
 
Proof
ProofProof
ProofH K
 
Resolution
ResolutionResolution
ResolutionH K
 
Assignment description
Assignment descriptionAssignment description
Assignment descriptionH K
 
Dm assignment2
Dm assignment2Dm assignment2
Dm assignment2H K
 
Set
SetSet
SetH K
 
Dm assignment1
Dm assignment1Dm assignment1
Dm assignment1H K
 
Logic
LogicLogic
LogicH K
 
Introduction
IntroductionIntroduction
IntroductionH K
 
Assignment 2 sol
Assignment 2 solAssignment 2 sol
Assignment 2 solH K
 
Assignment sw solution
Assignment sw solutionAssignment sw solution
Assignment sw solutionH K
 
Violinphoenix
ViolinphoenixViolinphoenix
ViolinphoenixH K
 

More from H K (20)

Assignment4
Assignment4Assignment4
Assignment4
 
Assignment3
Assignment3Assignment3
Assignment3
 
Induction
InductionInduction
Induction
 
Solution3
Solution3Solution3
Solution3
 
Solution2
Solution2Solution2
Solution2
 
Mid-
Mid-Mid-
Mid-
 
Assignment4
Assignment4Assignment4
Assignment4
 
Assignment4
Assignment4Assignment4
Assignment4
 
Dm assignment3
Dm assignment3Dm assignment3
Dm assignment3
 
Proof
ProofProof
Proof
 
Resolution
ResolutionResolution
Resolution
 
Assignment description
Assignment descriptionAssignment description
Assignment description
 
Dm assignment2
Dm assignment2Dm assignment2
Dm assignment2
 
Set
SetSet
Set
 
Dm assignment1
Dm assignment1Dm assignment1
Dm assignment1
 
Logic
LogicLogic
Logic
 
Introduction
IntroductionIntroduction
Introduction
 
Assignment 2 sol
Assignment 2 solAssignment 2 sol
Assignment 2 sol
 
Assignment sw solution
Assignment sw solutionAssignment sw solution
Assignment sw solution
 
Violinphoenix
ViolinphoenixViolinphoenix
Violinphoenix
 

Recently uploaded

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Recently uploaded (20)

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

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?