Skip to content

Introduction to HTML

Jump to bottom Edit New page
yicui edited this page Jan 16, 2013 · 5 revisions

Note: All code snippets in this page are compiled into an HTML file available here.

What is HTML?

  • Hyper Text Markup Language
    • HTML document
      • More often known as a webpage
    • Came up by Tim Berners-Lee in 1989
  • Hyper Text Transfer Protocol
    • The most common means to transfer webpages on Internet
    • Computer Networking class talks about this
    • Think about a HTML document as the cargo, HTTP as the delivery vehicle

HTML Elements

  • Tags enclosed in angle brackets
    • Often come in pairs such as <html> … </html> and <b> … </b>
    • The browser won’t show the tags but tries to interpret & visualize the content between them
    • Organized in sequential & compositional patterns
    • Pleasantly simple for someone coming out of C++/Java
    • Everyone can write HTML
    • But know this, the whole world can see your code!!

Most Commonly Seen Tags

  • <html>
    • The whole webpage
  • <body>
    • The visible content of the webpage
  • <h1>, <h2>, <h3> …
    • Headings of different sizes
  • <p>
    • Paragraph
  • <a>
    • Anchor

What Editor for HTML?

  • Notepad, Microsoft Word
    • Pure text editors
    • Personal Recommendation: NotePad++ with syntax highlighting support for many languages
  • Some people like FrontPage or Dreamweaver
    • At least not for starters
    • Beware of many craps resulted from these editors
  • HTML or HTM?
    • Doesn’t matter, it’s just back in old days, many computers only allow 3-letter file extensions
  • You don’t need to send your webpage up to a web server to test it
    • Just save it up, and have your browser display it locally
  • Or use interactive testing

Some More Examples

  • Headings

      <h1>Introduction to HTML</h1> 
  <h2>This webpage showcases some basic HTML concepts</h2>
  <h3>Lecturer: Yi Cui</h3>

  • Paragraph

      <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>

  • Anchor

      <a href="http://en.wikipedia.org">Wikipedia</a>
    • href is an attribute of the anchor, which will be covered soon

HTML Syntax

  • An HTTP element starts from an opening tag, and lasts until the closing tag
  • An element can be within another element
  • Don’t forget the closing tag
    • The present-day browser will pardon your error, but future HTML specifications will be more restrictive
  • Empty elements
    • e.g., <br /> which adds an empty line or break a line
  • Write tags in lower cases
    • HTML4 recommends this way, the future specifications might enforce it

HTML Attributes

  • Providing more information about an HTML tag
    • Appeared in name-value pairs
  • Some examples (More later)
    • href attribute in anchor element defines the URL
      <a href="http://en.wikipedia.org">Wikipedia</a>
    • align attribute (deprecated!)
      <p align='center'>This paragraph is placed at the center of the page.</p>
    • bgcolor attribute (deprecated!)
      <body bgcolor='yellow'></body>
  • Single-quotation or double-quotation?
    • Again, doesn’t matter
    • In some cases, if the value itself contains a double quotation mark, then you go with single-quotation, and vice versa

Some more HTML Elements

  • Adding Horizontal Lines
    • Beware that this is an empty element
      <hr /> 
  <p>This paragraph has a horizontal bar above and another one below</p>
  <hr />
  • Adding Comments
    • Just to help people understand your HTML document, browser will ignore this
      <! This is a comment which is invisible in the browser>
  • Adding linebreaks 
      <p>This is<br />a para<br />graph with line breaks</p>
  • Formatting Texts 
      <b>This text is bold</b><br />
  <strong>This text is strong</strong><br />
  <big>This text is big</big><br />
  <em>This text is emphasized</em><br />
  <i>This text is italic</i><br />
  <small>This text is small</small><br />
  This text contains<sub>subscript</sub><br />
  This text contains<sup>superscript</sup>
  • HTML is intuitive, but not WYSIWYG
    • Unlike Microsoft Word
    • See how the following HTML code will be rendered
      <p>This is a paragraph.
  
  Will a carriage return start a new line?</p>

Some More Examples with Anchor Elements

  • Opening in a new tab 
      <a href="http://en.wikipedia.org" target="_blank">Wikipedia</a>
  • Jumping to a different position inside the webpage 
      <h4><a id="paragraphs">Paragraphs</a></h4>
  <h4><a id="formatting">Formating Texts</a></h4>
      <p><a href="#paragraphs">Skip to the Paragraphs section</a></p>
  <p><a href="#formatting">Skip to the Formatting Texts section</a></p>
  • Sending Email 
      <a href="mailto:yi.cui@vanderbilt.edu?subject=Hello">Send me Email</a>

Table

  • <table> tag
    • <tr> tag for each line
    • <td> tag for each cell within each line
    • <th> tag for the heading
    • border attribute for size of the border
      <table border="1"> 
    <tr> 
      <th>Heading 1</th><th>Heading 2</th>
    </tr>
    <tr> 
      <td>row 1, cell 1</td> <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
      <td>row 2, cell 1</td> <td>row 2, cell 2</td> 
    </tr> 
  </table>

Getting User Input: <form> and <input>

  • Text Fields 
      <form> 
    First name: <input type="text" name="firstname" /><br /> 
    Last name: <input type="text" name="lastname" /><br />  
  </form>
  • Radio Buttons 
      <form> 
    <input type="radio" name="sex" value="male" /> Male <br /> 
    <input type="radio" name="sex" value="female" /> Female <br /> 
  </form>
  • Checkboxes 
      <form> 
    <input type="checkbox" name="junior" /> I am a junior student<br /> 
    <input type="checkbox" name="senior" /> I am a senior student
  </form>
  • The action attribute 
      <form name="input" action="fake_form_action.php" method="get"> 
    Action: <input type="text" name="user" />
    <input type="submit" value="Submit" /> 
  </form>

Head Element

  • Often appears before <body>
  • Invisible to the browser
  • Very important!
    • The first part search engine crawlers get to
  • Only a handful of tags are allowed to appear between <head> … </head>
    • <title>: its text will be shown in browser’s title bar and bookmark
    • <meta>: meta information important to webserver, such as http-equiv, or search enginge such as name
    • <link>,<style>, <script>: more later
  • An Example 
      <head>
    <title>Introduction to HTML</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords"  content="web, tags, forms, anchors" />
    <meta name="description" content="basic HTML concepts" />
  </head>

XHTML

  • A combination of XML and HTML
  • Why XHTML?
    • Lots of bad HTML code out there, but tolerated by modern-day browsers
    • XHTML enables us to write well-structured webpage following a much stricter syntax
    • Compatible with many new devices supporting XML
    • Work with all browsers
    • Good backward-compatibility

XHTML vs. HTML

  • Elements must be correctly embedded
  • All elements must be correctly closed, including empty ones
  • Tags must be written in lower cases
  • Attributes must be written in lower cases, and their values must be quoted
  • There must be an <html> tag
  • The id attribute is highly recommended to replace name attribute
    • You will learn this more when we get to DOM
  • DOCTYPE declaration is mandatory
    • DOCTYPE is neither an XHTML element nor an HTML element
    • must appear before the <html> tag
  • If you want to know whether your XHTML page contains any error

DOCTYPE Examples

  • XHTML 1.0 Strict
    • The xmlns attribute specifies the XML namespace for a document
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us"> ... </html>
  • HTML 5 
       <!DOCTYPE html> 
   <html> ... </html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally