Scribd Logo
Upload

Welcome to Scribd!

  • HTML Structure

    Uploaded by

    warren saludario
    23 views7 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, 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 DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    23 views7 pages

    HTML Structure

    Uploaded by

    warren saludario

    Copyright:

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

    HTML Structure

    Delimiters: <, >, /


    Delimiters surround the tag and inform the parser that it should read the
    enclosed information as an HTML element.
    Tags:
    Tags contain elements which provide instructions for how information will be
    processed or displayed. There are both starter tags <TAG> and end tags
    </TAGS>
    Elements:
    A basic unit of an HTML document. The name of the element is given in the
    name of the tag, and specifies the meaning associated with a block of text.
    Some elements are empty since they don't effect a block of text. Elements that
    have contents are also called containers, i.e., they contain attributes.

    o Example: the <HR> tag contains the Horizontal Ruler element. It is an


    empty element in that it has no attribute.

    Attribute:
    Defines a special property of an HTML element.

    o Example: <IMG SRC="image.gif"> means that the element IMG has an


    attribute SRC, which specifies the name of the image file, which is
    assigned the value "image.gif".

    HTML is a structured hierarchical language that requires you to follow its rules if you
    wish your documents to appear correctly. For example, certain elements and tags are
    required to fit within other elements and tags and will not work unless they are
    properly placed.

    HTML Tags

    Structure Tags
    <HTML>...</HTML>
    Encloses the entire HTML document. This tag tells the browser that it is
    reading an HTML document and to display as such. Without this tag your
    information will display as source code on the client's browser.

    o An HTML document is divided into a HEAD and BODY.

    <HEAD>...</HEAD>
    Encloses the head of the HTML document. The HEAD element contains
    information about the document.

    o Can include: <TITLE>, <ISINDEX>, <BASE>, <META>, <NEXTID>, <LINK>

    <BODY>...</BODY>
    Encloses the body (text, images, tags, links) of the HTML document. The BODY
    element contains the information in the document.

    o Contains all tags except the <HTML> and those in the <HEAD>

    HEAD ELEMENTS
    <TITLE>...</TITLE>

    Indicates the title of the document and appears in a browser's bookmark file.

    <BASE>

    This is an optional tag. It is an empty tag in that it doesn't effect a block of text.
    <BASE> is used to indicate the original base URL of the web document. If a
    the document is moved, then all related documents with relative URL's will be
    referred back to the <BASE> URL. If you do not insert the <BASE> tag the
    relative URL's will be determined from the URL used to access the document.
    If you do a good job with your relative addresses you should have no problem
    in leaving the <BASE> tag out. However, there may be times when it is
    helpful.

    o Attribute: HREF

    <ISINDEX>

    This is an optional tag. <ISINDEX> informs the browser that the document can
    be examined using a keyword search. <ISINDEX> does not mean that the
    document appearing on the screen can be searched, rather, it invokes a program
    on the server which calls a database, which is searched and displayed as a web
    document.

    <META>

    This is an optional tag. <META> allows meta-information about the document


    to be placed in the HEAD. This allows the author to provide information about
    the document that can be used in the indexing of the document. If you use
    <META> it must take the CONTENT attribute and either the NAME or HTTP-
    EQUIV attributes.

    o CONTENT="string". Assigns the content associated with either NAME or


    HTTP-EQUIV.
    o NAME="name". Specifies the meta-information name.

    Example: <META NAME="descriptors" CONTENT="christology


    ecclesiology patristics">

    o HTTP-EQUIV="string". Tells the HTTP server to parse the values in the


    HTTP-EQUIV attribute and display it in the appropriate way in the HEAD
    of the document.

    Example: <META HTTP-EQUIV="Creation-Date" CONTENT="15-


    May-1996">

    BODY ELEMENTS

    Headings <H3>, <H2>, <H3>, <H4>, <H5>, <H6>

    FIRST through SIXTH level headings

    o Allowed inside <BLOCKQUOTE>, <BODY>, <FORM>

    What we've covered so far

    Paragraph & Line Break Tags

    <P>...</P>
    Encloses a paragraph and places a space between blocks of text. The </P> is
    optional, and standard use (HTML 2.0+) places the <P> tag at the beginning of
    the paragraph. I recommend you use both opening and closing tags, it doesn't
    hurt and HTML 3.0 may require both.
    <BR>
    Placed at the end of a block of text where you want a line break to occur, but
    do not want a space placed between the current and the next text block.
    Paragraph & Line Break Tag Examples

    Link & Image Tags

    Before we explore using links, we need to examine the difference between relative
    and absolute links. A link can have an absolute or relative structure. An absolute link
    describes a document's aULress in absolute terms. A relative link describes a
    document relative to another document. Relative links are often used inside a set of
    web documents. The value of using relative links lies in the ability to move
    documents from one server to another, or from one directory to another within the
    same server, without having to change the link address tags. When you use absolute
    links you often loose this flexibility. As a rule you should use relative links within
    your web documents.

     Absolute links look like this:


    o HREF="http://www.stthomas.edu/aimlhtml/pages/htmlintro.html"
     Relative links look like this:
    o HREF="netscape.html" (netscape.html is located in the current
    directory)
    o HREF="./pages/netscape.html" (netscape.html is located in the
    directory "pages" which is located in the current directory)
    o HREF="../netscape.html" (netscape.html is located in the directory one
    level up from the current directory)
    o HREF="../../netscape.html" (netscape.html is located two directory
    levels up from the current directory)

    Anchor Tag, <A>...</A>

    o Attributes:
     HREF="..."
     NAME="..."
     MAILTO:"..."
    o The HREF attribute creates a link to another document or anchor; the
    NAME attribute creates an anchor within a document that can be linked
    to. (NOTE: When designing web pages on your desktop computer you
    must use a relative aULress, or use "file:///c|/" to indicate an absolute
    link. The "c|/" indicates your drive aULress--and you must use "c|/"
    rather than "c:\". These absolute links will all have to be changed to
    "http://" when you mount your pages on a HTTP server.)
    o Can include: <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>,
    <KBD>, <VAR>, <CITE>, <TT>, <STRONG>, <EM>
    o The MAILTO attribute is used to insert an e-mail link into the document.
    MAILTO gives readers a way to respond to the web page author. In
    order for MAILTO to work the web page reader must have an e-mail
    account and must have their browser configured to send mail. The
    aULressees email aULress will automatically be inserted in the "TO:"
    line of the e-mail system. You should always include a MAILTO link on
    your home page so that readers can send you comments. Note that by
    making your full e-mail aULress the link, you give those who dont have
    the ability to take advantage of the MAILTO command a way to easily
    copy or print the aULress for future use.
     EXAMPLE: Send mail to <A
    "MAILTO:webteam@literacy.kent.edu>"
    webteam@literacy.kent.edu </A>
     Send mail to webteam@literacy.kent.edu (Press the link and see
    what happens)

    Image Tag, <IMG>

    Image tags link images into a HTML document. Each image tag places a
    separate request upon the server. A HTML document with four images will
    require five separate calls to be made to a server, one for the HTML document,
    four more for the images. If your server is slow or overloaded you will want to
    keep the number of distinct connections required to load a page to a minimum.
    You must also be aware of the file size of your images. The larger the image
    file size, the longer it will take to load. You can reduce the file size of your
    images by reducing the number of unique colors that your image contains. You
    can reduce the number of unique colors in an image with graphic manipulation
    software like Paint Shop Pro or Photoshop.

    o Attributes:
     SRC="..." The URL of the image
     ALT="..." The text that will be displayed in non-graphical
    browsers
     ALIGN="..." Alignment of text before & after the image. Values
    include: TOP, MIDDLE, BOTTOM.
     ISMAP: A clickable image map

    HREF & IMG Tag Examples

    List Tags

    Unordered (Bulleted) Lists, <UL>...</UL>


    o An unordered (bulleted) list
    o Can Include: <LI>
    o Allowed Inside: <BLOCKQUOTE>, <BODY>, <UL>, <FORM>, <LI>
    o Unordered (Bulleted) List Examples

    Ordered (Numbered) Lists, <OL>...</OL>

    o An ordered (numbered) list


    o Can Include: <LI>
    o Allowed Inside: <BLOCKQUOTE>, <BODY>, <UL>, <FORM>, <LI>
    o Ordered (Numbered) List Examples

    Definition Lists
    <DL>...</DL>

    o A definition list tag. The COMPACT attribute specifies a formatting that


    takes less white space to present
    o Attributes: COMPACT
    o Can Include: <DT>, <UL>

    <DT>...</DT>

    o A definition term tag. Definition terms are used within the <DL> tag in a
    similar way that the <LI> tag is used within <UL> and <OL>.

    <UL>...</UL>

    o A definition tag. The corresponding definition to a definition term.


    o Definition List Examples

    ther Useful HTML 2.0 Tags

    <HR>

    Places a horizontal ruler line across the page. This tag is useful in dividing a
    web page into distinct units.

    o EXAMPLE:

    <STRONG>...</STRONG>
    Strong emphasis (usually displayed as bold). Use instead of the <B> tag.

    <EM>...</EM>

    Emphasis (usually displayed as itallics). Use instead of the <I> tag.

    <CITE>...</CITE>

    Used for inserting a citation into the document. The text in a citation tag
    usually is displayed in italics.

    <AULRESS>...</AULRESS>

    Used for general information about the document's author. Every web page
    should provide information about the author, and ideally, it should also provide
    an option for the reader to send e-mail to the author (i.e., the mailto attribute of
    the anchor tag).

    <BLOCKQUOTE>...</BLOCKQUOTE>

    Used for long quotes or citations.

    <COMMENT>...</COMMENT>

    Allows the web author to place comments in the document that are hiULen
    from the user. This tag is often used to place information about the document in
    the HEADER. I use it to place publication information about the document in
    the HEADER which can be used by human or automated indexers to catalog
    the document (see the Home Page of this document). You can also use it in the
    body to insert comments about your choice of tags or design considerations.

    <PRE>...</PRE>

    Used to insert preformated text into a page. The preformated element allows
    the web page author to display text in unique ways that may not be allowed by
    other HTML elements. Text in this element will display in courier font, so be
    aware that the text display will be different than your surrounding text.

    You might also like