Scribd Logo
Upload

Welcome to Scribd!

  • 37 views

    Hypertext Markup Language

    Uploaded by

    artsan3

    Copyright:

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

    You might also like

    Hypertext Markup Language

    Uploaded by

    artsan3
    37 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
    Download as pdf or txt
    37 views5 pages

    Hypertext Markup Language

    Uploaded by

    artsan3

    Copyright:

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

    Copyright © 1996

    Tutorial Index
    by Alan Frank

    Lesson 95: Hypertext Markup


    Language
    Writing HTML code isn't as difficult as you might
    think.

    Last month's Tutorial was the first of a multipart series


    explaining Internet and World Wide Web services. This month,
    we'll take a closer look at HTML and examine some actual
    HTML code from a sample Web page.

    There are specialized HTML editors, but HTML code is plain


    ASCII text and, therefore, can be created using any text editor
    that can save a file in ASCII text format. Although Web
    browsers are typically used to access HTML pages from a
    Web server, most Web browsers also load files from your local
    disk drive, which allows you to test some simple Web pages
    without having a Web server up and running.

    When creating HTML files, remember to name them using the


    .html extension. If your Web server is based on Windows 3.x
    and can only work with file names in the MS-DOS "8.3" format,
    use the extension .htm.

    ROCKET SCIENCE

    Listing 1 displays HTML code for "a sample home page" of a


    mythical company called Retro Rocket, which manufactures
    the RetroRocket product line. I named the document retro.htm.

    LISTING 1-A SAMPLE WEB PAGE

    <HTML>

    <! This is a sample HTML file, to show you what's behind a


    Web>
    <! page. This line, the one above, and the line below this>
    <! are comments. Comments don't show up in the

    1 of 5
    displayed page.>

    <HEAD>
    <TITLE>Retro Rocket Company </TITLE>
    </HEAD>

    <BODY>

    <H1><IMG ALIGN=bottom SRC="retro.gif">Retro</H1>


    <H6>Your best buy in a luxury spacecraft.</H6>
    Welcome to the RetroRocket World Wide Web site. This is
    the place to check out the latest in personal spacecraft
    technology.<P>

    <UL>
    <LI><A HREF="rockets.htm">RetroRocket Product
    Line</A>
    <LI><A HREF="dealers.htm">Dealer Listings</A>
    <LI><A HREF="history.htm">History of Retro Rocket
    Co.</A>
    </UL>

    <HR>

    Comments? Please e-mail to:


    <ADDRESS>webmaster@retrorocket.com</ADDRESS>

    </BODY>
    </HTML>

    HTML uses tags to tell the Web browser how the text should
    be displayed. In Listing 1, the code begins with the tag
    <HTML>. Place this tag at the beginning of your HTML pages;
    it lets the Web browser know that the following code is HTML
    and should be rendered accordingly. Note also that Listing 1
    ends with the tag </HTML>. Most HTML tags are used in pairs,
    with an opening tag and an ending tag to delineate which text
    you want handled in a particular way. Ending tags are the
    same as opening tags, but with the addition of a forward slash
    (/).

    Web browsers can identify an HTML file by the file extension,


    and many browsers will display pages that don't carry the
    <HTML> tag. When viewing your document with your own
    browser you might be able to get away without the tag, but you
    can't be sure that everyone who wants to view your page will
    be using the same browser you use. It's best to stick with good
    programming habits and to avoid the temptation to take

    2 of 5
    shortcuts.

    Following the opening HTML tag in Listing 1, there are three


    comment lines delineated by <! and >. The browser doesn't do
    anything with comment lines-comment lines are not displayed.
    A comment's only purpose is to enable you to document your
    code.

    HTML pages consist of a head and a body portion. In Listing 1,


    the head is that portion of text between the <HEAD> and
    </HEAD> tags. In this example, there's one item in the head,
    and that's the title. The title is delineated by (you guessed it)
    the <TITLE> and </TITLE> tags. The title tags indicate what
    will be displayed in the title bar of the Web browser.

    Everything that shows up on the Web page itself is found in


    the body of the HTML document. (I'll let you figure out which
    tags delineate the main body of the HTML page.)

    Any text in an HTML document that doesn't have specific


    HTML tags bracketing it will be displayed by the Web browser
    as body copy. In Listing 1, the paragraph that begins with
    "Welcome to the RetroRocket World Wide Web site" is body
    copy and is displayed in the font and point size that has been
    determined for the browser.

    Web developers can't live by text alone, so I included a


    graphic image-the RetroRocket Co. logo-on the sample page.
    Web browsers can display files in the .gif and jpeg file formats.
    I created the sample logo using the Windows Paintbrush
    program, then converted the .bmp file to .gif format with a
    graphics conversion program.

    In Listing 1, I referenced the image with the HTML statement


    <IMG ALIGN=bottom SRC="retro.gif">. This statement is one
    that does not use beginning and ending tags-it's all one
    statement. The SRC="retro.gif" portion of the statement tells
    the Web browser which file to request. In this case, the .gif file
    (retro.gif) is located in the same directory as the retro.htm file.
    If it were in another directory, I would need to enter the file's
    full path name. If the file were on another Web server, I would
    need to give the full URL, including path extensions, such as
    SRC="http:// www.lanmag.com/images/retro.gif".

    In addition to body text, HTML lets you have several subhead


    text styles, ranging (in descending order of point size) from H1
    to H6. I used the H1 headline style for the main headline
    (Retro), which I positioned next to the graphic. If you look at
    the HTML image statement in Listing 1, you'll note that it is

    3 of 5
    bracketed by the <H1> and </H1> tags, and the word Retro
    immediately follows the image statement. The H1 tags cause
    all the text between those tags (the word Retro is all there is)
    to be rendered in Headline 1 style-the largest headline size.
    The ALIGN=bottom portion of the image statement aligns the
    bottom of the text with the bottom of the graphic. (You can also
    use ALIGN=top or ALIGN=middle if you want a different text
    position. ALIGN=top aligns the top of the text with the top of
    the image, while ALIGN=middle aligns the middle of the text
    with the middle of the image.)

    The line following the image statement ("Your best buy in a


    luxury spacecraft.") is set as Headline 6-the smallest head.

    LISTING AND LINKING

    I have already mentioned the body copy ("Welcome to the


    RetroRocket World Wide Web site."), so I won't belabor it,
    except to point out the <P> tag I used at the end of the
    paragraph. This tag tells the Web browser that it has reached
    the end of a paragraph. The Web browser will insert a carriage
    return followed by a blank line wherever you place a <P> tag in
    the document.

    You can use carriage returns and blank lines when writing your
    HTML code to make it easier to read and understand, but Web
    browsers will ignore them. This means you will have to use
    HTML tags to force carriage returns and blank lines to appear
    in the displayed pages. The Web browser will automatically
    enter a carriage return at the end of a headline, but in most
    cases, you need to specifically call for carriage returns or
    blank lines in your HTML code.

    Following the body text, you'll notice three bulleted items


    ("RetroRocket Product Line," "Dealer Listings," and "History of
    Retro Rocket Co."). I decided to make these three items
    hyperlinks to other documents, but the list feature is not
    necessarily tied to hyperlinking; I simply decided to combine
    the two features, as you will likely do in many cases.

    Let's discuss lists first. In general, there are two broad


    categories of lists in HTML: ordered lists and unordered lists.
    Ordered lists are numbered lists. You would most likely use an
    ordered list when items must be displayed in a specific order.
    One example might be steps you need to follow to assemble
    some product: Step 1 comes first, then Step 2, and so on. You
    create ordered lists by surrounding them with the <OL> and
    </OL> tags. Then, at the beginning of each item in the list,
    insert the <LI> tag (for "list item"). The Web browser will

    4 of 5
    automatically take care of numbering the ordered list, starting
    with "1" for the first list item.

    The second type of list is the unordered list, which is what I


    used in the sample. This list is not numbered ("ordered"). It is
    also called a bulleted list, as each list item is preceded by a
    bullet. You create an unordered list by surrounding the
    collective list items with the <UL> and </UL> tags. As before,
    you need to place the <LI> tag at the beginning of each list
    item.

    As I mentioned, each list item is also a hyperlink, so now let's


    look at the creation of hyperlinks. A hyperlink, also known as
    an "anchor," takes the following form: <A HREF= "file
    name">displayed text</A>. Here, "file name" is the name of the
    document to which you want to link and Displayed Text is the
    underlined wording that you want the reader to see. (I should
    note here that by convention, text representing hyperlinks is
    usually displayed in a different color from regular text, and the
    hyperlink text is underlined. It is the Web browser that does
    this displaying, and these displays are usually configurable
    options, so the end result will vary according to the browser
    and user choices.)

    If you look at the HTML code for the first of the three list items,
    you'll note that the opening tag (<A HREF="rockets. htm">)
    gives the file name of the document to which we are linking,
    while the second portion ("RetroRocket Product Line") is what
    the reader sees when looking at the hyperlink via his or her
    Web browser. In this case, I didn't need to reference a
    complete URL, or even a path, as the file rockets.htm is in the
    same directory as the current document (retro.htm).

    Just below the three list items in our sample document, you will
    see the tag <HR>; it calls for a horizontal rule.

    Finally, I added a line that asks for readers' comments, and I


    included the e-mail address of the Webmaster at
    retrorocket.com. There's even an <ADDRESS> tag in HTML,
    which my browser (Netscape Navigator 2.0) converts to italics.

    Next month, we'll continue our discussion of HTML. In the


    meantime, fire up those text editors and Web browsers and try
    a few experimental Web pages!

    5 of 5

    You might also like