SlideShare a Scribd company logo
ВЭБИЙН
     ҮНДЭС
     Лекц – 2

Багш: Г.Өсөхжаргал
        LOGO




                     1
АГУУЛГА


 HTML Жагсаалт

 Толгой кодчилол

 Холболт үүсгэх




                    2
HTML ЖАГСААЛТ

 HTML – д үндсэн 3 төрлийн жагсаалт байна.
   Эрэмблэгдсэн буюу Ordered

   Эрэмблэгдээгүй буюу Unordered

   Тодорхойлолтын буюу Definition




                                              3
ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ

 Эрэмблэгдээгүй        жагсаалтын        өмнө
 тэмдэглэгээ гардаг.
 Эрэмблэгдээгүй       жагсаалт      нь   <ul>
 кодчилолоор тодорхойлогдоно.
 Бүх жагсаалтууд дотроо <li> кодчилолыг
 хэрэглэдэг.


                                             4
ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ


                Үр дүн:
<ul>

  <li> apple

  <li> banana

</ul>




                          5
ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ

 Эрэмблэгдээгүй жагсаалт нь 3 төрлийн
 тэмдэглэгээг үүсгэдэг.
   Disc – битүү дугуй

   Circle – хөндий дугуй

   Square – дөрвөлжин

   Жагсаалтын    төрлийг    type   шинж   чанарт
   тодорхойлж өгнө.


                                                   6
ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ
<html> <body>
<ul type=disc>
   <li>apple
   <li>banana
</ul>
<ul type=circle>
   <li>apple
   <li>banana
</ul>
<ul type=square>
   <li>apple
   <li>banana
</ul>
</body> </html>

                               7
ЭРЭМБЛЭГДСЭН ЖАГСААЛТ

 Эрэмблэгдэсэн   жагсаалт   нь   тоогоор
 дугаарлагдсан     байдаг    ба      <ol>
 кодчилолоор тодорхойлогдоно.




                                            8
ЭРЭМБЛЭГДСЭН ЖАГСААЛТ


               Үр дүн:
<ol>

 <li> apple

 <li> banana

</ol>




                          9
ЭРЭМБЛЭГДСЭН ЖАГСААЛТ

 Эрэмблэгдсэн    жагсаалт нь 5 төрлийн
 тэмдэглэгээг үүсгэдэг.
   <ol>   - Тоогоор
  A   – том үсгээр
  a   – жижиг үсгээр
  I   – том ром тоогоор
  i   – жижиг ром тоогоор
                                          10
<html> <body>   <ol type=I>
<ol>
                 <li>apple
 <li>apple
 <li>banana      <li>banana
</ol>           </ol>
<ol type=A>     <ol type=i>
 <li>apple
 <li>banana
                 <li>apple
</ol>            <li>banana
<ol type=a>     </ol>
 <li>apple      </body> </html>
 <li>banana
</ol>
                                  11
ТОДОРХОЙЛОЛТЫН ЖАГСААЛТ

 Тодорхойлолтын жагсаалт нь элементүүдийн
 жагсаалт биш харин томъёоллын тайлбарын
 жагсаалт нь.
 Тодорхойлолтын    жагсаалт    нь    <dl>
 кодчилолоор эхэлдэг. Томъёолол нь <dt>
 кодчилолоор, тайлбар нь <dd> кодчилолоор
 илэрхийлэгдэнэ.


                                             12
ТОДОРХОЙЛОЛТЫН ЖАГСААЛТ

<dl>
  <dt> Coffe </dt>
      <dd> Black, Hot drink </dd>
  <dt> Milk </dt>
      <dd> White, Cold drink </dd>
</dl>




                                     13
ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ

<ul>
  <li>a
  <li>a
      <ul>
      <li>b
      <li>b
      </ul>
</ul>


                              14
ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ

<ul>
  <li>a
  <li>a
      <ul type=square>
      <li>b
      <li>b
      </ul>
</ul>


                             15
ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ


<ol>
  <li>a
  <li>a
      <ol>
                <li>b
                <li>b
        </ol>
</ol>

                                 16
ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ

<ol>
  <li>a
  <li>a
      <ol type=A>
            <li>b
            <li>b
      </ol>
</ol>

                             17
ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ


<ol>
  <li>b
  <li>b
      <ul type=circle>
            <li>b
            <li>b
      </ul>
</ol>

                             18
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

 Урт текстийг товчлохын тулд хуудасны нэг
  хэсгээс нөгөөрүү хялбар шилжих anchor
  гэдэг.
 Anchor үүсгэхийн тулд <a> tag ашиглана.

 <a> tag-аар вэб хуудас дээрх бүх төрлийн
  холболт хийж болно.



                                             19
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

 <a> tag-ийн бичигдэх хэлбэр:

  <a href=“URL”> text </a>

Жишээ:

  <a href=“www.yahoo.com”> YAHOO </a>



Үр дүн:   YAHOO


                                        20
CREATING LINK БУЮУ ХОЛБОЛТ
             ҮҮСГЭХ

<a>    tag-аар      холбогдсон    хуудас    хаана
 нээгдэхийг     нь     target   шинж     чанараар
 тодорхойлно.
<a href=“URL” Target=“_blank”> гэж заавал
 холбогдсон хуудсыг шинэ цонхонд харуулна.
<a    href=“www.google.com”       target=“_blank”>
 Google </a>              Google

                                                      21
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

 <a> tag-ийн name шинж чанар нь текстийн
 хэсэгт нэр өгөөд тэр хэсэгрүү шилжихэд
 хэрэглэгдэнэ.
 Үүний тусламжтайгаар вэб хуудас үзэж
 суугаа хүн нэрлэгдсэн текстийн хэсэгрүү
 шууд шилжих боломжтой.



                                            22
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

 <a name=“нэр өгнө”> text </a>

 <a href=“#нэр”> text </a>

 Энэ нь вэб хуудсан дах текстийн эхнээс
  хуудасны     төгсгөлрүү     шууд   шилжих
  боломжийг олгодог.




                                              23
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

 Жишээ:

<html>

<body>

     <a href=“first.html”> Go to first page </a>

</body>

</html>


                                                   24
CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ

Жишээ: second.html

<html>

<body>

      <a href=“first.html”> Go to first page </a>

</body>

</html>

First.html хуудас үүсгэсэн байна.
                                                    25
Жишээ:

<html>

<body>

<a href=“#end” name=“begin”> Go to End </a>

……..

<a href=“#begin” name=“end”> Go to Begin
 </a>
</body>

</html>
                                               26
<HEAD> КОДЧИЛОЛ

 Head    кодчилол    нь    баримтын   тухай
 мэдээллийг агуулж байдаг. Head tag доторх
 мэдээлэл     вэб     харуулагч   програмаар
 харагдахгүй. <head> tag дотор дараах HTML
 tag-ууд бичигддэг.




                                               27
<HEAD> КОДЧИЛОЛ

 <base> - холболтуудыг тодорхойлно.

 <link>     -       хуудсууд   хоорондын      холболтыг
  тохируулна
 <title> - гарчгийг тодорхойлно.

 <style> - хэлбэр тодорхойлно.

 <script>       -     javascript   кодчилол     бичихэд
  хэрэглэнэ

                                                           28
<base>
<html> <head>

  <base target=“_blank”> </head>

<body>

  <a href=“www.yahoo.com”> YAHOO </a>

</body> </html>



  Энд бүх холболтууд шинэ хуудсанд гарна
  гэдгийг зааж байна.
                                           29
<link>

<html>

<head>

<link rel=“stylesheet” type=“text/css”
  href=“styles.css”>

</head>

  Хэлбэрийн хуудсууд буюу css файлуудыг
  холбоход ашиглана.

                                          30
<style>

<html> <head>           Тухайн   хуудасны аль ч
<style>
                        хэсэгт     <h1>   tag-ийг
  h1{color:red}
  h3{color:red}         ашиглахад <style> tag-д
</style> </head>        тодорхойлогдсоноор
<body>                  ашиглагдана.
       <h1>text</h1>
       <h3>text</h3>
</body> </html>

                                                    31

More Related Content

Viewers also liked

Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and BeyondUpgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
Ken Furlong
 
Marketing Automation Hacks: HubSpot
Marketing Automation Hacks: HubSpotMarketing Automation Hacks: HubSpot
Marketing Automation Hacks: HubSpot
Uberflip
 
Finding Potential Customers in Your Area
Finding Potential Customers in Your AreaFinding Potential Customers in Your Area
Finding Potential Customers in Your Area
Dana DiTomaso
 
Communicating Budgetary and Economic Information With Style at CBO
Communicating Budgetary and Economic Information With Style at CBOCommunicating Budgetary and Economic Information With Style at CBO
Communicating Budgetary and Economic Information With Style at CBO
Congressional Budget Office
 
Rethinking energy performance: increase app coverage, lower energy
Rethinking energy performance: increase app coverage, lower energyRethinking energy performance: increase app coverage, lower energy
Rethinking energy performance: increase app coverage, lower energy
Ericsson
 
Fight vaw
Fight vawFight vaw
Fight vaw
Rajeev Maharjan
 
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
Department for Communities and Local Government Local Digital Campaign
 
megan cousin
megan cousinmegan cousin
megan cousin
jenesehill
 
Top 10 Gift Ideas for Travelers
Top 10 Gift Ideas for TravelersTop 10 Gift Ideas for Travelers
Top 10 Gift Ideas for Travelers
Creative Lodging Solutions
 
Human and Machine
Human and MachineHuman and Machine
Human and Machine
OgilvyOne Worldwide
 
2014 Report: Medicines in Development for Arthritis
2014 Report: Medicines in Development for Arthritis2014 Report: Medicines in Development for Arthritis
2014 Report: Medicines in Development for Arthritis
PhRMA
 
"Beyond the Bubble" - Conservative Party Conference 2015
"Beyond the Bubble" - Conservative Party Conference 2015"Beyond the Bubble" - Conservative Party Conference 2015
"Beyond the Bubble" - Conservative Party Conference 2015
Ipsos UK
 
The Eindhoven Diabetes Education Simulator (e/DES)
The Eindhoven Diabetes Education Simulator (e/DES)The Eindhoven Diabetes Education Simulator (e/DES)
The Eindhoven Diabetes Education Simulator (e/DES)
Natal van Riel
 

Viewers also liked (13)

Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and BeyondUpgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
Upgrade your Metrics: Cumulative Flow Diagrams (CFDs) and Beyond
 
Marketing Automation Hacks: HubSpot
Marketing Automation Hacks: HubSpotMarketing Automation Hacks: HubSpot
Marketing Automation Hacks: HubSpot
 
Finding Potential Customers in Your Area
Finding Potential Customers in Your AreaFinding Potential Customers in Your Area
Finding Potential Customers in Your Area
 
Communicating Budgetary and Economic Information With Style at CBO
Communicating Budgetary and Economic Information With Style at CBOCommunicating Budgetary and Economic Information With Style at CBO
Communicating Budgetary and Economic Information With Style at CBO
 
Rethinking energy performance: increase app coverage, lower energy
Rethinking energy performance: increase app coverage, lower energyRethinking energy performance: increase app coverage, lower energy
Rethinking energy performance: increase app coverage, lower energy
 
Fight vaw
Fight vawFight vaw
Fight vaw
 
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
Building IoT solutions in Milton Keynes | Sarah Gonsalves | June 2015
 
megan cousin
megan cousinmegan cousin
megan cousin
 
Top 10 Gift Ideas for Travelers
Top 10 Gift Ideas for TravelersTop 10 Gift Ideas for Travelers
Top 10 Gift Ideas for Travelers
 
Human and Machine
Human and MachineHuman and Machine
Human and Machine
 
2014 Report: Medicines in Development for Arthritis
2014 Report: Medicines in Development for Arthritis2014 Report: Medicines in Development for Arthritis
2014 Report: Medicines in Development for Arthritis
 
"Beyond the Bubble" - Conservative Party Conference 2015
"Beyond the Bubble" - Conservative Party Conference 2015"Beyond the Bubble" - Conservative Party Conference 2015
"Beyond the Bubble" - Conservative Party Conference 2015
 
The Eindhoven Diabetes Education Simulator (e/DES)
The Eindhoven Diabetes Education Simulator (e/DES)The Eindhoven Diabetes Education Simulator (e/DES)
The Eindhoven Diabetes Education Simulator (e/DES)
 

More from Usukhuu Galaa

Se304
Se304Se304
Se205
Se205Se205
Is320
Is320Is320
Is201
Is201Is201
Rdbms bie daalt
Rdbms bie daaltRdbms bie daalt
Rdbms bie daalt
Usukhuu Galaa
 
Rdbms 300 test
Rdbms 300 testRdbms 300 test
Rdbms 300 test
Usukhuu Galaa
 
DB-2
DB-2DB-2
нийтлэл 1
нийтлэл 1нийтлэл 1
нийтлэл 1
Usukhuu Galaa
 
IT13
IT13IT13
IT14
IT14IT14
IT12
IT12IT12
IT11
IT11IT11
IT10
IT10IT10
IT-9
IT-9IT-9
IT-7
IT-7IT-7
IT-6
IT-6IT-6
IT-5
IT-5IT-5
IT-4
IT-4IT-4
IT-3
IT-3IT-3
IT-2
IT-2IT-2

More from Usukhuu Galaa (20)

Se304
Se304Se304
Se304
 
Se205
Se205Se205
Se205
 
Is320
Is320Is320
Is320
 
Is201
Is201Is201
Is201
 
Rdbms bie daalt
Rdbms bie daaltRdbms bie daalt
Rdbms bie daalt
 
Rdbms 300 test
Rdbms 300 testRdbms 300 test
Rdbms 300 test
 
DB-2
DB-2DB-2
DB-2
 
нийтлэл 1
нийтлэл 1нийтлэл 1
нийтлэл 1
 
IT13
IT13IT13
IT13
 
IT14
IT14IT14
IT14
 
IT12
IT12IT12
IT12
 
IT11
IT11IT11
IT11
 
IT10
IT10IT10
IT10
 
IT-9
IT-9IT-9
IT-9
 
IT-7
IT-7IT-7
IT-7
 
IT-6
IT-6IT-6
IT-6
 
IT-5
IT-5IT-5
IT-5
 
IT-4
IT-4IT-4
IT-4
 
IT-3
IT-3IT-3
IT-3
 
IT-2
IT-2IT-2
IT-2
 

WEB BASIC 2

  • 1. ВЭБИЙН ҮНДЭС Лекц – 2 Багш: Г.Өсөхжаргал LOGO 1
  • 2. АГУУЛГА  HTML Жагсаалт  Толгой кодчилол  Холболт үүсгэх 2
  • 3. HTML ЖАГСААЛТ  HTML – д үндсэн 3 төрлийн жагсаалт байна.  Эрэмблэгдсэн буюу Ordered  Эрэмблэгдээгүй буюу Unordered  Тодорхойлолтын буюу Definition 3
  • 4. ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ  Эрэмблэгдээгүй жагсаалтын өмнө тэмдэглэгээ гардаг.  Эрэмблэгдээгүй жагсаалт нь <ul> кодчилолоор тодорхойлогдоно.  Бүх жагсаалтууд дотроо <li> кодчилолыг хэрэглэдэг. 4
  • 5. ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ Үр дүн: <ul> <li> apple <li> banana </ul> 5
  • 6. ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ  Эрэмблэгдээгүй жагсаалт нь 3 төрлийн тэмдэглэгээг үүсгэдэг.  Disc – битүү дугуй  Circle – хөндий дугуй  Square – дөрвөлжин Жагсаалтын төрлийг type шинж чанарт тодорхойлж өгнө. 6
  • 7. ЭРЭМБЛЭГДЭЭГҮЙ ЖАГСААЛТ <html> <body> <ul type=disc> <li>apple <li>banana </ul> <ul type=circle> <li>apple <li>banana </ul> <ul type=square> <li>apple <li>banana </ul> </body> </html> 7
  • 8. ЭРЭМБЛЭГДСЭН ЖАГСААЛТ  Эрэмблэгдэсэн жагсаалт нь тоогоор дугаарлагдсан байдаг ба <ol> кодчилолоор тодорхойлогдоно. 8
  • 9. ЭРЭМБЛЭГДСЭН ЖАГСААЛТ Үр дүн: <ol> <li> apple <li> banana </ol> 9
  • 10. ЭРЭМБЛЭГДСЭН ЖАГСААЛТ  Эрэмблэгдсэн жагсаалт нь 5 төрлийн тэмдэглэгээг үүсгэдэг.  <ol> - Тоогоор A – том үсгээр a – жижиг үсгээр I – том ром тоогоор i – жижиг ром тоогоор 10
  • 11. <html> <body> <ol type=I> <ol> <li>apple <li>apple <li>banana <li>banana </ol> </ol> <ol type=A> <ol type=i> <li>apple <li>banana <li>apple </ol> <li>banana <ol type=a> </ol> <li>apple </body> </html> <li>banana </ol> 11
  • 12. ТОДОРХОЙЛОЛТЫН ЖАГСААЛТ  Тодорхойлолтын жагсаалт нь элементүүдийн жагсаалт биш харин томъёоллын тайлбарын жагсаалт нь.  Тодорхойлолтын жагсаалт нь <dl> кодчилолоор эхэлдэг. Томъёолол нь <dt> кодчилолоор, тайлбар нь <dd> кодчилолоор илэрхийлэгдэнэ. 12
  • 13. ТОДОРХОЙЛОЛТЫН ЖАГСААЛТ <dl> <dt> Coffe </dt> <dd> Black, Hot drink </dd> <dt> Milk </dt> <dd> White, Cold drink </dd> </dl> 13
  • 14. ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ <ul> <li>a <li>a <ul> <li>b <li>b </ul> </ul> 14
  • 15. ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ <ul> <li>a <li>a <ul type=square> <li>b <li>b </ul> </ul> 15
  • 16. ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ <ol> <li>a <li>a <ol> <li>b <li>b </ol> </ol> 16
  • 17. ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ <ol> <li>a <li>a <ol type=A> <li>b <li>b </ol> </ol> 17
  • 18. ЖАГСААЛТ ДОТОР ЖАГСААЛТ ҮҮСГЭХ <ol> <li>b <li>b <ul type=circle> <li>b <li>b </ul> </ol> 18
  • 19. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ  Урт текстийг товчлохын тулд хуудасны нэг хэсгээс нөгөөрүү хялбар шилжих anchor гэдэг.  Anchor үүсгэхийн тулд <a> tag ашиглана.  <a> tag-аар вэб хуудас дээрх бүх төрлийн холболт хийж болно. 19
  • 20. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ  <a> tag-ийн бичигдэх хэлбэр: <a href=“URL”> text </a> Жишээ: <a href=“www.yahoo.com”> YAHOO </a> Үр дүн: YAHOO 20
  • 21. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ <a> tag-аар холбогдсон хуудас хаана нээгдэхийг нь target шинж чанараар тодорхойлно. <a href=“URL” Target=“_blank”> гэж заавал холбогдсон хуудсыг шинэ цонхонд харуулна. <a href=“www.google.com” target=“_blank”> Google </a> Google 21
  • 22. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ  <a> tag-ийн name шинж чанар нь текстийн хэсэгт нэр өгөөд тэр хэсэгрүү шилжихэд хэрэглэгдэнэ.  Үүний тусламжтайгаар вэб хуудас үзэж суугаа хүн нэрлэгдсэн текстийн хэсэгрүү шууд шилжих боломжтой. 22
  • 23. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ  <a name=“нэр өгнө”> text </a>  <a href=“#нэр”> text </a>  Энэ нь вэб хуудсан дах текстийн эхнээс хуудасны төгсгөлрүү шууд шилжих боломжийг олгодог. 23
  • 24. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ  Жишээ: <html> <body> <a href=“first.html”> Go to first page </a> </body> </html> 24
  • 25. CREATING LINK БУЮУ ХОЛБОЛТ ҮҮСГЭХ Жишээ: second.html <html> <body> <a href=“first.html”> Go to first page </a> </body> </html> First.html хуудас үүсгэсэн байна. 25
  • 26. Жишээ: <html> <body> <a href=“#end” name=“begin”> Go to End </a> …….. <a href=“#begin” name=“end”> Go to Begin </a> </body> </html> 26
  • 27. <HEAD> КОДЧИЛОЛ  Head кодчилол нь баримтын тухай мэдээллийг агуулж байдаг. Head tag доторх мэдээлэл вэб харуулагч програмаар харагдахгүй. <head> tag дотор дараах HTML tag-ууд бичигддэг. 27
  • 28. <HEAD> КОДЧИЛОЛ  <base> - холболтуудыг тодорхойлно.  <link> - хуудсууд хоорондын холболтыг тохируулна  <title> - гарчгийг тодорхойлно.  <style> - хэлбэр тодорхойлно.  <script> - javascript кодчилол бичихэд хэрэглэнэ 28
  • 29. <base> <html> <head> <base target=“_blank”> </head> <body> <a href=“www.yahoo.com”> YAHOO </a> </body> </html> Энд бүх холболтууд шинэ хуудсанд гарна гэдгийг зааж байна. 29
  • 30. <link> <html> <head> <link rel=“stylesheet” type=“text/css” href=“styles.css”> </head> Хэлбэрийн хуудсууд буюу css файлуудыг холбоход ашиглана. 30
  • 31. <style> <html> <head>  Тухайн хуудасны аль ч <style> хэсэгт <h1> tag-ийг h1{color:red} h3{color:red} ашиглахад <style> tag-д </style> </head> тодорхойлогдсоноор <body> ашиглагдана. <h1>text</h1> <h3>text</h3> </body> </html> 31