Introduction to HTML/XHTML

CSCE 242


University of South Carolina


José M. Vidal [1]
http://jmvidal.cse.sc.edu/talks/xhtml/ [2]

We summarize

1 HTML Basics

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"/>
<html>
  <head>
    <meta name="description" content="A sample page"/>
    <title>Sample</title>
    <link rel="stylesheet" href="stylesheet.css"/>
    <link rel="shortcut icon" href="icon.ico"/>
  </head>
  <!-- This is a comment. It will not appear on the browser. -->
  <body>
    <h1>Sample</h1>
    <p>
        This is a paragraph. Here is a 
      <ul>
        <li>list</li>
        <li>with some item</li>
      </ul>
      This is in <b>boldface</b> this is in <i>italics</i> as is <em>this</em>.
    </p>
    <p>
        This is another paragraph. <br/><br/>
        With an empty new line.
    </p>
    <h2>Sub heading</h2>
    <p>
       This is a <a href="http://jmvidal.cse.sc.edu">hyperlink</a>.
       This adds an image: <img src="image.png" title="a rose"/>
    </p>
  </body>
</html>

Sample

Sample

This is a paragraph. Here is a

  • list
  • with some item
This is in boldface this is in italics as is this.

This is another paragraph.

With an empty new line.

Sub heading

This is a hyperlink. This adds an image:

1.1 Mind Your Names

1.3 Text Tags

1.4 HTML Table

<table align="center" border="1">
  <thead>
    <tr>
      <th>Date</th> 
      <th>Topic</th> 
      <th>Other Readings</th> 
      <th>Homework</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td nowrap="nowrap">Jan. 13</td>
      <td>Class Overview</td>
      <td>Chapter 1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td nowrap="nowrap">Jan. 15</td>
      <td><a href="../talks/internet/index.xml">Internet Basics</a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td nowrap="nowrap">Jan. 20</td>
      <td><a href="../talks/xhtml/index.xml">XHTML</a></td>
      <td>
        <li><a href="http://www.w3.org/TR/xhtml1/">XHTML
            1.0 The Extensible HyperText Markup Language</a></li>
        
      </td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
    

Date Topic Other Readings Homework
Jan. 13 Class Overview Chapter 1  
Jan. 15 Internet Basics    
Jan. 20 XHTML
  • XHTML 1.0 The Extensible HyperText Markup Language
  •  

    1.5 div and span

    1.6 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"/>
    

    1.7 Character References

    1.8 Important Attributes

    <a href="http://www.sc.edu" 
       title="University of South Carolina" id="usclink" name="link">USC</a>
    
    USC

    1.9 Forms

    <form action="http://www.google.com/search" method="get">
     <p>
        Query:
        <input type="text" name="q" id="query"/><br/>
        <input type="radio" name="lr" value="lang_en"/>English<br/>
        <input type="radio" name="lr" value="lang_es"/>Spanish<br/>
        <input type="radio" name="lr" value="lang_ja"/>Japanese<br/>
        <input type="submit" value="Send"/> <input type="reset"/>
        </p>
     </form>
    

    Query:
    English
    Spanish
    Japanese

    1.10 Iframe

    <iframe width="400" height="400" src="http://stackoverflow.com"/>