Made 15 tables, GIFs and images responsive

src/lab/exp10/Illustration.html

@@ -105,22 +105,22 @@ <h3>Weighted matching problem</h3>
 <br>
 <h3>Example:</h3>
 <p>Consider N=4 points as shown in Figure 1 (a). The distances between each pair of points is given in Figure 1 (b).</p>
-<table width="600">
+<table style="width: 600px; max-width: 60%">
 <tr>
-<td height="200"><img src="images/prob.png" style="height:90%;width:75%"/></td>
-<td height="200"><img src="images/wgraph.png" style="height:90%;width:75%"/></td>
+<td><img src="images/prob.png" style="max-width:100%"/></td>
+<td><img src="images/wgraph.png" style="max-width:100%"/></td>
 </tr>
 <tr>
 <td align="center"><b>Figure 1 (a)</b></td>
 <td align="center"><b>Figure 1 (b)</b></td>
 </tr>
 </table>
 <p> The possible pairing of points are given in Figures 2 (a) to 2 (c). </p>
-<table width="900">
+<table style="width: 900px; max-width:90%">
 <tr>
-<td height="200"><img src="images/sol1.png" style="height:90%;width:75%"/></td>
-<td height="200"><img src="images/sol2.png" style="height:90%;width:75%"/></td>
-<td height="200"><img src="images/sol3.png" style="height:90%;width:75%"/></td>
+<td><img src="images/sol1.png" style="max-width:100%"/></td>
+<td><img src="images/sol2.png" style="max-width:100%"/></td>
+<td><img src="images/sol3.png" style="max-width:100%"/></td>
 </tr>
 <tr>
 <td align="center"><b>Figure 2 (a): </b><em>L=7.2 </em></td>

src/lab/exp8/Illustration.html

@@ -117,10 +117,10 @@ <h3>Application of SOM to travelling salesman problem</h3>
 <h3>For 100 cities and a SOM with 1000 neurons in the output layer</h3>
 </p>
 <!--Figure HERE -->
-<table width="650"><tr><td height="400">
-<img src="images/agif-som-100cities-1000units.gif" style="height:90%;width:90%"/></td></tr>
+
+<p><img src="images/agif-som-100cities-1000units.gif" style="width:500px; max-width:100%"></p>
 <caption align="bottom"><b>Figure 1: </b><em>Kohonen's self-organization feature map for TSP for 100 cities and 1000 units in the output layer.</em></caption>
-</table>
+</p>
 
 <h3>Effect of varying the number of units in output layer of SOM</h3>
 <p><br>For the travelling salesman problem of 50 cities, we consider
@@ -132,11 +132,9 @@ <h3>Effect of varying the number of units in output layer of SOM</h3>
 visited, which indicates the suboptimal nature of the algorithm.</br></p>
 <h3>For 50 cities</h3>
 
-<!--Figure HERE -->
-<table width="650"><tr><td height="400">
-<img src="images/agifTspDifferentNumberOfUnits.gif" style="height:90%;width:90%"/></td></tr>
+
+<p><img src="images/agifTspDifferentNumberOfUnits.gif" style="width:500px; max-width:100%"></p>
 <caption align="bottom"><b>Figure 2: </b><em>Illustration of sub-optimal nature of the algorithm</em></caption>
-</table>
 
 </div>						</div>
 					</div>

src/lab/exp8/Observations.html

@@ -120,10 +120,7 @@ <h1 class="text-h2-lightblue">Solution of optimization problems</h1><div class="
 			after 200, 500 and 1000 iterations, respectively. Note that some
 			of the cities may not be visited.</p>
 <p>
-<!--Figure HERE -->
-<table width="750"><tr><td height="450">
-<img src="images/som-tsp-elastic-1.jpg" style="height:90%;width:90%"/></td></tr>
-</table>
+	<img src="images/som-tsp-elastic-1.jpg" style="width: 500px; max-width: 100%"/>
 </p>
 <li><p>Observe the output of the network for different number of
 			cities. Start from a small number of cities (such as 10), and go up

src/lab/exp8/Tutorial.html

@@ -127,10 +127,10 @@ <h3>Architecture of SOM </h3>
 the region in the output whose neighbourhood units have similar properties.
 </p>
 <!--Figure HERE -->
-<table width="550"><tr><td height="350">
-<img src="SOM.png" style="height:90%;width:90%"/></td></tr>
+
+<p><img src="SOM.png" style="width:500px; max-width:100%"/></p>
 <caption align="bottom"><b>Figure 1: </b><em>Architecture of SOM</em></caption>
-</table>
+
 <h3> Algorithm for learning</h3>
 <p>
 The training of SOM is based on the principle of competitive learning (<i>Refer experiment 7, Artificial Neural Networks virtual labs</i>).