I want to make a website in urdu, I have googled it and found some unicode method, Now what my question is that how these unicodes are working or how can I extract these codes from the urdu sentences.
Following is the code snippet which is used to display the urdu in the website.
<HTML>
<HEAD>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<TITLE>Ghazal</TITLE>
<STYLE TYPE="text/css"><!--
H1 {
color: #007c78;
font-family: "Urdu Nastaliq Unicode";
font-size: 60px; }
#urdu {
font-family: "Urdu Nastaliq Unicode";
font-size: 32px; }
}
--></STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<bdo dir=rtl>
<center>
<table border=0>
<tr><td align=right>
<h1 align=right>
ﻏﹷﺰﹶﻝ <br>
</h1>
<span id=urdu>
<P>
ﺷﺎﻡﹺ ﻏﹷﻢ ﻛﮯ
ﺍﺳﹻﻴﺮ ﮨﹷﻴﮟ
ﮨﹷﻢ ﻟﻮﮒ <br>
ﺳﹹﺒﺢﹺ ﻧﹷﻮ
ﻛﮯ ﺳﹷﻔﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺑﹹﺠﮫ ﭼﹹﲀ
ﮨﹷﮯ ﭼﹷﺮﺍﻍ
ﮔﻮ ﺩﹺﻝ ﰷ <br>
ﭘﮭﹻﺮ ﺑﮭﹻﯽ
ﺭﻭﺷﹷﻦ
ﺿﹷﻤﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﻳﺎﺱﻮ ﻏﹷﻢ
ﻛﹻﯽ ﮨﹷﮯ ﮔﹷﺮ
ﻛﻮﺋﹻﯽ
ﻗﹻﻴﻤﹷﺖ <br>
ﭘﮭﹻﺮ ﺗﻮ ﺳﹷﺐ
ﺳﮯ ﺍﻣﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺍﻳﻚ ﻣﹷﻮﮨﯘﻡ
ﺳﺎ
ﺗﹷﺼﹷﻮﹽﹸﺭ
ﮨﹷﻴﮟ <br>
ﺍﻳﻚ
ﻣﹷﺪﹽﮬﹷﻢ
ﻟﹷﻜﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﻗﺎﺗﹻﻠﻮﮞ ﻛﮯ
ﻧﹷﮕﹷﺮ ﻣﻴﮟ
ﺍﺋﮯ ﻳﺎﺭﻭ <br>
ﺍﮨﻞﹺ ﺩﹺﻝ ﻛﮯ
ﻣﹹﺸﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺍﻳﻚ ﻧﹷﻈﹷﺮ
ﻛﹻﯽ ﮨﹷﻤﻴﮟ
ﺑﮭﹻﯽ ﺩﮮ ﺩﻭ
ﺑﮭﹻﻴﻚ <br>
ﺭﺍﻩ ﭼﹷﻠﺘﮯ
ﻓﹷﻘﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﭘﮭﹻﺮ
ﻣﹻﻠﻴﮕﺎ ﻧﹷﻪ
ﺳﺎﺩﻩ ﺩﹺﻝ
ﮨﹷﻢ ﺳﺎ <br>
ﻓﹻﯽ ﺯﹶﻣﺎﻧﻪ
ﻧﹷﺰﹺﻳﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺧﯘﺩ ﮨﹷﻤﻴﮟ
ﺑﮭﹻﯽ ﮨﹷﮯ
ﺁﺳﺮﺍ ﺩﹶﺭﰷﺭ
<br>
ﻣﹷﺖ ﻛﹷﮩﻮ
ﺩﹶﺳﺘﮕﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺯﹶﻓﹷﺮ ﺍﻣﹷﺮ
<br>
</span>
</td></tr>
</table>
</body>
</html>
An image is also attached below showing the html page of this code.
I have found this way from (U - Trans)
the characters you are seeing are not Unicode, they are HTML Entities representing Unicode characters.
Your code doesn't need to have those characters to display the Urdu. All you need, is the charset meta tag that you have in the <head> section
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
if you are using a modern text editor , like Brackets.io or Sublime, you can directly enter the urdu text in your code, provided that you are saving your html files with UTF-8 Encoding.
You can use "Urdu Nigar Unicode" software to write Urdu and copy the text then paste on your favorite web / html editor. Save it and voila you will have an Urdu Web Page.
Related
How browser shows "my" code
<html>
<head>
<title> chatter|app </title>
<style>
.styled_dates {
font-size: 11px;
}
</style>
</head>>
<body>
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p>
<p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
<p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
<p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>
<h2> Regular </h2>>
</body>
</html>
Hello. Noobie here.
What I want to do: see the dates next to "Neversea, Deutschland, Erasmus, Work", not underneath them.
Neversea 11 07/2022
not...
Neversea
11/07/2022
How can I do that?
Thank you
The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)
In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.
.styled_dates {
font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
<strong>Neversea</strong>
<span class="styled_dates">11/07/2022</span>
</p>
<p>
<strong>Deutschland</strong>
<span class="styled_dates">23/05/2019</span>
</p>
<p>
<strong>Erasmus</strong>
<span class="styled_dates">23/06/1999</span>
</p>
<p>
<strong>Work</strong>
<span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>
This is the .html code and the now embedded .css code. I cant figure out why it's not detecting the .css code at all (btw I have my own reason why I am not using an stylesheet)
<!DOCTYPE html>
<html>
<head>
<title> Minu esimene veebileht </title>
<style>
{
background-color: darkblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Tahoma;
font-size: 19px;
}
</style>
</head>
<body>
<p> </p>
</body>
<h1> Lemmik mootorrattad </h1>
<p> <strong> Mootorratas </strong> kõnekeeles ka tsikkel, mototsikkel; van. mototsüklett on liiklusseaduse mõistes külghaagisega e. külgkorviga või külghaagiseta kaherattaline mootorsõiduk, mille sisepõlemismootori töömaht on üle 50 cm³ või valmistajakiirus on üle 45 km/h. </p>
<h2> <em> Honda </em> mootorrattad </h2>
<p> Honda mootorratad on ühed parimad </p>
<p> <a target="_blank" href="http://bikes.honda.ee/"> Klõpsake siin </a>, et minna Honda leheküljele </p>
<p> <a target="_self" href="https://et.wikipedia.org/wiki/Mootorratas"> Klõpsake siia </a>. See viib teid mootorrataste vikipeedia leheküljele </p>
<p> Sellel pildil on Honda mootorratas. </p>
<img src="src="https://www.driverknowledgetests.com/resources/wp-content/uploads/2014/08/hyosung-gtr-motorbike.jpg" "alt =" mootorratas "/>
</html>
For your background color, I've assuming it's for the body, in which case you need to set the code like this:
body { background-color: darkblue; }
Also make sure you put all your content inside these tags:
<body> </body>
So your code should look like this :
<!DOCTYPE html>
<html>
<head>
<title> Minu esimene veebileht </title>
<style>
body {
background-color: darkblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Tahoma;
font-size: 19px;
}
</style>
</head>
<body>
<h1> Lemmik mootorrattad </h1>
<p> <strong> Mootorratas </strong> kõnekeeles ka tsikkel, mototsikkel; van. mototsüklett on liiklusseaduse mõistes külghaagisega e. külgkorviga või külghaagiseta kaherattaline mootorsõiduk, mille sisepõlemismootori töömaht on üle 50 cm³ või valmistajakiirus on üle 45 km/h. </p>
<h2> <em> Honda </em> mootorrattad </h2>
<p> Honda mootorratad on ühed parimad </p>
<p> <a target="_blank" href="http://bikes.honda.ee/"> Klõpsake siin </a>, et minna Honda leheküljele </p>
<p> <a target="_self" href="https://et.wikipedia.org/wiki/Mootorratas"> Klõpsake siia </a>. See viib teid mootorrataste vikipeedia leheküljele </p>
<p> Sellel pildil on Honda mootorratas. </p>
<img src="src="https://www.driverknowledgetests.com/resources/wp-content/uploads/2014/08/hyosung-gtr-motorbike.jpg" "alt =" mootorratas "/>
</body>
</html>
I'm making an image to ascii art converter, which outputs an HTML file to allow formatting and easy zooming. The problem, however, is that when zoomed out in Chrome, the ascii image's height decreases less than its width and the image becomes distorted (too wide). I've tried playing with the line-height property to no avail. In Edge and IE there's no issue - zooming successfully keeps the aspect ratio.
Here's an example of the converter's HTML output with a low resolution, but the problem is accentuated the higher the resolution. Any help would be appreciated!
<!DOCTYPE html>
<html>
<body style="
COLOR:#000000;
TEXT-ALIGN:center;
FONT-SIZE:1px;
">
<p style="
white-space:pre;
FONT-FAMILY:Courier New;
FONT-SIZE:1.171875rem;
LETTER-SPACING:0.15em;
LINE-HEIGHT:0.400000em;
">
`MMMMMMMMMMMMMMM#BQBMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMME%SMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMc~~~1MMMMMMMMMMMMMMMMMMMMMMMMMMM#K$#G)//IQMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMM&.`./5MMMMMMMMMMMMMMGJ?DMMMMMMB9{~~~(D+)//:A#MMMMMMMMMMMM` <br>
`MMMMMMMMMMMA)(.~~:#MMMMMMMMMMMMM%...+MMQdJ'~~~~~~~/+/'//'+KMMMMMMMMMMM` <br>
`MMMMMMMMMM3~/./+CHMMMMMMMMMMMMMM$~...:+~...~.~~~~~~/:5C:!'(HMMMMMMMMMM` <br>
`MMMMMMMMM4.7.`.~KMMMMMMMMMMMMMMH!.``........~~~~~~~~L!C547'?MMMMMMMMMM` <br>
`MMMMMMMMB``{```/"MMMMMMMMMMM"7~````.7.+........~~~~~!&c25/''%MMMMMMMMM` <br>
`MMMMMMMM!``'``.(BMMMMMMMMMMM:`````~':/L./'....~//~~~~4!&7//'(H#MMMMMMM` <br>
`MMMMMMQ:``````/CMMMMMMMMMMMMC`````.2``J.1~....~.~~~~~/5{////':'EMMMMMM` <br>
`MMMMMM2``````.)BMMMMMMMMMMMMD``.)``~``c.~:....~..~~~~~/////'//(!QMMMMM` <br>
`MMMMMC```````~CMMMMMMMMMMMMMQ.~$Q:```/.``/.......~~~~~/////~'')+"MMMMM` <br>
`MMMM$````````/GQMMMMMM#EQMMMM#%&!{````````.....~..~~~/~~/////'(+{BMMMM` <br>
`MMMM~````'````.'#MMME?LL$M#HSC+~~`````..........~.~~~.~~///'/''):LMMMM` <br>
`MMM"````.+`````~%MMM5&CC9SU&3J````````````......~~..~~~~/////+7(+:BMMM` <br>
`MMM/`).'+.`````/$MMMEJCCCCCCCJ````````````........~.~~~~/////C$+++5MMM` <br>
`MMK`.c:'/```/~/!##d313CCCCCCCC`````````````.``....~~~~~~~////12I)+7#MM` <br>
`MM:````+```/I$599L&&CCCCCCCCCC.``````````````......~~~~~~//(//9&)+:$MM` <br>
`MQ.```````.+CCCC&CCCCCCCCCCCCC/``````````````....~//.~~~~//+7/+4(+:2MM` <br>
`M%.```````~7CCCC&CCCCCCCCCCCCC7```````````./~2..~~...~~~~~//J?1U(+:{BM` <br>
`M!````````~1CCC33CCCCCCCC2:/~``````````.+c.{`+..~....~~~~~///2DI(){{KM` <br>
`M~````````~1CCCJJCCCCC7~` `````.`````/S~`L'/`+`.~..../~~~~/////''((:&M` <br>
`#`````````.//~....{CC2 `````.``````~4`.9~`(`..~../~/~~~/////(''+:1M` <br>
`K``````````````` `(CCC' `````.```````/3`)5~/`...///.~/~~///'')))(:{#` <br>
`&``.```````````` /&CCC: `````````````{c/~S.`.......~/~~~////':)):7R` <br>
`1``7/``````````` .CJ!~ `..`.`````````J(`/``.......~~~~~/////+)):!G` <br>
`+`./)~````````` ````````````````.````.......~~~//~///')+):7%` <br>
`'`.+!I````````` .``````````````````.........~~//~////'')!c79` <br>
`~`./.``.``````` `'/+C~ .````````````````...`..~...~//~~~////''!cI79` <br>
`/`.:&.````````` ?. .D. .```````````````.````..~.~~~.~/~/////'(c2I75` <br>
`/``+./````````` ." J7 ```.``.`````````.````..~~...~~~////'/'(??274` <br>
`/``14.``````````~S 7! ``.````.````````..```.......~~~/~/////({I?7U` <br>
`(`...````````````$. J. ```````````````````.``.......~~~///~/'/+???7%` <br>
`1````````````````~J. //./`````````.````````.```....'/~~~~~~///'/+{22{D` <br>
`J````````````````//?`+%&/`````````.``````..````..~?9.~~~~~////'')+cc7H` <br>
`S````````````````?I+``````````````.......````~:7..(G~~~~~~//'('():{{7B` <br>
`E`````````````````````````````````.``````````~4{..{%(~~~~~////'(+:{{1M` <br>
`M.````````````````````````````````.``````````.7C.//C!~~~~////'()+:!7CM` <br>
`M+````````.```````````````````````.``````````./$.{.!&~~~~////'()+:!{%M` <br>
`ML`)+`````.```````````````````````.`````````...G+'.'%/~~~//'/')++{{7EM` <br>
`MB`~`/````.`````````````.`````````.````...``...4J..+J'~~////)'++:7!IMM` <br>
`MM/~c/.```.`````````````.``````````.``.```.`...?L/.~~~~~////++)+:7!"MM` <br>
`MM4`~~?/``.````````````````````````...````.`..~+~.~~~/~////'()+:{52#MM` <br>
`MMQ.~+!.```.`````````.````````````````````.`.....~~.~/////''()+:&LCMMM` <br>
`MMM?.~/)````....`````7/`:++.``````````.........~..~~~//////()):7%UAMMM` <br>
`MMM#...(````````.````+7/c`3'`````````.````.......~~~~'////()++:JJLMMMM` <br>
`MMMM?``..```````````/+!~{)3~````````.```......~.~~~~~~///'()++{73HMMMM` <br>
`MMMMQ~.`````.````````7+I~!&.````````.``........~.~~~////'(+:+:7JSMMMMM` <br>
`MMMMM%..````.```````~!:.`I1c.```````..........~..~~////'')++:{7&BMMMMM` <br>
`MMMMMM{.````.````````(+/~c~?+~``````~..........~~CU%?/''(++::7!DMMMMMM` <br>
`MMMMMM#~````.````````/~~`+/.`````............~~~~4S%L'')++:{{!&MMMMMMM` <br>
`MMMMMMMR..`...````````````````...``..~......~~~~///7C'()7{:{72QMMMMMMM` <br>
`MMMMMMMM$...`......`````````..`......./...~~~~~////22()++:{7cBMMMMMMMM` <br>
`MMMMMMMMMU//....```````.```............~~.~~~~////'3!)++:{{!EMMMMMMMMM` <br>
`MMMMMMMMMM9/:..~.......................~~~~~/////''4+++:::!RMMMMMMMMMM` <br>
`MMMMMMMMMMM"/'..~...................~~~~~~~/////''(++++:{1#MMMMMMMMMMM` <br>
`MMMMMMMMMMMMd:+~.~................~..~~~~//////'''(+++:72BMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMBcc/........)7:'/.~~~~~~~~/'////''(()++::{LQMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMQ9/~~~~~.~~~/:~~//~~///''//)//'''()+7?1?KMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMME:~///~~~~)(~~~/!~///////'/''()+:7J!4#MMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMG+~~//~~(:)c:{9(///////''()++?IICEMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMG7/////'{(/)'/////''(++::+:73RMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMB5+'//////'/('''(():+++I%#MMMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMMMMB$C!(/'''2?J:))+c5d#MMMMMMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMMMMMMMMQBHG$%%$KR#MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM` <br>
</p>
</body>
</html>
I want to show the below html content centered on the page:
Date : xxxx/xx/xx
Time : 12:22
xx : xxxxx
xxxxx : xxxxx
x : xxxxxxx
code:
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<br>
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
<p style="text-align:right">Head of the Department</p>
</body>
The result of my code:
Day:Friday
Date:December 5,1997
Time:3.00pm
Lr:Dr.Nicolas Lam
Venue:WC 311
use table tag to do proper alignment
Here's the core for what you want to do
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<b>Community College(Autonomous)</b>
<br>
<span>HKUSPACE</span>
<br>
<b>Department of Computer Science</b>
<br>
<b>Seminar on HTML Programming</b>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<p style="text-align:center">
<table align="center">
<tr>
<td>Date</td>
<td> : </td>
<td>xxxx/xx/xx</td>
</tr>
<tr>
<td>Time</td>
<td> : </td>
<td>12:22</td>
</tr>
<tr>
<td>xx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>x</td>
<td> : </td>
<td>xxxxxxx</td>
</tr>
</table>
</p>
<p style="text-align:right">Head of the Department</p>
</body>
<html>
First a couple of small notes:
Don't use inline styling. Put your styles into a <style> block or into a separate CSS file loaded with a <link> tag.
The <b> tag is deprecated in HTML 5. You should use another tag, such as <em> or <strong>. I have used <strong> in my example below.
To align things the way you want, you need to use a table. Here is a working example with the above items incorporated, and using a table to format the 3-column block you are trying to achieve.
I also made a fiddle.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
border: 1px solid black;
}
.table-div {
display: table;
margin: 0 auto;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<strong>Community College(Autonomous)</strong>
<br>
<span>HKUSPACE</span>
<br>
<strong>Department of Computer Science</strong>
<br>
<strong>Seminar on HTML Programming</strong>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<div class="table-div">
<table class="left-align">
<tr>
<td>Day</td><td>:</td><td>Friday</td>
</tr>
<tr>
<td>Date</td><td>:</td><td>December 5, 1997</td>
</tr>
<tr>
<td>Time</td><td>:</td><td>3.00pm</td>
</tr>
<tr>
<td>Speaker</td><td>:</td><td>Dr. Nicolas Lam</td>
</tr>
<tr>
<td>Venue</td><td>:</td><td>WC 311</td>
</tr>
</table>
</div>
<p class="right-align">Head of the Department</p>
</body>
</html>
Easier way to do this is put the data you want to center in some block element and center that block instead.
I changed from text-align: center; to text-align: left; and added margin: auto; and display: table; to div element.
(and also moved text-align to div too)
So you must change from:
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
to:
<div style="margin: auto; display: table; text-align: left;">
<p>
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</div>
and you will get the result as you want :)
Note: you can change the width to any value that you want.
result (image)
edited: some typo and change from setting width to use table instead.
Put all of the text inside a div and center the div
Put all of the text inside an additional <p> and center the new <p>
<p style="text-align:center">
<p style="text-align:left">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</p>
PS: don't use inline styles
I need to set space for each line <br> tag is taking huge.
<font color="white">
ani <br> </br>
hna <br> </br>
Raj <br> </br>
Parya <br> </br>
Sith <br> </br>
Sududa <br> </br>
</font>
Why don't you use <p> tags for each line instead of double <br>s? Or use an <ul>? You'll have more control over the layout.
But if you must use <br> use line-height and only one <br> for each line.
It seems to me that you are trying to close each <br> tag, this isn't possible and instead you are creating two line breaks. Remove one of these and you'll get normal line breaks:
http://jsfiddle.net/LMXNY/
http://jsfiddle.net/QFHPh/
<html>
<head>
<style>
p {
line-height: 1.5em;
}
</style>
</head>
<body>
<p>
this is <br />
a test<br />
of good text spacing
</p>
</body>
</html>
<pre style="color:white">
ani
hna
Raj
Parya
Sith
Sududa
</pre>
By golly, if it looks like a list and acts like a list, it may in fact be a list! Change the bottom margin for the list item to change the spacing between items.
<style type="text/css">
ul {
color: white;
}
li {
margin-bottom: 6px;
}
</style>
<ul>
<li>ani</li>
<li>hna</li>
<li>Raj</li>
<li>Parya</li>
<li>Sith</li>
<li>Sududa</li>
</ul>
You could use line-height property in your CSS.
First thing,
you don't use
<br> </br>
It is only:
<br />
Then on your problem, use the following
<p style="line-height: 20px;">ani
</p><p style="line-height: 20px;">hna
</p><p style="line-height: 20px;">Raj
</p><p style="line-height: 20px;">Parya
</p><p style="line-height: 20px;">Sith
</p><p style="line-height: 20px;">Sududa
</p>
Increase/decrease the number in line-height ('20'px), to increase/decrease the space between the lines respectively.