Docstoc

HTML

Document Sample
HTML Powered By Docstoc
					          HTML

HyperText Markup Language-
             Learning outcomes
• Code web pages using HTML
• Explain why it is advisable to use XHTML rather than
  HTML
• Describe some technologies available for dynamic web
  pages
• Explore some problems of html
                 Essential Reading

• William Buchanan, Mastering The Internet, Ch. 6-8

• Mike Lewis, “Understanding Javascript”, June-Jully 2000

• Chuck Masciano and Bill Kennedy, HTML and XHTML the
  definitive guide, for reference
  http://www.pcnetworkadvisor.com

• Introductory materials on HTML & XHTML either a text book such
  as
   – John Shelly, HTML AND CSS explained, or
   – http:/www.webMonkey.com
   – http://www.w3schools.com
             What is an HTML File?

• HTML stands for HyperText Markup Language

• An HTML file is a text file containing small markup tags

• The markup tags tell the Web browser how to display the page

• An HTML file must have an htm or html file extension

• An HTML file can be created using a simple text editor
             HTML contd.
• HyperText Markup Language--HTML is a
  collection of platform-independent styles
  (indicated by markup tags) that define the
  various components of a World Wide Web
  document. HTML was invented by Tim
  Berners-Lee while at CERN, the European
  Laboratory for Particle Physics in Geneva.
              HTML Basics
• HTML documents are plain-text (also
  known as ASCII) files that can be created
  using any text editor (e.g., Emacs or vi on
  UNIX machines; SimpleText on a
  Macintosh; Notepad on a Windows
  machine). You can also use word-
  processing software if you remember to
  save your document as "text only with line
  breaks".
               HTML Basics
• An element is a fundamental component
  of the structure of a text document. Some
  examples of elements are heads, tables,
  paragraphs, and lists. Think of it this way:
  you use HTML tags to mark the elements
  of a file for your browser. Elements can
  contain plain text, other elements, or both.
               HTML Basics
• To denote the various elements in an
  HTML document, you use tags. HTML
  tags consist of a left angle bracket (<), a
  tag name, and a right angle bracket (>).
  Tags are usually paired (e.g., <H1> and
  </H1>) to start and end the tag instruction.
  The end tag looks just like the start tag
  except a slash (/) precedes the text within
  the brackets.
               HTML Basics
• <html>
   <head>
    <TITLE>A Simple HTML Example</TITLE>
  </head>
  <body>
     <H1>HTML is Easy To Learn</H1>
  <P>Welcome to the world of HTML. This is the
  first paragraph. While short it is still a
  paragraph!</P>
   <P>And this is the second paragraph.</P>
  </body>
   </html>
                 HTML Basics
• Markup Tags
• HTML
• This element tells your browser that the file
  contains HTML-coded information. The file
  extension .html also indicates this an HTML
  document and must be used.
               HTML Basics
• HEAD
• The head element identifies the first part of
  your HTML-coded document that contains
  the title. The title is shown as part of your
  browser's window
               HTML Basics
• TITLE
• The title element contains your document
  title and identifies its content in a global
  context. The title is typically displayed in
  the title bar at the top of the browser
  window, but not inside the window itself.
              HTML Basics
• BODY
• The second--and largest--part of your
  HTML document is the body, which
  contains the content of your document
  (displayed within the text area of your
  browser window).
• All other tags now come within the body
  tag.
                HTML Basics
• Headings
• HTML has six levels of headings, numbered 1
  through 6, with 1 being the largest. Headings are
  typically displayed in larger and/or bolder fonts
  than normal body text. The first heading in each
  document should be tagged <H1>.
• The syntax of the heading element is:
  <Hy>Text of heading </Hy>
  where y is a number between 1 and 6 specifying
  the level of the heading.
                 HTML Basics
• Paragraphs
• Unlike documents in most word processors,
  carriage returns in HTML files aren't significant.
  In fact, any amount of whitespace -- including
  spaces, linefeeds, and carriage returns -- are
  automatically compressed into a single space
  when your HTML document is displayed in a
  browser. A Web browser ignores this line break
  and starts a new paragraph only when it
  encounters another <P> tag
          Markup languages
• HTML places primary emphasis on structure
   – paragraphs, headings, lists, images, links, ….
• HTML places secondary emphasis on style (CSS)‫‏‬
   – fonts, colours, ….
• HTML does not label the meaning of the text (XML)‫‏‬
                      A basic document
• Every document should start with the following line

  <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>


• There are three required elements, defined by the tags <html>,
  <head> and <body>

 <html>
  <head>
   <title>My Home Page</title>
  </head>
  <body>
   <h1>Welcome</h1>
  </body>
 </html>
     Basic structure elements

• first and last tags
• The HEAD section
    – must come before the BODY section
    – contains generic information about the document
• Elements specified in the HEAD section can include
    – title, link, script, style
• The BODY section
    – contains the content of the document (text, images etc)
    – this content is structured by other tags
                     Block elements
• Block elements define sections of text, usually preceded by a
  blank line
• <p></p> - paragraph
• <h1></h1>...<h6></h6> - headings
• <pre></pre> - preserve (original format)‫‏‬
• <blockquote></blockquote> - indented text
• <div></div> - division
   – used to identify a section of the document that may be
     subject to special formatting (for example, using stylesheets).
                              Paragraphs
Paragraphs: <p>...</p>                   <p>here is a piece of
    – force a break between the          text that has been
       enclosed text and the text        placed inside a
       surrounding it                    paragraph</p>
                                         <p align="center">Here
    – the tagged region of text may be
                                         is another
       subject to special formatting
                                         paragraph</p>
<p align="center">Here is
  another paragraph</p>
   – align is an attribute of the
     paragraph tag
   – center is the value of the align
     attribute
                      Headings
• Six levels of importance
  <h1>...<h6>                <html>
• Use headings to divide      <head>
  document into sections       <title>Headings</title>
                              </head>
                              <body>
                               <h2>Chapter 1</h2>
                               <h3>1. Introduction</h3>
                                This is the introduction
                               <h3>2. Next section</h3>
                                This is the next section
                               <h4>2.1 A subsection</h4>
                                This is a subsection
                              </body>
                             </html>
                  Element relationships
• The elements marked by tags form a hierarchy
• The root element is html (marked by <html>...</html>)‫‏‬
• It usually has two children: head and body
    – each of these are further subdivided
• There are rules for which elements can contain other elements
    – e.g. headers cannot contain headers
    – see http://www.w3.org/ for a full list of rules
• Elements must not overlap each other
    – we cannot have: <h1>...<a..> ... </h1>...</a>
    – we can have: <h1>...<a..> ... </a>...</h1>
              Inline descriptive elements

Descriptive elements affect the appearance
                                             <body>
   of text depending on how the text is
                                             A <em>fascinating</em>
   described
                                             subject that I
• <em></em> emphasis, usually with           <strong>must</strong>
   italics                                   understand
• <strong></strong> strong, usually          </body>
   with bold
• <cite></cite> citation, usually in
   italics
• <code></code> usually results in
   monotype spacing
            Inline explicit style elements
•   <boldface></boldface>
•   <big></big> bigger font than surrounding text
•   <small></small> smaller font than surrounding text
•   <i></i> italics
•   <s></s> strikethrough
•   <sub></sub> subscripts
•   <sup></sup> superscripts
•   <span></span> delimits text for stylesheet control
•   <div></div> delimits blocks of text for stylesheet control
          Inline explicit style elements

<font> attributes
• face - name of font (must be installed)‫‏‬
   – "arial", "times", "verdana", "helvetica"
• size - absolute size (1-7), or relative to previous text
   – "2", "5", "7", "+1", "-2"...
• color - hexadecimal RGB, or a named color
   – "3399dd", "blue", "red"
• weight - boldness from 100, 200, ..., 900
   – "100", "300", "900"
• e.g.


<font face="arial" size="+1" color="pink" weight="300">
                 Unordered lists
• Unordered lists <ul>...</ul>
• <li>...</li> for the list
  elements
• each item has a bullet
  some normal text
  <ul>
  <li>apples</li>
  <li>oranges</li>
  <li>pears</li>
  <li>bananas</li>
  </ul>
                      Ordered lists

• Ordered lists <ol>...</ol>
• <li>...</li> for the list elements
• each item has a number



some normal text
<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
                       Definition lists
• <dl></dl> The enclosing tags
• <dt></dt> The definition term   <dl>
• <dd></dd> The definition         <dt>MIME</dt>
                                    <dd>
                                     Multipurpose...
                                    </dd>
                                   <dt>FTP</dt>
                                    <dd>
                                     File transfer...
                                    </dd>
                                   <dt>TCP</dt>
                                    <dd>
                                     Transmission...
                                    </dd>
                                  </dl>
                               Nested lists
• A list may contain another list
• The inner list is nested inside the outer
  list                                        <body>
                                              <ol>
                                               <li>apples</li>
                                                <ul>
                                                 <li>red</li>
                                                 <li>green</li>
                                                </ul>
                                               <li>oranges</li>
                                               <li>pears</li>
                                               <li>bananas</li>
                                              </ol>
                                              </body>
                Comments

• Comments are delimited by <!-- and -->
      <!– this is a comment -->

• Comments may span multiple lines

  <body>
   <!--
    this is
    a comment
   -->
  </body>
                    Horizontal lines
     • To insert a horizontal line to
       divide up parts of a document
       we use the empty tag <hr>
     • Attributes: align, size (in
       pixels), width (in pixels or
       percentage), noshade



<body>
 <h1>Chapter 1</h1>
  <hr align="center" size="3" width="50%" noshade>
 <h2>Introduction</h2>
</body>
                      Special characters
                                        <body>
                                        A <em> &lt;
• Some characters such as <, >, " and   fascinating &gt; </em>
  & have special meanings.              subject that I
                                        <strong>m&nbsp;u&nbsp;
• To prevent them being interpreted     s&nbsp;t</strong>
  as HTML code, they must be written    understand
  as follows: &lt; &gt; &quot;
                                        </body>
  &amp;
• Blank space is normally ignored in
  HTML. To include a space in your
  document use: &nbsp;
                                 Links

•   The link (anchor) element <a>...</a> provides hypertext links
    between
    1. different documents (using a URL)‫‏‬
    2. different parts of an individual document
•   User selection of the link (hot spot) results in
    1. retrieval and display of the designated document
    2. movement to relevant part of same document

     <body>
     The Department of
     <a href="http://www.doc.gold.ac.uk/index.html"> Computer
     Science</a> is a very ....
     </body>
                         Link with URL
 Example:

      <body>
      The Department of
      <a href="http://www.doc.gold.ac.uk/index.html">
      Computer Science</a> is a very ....
      </body>


• The href attribute gives the URL
  of the target page
• The text between the tags is
  highlighted – selecting it activates
  the link
                        Relative addressing
The   previous example gave the full path name, known as the absolute address



<a href="research.html">Research</a>
<a href=“./pub.html">Publications</a>
<a href="../../index.html">Computer Science home</a>



• The ‘root’ directory for the link is assumed to be the directory
  containing the parent page of the link
                           Images
•   Images are included using the empty tag <img>
•   Example:
    <img src="mypicture.gif" alt="my picture">
•   The src attribute specifies the file containing the image
     – absolute or relative path names can be used (see notes for
        links)‫‏‬
•   The alt attribute specifies the text to be displayed if the image is
    not viewed
     – some users choose not to display images (for
       faster download)‫‏‬
     – also used for compatibility with older
       browsers
                         Image attributes
• The size attributes control the size of the image
 <img src="cat.gif" height="60" width="90" align=“top” alt="cat">


• The align attribute controls the vertical location of the image, relative to
  the line of text
   – align="top"          top of image aligned with top of text
   – align="middle" centre of image aligned with centre of text
   – align="bottom" bottom of image aligned with baseline of text

• The align attribute also controls the horizontal location of the image,
  relative to the line of text
   – align="left" image aligned with left margin
   – align="right" image aligned with right margin
                        Links with images

• A link element can include an image instead of text
   – both images and text can be included if required
  <body>
  Enter my world of cats <a href="cats.html"><img
  src="cat.gif" height="60" width="60" align="middle"
  alt="cat"></a>
  </body>
                    Colour
• Colours are specified with hexadecimal numbers for
  the red, green and blue primary colours, preceded
  by a “#”.
• To set the background colour of a web page




         <body bgcolor="#994422">
Colour – RGB Model


    – #ff0000 (red),
    – #00ff00 (green)‫‏‬
    – #0000ff (blue)‫‏‬
    – #ffff00 (yellow)‫‏‬
    – ...
    – #3395ab (a pastel blue)‫‏‬
                                   Colour
                  <body text="#994422">

      • To set the colour of all text on a page
• In the body element, the colour of link text can be controlled with the
  following attributes:
   – link           for an un-visited link
   – vlink          for a visited link
   – alink          for a link that is currently selected by the mouse
• Example
         <body text="#000000" link="#0000ff">
                                     Colour

• To set the colour of an individual piece of text use the font element (or
  preferably stylesheets – see later)




  <body bgcolor="#3395ab">
  Text in quotes <font color="#ff0000">"such as
  this"</font> has a different colour
  </body>
                 Colour names
• Netscape and Internet Explorer allow textual names for
  colours instead of hexadecimal
• This is OK provided the page is not looked at by a browser that
  does not support colour names
• For example




<body bgcolor="gray" text="black" link="blue">
     Background patterns

• Rather than a uniform color
• You can give the background of web
  page a pattern as follow:
     <body background="tileimage.gif">
                     Forms
• Server-based programs may return data to the client
  as a web page

• Client-side scripts can read input data
   – To validate the data, prior to sending to server
   – To use in local processing which may output web
      page content that is displayed on the client
         Example applications
• Questionnaires to provide feedback on a web site

• e-commerce, to enter name, address, details of purchase and
  credit-card number
   – request brochures from a company
   – make a booking for holiday, cinema etc.
   – buy a book, cd, etc
   – obtain a map giving directions to a shop

• Run a database query and receive results (an important part of
  e-commerce)‫‏‬
                       Input types

•   text
•   checkbox
•   radio      (buttons)‫‏‬
•   select     (options)‫‏‬
•   textarea
•   password
•   button
•   submit
•   reset
•   hidden
•   file
•   image
              The method and action
                     attributes
• The method attribute specifies the way that form data is sent to the
  server program
   – GET appends the data to the URL
   – POST sends the data separately
• The action attribute specifies a server program that processes the form
  data (often as a URL)‫‏‬


 <body>
  <form method="POST" action="comments.php">
   <h2>Tell us what you think</h2>
   <!-- etc -->
  </form>
 </body>
                  The input element:
                    type="text"

• The type attribute specifies the
  type of user input
• The name attribute gives an
  identifier to the input data


<form method="POST" action="comments.php">
  <h2>Tell us what you think</h2>
  Name <input name="name" type="text" size="20"><br>
  Address <input name="address" type="text" size="30">
</form>
               The input element:
               type="checkbox"
• The name attribute is used to
  define a set of checkboxes
• The value attribute identifies
  the individual checkbox
• If the checked attribute is set
  the box is initially checked
How did you hear about this web site?<br>
A friend
<input type="checkbox" name=“name" value="friend"><br>
Search engine
<input type="checkbox" name=“name" value="engine"><br>
                        The input element:
                         type="radio"
• Radio buttons are similar to
  checkboxes, but only one can be
  selected
• To select a button by default, use the
  checked attribute (for one button
  only)‫‏‬


How did you hear about this web site?<br>
A friend
<input type="radio" name=“name" value="friend"><br>
Search engine
<input type="radio" name=“name" value="engine"><br>
<!– etc -->
                       The input element:
                        type="button"
• The name attribute uniquely identifies a
  button
• The value attribute gives a label to the
  button
• Actions can be associated with buttons
  using JavaScript
   – see later

Do you want to receive any further information:<br>
<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>
         The input element:
       type="submit/reset"
• type="submit"
  – clicking this button sends the
    form data to the program (URL)
    specified in the action
    attribute of the form
• type="reset"
  – clicking this button clears all
    data entered so far
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
      The input element:
type="password/file/hidden"
• type="password"
   – similar to type="text" except that the input is echoed
     with asterisks (so not visible)‫‏‬
• type="file"
   – provides a file dialogue box to specify a file that is sent to
     the server
• type="hidden"
   – similar to text input, but the value attribute is used to
     specify data that is to be sent to the server. Nothing
     appears on the screen.
   – The data might be set by a server program to keep track of
     the details of a particular transaction.
                The textarea element

• Used for multi-line text input
• The size of the input area is
  specified with the cols and
  rows attributes
• Any text placed inside the
  element appears in the input
  area (this can be deleted).
Please write your comments:<br>
<textarea name="comments" rows="5" cols="20">
  put text here
</textarea>
                        The select element

• The select element provides a menu
  of options
• An option can be selected by default
  using the selected attribute
  (otherwise the first in the list is initially
  selected)‫‏‬

         How do you rate this site?<br>
         <select name="rating">
           <option>Good
           <option selected>Bad
           <option>Ugly
         </select>
               Tables

• Tables provide a means of organising
  the layout of data


• A table is divided into rows and
  columns: these specify the cells of
  the table
         Tables            <table border="1">
                            <tr>
                             <th>Name</th>
• <table>   main element     <td>A B Morgan</td>
• <tr>      table row        <td>D P Jones</td>
                            </tr>
• <th>      table header    <tr>
                             <th>Course</th>
• <td>      table data
                             <td>Fishing</td>
                             <td>Sailing</td>
                           </tr>
                            <tr>
                             <th>Year</th>
                             <td>8</td>
                             <td>5</td>
                            </tr>
                            <tr>
                           </table>
   Rows and
   Columns               <table border="1">
                          <tr>
                           <th colspan="2">Name</th>
• Cells can span
                           <th>Course</th>
  multiple columns and     <th>Year</th>
  multiple rows with      </tr>
  the colspan and         <tr>
  rowspan attributes       <td>A B</td>
                           <td>Morgan</td>
                           <td rowspan="2">Fishing</td>
                           <td>5</td>
                          </tr>
                          <tr>
                           <td>D J</td>
                           <td>Jones</td>
                           <td>8</td>
                          </tr>
                          <tr>
                         </table>
  The align and width attributes
• The align               <table border="1" align="center">
  attribute                <tr>
  determines the            <th colspan="2" width="60%">Name</th>
                            <th rowspan="2">Course</th>
  position of the text
                            <th rowspan="2">Year</th>
  within a cell            </tr>
• The width                <tr>
  attribute                 <th>Last</th>
  determines the            <th>Init.</th>
  width of the row         </tr>
  relative to the table    <tr>
                            <td>Morgan</td>
                            <td>AB</td>
                            <td>Fishing</td>
                            <td align="center">5</td>
                           </tr>
                           <!– etc -->
                         Table attributes
Table attributes
   •   align alignment relative to the page
   •   width in pixels or percentage of page width
   •   border - width of border (pixels)‫‏‬
   •   cellspacing separation between cells (pixels)‫‏‬
   •   cellpadding - space around data inside cell (pixels)‫‏‬
   •   bgcolor - background colour (inside cells)‫‏‬

Furthermore
• The <caption> element puts a title above the table
                  Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
 <caption>
   <h2>Course Data</h2>
 </caption>
 <tr>
  <th>Name</th>
  <th>Course</th>
  <th>Year</th>
 </tr>
 <tr>
  <td>A B Morgan</td>
  <td>Fishing</td>
  <td>5</td>
 </tr>
<!– etc -->
     Frames and Framesets
• A frameset partitions a web browser
  window so that multiple web documents
  can be displayed simultaneously.

• Example application: To maintain a
  permanently visible directory of links
  within your site, while also displaying one
  or more selected documents from the
  site.
                        Framesets
  <html>
   <head><title>Frames 1</title></head>
   <frameset cols="140,*">
    <frame name="navF" src="navigation.html">
    <frame name="mainF" src="intro.html">
   </frameset>
  </html>

• The frameset element replaces
  the body element
• frameset has attributes cols or
  rows, defined in terms of pixels,
  percentage(%) or unspecified (*)
   – this splits the window into two
      or more columns or rows
             Frame attributes
   <frameset cols="140,*">
     <frame name="navF" src="navigation.html">
     <frame name="mainF" src="intro.html">
   </frameset>



• The name attribute uniquely identifies the frame.
  It may be used as the target in an anchor (<a>)
  element

• The src attribute specifies the web page to be
  placed in the frame initially (it may subsequently
  be overwritten)‫‏‬
                      Frame attributes
  <frameset cols="140,*">
    <frame name="navF" src="navigation.html">
    <frame name="mainF" src="intro.html">
  </frameset>



• The scrolling attribute ("auto", "yes",
  "no") specifies whether the frame is to have
  scroll bars

• The frameborder attribute ("0", "1")
  specifies whether the frame is to have a border
                                  navigation.html
   • The anchor tag has a target attribute
      – takes the name of the frame used to display the information
   • All anchors below are targeted to the "mainF" frame




<html><head><title>Navigation Bar</title></head>
 <body><center>
  <a href="course.html" target="mainF">HTML Course</a><br><br>
  <a href="paragraph.html" target="mainF">Paragraphs</a><br>
  <a href="headings.html" target="mainF">Headings</a><br>
  <a href="ulists.html" target="mainF">Unordered lists</a><br>
  <a href="olists.html" target="mainF">Ordered lists</a><br>
  <a href="nlists.html" target="mainF">Nested lists</a><br>
  <a href="intro.html" target="mainF">Home</a><br>
 </center></body>
                            intro.html
• A simple document which is initially placed in the
  "mainF" frame
• This is replaced when a user clicks on a link in the
  "navF" frame

<html>
 <head><title>Internet Computing</title></head>
 <body>
  <h2>Welcome to the HTML Course</h2>
  <p>
   <h4>Please select the subject of...</h4>
  </p>
 </body>
</html>
                Nested framesets
<html>
 <head><title>Frames 2</title></head>
 <frameset cols="140,*">
  <frame name="navF" src="navigation.html">
  <frameset rows="30%,70%">
   <frame name="upperF" src="intro.html">
   <frame name="lowerF" src="course.html">
  </frameset>
 </frameset>
</html>
                         Noframes

• Some browsers cannot process frames. Alternative content
  should be provided using the noframes element
<html>
 <head><title>Frames 1</title></head>
 <frameset cols="140,*">
  <frame name="navF" src="navigation.html">
  <frame name="mainF" src="intro.html">
 </frameset>
 <noframes>
  <body>
   Something here for browsers not supporting frames
  </body>
 </noframes>
</html>
                         Stylesheets

• One of the most important functions of HTML is its ability to
  separate the content and presentation of a web document
• Aspects of the document presentation include
   • positioning on the page
   • choice of fonts
   • colours and backgrounds
   • borders
                            Styles
•   A style is a set of formatting instructions that can be applied
    to a piece of text.

•   Styles can be defined
    –    Within a single HTML tag – Inline styles
    –    In the <head> section, and applied to the whole
         document – Global styles
    –    In external files, and can be applied to any document by
         including the URI of the file – Stylesheets
                                 Inline styles
• Every tag has a style attribute

• This can be assigned a style definition

• A style definition is a list of property-value pairs
   – a property is separated from its value by a colon
   – property-value pairs are separated by semi-colons
   – the list is delimited by quotation marks
• A property-value pair is also called a declaration

• Inline styles only affect the text contained in the tag


  <h1 style="color:#2255ff; border:ridge">Inline styles</h1>
                          Inline styles
<body>
  <h1 style="color:blue; border:ridge">
    Inline styles</h1>
  <p style="margin-left:10%; background:#ffffcc">
    some text . . . some text
  </p>
<body>




•   The heading is boxed with the
    text displayed in blue
•   The paragraph is indented by
    10% (from the left) and has a
    cream background
                                  Global styles
• A style can be defined in the
  head of the document using
  the <style> tag
                                  <head>
• The style declaration is         <title>Styles</title>
  placed inside a comment so       <style>
  that it can be ignored by         <!--
  older browsers                    h1 {
                                      color: red;
                                      border: thin groove;
• Each style rule consists of         text-align:center;
  the name of an element            }
  (selector) followed by a list     -->
  of property-value pairs          </style>
  enclosed in curly brackets      </head>
                                  <body>
                                  <h1>Simple styles</h1>
                                  </body>
              Example
<head>
 <style>
  <!--
  h1 {
    color: red;
    border: thin groove;
    text-align:center;
  }
  p {
    margin-left: 10%;
    border: ridge;
    background: #ee8822;
  }
  -->
</style>                   • A global style applies to
</head>                      every instance of the
<body>
<h1>Simple styles</h1>       corresponding element in
<p>some text . . . </p>      the document
</body>
                               Stylesheets
• Styles can be declared in separate files called stylesheets.
• A stylesheet is linked to a web document by including the following line in
  the head section

  <link rel="StyleSheet" type="text/css" href="URL">


   •   rel specifies the type of link being used
   •   href specifies a hyperlink to the stylesheet file
   •   type specifies the MIME type of the data
   •   text/css describes the “cascading style sheets” type
                 Multiple stylesheets

• The first stylesheet is included using the <link> tag
• Any further stylesheets have to be imported
• The @import command is placed inside a comment
     <head>
      <title>Stylesheets</title>
      <link rel="StyleSheet" type="text/css"
       href="http://www.abc.com/mainstyles.css">
      <!–
       @import
        url(http://www.abc.com/deptstyles.css)‫‏‬
        url(mystyles.css)‫‏‬
      -->
     </head>
                Cascading stylesheets
• Multiple stylesheets can be included in a document
• Styles defined in the first stylesheet are overridden by
  corresponding styles defined in the second stylesheet
   – the stylesheets are said to cascade
• Example
   – mainstyles.css – the company's stylesheet
   – deptstyles.css – the department's stylesheet
   – mystyles.css – the user's stylesheet
• If the stylesheets are included in this order, the user's style
  definitions will override the department styles, which in turn
  will override the company styles
               Cascading stylesheets
• Different stylesheets for different media, platforms and
  systems
   – Font size in CSS does not yield sam results on different
      screens. On Print Media 10pt size fonts are always the
      same size because the size of a pt is well defined. The
      conversion of pt to px (pixel) is different on Windows,
      Linux or Mac OS X platforms.
   – Browser allow to customize layout and fonts
                                Style rules

 • A style rule has two parts
    – a selector (element name) and a set of declarations
 • The selector associates the style rule with a HTML tag of the
   same name


• Each declaration has two parts:       selector {
   – a property and a value               property:   value;
                                          property:   value;
• For readability, each declaration       property:   value;
  should be placed on a separate line     property:   value;
                                        }
                               Style rules
• Some properties can be given multiple values
   – The browser first looks for the "Book Antiqua" font
   – If this is not on the system, it looks for the Times font
   – Last resort: the browser uses the generic serif font




body {
  background-color: lightgreen;
}
h1 {
  color: lightgreen;
  background-color: blue;
  font-family: "Book Antiqua", Times, serif;
  border: thick groove #9baab2;
}
                   Properties and values

Fonts
• font-family: <family name> [<generic family>]
• font-style: normal|italic|oblique
• font-weight: normal|bold|bolder|lighter
• font-size: small|medium|large|smaller|larger

Backgrounds and colours
• color: <value>
• background-color: <value>|transparent
• background-image: URL|none
            Properties and values
Text
• text-decoration:
   none|underline|overline|line-through
• text-transformation:
   none|capitalize|uppercase|lowercase
• text-align: left|right|center|justify
• text-indentation: length|percentage
Example: To remove underlining on links:


 a:link, a:visited, a:active{text-decoration: none}
            Properties and values
Boxes
• margin: length|percentage|auto {1,4}
• border-width: thin|thick|medium|length {1,4}
• padding: length|percentage {1,4}
• border-color: value {1,4}
• border-style:
  none|dotted|dashed|solid|double|groove {1,4}
• ridge: value {1,4}
• width: length|percentage|auto
• height: length|auto
               Properties and values
Position
• location: absolute|relative|fixed
   – absolute: relative to upper left corner of window
   – relative: relative to the last item
   – fixed:       does not move when the page is scrolled
• left: distance from left border of window (pixels, %)‫‏‬
• top: distance from top border of window (pixels, %)‫‏‬
                             Classes
• Simple style rules change the appearance of all instances of
  the associated element
• A class is a style definition that may be applied as and when
  we choose
   – if we don't want the styles, we don't have to use them
• Simple classes are applied to a single type of element
• Anonymous classes can be applied to any type of element
                   Simple classes
</head>
 <style>
 <!--
  h1.fred {
    color: #eeebd2;
    background-color: #d8a29b;
    border: thin groove #9baab2;
  }
 -->
 </style>
</head>
<body>
 <h1 class="fred">A Simple Heading</h1>
 <p>some text . . . some text</p>
</body>
               Anonymous classes
</head>
 <style>
 <!--
  .fred {
    color: #eeebd2;
    background-color: #d8a29b;
    border: thin groove #9baab2;
  }
 -->
 </style>
</head>
<body>
 <h1 class="fred">A Simple Heading</h1>
 <p class="fred">some text . . . some text</p>
</body>
                                                                         white

                                                                                     grey
                  CSS Classes…cont.
TD {font-face : sans-serif; font-size : 12pt}
.even {background-color : #FFFFFF}
.odd {background-color : #CCCCCC}


•       In your HTML code for the table:
    –         you simply reference the class to invoke the style:
          •       <td class=“even”>display this text with a white background </td>
          •       <td class=“odd”>and this text with a grey background
                  </td>
                    IDs
                                  • Classes specify styles for
<head>
 <style>                            particular instances of an
 <!--                               element
  #list1 {
    color: blue;                  • IDs specify the style of a single
    background: cyan;               element
    text-decoration: underline;
    border: thin groove red;
  }
 -->                                     • IDs allow the
 </style>                                  element to be
</head>
<body>                                     identified by other
 <ul id="list1">                           elements on the
  <li>First</li>
  <li>Second</li>                          page
  <li>Third</li>
 </ul>
</body>
                  <DIV> & <SPAN> are your friends
<div> and <span> tags allow you define exceptions to the general rules
     of your body text…and they are helpful tools for document
     designers and web developers

<div> is usually used to designate styles for block elements that should
     stand apart from the body text…like callout quotes. Everything
     inside a <div> tag takes on the <div> attributes…and you can
     specify classes and ids for <div> too!
               Divisions and spans
• Rather than applying styles to an element itself, we
  wrap the element in
   – a div element (usually for block elements), or
   – a span element (usually for inline elements)‫‏‬
• Any required formatting can then be applied to the
  <div> or <span> element.
• Div and span elements become part of the document
   – In particular, each can have class and id
     attributes
           Divisions
<head>
 <style>                          • Styles can be applied
 <!--
  .myclass {
                                    to blocks of HTML code
    color: blue;                    using div
    background: cyan;
    text-decoration: underline;
    border: thin groove red;
  }
 -->
 </style>
</head>
<body>
 <div class="myclass">
  <h2>A Simple Heading</h2>
  <p>some text . . . </p>
 </div>
</body>
            Spans
<head>                        • spans are similar
 <style>                        to divisions
 <!--
  .myclass {
    color: red;
    background: cyan;
    text-decoration: none;
  }
 -->
 </style>
</head>
<body>
 <span class="myclass">
  <h2>A Simple Heading</h2>
  <p>some text . . . </p>
 </span>
</body>
                              Layers

• The browser maintains a stack of layers, each containing text,
  images etc. The browser displays layers on top of each other
  (in order).

• The <div> tag has the following attributes
   – z-index: the number of the layer containing the
     division
   – left and top : the location (top-left corner) of the
     division in pixels
   – width and height: the size of the division in pixels
   – position: absolute or relative
                                   Layers


        • Layers can be manipulated using JavaScript to create Dynamic
          HTML pages
        • Layers can also be used to organise page content

<body>
<div style="z-index:2; left:100px; top:50px; position:absolute;
background-color:red; font-size:30">
<p>THIS STUFF IS ON TOP</p>
</div>

<div style="z-index:1; left:10px; top:10px; position:absolute;
background-color:yellow; font-size:56">
<p>BACKGROUND STUFF</p></div>
</body>
             Summary

By now you should be able to use:
• Tables
• Frames
• Stylesheet – CSS
  – Inline style
  – Embedded style
  – External style
        Typical exam question
• explain why is it important to separate the
  content from the style.
• what is CSS?
• State three ways in which styles can be used.
  And explain the advantages and disadvantages
  of each one.
                         Next
• Look at the disadvantages of html
• XML
  – Well formed vs valid xml document
• XHTML vs HTML
• DHTML
              Useful sites

• http://www.w3schools.com/
• http://www.w3schools.com/html
• http://www.w3schools.com/css

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:184
posted:4/11/2011
language:English
pages:101