Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tutorial - Lesson 1

    Uploaded by

    MARLYN GUIANG
    6 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views5 pages

    HTML Tutorial - Lesson 1

    Uploaded by

    MARLYN GUIANG

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Welcome to Lesson 1!

    Modifying existing web pages does not have to be


    difficult. There is no need to learn the entire HTML programming
    language as this tutorial is designed to provide a general understanding
    of the codes. In this lesson the following basic definitions and relevant
    tags are discussed:

    What is HTML?
    What are Tags?
    Explanation of Document Structure
    Explanation of Document Structure Tags

    What is HTML?

    HTML (Hyper Text Markup Language) is the language used to write Web
    pages which consists of codes (tags) embedded in the text of a
    document.

    What are Tags?

    Tags are codes in an HTML document which the browser reads and then
    interprets for subsequent display to a reader. Tags are not visible when
    an HTML document is viewed in a browser, but their effects are. Tags
    begin with the opening symbol "<" and end with the closing symbol ">";
    and usually come in pairs, one that begins an action and one that ends it.

    Below is an example of an HTML tag and its respective browser display:

    HTML Code   Browser Display

    I want to
    <B> emphasize </B> this!
      I want to emphasize this!

    * Do not worry about memorizing all the tags described in these lessons.
    Any tags that are required are listed in the accompanying HTML
    Reference Guide which can be printed for reference purposes.

    Explanation of Document Structure

    Each HTML document has a minimum number of tags. Here is the very
    least HTML code that can be called a "page":

    <HTML>

    <HEAD>

    <TITLE>This is my page Title!</TITLE>

    </HEAD>

    <BODY>

    This is my message to the world!

    </BODY>

    </HTML>

    NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or


    <TiTlE>.

    Explanation of Document Structure Tags

    <HTML>... Encloses the entire HTML document.These tags


    </HTML>   let the browser know to start reading and
    displaying the information presented within.

    <HEAD>... The <HEAD> element contains all information


    </HEAD> about the document in general. It contains
      HTML elements that describe the document's
    usage and relationship with other documents.

    <TITLE>... The <TITLE> is contained in the <HEAD> of


    </TITLE> the document. It is displayed at the top of the
      browser window and on the bookmark list, so it
    is important to choose something descriptive,
    unique, and relatively short.

    <BODY>...   The <BODY> element contains all the


    </BODY> information which is part of the document.

    There are a number of different attributes for


    the <BODY> tag (attributes are the elements
    included within brackets that change the
    behavior or appearance of a tag). They are:

    "BACKGROUND=" Specifies the image tile that


    is to appear in the document's background.

    EXAMPLE:

    <BODY
    BACKGROUND=
    "picturename.gif">
    </BODY>

    "BGCOLOR=" Sets the background color of the


    page. In order to do this a six digit
    hexadecimal number denoting a red-green-blue
    color value is included. Thus "000000" is black
    and "FFFFFF" is white and every other colour in
    between is described using these 6 characters
    in different combination. In addition to the
    hexadecimal system, there are sixteen color
    names that (other than black) that can be
    included in the tags. They are: Aqua, Red,
    Green, Blue, Violet, Fuchsia, Gray, Lime,
    Maroon, Navy, Olive, Purple, Silver, Teal, White,
    and Yellow.

    EXAMPLE:

    <BODY
    BGCOLOR="#FFFFFF">
    This page has a white
    background.
    </BODY>

    OR

    EXAMPLE:

    <BODY
    BGCOLOR="WHITE">
    This page has a white
    background.
    </BODY>

    "LINK=" Sets the hexadecimal color code for


    links that have not yet been visited.

    EXAMPLE:

    <BODY
    LINK="#0C6249">
    This page has blue
    links
    </BODY>

    VLINK= Sets the hexadecimal color code for


    links the user has already visited.

    EXAMPLE:

    <BODY
    VLINK="#800080">
    This page has purple
    links after being visited
    </BODY>

    "ALINK=" Sets color of links that are active (ie.,


    the color they turn when the link is clicked on).

    EXAMPLE:

    <BODY
    ALINK="#FFB50C">
    This page has yellow
    active links
    </BODY>

    "TEXT=" Sets the hexadecimal color code for


    the default text color.

    EXAMPLE:

    <BODY
    TEXT="#00006A">
    This page has blue text
    </BODY>
    The <BODY> tags for this document are as
    follows:

    <BODY BACKGROUND="spiral_ruled.gif"
    BGCOLOR="#FFFFFF" TEXT="#00006A"
    LINK="#005A5A" VLINK="800080"
    ALINK="#FFB50C">

    An excellent way to learn HTML is to view the coding used on other web
    pages. To do this in either Netscape or Internet Explorer - select "View
    Source" from the "View" menu. The file contents with all the HTML tags
    will be displayed in a new window.

    Try it out!

    In the Box below, type the following HTML code, then click the "View"
    button. The HTML document you made will be displayed in a new browser
    window. You may wish to experiment by changing the words within the
    tags.

    Try typing this:

    <HTML>

    <HEAD>
    <TITLE>My first Web page</TITLE>
    </HEAD>

    <BODY BGCOLOR="#800080" TEXT="#FFFFFF">


    Type a message here.
    </BODY>

    </HTML>

    View
    Erase

    (To return to this page after viewing click "Back" on your browser.)

     Index       Lesson 2 

    Index
    | Lesson 1
    | Lesson 2
    | Lesson 3 | Lesson 4
    | Lesson 5 | Lesson 6 | Lesson 7 | Lesson 8
    HTML Reference Guide

    Copyright © Alternet Web Design

    You might also like