Scribd Logo
Carica

Benvenuto in Scribd!

  • Images and Link Tag

    Caricato da

    Omar Mohamed
    103 visualizzazioni15 pagine
    The document discusses various HTML tags used to insert images and links. It describes the <img> tag and its attributes like src, alt, title, align, width, height, hspace and vspace. It also explains how to use relative and absolute URLs for images and links. The <a> tag is used to create links, and attributes like href, target, name are covered. Image links and named anchors within pages are also summarized. The <marquee> tag to create scrolling text is described along with its various attributes.

    Descrizione originale:

    Titolo originale

    IMAGES AND LINK TAG.ppt

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    The document discusses various HTML tags used to insert images and links. It describes the <img> tag and its attributes like src, alt, title, align, width, height, hspace and vspace. It also explains how to use relative and absolute URLs for images and links. The <a> tag is used to create links, and attributes like href, target, name are covered. Image links and named anchors within pages are also summarized. The <marquee> tag to create scrolling text is described along with its various attributes.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    103 visualizzazioni15 pagine

    Images and Link Tag

    Caricato da

    Omar Mohamed
    The document discusses various HTML tags used to insert images and links. It describes the <img> tag and its attributes like src, alt, title, align, width, height, hspace and vspace. It also explains how to use relative and absolute URLs for images and links. The <a> tag is used to create links, and attributes like href, target, name are covered. Image links and named anchors within pages are also summarized. The <marquee> tag to create scrolling text is described along with its various attributes.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    Image and Link

    tags
    HTML Images

     Inserting Images in HTML Documents


     The <img> tag is used to insert images in HTML documents.
     It is an empty tag and contains attributes only.
     The syntax of <img> tag can be given with:
    <img src="url" alt="some_text">
    The following example inserts one image on the web page:

    <img src=“html5.jpg" alt=“HTML 5 Icon">


     The Src Attribute of Images:
    Every image has a src attribute (src stands for source). The src
    attribute tells the browser where to find the image you want to display.
     The Alt Attribute of Images:
    The alt attribute is the alternative description for an image, if the image
    cannot be displayed. 
    HTML Images…
     Other attributes of <img> tag:
     The title Attribute:- The title attribute will display a ‘tooltip’ when someone
    hovers their cursor over the image.

     The align Attribute:- The align attribute determines where on your page


    the image will sit.

     The width and height Attributes:- Sounds obvious, but this sets the
    height and width of your image. This is measured in pixels, but you can
    equally specify a percentage for the width element.

     hspace and vspace:- These two attributes give your image space, so
    that there is a gap between the image and the elements around it.

     The border attribute:- By default image will have no border around it, you
    can specify border by using border attribute.
    HTML Images…

     Local URLs Explanation:


    Local Src Location Description
    src="sunset.gif“ picture file resides in same
    directory as .html file

    src="pics/sunset.gif“ picture file resides in the pics


    directory

    src="../sunset.gif“ picture resides one folder "up“


    from the .html file
    HTML Links

     Links are found in nearly all web pages. Links


    allow users to click their way from page to page.
     HTML links are hyperlinks.
     A hyperlink is a text or an image you can click
    on, and jump to another document.
    HTML Links…

     Hypertext references can use absolute URLS,


    relative URLs, or root relative URLs.
      Absolute
      This refers to a URL where the full path is provided. For
    example, http://www.quackit.com/html/tutorial/index.html
     Relative
      This refers to a URL where only the path, relative to the current
    location, is provided. For example, if our current location is
    http://www.quackit.com/html, we would use tutorial/index.html.
    HTML Links…

     Root relative
     This refers to a URL where only the path, relative to the
    domain's root, is provided.
     For example, if we want to reference the
    http://www.quackit.com/html/tutorial/index.cfm URL, and the
    current location is http://www.quackit.com/html, we would use
    /html/tutorial/index.cfm.
    HTML Link Syntax…

     Links are specified in HTML using the <a> tag.


     A link or hyperlink could be a word, group of
    words, or image
    <a href="url">Text link</a>
     The href attribute specifies the destination address.
     The Text link is the visible part.
     Clicking on the link text, will send you to the specified address.
    Example:
    <a href="http://www.itechsom.com "> Visit our Website</a>
    The Target Attribute of Links

     Target attribute tells the browser where to open


    linked document. There are four defined targets.
     Each target starts with an underscore(_):
    _self (Defualt),_blank, _parent, _top.
     You do this with the target attribute. For example,
    target="_blank" opens the URL in a new window.
    HTML Image Links

     We have seen how to create hypertext link using text and


    we also learnt how to use images in our web pages. Now
    we will learn how to use images to create hyperlinks.
     Example
    It's simple to use an image as hyperlink. We just need to use an
    image inside hyperlink at the place of text as shown below:
    <body> <p>Click following link</p>
    <a href="http://www.itechsom.com" target="_self">
    <img src="/images/logo.jpg" alt=“I Tech Solutions" border="0"/>
    </a>
    </body>
    Named Anchors

     You can make your links "jump" to other


    sections within the same page. You do this with
    named anchors.
     You can do this by performing the steps below:
    1. Create a named anchor first (where the user will end up)

    <h2>Link Targets<a name="link_targets"></a></h2>

    2. Then create the hyperlink (what the user will click on)

    <a href="#link_targets">Link Targets</a>


    HTML Marquees

     An HTML marquee is a scrolling piece of text


    displayed either horizontally across or vertically
    down your webpage depending on the settings.
    This is created by using HTML <marquees> tag.
     A simple syntax to use HTML <marquee> tag is
    as follows:
    <marquee attribute_name="attribute_value"....more
    attributes>
    One or more lines of text message or image
    </marquee>
    The <marquee> Tag Attributes

     Following is the list of important attributes which can be used with


    <marquee> tag.
    Attribute Value Description
    behavior “scroll” Start completely and off one side.
    “slide” Start completely and stop as soon as text
    touches the margin.
    “alternate” Text bounce as soon as touch both side
    margin.
    bgcolor "Color_Code" Specifies the background color.
    direction "left" Left to Right
    "right" Right to Left
    "up" Bottom to Top
    "down" Top to Bottom
    width "size_px" Specifies width in marquee.
    height "size_px" Specifies height in marquee.
    loop "2" Loop Continues in limited times.
    "infinite" Loop Continues in Infinite.
    Attribute Value Description

    scrollamount "3" Specifies Speed to scroll on the text.

    hspace "size_px" Specifies left or right margin for outside marquee.

    vspace "size_px" Specifies top or bottom margin for outside


    marquee.

    Potrebbero piacerti anche