HTML Basics


HTML Concepts




HTML Commands


Container tags


Separator tags


HTML Components
Using the tags

HTML Components
HTML Document overview




HTML body tags

  • Any information to be displayed on the page should fall between <body> and </body>


HTML Heading tags
Show me
Show me all 6 heading sizes


HTML Text Elements

  • Any text entered into the body area will display as standard text
  • To divide text into paragraphs, use the <p> tag
  • The <p> does NOT have to be matched with at </p>
  • It is a separator tag


  • Example using the <p> tag
  • <html>
    <head>
    <title>This is a Title</title>
    </head>
    <body>
    <H1>This is a Heading</H1>
    This is some text. This text is followed by another little bit of text. After that text comes some more text. I need to start a new paragraph, so I add a <p> This now breaks out a new paragraph. This is some text in the new paragraph and I think I may want to add another paragraph after this so I put in a <p> .
    </body>
    </html>
  • Show me


  • Example using the <br> tag
  • <html>
    <head>
    <title>This is a Title</title>
    </head>
    <body>
    <H1>This is a Heading</H1>
    This is some text. This text is followed by another little bit of text. After that text comes some more text. I need to force a new line, so I add a <br> This now breaks out a new paragraph. This is some text in the new paragraph and I think I may want to force a line break after this so I put in a <br> .
    </body>
    </html>
  • Show me


    HTML Text Elements
    • The <pre> tag displays text in it's exact format


    • <pre>
      Item number 1                $10.00
      Item Number 2                $20.00
      Item Number 3                $30.00
      
      </pre>

      Displays as:
      Item number 1                $10.00
      Item Number 2                $20.00
      Item Number 3                $30.00
      


    HTML Text Elements
    • Text Styles may be classified as Logical or Physical
      • Logical style tags allow the browser to best display the text
      • Physical style tags force a certain style
    • Not all platforms can support all styles of text...


    • Logical Style tags:
      • <em>emphasis</em>
        emphasis
      • <strong>strong</strong>
        strong
      • <code>code</code>
        code
      • <samp>samp</samp>
        samp
      • <kbd>kbd</kbd>
        kbd
      • <var>var</var>
        var
      • <dfn>dfn</dfn>
        dfn
      • <cite>cite</cite>
        cite
    • Not all platforms can support all styles of text...

  • Physical Style tags:
    • <b>bold</b>
      bold
    • <i>italics</i>
      italics
    • <u>underlined</u>
      underlined
    • <tt>Typewriter</tt>
      Typewriter
  • Not all platforms can support all styles of text...

  • HTML Lists:
    Unordered list

    <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    </ul>


    Displays as:
    • First item
    • Second item
    • Third item

    Ordered list

    <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    </ol>


    Displays as:
    1. First item
    2. Second item
    3. Third item

    Definition list

    <dl>
    <dt>First item
    <dd>Defintion of the first item
    <dt>Second item
    <dd>>Defintion of the second item, you can have quite a bit of text in a definition of a word or phrase in the text
    <dt>Third item
    <dd>Defintion of the third item
    </dl>


    Displays as:
    First item
    Defintion of the first item
    Second item
    Defintion of the second item, you can have quite a bit of text in a definition of a word or phrase in the text
    Third item
    Defintion of the third item

    Menu

    <menu>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    </menu>


    Displays as:
  • First item
  • Second item
  • Third item

  • Directory List

    <dir>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    </dir>


    Displays as:
  • First item
  • Second item
  • Third item


  • HyperText Links (anchors)

    • One of the most powerful feature of HTML and the Web is links
    • Links allow the user to jump to related information
    • Links are defined using the <a> tag

    • The <a> tag requires parameters to define where the link should go to
    • This parameter is "href="
    • The "href=" parameter points to a URL

    • A URL is a Universal Resource Locator
    • It can point to:
      • Another place in the current document
      • Another document on the same server
      • A document on a different server
      • To any named point in any other document
      • Any other resource identifiable by the URL naming scheme


    • To link to another page at current site:
    • <a href="/path/filename">displayed text</a>
    • Example anchor tag
      <a href=&NextPage">Next page</a>
      Displays as:
      Next page

    • To link to another page at another site:
    • <a href="scheme://host.domain/path/filename">displayed text</a>
    • Example anchor tag
      <a href="http://www1.fccj.cc.fl.us/personal/scott/index.html">Scott's home page</a>
      Displays as:
      Scott's home page

    • To link to location within another page at another site:
    • <a href="scheme://host.domain/path/filename#location">displayed text</a>
    • Example anchor tag
      <a href="http://www1.fccj.cc.fl.us/personal/scott/handbook.html#listserv"> Subscribing to a Listserv</a>
      Displays as:
      Subscribing to a Listserv

    • Any resource addressable by a URL may be linked to
    • Change the scheme from "HTTP://" to point to the resource you want
    • <a href="scheme://host.domain/path/filename">displayed text</a>
    • Example 1
      <a href="gopher://gopher.fccj.cc.fl.us">FCCJ Gopher</a>
      Displays as:
      FCCJ Gopher
      Example 2
      <a href="tn3270://fccjvm.fccj.cc.fl.us">FCCJ VM Logon</a>
      Displays as:
      FCCJ VM Logon


    Images

    • Images may be included in a page
    • Use the <img> tag to include images
    • At least one parameter is needed in the <img> tag to point to the image
    • The "src=" parameter points to the URL of the image

    • Example of image
    • <img src="gif/star.gif">
    • This example uses relative addressing, it assumes the image is on this server
    • It displays as:

    • The image may be located on any server
    • <img src="http://www1.fccj.cc.fl.us/images/star.gif">

    • Most browsers can read .gif and .jpg image types
    • Some browsers rely on external applications to see images
    • Be careful of image sizes - large sizes increase transfer time

    • Remember that not all people looking at your page will have the same graphics card and network connection speed
    • 24 bit images look nice but are are big
    • Consider using thumbnails for large graphics

    • Using the "height=" and "width=" parameters may increase performance
    • These parameters may also be used to scale images
    • <img src="gif/star.gif" width=144 height=144>
    • Create space on layout for the image before it is received

    • <img src="gif/star.gif" width=144 height=144>
      Displays as:

    • <img src="gif/star.gif" width=244 height=144>
      Displays as:

    • Images may also be used as links
    • Just include the <img> tag within the anchor tag
    • <a href="comp-34.html">
      <img src="gif/star.gif">Next page</a>
    • Next page

    • Remember that not all browsers support images
    • It's nice to add the "alt=" tag to images for text browsers
    • This parameter prints a text description of the picture
    • Otherwise, text browsers will display <image> or <unseen image> or something similar
    • <img src="gif/star.gif" alt="Next page">


    Forms

    • Forms provide a way to collect information from users
    • The information you collect may be handled in many different ways
      • The information may be mailed to an address
      • All of the information in the form may be sent to a script
      • Information may be extracted to form a query URL

    An example of a Form:
    Name
    E-mail address
    Comments?

    • Not all browsers support forms
    • Each server must be setup to handle the results of a form
    • Simplest way to handle a form is by mailing the results to someone

    • Basic form tag is <form>
    • Parameters on the <form> tag designate how to handle it
    • A form to be mailed is defined like this:
      <form method=POST action="mailto:me@mymail.home">
      .
      .
      </form>

    • The form parameters are
      action=
      The URL location of the program that will process the form
      method= either POST or GET
      Defines how the data will be exchanged between the form and the program handling the data.
      POST is the preferred method for most applications

    • Defining Input Fields
    • Use the <input> tag
    • There are parameters on <input>, but no ending tag
    • Parameters are:
    • type=
      Specifies the data type for the variable
      • type="text" and type="password" accept character data
      • type="checkbox" is either selected or not
      • type="radio" allows selection of one of many radio buttons if they all have the same name
      • type="submit" action button which sends the completed form to the server
      • type="reset" is an action button which resets the form to the default values

    • <Input> tag parameters (con't)
    • name=
      symbolic name identifing the input variable name
      <input type="checkbox" name="checkbox1">
      value=
      Initial value for the field, dependent on the type
      • type=text default values for field
      • type=reset or type=submit label to appear on the button
      checked
      for type="checkbox" or type="radio" , if present then this button is "on" by default
      size=
      Number of characters allowed for an input field

    • Examples:
    • <FORM ACTION="mailto:lsf@fccjvm.fccj.cc.fl.us" METHOD=POST>
      Name
      <INPUT TYPE="text" NAME="Name" SIZE=35><br>
      Sex : Male
      <INPUT TYPE="radio" NAME="sex">
      Female
      <INPUT TYPE="radio" NAME="sex">
      <br>
      Info Request<br>I want information about product A
      <INPUT TYPE="checkbox" NAME="info" VALUE="ON"><br> I want information about product B
      <INPUT TYPE="checkbox" NAME="Info" VALUE="ON"><br>
      <br>
      <INPUT TYPE="submit" VALUE="Submit Form">
      <br>
      <INPUT TYPE="reset" VALUE="Reset Form">
      </FORM>

      Name
      Sex : Male Female
      Info Request
      I want information about product A
      I want information about product B


    The HTML Virtual Lecture by L.Scott Freudenthal