HTML Overview

by

José M Vidal

Navigation

  • [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

Options

HTML is not a programming language



its the HyperText Markup Language

Definitions

  • In this bit of HTML: 
    <p>At <a href="http://www.sc.edu">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 http://www.sc.edu
  • an HTML document is a tree data structure (the DOM)

Links

  • The href can be either absolute, http://sc.edu 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">
  <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> </td>
    </tr>
    <tr>
      <td nowrap="nowrap">Jan. 15</td>
      <td><a href="../talks/internet/index.xml">Internet Basics</a></td>
      <td> </td>
      <td> </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> </td>
    </tr>
  </tbody>
</table>

HTML 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
    		•   

    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

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

    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: http://www.sc.edu/index.html#overview.
    • We will be using them in Javascript a lot. 
    <a href="http://www.sc.edu" 
   title="University of South Carolina" id="usclink" name="link">USC</a>

    Images

    • <img src="http://sc.edu/image.png"/>
    • 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="http://farm4.static.flickr.com/img.jpg"/>

    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;

    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

    IFrame

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

    Validator

    • Always use the validator to check your HTML.

    Organize Your Layout Based on Semantics (Meaning) 

    <!DOCTYPE html>
<html>
<head>...</head>
<body>
<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>
<ul>
<li>First item in a list</li>
<li>Second item</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>