Document Sample
4_HTML Powered By Docstoc
					•   Introduction to HTML
•   Building blocks of HTML
    Ø   HTML Lists
    Ø   HTML Links
    Ø   Images in HTML
•   A set of instructions embedded in a document -
    Markup Language
•   Most basic thing in publishing Web pages is HTML
•   HTML is a language used to encode World Wide Web
•   HTML is a document - Layout and hyperlink -
    specification language
•   HTML makes a document interactive through special
    hypertext links
•   The HTML specifications for standards is approved by
    an unofficial body - World Wide Web (W3C)
•   HTML is a subset of SGML
•   HTML is not a Programming Language
•   HTML is not a WYSIWYG design Language
•   HTML is not complete
•   HTML is not extensible
•   HTML is not all you need to know to create
    good web pages
•   To create home pages and all primary pages
    of       the site
•   While publishing new documents consider
    the following :
    Ø   Features to be included
    Ø   Style of the document
    Ø   Audience of the document
    Ø   Format of material currently in
•   Process of Web Publishing are
    Ø   Planning
    Ø   Implementing
    Ø   Testing
    Ø   Maintenance
    <TITLE> The title of the HTML
    This is where the actual HTML document
    text lies, which is displayed in the browser
HTML Element
¨ Indicates that the text enclosed within a HTML
  element is HTML document
¨ It is the outermost element of a HTML document

¨ Encompasses the entire document within the
  <HTML> Start tag and <HTML> End tag

         <TITLE> World Wide Web Institute Home
         page </TITLE>
   •   Empty Tags
       Ø Line Break and Horizontal lines
   •   Container Tags
       Ø Begin Tag : Enclosed within angle brackets <B>
       Ø End Tag : Enclosed within angle brackets with a
                      forward slash </B>

                 <H1>                                      Element
Begin Tag
                  This is a simple example explaining
                        Elements, Tags and Text
 End Tag                                                Text
•   Every HTML Tag contains of
       ØA  Tag name
       Ø Sometimes followed by a tag attribute
•   Tag and attributes names are not case
    sensitive but attribute values are case
                     Attribute Value

         Attribute               Affected Content   End Tag
         Start Tag
•   Contains information about the document such as
    BASE element, TITLE element etc.,
•   It defines the head section of a document
•   Encompasses the head section within the <HEAD>
    Start tag and </HEAD> End tag
•   It defines the function of the document
•   HEAD information is not displayed as part of the
•   HEAD element must come right after the <HTML> tag
                      <TITLE> World Wide Web Institute Home page
Title Element
• It names the document

•   It is displayed in title bar of the browser
•   TITLE should be short and descriptive of a
•   Body Element
•   Paragraph Element
•   Line Break Element
•   Heading Element
•   Horizontal Line Element
•   Formatting Text Element
•   Preformatted Text Element
Body Element
• BODY Element lies after the Head
• The BODY Element encompasses all the
  text and other material be displayed
           <TITLE> A Basic Document Template
           Put the body text in here
Paragraph Element
• Breaks Text into paragraphs

• It is indicated by <P> Start tag and </P> End
• </P> is optional

Line Break Element
• This forces the browser to start a new line

• It is written as <BR>
Physical Formatting Elements
• Bold

• Italic
• <TT>
•   Numbered or Ordered Lists
•   Bulleted or Unordered lists
•   Glossary Lists
•   Menu Lists
•   Directory Lists
    List tag : <UL> and </UL> or <MENU> and
•   List tag : <OL>...</OL>
•   List item tag : <LI>
•   Example :
    <P> Creating a Numbered List </P>
      <LI> Point 1 of the list.
      <LI> Point 2 of the list.
      <LI> nth Point of the list.
•   List tag : <UL>. . . </UL>
•   List item tag : <LI>
    Example :
      <P> Creating Bulleted Lists </P>
            <LI> Point 1 of Bulleted list.
            <LI> Point 2 of Bulleted list.
            <LI>nth Point of Bulleted list.
•   Also called definition list
•   Glossary List tag : <DL>. . .</DL>
•   A term tag : <DT>
•   Term’s definition tag : <DD>
Example :
  <DT> Basil <DD> Annual, can grow four feet
  high; the scent of its tiny white flowers is
  heavenly <DT> Oregano <DD> Perennial sends
  out underground runners and is difficult to get
  rid of once established.
•   Menu list tag : <MENU> . . . </MENU>
•   Short Paragraphs with no bullets or
    Example :
              <LI> Go left.
              <LI> Go right.

•   Directory list tag : <DIR> . . . </DIR>
•   Formatted Horizontally in columns
                <LI> apples
                <LI> oranges
•   Listing inside another list
•   Inner List must end before the outer List
    Example :
                <LI>Beginning HTML
                       <LI>What HTML is
                       <LI>How to Write HTML
                       <LI>Doc structure
                <LI>More HTML
Individual Element
• Arranges text against the left margin, right
  margin or centered.
Example :
  <H1 ALIGN=CENTER>World Wide Web Institute</H1>
  <P ALIGN=CENTER >We don’t just paint the town red.</P>
  <H1 ALIGN=LEFT>Serendipity Products</H1>
  <H2 ALIGN=RIGHT><A HREF=“who.html”>Who We Are</A></H2>
  <H2 ALIGN=RIGHT><A HREF=“products.html”>What We Do
  <H2 ALIGN=RIGHT><A HREF=“contacts.html”>How To Reach Us
Block of Elements.
• Arrange a block of text element against the
  left margin, right margin or centered.
  Example :
  <H1 ALIGN=LEFT>Serendipity Products</H1>
  <H2><A HREF=“who.html”>Who We Are</A></H2>
  <H2><A HREF=“products.html”>What We Do</A></H2>
  <H2><A HREF=“contacts.html”>How To Reach Us </A></H2>
•   Font tag : <FONT> . . . </FONT>
•   Changing Font Size : SIZE Attribute
•   Default Font Size is 3
•   Font Size value range : 1 to 7
•   <BASEFONT> tag : set the default Font
•   Font can be changed : FACE Attribute
•   Font tag cannot be embedded in Heading
Examples :
A. <P> Bored with your plain old font ?
   <FONT SIZE = 5> Change it . </FONT></P>.
B. <P> Change the <FONT SIZE = +2> Font </FONT> Size
   again </P>.
•   Fonts displayed in browser can be
    changed using the FACE Attribute of
    FONT tag
    Example :
    <P> <FONT FACE = “Futura, Helvetica”> Sans Serif fonts
    are fonts without the small “ticks” on the strokes of the
    characters </FONT> </P>
•   The Font Color of a word or phrases can
    be changed using COLOR Attribute of
    FONT tag
•   COLOR applied to <BODY> tag, this
    change affects all the text on the page
    Example :
    <P> When we go out tonight, we are going to paint the town
Symbol   Code           Description
  “             &quote; Quotation mark
  &      &amp;          Ampersand
  >             &lt;            less than
  <             &gt;            Greater than
  ©      &copy;         Copyright symbol
  ®      &reg;          Registered trademark
         &nbsp;         Non breaking space
Hypertext links enable you to jump to
another page
• The element that marks the links is called
  ANCHOR element
• The Anchor element’s Start tag is <A> and
  End tag is </A>
  Example :
  <A hREF= “”>
  World Wide Web Institute Home page </A>
•   IMG Tag
    This tag embeds an image in the document
    Syntax: <IMG SRC= “filename”>
•   Positioning Image
     <IMG SRC= “logo.bmp”ALIGN=TOP>
•   Clickable Image
     <A HREF= “”>
     <IMG SRC= “mylogo.gif”> </A>.
•   Background Image
     <BODY Background= “mylogo.gif”>

Shared By: