HTML Overview


José M Vidal


  • [arrow keys] to go next and previous

  • [mouse scroll wheel] to go next and previous

  • [Ctrl or Command] + [+/-] to zoom in and out

  • [touch gestures] for mobile devices


HTML is not a programming language

its the HyperText Markup Language


  • In this bit of HTML:
    <p>At <a href="">Carolina</a> we learn about...</p>
    we call the whole thing an element
  • we call the letter 'a' a tag
  • the 'href' is an attribute
  • whose value is
  • an HTML document is a tree data structure (the DOM)


  • The href can be either absolute, or relative, ../../index.html.
  • A link can have a title: <a title="next page" href="next.html">.
  • You can also link to an anchor <a name="sec2"/> with <a href="#sec2">....

Text Tags

  • p is for paragraph.
  • h1 h2 h3 h4 are for headings.
  • cite is for inline citations.
  • blockquote is for quoting others.
  • code displays text in fixed width font.
  • pre uses fixed width and also preserves newlines.
  • sub and sup are for subscripts and superscripts.
  • center centers text.

HTML Table: For Tabular Data

<table align="center" border="1">
      <th>Other Readings</th> 
      <td nowrap="nowrap">Jan. 13</td>
      <td>Class Overview</td>
      <td>Chapter 1</td>
      <td> </td>
      <td nowrap="nowrap">Jan. 15</td>
      <td><a href="../talks/internet/index.xml">Internet Basics</a></td>
      <td> </td>
      <td> </td>
      <td nowrap="nowrap">Jan. 20</td>
      <td><a href="../talks/xhtml/index.xml">XHTML</a></td>
	<li><a href="">XHTML
	    1.0 The Extensible HyperText Markup Language</a></li>
      <td> </td>


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

    div And span

    • The div and span group together elements..
    • div defines a block while span is inline.
    • Blocks get laid-out different from inline.
    • They are used with the class or id attributes to assign a CSS style.

    Use divs to organize your Layout

    	<div id="header">...</div>
    	<div id="menu">...</div>
    	<div id="content">...</div>
    	<div id="footer"></div>

    Speaking of Attributes: Here are the most Important Ones

    • These three can be used on any element.
    • title attribute is the popup text.
    • name groups many elements under a name.
    • id gives a unique id to the element.
    • These value of the last two can be used after # in a url:
    • We will be using them in Javascript a lot.
    <a href="" 
       title="University of South Carolina" id="usclink" name="link">USC</a>


    • <img src=""/>
    • Browser first loads HTML file, then images.
    • Size of image can be changed with width and height attributes (but, use CSS instead):
    • <img width="200" src=""/>

    Sometimes you Need a Character Reference

    • < &lt;
    • > &gt;
    • £ &pound;
    • € &euro;
    • © &copy;
    • é &eacute;
    • 78° &deg;
    • “he said” &ldquo;he said&rdquo;
    • multi-agent, pages 1–2, john—the speaker: - &ndash; &mdash;
    • & &amp;


    <form action="" method="get">
        <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"/>



    • iframe can insert another webpage within this one:
      <iframe width="400" height="400" src=""/>


    • Always use the validator to check your HTML.

    Organize Your Layout Based on Semantics (Meaning)

    <!DOCTYPE html>
    <div id="header">...</div>
    <div id="menu">...</div>
    <div id="content">
    <h1>Main Heading</h2>
    <p>Some text in a paragraph. With a <strong>strong</strong> and an <em>emphasized</em> word.</p>          
    <h2>A sub Heading</h2>
    <li>First item in a list</li>
    <li>Second item</li>
    <div id="footer"></div>