Docstoc

Mastering the Internet and HTML

Document Sample
Mastering the Internet and HTML Powered By Docstoc
					HTML Introduction
What we will cover…
   Understanding the first html code…
   Tags
    o two-sided tags
    o one-sided tags
   Block level elements
    o paragraphs
    o headings
    o block quote
    o lists
   inline elements
   empty elements

                                         2
                           Lecture 7
 First HTML code

 <html>
    <head>
    <TITLE>Lastname, Firstname</TITLE>
    </head>
    <body>
    <H1>Welcome to My Homepage.</H1>
    </body>
 </html>

We will start with this simple code.



                                         3
                    Lecture 7
First HTML code
                            Title of the html
                                document




                            Body of the html
Complete html                  document
  document




                                                4
                Lecture 7
                                         <html>
                                             <head>

  Tags
                                             <TITLE>Lastname, Firstname</TITLE>
                                             </head>
                                             <body>
                                             <H1>Welcome to My Homepage.</H1>
                                             </body>
                                         </html>

     HTML document
      o Consists of tags
     Tags - core building block of HTML
      o marks the presence of an element
      o marks the “start” and “end” of an element
      o Two-sided tags vs. single-sided tags
     General syntax for two-sided tags
      <tag> content </tag>

Opening tag         Closing tag   Lecture 7                                 5
More about tags

 special terms surrounded by angle brackets
 can be upper, lower or mixed case
   <TITLE> Math 279 </TITLE>
   <title> Math 279 </title>
   <TitLe> Math 279 </tiTlE>
   are all ok
 most tags come in pairs, some don’t



                                               6
                     Lecture 7
HTML tags
   <HTML> … </HTML>
    o tells browser that file contains HTML-coded
      information

    o Anything between these two tags makes up the
      document content, including all other elements,
      text, and comments




                                                        7
                          Lecture 7
The Structure of an HTML File
   An HTML document is divided into two main elements:
    the head and the body
   head element contains info about the document, for
    example, the document title or the keywords

   <HEAD> … </HEAD> represents the head tags

   The content of the head element is not displayed
    within the Web page


                                                       8
                          Lecture 7
Title tags

   <TITLE> … </TITLE>
    o used inside <HEAD> … </HEAD>


    o identify document title
    o displayed in the title bar at top of browser window
    o identifies your page for search engines




                                                            9
                          Lecture 7
Body tags
   <BODY> … </BODY>
    o start and end the actual contents (body)


   The body element contains all of the content
    to appear on the Web page

   HTML, HEAD, TITLE and BODY are four
    most basic tags in any html document


                                                   10
                          Lecture 7
Adding Comments – special tag
   The comment tag adds notes to your HTML code


                   <!-- comment -->

   Comments can be spread over several lines
   Comments are useful in documenting your HTML code
    for yourself and others




                                                    11
                         Lecture 7
(1) Do it yourself!
   Add the texts as comments to the first html code
    o Author: Firstname Lastname
    o Last modified Date: Feb 22, 2010


             <html>
                 <head>
                 <TITLE>Lastname, Firstname</TITLE>
                 </head>
                 <body>
                 <H1>Welcome to My Homepage.</H1>
                 </body>
             </html>




                                                       12
                             Lecture 7
Block-Level Elements
   Block-level elements - distinct blocks within the body
   Enhance
    o Readability
    o Presentation of the web page


   Similar to a technical document
    o Document title, section title, section text, paragraphs etc.


   Most generic and popular
    o Paragraphs
    o Headings

                                                                     13
                               Lecture 7
Paragraphs and Headings

   Paragraphs
    o <P>…</P>


   Headings
    o <H1>…</H1>, <H2>…</H2>, …, <H6>…</H6>
    o six levels of headings
    o H1 is largest
    o H6 the smallest size


                                              14
                             Lecture 7
Recap the First HTML code

<html>
   <head>
   <TITLE>Lastname, Firstname</TITLE>
   </head>
   <body>
   <H1>Welcome to My Homepage.</H1>
   </body>
</html>




                                        15
                   Lecture 7
(2) Do it yourself!


o add another level of
  heading: <h2>…</h2>
  to the existing page

o add two paragraphs




    and execute the html file using your web browser!
                                                        16
                         Lecture 7
How to insert white spaces
before and after the texts?

                              How to insert texts in such indented manner?




                                                                             17
                                   Lecture 7
Block Quote

   The syntax for making an extended quote is
    o <blockquote>…</blockquote>


   A browser inserts white space before and
    after a blockquote element.




                                                 18
                         Lecture 7
Block Quote
<blockquote>

        <p>Computer Networking: A top down approach,
        5th ed. Addison-Wesley by Kurose and Ross,
        ISBN-10: 0136079679 | ISBN-13: 978-0136079675 </p>

        <p>HTML A Beginner's Guide, 4th Edition,
        by Wendy Willard, ISBN-13: 9780071611435 </p>

        <p>New Perspectives on HTML and XHTML:
        Comprehensive, 5th Edition, by Patrick M. Carey,
        ISBN-10: 1423925467 | ISBN-13: 9781423925460 </p>

</blockquote>



                                                             19
                                    Lecture 7
Blockquote indents the texts but what if we want a list of items?




                                                                    20
                        Lecture 7
List tags
   unordered list
    o Also known as bulleted list
                        <ul> … </ul>

   Try inserting an unordered list in your html code!




                                                         21
                          Lecture 7
Adding a List
   HTML supports three kinds of lists:
    o unordered
    o ordered, and
    o definition


   Unordered list for items that do not need to occur in
    any special order
   Ordered list for items that must appear in a
    numerical order
   Definition list for definition items


                                                        22
                           Lecture 7
Adding lists
   unordered list (bulleted list):
    o <ul> … </ul>

   ordered list (enumerated list):
    o <ol> … </ol>:
    o <li>…</li>: specify each list item for both
      unordered and ordered lists
   definition list: <dl>…</dl>
    o a list of definitions
    o <dt>…</dt>: definition term
    o <dd>…</dd>: definition description
                                                    23
                          Lecture 7
Example for list tags
  <html>
  <head>
  <TITLE>Example for list tags</TITLE>
  </head>
  <body>                                                Creates bulleted list
  Three kinds of lists are
     <ul>
            <li>unordered list</li>
            <li>ordered list </li>
            <li>definition list </li>
    </ul>                                                Creates numbered list
   <ol>
            <li>unordered list</li>
            <li>ordered list </li>
            <li>definition list </li>
   </ol>                                                   Creates definition list
   <dl>
            <dt>unordered list:</dt> <dd>shows bullets</dd>
            <dt>ordered list:</dt> <dd>shows number</dd>
            <dt>definition list:</dt> <dd>lists definitions</dd>
    </dl>
  </body>
  </html>



                                                                            24
                               Lecture 7
Other block-level elements - address
   HTML supports the address element to indicate contact info.

                       <address> … </address>

   Most browsers display an address element in an italicized font


e.g.
    <address>
                 John Jay College of Criminal Justice,
                 New York,
                 NY 10019
    </address>


                                                                     25
                                 Lecture 7
Block-Level Elements at a glance…




                                    26
                Lecture 7
inline elements
   Inline element: marks a section of text within a
    block-level element
   Often used to format characters and words
    o Also referred to as character formatting elements


   <b>,…,</b>: boldface element
   <i>,…,</i>: italicizes any text inside




                                                          27
                              Lecture 7
Make the text bold and italicized




                                    28
        Lecture 7
Empty Elements

   An empty element contains no content
   Empty elements appear in code as one-sided tags
   General syntax
    o <element />


   line break
    o <br />
   horizontal line
    o <hr />




                                                      29
                          Lecture 7
                       Insert a horizontal line in between two paragraphs


Insert a line break here


                                                                            30
                               Lecture 7
More HTML text formatting tags…

    Tag        Description
    <b>        Defines bold text
    <big>      Defines big text
    <em>       Defines emphasized text
    <i>        Defines italic text
    <small>    Defines small text
    <strong>   Defines strong text
    <sub>      Defines subscripted text
    <sup>      Defines superscripted text
    <ins>      Defines inserted text
    <del>      Defines deleted text




                                            31
                             Lecture 7

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:10/15/2011
language:English
pages:31
opzroyikiwizik opzroyikiwizik
About