Mastering the Internet and HTML by opzroyikiwizik


									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

                           Lecture 7
 First HTML code

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

We will start with this simple code.

                    Lecture 7
First HTML code
                            Title of the html

                            Body of the html
Complete html                  document

                Lecture 7

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

     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

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

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

                          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

                          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

                          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

                          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

                         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

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

                             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

                               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

                             Lecture 7
Recap the First HTML code

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

                   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!
                         Lecture 7
How to insert white spaces
before and after the texts?

                              How to insert texts in such indented manner?

                                   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.

                         Lecture 7
Block Quote

        <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>


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

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

   Try inserting an unordered list in your html code!

                          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

                           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
                          Lecture 7
Example for list tags
  <TITLE>Example for list tags</TITLE>
  <body>                                                Creates bulleted list
  Three kinds of lists are
            <li>unordered list</li>
            <li>ordered list </li>
            <li>definition list </li>
    </ul>                                                Creates numbered list
            <li>unordered list</li>
            <li>ordered list </li>
            <li>definition list </li>
   </ol>                                                   Creates definition list
            <dt>unordered list:</dt> <dd>shows bullets</dd>
            <dt>ordered list:</dt> <dd>shows number</dd>
            <dt>definition list:</dt> <dd>lists definitions</dd>

                               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

                 John Jay College of Criminal Justice,
                 New York,
                 NY 10019

                                 Lecture 7
Block-Level Elements at a glance…

                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

                              Lecture 7
Make the text bold and italicized

        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 />

                          Lecture 7
                       Insert a horizontal line in between two paragraphs

Insert a line break here

                               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

                             Lecture 7

To top