HTML by leader6



        Antonis Stylianou
Markup Languages
   Text + Tags specifying how to process the text
       e.g., Word Processors – using binary codes
       e.g., hypertext markup languages - using plain text codes
   Purpose
       To add structure to a document and make it easy to identify
        and extract/address any individual component, e.g., XML
       To format the document for presentation, e.g., HTML
   SGML – Standard Generalized Markup Language
       More than just a markup language. Used to define other
            e.g., HTML is a simple subsets of SGML;
            XML is also a subset of SGML
   A language for specifying how text is displayed
   Consists of Tags
        <tagname [attributes]>
        </tagname>
        A tag may have multiple attributes. Many attributes are optional.
         They can appear in any order.
        e.g., <h1 align=“center”>Hello</h1>
   XHTML files are plain text files
             <h3 align=“center”>Course Information</h3>
              <p>Course ID: INFO2130</p>
              <p>Course Name: Introduction to Business Computing</p>
              <p>Professor: A. Stylianou</p>
              <p>Classroom: Friday, Rm. 35</p>
   Specifies mostly format of presentation
   Which of those text strings are data, which are field names?
   What is the structure of the data contained?
eXtensible Markup Language (XML)
    Also a subset of SGML
    You can create your own DTDs
               <Course_Information>
                  <Course_Name>Electronic Commerce</Course_Name>
                  <Professor>A. Stylianou</Professor>

    Can treat different pieces of data differently, do
     searches, etc.
    Separates data from display
    XML rules make it practical to parse well-formed XML
     without a priori knowledge of the tags
XHTML – Some rules
    Case: XHTML tag and attribute names must be written in lower-
    Mandatory tags: The <head> and <body> elements cannot
     be omitted. <title> must be the first element in the <head>
    Closure: All elements must be closed. Empty elements (i.e.,
     those without a closing tag) such as <br> and <img> must take
     the XML form of <br/> and <img/>. For compatibility with
     current browsers it is recommended to put whitespace before
     the forward slash e.g. <br />
    Overlapping: Elements must nest (last opened = fist closed),
     not overlap
    Attributes: Attribute values must be quoted. Attributes may
     not be minimized.
Tools for writing XHTML
   Text Editors – Notepad
   XHTML Aware Editors
       Nvu
       HTML-Kit
   Office Productivity Software
       Microsoft Office
   Web Site Development Environments
       Microsoft Visual Studio
       Microsoft Visual Web Developer
       Microsoft FrontPage
       Dreamweaver
XHTML Structure

   <title>Minimal document</title>
   Some interesting content here …. <br />
HTML Example
   <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
     <meta name="GENERATOR" content="Mozilla/4.5 [en] (Win98; I) [Netscape]">
     <meta name="Author" content="A. Stylianou">
     <meta name="Classification" content="education, electronic commerce">
     <meta name="Description" content="MIS Course on Electronic Commerce">
     <meta name="KeyWords" content="Electronic Commerce, course, syllabus,
     education, training, information systems">
     <title>ITSC 6352 - Electronic Commerce - Home Page</title>
              Everything else goes here
Some Basic Tags
    • Index of HTML 4.0 Elements
    • XHTML Tag List
    <p> … </p>                   New Paragraph
    <br />                       Line Break
    <hr />                       Horizontal Rule
    <h1> to <h6> … </h1>         Headings
    <strong>…</strong>           Bold
    <em>…</em>                   Italics
Head and Body
   <head></head>
       title
       meta
            name: “description”, “keywords”
            content
            <meta name="Author" content="A. Stylianou“ />
            <meta name="Classification" content="education, Information Systems“ />
            <meta name="Description" content="MIS Course“ />
            <meta name="KeyWords" content=“IS, IT, course, education, training“ />
            http-equiv=“refresh” content=“5;url=”

   <body></body>
       background=“image”
       bgcolor=“color”
       text, vlink, alink = “color”
Using Color
   Setting the colors for the whole page
       <body text=“colorname” or “#color hex number”>
       e.g.,  <body text=“blue”>
               <body text=“#0000ff”>
       Good sources
       Other parameters: bgcolor, link, alink, vlink
            E.g., <body bgcolor=“black” text=“white” link=“yellow”

   Image Backgrounds
       <body background=“image location”>
   Bulleted                  Numbered
    <ul>                       <ol>
     <li> Item Here</li>         <li> Item Here</li>
     <li> Item Here</li>         <li> Item Here</li>
    </ul>                      </ol>

   <ul type=“disk’>          <ol type=“A”>
       circle, square            a, i, II
   imagesrc=“ball.gif”
   Nested lists
More with <hr> Tag
   <hr width=“x” or “%” size=“n” align=“center” />

         <hr width=“300” size=“4” />
          <hr width=“50%” align=“left” />
Hyper Links
   A reference to a resource (a URL) is embedded in a
    currently displayed web page and made visible in the
   By clicking on the reference (the link), the linked
    resource is retrieved and displayed
   References can be
       Absolute: A complete URL is given specifying the precise
        address of the resource
       Relative: A portion of the URL is given. The address of the
        resource is deduced based on the current or base address
       External: A link to a resource outside the current document
       Internal: A link to a resource/location inside the current
More on Hyperlinks
   <a href=“url”>Link Text and/or Image</a>

   Absolute addressing
       <a href=“”>Present</a>
       <a href=“”>Get it</a>
       <a href=“”><img src=“x.jpg” /></a>

   Relative addressing
       <a   href=“resume.html”>Click here to see my resume</a>
       <a   href=“../images/tony.gif”>My Picture</a>
       <a   href=“images/tony.gif”>My Picture</a>
       <a   href=“/”>Home</a>

       Can specify a BASE address in the HEADer area
            <base href=>
Internal Links

   Called Bookmarks or Targets
   A part of the document is named using the name or id
       <a name=“contents”>Contents</a>
       <p id=“policy”>…</p>
       <img src=“z3.gif” alt=“Car pic” id=“car” />
   Then from another place in the same document:
       <a href=“#contents”>Back to contents</a>
   Or from a different document:
       <a href=“”>To Contents</a>
  Title attribute

      Displays tooltip with the contents of the title
      E.g.,

<a href=“resume.html” title=“See my resume”>Resume<a>
   Images may be stored at your site or a
    remote site
   You can create them using a graphics
   Must be in one of the following formats
       JPG
       GIF
       PNG

   You can also copy them from another
    site. Observe copyright laws!
       Right mouse click, Save Image As, or Copy Image Location
More on Images
   <img src=“location & filename” />
    e.g., <img src=“earth.gif” />
           <img src=“” />
   Optional parameters:
        align= top, middle, bottom, ...
        width, height in pixels or %
        alt=“alternative text”
        border = #of pixels
        Hspace, vspace in pixels
   e.g., <img src=“logo.gif” align=“top” height=“200” width=“50” />
Invisible Spacers
   Blank GIF with a transparent background
   Used to control page layout, and text/image
   E.g., <img src=“clear.gif” border=“0”
             width=“60” height = “20”>
Using Color
   Setting the colors for the whole page
       <body text=“colorname” or “#color hex number”>
       e.g.,  <body text=“blue” />
               <body text=“#0000ff” />
       Good sources
       Other parameters: bgcolor, link, alink, vlink
            E.g., <body bgcolor=“black” text=“white” link=“yellow”

   Image Backgrounds
       <body background=“image location” />
Working with Fonts
   <font size=1-7
              face=“font name”
              color=“color name” or “#number” />

   e.g. <font size=“5” color=“red” />
<!-- Used to provide documentation
      indicate disclaimers, copyrights, etc.
-- >
Web Design Guidelines
   Keep it simple
   Keep it up-to-date
   Get rid of dead links
   If you want to make heavy use of graphics
    provide alternative text page
   Consider who are the users
   Provide Index & Navigation tools
More Advanced HTML
   Tables
   Frames
   Forms
   Dynamic Documents
   Image Maps
   Animated GIFs
   Embedding AVI & Sound Files
Basic Table Syntax

                          Table caption
    Fruit Colors          <CAPTION></CAPTION>
   Apple    Red
                        Table row <TR></TR>
  Avacado Green

                   Table data (or ‘cell) <TD> </TD>
Basic Table Syntax
   <caption>Sample Table</caption>
               <th> Column One Header </th>
               <th> Column Two Header </th>
               <td> R1C1 </td>
               <td> R1C2 </td>
               <td> R2C1 </td>
               <td> R2C2 </td>
More About Tables
   <table> attributes
       align
       bgcolor
       border – pixel width of the border
       cellpadding – space between borders and data
       cellspacing – space between cells
       height – in pixels or as a %
       width – in pixels or as a %
   <tr> attributes
       align
       bgcolor
       valign – top, bottom, center
       bordercolor
More About Tables
   <th> and <td> attributes
       align
       bgcolor
       background
       bordercolor
       colspan
       height
       nowrap
       rowspan
       valign – top, bottom, middle
       width
More About Tables
  <col align=“center” width=“100”>
  <col span=“2” align=“left” width=“50%”>
   A frame is an independently scrollable area of
    a browser window
   Each frame typically displays a different HTML
   Frames are specified in a frameset document
   Frames can be named
   Frames can be targeted and controlled
    independently of one another.
The frameset document
   <frameset>
       rows
       cols
   <frame>              - defines single frame
       src                - document to be loaded into frame
       name               - name for frame
       marginwidth        - horizontal margin in # of pixels
       marginheight       - vertical margin in # of pixels
       scrolling - yes, no, auto
       noresize - prevents resizing
   <noframe> … </noframe>
   No body tags in the frameset document
   Frames can be nested
Column Frames
<title> … </title>
<frameset cols = “100, 100”>
  <frame src=“toc.html” name=“Contents”>
  <frame src=“stuff.html” name=“Main”>
  Get a real browser!
More Complex Framesets
<title> … </title>
<frameset cols = “100, *” border=“0”>
   <frameset rows = “150, *”>
        <frame src=“toc.html” name=“Contents” scrolling=“no”>
        <frame src=“stuff.html” name=“Main”>
   <frame src=“other.html” name=“Other”>
   Get a real browser!
Inline Frame
   IFRAME defines an inline frame for the inclusion of
    external objects including other HTML documents
   Can act as a target for links/scripts

   <iframe NAME=“myFrame” SRC="recipe.html"
    WIDTH=“300” HEIGHT=“100”>
    <!-- Alternate content for non-supporting browsers -->
    <h2>The Famous Recipe</h2>
Target attribute
   <a href =
        target = “newWin”>Go to UNCC Page</a>

   Special Targets
       _blank        - new unnamed window
       _self         - same window/frame
                        (over current display, where the
                         link is currently displayed)
       _parent       - immediate frameset parent
                        (if frames are nested, the outer frame
                         containing the one displaying the link)
       _top          - full, original window (cancels all
                       other frames)
   <form method=“” action=“”>
        <input name=“” type=“” value=“” />
        <select name=“”>
              <option value=“” />
   Method
       post: posting causing changes to server data (e.g., db
        update); form data sent as environment variable accessible by
       get: no changes to server data (e.g., db request); form data
        appended to URL (e.g., …/query.asp?account=123&order=22)
   Action – path to script that will handle the data sent
Form Elements
   Type
       hidden
       text
            Can specify
                  Width of the text input: size = “number of characters”; and
                  Number of characters limit: maxlength = “number of
       submit, reset – value is the text on button
            E.g., <input type = “submit” value = “Done”>
       textarea
            <textarea name=“feedback” rows=“10” cols=“5”></textarea>
More Form Elements
   Type
       <input name=“major” type=“checkbox” value=“MIS”>
       <input name=“major” type=“checkbox” value=“ECON”>
       <input name=“major” type=“checkbox” value=“ACCT”>

       <input name=“code” type=“password” size=“10”>

       <input name=“major” type=“radio” value=“MIS” checked>
       <input name=“major” type=“radio” value=“ECON”>
       <input name=“major” type=“radio” value=“ACCT”>

       <select name=“state” size=“2”>
         <option value=“AL”>Alaska
         <option value=“NC”>North Carolina
         <option value=“CA”>California
       <select multiple name=“state” size=“3”>
Image Maps
   <map name=“UNCC”>
       <area href=“URL” shape=“” coords=“” alt=“”>
       <area href=“URL” shape=“” coords=“” alt=“”>
    <img src=“” alt=“UNCC Picture” usemap=“#UNCC”>

   shape
       rect, poly, circle
Some more resources
   Web Developer Virtual Library
   HTML Goodies
   XHTML School

To top