Introduction


Haider M. Habeeb
   The Internet
   The World Wide Web
   The Web Browser
       The Ef fect of Browser Wars
   Dynamic HTML
   HTML Basics
   Internet:
       network of computers that are connected to each
        other and are able to transmit and receive data
   World Wide Web:
       It’s made up of millions of files and documents
        residing on different computers across the Internet
       Many different devices can access the web:
        desktop and laptop computers, personal digital
        assistants (PDAs), mobile phones
   Web Browser
       a program intended to visually render web
        documents.
       whereas some user-agents interpret HTML but
        don’t display it.
       known as a client, because it is the thing requesting
        and receiving service.
   Browser Wars
       Browser s incompatibility.
       Problems  browser manufacturers created their
        own non-standardized.
       Web pages look fine on one browser, but not with
        other browsers.
       W3C standards  Internet Explorer 5 and 6,
        Netscape 6 and 7, and Firefox. DHTML has become
        a much more powerful tool and a standard.
   DHTML is:
       stands for Dynamic HyperText Markup Language.
       NOT a Language
       NOT a language or a web standard.
       a combination of HTML, JavaScript, DOM and CSS.
   “Dynamic HTML is a term used by some
    vendors to describe the combination of HTML,
    style sheets and scripts that allows documents
    to be animated.”
                        World Wide Web Consortium (W3C)
   What we are going to study?
       HTML - Hyper Text Markup Language.
       CSS - Cascading Style Sheets.
       JavaScript - scripting language on the internet.
       DOM – Documents Object Model.
   Static vs. Dynamic HTML
   Static HTML:
       HTML elements (paragraphs, images, etc.) in a
        specific order in the source code.
       The browser always showed all elements in this
        order.
       Positioning and styling was done by tables.
       For any changing, we had to rewrite the HTML.
   Dynamic HTML:
       re-organize our pages on the fly: we can take some
        elements out of the natural flow of the page, put
        them somewhere else and change its position
        again.
       It calculates the tables and paragraphs and other
        things, then displays them in the best possible way,
        one by one, from the beginning to the end of the
        HTML document.
   What is HTML?
       HTML is a language for describing web pages.

   HTML stands for Hyper Text Markup Language
   HTML is not a programming language, it is a
    markup language
   A markup language is a set of markup tags
   HTML uses markup tags to describe web
    pages
   HTML Tags
       HTML markup tags are usually called HTML tags

   HTML tags are keywords surrounded by angle brackets like
    <html>
   HTML tags normally come in pairs like <b> and </b>
   The first tag in a pair is the star t tag, the second tag is the
    end tag
   Start and end tags are also called opening tags and closing
    tags
   HTML Documents
       HTML documents describe web pages
       HTML documents contain HTML tags and plain text
       HTML documents are also called web pages
   The purpose of a web browser (Internet
    Explorer or Firefox) is to read HTML documents
    and display them as web pages.
   The browser does not display the HTML tags, but
    uses the tags to interpret the content of the page.
   What do you need?
       Notepad for editing your HTML documents.
       Browser for displaying your web pages


                       Ready?
   .HTM or .HTML File Extension?
       When you save an HTML file, you can use either the
        .htm or the .html file extension.
       With new software it is perfectly safe to use .html.
Simplified Structure of HTML:
<html>
   <head>
     <title> . . . . . . . . . . . .</title>
   </head>
   <body>
   …….
   ……..
   </body>
</html>
   HTML Headings
       HTML headings are defined with the <h1> to <h6> tags.
Example:
<html>
<head>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
   HTML Paragraphs
       HTML paragraphs are defined with the <p> tag.

   Example
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
   HTML Formatting Tags
       HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
       These HTML tags are called formatting tags.
   Example:
    <html>
    <body>
     <p><b>This text is bold</b></p>
    <p><strong>This text is strong</strong></p>
    <p><big>This text is big</big></p>
    <p><i>This text is italic</i></p>
    <p><small>This text is small</small></p>
    <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
     </body>
    </html>
Dynamic  html (#1)

Dynamic html (#1)

  • 1.
  • 2.
    The Internet  The World Wide Web  The Web Browser  The Ef fect of Browser Wars  Dynamic HTML  HTML Basics
  • 3.
    Internet:  network of computers that are connected to each other and are able to transmit and receive data  World Wide Web:  It’s made up of millions of files and documents residing on different computers across the Internet  Many different devices can access the web: desktop and laptop computers, personal digital assistants (PDAs), mobile phones
  • 4.
    Web Browser  a program intended to visually render web documents.  whereas some user-agents interpret HTML but don’t display it.  known as a client, because it is the thing requesting and receiving service.
  • 5.
    Browser Wars  Browser s incompatibility.  Problems  browser manufacturers created their own non-standardized.  Web pages look fine on one browser, but not with other browsers.  W3C standards  Internet Explorer 5 and 6, Netscape 6 and 7, and Firefox. DHTML has become a much more powerful tool and a standard.
  • 6.
    DHTML is:  stands for Dynamic HyperText Markup Language.  NOT a Language  NOT a language or a web standard.  a combination of HTML, JavaScript, DOM and CSS.
  • 7.
    “Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.” World Wide Web Consortium (W3C)
  • 8.
    What we are going to study?  HTML - Hyper Text Markup Language.  CSS - Cascading Style Sheets.  JavaScript - scripting language on the internet.  DOM – Documents Object Model.
  • 9.
    Static vs. Dynamic HTML  Static HTML:  HTML elements (paragraphs, images, etc.) in a specific order in the source code.  The browser always showed all elements in this order.  Positioning and styling was done by tables.  For any changing, we had to rewrite the HTML.
  • 10.
    Dynamic HTML:  re-organize our pages on the fly: we can take some elements out of the natural flow of the page, put them somewhere else and change its position again.  It calculates the tables and paragraphs and other things, then displays them in the best possible way, one by one, from the beginning to the end of the HTML document.
  • 11.
    What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pages
  • 12.
    HTML Tags  HTML markup tags are usually called HTML tags  HTML tags are keywords surrounded by angle brackets like <html>  HTML tags normally come in pairs like <b> and </b>  The first tag in a pair is the star t tag, the second tag is the end tag  Start and end tags are also called opening tags and closing tags
  • 13.
    HTML Documents  HTML documents describe web pages  HTML documents contain HTML tags and plain text  HTML documents are also called web pages  The purpose of a web browser (Internet Explorer or Firefox) is to read HTML documents and display them as web pages.  The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
  • 14.
    What do you need?  Notepad for editing your HTML documents.  Browser for displaying your web pages Ready?
  • 15.
    .HTM or .HTML File Extension?  When you save an HTML file, you can use either the .htm or the .html file extension.  With new software it is perfectly safe to use .html.
  • 16.
    Simplified Structure ofHTML: <html> <head> <title> . . . . . . . . . . . .</title> </head> <body> ……. …….. </body> </html>
  • 17.
    HTML Headings  HTML headings are defined with the <h1> to <h6> tags. Example: <html> <head> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
  • 18.
    HTML Paragraphs  HTML paragraphs are defined with the <p> tag.  Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>
  • 19.
    HTML Formatting Tags  HTML uses tags like <b> and <i> for formatting output, like bold or italic text.  These HTML tags are called formatting tags.  Example: <html> <body>  <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>  </body> </html>