Docstoc

4_HTML

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
    documents
•   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
<HTML>
  <HEAD>
    <TITLE> The title of the HTML
    document</TITLE>
  </HEAD>
  <BODY>
    This is where the actual HTML document
    text lies, which is displayed in the browser
  </BODY>
</HTML>
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

  <HTML>
    <HEAD>
         <TITLE> World Wide Web Institute Home
         page </TITLE>
    </HEAD>
    <BODY>
         ............
    </BODY>
  </HTML>
   •   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
                 </H1>
 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
    sensitive
        Attribute
                     Attribute Value
        Name


<H1 ALIGN =“LEFT”> EXAMPLE HEADING </H1>
         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
    document
•   HEAD element must come right after the <HTML> tag
       <HTML>
                <HEAD>
                      <TITLE> World Wide Web Institute Home page
                      </TITLE>
              </HEAD>
              <BODY>
                      ............
              </BODY>
       </HTML>
Title Element
• It names the document

•   It is displayed in title bar of the browser
•   TITLE should be short and descriptive of a
    document
•   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
  Element
• The BODY Element encompasses all the
  text and other material be displayed
  <HTML>
     <HEAD>
           <TITLE> A Basic Document Template
           </TITLE>
     </HEAD>
     <BODY>
           Put the body text in here
     </BODY>
  </HTML>
Paragraph Element
• Breaks Text into paragraphs

• It is indicated by <P> Start tag and </P> End
  tag
• </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
    </MENU>
•   List tag : <OL>...</OL>
•   List item tag : <LI>
•   Example :
    <P> Creating a Numbered List </P>
    <OL>
      <LI> Point 1 of the list.
      <LI> Point 2 of the list.
            ...
            ...
      <LI> nth Point of the list.
    </OL>
•   List tag : <UL>. . . </UL>
•   List item tag : <LI>
    Example :
      <P> Creating Bulleted Lists </P>
      <UL>
            <LI> Point 1 of Bulleted list.
            <LI> Point 2 of Bulleted list.
                  ...
                  ...
            <LI>nth Point of Bulleted list.
      </UL>
•   Also called definition list
•   Glossary List tag : <DL>. . .</DL>
•   A term tag : <DT>
•   Term’s definition tag : <DD>
Example :
  <DL>
  <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.
  </DL>
•   Menu list tag : <MENU> . . . </MENU>
•   Short Paragraphs with no bullets or
    numbers
    Example :
       <MENU>
              <LI> Go left.
              <LI> Go right.
       </MENU>

•   Directory list tag : <DIR> . . . </DIR>
•   Formatted Horizontally in columns
    Example.
       <DIR>
                <LI> apples
                <LI> oranges
       </DIR>
•   Listing inside another list
•   Inner List must end before the outer List
    ends
    Example :
    <OL>
       <UL>
                <LI>Beginning HTML
                <UL>
                       <LI>What HTML is
                       <LI>How to Write HTML
                       <LI>Doc structure
                       <LI>Headings
                </UL>
                <LI>Links
                <LI>More HTML
       </UL>
    </OL>
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
  </A></H2>
  <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>
  <DIV ALIGN=RIGHT>
  <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>
  </DIV>
•   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
    Size
•   Font can be changed : FACE Attribute
•   Font tag cannot be embedded in Heading
    tag
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
    <FONT COLOR = “# FFOOOO”> RED</FONT>
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= “http://www.webmaster-india.com/”>
  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>
    <IMG
    SRC=“logo.bmp”HEIGHT=100,WIDTH=50>
•   Clickable Image
     <A HREF= “http://www.mysite.com/”>
     <IMG SRC= “mylogo.gif”> </A>.
•   Background Image
     <BODY Background= “mylogo.gif”>
     .........
     </BODY>

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:3
posted:10/6/2010
language:English
pages:28