1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2<html> 3<head> 4<title>What's In A GIF - Animation and Transparency</title> 5<script type="text/javascript"></script> 6<link rel="stylesheet" href="../proj.css" /> 7<style type="text/css"> 8.byte {font-family: Courier, fixed; 9 padding: .2em} 10.gif_header {background-color: #f9E89D} 11.gif_screen {background-color: #C8DBD9} 12.gif_color {background-color: #E1E1E1} 13.gif_graphic {background-color: #F9EB9D} 14.gif_imgdesc {background-color: #C2D1DC} 15.gif_imgdata {background-color: #D0C4C4} 16.gif_trailer {background-color: #f9E89D} 17.gif_ext {background-color: #D0CFAE} 18#global_color_size {margin-left: auto; margin-right:auto; border:1px solid black;} 19#global_color_size td {text-align:center;} 20</style> 21</head> 22<body> 23<table width='100%' cellpadding='0' summary='Canned page header' bgcolor="#ddd"> 24<tr> 25<td><h2>What's In A GIF</h2></td> 26<td align="center"><img src="../giflib-logo.gif"></td> 27<td align="right">(animation and transparency)</td> 28</tr> 29</table> 30 31<div id="body"> 32<div style="text-align:center; margin-top: 10px; padding-top: 10px; border-top: #cecece 1px solid"> 33<p><a href="index.html">Back to the What's In A GIF index page.</a></p> 34</div> 35 36<p>In addition to being able to store simple image data, 37GIF files (specifically GIF89a files) allow for some special features. Tricks 38such as transparency and animation can be accomplished with the 39help of the Graphics Control Extension block. Here's a sample of what this 40block looks like:</p> 41 42<p style="text-align:center"><img src="graphic_control_ext.gif" 43alt="GIF graphics control ext block layout" style="border: 1px solid 44black" /></p> 45 46<p>I'll show you how to manipulate the bytes in this block to achieve 47special effects.</p> 48 49<h2><a name="animation">Animation</a></h2> 50 51<p>Cartoons are created by animators who draw a sequence of pictures, 52each slightly different from the one before, which, when rapidly shown 53one after the other, give the illusion of motion. Animation in GIF 54images is achieved in much the same way. Multiple images may be stored 55in the same file and you can tell the computer how much time to wait 56before showing the next image. Let's walk though the parts that make 57up this simple traffic light animation. 58</p> 59 60<p style="text-align:center"><img src="sample_2_animation.gif" 61alt="sample animated traffic light" / WIDTH="11" HEIGHT="29"></p> 62<p> 63 64<span class="byte gif_header"> 47 </span> 65<span class="byte gif_header"> 49 </span> 66<span class="byte gif_header"> 46 </span> 67<span class="byte gif_header"> 38 </span> 68<span class="byte gif_header"> 39 </span> 69<span class="byte gif_header"> 61 </span> 70<span class="byte gif_screen"> 0B </span> 71<span class="byte gif_screen"> 00 </span> 72<span class="byte gif_screen"> 1D </span> 73<span class="byte gif_screen"> 00 </span> 74<span class="byte gif_screen"> A2 </span> 75<span class="byte gif_screen"> 05 </span> 76<span class="byte gif_screen"> 00 </span> 77<span class="byte gif_color"> FF </span> 78<span class="byte gif_color"> 00 </span> 79<span class="byte gif_color"> 00 </span> 80<span class="byte gif_color"> 00 </span> 81<span class="byte gif_color"> FF </span> 82<span class="byte gif_color"> 00 </span> 83<span class="byte gif_color"> FF </span> 84<span class="byte gif_color"> FF </span> 85<span class="byte gif_color"> 00 </span> 86<span class="byte gif_color"> 8E </span> 87<span class="byte gif_color"> 8E </span> 88<span class="byte gif_color"> 8E </span> 89<span class="byte gif_color"> 00 </span> 90<span class="byte gif_color"> 00 </span> 91<span class="byte gif_color"> 00 </span> 92<span class="byte gif_color"> FF </span> 93<span class="byte gif_color"> FF </span> 94<span class="byte gif_color"> FF </span> 95<span class="byte gif_color"> 00 </span> 96<span class="byte gif_color"> 00 </span> 97<span class="byte gif_color"> 00 </span> 98<span class="byte gif_color"> 00 </span> 99<span class="byte gif_color"> 00 </span> 100<span class="byte gif_color"> 00 </span> 101<span class="byte gif_ext"> 21 </span> 102<span class="byte gif_ext"> FF </span> 103<span class="byte gif_ext"> 0B </span> 104<span class="byte gif_ext"> 4E </span> 105<span class="byte gif_ext"> 45 </span> 106<span class="byte gif_ext"> 54 </span> 107<span class="byte gif_ext"> 53 </span> 108<span class="byte gif_ext"> 43 </span> 109<span class="byte gif_ext"> 41 </span> 110<span class="byte gif_ext"> 50 </span> 111<span class="byte gif_ext"> 45 </span> 112<span class="byte gif_ext"> 32 </span> 113<span class="byte gif_ext"> 2E </span> 114<span class="byte gif_ext"> 30 </span> 115<span class="byte gif_ext"> 03 </span> 116<span class="byte gif_ext"> 01 </span> 117<span class="byte gif_ext"> 00 </span> 118<span class="byte gif_ext"> 00 </span> 119<span class="byte gif_ext"> 00 </span> 120<span class="byte gif_graphic"> 21 </span> 121<span class="byte gif_graphic"> F9 </span> 122<span class="byte gif_graphic"> 04 </span> 123<span class="byte gif_graphic"> 04 </span> 124<span class="byte gif_graphic"> 64 </span> 125<span class="byte gif_graphic"> 00 </span> 126<span class="byte gif_graphic"> 00 </span> 127<span class="byte gif_graphic"> 00 </span> 128<span class="byte gif_imgdesc"> 2C </span> 129<span class="byte gif_imgdesc"> 00 </span> 130<span class="byte gif_imgdesc"> 00 </span> 131<span class="byte gif_imgdesc"> 00 </span> 132<span class="byte gif_imgdesc"> 00 </span> 133<span class="byte gif_imgdesc"> 0B </span> 134<span class="byte gif_imgdesc"> 00 </span> 135<span class="byte gif_imgdesc"> 1D </span> 136<span class="byte gif_imgdesc"> 00 </span> 137<span class="byte gif_imgdesc"> 00 </span> 138<span class="byte gif_imgdata"> 03 </span> 139<span class="byte gif_imgdata"> 30 </span> 140<span class="byte gif_imgdata"> 48 </span> 141<span class="byte gif_imgdata"> BA </span> 142<span class="byte gif_imgdata"> DC </span> 143<span class="byte gif_imgdata"> DE </span> 144<span class="byte gif_imgdata"> 23 </span> 145<span class="byte gif_imgdata"> BE </span> 146<span class="byte gif_imgdata"> 48 </span> 147<span class="byte gif_imgdata"> 21 </span> 148<span class="byte gif_imgdata"> AD </span> 149<span class="byte gif_imgdata"> EB </span> 150<span class="byte gif_imgdata"> 62 </span> 151<span class="byte gif_imgdata"> A5 </span> 152<span class="byte gif_imgdata"> 25 </span> 153<span class="byte gif_imgdata"> D3 </span> 154<span class="byte gif_imgdata"> 93 </span> 155<span class="byte gif_imgdata"> F7 </span> 156<span class="byte gif_imgdata"> 8C </span> 157<span class="byte gif_imgdata"> E4 </span> 158<span class="byte gif_imgdata"> 27 </span> 159<span class="byte gif_imgdata"> 9A </span> 160<span class="byte gif_imgdata"> 1B </span> 161<span class="byte gif_imgdata"> D7 </span> 162<span class="byte gif_imgdata"> A1 </span> 163<span class="byte gif_imgdata"> 17 </span> 164<span class="byte gif_imgdata"> 9B </span> 165<span class="byte gif_imgdata"> 1E </span> 166<span class="byte gif_imgdata"> A0 </span> 167<span class="byte gif_imgdata"> F3 </span> 168<span class="byte gif_imgdata"> 96 </span> 169<span class="byte gif_imgdata"> 34 </span> 170<span class="byte gif_imgdata"> 13 </span> 171<span class="byte gif_imgdata"> DC </span> 172<span class="byte gif_imgdata"> CF </span> 173<span class="byte gif_imgdata"> AD </span> 174<span class="byte gif_imgdata"> 37 </span> 175<span class="byte gif_imgdata"> 7A </span> 176<span class="byte gif_imgdata"> 6F </span> 177<span class="byte gif_imgdata"> F7 </span> 178<span class="byte gif_imgdata"> B8 </span> 179<span class="byte gif_imgdata"> 05 </span> 180<span class="byte gif_imgdata"> 30 </span> 181<span class="byte gif_imgdata"> 28 </span> 182<span class="byte gif_imgdata"> F4 </span> 183<span class="byte gif_imgdata"> 39 </span> 184<span class="byte gif_imgdata"> 76 </span> 185<span class="byte gif_imgdata"> B5 </span> 186<span class="byte gif_imgdata"> 64 </span> 187<span class="byte gif_imgdata"> 02 </span> 188<span class="byte gif_imgdata"> 00 </span> 189<span class="byte gif_graphic"> 21 </span> 190<span class="byte gif_graphic"> F9 </span> 191<span class="byte gif_graphic"> 04 </span> 192<span class="byte gif_graphic"> 04 </span> 193<span class="byte gif_graphic"> 32 </span> 194<span class="byte gif_graphic"> 00 </span> 195<span class="byte gif_graphic"> 00 </span> 196<span class="byte gif_graphic"> 00 </span> 197<span class="byte gif_imgdesc"> 2C </span> 198<span class="byte gif_imgdesc"> 02 </span> 199<span class="byte gif_imgdesc"> 00 </span> 200<span class="byte gif_imgdesc"> 0B </span> 201<span class="byte gif_imgdesc"> 00 </span> 202<span class="byte gif_imgdesc"> 07 </span> 203<span class="byte gif_imgdesc"> 00 </span> 204<span class="byte gif_imgdesc"> 10 </span> 205<span class="byte gif_imgdesc"> 00 </span> 206<span class="byte gif_imgdesc"> 00 </span> 207<span class="byte gif_imgdata"> 03 </span> 208<span class="byte gif_imgdata"> 19 </span> 209<span class="byte gif_imgdata"> 78 </span> 210<span class="byte gif_imgdata"> 27 </span> 211<span class="byte gif_imgdata"> AC </span> 212<span class="byte gif_imgdata"> CB </span> 213<span class="byte gif_imgdata"> 0D </span> 214<span class="byte gif_imgdata"> CA </span> 215<span class="byte gif_imgdata"> 49 </span> 216<span class="byte gif_imgdata"> E1 </span> 217<span class="byte gif_imgdata"> B3 </span> 218<span class="byte gif_imgdata"> 0A </span> 219<span class="byte gif_imgdata"> BB </span> 220<span class="byte gif_imgdata"> CD </span> 221<span class="byte gif_imgdata"> F7 </span> 222<span class="byte gif_imgdata"> F8 </span> 223<span class="byte gif_imgdata"> CE </span> 224<span class="byte gif_imgdata"> 27 </span> 225<span class="byte gif_imgdata"> 1E </span> 226<span class="byte gif_imgdata"> 62 </span> 227<span class="byte gif_imgdata"> 69 </span> 228<span class="byte gif_imgdata"> 9E </span> 229<span class="byte gif_imgdata"> A3 </span> 230<span class="byte gif_imgdata"> 19 </span> 231<span class="byte gif_imgdata"> 82 </span> 232<span class="byte gif_imgdata"> 47 </span> 233<span class="byte gif_imgdata"> 02 </span> 234<span class="byte gif_imgdata"> 00 </span> 235<span class="byte gif_graphic"> 21 </span> 236<span class="byte gif_graphic"> F9 </span> 237<span class="byte gif_graphic"> 04 </span> 238<span class="byte gif_graphic"> 04 </span> 239<span class="byte gif_graphic"> 64 </span> 240<span class="byte gif_graphic"> 00 </span> 241<span class="byte gif_graphic"> 00 </span> 242<span class="byte gif_graphic"> 00 </span> 243<span class="byte gif_imgdesc"> 2C </span> 244<span class="byte gif_imgdesc"> 02 </span> 245<span class="byte gif_imgdesc"> 00 </span> 246<span class="byte gif_imgdesc"> 02 </span> 247<span class="byte gif_imgdesc"> 00 </span> 248<span class="byte gif_imgdesc"> 07 </span> 249<span class="byte gif_imgdesc"> 00 </span> 250<span class="byte gif_imgdesc"> 10 </span> 251<span class="byte gif_imgdesc"> 00 </span> 252<span class="byte gif_imgdesc"> 00 </span> 253<span class="byte gif_imgdata"> 03 </span> 254<span class="byte gif_imgdata"> 19 </span> 255<span class="byte gif_imgdata"> 78 </span> 256<span class="byte gif_imgdata"> 07 </span> 257<span class="byte gif_imgdata"> AC </span> 258<span class="byte gif_imgdata"> CB </span> 259<span class="byte gif_imgdata"> 0D </span> 260<span class="byte gif_imgdata"> CA </span> 261<span class="byte gif_imgdata"> 49 </span> 262<span class="byte gif_imgdata"> E1 </span> 263<span class="byte gif_imgdata"> B3 </span> 264<span class="byte gif_imgdata"> 0A </span> 265<span class="byte gif_imgdata"> BB </span> 266<span class="byte gif_imgdata"> CD </span> 267<span class="byte gif_imgdata"> F7 </span> 268<span class="byte gif_imgdata"> F8 </span> 269<span class="byte gif_imgdata"> CE </span> 270<span class="byte gif_imgdata"> 27 </span> 271<span class="byte gif_imgdata"> 1E </span> 272<span class="byte gif_imgdata"> 62 </span> 273<span class="byte gif_imgdata"> 69 </span> 274<span class="byte gif_imgdata"> 9E </span> 275<span class="byte gif_imgdata"> A3 </span> 276<span class="byte gif_imgdata"> 19 </span> 277<span class="byte gif_imgdata"> 82 </span> 278<span class="byte gif_imgdata"> 47 </span> 279<span class="byte gif_imgdata"> 02 </span> 280<span class="byte gif_imgdata"> 00 </span> 281<span class="byte gif_trailer"> 3B </span> 282</p> 283 284<p>This file is similar to the ones we've previously encountered. The 285bytes start out with the GIF header. Next we have a <a 286href="bits_and_bytes.html#logical_screen_descriptor_block">logical 287screen descriptor</a> which tells us that our image is 11px by 29 px 288and will have a global color table with 8 colors in it (of which we 289only really need 5). Immediately after, follows the global color table 290which tells us what those colors are (0=red, 1=green, 2=yellow, 2913=light grey, 4=black, 5=white, 6=black [not used], 7=black [not used] 292).</p> 293 294<p>Next we encounter an <a 295href="bits_and_bytes.html#application_extension_block">application 296extension block</a>. This is this block that causes our animation to 297repeat rather than play once and stop. The first three bytes tell us 298we are looking at (1) an extension block (2) of type 299"application" which is followed by (3) 11 bytes of fixed 300length data. These 11 bytes contain the ASCII character codes for 301"NETSCAPE2.0". Then begins the actual "application 302data" which is contained in sub-blocks. There are two values that 303are stored in these sub-blocks. The first value is always the byte 304<span class="byte">01</span>. Then we have a value in the unsigned 305(lo-hi byte) format that says how many times the animation should 306repeat. You can see that our sample image has a value of 0; this means 307the animation should loop forever. These three bytes are preceded by 308the <span class="byte">03</span> that lets the decoder know that three 309bytes of data follow, and they are terminated by <span 310class="byte">00</span>, the block terminator.</p> 311 312<p>This very basic animation is essentially made up of three different 313"scenes". The first is the one with the green light lit, 314the second with the yellow, and the last with the red. You should be 315able to see three separate chunks of image data in the bytes 316above. </p> 317 318<table style="margin-left: auto;margin-right: auto"> 319 <tr><th>1</th><th>2</th><th>3</th></tr> 320 <tr> 321 <td><img src="sample_2_animation_green.gif" alt="scene 1: green light" width="11" height="29"/></td> 322 <td><img src="sample_2_animation_yellow.gif" alt="scene 2: yellow light" width="11" height="29"/></td> 323 <td><img src="sample_2_animation_red.gif" alt="scene 3: red light" width="11" height="29"/></td> 324 </tr> 325</table> 326 327<p>The first chunk begins immediately after the application extension 328block. It is there we encounter our first graphic control 329extension. As with all extensions, it begins with <span 330class="byte">21</span>. Next, the type specific label for the graphic 331control type of extension is <span class="byte">F9</span>. Next we see 332the byte size of the data in the block; this should always be <span 333class="byte">04</span>. The first of these four data blocks is a 334packed field. </p> 335 336<p>The packed field stores three values. The first three (highest) 337bits are "reserved for future use" so those have been left 338as zeros. The next three bits indicate the disposal method. The 339<em>disposal method</em> specifies what happens to the current image 340data when you move onto the next. We have three bits which means we 341can represent a number between 0 and 7. Our sample animated image has 342a value of 1 which tells the decoder to leave the image in place and 343draw the next image on top of it. A value of 2 would have meant that 344the canvas should be restored to the background color (as indicated by 345the logical screen descriptor). A value of 3 is defined to mean that 346the decoder should restore the canvas to its previous state before the 347current image was drawn. I don't believe that this value is widely 348supported but haven't had the chance to test it out. The behavior for 349values 4-7 are yet to be defined. If this image were not animated, 350these bits would have been set to 0 which indicates that do not wish 351to specify a disposal method. The seventh bit in they byte is the 352<em>user input flag</em>. When set to 1, that means that the decoder 353will wait for some sort of "input" from the person viewing 354the image before moving on to the next scene. I'm guessing it's highly 355unlikeley that you will encounter any other value that 0 for this bit. 356The final bit is the transparency flag. We will go into more detail 357about transparency in <a href="#transparency">the next 358section</a>. Since this image isn't using any transparency, we see 359this bit has been left at 0. </p> 360 361<p>The next two bytes are the delay time. This value is in the same 362unsigned lformat as all the other integers in the file. This number 363represents the number of hundredths of a second to wait before moving 364on to the next scene. We see that our sample image has specified 365a value of 100 (<span class="byte">64</span> <span class="byte">00</span>) 366in the first graphics control block which means we would wait 1 second 367before changing our green light to yellow.</p> 368 369<p>Our graphics control extension block ends with the block 370terminator <span class="byte">00</span>. You will notice this 371type of block appearing two more times in this image, the second 372instance differing only in the delay time (the yellow light only 373stays up for half a second).</p> 374 375<p>The next chunk is an image descriptor. The block declares that it 376will be drawing an image starting at the top left corner and taking up 377the whole canvas (11px x 29px). This block is followed by the image 378data that contains all the codes to draw the first scene, the one with 379the green light on.</p> 380 381<table style="margin-left: auto;margin-right: auto; text-align: center"> 382 <tr><th>Green</th><th>(Difference)</th><th>Yellow</th></tr> 383 <tr> 384 <td><img src="sample_2_green_large.gif" alt="green light enlarged" width="33" height="87"/></td> 385 <td><img src="sample_2_green_yellow_diff.gif" alt="difference between green and yellow images"width="33" height="87"/></td> 386 <td><img src="sample_2_yellow_large.gif" alt="yellow light enlarged" width="33" height="87"/></td> 387 </tr> 388</table> 389 390<p>If we compare the first and the second scene, we see they share many 391of the same pixel color values. Rather than redrawing the whole canvas, 392we can specify just the part that changes (that is, the smallest 393rectangle that covers the part that changes). You'll see that the 394image descriptor before the second block of image data specifies 395that it will start at the pixel at (2, 11) and draws a box that's 3967px wide by 16px tall. This is just large enough to cover the bottom two 397lights. The works because we chose the "do not dispose" disposal 398method for out graphics control extension block. In the same way, 399the third and final image data block only renders the top two circles 400to both fill in the red and cover up the yellow.</p> 401 402<h2><a name="transparency">Transparency</a></h2> 403 404<p>Normally, GIF images are rectangles that cover up what ever 405background may be beneath them. Transparency allows you to "see 406though" the image to whatever is below. This is a very simple 407trick to pull off in a GIF image. You can set up one color in your 408color table that is converted to "invisible ink." Then, as 409the image is drawn, whenever this special color is encountered, the 410background is allowed to show through.</p> 411 412<p>There are only two pieces of data we have to set to pull this 413off. First we must set the Transparency Color Flag to 1. This is the 414lowest bit in the packed byte of the Graphic Control Extension. This 415will tell the decoder that we want our image to have a transparent 416component. Secondly we must tell the decoder which color we want to 417use as our invisible ink. The decoder will then all you to see thought 418every pixel that contains this color. Therefore make sure it's not a 419color that you are using else where in your image. The color you 420choose must be in the active color table and you specify its value in 421the Transparent Color Index byte by setting this value to the index of 422the color in the color table.</p> 423 424<p>Let's demonstrate this by revisiting the sample image we used 425in <a href="bits_and_bytes.html">Bits and Bytes</a>. We will update this 426file to make the white center part transparent. Let's start creating 427the Graphic Control Extension block that will do this for us. Again we 428start with the <span class="byte">21</span> <span class="byte">F9</span> 429<span class="byte">04</span> punch. In the next byte, we need to flip 430the transparent color flag to 1 (we can leave the others at zero) so 431this whole byte is simply <span class="byte">01</span>. The next two 432bytes can be left at zero.</p> 433 434<p>We must now specify which color to disappear. Recall that our 435sample image had the following global color table:</p> 436 437<table style="margin-left: auto; margin-right: auto"> 438 <tr><th>Index</th><th>Color</th></tr> 439 <tr><td>0</td><td><span style="color:#FFFFFF; background: #000000; font-weight: bold">White</span></td></tr> 440 <tr><td>1</td><td><span style="color:#FF0000; font-weight: bold">Red</span></td></tr> 441 <tr><td>2</td><td><span style="color:#0000FF; font-weight: bold">Blue</span></td></tr> 442 <tr><td>3</td><td><span style="font-weight: bold">Black</span></td></tr> 443</table> 444 445<p>We already know what we want to make all the white sections 446transparent. The color white has an index of 0. Therefore we will 447specify a value of <span class="byte">00</span> for the transparent 448color index block. Had we wanted to make the red transparent we would 449have used <span class="byte">01</span>, or <span 450class="byte">02</span> for blue. Lastly we tack on the block 451terminator of <span class="byte">00</span> and we're done. We have 452created the following block:</p> 453 454<p> 455<span class="byte gif_graphic"> 21 </span> 456<span class="byte gif_graphic"> F9 </span> 457<span class="byte gif_graphic"> 04 </span> 458<span class="byte gif_graphic"> 01 </span> 459<span class="byte gif_graphic"> 00 </span> 460<span class="byte gif_graphic"> 00 </span> 461<span class="byte gif_graphic"> 00 </span> 462<span class="byte gif_graphic"> 00 </span> 463</p> 464 465<p>Now, all we have to do is plug this into our sample image right before the 466image descriptor. I've placed our original sample image on a black background 467as well as the one we just made so you can see the results. I've also included 468ones where red or blue are transparent. The last three differ by only the 469transparent color index byte.</p> 470 471<table cellpadding="10px" style="text-align: center; margin-left: auto; margin-right: auto"> 472<tr> 473<th style="width:25%">Original</th> 474<th style="width:25%">Transparent <br/> 475White (<span class="byte">00</span>)</th> 476<th style="width:25%">Transparent <br/> 477Red (<span class="byte">01</span>)</th> 478<th style="width:25%">Transparent <br/> 479Blue (<span class="byte">02</span>)</th> 480</tr> 481<tr> 482<td style="width:25%; background-color: black"> 483<img src="sample_1.gif" alt="previous sample" width="10" height="10"/></td> 484<td style="width:25%; background-color: black"> 485<img src="sample_1_trans.gif" alt="transparent white" width="10" height="10"/></td> 486<td style="width:25%; background-color: black"> 487<img src="sample_1_trans_red.gif" alt="transparent red" width="10" height="10"/></td> 488<td style="width:25%; background-color: black"> 489<img src="sample_1_trans_blue.gif" alt="transparent blue" width="10" height="10"/></td> 490</tr> 491</table> 492 493<p>This concludes our description of the bits inside GIFs. If you 494have not already read the <a href="../gif_lib.html">documentation of 495the GIFLIB API</a>, you may wish to continue with that.</p> 496 497</div> 498 499<div style="text-align:center; margin-top: 10px; padding-top: 10px; border-top: #cecece 1px solid"> 500<a href="../index.html">Back to GIFLIB documentation</a> 501</div> 502 503</body> 504 505</html> 506
