Scribd Logo
Hochladen

Willkommen bei Scribd!

  • HTML 3

    Hochgeladen von

    Maya Willims
    35 Ansichten24 Seiten
    notes on web page design

    Originaltitel

    html 3

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    notes on web page design

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    35 Ansichten24 Seiten

    HTML 3

    Hochgeladen von

    Maya Willims
    notes on web page design

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 24

    HTML

    HYPERTEXT MARKUP
    LANGUAGE
    PART III

    HTML

    We will be looking at the following items in this


    presentation:
    Inserting images into a webpage
    Creating a hyperlink

    INSERTING IMAGES

    Images can be easily placed into a webpage.


    We can do different things with an image:

    It

    can be placed at different areas of a page: top,


    bottom, middle, left or right (Alignment)
    It can be resized

    The tag used to insert an image is the <img> tag.


    This tag is an empty tag meaning that it does not
    contain an ending tag but it contains attributes.
    The attribute src is used to define the source of the
    image to be used.
    Example:

    <img src=Desert.jpg/>

    INSERTING IMAGES
    <img src=Desert.jpg/>

    The above tag has 3 elements:


    img:

    Indicates that an image is going to be inserted


    src: indicates that the source of the image will be
    used
    Desert.jpg: this is the actual name of the file,
    along with its file extension, that must be used
    when inserting the image.

    Try using pictures that you have saved on your


    machines.
    NB: Images must be in the same folder as
    your webpage.

    INSERTING IMAGES

    WIDTH & HEIGHT ATTRIBUTES

    This attribute is used to change the size of an


    image.
    The words WIDTH and HEIGHT are used within
    the img tag.
    Example:

    <img

    src=Desert.jpg width=400 height=300/>


    The numbers used for width and height refer to the
    number of pixels that you want to set the image to.

    By setting the width and height, you can choose


    how big or small the image can be.

    RESIZING IMAGES

    ALIGN ATTRIBUTE

    This attribute is used to align text and images.


    The word ALIGN is used within the img tag.
    To align vertically, the alignment can be set to
    TOP, MIDDLE or BOTTOM
    To align horizontally, the alignment can be set to
    LEFT or RIGHT.
    Example is shown on the next page:

    This

    text.

    example should place the image to the right of the

    ALIGN ATTRIBUTE

    <html>
    <body>
    <p><img src=Desert.jpg align = right></p>
    Graphics can be easily placed into a webpage. The
    most difficult part of inserting the image may be
    acquiring the image.
    </body>
    </html>

    ALIGN ATTRIBUTE

    BORDER ATTRIBUTE

    This attribute is used to place a border around the


    image.
    The word BORDER is used within the img tag.
    A number is associated with the border. This number
    determines the size or thickness of the border.
    Example:

    <img src=Desert.jpg width=400 height=300 BORDER=8/>

    BORDER ATTRIBUTE

    ALT ATTRIBUTE

    This attribute is used in the even that the image cannot


    be displayed.
    The word ALT is used within the img tag.
    It defines descriptive text that is shown if the browser is
    not displaying the image.
    Example:

    <img src=Desert.jpg width=400 height=300 ALT=Grand


    Canyon/>

    ALT ATTRIBUTE

    HYPERLINKS

    Characteristics
    Hyperlinks point to any resource on the Web:
    An HTML page
    An image
    A sound file
    A movie

    Hyperlinks

    can be internal or external

    Internal link: allows the user to move from one


    section of the current page to another section of the
    same page or to another page in the same website.
    External link: allows the user to open up a new
    browser window from another website.

    HYPERLINKS

    Characteristics
    A hyperlink is often referred to as simple a link.
    Hyperlinks are specified in HTML using the
    <a> tag.

    HYPERLINKS

    The <a> tag can be used in the following way:


    To

    create a link to another HTML document (webpage)


    by using the href attribute.
    To create a bookmark inside a webpage by using the
    name attribute.
    The

    href and name attributes both specify the


    destination to which the link will take the user (either
    to a new web page or to a new section within the
    current web page)

    The

    target attribute is also used in the hyperlink tag.

    HREF ATTRIBUTE

    Lets take a look at the href attribute:


    The

    HTML syntax to link to another webpage is as


    follows:

    Indicates that a
    hyperlink is
    going to be
    created

    Indicates the
    webpage to be
    visited

    Indicates the
    end of the
    hyperlink tag

    <a href = url>Link text</a>

    Specifies the
    destination of a
    link.

    Indicates the
    text that will be
    shown on the
    current
    webpage

    HREF ATTRIBUTE

    Example:
    To show this example, create a webpage with a
    heading and a paragraph.
    Save it as second.htm
    Create another webpage also with a heading
    and a paragraph.
    Include the following HTML after ending the
    paragraph
    <a href = second.htm>Go to the next page</a>
    Save this document as first.htm

    HREF ATTRIBUTE

    The HTML is as follows:

    HREF ATTRIBUTE

    The first webpage is as follows:

    HREF ATTRIBUTE

    When the hyperlink is selected, the following webpage


    is shown:

    HREF & TARGET ATTRIBUTES

    The example shown will take the user to the next


    webpage using the same browser window.
    We can modify the hyperlink tag to allow the user
    to open the next webpage in a new browser
    window.

    This

    is done by using the target attribute

    <a href=second.htm target=_blank>Go to next page</a>

    HREF & TARGET ATTRIBUTES

    Note that there are two tabs at the top instead of


    one

    Das könnte Ihnen auch gefallen