^

Introduction to HTML/XHTML

Images

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Images</title>
<meta name="AUTHOR" content="Jose M Vidal"></meta>
<meta name="GENERATOR" content="xslides.el, written by J.M. Vidal"></meta>
<link rel="next" href="characterreferences.html" title="Character References"/>
<link rel="previous" href="divandspan.html"  title="div and span"/>
<link rel="author" href="../../index.html" title="Jose M Vidal"/>
<link rel="parent" href="index.html" title="Index"/>
<link rel="top" href="../index.html" title="Presentation List"/>

<link rel="stylesheet" type="text/css" href="../xslides-medwhite.css" title="White" media="all" />
            <link rel="alternate stylesheet" type="text/css" href="../xslides-medblue.css" title="Blue" media="all" />
            <link rel="alternate stylesheet" type="text/css" href="../xslides-usc.css" title="USCTheme" media="all" />
<script type="text/javascript" src="../scripts/stylehelper.js"></script>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.js"></script>
<link rel="stylesheet" href="../lightbox.css" type="text/css" media="screen"/>
</head>
<body>
<div class="navbar">
<p>
<a onclick="javascript:this.href=getURL('divandspan.html');return true;" rel="prev" href="divandspan.html" accesskey="P" title="div and span">&larr;</a>
<a rel="index" href="index.html" onclick="javascript:this.href=getURL('index.html');return true;" accesskey="I" title="Index Page">^</a>
<a rel="next" href="characterreferences.html" onclick="javascript:this.href=getURL('characterreferences.html');return true;" accesskey="N" title="Character References">&rarr;</a>
</p>
</div>
<div class="talktitle"><p>Introduction to HTML/XHTML</p></div>
<h1 class="slide">Images</h1>
<div class="slidebody">
    <pre>
<span class="html-helper-significant-tag">&lt;img src=</span><span class="string">"http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"</span><span class="html-helper-significant-tag">/&gt;</span>
</pre> 
    <div><img src="http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"/>
</div> 
    <ul>
      <li>Browser first loads HTML file, then images.</li>

      <li>Size of image can be changed with <code>width</code> and <code>height</code> attributes:
 </li>
    </ul>
    <pre>
<span class="html-helper-significant-tag">&lt;img width=</span><span class="string">"200"</span><span class="html-helper-significant-tag"> src=</span><span class="string">"http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"</span><span class="html-helper-significant-tag">/&gt;</span>
</pre> 
    <div><img width="200" src="http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"/>
</div> 

    </div><hr class="bottom"/>
<p class="author"><a href="../../index.html">Jos&eacute; M. Vidal</a>
<a href=" http://validator.w3.org/check?uri=http://jmvidal.cse.sc.edu/talks/xhtml/images.html">.</a></p>
<p class="pagenumber">7 of 19</p>
</body>
</html>
Images

^

Introduction to HTML/XHTML

Images

<img src="http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"/>
  • Browser first loads HTML file, then images.
  • Size of image can be changed with width and height attributes: 
<img width="200" src="http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"/>

José M. Vidal .

7 of 19

<img width="200" src="http://farm4.static.flickr.com/3276/3115660375_0843dc706c.jpg"/>

José M. Vidal .

7 of 19